@instructure/canvas-rce 5.1.2-alpha.7 → 5.2.0

package/lib/translated/ca/modules/rce/plugins/instructure_record/AudioOptionsTray/__tests__/AudioOptionsTrayDriver.js

@@ -0,0 +1,50 @@
+/*
+ * 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 { queryByLabelText, queryByTestId } from '@testing-library/dom';
+export default class AudioOptionsTrayDriver {
+  static find() {
+    const $tray = queryByLabelText(document.body, 'Audio Options Tray');
+
+    if (!$tray) {
+      return null;
+    }
+
+    return new AudioOptionsTrayDriver($tray);
+  }
+
+  constructor($element) {
+    this.$element = $element;
+  }
+
+  get label() {
+    return this.$element.getAttribute('aria-label');
+  }
+
+  get $doneButton() {
+    return [...this.$element.querySelectorAll('button,[role="button"]')].find($button => $button.textContent.trim() === 'Done');
+  }
+
+  get $closedCaptionPanel() {
+    return queryByTestId(this.$element, 'ClosedCaptionPanel');
+  }
+
+  get doneButtonDisabled() {
+    return this.$doneButton.disabled;
+  }
+
+}

package/lib/translated/ca/modules/rce/plugins/instructure_record/AudioOptionsTray/__tests__/TrayController.test.js

@@ -0,0 +1,124 @@
+/*
+ * 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 ReactDOM from 'react-dom';
+import TrayController, { CONTAINER_ID } from "../TrayController.js";
+import FakeEditor from "../../../shared/__tests__/FakeEditor.js";
+import AudioOptionsTrayDriver from "./AudioOptionsTrayDriver.js";
+import * as contentSelection from "../../../shared/ContentSelection.js";
+beforeAll(() => {
+  contentSelection.asAudioElement = jest.fn(elem => {
+    const id = elem.parentElement.getAttribute('id');
+    return id === 'audio_id';
+  });
+});
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+describe('RCE "Audios" Plugin > AudioOptionsTray > TrayController', () => {
+  let editors;
+  let trayController;
+  beforeEach(() => {
+    editors = [new FakeEditor(), new FakeEditor()];
+    editors.forEach((editor, i) => {
+      editor.initialize();
+      const audioElement = createAudio(i);
+      editor.appendElement(audioElement);
+      editor.setSelectedNode(audioElement);
+    });
+    trayController = new TrayController();
+  });
+  afterEach(() => {
+    editors.forEach(editor => editor.uninitialize());
+    const $container = document.getElementById(CONTAINER_ID);
+
+    if ($container != null) {
+      ReactDOM.unmountComponentAtNode($container);
+    }
+  });
+
+  function createAudio() {
+    const velem = document.createElement('div');
+    velem.setAttribute('id', 'audio_id');
+    velem.setAttribute('data-mce-p-src', 'http://audio.is.here/');
+    const ifr = document.createElement('iframe');
+    velem.appendChild(ifr);
+    return velem;
+  }
+
+  function getTray() {
+    return AudioOptionsTrayDriver.find();
+  }
+
+  describe('#showTrayForEditor()', () => {
+    describe('when the tray is not already open', () => {
+      it('opens the tray', async () => {
+        trayController.showTrayForEditor(editors[0]);
+        expect(getTray()).not.toBeNull();
+      });
+    });
+    describe('when the tray is open for a different editor', () => {
+      beforeEach(async () => {
+        trayController.showTrayForEditor(editors[0]);
+        trayController.showTrayForEditor(editors[1]);
+      });
+      it('keeps the tray open', () => {
+        expect(getTray()).not.toBeNull();
+      });
+    });
+  });
+  describe('#hideTrayForEditor()', () => {
+    it('closes the tray when open for the given editor', () => {
+      trayController.showTrayForEditor(editors[0]);
+      trayController.hideTrayForEditor(editors[0]);
+      expect(getTray()).toBeNull();
+    });
+    it('does not close the tray when open for a different editor', () => {
+      trayController.showTrayForEditor(editors[0]);
+      trayController.showTrayForEditor(editors[1]);
+      trayController.hideTrayForEditor(editors[0]);
+      expect(getTray()).not.toBeNull();
+    });
+    it('does nothing when the tray was not open', () => {
+      // In effect, it does not explode.
+      trayController.hideTrayForEditor(editors[0]);
+      expect(getTray()).toBeNull();
+    });
+  });
+  describe('#_applyAudioOptions', () => {
+    it('updates the audio', () => {
+      const updateMediaObject = jest.fn().mockResolvedValue();
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._applyAudioOptions({
+        media_object_id: 'audio_id',
+        updateMediaObject
+      });
+
+      expect(updateMediaObject).toHaveBeenCalled();
+    });
+  });
+  describe('#_dismissTray', () => {
+    it('closes the tray', () => {
+      trayController.showTrayForEditor(editors[0]);
+
+      trayController._dismissTray();
+
+      expect(getTray()).toBeNull(); // the tray is closed
+    });
+  });
+});

package/lib/translated/ca/modules/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -0,0 +1,149 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * 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.js";
+import Bridge from "../../../../bridge/index.js";
+import formatMessage from "../../../../format-message.js";
+import { getTrayHeight } from "../../shared/trayUtils.js";
+import { Heading } from '@instructure/ui-heading';
+
+const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
+
+export default function AudioOptionsTray({
+  open,
+  onEntered,
+  onExited,
+  onDismiss,
+  onSave,
+  trayProps,
+  audioOptions
+}) {
+  const _useState = useState(audioOptions.tracks || []),
+        _useState2 = _slicedToArray(_useState, 2),
+        subtitles = _useState2[0],
+        setSubtitles = _useState2[1];
+
+  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: "Audio Options Tray",
+    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, {
+    grow: true,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Heading, {
+    as: "h2"
+  }, "Audio Options")), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
+    placement: "static",
+    variant: "icon",
+    onClick: onDismiss
+  }, "Tanca")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    as: "form",
+    grow: true,
+    margin: "none",
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Flex, {
+    justifyItems: "space-between",
+    direction: "column",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    grow: true,
+    padding: "small",
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/React.createElement(FormFieldGroup, {
+    description: "Llegendes/subt\xEDtols tancats"
+  }, /*#__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),
+    variant: "primary"
+  }, "Fet")))))));
+}
+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/translated/ca/modules/rce/plugins/instructure_record/VideoOptionsTray/TrayController.js

@@ -18,7 +18,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from "../../../../bridge/index.js";
-import { asVideoElement, findVideoPlayerIframe } from "../../shared/ContentSelection.js";
+import { asVideoElement, findMediaPlayerIframe } from "../../shared/ContentSelection.js";
 import VideoOptionsTray from "./index.js";
 export const CONTAINER_ID = 'instructure-video-options-tray-container';
 export const VIDEO_SIZE_DEFAULT = {
@@ -56,7 +56,7 @@ export default class TrayController {
 
   showTrayForEditor(editor) {
     this._editor = editor;
-    this.$videoContainer = findVideoPlayerIframe(editor.selection.getNode());
+    this.$videoContainer = findMediaPlayerIframe(editor.selection.getNode());
     this._shouldOpen = true;
 
     if (bridge.focusedEditor) {

package/lib/translated/ca/modules/rce/plugins/instructure_record/plugin.js

@@ -18,10 +18,12 @@
 import clickCallback from "./clickCallback.js";
 import bridge from "../../../bridge/index.js";
 import formatMessage from "../../../format-message.js";
-import TrayController from "./VideoOptionsTray/TrayController.js";
-import { isVideoElement } from "../shared/ContentSelection.js";
+import VideoTrayController from "./VideoOptionsTray/TrayController.js";
+import AudioTrayController from "./AudioOptionsTray/TrayController.js";
+import { isAudioElement, isVideoElement } from "../shared/ContentSelection.js";
 import { isOKToLink } from "../../contentInsertionUtils.js";
-const trayController = new TrayController();
+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';
@@ -148,7 +150,7 @@ tinymce.create('tinymce.plugins.InstructureRecord', {
     ed.ui.registry.addButton('instructure-video-options', {
       onAction() {
         // show the tray
-        trayController.showTrayForEditor(ed);
+        videoTrayController.showTrayForEditor(ed);
       },
 
       text: "Opcions de v\xEDdeo",
@@ -160,10 +162,25 @@ tinymce.create('tinymce.plugins.InstructureRecord', {
       predicate: isVideoElement,
       scope: 'node'
     });
+    ed.ui.registry.addButton('instructure-audio-options', {
+      onAction() {
+        audioTrayController.showTrayForEditor(ed);
+      },
+
+      text: "Audio Options",
+      tooltip: "Show audio options"
+    });
+    ed.ui.registry.addContextToolbar('instructure-audio-toolbar', {
+      items: 'instructure-audio-options',
+      position: 'node',
+      predicate: isAudioElement,
+      scope: 'node'
+    });
   },
 
   remove(editor) {
-    trayController.hideTrayForEditor(editor);
+    audioTrayController.hideTrayForEditor(editor);
+    videoTrayController.hideTrayForEditor(editor);
   }
 
 }); // Register plugin

package/lib/translated/ca/modules/rce/plugins/shared/ContentSelection.js

@@ -20,6 +20,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { fromImageEmbed, fromVideoEmbed } from "../instructure_image/ImageEmbedOptions.js";
 import { isOnlyTextSelected } from "../../contentInsertionUtils.js";
 import * as url from 'url';
+import formatMessage from "../../../format-message.js";
 const FILE_DOWNLOAD_PATH_REGEX = /^\/(courses\/\d+\/)?files\/\d+\/download$/;
 export const LINK_TYPE = 'link';
 export const FILE_LINK_TYPE = 'file-link';
@@ -90,7 +91,7 @@ export function asLink($element, editor) {
 export function asVideoElement($element) {
   var _$videoElem$parentEle;
 
-  const $videoElem = findVideoPlayerIframe($element);
+  const $videoElem = findMediaPlayerIframe($element);
 
   if (!isVideoElement($videoElem)) {
     return null;
@@ -102,6 +103,38 @@ export function asVideoElement($element) {
     id: ((_$videoElem$parentEle = $videoElem.parentElement) === null || _$videoElem$parentEle === void 0 ? void 0 : _$videoElem$parentEle.getAttribute('data-mce-p-data-media-id')) || $videoElem.getAttribute('data-mce-p-data-media-id')
   });
 }
+export function asAudioElement($element) {
+  var _$element$parentEleme;
+
+  if (!$element) {
+    return null;
+  }
+
+  const $audioIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
+  const $tinymceIframeShim = $audioIframe.parentElement;
+  const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace("Reproductor de v\xEDdeo per a ", '');
+  const audioOptions = {
+    titleText: title,
+    id: ((_$element$parentEleme = $element.parentElement) === null || _$element$parentEleme === void 0 ? void 0 : _$element$parentEleme.getAttribute('data-mce-p-data-media-id')) || $element.getAttribute('data-mce-p-data-media-id')
+  };
+
+  if ($audioIframe.tagName === 'IFRAME') {
+    const audioDoc = $audioIframe.contentDocument;
+
+    try {
+      var _audioDoc$querySelect;
+
+      const trackSJson = (_audioDoc$querySelect = audioDoc.querySelector('[data-tracks]')) === null || _audioDoc$querySelect === void 0 ? void 0 : _audioDoc$querySelect.getAttribute('data-tracks');
+
+      if (trackSJson) {
+        audioOptions.tracks = JSON.parse(trackSJson);
+      } // eslint-disable-next-line no-empty
+
+    } catch (e) {}
+  }
+
+  return audioOptions;
+}
 
 function asText($element, editor) {
   const text = editor && editor.selection.getContent({
@@ -165,7 +198,8 @@ export function isFileLink($element, editor) {
 export function isImageEmbed($element) {
   return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
 }
-export function isVideoElement($element) {
+
+function isMediaElement($element, mediaType) {
   var _tinymceIframeShim$fi;
 
   // the video is hosted in an iframe, but tinymce
@@ -187,14 +221,16 @@ export function isVideoElement($element) {
   }
 
   const media_type = tinymceIframeShim.getAttribute('data-mce-p-data-media-type');
+  return media_type === mediaType;
+}
 
-  if (media_type !== 'video') {
-    return false;
-  }
-
-  return true;
+export function isVideoElement($element) {
+  return isMediaElement($element, 'video');
+}
+export function isAudioElement($element) {
+  return isMediaElement($element, 'audio');
 }
-export function findVideoPlayerIframe(elem) {
+export function findMediaPlayerIframe(elem) {
   var _elem$firstElementChi;
 
   if (elem.tagName === 'IFRAME') {