MDL-78428 tiny_media: Implemented a delete embed preview

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"},elements:{source:".tiny_media_source",track:".tiny_media_track",posterSource:".tiny_media_poster_source",title:".tiny_media_title_entry",url:".tiny_media_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"},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"},elements:{source:".tiny_media_source",track:".tiny_media_track",posterSource:".tiny_media_poster_source",title:".tiny_media_title_entry",url:".tiny_media_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"},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}));
 
 //# sourceMappingURL=selectors.min.js.map

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

@@ -36,6 +36,7 @@ import {
 } from '../helpers';
 import {EmbedHandler} from './embedhandler';
 import {MediaBase} from '../mediabase';
+import Notification from 'core/notification';
 
 export class EmbedPreview extends MediaBase {
 
@@ -183,6 +184,26 @@ export class EmbedPreview extends MediaBase {
         showElements(Selectors.EMBED.elements.bodyTemplate, this.root);
     };
 
+    /**
+     * Deletes the media after confirming with the user and loads the insert media page.
+     */
+    deleteMedia = () => {
+        Notification.deleteCancelPromise(
+            getString('deletemedia', 'tiny_media'),
+            getString('deletemediawarning', 'tiny_media'),
+        ).then(() => {
+            // Marked the preview was deleted.
+            this.isEmbedPreviewDeleted = true;
+
+            // Reset media upload form.
+            (new EmbedHandler(this)).resetUploadForm();
+            delete this.mediaData;
+            return;
+        }).catch(error => {
+            window.console.log(error);
+        });
+    };
+
     /**
      * Only registers event listeners for new loaded elements in embed preview modal.
      */
@@ -239,5 +260,13 @@ export class EmbedPreview extends MediaBase {
                 this.autoAdjustSize(true);
             });
         }
+
+        // Handle media preview delete.
+        const deleteMedia = this.root.querySelector(Selectors.EMBED.actions.deleteMedia);
+        if (deleteMedia) {
+            deleteMedia.addEventListener('click', () => {
+                this.deleteMedia();
+            });
+        }
     };
 }

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

@@ -63,6 +63,7 @@ export default {
         actions: {
             mediaBrowser: '.openmediabrowser',
             addUrl: '.tiny_media_add_url',
+            deleteMedia: '.tiny_media_delete_icon',
         },
         elements: {
             source: '.tiny_media_source',

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

@@ -46,6 +46,8 @@ $string['customsize_help'] = 'For best viewing experience, the video\'s width an
 $string['default'] = 'Default';
 $string['deleteimage'] = 'Delete image';
 $string['deleteimagewarning'] = 'Are you sure you want to remove the image?';
+$string['deletemedia'] = 'Delete media';
+$string['deletemediawarning'] = 'Are you sure you want to remove the media?';
 $string['deleteselected'] = 'Delete selected files';
 $string['descriptions_help'] = 'Audio descriptions may be used to provide a narration which explains visual details not apparent from the audio alone.';
 $string['descriptions'] = 'Descriptions';

lib/editor/tiny/plugins/media/styles.css

@@ -61,7 +61,8 @@ iframe.mm_iframe {
     position: relative;
 }
 
-.tiny_image_form .tiny_image_deleteicon {
+.tiny_image_form .tiny_image_deleteicon,
+.tiny_media_form .tiny_media_delete_icon {
     position: absolute;
     top: 5px;
     right: 5px;
@@ -74,7 +75,8 @@ iframe.mm_iframe {
     padding: 4px 5px 5px 9px;
 }
 
-.tiny_image_form .tiny_image_deleteicon .fa-trash {
+.tiny_image_form .tiny_image_deleteicon .fa-trash,
+.tiny_media_form .tiny_media_delete_icon .fa-trash {
     color: #1d2125;
 }