Proyectos de Subversion Moodle

// 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 upload class.
 *
 * This handles the embed thumbnail upload using drag-drop.
 *
 * @module      tiny_media/embed/embedthumbnailinsert
 * @copyright   2024 Stevani Andolo <stevani@hotmail.com.au>
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import Selectors from '../selectors';
import Dropzone from 'core/dropzone';
import uploadFile from 'editor_tiny/uploader';
import {prefetchStrings} from 'core/prefetch';
import {getStrings} from 'core/str';
import {component} from "../common";
import {
    showElements,
    startMediaLoading,
    stopMediaLoading,
    setPropertiesFromData,
    body,
    footer,
} from '../helpers';
import {EmbedThumbnailPreview} from './embedthumbnailpreview';
import {EmbedHandler} from './embedhandler';
import {displayFilepicker} from 'editor_tiny/utils';

prefetchStrings(component, [
    'insertmediathumbnail',
    'uploading',
    'loadingembedthumbnail',
    'addmediathumbnaildrop',
]);

export class EmbedThumbnailInsert {

    constructor(data) {
        setPropertiesFromData(this, data); // Creates dynamic properties based on "data" param.
    }

    /**
     * Init the dropzone and lang strings.
     *
     * @param {object} mediaData Object of selected media data
     */
    init = async(mediaData) => {
        this.mediaData = mediaData; // Current selected media data passed from embedPreview.
        const langStringKeys = [
            'insertmediathumbnail',
            'uploading',
            'loadingembedthumbnail',
            'addmediathumbnaildrop',
        ];
        const langStringvalues = await getStrings([...langStringKeys].map((key) => ({key, component})));
        this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringvalues[index]]));
        this.currentModal.uploadThumbnailModal.setTitle(this.langStrings.insertmediathumbnail);

        // Let's init the dropzone if canShowDropZone is true.
        if (this.canShowDropZone) {
            const dropZoneEle = document.querySelector(Selectors.EMBED.elements.dropzoneContainer);
            const dropZone = new Dropzone(
                dropZoneEle,
                this.acceptedImageTypes,
                files => {
                    this.handleUploadedFile(files);
                }
            );
            dropZone.setLabel(this.langStrings.addmediathumbnaildrop);
            dropZone.init();
        }

        this.registerInsertMediaThumbnailEvents(this.thumbnailModalRoot);
    };

    /**
     * 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.media.poster = url;

        let templateContext = {
            bodyTemplate: Selectors.EMBED.template.body.mediaThumbnailBody,
            footerTemplate: Selectors.EMBED.template.footer.mediaThumbnailFooter,
            selector: Selectors.EMBED.type,
        };

        Promise.all([body(templateContext, this.thumbnailModalRoot), footer(templateContext, this.thumbnailModalRoot)])
            .then(() => {
                const mediaThumbnail = new EmbedThumbnailPreview(this);
                mediaThumbnail.init(this.mediaData);
                return;
            })
            .catch(error => {
                window.console.log(error);
            });
    };

    /**
     * Handles media preview on file picker callback.
     *
     * @param {object} params Object of uploaded file
     */
    filePickerCallback = (params) => {
        if (params.url) {
            this.loadPreviewThumbnail(params.url);
        }
    };

    /**
     * Updates the content of the loader icon.
     *
     * @param {HTMLElement} root - The root element containing the loader icon.
     * @param {object} langStrings - An object containing language strings.
     * @param {number|null} progress - The progress percentage (optional).
     */
    updateLoaderIcon = (root, langStrings, progress = null) => {
        const loaderIconState = root.querySelector(Selectors.EMBED.elements.loaderIconContainer + ' div');
        loaderIconState.innerHTML = (progress !== null) ?
                               `${langStrings.uploading} ${Math.round(progress)}%` :
                               langStrings.loadingembedthumbnail;
    };

    /**
     * Handles changes in the media URL input field and loads a preview of the media if the URL has changed.
     */
    urlChanged() {
        const url = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.fromUrl).value;
        if (url && url !== this.currentUrl) {
            this.loadPreviewThumbnail(url);
        }
    }

    /**
     * Handles the uploaded file, initiates the upload process, and updates the UI during the upload.
     *
     * @param {FileList} files - The list of files to upload (usually from a file input field).
     * @returns {Promise<void>} A promise that resolves when the file is uploaded and processed.
     */
    handleUploadedFile = async(files) => {
        try {
            startMediaLoading(this.thumbnailModalRoot, Selectors.EMBED.type);
            const fileURL = await uploadFile(this.editor, 'image', files[0], files[0].name, (progress) => {
                this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings, progress);
            });

            // Set the loader icon content to "loading" after the file upload completes.
            this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings);
            this.filePickerCallback({url: fileURL});
        } catch (error) {
            // Handle the error.
            const urlWarningLabelEle = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.urlWarning);
            urlWarningLabelEle.innerHTML = error.error !== undefined ? error.error : error;
            showElements(Selectors.EMBED.elements.urlWarning, this.thumbnailModalRoot);
            stopMediaLoading(this.thumbnailModalRoot, Selectors.EMBED.type);
        }
    };

    /**
     * Registers events for insert thumbnail modal.
     *
     * @param {HTMLElement} root - The root element containing the loader icon.
     */
    registerInsertMediaThumbnailEvents = (root) => {
        const urlEle = root.querySelector(Selectors.EMBED.elements.fromUrl);
        if (urlEle) {
            urlEle.addEventListener('input', () => {
                (new EmbedHandler(this)).toggleUrlButton(urlEle, this.thumbnailModalRoot);
            });
        }

        // Handles add media url.
        const addUrlEle = root.querySelector(Selectors.EMBED.actions.addUrl);
        if (addUrlEle) {
            addUrlEle.addEventListener('click', () => {
                startMediaLoading(this.thumbnailModalRoot, Selectors.EMBED.type);
                this.urlChanged();
            });
        }

        // Handle repository browsing.
        const imageBrowser = root.querySelector(Selectors.IMAGE.actions.imageBrowser);
        if (imageBrowser) {
            imageBrowser.addEventListener('click', async(e) => {
                e.preventDefault();
                const params = await displayFilepicker(this.editor, 'image');
                this.filePickerCallback(params);
            });
        }
    };
}