MDL-78428 tiny_media: Implemented embed thumbnail preview

lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js

@@ -1,3 +1,3 @@
-define("tiny_media/embed/embedthumbnailinsert",["exports","../selectors","core/dropzone","editor_tiny/uploader","core/prefetch","core/str","../common","../helpers"],(function(_exports,_selectors,_dropzone,_uploader,_prefetch,_str,_common,_helpers){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.EmbedThumbnailInsert=void 0,_selectors=_interopRequireDefault(_selectors),_dropzone=_interopRequireDefault(_dropzone),_uploader=_interopRequireDefault(_uploader),(0,_prefetch.prefetchStrings)("tiny_media",["insertmediathumbnail","uploading","loadingembedthumbnail","addmediathumbnaildrop"]);_exports.EmbedThumbnailInsert=class{constructor(data){_defineProperty(this,"init",(async mediaData=>{this.mediaData=mediaData;const langStringKeys=["insertmediathumbnail","uploading","loadingembedthumbnail","addmediathumbnaildrop"],langStringvalues=await(0,_str.getStrings)([...langStringKeys].map((key=>({key:key,component:_common.component}))));if(this.langStrings=Object.fromEntries(langStringKeys.map(((key,index)=>[key,langStringvalues[index]]))),this.currentModal.uploadThumbnailModal.setTitle(this.langStrings.insertmediathumbnail),this.canShowDropZone){const dropZoneEle=document.querySelector(_selectors.default.EMBED.elements.dropzoneContainer),dropZone=new _dropzone.default(dropZoneEle,"image/*",(files=>{this.handleUploadedFile(files)}));dropZone.setLabel(this.langStrings.addmediathumbnaildrop),dropZone.init()}})),_defineProperty(this,"filePickerCallback",(params=>{params.url&&(window.console.log("".concat(params.url," has been uploaded.")),(0,_helpers.stopMediaLoading)(this.thumbnailModalRoot,"EMBED"))})),_defineProperty(this,"updateLoaderIcon",(function(root,langStrings){let progress=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;const loaderIcon=root.querySelector(_selectors.default.EMBED.elements.loaderIconContainer+" div");loaderIcon.innerHTML=null!==progress?"".concat(langStrings.uploading," ").concat(Math.round(progress),"%"):langStrings.loadingembedthumbnail})),_defineProperty(this,"handleUploadedFile",(async files=>{try{(0,_helpers.startMediaLoading)(this.thumbnailModalRoot,"EMBED");const fileURL=await(0,_uploader.default)(this.editor,"image",files[0],files[0].name,(progress=>{this.updateLoaderIcon(this.thumbnailModalRoot,this.langStrings,progress)}));this.updateLoaderIcon(this.thumbnailModalRoot,this.langStrings),this.filePickerCallback({url:fileURL})}catch(error){this.thumbnailModalRoot.querySelector(_selectors.default.EMBED.elements.urlWarning).innerHTML=void 0!==error.error?error.error:error,(0,_helpers.showElements)(_selectors.default.EMBED.elements.urlWarning,this.thumbnailModalRoot),(0,_helpers.stopMediaLoading)(this.thumbnailModalRoot,"EMBED")}})),(0,_helpers.setPropertiesFromData)(this,data)}}}));
+define("tiny_media/embed/embedthumbnailinsert",["exports","../selectors","core/dropzone","editor_tiny/uploader","core/prefetch","core/str","../common","../helpers","./embedthumbnailpreview"],(function(_exports,_selectors,_dropzone,_uploader,_prefetch,_str,_common,_helpers,_embedthumbnailpreview){function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.EmbedThumbnailInsert=void 0,_selectors=_interopRequireDefault(_selectors),_dropzone=_interopRequireDefault(_dropzone),_uploader=_interopRequireDefault(_uploader),(0,_prefetch.prefetchStrings)("tiny_media",["insertmediathumbnail","uploading","loadingembedthumbnail","addmediathumbnaildrop"]);_exports.EmbedThumbnailInsert=class{constructor(data){_defineProperty(this,"init",(async mediaData=>{this.mediaData=mediaData;const langStringKeys=["insertmediathumbnail","uploading","loadingembedthumbnail","addmediathumbnaildrop"],langStringvalues=await(0,_str.getStrings)([...langStringKeys].map((key=>({key:key,component:_common.component}))));if(this.langStrings=Object.fromEntries(langStringKeys.map(((key,index)=>[key,langStringvalues[index]]))),this.currentModal.uploadThumbnailModal.setTitle(this.langStrings.insertmediathumbnail),this.canShowDropZone){const dropZoneEle=document.querySelector(_selectors.default.EMBED.elements.dropzoneContainer),dropZone=new _dropzone.default(dropZoneEle,"image/*",(files=>{this.handleUploadedFile(files)}));dropZone.setLabel(this.langStrings.addmediathumbnaildrop),dropZone.init()}})),_defineProperty(this,"loadPreviewThumbnail",(url=>{this.thumbnail=url;let templateContext={bodyTemplate:_selectors.default.EMBED.template.body.mediaThumbnailBody,footerTemplate:_selectors.default.EMBED.template.footer.mediaThumbnailFooter,selector:"EMBED"};Promise.all([(0,_helpers.body)(templateContext,this.thumbnailModalRoot),(0,_helpers.footer)(templateContext,this.thumbnailModalRoot)]).then((()=>{new _embedthumbnailpreview.EmbedThumbnailPreview(this).init(this.mediaData)})).then((()=>{(0,_helpers.stopMediaLoading)(this.thumbnailModalRoot,"EMBED")})).catch((error=>{(0,_helpers.stopMediaLoading)(this.thumbnailModalRoot,"EMBED"),window.console.log(error)}))})),_defineProperty(this,"filePickerCallback",(params=>{params.url&&this.loadPreviewThumbnail(params.url)})),_defineProperty(this,"updateLoaderIcon",(function(root,langStrings){let progress=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;const loaderIcon=root.querySelector(_selectors.default.EMBED.elements.loaderIconContainer+" div");loaderIcon.innerHTML=null!==progress?"".concat(langStrings.uploading," ").concat(Math.round(progress),"%"):langStrings.loadingembedthumbnail})),_defineProperty(this,"handleUploadedFile",(async files=>{try{(0,_helpers.startMediaLoading)(this.thumbnailModalRoot,"EMBED");const fileURL=await(0,_uploader.default)(this.editor,"image",files[0],files[0].name,(progress=>{this.updateLoaderIcon(this.thumbnailModalRoot,this.langStrings,progress)}));this.updateLoaderIcon(this.thumbnailModalRoot,this.langStrings),this.filePickerCallback({url:fileURL})}catch(error){this.thumbnailModalRoot.querySelector(_selectors.default.EMBED.elements.urlWarning).innerHTML=void 0!==error.error?error.error:error,(0,_helpers.showElements)(_selectors.default.EMBED.elements.urlWarning,this.thumbnailModalRoot),(0,_helpers.stopMediaLoading)(this.thumbnailModalRoot,"EMBED")}})),(0,_helpers.setPropertiesFromData)(this,data)}}}));
 
 //# sourceMappingURL=embedthumbnailinsert.min.js.map

lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js

@@ -0,0 +1,3 @@
+define("tiny_media/embed/embedthumbnailpreview",["exports","../selectors","core/str","../helpers"],(function(_exports,_selectors,_str,_helpers){var obj;function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.EmbedThumbnailPreview=void 0,_selectors=(obj=_selectors)&&obj.__esModule?obj:{default:obj};_exports.EmbedThumbnailPreview=class{constructor(data){_defineProperty(this,"init",(mediaData=>{this.mediaData=mediaData,this.currentModal.uploadThumbnailModal.setTitle((0,_str.getString)("thumbnail","tiny_media")),(0,_helpers.sourceTypeChecked)({source:this.thumbnail,root:this.thumbnailModalRoot,fileNameSelector:_selectors.default.EMBED.elements.fileNameLabel}),this.setThumbnailSource()})),_defineProperty(this,"setThumbnailSource",(()=>{this.thumbnailModalRoot.querySelector(_selectors.default.EMBED.elements.preview).src=this.thumbnail})),(0,_helpers.setPropertiesFromData)(this,data)}}}));
+
+//# sourceMappingURL=embedthumbnailpreview.min.js.map

lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"embedthumbnailpreview.min.js","sources":["../../src/embed/embedthumbnailpreview.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Tiny media plugin embed thumbnail preview class.\n *\n * This handles:\n * - Embed thumbnail preview.\n * - Delete thumbnail preview.\n * - Update the embed preview details with new thumbnail.\n *\n * @module      tiny_media/embed/mediathumbnail\n * @copyright   2024 Stevani Andolo <[email protected]>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Selectors from '../selectors';\nimport {getString} from 'core/str';\nimport {\n    sourceTypeChecked,\n    setPropertiesFromData,\n} from '../helpers';\n\nexport class EmbedThumbnailPreview {\n\n    constructor(data) {\n        setPropertiesFromData(this, data); // Creates dynamic properties based on \"data\" param.\n    }\n\n    /**\n     * Init the media thumbnail preview.\n     *\n     * @param {object} mediaData Object of selected media data\n     */\n    init = (mediaData) => {\n        this.mediaData = mediaData;\n        this.currentModal.uploadThumbnailModal.setTitle(getString('thumbnail', 'tiny_media'));\n        sourceTypeChecked({\n            source: this.thumbnail,\n            root: this.thumbnailModalRoot,\n            fileNameSelector: Selectors.EMBED.elements.fileNameLabel,\n        });\n        this.setThumbnailSource();\n    };\n\n    /**\n     * Sets media thumbnail source.\n     */\n    setThumbnailSource = () => {\n        const preview = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.preview);\n        preview.src = this.thumbnail;\n    };\n}\n"],"names":["constructor","data","mediaData","currentModal","uploadThumbnailModal","setTitle","source","this","thumbnail","root","thumbnailModalRoot","fileNameSelector","Selectors","EMBED","elements","fileNameLabel","setThumbnailSource","querySelector","preview","src"],"mappings":"6fAqCIA,YAAYC,mCASJC,iBACCA,UAAYA,eACZC,aAAaC,qBAAqBC,UAAS,kBAAU,YAAa,8CACrD,CACdC,OAAQC,KAAKC,UACbC,KAAMF,KAAKG,mBACXC,iBAAkBC,mBAAUC,MAAMC,SAASC,qBAE1CC,mEAMY,KACDT,KAAKG,mBAAmBO,cAAcL,mBAAUC,MAAMC,SAASI,SACvEC,IAAMZ,KAAKC,gDAxBGD,KAAMN"}

lib/editor/tiny/plugins/media/amd/build/selectors.min.js

@@ -1,3 +1,3 @@
-define("tiny_media/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={IMAGE:{actions:{submit:".tiny_image_urlentrysubmit",imageBrowser:".openimagebrowser",addUrl:".tiny_image_addurl",deleteImage:".tiny_image_deleteicon"},elements:{form:"form.tiny_image_form",alignSettings:".tiny_image_button",alt:".tiny_image_altentry",altWarning:".tiny_image_altwarning",height:".tiny_image_heightentry",width:".tiny_image_widthentry",url:".tiny_image_urlentry",urlWarning:".tiny_image_urlwarning",size:".tiny_image_size",presentation:".tiny_image_presentation",constrain:".tiny_image_constrain",customStyle:".tiny_image_customstyle",preview:".tiny_image_preview",previewBox:".tiny_image_preview_box",loaderIcon:".tiny_image_loader",loaderIconContainer:".tiny_image_loader_container",insertImage:".tiny_image_insert_image",modalFooter:".modal-footer",dropzoneContainer:".tiny_image_dropzone_container",fileInput:"#tiny_image_fileinput",fileNameLabel:".tiny_image_filename",sizeOriginal:".tiny_image_sizeoriginal",sizeCustom:".tiny_image_sizecustom",properties:".tiny_image_properties"},styles:{responsive:"img-fluid"}},EMBED:{actions:{mediaBrowser:".openmediabrowser",addUrl:".tiny_media_add_url",deleteMedia:".tiny_media_delete_icon",showSubtitleCaption:'[data-action="show-subtitle-caption"]',backToMediaDetails:'[data-action="back-to-media-details"]',uploadCustomThumbnail:".upload-custom-thumbnail"},elements:{source:".tiny_media_source",track:".tiny_media_track",posterSource:".tiny_media_poster_source",title:".tiny_media_title_entry",url:".tiny_media_source_url_entry",width:".tiny_media_width_entry",height:".tiny_media_height_entry",trackSource:".tiny_media_track_source",trackLabel:".tiny_media_track_label_entry",trackLang:".tiny_media_track_lang_entry",trackDefault:".tiny_media_track_default",mediaControl:".tiny_media_controls",mediaAutoplay:".tiny_media_autoplay",mediaMute:".tiny_media_mute",mediaLoop:".tiny_media_loop",bodyTemplate:".tiny_media_body_template",footerTemplate:".tiny_media_footer_template",dropzoneContainer:".tiny_media_dropzone_container",fromUrl:".tiny_media_from_url_entry",urlWarning:".tiny_media_url_warning",loaderIcon:".tiny_media_loader",loaderIconContainer:".tiny_media_loader_container",insertMedia:".tiny_media_insert_media",modalFooter:".modal-footer",fileNameLabel:".tiny_media_filename",preview:".tiny_media_preview",previewBox:".tiny_media_preview_box",previewClass:".tiny_media_preview_tag",videoTag:"#video-tag",audioTag:"#audio-tag",sizeOriginal:".tiny_media_sizeoriginal",sizeCustom:".tiny_media_sizecustom",properties:".tiny_media_properties",mediaDetailsBody:"#tiny-media-details-body",mediaDetailsFooter:"#media-details-footer",mediaSubtitleCaptionFooter:"#media-subtitle-caption-footer",mediaSubtitleCaptionBody:"#tiny-media-subtitle-caption-body",mediaMetadataTabPane:".tab-pane-media-metadata"},template:{body:{insertMediaBody:"tiny_media/embed/body/insert_media_body",mediaDetailsBody:"tiny_media/embed/body/media_details_body"},footer:{insertMediaFooter:"tiny_media/embed/footer/insert_media_footer",mediaDetailsFooter:"tiny_media/embed/footer/media_details_footer"}},mediaSites:{youtube:"www.youtube.com"},mediaTypes:["audio","video","link"]},MEDIA_MIME_TYPES:{aac:"audio",avi:"video",midi:"audio",mid:"audio",mp3:"audio",mp4:"video",xmpeg3:"audio",mpeg3:"audio",xmpeg:"video",mpeg:"video",oga:"audio",ogg:"audio",ogv:"video",opus:"audio",ts:"video",wav:"audio",weba:"audio",webm:"video","3gp":"video","3g2":"video"}},_exports.default}));
+define("tiny_media/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={IMAGE:{actions:{submit:".tiny_image_urlentrysubmit",imageBrowser:".openimagebrowser",addUrl:".tiny_image_addurl",deleteImage:".tiny_image_deleteicon"},elements:{form:"form.tiny_image_form",alignSettings:".tiny_image_button",alt:".tiny_image_altentry",altWarning:".tiny_image_altwarning",height:".tiny_image_heightentry",width:".tiny_image_widthentry",url:".tiny_image_urlentry",urlWarning:".tiny_image_urlwarning",size:".tiny_image_size",presentation:".tiny_image_presentation",constrain:".tiny_image_constrain",customStyle:".tiny_image_customstyle",preview:".tiny_image_preview",previewBox:".tiny_image_preview_box",loaderIcon:".tiny_image_loader",loaderIconContainer:".tiny_image_loader_container",insertImage:".tiny_image_insert_image",modalFooter:".modal-footer",dropzoneContainer:".tiny_image_dropzone_container",fileInput:"#tiny_image_fileinput",fileNameLabel:".tiny_image_filename",sizeOriginal:".tiny_image_sizeoriginal",sizeCustom:".tiny_image_sizecustom",properties:".tiny_image_properties"},styles:{responsive:"img-fluid"}},EMBED:{actions:{mediaBrowser:".openmediabrowser",addUrl:".tiny_media_add_url",deleteMedia:".tiny_media_delete_icon",showSubtitleCaption:'[data-action="show-subtitle-caption"]',backToMediaDetails:'[data-action="back-to-media-details"]',uploadCustomThumbnail:".upload-custom-thumbnail"},elements:{source:".tiny_media_source",track:".tiny_media_track",posterSource:".tiny_media_poster_source",title:".tiny_media_title_entry",url:".tiny_media_source_url_entry",width:".tiny_media_width_entry",height:".tiny_media_height_entry",trackSource:".tiny_media_track_source",trackLabel:".tiny_media_track_label_entry",trackLang:".tiny_media_track_lang_entry",trackDefault:".tiny_media_track_default",mediaControl:".tiny_media_controls",mediaAutoplay:".tiny_media_autoplay",mediaMute:".tiny_media_mute",mediaLoop:".tiny_media_loop",bodyTemplate:".tiny_media_body_template",footerTemplate:".tiny_media_footer_template",dropzoneContainer:".tiny_media_dropzone_container",fromUrl:".tiny_media_from_url_entry",urlWarning:".tiny_media_url_warning",loaderIcon:".tiny_media_loader",loaderIconContainer:".tiny_media_loader_container",insertMedia:".tiny_media_insert_media",modalFooter:".modal-footer",fileNameLabel:".tiny_media_filename",preview:".tiny_media_preview",previewBox:".tiny_media_preview_box",previewClass:".tiny_media_preview_tag",videoTag:"#video-tag",audioTag:"#audio-tag",sizeOriginal:".tiny_media_sizeoriginal",sizeCustom:".tiny_media_sizecustom",properties:".tiny_media_properties",mediaDetailsBody:"#tiny-media-details-body",mediaDetailsFooter:"#media-details-footer",mediaSubtitleCaptionFooter:"#media-subtitle-caption-footer",mediaSubtitleCaptionBody:"#tiny-media-subtitle-caption-body",mediaMetadataTabPane:".tab-pane-media-metadata"},template:{body:{insertMediaBody:"tiny_media/embed/body/insert_media_body",mediaDetailsBody:"tiny_media/embed/body/media_details_body",mediaThumbnailBody:"tiny_media/embed/body/media_thumbnail_body"},footer:{insertMediaFooter:"tiny_media/embed/footer/insert_media_footer",mediaDetailsFooter:"tiny_media/embed/footer/media_details_footer",mediaThumbnailFooter:"tiny_media/embed/footer/media_thumbnail_footer"}},mediaSites:{youtube:"www.youtube.com"},mediaTypes:["audio","video","link"]},MEDIA_MIME_TYPES:{aac:"audio",avi:"video",midi:"audio",mid:"audio",mp3:"audio",mp4:"video",xmpeg3:"audio",mpeg3:"audio",xmpeg:"video",mpeg:"video",oga:"audio",ogg:"audio",ogv:"video",opus:"audio",ts:"video",wav:"audio",weba:"audio",webm:"video","3gp":"video","3g2":"video"}},_exports.default}));
 
 //# sourceMappingURL=selectors.min.js.map

lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailinsert.js

@@ -34,7 +34,10 @@ import {
     startMediaLoading,
     stopMediaLoading,
     setPropertiesFromData,
+    body,
+    footer,
 } from '../helpers';
+import {EmbedThumbnailPreview} from './embedthumbnailpreview';
 
 prefetchStrings('tiny_media', [
     'insertmediathumbnail',
@@ -81,6 +84,34 @@ export class EmbedThumbnailInsert {
         }
     };
 
+    /**
+     * Load and display a preview thumbnail based on the provided URL, and handles thumbnail loading events.
+     *
+     * @param {string} url - The URL of the thumbnail to load and display.
+     */
+    loadPreviewThumbnail = (url) => {
+        this.thumbnail = url;
+
+        let templateContext = {
+            bodyTemplate: Selectors.EMBED.template.body.mediaThumbnailBody,
+            footerTemplate: Selectors.EMBED.template.footer.mediaThumbnailFooter,
+            selector: 'EMBED',
+        };
+        Promise.all([body(templateContext, this.thumbnailModalRoot), footer(templateContext, this.thumbnailModalRoot)])
+            .then(() => {
+                const mediaThumbnail = new EmbedThumbnailPreview(this);
+                mediaThumbnail.init(this.mediaData);
+                return;
+            }).then(() => {
+                stopMediaLoading(this.thumbnailModalRoot, 'EMBED');
+                return;
+            })
+            .catch(error => {
+                stopMediaLoading(this.thumbnailModalRoot, 'EMBED');
+                window.console.log(error);
+            });
+    };
+
     /**
      * Handles media preview on file picker callback.
      *
@@ -88,8 +119,7 @@ export class EmbedThumbnailInsert {
      */
     filePickerCallback = (params) => {
         if (params.url) {
-            window.console.log(`${params.url} has been uploaded.`);
-            stopMediaLoading(this.thumbnailModalRoot, 'EMBED');
+            this.loadPreviewThumbnail(params.url);
         }
     };
 

lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailpreview.js

@@ -0,0 +1,65 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Tiny media plugin embed thumbnail preview class.
+ *
+ * This handles:
+ * - Embed thumbnail preview.
+ * - Delete thumbnail preview.
+ * - Update the embed preview details with new thumbnail.
+ *
+ * @module      tiny_media/embed/mediathumbnail
+ * @copyright   2024 Stevani Andolo <[email protected]>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import Selectors from '../selectors';
+import {getString} from 'core/str';
+import {
+    sourceTypeChecked,
+    setPropertiesFromData,
+} from '../helpers';
+
+export class EmbedThumbnailPreview {
+
+    constructor(data) {
+        setPropertiesFromData(this, data); // Creates dynamic properties based on "data" param.
+    }
+
+    /**
+     * Init the media thumbnail preview.
+     *
+     * @param {object} mediaData Object of selected media data
+     */
+    init = (mediaData) => {
+        this.mediaData = mediaData;
+        this.currentModal.uploadThumbnailModal.setTitle(getString('thumbnail', 'tiny_media'));
+        sourceTypeChecked({
+            source: this.thumbnail,
+            root: this.thumbnailModalRoot,
+            fileNameSelector: Selectors.EMBED.elements.fileNameLabel,
+        });
+        this.setThumbnailSource();
+    };
+
+    /**
+     * Sets media thumbnail source.
+     */
+    setThumbnailSource = () => {
+        const preview = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.preview);
+        preview.src = this.thumbnail;
+    };
+}

lib/editor/tiny/plugins/media/amd/src/selectors.js

@@ -112,10 +112,12 @@ export default {
             body: {
                 insertMediaBody: 'tiny_media/embed/body/insert_media_body',
                 mediaDetailsBody: 'tiny_media/embed/body/media_details_body',
+                mediaThumbnailBody: 'tiny_media/embed/body/media_thumbnail_body',
             },
             footer: {
                 insertMediaFooter: 'tiny_media/embed/footer/insert_media_footer',
                 mediaDetailsFooter: 'tiny_media/embed/footer/media_details_footer',
+                mediaThumbnailFooter: 'tiny_media/embed/footer/media_thumbnail_footer',
             },
         },
         mediaSites: {

lib/editor/tiny/plugins/media/lang/en/tiny_media.php

@@ -107,6 +107,7 @@ $string['subtitles_help'] = 'Subtitles may be used to provide a transcription or
 $string['subtitles'] = 'Subtitles';
 $string['subtitlesandcaptions'] = 'Subtitles and Captions';
 $string['subtitlessourcelabel'] = 'Subtitle track URL';
+$string['thumbnail'] = 'Media thumbnail';
 $string['tracks_help'] = 'Subtitles, captions, chapters and descriptions can be added via a WebVTT (Web Video Text Tracks) format file. Track labels will be shown in the selection drop-down menu. For each type of track, any track set as default will be pre-selected at the start of the video.';
 $string['tracks'] = 'Subtitles and captions';
 $string['unusedfilesdesc'] = 'The following embedded files are not used in the text area:';