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 class for Moodle.
 *
 * @module      tiny_media/embed
 * @copyright   2022 Huong Nguyen <huongnv13@gmail.com>
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

import Templates from 'core/templates';
import {
    getString,
    getStrings,
} from 'core/str';
import * as ModalEvents from 'core/modal_events';
import {displayFilepicker} from 'editor_tiny/utils';
import {getCurrentLanguage, getMoodleLang} from 'editor_tiny/options';
import {component} from "./common";
import EmbedModal from './embedmodal';
import Selectors from './selectors';
import {getEmbedPermissions} from './options';
import {getFilePicker} from 'editor_tiny/options';

export default class MediaEmbed {
    editor = null;
    canShowFilePicker = false;
    canShowFilePickerPoster = false;
    canShowFilePickerTrack = false;

    /**
     * @property {Object} The names of the alignment options.
     */
    helpStrings = null;

    /**
     * @property {boolean} Indicate that the user is updating the media or not.
     */
    isUpdating = false;

    /**
     * @property {Object} The currently selected media.
     */
    selectedMedia = null;

    constructor(editor) {
        const permissions = getEmbedPermissions(editor);

        // Indicates whether the file picker can be shown.
        this.canShowFilePicker = permissions.filepicker && (typeof getFilePicker(editor, 'media') !== 'undefined');
        this.canShowFilePickerPoster = permissions.filepicker && (typeof getFilePicker(editor, 'image') !== 'undefined');
        this.canShowFilePickerTrack = permissions.filepicker && (typeof getFilePicker(editor, 'subtitle') !== 'undefined');

        this.editor = editor;
    }

    async getHelpStrings() {
        if (!this.helpStrings) {
            const [addSource, tracks, subtitles, captions, descriptions, chapters, metadata] = await getStrings([
                'addsource_help',
                'tracks_help',
                'subtitles_help',
                'captions_help',
                'descriptions_help',
                'chapters_help',
                'metadata_help',
            ].map((key) => ({
                key,
                component,
            })));

            this.helpStrings = {addSource, tracks, subtitles, captions, descriptions, chapters, metadata};
        }

        return this.helpStrings;
    }

    async getTemplateContext(data) {
        const languages = this.prepareMoodleLang();

        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,
            showfilepicker: this.canShowFilePicker,
            showfilepickerposter: this.canShowFilePickerPoster,
            showfilepickertrack: this.canShowFilePickerTrack,
            langsinstalled: languages.installed,
            langsavailable: languages.available,
            link: true,
            video: false,
            audio: false,
            isupdating: this.isUpdating,
        }, data, helpIcons);
    }

    async displayDialogue() {
        this.selectedMedia = this.getSelectedMedia();
        const data = Object.assign({}, this.getCurrentEmbedData());
        this.isUpdating = Object.keys(data).length !== 0;

        this.currentModal = await EmbedModal.create({
            title: getString('createmedia', 'tiny_media'),
            templateContext: await this.getTemplateContext(data),
        });

        await this.registerEventListeners(this.currentModal);
    }

    getCurrentEmbedData() {
        const properties = this.getMediumProperties();
        if (!properties) {
            return {};
        }

        const processedProperties = {};
        processedProperties[properties.type.toLowerCase()] = properties;
        processedProperties.link = false;

        return processedProperties;
    }

    getSelectedMedia() {
        const mediaElm = this.editor.selection.getNode();

        if (!mediaElm) {
            return null;
        }

        if (mediaElm.nodeName.toLowerCase() === 'video' || mediaElm.nodeName.toLowerCase() === 'audio') {
            return mediaElm;
        }

        if (mediaElm.querySelector('video')) {
            return mediaElm.querySelector('video');
        }

        if (mediaElm.querySelector('audio')) {
            return mediaElm.querySelector('audio');
        }

        return null;
    }

    getMediumProperties() {
        const boolAttr = (elem, attr) => {
            // As explained in MDL-64175, some OS (like Ubuntu), are removing the value for these attributes.
            // So in order to check if attr="true", we need to check if the attribute exists and if the value is empty or true.
            return (elem.hasAttribute(attr) && (elem.getAttribute(attr) || elem.getAttribute(attr) === ''));
        };

        const tracks = {
            subtitles: [],
            captions: [],
            descriptions: [],
            chapters: [],
            metadata: []
        };
        const sources = [];

        const medium = this.selectedMedia;
        if (!medium) {
            return null;
        }
        medium.querySelectorAll('track').forEach((track) => {
            tracks[track.getAttribute('kind')].push({
                src: track.getAttribute('src'),
                srclang: track.getAttribute('srclang'),
                label: track.getAttribute('label'),
                defaultTrack: boolAttr(track, 'default')
            });
        });

        medium.querySelectorAll('source').forEach((source) => {
            sources.push(source.src);
        });

        return {
            type: medium.nodeName.toLowerCase() === 'video' ? Selectors.EMBED.mediaTypes.video : Selectors.EMBED.mediaTypes.audio,
            sources,
            poster: medium.getAttribute('poster'),
            title: medium.getAttribute('title'),
            width: medium.getAttribute('width'),
            height: medium.getAttribute('height'),
            autoplay: boolAttr(medium, 'autoplay'),
            loop: boolAttr(medium, 'loop'),
            muted: boolAttr(medium, 'muted'),
            controls: boolAttr(medium, 'controls'),
            tracks,
        };
    }

    prepareMoodleLang() {
        const moodleLangs = getMoodleLang(this.editor);
        const currentLanguage = getCurrentLanguage(this.editor);

        const installed = Object.entries(moodleLangs.installed).map(([lang, code]) => ({
            lang,
            code,
            "default": lang === currentLanguage,
        }));

        const available = Object.entries(moodleLangs.available).map(([lang, code]) => ({
            lang,
            code,
            "default": lang === currentLanguage,
        }));

        return {
            installed,
            available,
        };
    }

    getMoodleLangObj(subtitleLang) {
        const {available} = getMoodleLang(this.editor);

        if (available[subtitleLang]) {
            return {
                lang: subtitleLang,
                code: available[subtitleLang],
            };
        }

        return null;
    }

    filePickerCallback(params, element, fpType) {
        if (params.url !== '') {
            const tabPane = element.closest('.tab-pane');
            element.closest(Selectors.EMBED.elements.source).querySelector(Selectors.EMBED.elements.url).value = params.url;

            if (tabPane.id === this.editor.getElement().id + '_' + Selectors.EMBED.mediaTypes.link.toLowerCase()) {
                tabPane.querySelector(Selectors.EMBED.elements.name).value = params.file;
            }

            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 = this.getMoodleLangObj(subtitleLang);
                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;
                }
            }
        }
    }

    addMediaSourceComponent(element, callback) {
        const sourceElement = element.closest(Selectors.EMBED.elements.source + Selectors.EMBED.elements.mediaSource);
        const clone = sourceElement.cloneNode(true);

        sourceElement.querySelector('.removecomponent-wrapper').classList.remove('hidden');
        sourceElement.querySelector('.addcomponent-wrapper').classList.add('hidden');

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

        if (callback) {
            callback(clone);
        }
    }

    removeMediaSourceComponent(element) {
        const sourceElement = element.closest(Selectors.EMBED.elements.source + Selectors.EMBED.elements.mediaSource);
        sourceElement.remove();
    }

    addTrackComponent(element, callback) {
        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);

        if (callback) {
            callback(clone);
        }
    }

    removeTrackComponent(element) {
        const sourceElement = element.closest(Selectors.EMBED.elements.track);
        sourceElement.remove();
    }

    getMediumTypeFromTabPane(tabPane) {
        return tabPane.getAttribute('data-medium-type');
    }

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

    getMediaHTML(form) {
        const mediumType = this.getMediumTypeFromTabPane(form.querySelector('.root.tab-content > .tab-pane.active'));
        const tabContent = form.querySelector(Selectors.EMBED.elements[mediumType.toLowerCase() + 'Pane']);

        return this['getMediaHTML' + mediumType[0].toUpperCase() + mediumType.substr(1)](tabContent);
    }

    getMediaHTMLLink(tab) {
        const context = {
            url: tab.querySelector(Selectors.EMBED.elements.url).value,
            name: tab.querySelector(Selectors.EMBED.elements.name).value || false
        };

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

    getMediaHTMLVideo(tab) {
        const context = this.getContextForMediaHTML(tab);
        context.width = tab.querySelector(Selectors.EMBED.elements.width).value || false;
        context.height = tab.querySelector(Selectors.EMBED.elements.height).value || false;
        context.poster = tab.querySelector(
            `${Selectors.EMBED.elements.posterSource} ${Selectors.EMBED.elements.url}`
        ).value || false;

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

    getMediaHTMLAudio(tab) {
        const context = this.getContextForMediaHTML(tab);

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

    getContextForMediaHTML(tab) {
        const tracks = Array.from(tab.querySelectorAll(Selectors.EMBED.elements.track)).map(track => ({
            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 ||
                track.querySelector(Selectors.EMBED.elements.trackLang).value,
            srclang: track.querySelector(Selectors.EMBED.elements.trackLang).value,
            defaultTrack: track.querySelector(Selectors.EMBED.elements.trackDefault).checked ? "true" : null
        })).filter((track) => !!track.track);

        const sources = Array.from(tab.querySelectorAll(Selectors.EMBED.elements.mediaSource + ' '
            + Selectors.EMBED.elements.url))
                .filter((source) => !!source.value)
                .map((source) => source.value);

        return {
            sources,
            description: tab.querySelector(Selectors.EMBED.elements.mediaSource + ' '
                + Selectors.EMBED.elements.url).value || false,
            tracks,
            showControls: tab.querySelector(Selectors.EMBED.elements.mediaControl).checked,
            autoplay: tab.querySelector(Selectors.EMBED.elements.mediaAutoplay).checked,
            muted: tab.querySelector(Selectors.EMBED.elements.mediaMute).checked,
            loop: tab.querySelector(Selectors.EMBED.elements.mediaLoop).checked,
            title: tab.querySelector(Selectors.EMBED.elements.title).value || false
        };
    }

    getFilepickerTypeFromElement(element) {
        if (element.closest(Selectors.EMBED.elements.posterSource)) {
            return 'image';
        }
        if (element.closest(Selectors.EMBED.elements.trackSource)) {
            return 'subtitle';
        }

        return 'media';
    }

    async clickHandler(e) {
        const element = e.target;

        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.filePickerCallback(params, element, fpType);
        }

        const addComponentSourceAction = element.closest(Selectors.EMBED.elements.mediaSource + ' .addcomponent');
        if (addComponentSourceAction) {
            e.preventDefault();
            this.addMediaSourceComponent(element);
        }

        const removeComponentSourceAction = element.closest(Selectors.EMBED.elements.mediaSource + ' .removecomponent');
        if (removeComponentSourceAction) {
            e.preventDefault();
            this.removeMediaSourceComponent(element);
        }

        const addComponentTrackAction = element.closest(Selectors.EMBED.elements.track + ' .addcomponent');
        if (addComponentTrackAction) {
            e.preventDefault();
            this.addTrackComponent(element);
        }

        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('.root.tab-content')
                .querySelectorAll(Selectors.EMBED.elements.trackDefault)
                .forEach((select) => {
                    if (select !== element && getKind(element) === getKind(select)) {
                        select.checked = false;
                    }
                });
        }
    }

    async handleDialogueSubmission(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);
            }
        }
    }

    async registerEventListeners(modal) {
        await modal.getBody();
        const $root = modal.getRoot();
        const root = $root[0];
        if (this.canShowFilePicker || this.canShowFilePickerPoster || this.canShowFilePickerTrack) {
            root.addEventListener('click', this.clickHandler.bind(this));
        }

        $root.on(ModalEvents.save, this.handleDialogueSubmission.bind(this));
        $root.on(ModalEvents.hidden, () => {
            this.currentModal.destroy();
        });
        $root.on(ModalEvents.shown, () => {
            root.querySelectorAll(Selectors.EMBED.elements.trackLang).forEach((dropdown) => {
                const defaultVal = dropdown.getAttribute('data-value');
                if (defaultVal) {
                    dropdown.value = defaultVal;
                }
            });
        });
    }
}