@instructure/canvas-rce 5.11.1 → 5.12.2

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

@@ -1,321 +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, { useState } 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';
-import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
-import { SimpleSelect } from '@instructure/ui-simple-select';
-import { TextArea } from '@instructure/ui-text-area';
-import { Text } from '@instructure/ui-text';
-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 { 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 formatMessage from '../../../../format-message';
-import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
-import { getTrayHeight } from '../../shared/trayUtils';
-import { instuiPopupMountNode } 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,
-    onEntered = null,
-    onExited = null,
-    id = 'video-options-tray',
-    studioOptions = null
-  } = _ref;
-  const {
-    naturalHeight,
-    naturalWidth
-  } = videoOptions;
-  const currentHeight = videoOptions.appliedHeight || naturalHeight;
-  const currentWidth = videoOptions.appliedWidth || naturalWidth;
-  const [titleText, setTitleText] = useState(videoOptions.titleText);
-  const [displayAs, setDisplayAs] = useState('embed');
-  const [videoSize, setVideoSize] = useState(videoOptions.videoSize);
-  const [videoHeight, setVideoHeight] = useState(currentHeight);
-  const [videoWidth, setVideoWidth] = useState(currentWidth);
-  const [subtitles, setSubtitles] = useState(videoOptions.tracks || []);
-  const [minWidth] = useState(MIN_WIDTH_VIDEO);
-  const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
-  const [minPercentage] = useState(MIN_PERCENTAGE);
-  const isStudio = !!studioOptions;
-  const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
-  const showSizeControls = !isStudio || studioOptions.resizable;
-  const dimensionsState = useDimensionsState(videoOptions, {
-    minHeight,
-    minWidth,
-    minPercentage
-  });
-
-  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);
-    } else {
-      const {
-        height,
-        width
-      } = scaleToSize(selectedOption.value, naturalWidth, naturalHeight);
-      setVideoHeight(height);
-      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,
-      titleText,
-      appliedHeight,
-      appliedWidth,
-      displayAs,
-      subtitles,
-      updateMediaObject
-    });
-  }
-
-  const tooltipText = formatMessage('Used by screen readers to describe the video');
-  const textAreaLabel = /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Flex.Item, null, formatMessage('Title')), /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 0 0 xx-small"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    on: ['hover', 'focus'],
-    placement: "top",
-    renderTip: /*#__PURE__*/React.createElement(View, {
-      display: "block",
-      id: "alt-text-label-tooltip",
-      maxWidth: "14rem"
-    }, tooltipText)
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    renderIcon: IconQuestionLine,
-    size: "small",
-    screenReaderLabel: tooltipText,
-    withBackground: false,
-    withBorder: false
-  }))));
-  const messagesForSize = [];
-
-  if (videoSize !== CUSTOM) {
-    messagesForSize.push({
-      text: formatMessage('{width} x {height}px', {
-        height: videoHeight,
-        width: videoWidth
-      }),
-      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,
-    onDismiss: onRequestClose,
-    onEntered: onEntered,
-    onExited: onExited,
-    open: open,
-    placement: "end",
-    shouldCloseOnDocumentClick: true,
-    shouldContainFocus: true,
-    shouldReturnFocus: true,
-    size: "regular"
-  }, /*#__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"
-  }, isStudio ? formatMessage('Studio Media Options') : formatMessage('Video Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    color: "primary",
-    onClick: onRequestClose,
-    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"
-  }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
-    direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Text, {
-    weight: "bold"
-  }, formatMessage('Media Title'))), /*#__PURE__*/React.createElement(Flex.Item, {
-    padding: "small none none small"
-  }, titleText)) : /*#__PURE__*/React.createElement(TextArea, {
-    "aria-describedby": "alt-text-label-tooltip",
-    disabled: displayAs === 'link',
-    height: "4rem",
-    label: textAreaLabel,
-    onChange: handleTitleTextChange,
-    placeholder: formatMessage('(Describe the video)'),
-    resize: "vertical",
-    value: titleText
-  })), showDisplayOptions && /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "small none none none",
-    padding: "small"
-  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
-    description: formatMessage('Display Options'),
-    name: "display-video-as",
-    onChange: handleDisplayAsChange,
-    value: displayAs
-  }, /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Embed Video'),
-    value: "embed"
-  }), /*#__PURE__*/React.createElement(RadioInput, {
-    label: formatMessage('Display Text Link (Opens in a new tab)'),
-    value: "link"
-  }))), showSizeControls && /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "small none xx-small none"
-  }, /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "small small xx-small small"
-  }, /*#__PURE__*/React.createElement(SimpleSelect, {
-    id: `${id}-size`,
-    mountNode: instuiPopupMountNode,
-    disabled: displayAs !== 'embed',
-    renderLabel: formatMessage('Size'),
-    messages: messagesForSize,
-    assistiveText: formatMessage('Use arrow keys to navigate options.'),
-    onChange: handleVideoSizeChange,
-    value: videoSize
-  }, videoSizes.map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: `${id}-size-${size}`,
-    key: size,
-    value: size
-  }, labelForImageSize(size))))), videoSize === CUSTOM && /*#__PURE__*/React.createElement(View, {
-    as: "div",
-    padding: "xx-small small"
-  }, /*#__PURE__*/React.createElement(DimensionsInput, {
-    dimensionsState: dimensionsState,
-    disabled: displayAs !== 'embed',
-    minHeight: minHeight,
-    minWidth: minWidth,
-    minPercentage: minPercentage,
-    hidePercentage: true
-  }))), !isStudio && /*#__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,
-      inherited: st.inherited,
-      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
-  }))))), /*#__PURE__*/React.createElement(Flex.Item, {
-    background: "secondary",
-    borderWidth: "small none none none",
-    padding: "small medium",
-    textAlign: "end"
-  }, /*#__PURE__*/React.createElement(Button, {
-    disabled: saveDisabled,
-    onClick: event => handleSave(event, contentProps.updateMediaObject),
-    color: "primary"
-  }, formatMessage('Done'))))))));
-}
-VideoOptionsTray.propTypes = {
-  videoOptions: shape({
-    titleText: string,
-    appliedHeight: number,
-    appliedWidth: number,
-    naturalHeight: number.isRequired,
-    naturalWidth: number.isRequired,
-    tracks: arrayOf(shape({
-      locale: string.isRequired,
-      inherited: bool
-    }))
-  }).isRequired,
-  onEntered: func,
-  onExited: func,
-  onRequestClose: func.isRequired,
-  onSave: func.isRequired,
-  open: bool.isRequired,
-  trayProps: shape({
-    host: string.isRequired,
-    jwt: string.isRequired
-  }),
-  id: string,
-  studioOptions: parsedStudioOptionsPropType
-};

package/lib/rce/plugins/instructure_record/clickCallback.js

@@ -1,105 +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 { StoreProvider } from '../shared/StoreContext';
-import formatMessage from '../../../format-message';
-import { headerFor, originFromHost } from '../../../rcs/api';
-import { instuiPopupMountNode } from '../../../util/fullscreenHelpers';
-import RCEGlobals from '../../RCEGlobals';
-export const handleUpload = (error, uploadData, onUploadComplete, uploadBookmark) => {
-  let err_msg = error && Bridge.uploadMediaTranslations.UploadMediaStrings.UPLOADING_ERROR;
-
-  if ((error === null || error === void 0 ? void 0 : error.name) === 'FileSizeError') {
-    err_msg = formatMessage('Size of caption file is greater than the maximum {max} kb allowed file size.', {
-      max: error.maxBytes / 1000
-    });
-  }
-
-  const editorComponent = Bridge.activeEditor();
-  let newBookmark;
-
-  if (uploadBookmark) {
-    newBookmark = editorComponent.editor.selection.getBookmark(2, true);
-    editorComponent.editor.selection.moveToBookmark(uploadBookmark);
-  }
-
-  onUploadComplete(err_msg, uploadData);
-
-  if (newBookmark) {
-    editorComponent.editor.selection.moveToBookmark(newBookmark);
-  }
-};
-export default function (ed, document) {
-  return import('@instructure/canvas-media').then(CanvasMedia => {
-    const UploadMedia = CanvasMedia.default;
-    let container = document.querySelector('.canvas-rce-media-upload');
-
-    if (!container) {
-      container = document.createElement('div');
-      container.className = 'canvas-rce-media-upload';
-      document.body.appendChild(container);
-    }
-
-    const handleDismiss = () => {
-      ReactDOM.unmountComponentAtNode(container);
-      ed.focus(false);
-    }; // We need to have a place to store the bookmark location
-    // while the upload happens.
-
-
-    let uploadBookmark = null; // redux's activateMediaUpload action does the image placeholder,
-    // but it also does the upload. We need to separate them if we
-    // want to stay within the redux approach
-
-    const handleStartUpload = fileProps => {
-      var _editorComponent$edit;
-
-      Bridge.focusEditor(ed.rceWrapper);
-      const editorComponent = Bridge.activeEditor();
-      uploadBookmark = editorComponent === null || editorComponent === void 0 ? void 0 : (_editorComponent$edit = editorComponent.editor) === null || _editorComponent$edit === void 0 ? void 0 : _editorComponent$edit.selection.getBookmark(2, true);
-      Bridge.insertImagePlaceholder(fileProps);
-      handleDismiss();
-    };
-
-    const trayProps = Bridge.trayProps.get(ed);
-    ReactDOM.render( /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(UploadMedia, {
-      "data-mce-component": true,
-      rcsConfig: {
-        contextType: ed.settings.canvas_rce_user_context.type,
-        contextId: ed.settings.canvas_rce_user_context.id,
-        origin: originFromHost(contentProps.host),
-        headers: headerFor(contentProps.jwt)
-      },
-      userLocale: Bridge.userLocale,
-      mountNode: instuiPopupMountNode,
-      open: true,
-      liveRegion: () => document.getElementById('flash_screenreader_holder'),
-      onStartUpload: fileProps => handleStartUpload(fileProps),
-      onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
-      onDismiss: handleDismiss,
-      tabs: {
-        record: true,
-        upload: true
-      },
-      uploadMediaTranslations: Bridge.uploadMediaTranslations,
-      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id
-    })), container);
-  });
-}

package/lib/rce/plugins/instructure_record/mediaTranslations.js

@@ -1,94 +0,0 @@
-/*
- * Copyright (C) 2020 - 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/>.
- */
-// IMPORTANT!
-// Do not import this file directly, but get it via Bridge.uploadMediaTranslations
-// This is because the locale, which is lazy imported, has to be loaded and
-// format-message initialized before this file gets evaluated.
-import formatMessage from '../../../format-message';
-const uploadMediaTranslations = {
-  UploadMediaStrings: {
-    ADD_CLOSED_CAPTIONS_OR_SUBTITLES: formatMessage('Add CC/Subtitles'),
-    CLEAR_FILE_TEXT: formatMessage('Clear selected file'),
-    CLOSE_TEXT: formatMessage('Close'),
-    CLOSED_CAPTIONS_CHOOSE_FILE: formatMessage('Choose caption file'),
-    CLOSED_CAPTIONS_SELECT_LANGUAGE: formatMessage('Select Language'),
-    COMPUTER_PANEL_TITLE: formatMessage('Computer'),
-    DRAG_DROP_CLICK_TO_BROWSE: formatMessage('Drag and drop, or click to browse your computer'),
-    DRAG_FILE_TEXT: formatMessage('Drag a file here'),
-    EMBED_PANEL_TITLE: formatMessage('Embed'),
-    EMBED_VIDEO_CODE_TEXT: formatMessage('Embed Code'),
-    INVALID_FILE_TEXT: formatMessage('Invalid File'),
-    LOADING_MEDIA: formatMessage('Loading...'),
-    RECORD_PANEL_TITLE: formatMessage('Record'),
-    SUBMIT_TEXT: formatMessage('Submit'),
-    UPLOADING_ERROR: formatMessage('An error occurred uploading your media.'),
-    UPLOAD_MEDIA_LABEL: formatMessage('Upload Media'),
-    MEDIA_RECORD_NOT_AVAILABLE: formatMessage('Audio and video recording not supported; please use a different browser.'),
-    SUPPORTED_FILE_TYPES: formatMessage('Supported file types: SRT or WebVTT'),
-    NO_FILE_CHOSEN: formatMessage('No file chosen'),
-    REMOVE_FILE: 'Remove {lang} closed captions',
-    ADD_NEW_CAPTION_OR_SUBTITLE: formatMessage('Add another'),
-    ADDED_CAPTION: 'Captions for {lang} added',
-    DELETED_CAPTION: 'Deleted captions for {lang}',
-    PROGRESS_LABEL: formatMessage('Uploading')
-  },
-  SelectStrings: {
-    USE_ARROWS: 'Use arrow keys to navigate options.',
-    LIST_COLLAPSED: 'List collapsed.',
-    LIST_EXPANDED: 'List expanded.',
-    OPTION_SELECTED: '{option} selected.'
-  },
-  // Structure copied from @instructure/media-capture translations file
-  MediaCaptureStrings: {
-    ARIA_TIMEBAR_LABEL: formatMessage('Timebar'),
-    ARIA_VIDEO_LABEL: formatMessage('Video Player'),
-    ARIA_VOLUME: formatMessage('Current Volume Level'),
-    ARIA_RECORDING: formatMessage('Recording'),
-    DEFAULT_ERROR: formatMessage('Something went wrong accessing your webcam.'),
-    DEVICE_AUDIO: formatMessage('Mic'),
-    DEVICE_VIDEO: formatMessage('Webcam'),
-    FILE_PLACEHOLDER: formatMessage('Untitled'),
-    FINISH: formatMessage('Finish'),
-    WEBCAM_VIDEO_SELECTION_LABEL: formatMessage('Select video source'),
-    WEBCAM_AUDIO_SELECTION_LABEL: formatMessage('Select audio source'),
-    NO_WEBCAM: formatMessage('No Video'),
-    // Modified string to match from ui/shared/media-recorder/react/components/MediaRecorder.js
-    NOT_ALLOWED_ERROR: formatMessage('Please allow Canvas to access your microphone and webcam.'),
-    NOT_READABLE_ERROR: formatMessage('Your webcam may already be in use.'),
-    PLAYBACK_PAUSE: formatMessage('Pause'),
-    PLAYBACK_PLAY: formatMessage('Play'),
-    PREVIEW: formatMessage('PREVIEW'),
-    SAVE_MEDIA: formatMessage('Save Media'),
-    // Modified string to match from ui/shared/media-recorder/react/components/MediaRecorder.js
-    SR_FILE_INPUT: formatMessage('File name'),
-    START: formatMessage('Start Recording'),
-    START_OVER: formatMessage('Start Over'),
-    SCREEN_DEFAULT_ERROR: formatMessage('Something went wrong while sharing your screen.'),
-    MIC_BLOCKED: formatMessage('Your microphone is blocked in the browser settings.'),
-    WEBCAM_BLOCKED: formatMessage('Your webcam is blocked in the browser settings.'),
-    MIC_AND_WEBCAM_BLOCKED: formatMessage('Your webcam and microphone are blocked in the browser settings.'),
-    NO_MIC_EXIST: formatMessage('We couldn’t detect a working microphone connected to your device.'),
-    NO_WEBCAM_EXIST: formatMessage('We couldn’t detect a working webcam connected to your device.'),
-    NO_MIC_AND_WEBCAM_EXIST: formatMessage('We couldn’t detect a working webcam or microphone connected to your device.'),
-    WEBCAM_DISABLED: formatMessage('Webcam Disabled'),
-    MICROPHONE_DISABLED: formatMessage('Microphone Disabled'),
-    SYSTEM_AUDIO_ALLOWED: formatMessage('System Audio Allowed'),
-    SYSTEM_AUDIO_DISABLED: formatMessage('System Audio Disabled')
-  }
-};
-export default uploadMediaTranslations;

package/lib/rce/plugins/instructure_record/plugin.js

@@ -1,173 +0,0 @@
-// @ts-nocheck
-
-/*
- * Copyright (C) 2018 - 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 clickCallback from './clickCallback';
-import bridge from '../../../bridge';
-import formatMessage from '../../../format-message';
-import VideoTrayController from './VideoOptionsTray/TrayController';
-import AudioTrayController from './AudioOptionsTray/TrayController';
-import { isAudioElement, isVideoElement } from '../shared/ContentSelection';
-import { isOKToLink } from '../../contentInsertionUtils';
-import tinymce from 'tinymce';
-const videoTrayController = new VideoTrayController();
-const audioTrayController = new AudioTrayController();
-const COURSE_PLUGIN_KEY = 'course_media';
-const USER_PLUGIN_KEY = 'user_media';
-const GROUP_PLUGIN_KEY = 'group_media';
-
-function getMenuItems(ed) {
-  const contextType = ed.settings.canvas_rce_user_context.type;
-  const items = [];
-
-  if (ed.getParam('show_media_upload')) {
-    // test if it's ok
-    items.push({
-      text: formatMessage('Upload/Record Media'),
-      value: 'instructure_upload_media'
-    });
-  }
-
-  if (contextType === 'course') {
-    items.push({
-      text: formatMessage('Course Media'),
-      value: 'instructure_course_media'
-    });
-  } else if (contextType === 'group') {
-    items.push({
-      text: formatMessage('Group Media'),
-      value: 'instructure_group_media'
-    });
-  }
-
-  items.push({
-    text: formatMessage('User Media'),
-    value: 'instructure_user_media'
-  });
-  return items;
-}
-
-function doMenuItem(ed, value) {
-  switch (value) {
-    case 'instructure_upload_media':
-      ed.execCommand('instructureRecord');
-      break;
-
-    case 'instructure_course_media':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForMedia', false, COURSE_PLUGIN_KEY);
-      break;
-
-    case 'instructure_group_media':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForMedia', false, GROUP_PLUGIN_KEY);
-      break;
-
-    case 'instructure_user_media':
-      ed.focus(true);
-      ed.execCommand('instructureTrayForMedia', false, USER_PLUGIN_KEY);
-      break;
-  }
-} // Register plugin
-
-
-tinymce.PluginManager.add('instructure_record', function (ed) {
-  ed.addCommand('instructureRecord', () => clickCallback(ed, document));
-  ed.addCommand('instructureTrayForMedia', (ui, plugin_key) => {
-    bridge.showTrayForPlugin(plugin_key, ed.id);
-  }); // Register menu items
-
-  ed.ui.registry.addNestedMenuItem('instructure_media', {
-    text: formatMessage('Media'),
-    icon: 'video',
-    getSubmenuItems: () => getMenuItems(ed).map(item => {
-      return {
-        type: 'menuitem',
-        text: item.text,
-        onAction: () => doMenuItem(ed, item.value),
-        onSetup: api => {
-          api.setDisabled(!isOKToLink(ed.selection.getContent()));
-          return () => undefined;
-        }
-      };
-    })
-  }); // Register buttons
-
-  ed.ui.registry.addMenuButton('instructure_record', {
-    tooltip: formatMessage('Record/Upload Media'),
-    icon: 'video',
-    fetch: callback => callback(getMenuItems(ed).map(item => ({
-      type: 'menuitem',
-      text: item.text,
-      value: item.value,
-      onAction: () => doMenuItem(ed, item.value)
-    }))),
-
-    onSetup(api) {
-      function handleNodeChange(_e) {
-        api.setDisabled(!isOKToLink(ed.selection.getContent()));
-      }
-
-      setTimeout(handleNodeChange);
-      ed.on('NodeChange', handleNodeChange);
-      return () => {
-        ed.off('NodeChange', handleNodeChange);
-      };
-    }
-
-  });
-  /*
-   * Register the Video "Options" button that will open the Video Options
-   * tray.
-   */
-
-  const buttonAriaLabel = formatMessage('Show video options');
-  ed.ui.registry.addButton('instructure-video-options', {
-    onAction() {
-      // show the tray
-      videoTrayController.showTrayForEditor(ed);
-    },
-
-    text: formatMessage('Video Options'),
-    tooltip: buttonAriaLabel
-  });
-  ed.ui.registry.addContextToolbar('instructure-video-toolbar', {
-    items: 'instructure-video-options',
-    position: 'node',
-    predicate: isVideoElement,
-    scope: 'node'
-  });
-  ed.ui.registry.addButton('instructure-audio-options', {
-    onAction() {
-      audioTrayController.showTrayForEditor(ed);
-    },
-
-    text: formatMessage('Audio Options'),
-    tooltip: formatMessage('Show audio options')
-  });
-  ed.ui.registry.addContextToolbar('instructure-audio-toolbar', {
-    items: 'instructure-audio-options',
-    position: 'node',
-    predicate: isAudioElement,
-    scope: 'node'
-  });
-  ed.on('remove', editor => {
-    audioTrayController.hideTrayForEditor(editor);
-    videoTrayController.hideTrayForEditor(editor);
-  });
-});