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 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 <stevani@hotmail.com.au>

 * @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,

    showElements,

    stopMediaLoading,

} from '../helpers';

import Notification from 'core/notification';

import {EmbedPreview} from './embedpreview';

import {mediaDetailsTemplateContext} from './embedhelpers';

import {EmbedHandler} from './embedhandler';

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

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', component));

        sourceTypeChecked({

            source: this.media.poster,

            root: this.thumbnailModalRoot,

            fileNameSelector: Selectors.EMBED.elements.fileNameLabel,

        });

        this.setThumbnailSource();

        this.registerMediaThumbnailEventListeners();

    };

    /**

     * Sets media thumbnail source.

     */

    setThumbnailSource = () => {

        const thumbnailPreview = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.thumbnailPreview);

        thumbnailPreview.src = this.media.poster;

        thumbnailPreview.addEventListener('error', async() => {

            // Show warning notification.

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

            urlWarningLabelEle.innerHTML = await getString('imageurlrequired', component);

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

            // Stop the spinner.

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

            // Reset the upload form.

            (new EmbedHandler(this)).resetUploadForm(false);

        });

        thumbnailPreview.addEventListener('load', () => {

            this.mediaData.media.poster = this.media.poster;

            this.media = this.mediaData.media;

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

        });

    };

    /**

     * Deletes the media after confirming with the user and loads the insert media page.

     */

    deleteMedia = () => {

        Notification.deleteCancelPromise(

            getString('deletemediathumbnail', component),

            getString('deletemediathumbnailwarning', component)

        ).then(() => {

            (new EmbedHandler(this)).resetUploadForm(false);

            return;

        }).catch(error => {

            window.console.log(error);

        });

    };

    /**

     * Loads and displays a media preview with thumbnail.

     */

    loadPreviewMediaThumbnail = async() => {

        (new EmbedHandler(this)).loadMediaDetails(new EmbedPreview(this), await mediaDetailsTemplateContext(this))

        .then(() => {

            // Close the thumbnail upload modal once media details have been loaded.

            this.currentModal.uploadThumbnailModal.destroy();

            const currentModal = this.currentModal.insertMediaModal;

            this.currentModal = currentModal.insertMediaModal;

            delete this.mediaData;

            return;

        }).catch(error => {

            window.console.log(error);

        });

    };

    /**

     * Only registers event listeners for new loaded elements in mediaThumbnail.

     */

    registerMediaThumbnailEventListeners = () => {

        // Handles delete thumbnail.

        const deleteMedia = this.thumbnailModalRoot.querySelector(Selectors.EMBED.actions.deleteThumbnail);

        if (deleteMedia) {

            deleteMedia.addEventListener('click', (e) => {

                e.preventDefault();

                this.deleteMedia();

            });

        }

        // Handles setting the media poster.

        const setPoster = this.thumbnailModalRoot.querySelector(Selectors.EMBED.actions.setPoster);

        if (setPoster) {

            setPoster.addEventListener('click', () => {

                this.loadPreviewMediaThumbnail();

            });

        }

    };

}