Implemented and added media chooser into the edit translation workflow for audio and video files

tox.ini

@@ -82,6 +82,7 @@ basepython = python3.12
 deps =
     wagtail>=5.2,<6.3
     Django>=4.2,<5.2
+    wagtailmedia>=0.0.0,<2.0
 
 commands_pre =
     python {toxinidir}/testmanage.py makemigrations

wagtail_localize/static_src/common/components/MediaChooser/index.tsx

@@ -0,0 +1,78 @@
+import React, { FunctionComponent } from 'react';
+import gettext from 'gettext';
+
+interface MediaAPI {
+    result: {
+        id: number
+        title: string;
+        edit_url: string;
+    };
+}
+
+interface MediaChooserProps {
+    adminBaseUrl: string;
+    mediaId: number | null;
+}
+
+const MediaChooser: FunctionComponent<MediaChooserProps> = ({
+    adminBaseUrl,
+    mediaId,
+}) => {
+    const [mediaInfo, setMediaInfo] = React.useState<MediaAPI | null>(null);
+
+    React.useEffect(() => {
+        setMediaInfo(null);
+        if (mediaId) {
+            fetch(`${adminBaseUrl}media/chooser/${mediaId}/`)
+                .then((response) => response.json())
+                .then(setMediaInfo);
+        }
+    }, [mediaId]);
+
+    // Render
+    let classNames = ['chooser', 'media-chooser'];
+    let inner;
+    if (mediaId) {
+        if (mediaInfo) {
+            inner = (
+                <div className="chosen">
+                    <div className="preview-media">
+                        <strong>{mediaInfo.result.title} (ID: {mediaInfo.result.id})</strong>
+                    </div>
+
+                    <ul className="actions" style={{ listStyleType: 'none' }}>
+                        <li>
+                            <a
+                                href={`${mediaInfo.result.edit_url}`}
+                                className="edit-link button button-small button-secondary"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                {gettext('Edit this media')}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            );
+        } else {
+            inner = <p>{gettext('Fetching media information...')}</p>;
+        }
+    } else {
+        classNames.push('blank');
+
+        inner = (
+            <div className="unchosen">
+                <button
+                    type="button"
+                    className="button action-choose button-small button-secondary"
+                >
+                    {gettext('Choose a media')}
+                </button>
+            </div>
+        );
+    }
+
+    return <div className={classNames.join(' ')}>{inner}</div>;
+};
+
+export default MediaChooser;

wagtail_localize/static_src/editor/components/TranslationEditor/index.tsx

@@ -61,7 +61,7 @@ export interface SnippetChooserWidget {
 }
 
 export interface OtherWidgets {
-    type: 'text' | 'image_chooser' | 'document_chooser' | 'unknown';
+    type: 'text' | 'image_chooser' | 'document_chooser' | 'media_chooser' | 'unknown';
 }
 
 export interface SegmentCommon {

wagtail_localize/static_src/editor/components/TranslationEditor/segments.tsx

@@ -7,6 +7,7 @@ import Avatar from '../../../common/components/Avatar';
 
 import PageChooser from '../../../common/components/PageChooser';
 import ImageChooser from '../../../common/components/ImageChooser';
+import MediaChooser from '../../../common/components/MediaChooser';
 import DocumentChooser from '../../../common/components/DocumentChooser';
 import SnippetChooser from '../../../common/components/SnippetChooser';
 
@@ -705,7 +706,38 @@ const EditorSynchronisedValueSegment: FunctionComponent<
                 imageId={(override && override.value) || segment.value}
             />
         );
-    } else if (widget.type == 'document_chooser') {
+    } else if (widget.type == 'media_chooser') {
+        const onClickChangeMedia = () => {
+            return (window as any).ModalWorkflow({
+                url: (window as any).chooserUrls.mediaChooser,
+                onload: (window as any).MEDIA_CHOOSER_MODAL_ONLOAD_HANDLERS,
+                responses: {
+                    mediaChosen: function (responseData: any) {
+                        saveOverride(
+                            segment,
+                            responseData.id,
+                            csrfToken,
+                            dispatch
+                        );
+                    },
+                },
+            });
+        };
+        if (!isLocked) {
+            buttons.push(
+                <ActionButton onClick={onClickChangeMedia}>
+                    {gettext('Change media')}
+                </ActionButton>
+            )
+        }
+        value = (
+            <MediaChooser
+                adminBaseUrl={adminBaseUrl}
+                mediaId={(override && override.value) || segment.value}
+            />
+        )
+    }
+    else if (widget.type == 'document_chooser') {
         const onClickChangeDocument = () => {
             (window as any).ModalWorkflow({
                 url: (window as any).chooserUrls.documentChooser,
@@ -993,7 +1025,6 @@ const EditorSegmentList: FunctionComponent<EditorSegmentListProps> = ({
             );
         }
     );
-
     return <SegmentList>{segmentRendered}</SegmentList>;
 };
 

wagtail_localize/templates/wagtail_localize/admin/edit_translation.html

@@ -53,6 +53,7 @@
             window.chooserUrls = {
                 imageChooser: "{% url "wagtailimages_chooser:choose" %}",
                 documentChooser: "{% url "wagtaildocs_chooser:choose" %}",
+                mediaChooser: "{% url "wagtailmedia:chooser" %}",
                 pageChooser: "{% url "wagtailadmin_choose_page" %}",
             }
         }
@@ -65,6 +66,8 @@
     <script src="{% versioned_static 'wagtaildocs/js/document-chooser-modal.js' %}"></script>
     <script src="{% versioned_static 'wagtaildocs/js/document-chooser.js' %}"></script>
     <script src="{% versioned_static 'wagtailadmin/js/chooser-modal.js' %}"></script>
+    <script src="{% versioned_static 'wagtailmedia/js/media-chooser-modal.js' %}"></script>
+    <script src="{% versioned_static 'wagtailmedia/js/tabs.js' %}"></script>
     <script src="{% versioned_static 'wagtailsnippets/js/snippet-chooser.js' %}"></script>
     <script src="{% versioned_static 'wagtail_localize/js/wagtail-localize.js' %}"></script>
 {% endblock %}

wagtail_localize/test/settings.py

@@ -63,6 +63,7 @@
     "wagtail.documents",
     "wagtail.images",
     "wagtail.search",
+    "wagtailmedia",
     "wagtail.admin",
     "wagtail.api.v2",
     "wagtail.contrib.routable_page",

wagtail_localize/views/edit_translation.py

@@ -51,6 +51,7 @@
 from wagtail.snippets.models import get_snippet_models
 from wagtail.snippets.permissions import get_permission_name, user_can_edit_snippet_type
 from wagtail.utils.decorators import xframe_options_sameorigin_override
+from wagtailmedia.blocks import AudioChooserBlock, VideoChooserBlock
 
 from wagtail_localize.compat import DATE_FORMAT
 from wagtail_localize.machine_translators import get_machine_translator
@@ -366,6 +367,9 @@ def widget_from_block(block, content_components=None):
         elif isinstance(block, ImageChooserBlock):
             return {"type": "image_chooser"}
 
+        elif isinstance(block, AudioChooserBlock) or isinstance(block, VideoChooserBlock):
+            return {"type": "media_chooser"}
+
         elif isinstance(block, SnippetChooserBlock):
             chooser_url = reverse(
                 f"wagtailsnippetchoosers_{block.target_model._meta.app_label}_{block.target_model._meta.model_name}:choose"