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 upload class.

 *

 * This handles the embed upload using url, drag-drop and repositories.

 *

 * @module      tiny_media/embed/embedinsert

 * @copyright   2024 Stevani Andolo <stevani@hotmail.com.au>

 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import {prefetchStrings} from 'core/prefetch';

import {getStrings} from 'core/str';

import {component} from "../common";

import {

    setPropertiesFromData,

    startMediaLoading,

    stopMediaLoading,

    showElements,

} from '../helpers';

import Selectors from "../selectors";

import Dropzone from 'core/dropzone';

import uploadFile from 'editor_tiny/uploader';

import {EmbedHandler} from './embedhandler';

import {

    getMediaTitle,

    mediaDetailsTemplateContext,

    checkMediaType,

    fetchPreview,

} from './embedhelpers';

import {EmbedPreview} from './embedpreview';

prefetchStrings(component, [

    'insertmedia',

    'addmediafilesdrop',

    'uploading',

    'loadingmedia',

]);

export class EmbedInsert {

    constructor(data) {

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

    }

    /**

     * Init the dropzone and lang strings.

     */

    init = async() => {

        const langStringKeys = [

            'insertmedia',

            'addmediafilesdrop',

            'uploading',

            'loadingmedia',

        ];

        const langStringValues = await getStrings([...langStringKeys].map((key) => ({key, component})));

        this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringValues[index]]));

        this.currentModal.setTitle(this.langStrings.insertmedia);

        // Let's init the dropzone if canShowDropZone is true and mediaType is null.

        if (this.canShowDropZone && !this.mediaType) {

            const dropZoneEle = document.querySelector(Selectors.EMBED.elements.dropzoneContainer);

            const dropZone = new Dropzone(

                dropZoneEle,

                this.acceptedMediaTypes,

                files => {

                    this.handleUploadedFile(files);

                }

            );

            dropZone.setLabel(this.langStrings.addmediafilesdrop);

            dropZone.init();

        }

    };

    /**

     * Loads and displays a preview media based on the provided URL, and handles media loading events.

     *

     * @param {string} url - The URL of the media to load and display.

     */

    loadMediaPreview = async(url) => {

        this.originalUrl = url;

        this.fetchedMediaLinkTitle = await getMediaTitle(url, this);

        if (this.newMediaLink) { // Media added using url input.

            this.filteredContent = await fetchPreview(this.originalUrl, this.contextId);

            if (!this.mediaType) {

                // It means the url points to a physical media file.

                if (this.fetchedMediaLinkTitle) {

                    // Case-insensitive regex for video tag.

                    const videoRegex = /<video[^>]*>.*<\/video>/i;

                    // Case-insensitive regex for audio tag.

                    const audioRegex = /<audio[^>]*>.*<\/audio>/i;

                    if (videoRegex.test(this.filteredContent)) {

                        this.mediaType = 'video';

                    } else if (audioRegex.test(this.filteredContent)) {

                        this.mediaType = 'audio';

                    }

                } else {

                    this.mediaType = 'link';

                }

            }

            // Process the media preview.

            this.processMediaPreview();

        } else { // Media added using dropzone or repositories.

            this.mediaType ??= await checkMediaType(url);

            // Process the media preview.

            this.processMediaPreview();

        }

    };

    /**

     * Process the media preview.

     */

    processMediaPreview = async() => {

        // Let's combine the props.

        setPropertiesFromData(

            this,

            await (new EmbedHandler(this)).getMediaTemplateContext()

        );

        // Construct templateContext for embed preview.

        const templateContext = await mediaDetailsTemplateContext(this);

        if (this.isUpdating && !this.newMediaLink) {

            // Will be used to set the media title if it's in update state.

            this.mediaTitle = templateContext.media.title;

        }

        // Load the media details and preview of the selected media.

        (new EmbedHandler(this)).loadMediaDetails(new EmbedPreview(this), templateContext);

    };

    /**

     * 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).

     * @returns {void}

     */

    updateLoaderIcon = (root, langStrings, progress = null) => {

        const loaderIconState = root.querySelector(Selectors.EMBED.elements.loaderIconContainer + ' div');

        loaderIconState.innerHTML = (progress !== null) ?

                               `${langStrings.uploading} ${Math.round(progress)}%` :

                               langStrings.loadingmedia;

    };

    /**

     * Handles media preview on file picker callback.

     *

     * @param {object} params Object of uploaded file

     */

    filePickerCallback = (params) => {

        if (params.url) {

            if (this.mediaType) {

                // Set mediaType to "null" if it started with viewing embedded link, otherwise it will not be consistent.

                this.mediaType = null;

            }

            // Flag as new file upload.

            this.newFileUpload = true;

            // Load the media preview.

            this.loadMediaPreview(params.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.root, Selectors.EMBED.type);

            const fileURL = await uploadFile(this.editor, 'media', files[0], files[0].name, (progress) => {

                this.updateLoaderIcon(this.root, this.langStrings, progress);

            });

            // Set the loader icon content to "loading" after the file upload completes.

            this.updateLoaderIcon(this.root, this.langStrings);

            this.filePickerCallback({url: fileURL});

        } catch (error) {

            // Handle the error.

            const urlWarningLabelEle = this.root.querySelector(Selectors.EMBED.elements.urlWarning);

            urlWarningLabelEle.innerHTML = error.error !== undefined ? error.error : error;

            showElements(Selectors.EMBED.elements.urlWarning, this.root);

            stopMediaLoading(this.root, Selectors.EMBED.type);

        }

    };

}