@instructure/canvas-rce 5.11.1 → 5.12.2

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

@@ -1,127 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas 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 Affero General Public License for more
- * details.
- *
- * 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';
-import { asAudioElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
-import AudioOptionsTray from '.';
-export const CONTAINER_ID = 'instructure-audio-options-tray-container';
-export default class TrayController {
-  constructor() {
-    this._isOpen = false;
-    this._shouldOpen = false;
-    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) {
-    if (!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
-    }).then(() => container === null || container === void 0 ? void 0 : container.contentWindow.location.reload()).catch(ex => {
-      // eslint-disable-next-line no-console
-      console.error('Failed updating audio captions', ex);
-    });
-  }
-
-  _renderTray(trayProps) {
-    const audioOptions = asAudioElement(this._audioContainer) || {};
-    const element = /*#__PURE__*/React.createElement(AudioOptionsTray, {
-      audioOptions: audioOptions,
-      onEntered: () => {
-        this._isOpen = true;
-      },
-      onExited: () => {
-        bridge.focusActiveEditor(false);
-        this._isOpen = false;
-      },
-      onSave: options => {
-        this._applyAudioOptions(options);
-
-        this._dismissTray();
-      },
-      onDismiss: () => this._dismissTray(),
-      open: this._shouldOpen,
-      trayProps: trayProps
-    });
-    ReactDOM.render(element, this.container);
-  }
-
-}

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

@@ -1,148 +0,0 @@
-/*
- * Copyright (C) 2021 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas 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 Affero General Public License for more
- * details.
- *
- * 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 { arrayOf, bool, func, shape, string } from 'prop-types';
-import { Flex } from '@instructure/ui-flex';
-import { Tray } from '@instructure/ui-tray';
-import { FormFieldGroup } from '@instructure/ui-form-field';
-import { ClosedCaptionPanel } from '@instructure/canvas-media';
-import { Button, CloseButton } from '@instructure/ui-buttons';
-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 { 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
-  } = _ref;
-  const [subtitles, setSubtitles] = useState(audioOptions.tracks || []);
-
-  const handleSave = (e, contentProps) => {
-    onSave({
-      media_object_id: audioOptions.id,
-      subtitles,
-      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,
-    onDismiss: onDismiss,
-    onEntered: onEntered,
-    onExited: onExited,
-    open: open,
-    placement: "end",
-    shouldCloseOnDocumentClick: true,
-    shouldContainFocus: true,
-    shouldReturnFocus: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    height: getTrayHeight()
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "header",
-    padding: "medium"
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "row"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Heading, {
-    as: "h2"
-  }, formatMessage('Audio Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "static",
-    color: "primary",
-    onClick: onDismiss,
-    screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Flex.Item, {
-    as: "form",
-    shouldGrow: true,
-    margin: "none",
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    justifyItems: "space-between",
-    direction: "column",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    shouldGrow: true,
-    padding: "small",
-    shouldShrink: true
-  }, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(FormFieldGroup, {
-    description: formatMessage('Closed Captions/Subtitles')
-  }, /*#__PURE__*/React.createElement(ClosedCaptionPanel, {
-    subtitles: subtitles.map(st => ({
-      locale: st.locale,
-      file: {
-        name: st.language || st.locale
-      }
-    })),
-    uploadMediaTranslations: Bridge.uploadMediaTranslations,
-    languages: Bridge.languages,
-    updateSubtitles: newSubtitles => setSubtitles(newSubtitles),
-    liveRegion: getLiveRegion
-  }))))), /*#__PURE__*/React.createElement(Flex.Item, {
-    background: "secondary",
-    borderWidth: "small none none none",
-    padding: "small medium",
-    textAlign: "end"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: e => handleSave(e, contentProps),
-    color: "primary"
-  }, formatMessage('Done'))))))));
-}
-AudioOptionsTray.propTypes = {
-  onEntered: func,
-  onExited: func,
-  onDismiss: func,
-  onSave: func,
-  open: bool.isRequired,
-  trayProps: shape({
-    host: string.isRequired,
-    jwt: string.isRequired
-  }).isRequired,
-  audioOptions: shape({
-    id: string.isRequired,
-    titleText: string.isRequired,
-    tracks: arrayOf(shape({
-      locale: string.isRequired
-    }))
-  }).isRequired
-};
-AudioOptionsTray.defaultProps = {
-  onEntered: null,
-  onExited: null,
-  onDismiss: null,
-  onSave: null
-};

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

@@ -1,129 +0,0 @@
-/*
- * Copyright (C) 2019 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas 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 Affero General Public License for more
- * details.
- *
- * 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 { arrayOf, bool, func, objectOf, oneOf, shape, string } from 'prop-types';
-import { mediaObjectShape } from '../../shared/fileShape';
-import formatMessage from '../../../../format-message';
-import { Text } from '@instructure/ui-text';
-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, {
-      onClick: handleClick,
-      focusRef: focusRef,
-      disabled: f.media_entry_id === PENDING_MEDIA_ENTRY_ID,
-      disabledMessage: formatMessage('Media file is processing. Please try again later.')
-    }));
-  });
-}
-
-function renderLoadingError(_error) {
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    role: "alert",
-    margin: "medium"
-  }, /*#__PURE__*/React.createElement(Text, {
-    color: "danger"
-  }, formatMessage('Loading failed.')));
-}
-
-export default function MediaPanel(props) {
-  const {
-    fetchInitialMedia,
-    fetchNextMedia,
-    contextType,
-    sortBy,
-    searchString
-  } = props;
-  const media = props.media[contextType];
-  const {
-    hasMore,
-    isLoading,
-    error,
-    files
-  } = media;
-  const lastItemRef = useRef(null);
-  const loader = useIncrementalLoading({
-    hasMore,
-    isLoading,
-    lastItemRef,
-    onLoadInitial: fetchInitialMedia,
-    onLoadMore: fetchNextMedia,
-    records: files,
-    contextType,
-    sortBy,
-    searchString
-  });
-
-  const handleFileClick = file => {
-    props.onMediaEmbed(file);
-  };
-
-  return /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    "data-testid": "instructure_links-MediaPanel"
-  }, renderLinks(files, handleFileClick, lastItemRef), loader.isLoading && /*#__PURE__*/React.createElement(LoadingIndicator, {
-    loader: loader
-  }), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(LoadMoreButton, {
-    loader: loader
-  }), /*#__PURE__*/React.createElement(LoadingStatus, {
-    loader: loader
-  }), error && renderLoadingError(error), isEmpty(media) && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    role: "alert",
-    padding: "medium"
-  }, formatMessage('No results.')));
-}
-MediaPanel.propTypes = {
-  contextType: string.isRequired,
-  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,
-  sortBy: shape({
-    sort: oneOf(['date_added', 'alphabetical']).isRequired,
-    order: oneOf(['asc', 'desc']).isRequired
-  }),
-  searchString: string
-};

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

@@ -1,215 +0,0 @@
-/*
- * Copyright (C) 2019 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas 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 Affero General Public License for more
- * details.
- *
- * 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';
-import { asVideoElement, findMediaPlayerIframe } from '../../shared/ContentSelection';
-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 AUDIO_PLAYER_SIZE = {
-  width: '320px',
-  height: '14.25rem'
-};
-export default class TrayController {
-  constructor() {
-    this._editor = null;
-    this._isOpen = false;
-    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') {
-      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
-        // TODO: remove when using v7
-
-        const minWidth = (_videoOptions$subtitl = videoOptions.subtitles) !== null && _videoOptions$subtitl !== void 0 && _videoOptions$subtitl.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); // tell tinymce so the context toolbar resets
-
-
-        this._editor.fire('ObjectResized', {
-          target: this.$videoContainer,
-          width: videoOptions.appliedWidth,
-          height: videoOptions.appliedHeight
-        });
-      } 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
-      // and not notorious, we probably don't have a media_object_id.
-      // If not, we can't update the MediaObject in the canvas db.
-
-
-      if (videoOptions.media_object_id && videoOptions.media_object_id !== 'undefined') {
-        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
-            }, bridge.canvasOrigin);
-          }
-        }).catch(ex => {
-          console.error('failed updating video captions', ex); // eslint-disable-line no-console
-        });
-      }
-    }
-
-    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._shouldOpen = false;
-
-    this._renderTray();
-
-    this._editor = null;
-  }
-
-  _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) || {};
-    }
-
-    const element = /*#__PURE__*/React.createElement(VideoOptionsTray, {
-      id: "video-options-tray",
-      key: this._renderId,
-      videoOptions: vo,
-      onEntered: () => {
-        this._isOpen = true;
-      },
-      onExited: () => {
-        bridge.focusActiveEditor(false);
-        this._isOpen = false;
-      },
-      onSave: videoOptions => {
-        this._applyVideoOptions(videoOptions);
-      },
-      onRequestClose: () => this._dismissTray(),
-      open: this._shouldOpen,
-      trayProps: trayProps,
-      studioOptions: isStudioEmbeddedMedia(this.$videoContainer) ? parseStudioOptions(this.$videoContainer) : null
-    });
-    ReactDOM.render(element, this.$container);
-  }
-
-}