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

 *

 * This handles anything that embed requires like:

 * - Calling the media preview in embedPreview.

 * - Loading the embed insert.

 * - Getting selected media data.

 * - Handles url and repository uploads.

 * - Reset embed insert when embed preview is deleted.

 * - Handles media embedding into tiny and etc.

 *

 * @module      tiny_media/embed/embedhandler

 * @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 {EmbedInsert} from './embedinsert';

import {

    body,

    footer,

    setPropertiesFromData,

    isValidUrl,

    stopMediaLoading,

    startMediaLoading,

} from '../helpers';

import * as ModalEvents from 'core/modal_events';

import {displayFilepicker} from 'editor_tiny/utils';

import {

    insertMediaTemplateContext,

    getHelpStrings,

    prepareMoodleLang,

    getMoodleLangObj,

    hasAudioVideoAttr,

    insertMediaThumbnailTemplateContext,

} from "./embedhelpers";

import Templates from 'core/templates';

import {EmbedThumbnailInsert} from './embedthumbnailinsert';

export class EmbedHandler {

    constructor(data) {

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

    }

    /**

     * Load the media insert dialogue.

     *

     * @param {object} templateContext Object template context

     */

    loadTemplatePromise = (templateContext) => {

        templateContext.elementid = this.editor.id;

        templateContext.bodyTemplate = Selectors.EMBED.template.body.insertMediaBody;

        templateContext.footerTemplate = Selectors.EMBED.template.footer.insertMediaFooter;

        templateContext.selector = Selectors.EMBED.type;

        Promise.all([body(templateContext, this.root), footer(templateContext, this.root)])

            .then(() => {

                (new EmbedInsert(this)).init();

                return;

            })

            .catch(error => {

                window.console.log(error);

            });

    };

    /**

     * Load the media thumbnail insert dialogue.

     *

     * @param {object} templateContext Object template context

     * @param {HTMLElement} root

     * @param {object} mediaData

     */

    loadInsertThumbnailTemplatePromise = async(templateContext, root, mediaData) => {

        Promise.all([body(templateContext, root.root), footer(templateContext, root.root)])

            .then(() => {

                if (!this.currentModal.insertMediaModal) {

                    this.currentModal.insertMediaModal = this.currentModal;

                }

                if (root.uploadThumbnailModal) {

                    this.currentModal.uploadThumbnailModal = root.uploadThumbnailModal;

                }

                this.thumbnailModalRoot = root.root;

                (new EmbedThumbnailInsert(this)).init(mediaData);

                return;

            })

            .catch(error => {

                window.console.log(error);

            });

    };

    /**

     * Loads the media preview dialogue.

     *

     * @param {object} embedPreview Object of embedPreview

     * @param {object} templateContext Object of template context

     */

    loadMediaDetails = async(embedPreview, templateContext) => {

        Promise.all([body(templateContext, this.root), footer(templateContext, this.root)])

            .then(() => {

                embedPreview.init();

                return;

            })

            .catch(error => {

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

                window.console.log(error);

            });

    };

    /**

     * Reset the media/thumbnail insert modal form.

     *

     * @param {boolean} isMediaInsert Is current state media insert or thumbnail insert?

     */

    resetUploadForm = (isMediaInsert = true) => {

        if (isMediaInsert) {

            this.newMediaLink = false;

            this.fetchedMediaLinkTitle = null;

            this.resetCurrentMediaData();

            this.loadTemplatePromise(insertMediaTemplateContext(this));

        } else {

            this.loadInsertThumbnailTemplatePromise(

                insertMediaThumbnailTemplateContext(this), // Get template context for creating media thumbnail.

                {root: this.thumbnailModalRoot}, // Required root elements.

                this.mediaData // Get current media data.

            );

        }

    };

    /**

     * Get selected media data.

     *

     * @returns {null|object}

     */

    getMediaProperties = () => {

        const media = this.selectedMedia;

        if (!media) {

            return null;

        }

        const tracks = {

            subtitles: [],

            captions: [],

            descriptions: [],

            chapters: [],

            metadata: []

        };

        const sources = [];

        media.querySelectorAll('track').forEach((track) => {

            tracks[track.getAttribute('kind')].push({

                src: track.getAttribute('src'),

                srclang: track.getAttribute('srclang'),

                label: track.getAttribute('label'),

                defaultTrack: hasAudioVideoAttr(track, 'default')

            });

        });

        media.querySelectorAll('source').forEach((source) => {

            sources.push(source.src);

        });

        const title = media.getAttribute('title') ?? media.textContent;

        return {

            type: this.mediaType,

            sources,

            poster: media.getAttribute('poster'),

            title: title ? title.trim() : false,

            width: media.getAttribute('width'),

            height: media.getAttribute('height'),

            autoplay: hasAudioVideoAttr(media, 'autoplay'),

            loop: hasAudioVideoAttr(media, 'loop'),

            muted: hasAudioVideoAttr(media, 'muted'),

            controls: hasAudioVideoAttr(media, 'controls'),

            tracks,

        };

    };

    /**

     * Get selected media data.

     *

     * @returns {object}

     */

    getCurrentEmbedData = () => {

        const properties = this.getMediaProperties();

        if (!properties || this.newMediaLink) {

            return {media: {}};

        }

        const processedProperties = {};

        processedProperties.media = properties;

        processedProperties.link = false;

        return processedProperties;

    };

    /**

     * Get help strings for media subtitles and captions.

     *

     * @returns {null|object}

     */

    getHelpStrings = async() => {

        if (!this.helpStrings) {

            this.helpStrings = await getHelpStrings();

        }

        return this.helpStrings;

    };

    /**

     * Set template context for insert media dialogue.

     *

     * @param {object} data Object of media data

     * @returns {object}

     */

    getTemplateContext = async(data) => {

        const languages = prepareMoodleLang(this.editor);

        const helpIcons = Array.from(Object.entries(await this.getHelpStrings())).forEach(([key, text]) => {

            data[`${key.toLowerCase()}helpicon`] = {text};

        });

        return Object.assign({}, {

            elementid: this.editor.getElement().id,

            showFilePickerTrack: this.canShowFilePickerTrack,

            langsInstalled: languages.installed,

            langsAvailable: languages.available,

            media: true,

            isUpdating: this.isUpdating,

        }, data, helpIcons);

    };

    /**

     * Set and get media template context.

     *

     * @param {null|object} data Null or object of media data

     * @returns {Promise<object>} A promise that resolves template context.

     */

    getMediaTemplateContext = async(data = null) => {

        if (!data) {

            data = Object.assign({}, this.getCurrentEmbedData());

        } else {

            if (data.hasOwnProperty('isUpdating')) {

                this.isUpdating = data.isUpdating;

            } else {

                this.isUpdating = Object.keys(data).length > 1;

            }

        }

        return await this.getTemplateContext(data);

    };

    /**

     * Handles changes in the media URL input field and loads a preview of the media if the URL has changed.

     */

    urlChanged() {

        const url = this.root.querySelector(Selectors.EMBED.elements.fromUrl).value;

        if (url && url !== this.currentUrl) {

            // Set to null on new url change.

            this.mediaType = null;

            // Flag as new media link insert.

            this.newMediaLink = true;

            this.loadMediaPreview(url);

        }

    }

    /**

     * Load the media preview dialogue.

     *

     * @param {string} url String of media url

     */

    loadMediaPreview = (url) => {

        (new EmbedInsert(this)).loadMediaPreview(url);

    };

    /**

     * Callback for file picker that previews the media or add the captions and subtitles.

     *

     * @param {object} params Object of media url and etc

     * @param {html} element Selected element.

     * @param {string} fpType Caption type.

     */

    trackFilePickerCallback(params, element, fpType) {

        if (params.url !== '') {

            const tabPane = element.closest('.tab-pane');

            if (tabPane) {

                element.closest(Selectors.EMBED.elements.source).querySelector(Selectors.EMBED.elements.url).value = params.url;

                if (fpType === 'subtitle') {

                    // If the file is subtitle file. We need to match the language and label for that file.

                    const subtitleLang = params.file.split('.vtt')[0].split('-').slice(-1)[0];

                    const langObj = getMoodleLangObj(subtitleLang, this.editor);

                    if (langObj) {

                        const track = element.closest(Selectors.EMBED.elements.track);

                        track.querySelector(Selectors.EMBED.elements.trackLabel).value = langObj.lang.trim();

                        track.querySelector(Selectors.EMBED.elements.trackLang).value = langObj.code;

                    }

                }

            } else {

                // Flag as new file upload.

                this.newFileUpload = true;

                this.resetCurrentMediaData();

                this.loadMediaPreview(params.url);

            }

        }

    }

    /**

     * Reset current media data.

     */

    resetCurrentMediaData = () => {

        // Reset the value of the following props.

        this.media = {};

        this.mediaType = null;

        this.selectedMedia = null;

    };

    /**

     * Add new html track element.

     *

     * @param {html} element

     */

    addTrackComponent(element) {

        const trackElement = element.closest(Selectors.EMBED.elements.track);

        const clone = trackElement.cloneNode(true);

        trackElement.querySelector('.removecomponent-wrapper').classList.remove('hidden');

        trackElement.querySelector('.addcomponent-wrapper').classList.add('hidden');

        trackElement.parentNode.insertBefore(clone, trackElement.nextSibling);

    }

    /**

     * Remove added html track element.

     *

     * @param {html} element

     */

    removeTrackComponent(element) {

        const sourceElement = element.closest(Selectors.EMBED.elements.track);

        sourceElement.remove();

    }

    /**

     * Get picker type based on the selected element.

     *

     * @param {html} element Selected element

     * @returns {string}

     */

    getFilePickerTypeFromElement = (element) => {

        if (element.closest(Selectors.EMBED.elements.posterSource)) {

            return 'image';

        }

        if (element.closest(Selectors.EMBED.elements.trackSource)) {

            return 'subtitle';

        }

        return 'media';

    };

    /**

     * Get captions/subtitles type.

     *

     * @param {html} tabPane

     * @returns {string}

     */

    getTrackTypeFromTabPane = (tabPane) => {

        return tabPane.getAttribute('data-track-kind');

    };

    /**

     * Handle click events.

     *

     * @param {html} e Selected element

     */

    clickHandler = async(e) => {

        const element = e.target;

        // Handle repository browsing.

        const mediaBrowser = element.closest(Selectors.EMBED.actions.mediaBrowser);

        if (mediaBrowser) {

            e.preventDefault();

            const fpType = this.getFilePickerTypeFromElement(element);

            const params = await displayFilepicker(this.editor, fpType);

            this.trackFilePickerCallback(params, element, fpType);

        }

        // Handles add media url.

        const addUrlEle = e.target.closest(Selectors.EMBED.actions.addUrl);

        if (addUrlEle) {

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

            this.urlChanged();

        }

        // Handles adding tracks.

        const addComponentTrackAction = element.closest(Selectors.EMBED.elements.track + ' .addcomponent');

        if (addComponentTrackAction) {

            e.preventDefault();

            this.addTrackComponent(element);

        }

        // Handles removing added tracks.

        const removeComponentTrackAction = element.closest(Selectors.EMBED.elements.track + ' .removecomponent');

        if (removeComponentTrackAction) {

            e.preventDefault();

            this.removeTrackComponent(element);

        }

        // Only allow one track per tab to be selected as "default".

        const trackDefaultAction = element.closest(Selectors.EMBED.elements.trackDefault);

        if (trackDefaultAction && trackDefaultAction.checked) {

            const getKind = (el) => this.getTrackTypeFromTabPane(el.parentElement.closest('.tab-pane'));

            element.parentElement

                .closest('.tab-content')

                .querySelectorAll(Selectors.EMBED.elements.trackDefault)

                .forEach((select) => {

                    if (select !== element && getKind(element) === getKind(select)) {

                        select.checked = false;

                    }

                });

        }

    };

    /**

     * Enables or disables the URL-related buttons in the footer based on the current URL and input value.

     *

     * @param {html} input Url input field

     * @param {object} root

     */

    toggleUrlButton(input, root) {

        const url = input.value;

        const addUrl = root.querySelector(Selectors.EMBED.actions.addUrl);

        addUrl.disabled = !(url !== "" && isValidUrl(url));

    }

    /**

     * Get media html to be inserted or updated into tiny.

     *

     * @param {html} form Selected element

     * @returns {string} String of html

     */

    getMediaHTML = (form) => {

        this.mediaType = this.root.querySelector(Selectors.EMBED.elements.mediaPreviewContainer).dataset.mediaType;

        const tabContent = form.querySelector('.tab-content');

        const callback = 'getMediaHTML' + this.mediaType[0].toUpperCase() + this.mediaType.substr(1);

        return this[callback](tabContent);

    };

    /**

     * Get media as link.

     *

     * @returns {string} String of html.

     */

    getMediaHTMLLink() {

        const mediaPreviewContainer = document.querySelector(Selectors.EMBED.elements.mediaPreviewContainer);

        const context = {

            name: document.querySelector(Selectors.EMBED.elements.title).value ?? mediaPreviewContainer.dataset.originalUrl,

            url: mediaPreviewContainer.dataset.originalUrl || false

        };

        return context.url ? Templates.renderForPromise('tiny_media/embed/embed_media_link', context) : '';

    }

    /**

     * Get media as video.

     *

     * @param {html} tab Selected element

     * @returns {string} String of html.

     */

    getMediaHTMLVideo = (tab) => {

        const details = document.querySelector(Selectors.EMBED.elements.mediaDetailsBody);

        const context = this.getContextForMediaHTML(tab, details);

        context.width = details.querySelector(Selectors.EMBED.elements.width).value || false;

        context.height = details.querySelector(Selectors.EMBED.elements.height).value || false;

        const mediaPreviewContainer = details.querySelector(Selectors.EMBED.elements.mediaPreviewContainer);

        context.poster = mediaPreviewContainer.dataset.mediaPoster || false;

        return context.sources ? Templates.renderForPromise('tiny_media/embed/embed_media_video', context) : '';

    };

    /**

     * Get media as audio.

     *

     * @param {html} tab Selected element

     * @returns {string} String of html.

     */

    getMediaHTMLAudio = (tab) => {

        const details = document.querySelector(Selectors.EMBED.elements.mediaDetailsBody);

        const context = this.getContextForMediaHTML(tab, details);

        return context.sources.length ? Templates.renderForPromise('tiny_media/embed/embed_media_audio', context) : '';

    };

    /**

     * Get previewed media data.

     *

     * @param {html} tab Selected element

     * @param {html} details Selected element

     * @returns {object}

     */

    getContextForMediaHTML = (tab, details) => {

        const tracks = Array.from(tab.querySelectorAll(Selectors.EMBED.elements.track)).map(track => {

            const langTrack = track.querySelector(Selectors.EMBED.elements.trackLang);

            const selectedLangTrack = langTrack.options[langTrack.selectedIndex];

            return {

                track: track.querySelector(Selectors.EMBED.elements.trackSource + ' ' + Selectors.EMBED.elements.url).value,

                kind: this.getTrackTypeFromTabPane(track.closest('.tab-pane')),

                label: track.querySelector(Selectors.EMBED.elements.trackLabel).value || langTrack.value,

                srclang: selectedLangTrack.dataset.languageCode ?? false,

                defaultTrack: track.querySelector(Selectors.EMBED.elements.trackDefault).checked ? "true" : null

            };

        }).filter((track) => !!track.track);

        const mediaPreviewContainer = details.querySelector(Selectors.EMBED.elements.mediaPreviewContainer);

        let sources = mediaPreviewContainer.dataset.originalUrl ?? null;

        // Let's check if media has more than one sources.

        if (this.alternativeSources) {

            // Always update the first item in this.alternativeSources to the new one.

            this.alternativeSources[0] = sources;

            // Override the sources to have all the updated sources.

            sources = this.alternativeSources;

        }

        const title = details.querySelector(Selectors.EMBED.elements.title).value;

        // Remove data-original-url attribute once it's extracted.

        mediaPreviewContainer.removeAttribute('data-original-url');

        const templateContext = {

            sources,

            tracks,

            showControls: details.querySelector(Selectors.EMBED.elements.mediaControl).checked,

            autoplay: details.querySelector(Selectors.EMBED.elements.mediaAutoplay).checked,

            muted: details.querySelector(Selectors.EMBED.elements.mediaMute).checked,

            loop: details.querySelector(Selectors.EMBED.elements.mediaLoop).checked,

            title: title !== '' ? title.trim() : false,

        };

        // Add description prop to templateContext if media type is "link".

        if (this.mediaType === 'link') {

            // Let's form an alternative title.

            templateContext.description = Array.isArray(sources) ? sources[0] : sources;

        }

        return templateContext;

    };

    /**

     * Handle the insert/update media in tiny editor.

     *

     * @param {event} event

     * @param {object} modal Object of current modal

     */

    handleDialogueSubmission = async(event, modal) => {

        const {html} = await this.getMediaHTML(modal.getRoot()[0]);

        if (html) {

            if (this.isUpdating) {

                this.selectedMedia.outerHTML = html;

                this.isUpdating = false;

            } else {

                this.editor.insertContent(html);

            }

        }

    };

    /**

     * Register insert media modal elements' events.

     */

    registerEventListeners = async() => {

        // Handles click events for insert media modal.

        if (this.canShowFilePickerTrack) {

            this.root.addEventListener('click', this.clickHandler.bind(this));

        }

        // Handles media adding using url input.

        this.root.addEventListener('input', (e) => {

            const urlEle = e.target.closest(Selectors.EMBED.elements.fromUrl);

            if (urlEle) {

                this.toggleUrlButton(urlEle, this.root);

            }

        });

        // Destroy created modal when it's closed.

        this.modalRoot.on(ModalEvents.hidden, () => {

            this.currentModal.destroy();

        });

        // Handles media insert to editor.

        this.modalRoot.on(ModalEvents.save, this.handleDialogueSubmission.bind(this));

    };

}