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 Record RTC type.

 *

 * @module      tiny_recordrtc/base_recorder

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

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

 */

import {getString, getStrings} from 'core/str';

import {component} from './common';

import Pending from 'core/pending';

import {getData} from './options';

import uploadFile from 'editor_tiny/uploader';

import {add as addToast} from 'core/toast';

import * as ModalEvents from 'core/modal_events';

import * as Templates from 'core/templates';

import {saveCancelPromise} from 'core/notification';

import {prefetchStrings, prefetchTemplates} from 'core/prefetch';

import AlertModal from 'core/local/modal/alert';

/**

 * The RecordRTC base class for audio, video, and any other future types

 */

export default class {

    stopRequested = false;

    /**

     * Constructor for the RecordRTC class

     *

     * @param {TinyMCE} editor The Editor to which the content will be inserted

     * @param {Modal} modal The Moodle Modal that contains the interface used for recording

     */

    constructor(editor, modal) {

        this.ready = false;

        if (!this.checkAndWarnAboutBrowserCompatibility()) {

            return;

        }

        this.editor = editor;

        this.config = getData(editor).params;

        this.modal = modal;

        this.modalRoot = modal.getRoot()[0];

        this.startStopButton = this.modalRoot.querySelector('button[data-action="startstop"]');

        this.uploadButton = this.modalRoot.querySelector('button[data-action="upload"]');

        // Disable the record button untilt he stream is acquired.

        this.setRecordButtonState(false);

        this.player = this.configurePlayer();

        this.registerEventListeners();

        this.ready = true;

        this.captureUserMedia();

        this.prefetchContent();

    }

    /**

     * Check whether the browser is compatible.

     *

     * @returns {boolean}

     */

    isReady() {

        return this.ready;

    }

    // Disable eslint's valid-jsdoc rule as the following methods are abstract and mnust be overridden by the child class.

    /* eslint-disable valid-jsdoc, no-unused-vars */

    /**

     * Get the Player element for this type.

     *

     * @returns {HTMLElement} The player element, typically an audio or video tag.

     */

    configurePlayer() {

        throw new Error(`configurePlayer() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Get the list of supported mimetypes for this recorder.

     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported}

     *

     * @returns {string[]} The list of supported mimetypes.

     */

    getSupportedTypes() {

        throw new Error(`getSupportedTypes() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Get any recording options passed into the MediaRecorder.

     * Please note that the mimeType will be fetched from {@link getSupportedTypes()}.

     *

     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder#options}

     * @returns {Object}

     */

    getRecordingOptions() {

        throw new Error(`getRecordingOptions() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Get a filename for the generated file.

     *

     * Typically this function will take a prefix and add a type-specific suffix such as the extension to it.

     *

     * @param {string} prefix The prefix for the filename generated by the recorder.

     * @returns {string}

     */

    getFileName(prefix) {

        throw new Error(`getFileName() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Get a list of constraints as required by the getUserMedia() function.

     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#constraints}

     *

     * @returns {Object}

     */

    getMediaConstraints() {

        throw new Error(`getMediaConstraints() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Whether to start playing the recording as it is captured.

     * @returns {boolean} Whether to start playing the recording as it is captured.

     */

    playOnCapture() {

        return false;

    }

    /**

     * Get the time limit for this recording type.

     *

     * @returns {number} The time limit in seconds.

     */

    getTimeLimit() {

        throw new Error(`getTimeLimit() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Get the name of the template used when embedding the URL in the editor content.

     *

     * @returns {string}

     */

    getEmbedTemplateName() {

        throw new Error(`getEmbedTemplateName() must be implemented in ${this.constructor.name}`);

    }

    /**

     * Fetch the Class of the Modal to be displayed.

     *

     * @returns {Modal}

     */

    static getModalClass() {

        throw new Error(`getModalClass() must be implemented in ${this.constructor.name}`);

    }

    /* eslint-enable valid-jsdoc, no-unused-vars */

    /**

     * Get the options for the MediaRecorder.

     *

     * @returns {object} The options for the MediaRecorder instance.

     */

    getParsedRecordingOptions() {

        const requestedTypes = this.getSupportedTypes();

        const possibleTypes = requestedTypes.reduce((result, type) => {

            result.push(type);

            // Safari seems to use codecs: instead of codecs=.

            // It is safe to add both, so we do, but we want them to remain in order.

            result.push(type.replace('=', ':'));

            return result;

        }, []);

        const compatTypes = possibleTypes.filter((type) => window.MediaRecorder.isTypeSupported(type));

        const options = this.getRecordingOptions();

        if (compatTypes.length !== 0) {

            options.mimeType = compatTypes[0];

        }

        window.console.info(

            `Selected codec ${options.mimeType} from ${compatTypes.length} options.`,

            compatTypes,

        );

        return options;

    }

    /**

     * Start capturing the User Media and handle success or failure of the capture.

     */

    async captureUserMedia() {

        try {

            const stream = await navigator.mediaDevices.getUserMedia(this.getMediaConstraints());

            this.handleCaptureSuccess(stream);

        } catch (error) {

            this.handleCaptureFailure(error);

        }

    }

    /**

     * Prefetch some of the content that will be used in the UI.

     *

     * Note: not all of the strings used are pre-fetched.

     * Some of the strings will be fetched because their template is used.

     */

    prefetchContent() {

        prefetchStrings(component, [

            'uploading',

            'recordagain_title',

            'recordagain_desc',

            'discard_title',

            'discard_desc',

            'confirm_yes',

            'recordinguploaded',

            'maxfilesizehit',

            'maxfilesizehit_title',

            'uploadfailed',

        ]);

        prefetchTemplates([

            this.getEmbedTemplateName(),

            'tiny_recordrtc/timeremaining',

        ]);

    }

    /**

     * Display an error message to the user.

     *

     * @param {Promise<string>} title The error title

     * @param {Promise<string>} content The error message

     * @returns {Promise<Modal>}

     */

    async displayAlert(title, content) {

        const pendingPromise = new Pending('core/confirm:alert');

        const modal = await AlertModal.create({

            title: title,

            body: content,

            removeOnClose: true,

        });

        modal.show();

        pendingPromise.resolve();

        return modal;

    }

    /**

     * Handle successful capture of the User Media.

     *

     * @param {MediaStream} stream The stream as captured by the User Media.

     */

    handleCaptureSuccess(stream) {

        // Set audio player source to microphone stream.

        this.player.srcObject = stream;

        if (this.playOnCapture()) {

            // Mute audio, distracting while recording.

            this.player.muted = true;

            this.player.play();

        }

        this.stream = stream;

        this.setupPlayerSource();

        this.setRecordButtonState(true);

    }

    /**

     * Setup the player to use the stream as a source.

     */

    setupPlayerSource() {

        if (!this.player.srcObject) {

            this.player.srcObject = this.stream;

            // Mute audio, distracting while recording.

            this.player.muted = true;

            this.player.play();

        }

    }

    /**

     * Enable the record button.

     *

     * @param {boolean|null} enabled Set the button state

     */

    setRecordButtonState(enabled) {

        this.startStopButton.disabled = !enabled;

    }

    /**

     * Configure button visibility for the record button.

     *

     * @param {boolean} visible Set the visibility of the button.

     */

    setRecordButtonVisibility(visible) {

        const container = this.getButtonContainer('start-stop');

        container.classList.toggle('hide', !visible);

    }

    /**

     * Enable the upload button.

     *

     * @param {boolean|null} enabled Set the button state

     */

    setUploadButtonState(enabled) {

        this.uploadButton.disabled = !enabled;

    }

    /**

     * Configure button visibility for the upload button.

     *

     * @param {boolean} visible Set the visibility of the button.

     */

    setUploadButtonVisibility(visible) {

        const container = this.getButtonContainer('upload');

        container.classList.toggle('hide', !visible);

    }

    /**

     * Handle failure to capture the User Media.

     *

     * @param {Error} error

     */

    handleCaptureFailure(error) {

        // Changes 'CertainError' -> 'gumcertain' to match language string names.

        var subject = `gum${error.name.replace('Error', '').toLowerCase()}`;

        this.displayAlert(

            getString(`${subject}_title`, component),

            getString(subject, component)

        );

    }

    /**

     * Close the modal and stop recording.

     */

    close() {

        // Closing the modal will destroy it and remove it from the DOM.

        // It will also stop the recording via the hidden Modal Event.

        this.modal.hide();

    }

    /**

     * Register event listeners for the modal.

     */

    registerEventListeners() {

        this.modalRoot.addEventListener('click', this.handleModalClick.bind(this));

        this.modal.getRoot().on(ModalEvents.outsideClick, this.outsideClickHandler.bind(this));

        this.modal.getRoot().on(ModalEvents.hidden, () => {

            this.cleanupStream();

            this.requestRecordingStop();

        });

    }

    /**

     * Prevent the Modal from closing when recording is on process.

     *

     * @param {MouseEvent} event The click event

     */

    async outsideClickHandler(event) {

        if (this.isRecording()) {

            // The user is recording.

            // Do not distract with a confirmation, just prevent closing.

            event.preventDefault();

        } else if (this.hasData()) {

            // If there is a blobsize then there is data that may be lost.

            // Ask the user to confirm they want to close the modal.

            // We prevent default here, and then close the modal if they confirm.

            event.preventDefault();

            try {

                await saveCancelPromise(

                    await getString("discard_title", component),

                    await getString("discard_desc", component),

                    await getString("confirm_yes", component),

                );

                this.modal.hide();

            } catch (error) {

                // Do nothing, the modal will not close.

            }

        }

    }

    /**

     * Handle a click within the Modal.

     *

     * @param {MouseEvent} event The click event

     */

    handleModalClick(event) {

        const button = event.target.closest('button');

        if (button && button.dataset.action) {

            const action = button.dataset.action;

            if (action === 'startstop') {

                this.handleRecordingStartStopRequested();

            }

            if (action === 'upload') {

                this.uploadRecording();

            }

        }

    }

    /**

     * Handle the click event for the recording start/stop button.

     */

    handleRecordingStartStopRequested() {

        if (this.mediaRecorder?.state === 'recording') {

            this.requestRecordingStop();

        } else {

            this.startRecording();

        }

    }

    /**

     * Handle the media stream after it has finished.

     */

    async onMediaStopped() {

        // Set source of audio player.

        this.blob = new Blob(this.data.chunks, {

            type: this.mediaRecorder.mimeType

        });

        this.player.srcObject = null;

        this.player.src = URL.createObjectURL(this.blob);

        // Change the label to "Record again".

        this.setRecordButtonTextFromString('recordagain');

        // Show audio player with controls enabled, and unmute.

        this.player.muted = false;

        this.player.controls = true;

        this.getButtonContainer('player')?.classList.toggle('hide', false);

        // Show upload button.

        this.setUploadButtonVisibility(true);

        this.setUploadButtonState(true);

    }

    /**

     * Upload the recording and insert it into the editor content.

     */

    async uploadRecording() {

        // Trigger error if no recording has been made.

        if (this.data.chunks.length === 0) {

            this.displayAlert('norecordingfound');

            return;

        }

        const fileName = this.getFileName((Math.random() * 1000).toString().replace('.', ''));

        // Upload recording to server.

        try {

            // Once uploading starts, do not allow any further changes to the recording.

            this.setRecordButtonVisibility(false);

            // Disable the upload button.

            this.setUploadButtonState(false);

            // Upload the recording.

            const fileURL = await uploadFile(this.editor, 'media', this.blob, fileName, (progress) => {

                this.setUploadButtonTextProgress(progress);

            });

            this.insertMedia(fileURL);

            this.close();

            addToast(await getString('recordinguploaded', component));

        } catch (error) {

            // Show a toast and unhide the button.

            this.setUploadButtonState(true);

            addToast(await getString('uploadfailed', component, {error}), {

                type: 'error',

            });

        }

    }

    /**

     * Helper to get the container that a button is in.

     *

     * @param {string} purpose The button purpose

     * @returns {HTMLElement}

     */

    getButtonContainer(purpose) {

        return this.modalRoot.querySelector(`[data-purpose="${purpose}-container"]`);

    }

    /**

     * Check whether the browser is compatible with capturing media.

     *

     * @returns {boolean}

     */

    static isBrowserCompatible() {

        return this.checkSecure() && this.hasUserMedia();

    }

    static async display(editor) {

        const ModalClass = this.getModalClass();

        const modal = await ModalClass.create({

            templateContext: {},

            large: true,

            removeOnClose: true,

        });

        // Set up the VideoRecorder.

        const recorder = new this(editor, modal);

        if (recorder.isReady()) {

            modal.show();

        }

        return modal;

    }

    /**

     * Check whether the browser is compatible with capturing media, and display a warning if not.

     *

     * @returns {boolean}

     */

    checkAndWarnAboutBrowserCompatibility() {

        if (!this.constructor.checkSecure()) {

            getStrings(['insecurealert_title', 'insecurealert'].map((key) => ({key, component})))

                .then(([title, message]) => addToast(message, {title, type: 'error'}))

                .catch();

            return false;

        }

        if (!this.constructor.hasUserMedia) {

            getStrings(['nowebrtc_title', 'nowebrtc'].map((key) => ({key, component})))

                .then(([title, message]) => addToast(message, {title, type: 'error'}))

                .catch();

            return false;

        }

        return true;

    }

    /**

     * Check whether the browser supports WebRTC.

     *

     * @returns {boolean}

     */

    static hasUserMedia() {

        return (navigator.mediaDevices && window.MediaRecorder);

    }

    /**

     * Check whether the hostname is either hosted over SSL, or from a valid localhost hostname.

     *

     * The UserMedia API can only be used in secure contexts as noted.

     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#privacy_and_security}

     *

     * @returns {boolean} Whether the plugin can be loaded.

     */

    static checkSecure() {

        // Note: We can now use window.isSecureContext.

        // https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection

        // https://developer.mozilla.org/en-US/docs/Web/API/isSecureContext

        return window.isSecureContext;

    }

    /**

     * Update the content of the stop recording button timer.

     */

    async setStopRecordingButton() {

        const {html, js} = await Templates.renderForPromise('tiny_recordrtc/timeremaining', this.getTimeRemaining());

        Templates.replaceNodeContents(this.startStopButton, html, js);

        this.buttonTimer = setInterval(this.updateRecordButtonTime.bind(this), 500);

    }

    /**

     * Update the time on the stop recording button.

     */

    updateRecordButtonTime() {

        const {remaining, minutes, seconds} = this.getTimeRemaining();

        if (remaining < 0) {

            this.requestRecordingStop();

        } else {

            this.startStopButton.querySelector('[data-type="minutes"]').textContent = minutes;

            this.startStopButton.querySelector('[data-type="seconds"]').textContent = seconds;

        }

    }

    /**

     * Set the text of the record button using a language string.

     *

     * @param {string} string The string identifier

     */

    async setRecordButtonTextFromString(string) {

        this.startStopButton.textContent = await getString(string, component);

    }

    /**

     * Set the upload button text progress.

     *

     * @param {number} progress The progress

     */

    async setUploadButtonTextProgress(progress) {

        this.uploadButton.textContent = await getString('uploading', component, {

            progress: Math.round(progress * 100) / 100,

        });

    }

    async resetUploadButtonText() {

        this.uploadButton.textContent = await getString('upload', component);

    }

    /**

     * Clear the timer for the stop recording button.

     */

    clearButtonTimer() {

        if (this.buttonTimer) {

            clearInterval(this.buttonTimer);

        }

        this.buttonTimer = null;

    }

    /**

     * Get the time remaining for the recording.

     *

     * @returns {Object} The minutes and seconds remaining.

     */

    getTimeRemaining() {

        // All times are in milliseconds

        const now = new Date().getTime();

        const remaining = Math.floor(this.getTimeLimit() - ((now - this.startTime) / 1000));

        const formatter = new Intl.NumberFormat(navigator.language, {minimumIntegerDigits: 2});

        const seconds = formatter.format(remaining % 60);

        const minutes = formatter.format(Math.floor((remaining - seconds) / 60));

        return {

            remaining,

            minutes,

            seconds,

        };

    }

    /**

     * Get the maximum file size that can be uploaded.

     *

     * @returns {number} The max byte size

     */

    getMaxUploadSize() {

        return this.config.maxrecsize;

    }

    /**

     * Stop the recording.

     * Please note that this should only stop the recording.

     * Anything related to processing the recording should be handled by the

     * mediaRecorder's stopped event handler which is processed after it has stopped.

     */

    requestRecordingStop() {

        if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {

            this.stopRequested = true;

        } else {

            // There is no recording to stop, but the stream must still be cleaned up.

            this.cleanupStream();

        }

    }

    stopRecorder() {

        this.mediaRecorder.stop();

        // Unmute the player so that the audio is heard during playback.

        this.player.muted = false;

    }

    /**

     * Clean up the stream.

     *

     * This involves stopping any track which is still active.

     */

    cleanupStream() {

        if (this.stream) {

            this.stream.getTracks()

                .filter((track) => track.readyState !== 'ended')

                .forEach((track) => track.stop());

        }

    }

    /**

     * Handle the mediaRecorder `stop` event.

     */

    handleStopped() {

        // Handle the stream data.

        this.onMediaStopped();

        // Clear the button timer.

        this.clearButtonTimer();

    }

    /**

     * Handle the mediaRecorder `start` event.

     *

     * This event is called when the recording starts.

     */

    handleStarted() {

        this.startTime = new Date().getTime();

        this.setStopRecordingButton();

    }

    /**

     * Handle the mediaRecorder `dataavailable` event.

     *

     * @param {Event} event

     */

    handleDataAvailable(event) {

        if (this.isRecording()) {

            const newSize = this.data.blobSize + event.data.size;

            // Recording stops when either the maximum upload size is reached, or the time limit expires.

            // The time limit is checked in the `updateButtonTime` function.

            if (newSize >= this.getMaxUploadSize()) {

                this.stopRecorder();

                this.displayFileLimitHitMessage();

            } else {

                // Push recording slice to array.

                this.data.chunks.push(event.data);

                // Size of all recorded data so far.

                this.data.blobSize = newSize;

                if (this.stopRequested) {

                    this.stopRecorder();

                }

            }

        }

    }

    async displayFileLimitHitMessage() {

        addToast(await getString('maxfilesizehit', component), {

            title: await getString('maxfilesizehit_title', component),

            type: 'error',

        });

    }

    /**

     * Check whether the recording is in progress.

     *

     * @returns {boolean}

     */

    isRecording() {

        return this.mediaRecorder?.state === 'recording';

    }

    /**

     * Whether any data has been recorded.

     *

     * @returns {boolean}

     */

    hasData() {

        return !!this.data?.blobSize;

    }

    /**

     * Start the recording

     */

    async startRecording() {

        if (this.mediaRecorder) {

            // Stop the existing recorder if it exists.

            if (this.isRecording()) {

                this.mediaRecorder.stop();

            }

            if (this.hasData()) {

                const resetRecording = await this.recordAgainConfirmation();

                if (!resetRecording) {

                    // User cancelled at the confirmation to reset the data, so exit early.

                    return;

                }

                this.setUploadButtonVisibility(false);

            }

            this.mediaRecorder = null;

        }

        // The options for the recording codecs and bitrates.

        this.mediaRecorder = new MediaRecorder(this.stream, this.getParsedRecordingOptions());

        this.mediaRecorder.addEventListener('dataavailable', this.handleDataAvailable.bind(this));

        this.mediaRecorder.addEventListener('stop', this.handleStopped.bind(this));

        this.mediaRecorder.addEventListener('start', this.handleStarted.bind(this));

        this.data = {

            chunks: [],

            blobSize: 0

        };

        this.setupPlayerSource();

        this.stopRequested = false;

        // Capture in 50ms chunks.

        this.mediaRecorder.start(50);

    }

    /**

     * Confirm whether the user wants to reset the existing recoring.

     *

     * @returns {Promise<boolean>} Whether the user confirmed the reset.

     */

    async recordAgainConfirmation() {

        try {

            await saveCancelPromise(

                await getString("recordagain_title", component),

                await getString("recordagain_desc", component),

                await getString("confirm_yes", component)

            );

            return true;

        } catch {

            return false;

        }

    }

    /**

     * Insert the HTML to embed the recording into the editor content.

     *

     * @param {string} source The URL to view the media.

     */

    async insertMedia(source) {

        const {html} = await Templates.renderForPromise(

            this.getEmbedTemplateName(),

            this.getEmbedTemplateContext({

                source,

            })

        );

        this.editor.insertContent(html);

    }

    /**

     * Add or modify the template parameters for the specified type.

     *

     * @param {Object} templateContext The Tempalte context to use

     * @returns {Object} The finalised template context

     */

    getEmbedTemplateContext(templateContext) {

        return templateContext;

    }

}