WebSVN – Moodle – Diff – /lib/editor/tiny/plugins/recordrtc/amd/src/base_recorder.js

  */
 import {getString, getStrings} from 'core/str';
 import {component} from './common';
 import Pending from 'core/pending';
-import {getData} from './options';
+import {getData, isPausingAllowed} 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';
  * The RecordRTC base class for audio, video, and any other future types
  */
 export default class {
+    stopRequested = false;
+    buttonTimer = null;
+    pauseTime = null;
-    stopRequested = false;
+    startTime = null;
     /**
      * Constructor for the RecordRTC class
         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"]');
+        this.pauseResumeButton = this.modalRoot.querySelector('button[data-action="pauseresume"]');
         // Disable the record button untilt he stream is acquired.
         this.setRecordButtonState(false);
             'confirm_yes',
             'recordinguploaded',
             'maxfilesizehit',
             'maxfilesizehit_title',
             'uploadfailed',
+            'pause',
+            'resume',
         ]);
         prefetchTemplates([
             this.getEmbedTemplateName(),
         const container = this.getButtonContainer('start-stop');
         container.classList.toggle('hide', !visible);
+    }
+    /**
+     * Configure button visibility for the pause button.
+     *
+     * @param {boolean} visible Set the visibility of the button.
+     */
+    setPauseButtonVisibility(visible) {
+        if (this.pauseResumeButton) {
+            this.pauseResumeButton.classList.toggle('hidden', !visible);
+        }
+    }
     /**
      * Enable the upload button.
+     *
      * @param {boolean|null} enabled Set the button state
      */
      */
     setUploadButtonVisibility(visible) {
         const container = this.getButtonContainer('upload');
         container.classList.toggle('hide', !visible);
+    }
+    /**
+     * Sets the state of the audio player, including visibility, muting, and controls.
+     *
+     * @param {boolean} state A boolean indicating the audio player state.
+     */
+    setPlayerState(state) {
+        // Mute or unmute the audio player and show or hide controls.
+        this.player.muted = !state;
+        this.player.controls = state;
+        // Toggle the 'hide' class on the player button container based on state.
+        this.getButtonContainer('player')?.classList.toggle('hide', !state);
+    }
     /**
      * Handle failure to capture the User Media.
+     *
      * @param {Error} error
      */
         this.modal.getRoot().on(ModalEvents.outsideClick, this.outsideClickHandler.bind(this));
         this.modal.getRoot().on(ModalEvents.hidden, () => {
             this.cleanupStream();
             this.requestRecordingStop();
         });
+        this.player.addEventListener('error', this.handlePlayerError.bind(this));
+        this.player.addEventListener('loadedmetadata', this.handlePlayerLoadedMetadata.bind(this));
+    }
+    /**
+     * Handle the player `error` event.
+     *
+     * This event is called when the player throws an error.
+     */
+    handlePlayerError() {
+        const error = this.player.error;
+        if (error) {
+            const message = `An error occurred: ${error.message || 'Unknown error'}. Please try again.`;
+            addToast(message, {type: error});
+            // Disable the upload button.
+            this.setUploadButtonState(false);
+        }
+    }
+    /**
+     * Handles the event when the player's metadata has been loaded.
+     */
+    handlePlayerLoadedMetadata() {
+        if (isFinite(this.player.duration)) {
+            // Note: In Chrome, you need to seek to activate the error listener
+            // if an issue arises after inserting the recorded audio into the player source.
+            this.player.currentTime = 0.1;
+        }
+    }
     /**
      * Prevent the Modal from closing when recording is on process.
+     *
      * @param {MouseEvent} event The click event
      */
     async outsideClickHandler(event) {
-        if (this.isRecording()) {
+        if (this.isRecording() || this.isPaused()) {
             // The user is recording.
             // Do not distract with a confirmation, just prevent closing.
             event.preventDefault();
         } else if (this.hasData()) {
+            }
             if (action === 'upload') {
                 this.uploadRecording();
+            }
+            if (action === 'pauseresume') {
+                this.handleRecordingPauseResumeRequested();
+            }
+        }
+    }
     /**
      * Handle the click event for the recording start/stop button.
      */
     handleRecordingStartStopRequested() {
-        if (this.mediaRecorder?.state === 'recording') {
+        if (this.isRecording() || this.isPaused()) {
             this.requestRecordingStop();
         } else {
             this.startRecording();
+        }
+    }
+    /**
+     * Handle the click event for the recording pause/resume button.
+     */
+    handleRecordingPauseResumeRequested() {
+        if (this.isRecording()) {
+            // Pause recording.
+            this.mediaRecorder.pause();
+        } else if (this.isPaused()) {
+            // Resume recording.
+            this.mediaRecorder.resume();
+        }
+    }
     /**
      * Handle the media stream after it has finished.
      */
         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);
+        this.setRecordButtonTextFromString('recordagain');
+        // Show upload button.
-        // Show upload button.
+        this.setUploadButtonVisibility(true);
+        this.setPlayerState(true);
+        this.setUploadButtonState(true);
+        // Hide the pause button.
+        this.setPauseButtonVisibility(false);
+        if (this.mediaRecorder.state === 'inactive') {
-        this.setUploadButtonVisibility(true);
+            this.setPauseButtonTextFromString('pause');
         this.setUploadButtonState(true);
+    }
+    }
     static async display(editor) {
         const ModalClass = this.getModalClass();
         const modal = await ModalClass.create({
+            templateContext: {
+                isallowedpausing: isPausingAllowed(editor),
-            templateContext: {},
+            },
             large: true,
             removeOnClose: true,
         });
      * 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);
+        this.startButtonTimer();
+    }
     /**
      * Update the time on the stop recording button.
     async setRecordButtonTextFromString(string) {
         this.startStopButton.textContent = await getString(string, component);
+    }
+    /**
+     * Set the text of the pause button using a language string.
+     *
+     * @param {string} string The string identifier
+     */
+    async setPauseButtonTextFromString(string) {
+        if (this.pauseResumeButton) {
+            this.pauseResumeButton.textContent = await getString(string, component);
+        }
+    }
     /**
      * Set the upload button text progress.
+     *
      * @param {number} progress The progress
      */
     clearButtonTimer() {
         if (this.buttonTimer) {
             clearInterval(this.buttonTimer);
+        }
         this.buttonTimer = null;
+        this.pauseTime = null;
+        this.startTime = null;
+    }
+    /**
+     * Pause the timer for the stop recording button.
+     */
+    pauseButtonTimer() {
+        // Stop the countdown timer.
+        this.pauseTime = new Date().getTime(); // Store pause time.
+        if (this.buttonTimer) {
+            clearInterval(this.buttonTimer);
+        }
+    }
+    /**
+     * Start the timer for the start recording button.
+     * If the recording was paused, the timer will resume from the pause time.
+     */
+    startButtonTimer() {
+        if (this.pauseTime !== null) {
+            // Resume from pause.
+            const pauseDuration = new Date().getTime() - this.pauseTime;
+            // Adjust start time by pause duration.
+            this.startTime += pauseDuration;
+            this.pauseTime = null;
+        }
+        this.buttonTimer = setInterval(this.updateRecordButtonTime.bind(this), 500);
+    }
     /**
      * Get the time remaining for the recording.
+     *
      * @returns {Object} The minutes and seconds remaining.
      */
     getTimeRemaining() {
-        // All times are in milliseconds
+        // All times are in milliseconds.
+        let now = new Date().getTime();
+        if (this.pauseTime !== null) {
+            // If paused, use pauseTime instead of current time.
+            now = this.pauseTime;
         const now = new Date().getTime();
         const remaining = Math.floor(this.getTimeLimit() - ((now - this.startTime) / 1000));
         const formatter = new Intl.NumberFormat(navigator.language, {minimumIntegerDigits: 2});
      * mediaRecorder's stopped event handler which is processed after it has stopped.
      */
     requestRecordingStop() {
         if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
             this.stopRequested = true;
+            if (this.isPaused()) {
+                this.stopRecorder();
+            }
         } else {
             // There is no recording to stop, but the stream must still be cleaned up.
             this.cleanupStream();
+        }
+    }
+    stopRecorder() {
+        if (this.isPaused()) {
+            this.pauseTime = null;
     stopRecorder() {
         this.mediaRecorder.stop();
         // Unmute the player so that the audio is heard during playback.
+     *
      * This event is called when the recording starts.
      */
     handleStarted() {
         this.startTime = new Date().getTime();
+        if (isPausingAllowed(this.editor) && !this.isPaused()) {
+            this.setPauseButtonVisibility(true);
+        }
         this.setStopRecordingButton();
+    }
+    /**
+     * Handle the mediaRecorder `pause` event.
+     *
+     * This event is called when the recording pauses.
+     */
+    handlePaused() {
+        this.pauseButtonTimer();
+        this.setPauseButtonTextFromString('resume');
+    }
+    /**
+     * Handle the mediaRecorder `resume` event.
+     *
+     * This event is called when the recording resumes.
+     */
+    handleResume() {
+        this.startButtonTimer();
+        this.setPauseButtonTextFromString('pause');
+    }
     /**
      * Handle the mediaRecorder `dataavailable` event.
+     *
      * @param {Event} event
      */
     handleDataAvailable(event) {
-        if (this.isRecording()) {
+        if (this.isRecording() || this.isPaused()) {
             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()) {
     isRecording() {
         return this.mediaRecorder?.state === 'recording';
+    }
+    /**
+     * Check whether the recording is paused.
+     *
+     * @returns {boolean}
+     */
+    isPaused() {
+        return this.mediaRecorder?.state === 'paused';
+    }
     /**
      * Whether any data has been recorded.
+     *
      * @returns {boolean}
      */
      * Start the recording
      */
     async startRecording() {
         if (this.mediaRecorder) {
             // Stop the existing recorder if it exists.
-            if (this.isRecording()) {
+            if (this.isRecording() || this.isPaused()) {
                 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.setPlayerState(false);
+                if (!this.stream.active) {
+                    await this.captureUserMedia();
                 this.setUploadButtonVisibility(false);
+            }
         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.mediaRecorder.addEventListener('pause', this.handlePaused.bind(this));
-        this.mediaRecorder.addEventListener('start', this.handleStarted.bind(this));
+        this.mediaRecorder.addEventListener('resume', this.handleResume.bind(this));
         this.data = {
             chunks: [],

Proyectos de Subversion Moodle

(root)/lib/editor/tiny/plugins/recordrtc/amd/src/base_recorder.js – Rev 1 → 1441