@instructure/canvas-rce 7.3.1 → 8.0.0

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -18,37 +18,44 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { AUDIO_PLAYER_SIZE as CANVAS_AUDIO_PLAYER_SIZE } from '@instructure/canvas-media';
 import bridge from '../../../../bridge';
+import { showFlashAlert } from '../../../../common/FlashAlert';
+import formatMessage from '../../../../format-message';
+import RCEGlobals from '../../../RCEGlobals';
 import { asVideoElement } from '../../shared/ContentSelection';
 import { findMediaPlayerIframe } from '../../shared/iframeUtils';
+import { isStudioEmbeddedMedia, parseStudioOptions, updateStudioEmbedOptions, validateStudioEmbedOptions } from '../../shared/StudioLtiSupportUtils';
 import VideoOptionsTray from '.';
-import { isStudioEmbeddedMedia, parseStudioOptions } from '../../shared/StudioLtiSupportUtils';
-import RCEGlobals from '../../../RCEGlobals';
 export const CONTAINER_ID = 'instructure-video-options-tray-container';
-export const VIDEO_SIZE_DEFAULT = {
-  height: '225px',
-  width: '400px'
-}; // AKA "LARGE"
 export const STUDIO_PLAYER_VIDEO_SIZE_DEFAULT = {
   height: '300px',
   width: '480px'
 };
 export const AUDIO_PLAYER_SIZE = {
-  width: '320px',
-  height: '14.25rem'
+  width: `${CANVAS_AUDIO_PLAYER_SIZE.width}px`,
+  height: `${CANVAS_AUDIO_PLAYER_SIZE.height}px`
 };
 export const videoDefaultSize = () => {
-  if (RCEGlobals.getFeatures().consolidated_media_player) {
-    return STUDIO_PLAYER_VIDEO_SIZE_DEFAULT;
-  }
-  return VIDEO_SIZE_DEFAULT;
+  return STUDIO_PLAYER_VIDEO_SIZE_DEFAULT;
 };
+function onStudioEmbedOptionChanged(editor, videoContainer) {
+  return embedOptions => {
+    if (validateStudioEmbedOptions(embedOptions)) {
+      updateStudioEmbedOptions(editor, embedOptions, videoContainer);
+    }
+  };
+}
 export default class TrayController {
   constructor() {
     this._editor = null;
     this._isOpen = false;
     this._shouldOpen = false;
     this._renderId = 0;
+    this._skipFocusOnExit = false;
+    this._captionsModified = false;
+    this.requestSubtitlesFromIframe = this.requestSubtitlesFromIframe.bind(this);
+    this.isStudioVideo = false;
   }
   get $container() {
     let $container = document.getElementById(CONTAINER_ID);
@@ -66,15 +73,28 @@ export default class TrayController {
     this._editor = editor;
     this.$videoContainer = findMediaPlayerIframe(editor.selection.getNode());
     this._shouldOpen = true;
+    this._captionsModified = false;
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
-      bridge.hideTrays();
+      bridge.hideTrays(); // Do we need to implement .hideTray functionality in this controller as well?
     }
-    const trayProps = bridge.trayProps.get(editor);
-    this._renderTray(trayProps);
+    this.isStudioVideo = isStudioEmbeddedMedia(this.$videoContainer);
+    // for studio embeds we don't need to show spinners
+    // so it is ready by default
+    this._isPlayerReady = this.isStudioVideo;
+
+    // Clean broadcast listeners for any existing trays which are not shown (if not cleaned automatically)
+    this._iframeLoadingListener?.abort();
+    if (!this.isStudioVideo) {
+      const videoOptions = asVideoElement(this.$videoContainer);
+      this._listenForPlayerIframeToLoad(videoOptions.id);
+    }
+    this._renderId++;
+    this._renderTray();
   }
-  hideTrayForEditor(editor) {
+  hideTrayForEditor(editor, skipFocusOnExit = false) {
     if (this._editor === editor) {
+      this._skipFocusOnExit = skipFocusOnExit;
       this._dismissTray();
     }
   }
@@ -116,11 +136,14 @@ export default class TrayController {
         this._editor.selection.select(link);
         this.$videoContainer = null;
       }
+      const isCaptionImprovements = RCEGlobals.getFeatures()?.rce_asr_captioning_improvements || false;
       const data = {
         media_object_id: videoOptions.media_object_id,
         title: videoOptions.titleText,
+        attachment_id: videoOptions.attachment_id,
         subtitles: videoOptions.subtitles,
-        attachment_id: videoOptions.attachment_id
+        skipCaptionUpdate: isCaptionImprovements,
+        viewerRestrictions: videoOptions.viewerRestrictions
       };
 
       // If the video just edited came from a file uploaded to canvas
@@ -130,11 +153,15 @@ export default class TrayController {
       if (hasMediaId && !videoOptions.editLocked) {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
-            this.$videoContainer.contentWindow.postMessage({
-              subject: 'reload_media',
-              media_object_id: videoOptions.media_object_id,
-              attachment_id: data.attachment_id
-            }, bridge.canvasOrigin);
+            if (isCaptionImprovements) {
+              this._reloadVideoPlayer();
+            } else {
+              this.$videoContainer.contentWindow.postMessage({
+                subject: 'reload_media',
+                media_object_id: videoOptions.media_object_id,
+                attachment_id: data.attachment_id
+              }, bridge.canvasOrigin);
+            }
           }
         }).catch(ex => {
           console.error('failed updating video captions', ex);
@@ -142,14 +169,55 @@ export default class TrayController {
       }
     }
     this._dismissTray();
+    setTimeout(() => {
+      showFlashAlert({
+        message: formatMessage('Media options saved.'),
+        type: 'success'
+      });
+    }, 0);
+  }
+  _listenForPlayerIframeToLoad(currentMediaId) {
+    if (!bridge.canvasOrigin) return;
+    this._iframeLoadingListener = new AbortController();
+
+    // Wait for player iframe to be loaded
+    window.addEventListener('message', event => {
+      // If tray was opened before player iframe was ready it will catch ready event.
+      // If not it will request it later and catch it here anyway.
+      if (event.data?.subject === 'media_player.iframe_ready' && event.data?.mediaId === currentMediaId) {
+        this._iframeLoadingListener.abort();
+        this._isPlayerReady = true;
+        this._renderTray();
+      }
+    }, {
+      signal: this._iframeLoadingListener.signal
+    });
+
+    // If tray was opened after player was loaded we need to request iframe_ready state
+    this.$videoContainer?.contentWindow?.postMessage({
+      subject: 'media_player.get_ready_state'
+    }, bridge.canvasOrigin);
+  }
+  _reloadVideoPlayer() {
+    if (this.$videoContainer?.contentWindow?.location) {
+      this.$videoContainer.contentWindow.location.reload();
+    }
   }
   _dismissTray() {
-    if (this.$videoContainer) {
+    const isCaptionImprovements = RCEGlobals.getFeatures()?.rce_asr_captioning_improvements || false;
+
+    // Reload if captions were modified AND feature flag enabled
+    if (isCaptionImprovements && this._captionsModified && this.$videoContainer) {
+      this._reloadVideoPlayer();
+    }
+    if (this.$videoContainer && !this._skipFocusOnExit) {
       this._editor?.selection?.select(this.$videoContainer);
     }
     this._shouldOpen = false;
+    this._isOpen = false;
     this._renderTray();
     this._editor = null;
+    this._iframeLoadingListener?.abort();
   }
   requestSubtitlesFromIframe(cb) {
     if (!bridge.canvasOrigin) return;
@@ -165,37 +233,40 @@ export default class TrayController {
       subject: 'media_tracks_request'
     }, bridge.canvasOrigin);
   }
-  _renderTray(trayProps) {
-    let vo = {};
-    if (this._shouldOpen) {
-      /*
-       * When the tray is being opened again, it should be rendered fresh
-       * (clearing the internal state) so that the currently-selected video can
-       * be used for initial video options.
-       */
-      this._renderId++;
-      vo = asVideoElement(this.$videoContainer) || {};
-    }
+  _renderTray() {
+    const vo = asVideoElement(this.$videoContainer, this.isStudioVideo) || {};
     const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
       id: "video-options-tray",
       key: this._renderId,
       videoOptions: vo,
       onEntered: () => {
         this._isOpen = true;
-      },
+      }
+      // is not guaranteed to be called in case of showing another tray
+      ,
       onExited: () => {
-        bridge.focusActiveEditor(false);
+        if (!this._skipFocusOnExit) {
+          bridge.focusActiveEditor(false);
+        }
+        this._skipFocusOnExit = false;
         this._isOpen = false;
         this._subtitleListener?.abort();
+        this._iframeLoadingListener?.abort();
+        this._isPlayerReady = false;
       },
       onSave: videoOptions => {
         this._applyVideoOptions(videoOptions);
       },
       onRequestClose: () => this._dismissTray(),
+      onCaptionsModified: () => {
+        this._captionsModified = true;
+      },
       open: this._shouldOpen,
-      trayProps: trayProps,
-      studioOptions: isStudioEmbeddedMedia(this.$videoContainer) ? parseStudioOptions(this.$videoContainer) : null,
-      requestSubtitlesFromIframe: cb => this.requestSubtitlesFromIframe(cb)
+      trayProps: bridge.trayProps.get(this._editor),
+      studioOptions: this.isStudioVideo ? parseStudioOptions(this.$videoContainer) : null,
+      requestSubtitlesFromIframe: this.requestSubtitlesFromIframe,
+      onStudioEmbedOptionChanged: onStudioEmbedOptionChanged(this._editor, this.$videoContainer),
+      isLoading: !this._isPlayerReady
     });
     ReactDOM.render(element, this.$container);
   }

package/es/rce/plugins/instructure_record/VideoOptionsTray/index.d.ts

@@ -1,4 +1,4 @@
-declare function VideoOptionsTray({ videoOptions, onRequestClose, onSave, open, trayProps, requestSubtitlesFromIframe, onEntered, onExited, id, studioOptions, forBlockEditorUse, }: {
+declare function VideoOptionsTray({ videoOptions, onRequestClose, onSave, open, trayProps, requestSubtitlesFromIframe, onEntered, onExited, id, studioOptions, forBlockEditorUse, onStudioEmbedOptionChanged, onCaptionsModified, isLoading, }: {
     videoOptions: any;
     onRequestClose: any;
     onSave: any;
@@ -10,6 +10,9 @@ declare function VideoOptionsTray({ videoOptions, onRequestClose, onSave, open,
     id?: string | undefined;
     studioOptions?: null | undefined;
     forBlockEditorUse?: boolean | undefined;
+    onStudioEmbedOptionChanged?: (() => void) | undefined;
+    onCaptionsModified?: null | undefined;
+    isLoading?: boolean | undefined;
 }): React.JSX.Element;
 declare namespace VideoOptionsTray {
     namespace propTypes {
@@ -23,6 +26,9 @@ declare namespace VideoOptionsTray {
                 locale: import("prop-types").Validator<string>;
                 inherited: import("prop-types").Requireable<boolean>;
             }> | null | undefined)[]>;
+            viewerRestrictions: import("prop-types").Requireable<import("prop-types").InferProps<{
+                show_rolling_transcript: import("prop-types").Requireable<boolean>;
+            }>>;
         }>>>;
         export { func as onEntered };
         export { func as onExited };
@@ -36,6 +42,9 @@ declare namespace VideoOptionsTray {
         export { string as id };
         export { parsedStudioOptionsPropType as studioOptions };
         export { func as requestSubtitlesFromIframe };
+        export { func as onStudioEmbedOptionChanged };
+        export { func as onCaptionsModified };
+        export { bool as isLoading };
     }
 }
 export default VideoOptionsTray;
@@ -43,3 +52,4 @@ import React from 'react';
 import { func } from 'prop-types';
 import { string } from 'prop-types';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
+import { bool } from 'prop-types';