@instructure/canvas-rce 5.14.1 → 5.15.0

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

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
@@ -29,103 +30,77 @@ export default class TrayController {
     this._editor = null;
     this._audioContainer = null;
   }
-
   get container() {
     let _container = document.getElementById(CONTAINER_ID);
-
     if (_container == null) {
       _container = document.createElement('div');
       _container.id = CONTAINER_ID;
       document.body.appendChild(_container);
     }
-
     return _container;
   }
-
   get isOpen() {
     return this._isOpen;
   }
-
   showTrayForEditor(editor) {
     this._shouldOpen = true;
     this._editor = editor;
     this._audioContainer = findMediaPlayerIframe(editor.selection.getNode());
-
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
       bridge.hideTrays();
     }
-
     const trayProps = bridge.trayProps.get(editor);
-
     this._renderTray(trayProps);
   }
-
   hideTrayForEditor(editor) {
     if (this._editor === editor) {
       this._dismissTray();
     }
   }
-
   _dismissTray() {
     if (this._audioContainer) {
       this._editor.selection.select(this._audioContainer);
     }
-
     this._resetController();
   }
-
   _resetController() {
     this._shouldOpen = false;
     const trayProps = bridge.trayProps.get(this._editor);
-
     this._renderTray(trayProps);
-
     this._editor = null;
     this._audioContainer = null;
     const elem = document.getElementById(CONTAINER_ID);
     return elem.parentNode.removeChild(elem);
   }
-
   _applyAudioOptions(audioOptions) {
     const hasAttachmentId = RCEGlobals.getFeatures().media_links_use_attachment_id && audioOptions.attachment_id;
-
     if (!hasAttachmentId && (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined')) {
       return;
     }
-
     const container = this._audioContainer;
     return audioOptions.updateMediaObject({
       media_object_id: audioOptions.media_object_id,
       subtitles: audioOptions.subtitles,
       attachment_id: audioOptions.attachment_id
-    }).then(() => container === null || container === void 0 ? void 0 : container.contentWindow.location.reload()).catch(ex => {
-      // eslint-disable-next-line no-console
+    }).then(() => container?.contentWindow.location.reload()).catch(ex => {
       console.error('Failed updating audio captions', ex);
     });
   }
-
   requestSubtitlesFromIframe(cb) {
-    var _this$_audioContainer, _this$_audioContainer2;
-
     if (!bridge.canvasOrigin) return;
     this._subtitleListener = new AbortController();
     window.addEventListener('message', event => {
-      var _event$data;
-
-      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
-        var _event$data2;
-
-        cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);
+      if (event?.data?.subject === 'media_tracks_response') {
+        cb(event?.data?.payload);
       }
     }, {
       signal: this._subtitleListener.signal
     });
-    (_this$_audioContainer = this._audioContainer) === null || _this$_audioContainer === void 0 ? void 0 : (_this$_audioContainer2 = _this$_audioContainer.contentWindow) === null || _this$_audioContainer2 === void 0 ? void 0 : _this$_audioContainer2.postMessage({
+    this._audioContainer?.contentWindow?.postMessage({
       subject: 'media_tracks_request'
     }, bridge.canvasOrigin);
   }
-
   _renderTray(trayProps) {
     const audioOptions = asAudioElement(this._audioContainer) || {};
     const element = /*#__PURE__*/React.createElement(AudioOptionsTray, {
@@ -134,15 +109,12 @@ export default class TrayController {
         this._isOpen = true;
       },
       onExited: () => {
-        var _this$_subtitleListen;
-
         bridge.focusActiveEditor(false);
         this._isOpen = false;
-        (_this$_subtitleListen = this._subtitleListener) === null || _this$_subtitleListen === void 0 ? void 0 : _this$_subtitleListen.abort();
+        this._subtitleListener?.abort();
       },
       onSave: options => {
         this._applyAudioOptions(options);
-
         this._dismissTray();
       },
       onDismiss: () => this._dismissTray(),
@@ -152,5 +124,4 @@ export default class TrayController {
     });
     ReactDOM.render(element, this.container);
   }
-
 }

package/es/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useState, useEffect } from 'react';
 import { arrayOf, bool, func, shape, string } from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
@@ -26,27 +27,23 @@ import { StoreProvider } from '../../shared/StoreContext';
 import Bridge from '../../../../bridge';
 import formatMessage from '../../../../format-message';
 import { getTrayHeight } from '../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import { Heading } from '@instructure/ui-heading';
-
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-
-export default function AudioOptionsTray(_ref) {
-  let {
-    open,
-    onEntered,
-    onExited,
-    onDismiss,
-    onSave,
-    trayProps,
-    audioOptions,
-    requestSubtitlesFromIframe
-  } = _ref;
+export default function AudioOptionsTray({
+  open,
+  onEntered,
+  onExited,
+  onDismiss,
+  onSave,
+  trayProps,
+  audioOptions,
+  requestSubtitlesFromIframe
+}) {
   const [subtitles, setSubtitles] = useState(audioOptions.tracks || []);
   useEffect(() => {
     if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
   }, []);
-
   const handleSave = (e, contentProps) => {
     onSave({
       media_object_id: audioOptions.id,
@@ -55,12 +52,11 @@ export default function AudioOptionsTray(_ref) {
       updateMediaObject: contentProps.updateMediaObject
     });
   };
-
   return /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(Tray, {
     key: "audio-options-tray",
     "data-mce-component": true,
     label: formatMessage('Audio Options Tray'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: onDismiss,
     onEntered: onEntered,
     onExited: onExited,

package/es/rce/plugins/instructure_record/MediaPanel/index.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React, { useRef } from 'react';
 import { func, oneOf, shape, string } from 'prop-types';
 import { contentTrayDocumentShape } from '../../shared/fileShape';
@@ -24,23 +25,18 @@ import { View } from '@instructure/ui-view';
 import Link from '../../instructure_documents/components/Link';
 import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
 const PENDING_MEDIA_ENTRY_ID = 'maybe';
-
 function hasFiles(media) {
   return media.files.length > 0;
 }
-
 function isEmpty(media) {
   return !hasFiles(media) && !media.hasMore && !media.isLoading;
 }
-
 function renderLinks(files, handleClick, lastItemRef) {
   return files.map((f, index) => {
     let focusRef = null;
-
     if (index === files.length - 1) {
       focusRef = lastItemRef;
     }
-
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: f.id
     }, f, {
@@ -51,7 +47,6 @@ function renderLinks(files, handleClick, lastItemRef) {
     }));
   });
 }
-
 function renderLoadingError(_error) {
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -61,7 +56,6 @@ function renderLoadingError(_error) {
     color: "danger"
   }, formatMessage('Loading failed.')));
 }
-
 export default function MediaPanel(props) {
   const {
     fetchInitialMedia,
@@ -89,11 +83,9 @@ export default function MediaPanel(props) {
     sortBy,
     searchString
   });
-
   const handleFileClick = file => {
     props.onMediaEmbed(file);
   };
-
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "instructure_links-MediaPanel"

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

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
@@ -27,7 +28,6 @@ export const VIDEO_SIZE_DEFAULT = {
   height: '225px',
   width: '400px'
 }; // AKA "LARGE"
-
 export const AUDIO_PLAYER_SIZE = {
   width: '320px',
   height: '14.25rem'
@@ -39,77 +39,55 @@ export default class TrayController {
     this._shouldOpen = false;
     this._renderId = 0;
   }
-
   get $container() {
     let $container = document.getElementById(CONTAINER_ID);
-
     if ($container == null) {
       $container = document.createElement('div');
       $container.id = CONTAINER_ID;
       document.body.appendChild($container);
     }
-
     return $container;
   }
-
   get isOpen() {
     return this._isOpen;
   }
-
   showTrayForEditor(editor) {
     this._editor = editor;
     this.$videoContainer = findMediaPlayerIframe(editor.selection.getNode());
     this._shouldOpen = true;
-
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
       bridge.hideTrays();
     }
-
     const trayProps = bridge.trayProps.get(editor);
-
     this._renderTray(trayProps);
   }
-
   hideTrayForEditor(editor) {
     if (this._editor === editor) {
       this._dismissTray();
     }
   }
-
   _applyVideoOptions(videoOptions) {
-    var _this$$videoContainer;
-
-    if (((_this$$videoContainer = this.$videoContainer) === null || _this$$videoContainer === void 0 ? void 0 : _this$$videoContainer.tagName) === 'IFRAME') {
+    if (this.$videoContainer?.tagName === 'IFRAME') {
       const $tinymceIframeShim = this.$videoContainer.parentElement;
-
       if (videoOptions.displayAs === 'embed') {
-        var _videoOptions$subtitl;
-
-        const isVertical = videoOptions.appliedHeight > videoOptions.appliedWidth; // player v5 requires more space for the CC button
+        const isVertical = videoOptions.appliedHeight > videoOptions.appliedWidth;
+        // player v5 requires more space for the CC button
         // TODO: remove when using v7
-
-        const minWidth = (_videoOptions$subtitl = videoOptions.subtitles) !== null && _videoOptions$subtitl !== void 0 && _videoOptions$subtitl.length ? 400 : 320;
+        const minWidth = videoOptions.subtitles?.length ? 400 : 320;
         const styl = {
           height: `${videoOptions.appliedHeight}px`,
           width: `${Math.max(minWidth, isVertical ? videoOptions.appliedHeight : videoOptions.appliedWidth)}px`
         };
-
         this._editor.dom.setStyles($tinymceIframeShim, styl);
-
         this._editor.dom.setStyles(this.$videoContainer, styl);
-
         const title = videoOptions.titleText;
-
         this._editor.dom.setAttrib($tinymceIframeShim, 'data-mce-p-title', title);
-
         this._editor.dom.setAttrib($tinymceIframeShim, 'data-mce-p-data-titleText', videoOptions.titleText);
-
         this._editor.dom.setAttrib(this.$videoContainer, 'title', title);
+        this._editor.dom.setAttrib(this.$videoContainer, 'data-titleText', videoOptions.titleText);
 
-        this._editor.dom.setAttrib(this.$videoContainer, 'data-titleText', videoOptions.titleText); // tell tinymce so the context toolbar resets
-
-
+        // tell tinymce so the context toolbar resets
         this._editor.fire('ObjectResized', {
           target: this.$videoContainer,
           width: videoOptions.appliedWidth,
@@ -117,37 +95,29 @@ export default class TrayController {
         });
       } else {
         const href = this._editor.dom.getAttrib($tinymceIframeShim, 'data-mce-p-src');
-
         const title = videoOptions.titleText || this._editor.dom.getAttrib(this.$videoContainer, 'title');
-
         const link = document.createElement('a');
         link.setAttribute('href', href);
         link.setAttribute('target', '_blank');
         link.setAttribute('rel', 'noreferrer noopener');
         link.textContent = title;
-
         this._editor.dom.replace(link, $tinymceIframeShim);
-
         this._editor.selection.select(link);
-
         this.$videoContainer = null;
       }
-
       const data = {
         media_object_id: videoOptions.media_object_id,
         title: videoOptions.titleText,
         subtitles: videoOptions.subtitles
       };
-
       if (RCEGlobals.getFeatures().media_links_use_attachment_id) {
         data.attachment_id = videoOptions.attachment_id;
-      } // If the video just edited came from a file uploaded to canvas
+      }
+
+      // If the video just edited came from a file uploaded to canvas
       // and not notorious, we probably don't have a media_object_id.
       // If not, we can't update the MediaObject in the canvas db.
-
-
       const hasMediaId = videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' || data.attachment_id && data.attachment_id !== 'undefined';
-
       if (hasMediaId && !videoOptions.editLocked) {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
@@ -158,52 +128,36 @@ export default class TrayController {
             }, bridge.canvasOrigin);
           }
         }).catch(ex => {
-          console.error('failed updating video captions', ex); // eslint-disable-line no-console
+          console.error('failed updating video captions', ex);
         });
       }
     }
-
     this._dismissTray();
   }
-
   _dismissTray() {
     if (this.$videoContainer) {
-      var _this$_editor, _this$_editor$selecti;
-
-      (_this$_editor = this._editor) === null || _this$_editor === void 0 ? void 0 : (_this$_editor$selecti = _this$_editor.selection) === null || _this$_editor$selecti === void 0 ? void 0 : _this$_editor$selecti.select(this.$videoContainer);
+      this._editor?.selection?.select(this.$videoContainer);
     }
-
     this._shouldOpen = false;
-
     this._renderTray();
-
     this._editor = null;
   }
-
   requestSubtitlesFromIframe(cb) {
-    var _this$$videoContainer2, _this$$videoContainer3;
-
     if (!bridge.canvasOrigin) return;
     this._subtitleListener = new AbortController();
     window.addEventListener('message', event => {
-      var _event$data;
-
-      if ((event === null || event === void 0 ? void 0 : (_event$data = event.data) === null || _event$data === void 0 ? void 0 : _event$data.subject) === 'media_tracks_response') {
-        var _event$data2;
-
-        cb(event === null || event === void 0 ? void 0 : (_event$data2 = event.data) === null || _event$data2 === void 0 ? void 0 : _event$data2.payload);
+      if (event?.data?.subject === 'media_tracks_response') {
+        cb(event?.data?.payload);
       }
     }, {
       signal: this._subtitleListener.signal
     });
-    (_this$$videoContainer2 = this.$videoContainer) === null || _this$$videoContainer2 === void 0 ? void 0 : (_this$$videoContainer3 = _this$$videoContainer2.contentWindow) === null || _this$$videoContainer3 === void 0 ? void 0 : _this$$videoContainer3.postMessage({
+    this.$videoContainer?.contentWindow?.postMessage({
       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
@@ -213,7 +167,6 @@ export default class TrayController {
       this._renderId++;
       vo = asVideoElement(this.$videoContainer) || {};
     }
-
     const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
       id: "video-options-tray",
       key: this._renderId,
@@ -222,11 +175,9 @@ export default class TrayController {
         this._isOpen = true;
       },
       onExited: () => {
-        var _this$_subtitleListen;
-
         bridge.focusActiveEditor(false);
         this._isOpen = false;
-        (_this$_subtitleListen = this._subtitleListener) === null || _this$_subtitleListen === void 0 ? void 0 : _this$_subtitleListen.abort();
+        this._subtitleListener?.abort();
       },
       onSave: videoOptions => {
         this._applyVideoOptions(videoOptions);
@@ -239,5 +190,4 @@ export default class TrayController {
     });
     ReactDOM.render(element, this.$container);
   }
-
 }

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

@@ -38,24 +38,22 @@ import RceApiSource from '../../../../rcs/api';
 import formatMessage from '../../../../format-message';
 import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
 import { getTrayHeight } from '../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
-
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
-
-export default function VideoOptionsTray(_ref) {
-  let {
-    videoOptions,
-    onRequestClose,
-    onSave,
-    open,
-    trayProps,
-    requestSubtitlesFromIframe = () => {},
-    onEntered = null,
-    onExited = null,
-    id = 'video-options-tray',
-    studioOptions = null
-  } = _ref;
+export default function VideoOptionsTray({
+  videoOptions,
+  onRequestClose,
+  onSave,
+  open,
+  trayProps,
+  requestSubtitlesFromIframe = () => {},
+  onEntered = null,
+  onExited = null,
+  id = 'video-options-tray',
+  studioOptions = null,
+  forBlockEditorUse = false
+}) {
   const {
     naturalHeight,
     naturalWidth
@@ -74,8 +72,8 @@ export default function VideoOptionsTray(_ref) {
   const [editLocked, setEditLocked] = useState(null);
   const [loading, setLoading] = useState(true);
   const isStudio = !!studioOptions;
-  const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
-  const showSizeControls = !isStudio || studioOptions.resizable;
+  const showDisplayOptions = (!isStudio || studioOptions.convertibleToLink) && !forBlockEditorUse;
+  const showSizeControls = (!isStudio || studioOptions.resizable) && !forBlockEditorUse;
   const dimensionsState = useDimensionsState(videoOptions, {
     minHeight,
     minWidth,
@@ -87,7 +85,7 @@ export default function VideoOptionsTray(_ref) {
       api.getFile(videoOptions.attachmentId, {
         include: ['blueprint_course_status']
       }).then(response => {
-        setEditLocked((response === null || response === void 0 ? void 0 : response.restricted_by_master_course) && (response === null || response === void 0 ? void 0 : response.is_master_course_child_content));
+        setEditLocked(response?.restricted_by_master_course && response?.is_master_course_child_content);
         setLoading(false);
       }).catch(error => {
         setLoading(false);
@@ -97,19 +95,15 @@ export default function VideoOptionsTray(_ref) {
   useEffect(() => {
     if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
   }, []);
-
   function handleTitleTextChange(event) {
     setTitleText(event.target.value);
   }
-
   function handleDisplayAsChange(event) {
     event.target.focus();
     setDisplayAs(event.target.value);
   }
-
   function handleVideoSizeChange(event, selectedOption) {
     setVideoSize(selectedOption.value);
-
     if (selectedOption.value === CUSTOM) {
       setVideoHeight(currentHeight);
       setVideoWidth(currentWidth);
@@ -122,21 +116,17 @@ export default function VideoOptionsTray(_ref) {
       setVideoWidth(width);
     }
   }
-
   function handleUpdateSubtitles(new_subtitles) {
     setSubtitles(new_subtitles);
   }
-
   function handleSave(event, updateMediaObject) {
     event.preventDefault();
     let appliedHeight = videoHeight;
     let appliedWidth = videoWidth;
-
     if (videoSize === CUSTOM) {
       appliedHeight = dimensionsState.height;
       appliedWidth = dimensionsState.width;
     }
-
     onSave({
       media_object_id: videoOptions.id,
       attachment_id: videoOptions.attachmentId,
@@ -149,7 +139,6 @@ export default function VideoOptionsTray(_ref) {
       editLocked
     });
   }
-
   const tooltipText = formatMessage('Used by screen readers to describe the video');
   const textAreaLabel = /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center"
@@ -171,7 +160,6 @@ export default function VideoOptionsTray(_ref) {
     withBorder: false
   }))));
   const messagesForSize = [];
-
   if (videoSize !== CUSTOM) {
     messagesForSize.push({
       text: formatMessage('{width} x {height}px', {
@@ -181,13 +169,12 @@ export default function VideoOptionsTray(_ref) {
       type: 'hint'
     });
   }
-
   const saveDisabled = displayAs === 'embed' && (titleText === '' || videoSize === CUSTOM && !dimensionsState.isValid);
   return /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(Tray, {
     key: "video-options-tray",
     "data-mce-component": true,
     label: isStudio ? formatMessage('Studio Media Options Tray') : formatMessage('Video Options Tray'),
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     onDismiss: onRequestClose,
     onEntered: onEntered,
     onExited: onExited,
@@ -219,7 +206,7 @@ export default function VideoOptionsTray(_ref) {
     margin: "xx-large",
     padding: "xx-large"
   }, /*#__PURE__*/React.createElement(Spinner, {
-    renderTitle: formatMessage("Loading")
+    renderTitle: formatMessage('Loading')
   })) : /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     shouldGrow: true,
@@ -273,7 +260,7 @@ export default function VideoOptionsTray(_ref) {
     padding: "small small xx-small small"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
     id: `${id}-size`,
-    mountNode: instuiPopupMountNode,
+    mountNode: instuiPopupMountNodeFn,
     disabled: displayAs !== 'embed',
     renderLabel: formatMessage('Size'),
     messages: messagesForSize,
@@ -305,13 +292,12 @@ export default function VideoOptionsTray(_ref) {
       file: {
         name: st.language || st.locale
       } // this is an artifact of ClosedCaptionCreatorRow's inards
-
     })),
     uploadMediaTranslations: Bridge.uploadMediaTranslations,
     userLocale: Bridge.userLocale,
     updateSubtitles: handleUpdateSubtitles,
     liveRegion: getLiveRegion,
-    mountNode: instuiPopupMountNode
+    mountNode: instuiPopupMountNodeFn
   }))))), /*#__PURE__*/React.createElement(Flex.Item, {
     background: "secondary",
     borderWidth: "small none none none",