@instructure/canvas-rce 5.11.1 → 5.12.2

package/es/rce/StatusBar.js

@@ -165,7 +165,10 @@ export default function StatusBar(props) {
 
   function renderPath() {
     return /*#__PURE__*/React.createElement(View, {
-      "data-testid": "whole-status-bar-path"
+      "data-testid": "whole-status-bar-path",
+      style: {
+        display: 'flex'
+      }
     }, renderPathString(props));
   }
 
@@ -208,7 +211,10 @@ export default function StatusBar(props) {
     const message = props.editorView === PRETTY_HTML_EDITOR_VIEW ? formatMessage('Sadly, the pretty HTML editor is not keyboard accessible. Access the raw HTML editor here.') : formatMessage('Access the pretty HTML editor');
     const label = props.editorView === PRETTY_HTML_EDITOR_VIEW ? formatMessage('Switch to raw HTML Editor') : formatMessage('Switch to pretty HTML Editor');
     return /*#__PURE__*/React.createElement(View, {
-      "data-testid": "html-editor-message"
+      "data-testid": "html-editor-message",
+      style: {
+        display: 'flex'
+      }
     }, /*#__PURE__*/React.createElement(Button, {
       "data-btn-id": "rce-editormessage-btn",
       margin: "0 small",

package/es/rce/contentInsertion.js

@@ -17,7 +17,6 @@
  */
 import classnames from 'classnames';
 import { renderAudio, renderImage, renderLink, renderLinkedImage, renderVideo } from './contentRendering';
-import scroll from '../common/scroll';
 import { cleanUrl, getAnchorElement, isImageFigure, isOnlyTextSelected } from './contentInsertionUtils';
 import { mediaPlayerURLFromFile } from './plugins/shared/fileTypeUtils';
 import { absoluteToRelativeUrl } from '../common/fileUrl';
@@ -54,7 +53,11 @@ export function insertContent(editor, content) {
     // insertion should reference the newly created node (or first of the newly
     // created nodes if there were multiple, unfortunately), because the cursor
     // itself stays just before the new content.
-    scroll.scrollIntoViewWDelay(editor.iframeElement, {}); // there's a bug in tinymce where insertContent calls execCommand('mceInsertContent'),
+    setTimeout(() => {
+      if (editor.iframeElement) {
+        editor.iframeElement.scrollIntoView();
+      }
+    }, 100); // there's a bug in tinymce where insertContent calls execCommand('mceInsertContent'),
     // but doesn't correctly forward the second "args" argument. Let's go right for
     // execCommand
     // editor.insertContent(content, {skip_focus: true})

package/es/rce/plugins/instructure_documents/components/DocumentsPanel.js

@@ -16,8 +16,8 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useRef } from 'react';
-import { arrayOf, bool, func, shape, string, objectOf, oneOf } from 'prop-types';
-import { fileShape } from '../../shared/fileShape';
+import { func, shape, string, oneOf } from 'prop-types';
+import { contentTrayDocumentShape } from '../../shared/fileShape';
 import formatMessage from '../../../../format-message';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
@@ -111,13 +111,7 @@ DocumentsPanel.propTypes = {
   fetchInitialDocs: func.isRequired,
   fetchNextDocs: func.isRequired,
   onLinkClick: func.isRequired,
-  documents: objectOf(shape({
-    files: arrayOf(shape(fileShape)).isRequired,
-    bookmark: string,
-    hasMore: bool,
-    isLoading: bool,
-    error: string
-  })).isRequired,
+  documents: contentTrayDocumentShape.isRequired,
   sortBy: shape({
     sort: oneOf(['date_added', 'alphabetical']).isRequired,
     order: oneOf(['asc', 'desc']).isRequired

package/es/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -31,7 +31,7 @@ import { containsAdvancedSyntax } from './advancedOnlySyntax';
 import * as advancedPreference from './advancedPreference';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { css } from 'aphrodite';
-import Mathml, { MathJaxDirective } from '../../../../enhance-user-content/mathml';
+import { MathJaxDirective, Mathml } from '../../../../enhance-user-content/mathml';
 import styles from './styles';
 import RCEGlobals from '../../../RCEGlobals'; // Import the <math-field> container and all
 // the relevant math fonts from mathlive

package/es/rce/plugins/instructure_equation/EquationEditorModal/styles.js

@@ -16,17 +16,9 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import { StyleSheet } from 'aphrodite';
-const cssRules = {
-  componentId: 'cpADC',
-  template: function (theme) {
-    return `
-
-#MathJax_MenuFrame {
-    z-index: 10000 !important;
-  }
-`;
-  }
-}.template(); // Applying z-index for MathJax menu inside config shows the element but doesn't user interact with it.
+const cssRules = `#MathJax_MenuFrame {
+  z-index: 10000 !important;
+}`; // Applying z-index for MathJax menu inside config shows the element but doesn't user interact with it.
 // Manually adding z-index as head style
 
 const style = document.createElement('style');

package/es/rce/plugins/instructure_equation/mathlive/index.js

@@ -15,22 +15,14 @@
  * 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 'mathlive/dist/mathlive-fonts.css'; // There currently isn't a great way to do this so use this workaround to inject these styles
+const mathliveCss = require('mathlive/dist/mathlive-fonts.css');
 
-const cssRules = {
-  componentId: 'KeARC',
-  template: function (theme) {
-    return `
-
-.canvas-rce__mathlive--ML__popover {
-  
+const cssRules = `.ML__popover {
+  /* Override this so it shows up on top of dialogs */
   z-index: 20000 !important;
-}
-`;
-  },
-  'ML__popover': 'canvas-rce__mathlive--ML__popover'
-}.template();
+}`;
 const style = document.createElement('style');
+style.appendChild(document.createTextNode(mathliveCss));
 style.appendChild(document.createTextNode(cssRules));
 document.head.appendChild(style);
 export * from 'mathlive';

package/es/rce/plugins/instructure_html_view/plugin.js

@@ -17,8 +17,8 @@
  */
 import formatMessage from '../../../format-message';
 import clickCallback from './clickCallback';
-import tinymce from 'tinymce';
-// Register plugin
+import tinymce from 'tinymce'; // Register plugin
+
 tinymce.PluginManager.add('instructure_html_view', function (ed) {
   // Register commands
   ed.addCommand('instructureHtmlView', () => clickCallback()); // Register menu items

package/es/rce/plugins/instructure_icon_maker/components/SavedIconMakerList.js

@@ -18,7 +18,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from '@instructure/ui-view';
-import Images, { RCSImageCollectionType } from '../../instructure_image/Images';
+import Images from '../../instructure_image/Images';
+import { contentTrayDocumentShape } from '../../shared/fileShape';
 import { ICON_MAKER_ICONS } from '../svg/constants';
 
 const SavedIconMakerList = props => {
@@ -69,7 +70,7 @@ SavedIconMakerList.propTypes = {
     sort: PropTypes.oneOf(['date_added', 'alphabetical']).isRequired,
     order: PropTypes.oneOf(['asc', 'desc']).isRequired
   }),
-  images: RCSImageCollectionType.isRequired,
+  images: contentTrayDocumentShape.isRequired,
   contextType: PropTypes.string.isRequired,
   searchString: PropTypes.string,
   onImageEmbed: PropTypes.func,

package/es/rce/plugins/instructure_image/ImageList/Image.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { func, instanceOf, number, shape, string, bool } from 'prop-types';
+import { func, instanceOf, number, oneOfType, shape, string, bool } from 'prop-types';
 import { Img } from '@instructure/ui-img';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
@@ -92,7 +92,7 @@ Image.propTypes = {
     display_name: string.isRequired,
     filename: string,
     href: string.isRequired,
-    id: number,
+    id: oneOfType([number, string]),
     preview_url: string,
     thumbnail_url: string.isRequired
   }).isRequired,

package/es/rce/plugins/instructure_image/Images/index.js

@@ -16,21 +16,14 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useRef } from 'react';
-import { arrayOf, bool, func, objectOf, oneOf, shape, string } from 'prop-types';
-import { fileShape } from '../../shared/fileShape';
+import { bool, func, oneOf, shape, string } from 'prop-types';
+import { contentTrayDocumentShape } from '../../shared/fileShape';
 import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
 import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
 import ImageList from '../ImageList';
 import formatMessage from '../../../../format-message';
-export const RCSImageCollectionType = objectOf(shape({
-  files: arrayOf(shape(fileShape)).isRequired,
-  bookmark: string,
-  hasMore: bool.isRequired,
-  isLoading: bool.isRequired,
-  error: string
-}));
 
 function hasFiles(images) {
   return images.files.length > 0;
@@ -114,7 +107,7 @@ Images.propTypes = {
   fetchInitialImages: func.isRequired,
   fetchNextImages: func.isRequired,
   contextType: string.isRequired,
-  images: RCSImageCollectionType.isRequired,
+  images: contentTrayDocumentShape.isRequired,
   sortBy: shape({
     sort: oneOf(['date_added', 'alphabetical']).isRequired,
     order: oneOf(['asc', 'desc']).isRequired

package/es/rce/plugins/instructure_rce_external_tools/components/ExternalToolDialog/ExternalToolDialog.js

@@ -86,6 +86,9 @@ export default class ExternalToolDialog extends React.Component {
         if ((data === null || data === void 0 ? void 0 : data.subject) === 'LtiDeepLinkingResponse') {
           processEditorContentItems(ev, this.props.env, this);
         } else if ((data === null || data === void 0 ? void 0 : data.subject) === 'externalContentReady') {
+          // 'externalContentReady' is EXTERNAL_CONTENT_READY in
+          // ui/shared/external-tools/externalContentEvents.ts
+          // where events are also described/used
           this.handleExternalContentReady(ev.data);
         }
       }

package/es/rce/plugins/instructure_rce_external_tools/lti13-content-items/models/ResourceLinkContentItem.js

@@ -34,8 +34,10 @@ export default class ResourceLinkContentItem extends BaseLinkContentItem {
   }
 
   buildUrl() {
+    // iframed launches need canvas wrapped around them for postMessages to work
+    const display = this.iframe != null ? 'in_rce' : 'borderless';
     return addQueryParamsToUrl(this.context.ltiEndpoint, {
-      display: 'in_rce',
+      display,
       resource_link_lookup_uuid: this.lookup_uuid,
       [PARENT_FRAME_CONTEXT_PARAM]: this.context.containingCanvasLtiToolId
     });

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

@@ -101,6 +101,27 @@ export default class TrayController {
     });
   }
 
+  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);
+      }
+    }, {
+      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({
+      subject: 'media_tracks_request'
+    }, bridge.canvasOrigin);
+  }
+
   _renderTray(trayProps) {
     const audioOptions = asAudioElement(this._audioContainer) || {};
     const element = /*#__PURE__*/React.createElement(AudioOptionsTray, {
@@ -109,8 +130,11 @@ 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();
       },
       onSave: options => {
         this._applyAudioOptions(options);
@@ -119,7 +143,8 @@ export default class TrayController {
       },
       onDismiss: () => this._dismissTray(),
       open: this._shouldOpen,
-      trayProps: trayProps
+      trayProps: trayProps,
+      requestSubtitlesFromIframe: cb => this.requestSubtitlesFromIframe(cb)
     });
     ReactDOM.render(element, this.container);
   }

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

@@ -15,7 +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 } from 'react';
+import React, { useState, useEffect } from 'react';
 import { arrayOf, bool, func, shape, string } from 'prop-types';
 import { Flex } from '@instructure/ui-flex';
 import { Tray } from '@instructure/ui-tray';
@@ -39,9 +39,13 @@ export default function AudioOptionsTray(_ref) {
     onDismiss,
     onSave,
     trayProps,
-    audioOptions
+    audioOptions,
+    requestSubtitlesFromIframe
   } = _ref;
   const [subtitles, setSubtitles] = useState(audioOptions.tracks || []);
+  useEffect(() => {
+    if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
+  }, []);
 
   const handleSave = (e, contentProps) => {
     onSave({
@@ -128,6 +132,7 @@ AudioOptionsTray.propTypes = {
   onDismiss: func,
   onSave: func,
   open: bool.isRequired,
+  requestSubtitlesFromIframe: func,
   trayProps: shape({
     host: string.isRequired,
     jwt: string.isRequired
@@ -144,5 +149,6 @@ AudioOptionsTray.defaultProps = {
   onEntered: null,
   onExited: null,
   onDismiss: null,
-  onSave: null
+  onSave: null,
+  requestSubtitlesFromIframe: () => {}
 };

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

@@ -16,8 +16,8 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useRef } from 'react';
-import { arrayOf, bool, func, objectOf, oneOf, shape, string } from 'prop-types';
-import { mediaObjectShape } from '../../shared/fileShape';
+import { func, oneOf, shape, string } from 'prop-types';
+import { contentTrayDocumentShape } from '../../shared/fileShape';
 import formatMessage from '../../../../format-message';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
@@ -114,13 +114,7 @@ MediaPanel.propTypes = {
   fetchInitialMedia: func.isRequired,
   fetchNextMedia: func.isRequired,
   onMediaEmbed: func.isRequired,
-  media: objectOf(shape({
-    files: arrayOf(shape(mediaObjectShape)).isRequired,
-    bookmark: string,
-    hasMore: bool,
-    isLoading: bool,
-    error: string
-  })).isRequired,
+  media: contentTrayDocumentShape.isRequired,
   sortBy: shape({
     sort: oneOf(['date_added', 'alphabetical']).isRequired,
     order: oneOf(['asc', 'desc']).isRequired

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

@@ -146,7 +146,7 @@ export default class TrayController {
       // If not, we can't update the MediaObject in the canvas db.
 
 
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined') {
+      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined' && !videoOptions.editLocked) {
         videoOptions.updateMediaObject(data).then(_r => {
           if (this.$videoContainer && videoOptions.displayAs === 'embed') {
             this.$videoContainer.contentWindow.postMessage({
@@ -177,6 +177,27 @@ export default class TrayController {
     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);
+      }
+    }, {
+      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({
+      subject: 'media_tracks_request'
+    }, bridge.canvasOrigin);
+  }
+
   _renderTray(trayProps) {
     let vo = {};
 
@@ -198,8 +219,11 @@ 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();
       },
       onSave: videoOptions => {
         this._applyVideoOptions(videoOptions);
@@ -207,7 +231,8 @@ export default class TrayController {
       onRequestClose: () => this._dismissTray(),
       open: this._shouldOpen,
       trayProps: trayProps,
-      studioOptions: isStudioEmbeddedMedia(this.$videoContainer) ? parseStudioOptions(this.$videoContainer) : null
+      studioOptions: isStudioEmbeddedMedia(this.$videoContainer) ? parseStudioOptions(this.$videoContainer) : null,
+      requestSubtitlesFromIframe: cb => this.requestSubtitlesFromIframe(cb)
     });
     ReactDOM.render(element, this.$container);
   }

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

@@ -15,7 +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 } from 'react';
+import React, { useState, useEffect } from 'react';
 import { arrayOf, bool, func, number, shape, string } from 'prop-types';
 import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
@@ -27,12 +27,14 @@ import { IconQuestionLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { View } from '@instructure/ui-view';
+import { Spinner } from '@instructure/ui-spinner';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { Tray } from '@instructure/ui-tray';
 import { StoreProvider } from '../../shared/StoreContext';
 import { ClosedCaptionPanel } from '@instructure/canvas-media';
 import { CUSTOM, MIN_WIDTH_VIDEO, MIN_PERCENTAGE, videoSizes, labelForImageSize, scaleToSize } from '../../instructure_image/ImageEmbedOptions';
 import Bridge from '../../../../bridge';
+import RceApiSource from '../../../../rcs/api';
 import formatMessage from '../../../../format-message';
 import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
 import { getTrayHeight } from '../../shared/trayUtils';
@@ -48,6 +50,7 @@ export default function VideoOptionsTray(_ref) {
     onSave,
     open,
     trayProps,
+    requestSubtitlesFromIframe = () => {},
     onEntered = null,
     onExited = null,
     id = 'video-options-tray',
@@ -68,6 +71,8 @@ export default function VideoOptionsTray(_ref) {
   const [minWidth] = useState(MIN_WIDTH_VIDEO);
   const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
   const [minPercentage] = useState(MIN_PERCENTAGE);
+  const [editLocked, setEditLocked] = useState(null);
+  const [loading, setLoading] = useState(true);
   const isStudio = !!studioOptions;
   const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
   const showSizeControls = !isStudio || studioOptions.resizable;
@@ -76,6 +81,22 @@ export default function VideoOptionsTray(_ref) {
     minWidth,
     minPercentage
   });
+  const api = new RceApiSource(trayProps);
+  useEffect(() => {
+    if (videoOptions.attachmentId) {
+      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));
+        setLoading(false);
+      }).catch(error => {
+        setLoading(false);
+      });
+    }
+  }, [videoOptions.attachmentId]);
+  useEffect(() => {
+    if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
+  }, []);
 
   function handleTitleTextChange(event) {
     setTitleText(event.target.value);
@@ -124,7 +145,8 @@ export default function VideoOptionsTray(_ref) {
       appliedWidth,
       displayAs,
       subtitles,
-      updateMediaObject
+      updateMediaObject,
+      editLocked
     });
   }
 
@@ -192,7 +214,13 @@ export default function VideoOptionsTray(_ref) {
     color: "primary",
     onClick: onRequestClose,
     screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Flex.Item, {
+  })))), loading && videoOptions.attachmentId ? /*#__PURE__*/React.createElement(Flex.Item, {
+    textAlign: "center",
+    margin: "xx-large",
+    padding: "xx-large"
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    renderTitle: formatMessage("Loading")
+  })) : /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
     shouldGrow: true,
     margin: "none",
@@ -207,7 +235,7 @@ export default function VideoOptionsTray(_ref) {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, !editLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
@@ -266,7 +294,7 @@ export default function VideoOptionsTray(_ref) {
     minWidth: minWidth,
     minPercentage: minPercentage,
     hidePercentage: true
-  }))), !isStudio && /*#__PURE__*/React.createElement(Flex.Item, {
+  }))), !isStudio && !editLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: formatMessage('Closed Captions/Subtitles')
@@ -317,5 +345,6 @@ VideoOptionsTray.propTypes = {
     jwt: string.isRequired
   }),
   id: string,
-  studioOptions: parsedStudioOptionsPropType
+  studioOptions: parsedStudioOptionsPropType,
+  requestSubtitlesFromIframe: func
 };

package/es/rce/plugins/shared/fileShape.js

@@ -15,11 +15,11 @@
  * 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 { bool, number, oneOfType, string } from 'prop-types';
+import { arrayOf, bool, number, oneOfType, shape, string, checkPropTypes } from 'prop-types';
 export const fileShape = {
   content_type: string.isRequired,
   date: string.isRequired,
-  display_name: string,
+  display_name: string.isRequired,
   filename: string.isRequired,
   href: string.isRequired,
   id: oneOfType([number, string]).isRequired,
@@ -31,13 +31,13 @@ export const fileShape = {
   locked_for_user: bool,
   published: bool
 };
-export const mediaObjectShape = {
-  content_type: string.isRequired,
-  date: string.isRequired,
-  embedded_iframe_url: string,
-  id: oneOfType([number, string]).isRequired,
+export const imageShape = { ...fileShape,
+  thumbnail_url: string
+};
+export const mediaObjectShape = { ...imageShape,
   title: string.isRequired,
-  published: bool
+  embedded_iframe_url: string,
+  media_entry_id: string
 };
 export const fileOrMediaObjectShape = {
   content_type: string.isRequired,
@@ -54,4 +54,76 @@ export const fileOrMediaObjectShape = {
   unlock_at: string,
   locked_for_user: bool,
   published: bool
-};
+};
+export const documentQueryReturnShape = {
+  files: arrayOf(shape(fileShape)).isRequired,
+  bookmark: string,
+  hasMore: bool,
+  isLoading: bool,
+  error: string
+};
+export const imageQueryReturnShape = {
+  files: arrayOf(shape(imageShape)).isRequired,
+  bookmark: string,
+  hasMore: bool,
+  isLoading: bool,
+  error: string
+};
+export const mediaQueryReturnShape = {
+  files: arrayOf(shape(mediaObjectShape)).isRequired,
+  bookmark: string,
+  hasMore: bool,
+  isLoading: bool,
+  error: string
+};
+
+function createContentTrayDocumentShape(isRequired) {
+  return function validateContentTrayDocuments(props, propName, componentName) {
+    const p = props[propName];
+
+    if (!p) {
+      if (isRequired) {
+        if (!p) {
+          return new Error(`Required prop \`${propName}\` not supplied to \`${componentName}\`. Validation failed.`);
+        }
+      }
+
+      return undefined;
+    } else {
+      const files = p.user || p.course || p.group || p.User || p.Course || p.Group;
+
+      if (!files) {
+        return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Missing "user"|"course"|"group" key.`);
+      }
+
+      if ('searchString' in p) {
+        if (!(typeof p.searchString === 'string')) {
+          return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. "searchString" must be a string.`);
+        }
+      }
+
+      if (propName === 'documents') {
+        checkPropTypes({
+          docs: shape(documentQueryReturnShape)
+        }, {
+          docs: files
+        }, componentName, componentName);
+      } else if (propName === 'images') {
+        checkPropTypes({
+          images: shape(imageQueryReturnShape)
+        }, {
+          images: files
+        }, componentName, componentName);
+      } else if (propName === 'media') {
+        checkPropTypes({
+          media: shape(mediaQueryReturnShape)
+        }, {
+          media: files
+        }, componentName, componentName);
+      }
+    }
+  };
+}
+
+export const contentTrayDocumentShape = createContentTrayDocumentShape(false);
+contentTrayDocumentShape.isRequired = createContentTrayDocumentShape(true);

package/es/rce/plugins/shared/fileTypeUtils.js

@@ -112,6 +112,12 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   }
 
   if (file.embedded_iframe_url) {
+    const url = new URL(file.embedded_iframe_url, canvasOrigin);
+
+    if (url.searchParams.has('type')) {
+      return `${absoluteToRelativeUrl(file.embedded_iframe_url, canvasOrigin)}`;
+    }
+
     return `${absoluteToRelativeUrl(file.embedded_iframe_url, canvasOrigin)}?type=${type}`;
   }