From d7c122f90aab69cbffceea6e494f0d19848e82a4 Mon Sep 17 00:00:00 2001 From: Stevani Andolo Date: Thu, 1 Aug 2024 08:14:51 +0800 Subject: [PATCH] MDL-78428 tiny_media: Implemented embed thumbnail preview --- .../build/embed/embedthumbnailinsert.min.js | 2 +- .../embed/embedthumbnailinsert.min.js.map | 2 +- .../build/embed/embedthumbnailpreview.min.js | 3 + .../embed/embedthumbnailpreview.min.js.map | 1 + .../plugins/media/amd/build/selectors.min.js | 2 +- .../media/amd/build/selectors.min.js.map | 2 +- .../amd/src/embed/embedthumbnailinsert.js | 34 +++++++++- .../amd/src/embed/embedthumbnailpreview.js | 65 +++++++++++++++++++ .../tiny/plugins/media/amd/src/selectors.js | 2 + .../tiny/plugins/media/lang/en/tiny_media.php | 1 + 10 files changed, 108 insertions(+), 6 deletions(-) create mode 100644 lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js create mode 100644 lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js.map create mode 100644 lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailpreview.js diff --git a/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js b/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js index 5458cfff7af..b1be1227003 100644 --- a/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js +++ b/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 \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js.map b/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js.map index 18782d61542..e8f1813a2fc 100644 --- a/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js.map +++ b/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailinsert.min.js.map @@ -1 +1 @@ -{"version":3,"file":"embedthumbnailinsert.min.js","sources":["../../src/embed/embedthumbnailinsert.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 .\n\n/**\n * Tiny media plugin embed thumbnail upload class.\n *\n * This handles the embed thumbnail upload using drag-drop.\n *\n * @module tiny_media/embed/embedthumbnailinsert\n * @copyright 2024 Stevani Andolo \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Selectors from '../selectors';\nimport Dropzone from 'core/dropzone';\nimport uploadFile from 'editor_tiny/uploader';\nimport {prefetchStrings} from 'core/prefetch';\nimport {getStrings} from 'core/str';\nimport {component} from \"../common\";\nimport {\n showElements,\n startMediaLoading,\n stopMediaLoading,\n setPropertiesFromData,\n} from '../helpers';\n\nprefetchStrings('tiny_media', [\n 'insertmediathumbnail',\n 'uploading',\n 'loadingembedthumbnail',\n 'addmediathumbnaildrop',\n]);\n\nexport class EmbedThumbnailInsert {\n\n constructor(data) {\n setPropertiesFromData(this, data); // Creates dynamic properties based on \"data\" param.\n }\n\n /**\n * Init the dropzone and lang strings.\n *\n * @param {object} mediaData Object of selected media data\n */\n init = async(mediaData) => {\n this.mediaData = mediaData; // Current selected media data passed from embedPreview.\n const langStringKeys = [\n 'insertmediathumbnail',\n 'uploading',\n 'loadingembedthumbnail',\n 'addmediathumbnaildrop',\n ];\n const langStringvalues = await getStrings([...langStringKeys].map((key) => ({key, component})));\n this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringvalues[index]]));\n this.currentModal.uploadThumbnailModal.setTitle(this.langStrings.insertmediathumbnail);\n\n // Let's init the dropzone if canShowDropZone is true.\n if (this.canShowDropZone) {\n const dropZoneEle = document.querySelector(Selectors.EMBED.elements.dropzoneContainer);\n const dropZone = new Dropzone(\n dropZoneEle,\n 'image/*',\n files => {\n this.handleUploadedFile(files);\n }\n );\n dropZone.setLabel(this.langStrings.addmediathumbnaildrop);\n dropZone.init();\n }\n };\n\n /**\n * Handles media preview on file picker callback.\n *\n * @param {object} params Object of uploaded file\n */\n filePickerCallback = (params) => {\n if (params.url) {\n window.console.log(`${params.url} has been uploaded.`);\n stopMediaLoading(this.thumbnailModalRoot, 'EMBED');\n }\n };\n\n /**\n * Updates the content of the loader icon.\n *\n * @param {HTMLElement} root - The root element containing the loader icon.\n * @param {object} langStrings - An object containing language strings.\n * @param {number|null} progress - The progress percentage (optional).\n */\n updateLoaderIcon = (root, langStrings, progress = null) => {\n const loaderIcon = root.querySelector(Selectors.EMBED.elements.loaderIconContainer + ' div');\n loaderIcon.innerHTML = (progress !== null) ?\n `${langStrings.uploading} ${Math.round(progress)}%` :\n langStrings.loadingembedthumbnail;\n };\n\n /**\n * Handles the uploaded file, initiates the upload process, and updates the UI during the upload.\n *\n * @param {FileList} files - The list of files to upload (usually from a file input field).\n * @returns {Promise} A promise that resolves when the file is uploaded and processed.\n */\n handleUploadedFile = async(files) => {\n try {\n startMediaLoading(this.thumbnailModalRoot, 'EMBED');\n const fileURL = await uploadFile(this.editor, 'image', files[0], files[0].name, (progress) => {\n this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings, progress);\n });\n // Set the loader icon content to \"loading\" after the file upload completes.\n this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings);\n this.filePickerCallback({url: fileURL});\n } catch (error) {\n // Handle the error.\n const urlWarningLabelEle = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.urlWarning);\n urlWarningLabelEle.innerHTML = error.error !== undefined ? error.error : error;\n showElements(Selectors.EMBED.elements.urlWarning, this.thumbnailModalRoot);\n stopMediaLoading(this.thumbnailModalRoot, 'EMBED');\n }\n };\n}\n"],"names":["constructor","data","async","mediaData","langStringKeys","langStringvalues","map","key","component","langStrings","Object","fromEntries","index","currentModal","uploadThumbnailModal","setTitle","this","insertmediathumbnail","canShowDropZone","dropZoneEle","document","querySelector","Selectors","EMBED","elements","dropzoneContainer","dropZone","Dropzone","files","handleUploadedFile","setLabel","addmediathumbnaildrop","init","params","url","window","console","log","thumbnailModalRoot","root","progress","loaderIcon","loaderIconContainer","innerHTML","uploading","Math","round","loadingembedthumbnail","fileURL","editor","name","updateLoaderIcon","filePickerCallback","error","urlWarning","undefined"],"mappings":"+uBAsCgB,aAAc,CAC1B,uBACA,YACA,wBACA,8DAKAA,YAAYC,mCASLC,MAAAA,iBACEC,UAAYA,gBACXC,eAAiB,CACnB,uBACA,YACA,wBACA,yBAEEC,uBAAyB,mBAAW,IAAID,gBAAgBE,KAAKC,OAAUA,IAAAA,IAAKC,UAAAA,+BAC7EC,YAAcC,OAAOC,YAAYP,eAAeE,KAAI,CAACC,IAAKK,QAAU,CAACL,IAAKF,iBAAiBO,gBAC3FC,aAAaC,qBAAqBC,SAASC,KAAKP,YAAYQ,sBAG7DD,KAAKE,gBAAiB,OAChBC,YAAcC,SAASC,cAAcC,mBAAUC,MAAMC,SAASC,mBAC9DC,SAAW,IAAIC,kBACjBR,YACA,WACAS,aACSC,mBAAmBD,UAGhCF,SAASI,SAASd,KAAKP,YAAYsB,uBACnCL,SAASM,sDASKC,SACdA,OAAOC,MACPC,OAAOC,QAAQC,cAAOJ,OAAOC,0DACZlB,KAAKsB,mBAAoB,sDAW/B,SAACC,KAAM9B,iBAAa+B,gEAAW,WACxCC,WAAaF,KAAKlB,cAAcC,mBAAUC,MAAMC,SAASkB,oBAAsB,QACrFD,WAAWE,UAA0B,OAAbH,mBACE/B,YAAYmC,sBAAaC,KAAKC,MAAMN,eACvC/B,YAAYsC,oEASlB7C,MAAAA,2CAEKc,KAAKsB,mBAAoB,eACrCU,cAAgB,qBAAWhC,KAAKiC,OAAQ,QAASrB,MAAM,GAAIA,MAAM,GAAGsB,MAAOV,gBACxEW,iBAAiBnC,KAAKsB,mBAAoBtB,KAAKP,YAAa+B,kBAGhEW,iBAAiBnC,KAAKsB,mBAAoBtB,KAAKP,kBAC/C2C,mBAAmB,CAAClB,IAAKc,UAChC,MAAOK,OAEsBrC,KAAKsB,mBAAmBjB,cAAcC,mBAAUC,MAAMC,SAAS8B,YACvEX,eAA4BY,IAAhBF,MAAMA,MAAsBA,MAAMA,MAAQA,gCAC5D/B,mBAAUC,MAAMC,SAAS8B,WAAYtC,KAAKsB,kDACtCtB,KAAKsB,mBAAoB,gDAjFxBtB,KAAMf"} \ No newline at end of file +{"version":3,"file":"embedthumbnailinsert.min.js","sources":["../../src/embed/embedthumbnailinsert.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 .\n\n/**\n * Tiny media plugin embed thumbnail upload class.\n *\n * This handles the embed thumbnail upload using drag-drop.\n *\n * @module tiny_media/embed/embedthumbnailinsert\n * @copyright 2024 Stevani Andolo \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Selectors from '../selectors';\nimport Dropzone from 'core/dropzone';\nimport uploadFile from 'editor_tiny/uploader';\nimport {prefetchStrings} from 'core/prefetch';\nimport {getStrings} from 'core/str';\nimport {component} from \"../common\";\nimport {\n showElements,\n startMediaLoading,\n stopMediaLoading,\n setPropertiesFromData,\n body,\n footer,\n} from '../helpers';\nimport {EmbedThumbnailPreview} from './embedthumbnailpreview';\n\nprefetchStrings('tiny_media', [\n 'insertmediathumbnail',\n 'uploading',\n 'loadingembedthumbnail',\n 'addmediathumbnaildrop',\n]);\n\nexport class EmbedThumbnailInsert {\n\n constructor(data) {\n setPropertiesFromData(this, data); // Creates dynamic properties based on \"data\" param.\n }\n\n /**\n * Init the dropzone and lang strings.\n *\n * @param {object} mediaData Object of selected media data\n */\n init = async(mediaData) => {\n this.mediaData = mediaData; // Current selected media data passed from embedPreview.\n const langStringKeys = [\n 'insertmediathumbnail',\n 'uploading',\n 'loadingembedthumbnail',\n 'addmediathumbnaildrop',\n ];\n const langStringvalues = await getStrings([...langStringKeys].map((key) => ({key, component})));\n this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringvalues[index]]));\n this.currentModal.uploadThumbnailModal.setTitle(this.langStrings.insertmediathumbnail);\n\n // Let's init the dropzone if canShowDropZone is true.\n if (this.canShowDropZone) {\n const dropZoneEle = document.querySelector(Selectors.EMBED.elements.dropzoneContainer);\n const dropZone = new Dropzone(\n dropZoneEle,\n 'image/*',\n files => {\n this.handleUploadedFile(files);\n }\n );\n dropZone.setLabel(this.langStrings.addmediathumbnaildrop);\n dropZone.init();\n }\n };\n\n /**\n * Load and display a preview thumbnail based on the provided URL, and handles thumbnail loading events.\n *\n * @param {string} url - The URL of the thumbnail to load and display.\n */\n loadPreviewThumbnail = (url) => {\n this.thumbnail = url;\n\n let templateContext = {\n bodyTemplate: Selectors.EMBED.template.body.mediaThumbnailBody,\n footerTemplate: Selectors.EMBED.template.footer.mediaThumbnailFooter,\n selector: 'EMBED',\n };\n Promise.all([body(templateContext, this.thumbnailModalRoot), footer(templateContext, this.thumbnailModalRoot)])\n .then(() => {\n const mediaThumbnail = new EmbedThumbnailPreview(this);\n mediaThumbnail.init(this.mediaData);\n return;\n }).then(() => {\n stopMediaLoading(this.thumbnailModalRoot, 'EMBED');\n return;\n })\n .catch(error => {\n stopMediaLoading(this.thumbnailModalRoot, 'EMBED');\n window.console.log(error);\n });\n };\n\n /**\n * Handles media preview on file picker callback.\n *\n * @param {object} params Object of uploaded file\n */\n filePickerCallback = (params) => {\n if (params.url) {\n this.loadPreviewThumbnail(params.url);\n }\n };\n\n /**\n * Updates the content of the loader icon.\n *\n * @param {HTMLElement} root - The root element containing the loader icon.\n * @param {object} langStrings - An object containing language strings.\n * @param {number|null} progress - The progress percentage (optional).\n */\n updateLoaderIcon = (root, langStrings, progress = null) => {\n const loaderIcon = root.querySelector(Selectors.EMBED.elements.loaderIconContainer + ' div');\n loaderIcon.innerHTML = (progress !== null) ?\n `${langStrings.uploading} ${Math.round(progress)}%` :\n langStrings.loadingembedthumbnail;\n };\n\n /**\n * Handles the uploaded file, initiates the upload process, and updates the UI during the upload.\n *\n * @param {FileList} files - The list of files to upload (usually from a file input field).\n * @returns {Promise} A promise that resolves when the file is uploaded and processed.\n */\n handleUploadedFile = async(files) => {\n try {\n startMediaLoading(this.thumbnailModalRoot, 'EMBED');\n const fileURL = await uploadFile(this.editor, 'image', files[0], files[0].name, (progress) => {\n this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings, progress);\n });\n // Set the loader icon content to \"loading\" after the file upload completes.\n this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings);\n this.filePickerCallback({url: fileURL});\n } catch (error) {\n // Handle the error.\n const urlWarningLabelEle = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.urlWarning);\n urlWarningLabelEle.innerHTML = error.error !== undefined ? error.error : error;\n showElements(Selectors.EMBED.elements.urlWarning, this.thumbnailModalRoot);\n stopMediaLoading(this.thumbnailModalRoot, 'EMBED');\n }\n };\n}\n"],"names":["constructor","data","async","mediaData","langStringKeys","langStringvalues","map","key","component","langStrings","Object","fromEntries","index","currentModal","uploadThumbnailModal","setTitle","this","insertmediathumbnail","canShowDropZone","dropZoneEle","document","querySelector","Selectors","EMBED","elements","dropzoneContainer","dropZone","Dropzone","files","handleUploadedFile","setLabel","addmediathumbnaildrop","init","url","thumbnail","templateContext","bodyTemplate","template","body","mediaThumbnailBody","footerTemplate","footer","mediaThumbnailFooter","selector","Promise","all","thumbnailModalRoot","then","EmbedThumbnailPreview","catch","error","window","console","log","params","loadPreviewThumbnail","root","progress","loaderIcon","loaderIconContainer","innerHTML","uploading","Math","round","loadingembedthumbnail","fileURL","editor","name","updateLoaderIcon","filePickerCallback","urlWarning","undefined"],"mappings":"gyBAyCgB,aAAc,CAC1B,uBACA,YACA,wBACA,8DAKAA,YAAYC,mCASLC,MAAAA,iBACEC,UAAYA,gBACXC,eAAiB,CACnB,uBACA,YACA,wBACA,yBAEEC,uBAAyB,mBAAW,IAAID,gBAAgBE,KAAKC,OAAUA,IAAAA,IAAKC,UAAAA,+BAC7EC,YAAcC,OAAOC,YAAYP,eAAeE,KAAI,CAACC,IAAKK,QAAU,CAACL,IAAKF,iBAAiBO,gBAC3FC,aAAaC,qBAAqBC,SAASC,KAAKP,YAAYQ,sBAG7DD,KAAKE,gBAAiB,OAChBC,YAAcC,SAASC,cAAcC,mBAAUC,MAAMC,SAASC,mBAC9DC,SAAW,IAAIC,kBACjBR,YACA,WACAS,aACSC,mBAAmBD,UAGhCF,SAASI,SAASd,KAAKP,YAAYsB,uBACnCL,SAASM,wDASOC,WACfC,UAAYD,QAEbE,gBAAkB,CAClBC,aAAcd,mBAAUC,MAAMc,SAASC,KAAKC,mBAC5CC,eAAgBlB,mBAAUC,MAAMc,SAASI,OAAOC,qBAChDC,SAAU,SAEdC,QAAQC,IAAI,EAAC,iBAAKV,gBAAiBnB,KAAK8B,qBAAqB,mBAAOX,gBAAiBnB,KAAK8B,sBACrFC,MAAK,KACqB,IAAIC,6CAAsBhC,MAClCgB,KAAKhB,KAAKb,cAE1B4C,MAAK,mCACa/B,KAAK8B,mBAAoB,YAG7CG,OAAMC,sCACclC,KAAK8B,mBAAoB,SAC1CK,OAAOC,QAAQC,IAAIH,wDASTI,SACdA,OAAOrB,UACFsB,qBAAqBD,OAAOrB,iDAWtB,SAACuB,KAAM/C,iBAAagD,gEAAW,WACxCC,WAAaF,KAAKnC,cAAcC,mBAAUC,MAAMC,SAASmC,oBAAsB,QACrFD,WAAWE,UAA0B,OAAbH,mBACEhD,YAAYoD,sBAAaC,KAAKC,MAAMN,eACvChD,YAAYuD,oEASlB9D,MAAAA,2CAEKc,KAAK8B,mBAAoB,eACrCmB,cAAgB,qBAAWjD,KAAKkD,OAAQ,QAAStC,MAAM,GAAIA,MAAM,GAAGuC,MAAOV,gBACxEW,iBAAiBpD,KAAK8B,mBAAoB9B,KAAKP,YAAagD,kBAGhEW,iBAAiBpD,KAAK8B,mBAAoB9B,KAAKP,kBAC/C4D,mBAAmB,CAACpC,IAAKgC,UAChC,MAAOf,OAEsBlC,KAAK8B,mBAAmBzB,cAAcC,mBAAUC,MAAMC,SAAS8C,YACvEV,eAA4BW,IAAhBrB,MAAMA,MAAsBA,MAAMA,MAAQA,gCAC5D5B,mBAAUC,MAAMC,SAAS8C,WAAYtD,KAAK8B,kDACtC9B,KAAK8B,mBAAoB,gDA5GxB9B,KAAMf"} \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js b/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js new file mode 100644 index 00000000000..e570dcfa6f6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js.map b/lib/editor/tiny/plugins/media/amd/build/embed/embedthumbnailpreview.min.js.map new file mode 100644 index 00000000000..072cac9b73b --- /dev/null +++ b/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 .\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 \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"} \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/build/selectors.min.js b/lib/editor/tiny/plugins/media/amd/build/selectors.min.js index 6dfb6ca5cc7..6fb52f330a3 100644 --- a/lib/editor/tiny/plugins/media/amd/build/selectors.min.js +++ b/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 \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/build/selectors.min.js.map b/lib/editor/tiny/plugins/media/amd/build/selectors.min.js.map index 25a068eb037..1b356ff2ef2 100644 --- a/lib/editor/tiny/plugins/media/amd/build/selectors.min.js.map +++ b/lib/editor/tiny/plugins/media/amd/build/selectors.min.js.map @@ -1 +1 @@ -{"version":3,"file":"selectors.min.js","sources":["../src/selectors.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 .\n\n/**\n * Tiny Media plugin helper function to build queryable data selectors.\n *\n * @module tiny_media/selectors\n * @copyright 2022 Huong Nguyen \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n IMAGE: {\n actions: {\n submit: '.tiny_image_urlentrysubmit',\n imageBrowser: '.openimagebrowser',\n addUrl: '.tiny_image_addurl',\n deleteImage: '.tiny_image_deleteicon',\n },\n elements: {\n form: 'form.tiny_image_form',\n alignSettings: '.tiny_image_button',\n alt: '.tiny_image_altentry',\n altWarning: '.tiny_image_altwarning',\n height: '.tiny_image_heightentry',\n width: '.tiny_image_widthentry',\n url: '.tiny_image_urlentry',\n urlWarning: '.tiny_image_urlwarning',\n size: '.tiny_image_size',\n presentation: '.tiny_image_presentation',\n constrain: '.tiny_image_constrain',\n customStyle: '.tiny_image_customstyle',\n preview: '.tiny_image_preview',\n previewBox: '.tiny_image_preview_box',\n loaderIcon: '.tiny_image_loader',\n loaderIconContainer: '.tiny_image_loader_container',\n insertImage: '.tiny_image_insert_image',\n modalFooter: '.modal-footer',\n dropzoneContainer: '.tiny_image_dropzone_container',\n fileInput: '#tiny_image_fileinput',\n fileNameLabel: '.tiny_image_filename',\n sizeOriginal: '.tiny_image_sizeoriginal',\n sizeCustom: '.tiny_image_sizecustom',\n properties: '.tiny_image_properties',\n },\n styles: {\n responsive: 'img-fluid',\n },\n },\n EMBED: {\n actions: {\n mediaBrowser: '.openmediabrowser',\n addUrl: '.tiny_media_add_url',\n deleteMedia: '.tiny_media_delete_icon',\n showSubtitleCaption: '[data-action=\"show-subtitle-caption\"]',\n backToMediaDetails: '[data-action=\"back-to-media-details\"]',\n uploadCustomThumbnail: '.upload-custom-thumbnail',\n },\n elements: {\n source: '.tiny_media_source',\n track: '.tiny_media_track',\n posterSource: '.tiny_media_poster_source',\n title: '.tiny_media_title_entry',\n url: '.tiny_media_source_url_entry',\n width: '.tiny_media_width_entry',\n height: '.tiny_media_height_entry',\n trackSource: '.tiny_media_track_source',\n trackLabel: '.tiny_media_track_label_entry',\n trackLang: '.tiny_media_track_lang_entry',\n trackDefault: '.tiny_media_track_default',\n mediaControl: '.tiny_media_controls',\n mediaAutoplay: '.tiny_media_autoplay',\n mediaMute: '.tiny_media_mute',\n mediaLoop: '.tiny_media_loop',\n bodyTemplate: '.tiny_media_body_template',\n footerTemplate: '.tiny_media_footer_template',\n dropzoneContainer: '.tiny_media_dropzone_container',\n fromUrl: '.tiny_media_from_url_entry',\n urlWarning: '.tiny_media_url_warning',\n loaderIcon: '.tiny_media_loader',\n loaderIconContainer: '.tiny_media_loader_container',\n insertMedia: '.tiny_media_insert_media',\n modalFooter: '.modal-footer',\n fileNameLabel: '.tiny_media_filename',\n preview: '.tiny_media_preview',\n previewBox: '.tiny_media_preview_box',\n previewClass: '.tiny_media_preview_tag',\n videoTag: '#video-tag',\n audioTag: '#audio-tag',\n sizeOriginal: '.tiny_media_sizeoriginal',\n sizeCustom: '.tiny_media_sizecustom',\n properties: '.tiny_media_properties',\n mediaDetailsBody: '#tiny-media-details-body',\n mediaDetailsFooter: '#media-details-footer',\n mediaSubtitleCaptionFooter: '#media-subtitle-caption-footer',\n mediaSubtitleCaptionBody: '#tiny-media-subtitle-caption-body',\n mediaMetadataTabPane: '.tab-pane-media-metadata',\n },\n template: {\n body: {\n insertMediaBody: 'tiny_media/embed/body/insert_media_body',\n mediaDetailsBody: 'tiny_media/embed/body/media_details_body',\n },\n footer: {\n insertMediaFooter: 'tiny_media/embed/footer/insert_media_footer',\n mediaDetailsFooter: 'tiny_media/embed/footer/media_details_footer',\n },\n },\n mediaSites: {\n youtube: 'www.youtube.com',\n },\n mediaTypes: ['audio', 'video', 'link'],\n },\n MEDIA_MIME_TYPES: {\n \"aac\": \"audio\", // Mime subtype = /aac.\n \"avi\": \"video\", // Mime subtype = /x-msvideo.\n \"midi\": \"audio\", // Mime subtype = /midi|x-midi.\n \"mid\": \"audio\", // Mime subtype = /midi|x-midi.\n \"mp3\": \"audio\", // Mime subtype = /mpeg.\n \"mp4\": \"video\", // Mime subtype = /mp4.\n \"xmpeg3\": \"audio\", // Mime subtype = /x-mpeg-3.\n \"mpeg3\": \"audio\", // Mime subtype = /mpeg3.\n \"xmpeg\": \"video\", // Mime subtype = /x-mpeg.\n \"mpeg\": \"video\", // Mime subtype = /mpeg.\n \"oga\": \"audio\", // Mime subtype = /ogg.\n \"ogg\": \"audio\", // Mime subtype = /ogg.\n \"ogv\": \"video\", // Mime subtype = /ogg.\n \"opus\": \"audio\", // Mime subtype = /opus.\n \"ts\": \"video\", // Mime subtype = /mp2t.\n \"wav\": \"audio\", // Mime subtype = /wav.\n \"weba\": \"audio\", // Mime subtype = /webm.\n \"webm\": \"video\", // Mime subtype = /webm.\n \"3gp\": \"video\", // Mime subtype = /3gpp.\n \"3g2\": \"video\", // Mime subtype = /3gpp2.\n },\n};\n"],"names":["IMAGE","actions","submit","imageBrowser","addUrl","deleteImage","elements","form","alignSettings","alt","altWarning","height","width","url","urlWarning","size","presentation","constrain","customStyle","preview","previewBox","loaderIcon","loaderIconContainer","insertImage","modalFooter","dropzoneContainer","fileInput","fileNameLabel","sizeOriginal","sizeCustom","properties","styles","responsive","EMBED","mediaBrowser","deleteMedia","showSubtitleCaption","backToMediaDetails","uploadCustomThumbnail","source","track","posterSource","title","trackSource","trackLabel","trackLang","trackDefault","mediaControl","mediaAutoplay","mediaMute","mediaLoop","bodyTemplate","footerTemplate","fromUrl","insertMedia","previewClass","videoTag","audioTag","mediaDetailsBody","mediaDetailsFooter","mediaSubtitleCaptionFooter","mediaSubtitleCaptionBody","mediaMetadataTabPane","template","body","insertMediaBody","footer","insertMediaFooter","mediaSites","youtube","mediaTypes","MEDIA_MIME_TYPES"],"mappings":"sKAuBe,CACXA,MAAO,CACHC,QAAS,CACLC,OAAQ,6BACRC,aAAc,oBACdC,OAAQ,qBACRC,YAAa,0BAEjBC,SAAU,CACNC,KAAM,uBACNC,cAAe,qBACfC,IAAK,uBACLC,WAAY,yBACZC,OAAQ,0BACRC,MAAO,yBACPC,IAAK,uBACLC,WAAY,yBACZC,KAAM,mBACNC,aAAc,2BACdC,UAAW,wBACXC,YAAa,0BACbC,QAAS,sBACTC,WAAY,0BACZC,WAAY,qBACZC,oBAAqB,+BACrBC,YAAa,2BACbC,YAAa,gBACbC,kBAAmB,iCACnBC,UAAW,wBACXC,cAAe,uBACfC,aAAc,2BACdC,WAAY,yBACZC,WAAY,0BAEhBC,OAAQ,CACJC,WAAY,cAGpBC,MAAO,CACHhC,QAAS,CACLiC,aAAc,oBACd9B,OAAQ,sBACR+B,YAAa,0BACbC,oBAAqB,wCACrBC,mBAAoB,wCACpBC,sBAAuB,4BAE3BhC,SAAU,CACNiC,OAAQ,qBACRC,MAAO,oBACPC,aAAc,4BACdC,MAAO,0BACP7B,IAAK,+BACLD,MAAO,0BACPD,OAAQ,2BACRgC,YAAa,2BACbC,WAAY,gCACZC,UAAW,+BACXC,aAAc,4BACdC,aAAc,uBACdC,cAAe,uBACfC,UAAW,mBACXC,UAAW,mBACXC,aAAc,4BACdC,eAAgB,8BAChB3B,kBAAmB,iCACnB4B,QAAS,6BACTvC,WAAY,0BACZO,WAAY,qBACZC,oBAAqB,+BACrBgC,YAAa,2BACb9B,YAAa,gBACbG,cAAe,uBACfR,QAAS,sBACTC,WAAY,0BACZmC,aAAc,0BACdC,SAAU,aACVC,SAAU,aACV7B,aAAc,2BACdC,WAAY,yBACZC,WAAY,yBACZ4B,iBAAkB,2BAClBC,mBAAoB,wBACpBC,2BAA4B,iCAC5BC,yBAA0B,oCAC1BC,qBAAsB,4BAE1BC,SAAU,CACNC,KAAM,CACFC,gBAAiB,0CACjBP,iBAAkB,4CAEtBQ,OAAQ,CACJC,kBAAmB,8CACnBR,mBAAoB,iDAG5BS,WAAY,CACRC,QAAS,mBAEbC,WAAY,CAAC,QAAS,QAAS,SAEnCC,iBAAkB,KACP,YACA,aACC,YACD,YACA,YACA,eACG,cACD,cACA,aACD,YACD,YACA,YACA,aACC,WACF,YACC,aACC,aACA,cACD,cACA"} \ No newline at end of file +{"version":3,"file":"selectors.min.js","sources":["../src/selectors.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 .\n\n/**\n * Tiny Media plugin helper function to build queryable data selectors.\n *\n * @module tiny_media/selectors\n * @copyright 2022 Huong Nguyen \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nexport default {\n IMAGE: {\n actions: {\n submit: '.tiny_image_urlentrysubmit',\n imageBrowser: '.openimagebrowser',\n addUrl: '.tiny_image_addurl',\n deleteImage: '.tiny_image_deleteicon',\n },\n elements: {\n form: 'form.tiny_image_form',\n alignSettings: '.tiny_image_button',\n alt: '.tiny_image_altentry',\n altWarning: '.tiny_image_altwarning',\n height: '.tiny_image_heightentry',\n width: '.tiny_image_widthentry',\n url: '.tiny_image_urlentry',\n urlWarning: '.tiny_image_urlwarning',\n size: '.tiny_image_size',\n presentation: '.tiny_image_presentation',\n constrain: '.tiny_image_constrain',\n customStyle: '.tiny_image_customstyle',\n preview: '.tiny_image_preview',\n previewBox: '.tiny_image_preview_box',\n loaderIcon: '.tiny_image_loader',\n loaderIconContainer: '.tiny_image_loader_container',\n insertImage: '.tiny_image_insert_image',\n modalFooter: '.modal-footer',\n dropzoneContainer: '.tiny_image_dropzone_container',\n fileInput: '#tiny_image_fileinput',\n fileNameLabel: '.tiny_image_filename',\n sizeOriginal: '.tiny_image_sizeoriginal',\n sizeCustom: '.tiny_image_sizecustom',\n properties: '.tiny_image_properties',\n },\n styles: {\n responsive: 'img-fluid',\n },\n },\n EMBED: {\n actions: {\n mediaBrowser: '.openmediabrowser',\n addUrl: '.tiny_media_add_url',\n deleteMedia: '.tiny_media_delete_icon',\n showSubtitleCaption: '[data-action=\"show-subtitle-caption\"]',\n backToMediaDetails: '[data-action=\"back-to-media-details\"]',\n uploadCustomThumbnail: '.upload-custom-thumbnail',\n },\n elements: {\n source: '.tiny_media_source',\n track: '.tiny_media_track',\n posterSource: '.tiny_media_poster_source',\n title: '.tiny_media_title_entry',\n url: '.tiny_media_source_url_entry',\n width: '.tiny_media_width_entry',\n height: '.tiny_media_height_entry',\n trackSource: '.tiny_media_track_source',\n trackLabel: '.tiny_media_track_label_entry',\n trackLang: '.tiny_media_track_lang_entry',\n trackDefault: '.tiny_media_track_default',\n mediaControl: '.tiny_media_controls',\n mediaAutoplay: '.tiny_media_autoplay',\n mediaMute: '.tiny_media_mute',\n mediaLoop: '.tiny_media_loop',\n bodyTemplate: '.tiny_media_body_template',\n footerTemplate: '.tiny_media_footer_template',\n dropzoneContainer: '.tiny_media_dropzone_container',\n fromUrl: '.tiny_media_from_url_entry',\n urlWarning: '.tiny_media_url_warning',\n loaderIcon: '.tiny_media_loader',\n loaderIconContainer: '.tiny_media_loader_container',\n insertMedia: '.tiny_media_insert_media',\n modalFooter: '.modal-footer',\n fileNameLabel: '.tiny_media_filename',\n preview: '.tiny_media_preview',\n previewBox: '.tiny_media_preview_box',\n previewClass: '.tiny_media_preview_tag',\n videoTag: '#video-tag',\n audioTag: '#audio-tag',\n sizeOriginal: '.tiny_media_sizeoriginal',\n sizeCustom: '.tiny_media_sizecustom',\n properties: '.tiny_media_properties',\n mediaDetailsBody: '#tiny-media-details-body',\n mediaDetailsFooter: '#media-details-footer',\n mediaSubtitleCaptionFooter: '#media-subtitle-caption-footer',\n mediaSubtitleCaptionBody: '#tiny-media-subtitle-caption-body',\n mediaMetadataTabPane: '.tab-pane-media-metadata',\n },\n template: {\n body: {\n insertMediaBody: 'tiny_media/embed/body/insert_media_body',\n mediaDetailsBody: 'tiny_media/embed/body/media_details_body',\n mediaThumbnailBody: 'tiny_media/embed/body/media_thumbnail_body',\n },\n footer: {\n insertMediaFooter: 'tiny_media/embed/footer/insert_media_footer',\n mediaDetailsFooter: 'tiny_media/embed/footer/media_details_footer',\n mediaThumbnailFooter: 'tiny_media/embed/footer/media_thumbnail_footer',\n },\n },\n mediaSites: {\n youtube: 'www.youtube.com',\n },\n mediaTypes: ['audio', 'video', 'link'],\n },\n MEDIA_MIME_TYPES: {\n \"aac\": \"audio\", // Mime subtype = /aac.\n \"avi\": \"video\", // Mime subtype = /x-msvideo.\n \"midi\": \"audio\", // Mime subtype = /midi|x-midi.\n \"mid\": \"audio\", // Mime subtype = /midi|x-midi.\n \"mp3\": \"audio\", // Mime subtype = /mpeg.\n \"mp4\": \"video\", // Mime subtype = /mp4.\n \"xmpeg3\": \"audio\", // Mime subtype = /x-mpeg-3.\n \"mpeg3\": \"audio\", // Mime subtype = /mpeg3.\n \"xmpeg\": \"video\", // Mime subtype = /x-mpeg.\n \"mpeg\": \"video\", // Mime subtype = /mpeg.\n \"oga\": \"audio\", // Mime subtype = /ogg.\n \"ogg\": \"audio\", // Mime subtype = /ogg.\n \"ogv\": \"video\", // Mime subtype = /ogg.\n \"opus\": \"audio\", // Mime subtype = /opus.\n \"ts\": \"video\", // Mime subtype = /mp2t.\n \"wav\": \"audio\", // Mime subtype = /wav.\n \"weba\": \"audio\", // Mime subtype = /webm.\n \"webm\": \"video\", // Mime subtype = /webm.\n \"3gp\": \"video\", // Mime subtype = /3gpp.\n \"3g2\": \"video\", // Mime subtype = /3gpp2.\n },\n};\n"],"names":["IMAGE","actions","submit","imageBrowser","addUrl","deleteImage","elements","form","alignSettings","alt","altWarning","height","width","url","urlWarning","size","presentation","constrain","customStyle","preview","previewBox","loaderIcon","loaderIconContainer","insertImage","modalFooter","dropzoneContainer","fileInput","fileNameLabel","sizeOriginal","sizeCustom","properties","styles","responsive","EMBED","mediaBrowser","deleteMedia","showSubtitleCaption","backToMediaDetails","uploadCustomThumbnail","source","track","posterSource","title","trackSource","trackLabel","trackLang","trackDefault","mediaControl","mediaAutoplay","mediaMute","mediaLoop","bodyTemplate","footerTemplate","fromUrl","insertMedia","previewClass","videoTag","audioTag","mediaDetailsBody","mediaDetailsFooter","mediaSubtitleCaptionFooter","mediaSubtitleCaptionBody","mediaMetadataTabPane","template","body","insertMediaBody","mediaThumbnailBody","footer","insertMediaFooter","mediaThumbnailFooter","mediaSites","youtube","mediaTypes","MEDIA_MIME_TYPES"],"mappings":"sKAuBe,CACXA,MAAO,CACHC,QAAS,CACLC,OAAQ,6BACRC,aAAc,oBACdC,OAAQ,qBACRC,YAAa,0BAEjBC,SAAU,CACNC,KAAM,uBACNC,cAAe,qBACfC,IAAK,uBACLC,WAAY,yBACZC,OAAQ,0BACRC,MAAO,yBACPC,IAAK,uBACLC,WAAY,yBACZC,KAAM,mBACNC,aAAc,2BACdC,UAAW,wBACXC,YAAa,0BACbC,QAAS,sBACTC,WAAY,0BACZC,WAAY,qBACZC,oBAAqB,+BACrBC,YAAa,2BACbC,YAAa,gBACbC,kBAAmB,iCACnBC,UAAW,wBACXC,cAAe,uBACfC,aAAc,2BACdC,WAAY,yBACZC,WAAY,0BAEhBC,OAAQ,CACJC,WAAY,cAGpBC,MAAO,CACHhC,QAAS,CACLiC,aAAc,oBACd9B,OAAQ,sBACR+B,YAAa,0BACbC,oBAAqB,wCACrBC,mBAAoB,wCACpBC,sBAAuB,4BAE3BhC,SAAU,CACNiC,OAAQ,qBACRC,MAAO,oBACPC,aAAc,4BACdC,MAAO,0BACP7B,IAAK,+BACLD,MAAO,0BACPD,OAAQ,2BACRgC,YAAa,2BACbC,WAAY,gCACZC,UAAW,+BACXC,aAAc,4BACdC,aAAc,uBACdC,cAAe,uBACfC,UAAW,mBACXC,UAAW,mBACXC,aAAc,4BACdC,eAAgB,8BAChB3B,kBAAmB,iCACnB4B,QAAS,6BACTvC,WAAY,0BACZO,WAAY,qBACZC,oBAAqB,+BACrBgC,YAAa,2BACb9B,YAAa,gBACbG,cAAe,uBACfR,QAAS,sBACTC,WAAY,0BACZmC,aAAc,0BACdC,SAAU,aACVC,SAAU,aACV7B,aAAc,2BACdC,WAAY,yBACZC,WAAY,yBACZ4B,iBAAkB,2BAClBC,mBAAoB,wBACpBC,2BAA4B,iCAC5BC,yBAA0B,oCAC1BC,qBAAsB,4BAE1BC,SAAU,CACNC,KAAM,CACFC,gBAAiB,0CACjBP,iBAAkB,2CAClBQ,mBAAoB,8CAExBC,OAAQ,CACJC,kBAAmB,8CACnBT,mBAAoB,+CACpBU,qBAAsB,mDAG9BC,WAAY,CACRC,QAAS,mBAEbC,WAAY,CAAC,QAAS,QAAS,SAEnCC,iBAAkB,KACP,YACA,aACC,YACD,YACA,YACA,eACG,cACD,cACA,aACD,YACD,YACA,YACA,aACC,WACF,YACC,aACC,aACA,cACD,cACA"} \ No newline at end of file diff --git a/lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailinsert.js b/lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailinsert.js index ede9e227a09..0214b524a65 100644 --- a/lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailinsert.js +++ b/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); } }; diff --git a/lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailpreview.js b/lib/editor/tiny/plugins/media/amd/src/embed/embedthumbnailpreview.js new file mode 100644 index 00000000000..13c0ef97331 --- /dev/null +++ b/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 . + +/** + * 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 + * @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; + }; +} diff --git a/lib/editor/tiny/plugins/media/amd/src/selectors.js b/lib/editor/tiny/plugins/media/amd/src/selectors.js index 6b669857d37..31043bb3ca6 100644 --- a/lib/editor/tiny/plugins/media/amd/src/selectors.js +++ b/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: { diff --git a/lib/editor/tiny/plugins/media/lang/en/tiny_media.php b/lib/editor/tiny/plugins/media/lang/en/tiny_media.php index ae3c97b5f07..f6ffc652646 100644 --- a/lib/editor/tiny/plugins/media/lang/en/tiny_media.php +++ b/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:';