@instructure/canvas-rce 7.3.1 → 8.0.0

package/es/rce/plugins/instructure_record/AudioOptionsTray/TrayController.d.ts

@@ -4,14 +4,23 @@ export default class TrayController {
     _shouldOpen: boolean;
     _editor: any;
     _audioContainer: Element | null;
+    _captionsModified: boolean;
+    requestSubtitlesFromIframe(cb: any): void;
     get container(): HTMLElement;
     get isOpen(): boolean;
     showTrayForEditor(editor: any): void;
+    _isPlayerReady: boolean | undefined;
     hideTrayForEditor(editor: any): void;
+    _listenForPlayerIframeToLoad(currentMediaId: any): void;
+    _iframeLoadingListener: AbortController | undefined;
+    _reloadAudioPlayer(): void;
     _dismissTray(): void;
     _resetController(): Node;
+    _resizeContainer({ height, width }: {
+        height: any;
+        width: any;
+    }): void;
     _applyAudioOptions(audioOptions: any): any;
-    requestSubtitlesFromIframe(cb: any): void;
     _subtitleListener: AbortController | undefined;
-    _renderTray(trayProps: any): void;
+    _renderTray(): void;
 }

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

@@ -19,6 +19,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import bridge from '../../../../bridge';
+import { showFlashAlert } from '../../../../common/FlashAlert';
+import formatMessage from '../../../../format-message';
+import RCEGlobals from '../../../RCEGlobals';
 import { asAudioElement } from '../../shared/ContentSelection';
 import { findMediaPlayerIframe } from '../../shared/iframeUtils';
 import AudioOptionsTray from '.';
@@ -29,6 +32,8 @@ export default class TrayController {
     this._shouldOpen = false;
     this._editor = null;
     this._audioContainer = null;
+    this._captionsModified = false;
+    this.requestSubtitlesFromIframe = this.requestSubtitlesFromIframe.bind(this);
   }
   get container() {
     let _container = document.getElementById(CONTAINER_ID);
@@ -46,19 +51,57 @@ export default class TrayController {
     this._shouldOpen = true;
     this._editor = editor;
     this._audioContainer = findMediaPlayerIframe(editor.selection.getNode());
+    this._captionsModified = false;
+    this._isPlayerReady = false;
     if (bridge.focusedEditor) {
       // Dismiss any content trays that may already be open
       bridge.hideTrays();
     }
-    const trayProps = bridge.trayProps.get(editor);
-    this._renderTray(trayProps);
+    this._renderTray();
+    const audioOptions = asAudioElement(this._audioContainer);
+    // Clean broadcast listeners for any existing trays which are not shown (if not cleaned automatically)
+    this._iframeLoadingListener?.abort();
+    this._listenForPlayerIframeToLoad(audioOptions.id);
   }
   hideTrayForEditor(editor) {
     if (this._editor === editor) {
       this._dismissTray();
     }
   }
+  _listenForPlayerIframeToLoad(currentMediaId) {
+    if (!bridge.canvasOrigin) return;
+    this._iframeLoadingListener = new AbortController();
+
+    // Wait for player iframe to be loaded
+    window.addEventListener('message', event => {
+      // If tray was opened before player iframe was ready it will catch ready event.
+      // If not it will request it later and catch it here anyway.
+      if (event.data?.subject === 'media_player.iframe_ready' && event.data?.mediaId === currentMediaId) {
+        this._iframeLoadingListener.abort();
+        this._isPlayerReady = true;
+        this._renderTray();
+      }
+    }, {
+      signal: this._iframeLoadingListener.signal
+    });
+
+    // If tray was opened after player was loaded we need to request iframe_ready state
+    this._audioContainer?.contentWindow?.postMessage({
+      subject: 'media_player.get_ready_state'
+    }, bridge.canvasOrigin);
+  }
+  _reloadAudioPlayer() {
+    if (this._audioContainer?.contentWindow?.location) {
+      this._audioContainer.contentWindow.location.reload();
+    }
+  }
   _dismissTray() {
+    const isCaptionImprovements = RCEGlobals.getFeatures()?.rce_asr_captioning_improvements || false;
+
+    // Reload if captions were modified AND feature flag enabled
+    if (isCaptionImprovements && this._captionsModified && this._audioContainer) {
+      this._reloadAudioPlayer();
+    }
     if (this._audioContainer) {
       this._editor.selection.select(this._audioContainer);
     }
@@ -66,24 +109,50 @@ export default class TrayController {
   }
   _resetController() {
     this._shouldOpen = false;
-    const trayProps = bridge.trayProps.get(this._editor);
-    this._renderTray(trayProps);
+    this._renderTray();
     this._editor = null;
     this._audioContainer = null;
+    this._iframeLoadingListener?.abort();
     const elem = document.getElementById(CONTAINER_ID);
     return elem.parentNode.removeChild(elem);
   }
+  _resizeContainer({
+    height,
+    width
+  }) {
+    const styles = {
+      height: `${height}px`,
+      width: `${width}px`
+    };
+    this._editor.dom.setStyles(this._audioContainer.parentElement, styles);
+    this._editor.dom.setStyles(this._audioContainer, styles);
+
+    // tell tinymce so the context toolbar resets
+    this._editor.fire('ObjectResized', {
+      target: this._audioContainer,
+      width: width,
+      height: height
+    });
+  }
   _applyAudioOptions(audioOptions) {
+    this._resizeContainer({
+      width: audioOptions.appliedWidth,
+      height: audioOptions.appliedHeight
+    });
     const hasAttachmentId = audioOptions.attachment_id;
     if (!hasAttachmentId && (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined')) {
       return;
     }
     const container = this._audioContainer;
-    return audioOptions.updateMediaObject({
+    const isCaptionImprovements = RCEGlobals.getFeatures()?.rce_asr_captioning_improvements || false;
+    const data = {
       media_object_id: audioOptions.media_object_id,
+      attachment_id: audioOptions.attachment_id,
       subtitles: audioOptions.subtitles,
-      attachment_id: audioOptions.attachment_id
-    }).then(() => container?.contentWindow.location.reload()).catch(ex => {
+      skipCaptionUpdate: isCaptionImprovements,
+      viewerRestrictions: audioOptions.viewerRestrictions
+    };
+    return audioOptions.updateMediaObject(data).then(() => container?.contentWindow.location.reload()).catch(ex => {
       console.error('Failed updating audio captions', ex);
     });
   }
@@ -101,9 +170,10 @@ export default class TrayController {
       subject: 'media_tracks_request'
     }, bridge.canvasOrigin);
   }
-  _renderTray(trayProps) {
+  _renderTray() {
     const audioOptions = asAudioElement(this._audioContainer) || {};
     const element = /*#__PURE__*/React.createElement(AudioOptionsTray, {
+      key: audioOptions.id,
       audioOptions: audioOptions,
       onEntered: () => {
         this._isOpen = true;
@@ -112,15 +182,27 @@ export default class TrayController {
         bridge.focusActiveEditor(false);
         this._isOpen = false;
         this._subtitleListener?.abort();
+        this._iframeLoadingListener?.abort();
+        this._isPlayerReady = false;
       },
       onSave: options => {
         this._applyAudioOptions(options);
         this._dismissTray();
+        setTimeout(() => {
+          showFlashAlert({
+            message: formatMessage('Media options saved.'),
+            type: 'success'
+          });
+        }, 0);
       },
       onDismiss: () => this._dismissTray(),
+      onCaptionsModified: () => {
+        this._captionsModified = true;
+      },
       open: this._shouldOpen,
-      trayProps: trayProps,
-      requestSubtitlesFromIframe: cb => this.requestSubtitlesFromIframe(cb)
+      trayProps: bridge.trayProps.get(this._editor),
+      requestSubtitlesFromIframe: this.requestSubtitlesFromIframe,
+      isLoading: !this._isPlayerReady
     });
     ReactDOM.render(element, this.container);
   }

package/es/rce/plugins/instructure_record/AudioOptionsTray/index.d.ts

@@ -1,4 +1,4 @@
-declare function AudioOptionsTray({ open, onEntered, onExited, onDismiss, onSave, trayProps, audioOptions, requestSubtitlesFromIframe, }: {
+declare function AudioOptionsTray({ open, onEntered, onExited, onDismiss, onSave, trayProps, audioOptions, requestSubtitlesFromIframe, onCaptionsModified, isLoading, id, }: {
     open: any;
     onEntered: any;
     onExited: any;
@@ -7,6 +7,9 @@ declare function AudioOptionsTray({ open, onEntered, onExited, onDismiss, onSave
     trayProps: any;
     audioOptions: any;
     requestSubtitlesFromIframe: any;
+    onCaptionsModified: any;
+    isLoading?: boolean | undefined;
+    id?: string | undefined;
 }): React.JSX.Element;
 declare namespace AudioOptionsTray {
     namespace propTypes {
@@ -26,7 +29,13 @@ declare namespace AudioOptionsTray {
             tracks: import("prop-types").Requireable<(import("prop-types").InferProps<{
                 locale: import("prop-types").Validator<string>;
             }> | null | undefined)[]>;
+            viewerRestrictions: import("prop-types").Requireable<import("prop-types").InferProps<{
+                show_rolling_transcript: import("prop-types").Requireable<boolean>;
+            }>>;
         }>>>;
+        export { func as onCaptionsModified };
+        export { bool as isLoading };
+        export { string as id };
     }
     namespace defaultProps {
         let onEntered: null;
@@ -34,8 +43,11 @@ declare namespace AudioOptionsTray {
         let onDismiss: null;
         let onSave: null;
         function requestSubtitlesFromIframe(): void;
+        let onCaptionsModified: null;
     }
 }
 export default AudioOptionsTray;
 import React from 'react';
 import { func } from 'prop-types';
+import { bool } from 'prop-types';
+import { string } from 'prop-types';

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

@@ -16,20 +16,36 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { arrayOf, bool, func, shape, string } from 'prop-types';
+import { ClosedCaptionPanel, ClosedCaptionPanelV2, CONSTANTS, trackPendoEvent, AUDIO_PLAYER_SIZE } from '@instructure/canvas-media';
+import { Button, CloseButton } from '@instructure/ui-buttons';
+import { Checkbox, CheckboxGroup } from '@instructure/ui-checkbox';
 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 { Heading } from '@instructure/ui-heading';
+import { IconExternalLinkLine } from '@instructure/ui-icons';
+import { Link } from '@instructure/ui-link';
+import { Spinner } from '@instructure/ui-spinner';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Tray } from '@instructure/ui-tray';
+import { View } from '@instructure/ui-view';
+import { SimpleSelect } from '@instructure/ui-simple-select';
+import { Text } from '@instructure/ui-text';
 import Bridge from '../../../../bridge';
 import formatMessage from '../../../../format-message';
-import { getTrayHeight } from '../../shared/trayUtils';
+import RCEGlobals from '../../../../rce/RCEGlobals';
+import RceApiSource, { originFromHost } from '../../../../rcs/api';
 import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
-import { Heading } from '@instructure/ui-heading';
+import { StoreProvider } from '../../shared/StoreContext';
+import { getTrayHeight } from '../../shared/trayUtils';
+import { mapViewerRestrictions, readViewerRestrictions } from '../utils';
+import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
+import { getPlayerLayoutSizes, labelForPlayerLayoutSize, playerLayoutDimensions, scalePlayerLayoutForHeight, scalePlayerLayoutForWidth } from '../playerLayoutOptions';
+import { CUSTOM, MIN_PERCENTAGE } from '../../instructure_image/ImageEmbedOptions';
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
+const MIN_WIDTH = AUDIO_PLAYER_SIZE.width;
+const MIN_HEIGHT = AUDIO_PLAYER_SIZE.height;
 export default function AudioOptionsTray({
   open,
   onEntered,
@@ -38,20 +54,83 @@ export default function AudioOptionsTray({
   onSave,
   trayProps,
   audioOptions,
-  requestSubtitlesFromIframe
+  requestSubtitlesFromIframe,
+  onCaptionsModified,
+  isLoading = false,
+  id = 'audio-options-tray'
 }) {
   const [subtitles, setSubtitles] = useState(audioOptions.tracks || []);
+  const api = new RceApiSource(trayProps);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const fetchedFromIframeRef = useRef(false);
+  const [viewerRestrictions, setViewerRestrictions] = useState(() => readViewerRestrictions(audioOptions.viewerRestrictions));
+  const [sizeKey, setSizeKey] = useState(() => {
+    var _match$;
+    const match = Object.entries(playerLayoutDimensions).find(([, dims]) => dims.width === audioOptions.containerDimensions.width);
+    return (_match$ = match?.[0]) !== null && _match$ !== void 0 ? _match$ : CUSTOM;
+  });
+  const dimensionsState = useDimensionsState({
+    appliedHeight: audioOptions.containerDimensions.height,
+    appliedWidth: audioOptions.containerDimensions.width,
+    usePercentageUnits: false
+  }, {
+    minHeight: MIN_HEIGHT,
+    minWidth: MIN_WIDTH,
+    minPercentage: MIN_PERCENTAGE
+  }, {
+    scaleFns: {
+      width: scalePlayerLayoutForWidth,
+      height: scalePlayerLayoutForHeight
+    }
+  });
   useEffect(() => {
-    if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
-  }, []);
-  const handleSave = (e, contentProps) => {
+    if (!isLoading && subtitles.length === 0 && !fetchedFromIframeRef.current) {
+      // only request subtitle data after mount
+      fetchedFromIframeRef.current = true;
+      requestSubtitlesFromIframe(setSubtitles);
+    }
+  }, [isLoading, subtitles.length, requestSubtitlesFromIframe]);
+  const isAsrCaptioningImprovements = RCEGlobals.getFeatures()?.rce_asr_captioning_improvements;
+  useEffect(() => {
+    if (open && isAsrCaptioningImprovements) {
+      trackPendoEvent('canvas_media_options_opened', {
+        entry_point: 'quick_menu',
+        media_kind: 'audio'
+      });
+    }
+  }, [open, isAsrCaptioningImprovements]);
+  const handleUpdateSubtitles = newSubtitles => {
+    setSubtitles(newSubtitles);
+  };
+  const handleSave = (_e, contentProps) => {
     onSave({
       media_object_id: audioOptions.id,
       subtitles,
       attachment_id: audioOptions.attachmentId,
-      updateMediaObject: contentProps.updateMediaObject
+      updateMediaObject: contentProps.updateMediaObject,
+      viewerRestrictions: mapViewerRestrictions(viewerRestrictions),
+      appliedHeight: sizeKey === CUSTOM ? dimensionsState.height : playerLayoutDimensions[sizeKey].height,
+      appliedWidth: sizeKey === CUSTOM ? dimensionsState.width : playerLayoutDimensions[sizeKey].width
     });
   };
+  const handleDirtyCheck = isDirty => {
+    setHasUnsavedChanges(isDirty);
+  };
+  const handleSizeChange = (_event, selectedOption) => {
+    setSizeKey(selectedOption.value);
+  };
+  const showSizeControls = isAsrCaptioningImprovements;
+  const applyDescribedBy = useCallback(playerLayoutInput => {
+    if (isAsrCaptioningImprovements && playerLayoutInput) {
+      const helperId = `${id}-size-helper-text`;
+      const existing = playerLayoutInput.getAttribute('aria-describedby') || '';
+      const ids = existing.split(' ').filter(Boolean);
+      if (!ids.includes(helperId)) {
+        playerLayoutInput.setAttribute('aria-describedby', [...ids, helperId].join(' '));
+      }
+    }
+  }, [isAsrCaptioningImprovements, id]);
+  const saveDisabled = sizeKey === CUSTOM && !dimensionsState.isValid;
   return /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(Tray, {
     key: "audio-options-tray",
     "data-mce-component": true,
@@ -64,7 +143,8 @@ export default function AudioOptionsTray({
     placement: "end",
     shouldCloseOnDocumentClick: true,
     shouldContainFocus: true,
-    shouldReturnFocus: true
+    shouldReturnFocus: true,
+    size: isAsrCaptioningImprovements ? 'regular' : 'small'
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column",
     height: getTrayHeight()
@@ -83,7 +163,13 @@ export default function AudioOptionsTray({
     color: "primary",
     onClick: onDismiss,
     screenReaderLabel: formatMessage('Close')
-  })))), /*#__PURE__*/React.createElement(Flex.Item, {
+  })))), isLoading ? /*#__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",
@@ -98,30 +184,129 @@ export default function AudioOptionsTray({
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, 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, {
+    inputRef: applyDescribedBy,
+    id: `${id}-size`,
+    mountNode: instuiPopupMountNodeFn,
+    renderLabel: formatMessage('Player layout'),
+    assistiveText: formatMessage('Use arrow keys to navigate options.'),
+    onChange: handleSizeChange,
+    value: sizeKey
+  }, getPlayerLayoutSizes().map(size => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+    id: `${id}-size-${size}`,
+    key: size,
+    value: size
+  }, labelForPlayerLayoutSize(size)))), /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    id: `${id}-size-helper-text`,
+    margin: "xx-small none none none"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small"
+  }, formatMessage('Transcript panel is available at widths above 720px.')))), sizeKey === CUSTOM && /*#__PURE__*/React.createElement(View, {
+    as: "div",
+    padding: "xx-small small"
+  }, /*#__PURE__*/React.createElement(DimensionsInput, {
+    dimensionsState: dimensionsState,
+    minHeight: MIN_HEIGHT,
+    minWidth: MIN_WIDTH,
+    minPercentage: MIN_PERCENTAGE,
+    hidePercentage: true
+  }))), isAsrCaptioningImprovements && /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/React.createElement(CheckboxGroup, {
+    name: "viewer-restrictions",
+    onChange: setViewerRestrictions,
+    defaultValue: viewerRestrictions,
+    description: /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h3"
+    }, formatMessage('Viewer Restrictions'))
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    variant: "toggle",
+    label: formatMessage('Show Rolling Transcript'),
+    value: "show_rolling_transcript"
+  }))), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
-    description: formatMessage('Closed Captions/Subtitles')
-  }, /*#__PURE__*/React.createElement(ClosedCaptionPanel, {
+    description: /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h3"
+    }, formatMessage('Closed Captions/Subtitles'))
+  }, !isAsrCaptioningImprovements ? /*#__PURE__*/React.createElement(ClosedCaptionPanel, {
+    key: subtitles.reduce((acc, track) => acc + track.locale, ''),
     subtitles: subtitles.map(st => ({
       locale: st.locale,
       file: {
         name: st.language || st.locale
-      }
+      },
+      asr: Boolean(st.asr)
     })),
     uploadMediaTranslations: Bridge.uploadMediaTranslations,
     languages: Bridge.languages,
     updateSubtitles: newSubtitles => setSubtitles(newSubtitles),
     liveRegion: getLiveRegion
-  }))))), /*#__PURE__*/React.createElement(Flex.Item, {
+  }) : /*#__PURE__*/React.createElement(ClosedCaptionPanelV2, {
+    subtitles: subtitles.map(st => ({
+      ...st,
+      file: {
+        name: st.language || st.locale
+      },
+      asr: Boolean(st.asr)
+    })),
+    languages: Bridge.languages,
+    userLocale: Bridge.userLocale,
+    onUpdateSubtitles: handleUpdateSubtitles,
+    liveRegion: getLiveRegion,
+    mountNode: instuiPopupMountNodeFn,
+    uploadConfig: {
+      mediaObjectId: audioOptions.id,
+      attachmentId: audioOptions.attachmentId,
+      origin: originFromHost(api.host),
+      headers: api.jwt ? {
+        Authorization: `Bearer ${api.jwt}`
+      } : undefined,
+      maxBytes: CONSTANTS.CC_FILE_MAX_BYTES
+    },
+    onCaptionUploaded: subtitle => {
+      // Update local state so "Done" button knows about it
+      setSubtitles(prev => [...prev.filter(s => s.locale !== subtitle.locale), subtitle]);
+      onCaptionsModified?.();
+    },
+    onCaptionDeleted: locale => {
+      setSubtitles(prev => prev.filter(s => s.locale !== locale));
+      onCaptionsModified?.();
+    },
+    onDirtyStateChanged: handleDirtyCheck
+  }))), isAsrCaptioningImprovements ? /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/React.createElement(Link, {
+    id: "tray-transcript-help-link",
+    variant: "standalone",
+    renderIcon: /*#__PURE__*/React.createElement(IconExternalLinkLine, null),
+    href: "https://productmarketing.instructuremedia.com/embed/32388c5a-580c-40f0-85a2-6b4042ddcccb",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, formatMessage('How to request and edit captions?'))) : null)), /*#__PURE__*/React.createElement(Flex.Item, {
     background: "secondary",
     borderWidth: "small none none none",
     padding: "small medium",
     textAlign: "end"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    renderTip: formatMessage('Unsaved changes will be lost.'),
+    placement: "top",
+    on: ['hover', 'focus'],
+    preventTooltip: !hasUnsavedChanges,
+    mountNode: instuiPopupMountNodeFn
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: e => handleSave(e, contentProps),
-    color: "primary"
-  }, formatMessage('Done'))))))));
+    color: "primary",
+    interaction: saveDisabled ? 'disabled' : 'enabled'
+  }, formatMessage('Done')))))))));
 }
 AudioOptionsTray.propTypes = {
   onEntered: func,
@@ -139,13 +324,20 @@ AudioOptionsTray.propTypes = {
     titleText: string.isRequired,
     tracks: arrayOf(shape({
       locale: string.isRequired
-    }))
-  }).isRequired
+    })),
+    viewerRestrictions: shape({
+      show_rolling_transcript: bool
+    })
+  }).isRequired,
+  onCaptionsModified: func,
+  isLoading: bool,
+  id: string
 };
 AudioOptionsTray.defaultProps = {
   onEntered: null,
   onExited: null,
   onDismiss: null,
   onSave: null,
-  requestSubtitlesFromIframe: () => {}
+  requestSubtitlesFromIframe: () => {},
+  onCaptionsModified: null
 };

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

@@ -16,14 +16,16 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useRef } from 'react';
-import { func, oneOf, shape, string } from 'prop-types';
-import { contentTrayDocumentShape } from '../../shared/fileShape';
-import formatMessage from '../../../../format-message';
+import { trackPendoEvent } from '@instructure/canvas-media';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
+import { func, oneOf, shape, string } from 'prop-types';
+import React, { useRef } from 'react';
+import { LoadingIndicator, LoadingStatus, LoadMoreButton, useIncrementalLoading } from '../../../../common/incremental-loading';
+import formatMessage from '../../../../format-message';
+import RCEGlobals from '../../../RCEGlobals';
 import Link from '../../instructure_documents/components/Link';
-import { LoadMoreButton, LoadingIndicator, LoadingStatus, useIncrementalLoading } from '../../../../common/incremental-loading';
+import { contentTrayDocumentShape } from '../../shared/fileShape';
 const PENDING_MEDIA_ENTRY_ID = 'maybe';
 function hasFiles(media) {
   return media.files.length > 0;
@@ -84,6 +86,15 @@ export default function MediaPanel(props) {
     searchString
   });
   const handleFileClick = file => {
+    if (RCEGlobals.getFeatures()?.rce_asr_captioning_improvements) {
+      const contentType = file.content_type || file['content-type'] || '';
+      trackPendoEvent('canvas_native_media_embedded', {
+        insertion_method: 'select_existing',
+        media_id: file.id,
+        media_kind: contentType.startsWith('audio/') ? 'audio' : 'video',
+        resourceType: props.contextType
+      });
+    }
     props.onMediaEmbed(file);
   };
   return /*#__PURE__*/React.createElement(View, {

package/es/rce/plugins/instructure_record/VideoOptionsTray/TrayController.d.ts

@@ -1,19 +1,13 @@
 export const CONTAINER_ID: "instructure-video-options-tray-container";
-export namespace VIDEO_SIZE_DEFAULT {
+export namespace STUDIO_PLAYER_VIDEO_SIZE_DEFAULT {
     let height: string;
     let width: string;
 }
-export namespace STUDIO_PLAYER_VIDEO_SIZE_DEFAULT {
-    let height_1: string;
-    export { height_1 as height };
+export namespace AUDIO_PLAYER_SIZE {
     let width_1: string;
     export { width_1 as width };
-}
-export namespace AUDIO_PLAYER_SIZE {
-    let width_2: string;
-    export { width_2 as width };
-    let height_2: string;
-    export { height_2 as height };
+    let height_1: string;
+    export { height_1 as height };
 }
 export function videoDefaultSize(): {
     height: string;
@@ -24,14 +18,21 @@ export default class TrayController {
     _isOpen: boolean;
     _shouldOpen: boolean;
     _renderId: number;
+    _skipFocusOnExit: boolean;
+    _captionsModified: boolean;
+    requestSubtitlesFromIframe(cb: any): void;
+    isStudioVideo: boolean;
     get $container(): HTMLElement;
     get isOpen(): boolean;
     showTrayForEditor(editor: any): void;
     $videoContainer: Element | null | undefined;
-    hideTrayForEditor(editor: any): void;
+    _isPlayerReady: boolean | undefined;
+    hideTrayForEditor(editor: any, skipFocusOnExit?: boolean): void;
     _applyVideoOptions(videoOptions: any): void;
+    _listenForPlayerIframeToLoad(currentMediaId: any): void;
+    _iframeLoadingListener: AbortController | undefined;
+    _reloadVideoPlayer(): void;
     _dismissTray(): void;
-    requestSubtitlesFromIframe(cb: any): void;
     _subtitleListener: AbortController | undefined;
-    _renderTray(trayProps: any): void;
+    _renderTray(): void;
 }