@instructure/canvas-rce 7.3.1 → 8.1.0

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

@@ -15,32 +15,37 @@
  * 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, useEffect } from 'react';
-import { arrayOf, bool, func, number, shape, string } from 'prop-types';
-import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
+
+import { ClosedCaptionPanel, ClosedCaptionPanelV2, CONSTANTS, trackPendoEvent } 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 { FormFieldGroup } from '@instructure/ui-form-field';
 import { Heading } from '@instructure/ui-heading';
+import { IconExternalLinkLine } from '@instructure/ui-icons';
+import { Link } from '@instructure/ui-link';
 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 { Spinner } from '@instructure/ui-spinner';
+import { Text } from '@instructure/ui-text';
+import { TextInput } from '@instructure/ui-text-input';
 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, studioPlayerSizes, labelForImageSize, scaleVideoSize, scaleToSize, MIN_WIDTH_STUDIO_PLAYER, MIN_HEIGHT_STUDIO_PLAYER } from '../../instructure_image/ImageEmbedOptions';
+import { View } from '@instructure/ui-view';
+import { arrayOf, bool, func, number, shape, string } from 'prop-types';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Bridge from '../../../../bridge';
-import RceApiSource from '../../../../rcs/api';
 import formatMessage from '../../../../format-message';
-import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
-import { getTrayHeight } from '../../shared/trayUtils';
+import RCEGlobals from '../../../../rce/RCEGlobals';
+import RceApiSource, { originFromHost } from '../../../../rcs/api';
 import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
+import { CUSTOM, labelForImageSize, MIN_HEIGHT_STUDIO_PLAYER, MIN_PERCENTAGE, MIN_WIDTH_STUDIO_PLAYER, scaleVideoSize, studioPlayerSizes } from '../../instructure_image/ImageEmbedOptions';
+import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInput';
+import { StoreProvider } from '../../shared/StoreContext';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
-import RCEGlobals from '../../../../rce/RCEGlobals';
+import { getTrayHeight } from '../../shared/trayUtils';
+import { getPlayerLayoutSizes, labelForPlayerLayoutSize, playerLayoutDimensions, SMALL, scalePlayerLayoutForHeight, scalePlayerLayoutForWidth } from '../playerLayoutOptions';
+import { mapStudioEmbedOptions, mapViewerRestrictions, readViewerRestrictions } from '../utils';
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 export default function VideoOptionsTray({
   videoOptions,
@@ -53,9 +58,13 @@ export default function VideoOptionsTray({
   onExited = null,
   id = 'video-options-tray',
   studioOptions = null,
-  forBlockEditorUse = false
+  forBlockEditorUse = false,
+  onStudioEmbedOptionChanged = () => {},
+  onCaptionsModified = null,
+  isLoading = false
 }) {
-  const isConsolidatedMediaPlayer = RCEGlobals.getFeatures()?.consolidated_media_player;
+  const isEmbedImprovements = RCEGlobals.getFeatures()?.rce_studio_embed_improvements;
+  const isAsrCaptioningImprovements = RCEGlobals.getFeatures()?.rce_asr_captioning_improvements;
   const {
     naturalHeight,
     naturalWidth
@@ -64,25 +73,56 @@ export default function VideoOptionsTray({
   const currentWidth = videoOptions.appliedWidth || naturalWidth;
   const [titleText, setTitleText] = useState(videoOptions.titleText);
   const [displayAs, setDisplayAs] = useState('embed');
-  const [videoSize, setVideoSize] = useState(videoOptions.videoSize);
+  const [videoSize, setVideoSize] = useState(() => {
+    if (isAsrCaptioningImprovements) {
+      const match = Object.entries(playerLayoutDimensions).find(([, dims]) => dims.width === videoOptions.appliedWidth);
+      if (match) return match[0];
+    }
+    return videoOptions.videoSize;
+  });
   const [videoHeight, setVideoHeight] = useState(currentHeight);
   const [videoWidth, setVideoWidth] = useState(currentWidth);
   const [subtitles, setSubtitles] = useState(videoOptions.tracks || []);
-  const [minWidth] = useState(isConsolidatedMediaPlayer ? MIN_WIDTH_STUDIO_PLAYER : MIN_WIDTH_VIDEO);
-  const [minHeight] = useState(isConsolidatedMediaPlayer ? MIN_HEIGHT_STUDIO_PLAYER : Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
+  const {
+    width: minWidth,
+    height: minHeight
+  } = isAsrCaptioningImprovements ? playerLayoutDimensions[SMALL] : {
+    width: MIN_WIDTH_STUDIO_PLAYER,
+    height: MIN_HEIGHT_STUDIO_PLAYER
+  };
   const [minPercentage] = useState(MIN_PERCENTAGE);
   const [editLocked, setEditLocked] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [viewerRestrictions, setViewerRestrictions] = useState(() => readViewerRestrictions(videoOptions.viewerRestrictions));
+  const [studioEmbedOptions, setStudioEmbedOptions] = useState(() => mapStudioEmbedOptions(studioOptions?.embedOptions));
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const fetchedFromIframeRef = useRef(false);
+  const titleInputRef = useRef(null);
   const isStudio = !!studioOptions;
+  const applyDescribedBy = useCallback(playerLayoutInput => {
+    if (isAsrCaptioningImprovements && !isStudio && 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, isStudio, id]);
   const showDisplayOptions = (!isStudio || studioOptions.convertibleToLink) && !forBlockEditorUse;
   const showSizeControls = (!isStudio || studioOptions.resizable) && !forBlockEditorUse;
   const dimensionsState = useDimensionsState(videoOptions, {
     minHeight,
     minWidth,
     minPercentage
-  });
+  }, isAsrCaptioningImprovements ? {
+    scaleFns: {
+      width: scalePlayerLayoutForWidth,
+      height: scalePlayerLayoutForHeight
+    }
+  } : {});
   const api = new RceApiSource(trayProps);
-  const videoSizeOptions = isConsolidatedMediaPlayer ? studioPlayerSizes : videoSizes;
+  const videoSizeOptions = isAsrCaptioningImprovements ? getPlayerLayoutSizes() : studioPlayerSizes;
   useEffect(() => {
     if (videoOptions.attachmentId) {
       api.getFile(videoOptions.attachmentId, {
@@ -96,8 +136,20 @@ export default function VideoOptionsTray({
     }
   }, [videoOptions.attachmentId]);
   useEffect(() => {
-    if (subtitles.length === 0) requestSubtitlesFromIframe(setSubtitles);
-  }, []);
+    if (!isLoading && subtitles.length === 0 && !fetchedFromIframeRef.current) {
+      // only request subtitle data after mount
+      fetchedFromIframeRef.current = true;
+      requestSubtitlesFromIframe(setSubtitles);
+    }
+  }, [isLoading, subtitles.length, requestSubtitlesFromIframe]);
+  useEffect(() => {
+    if (open && isAsrCaptioningImprovements) {
+      trackPendoEvent('canvas_media_options_opened', {
+        entry_point: 'quick_menu',
+        media_kind: 'video'
+      });
+    }
+  }, [open, isAsrCaptioningImprovements]);
   function handleTitleTextChange(event) {
     setTitleText(event.target.value);
   }
@@ -110,11 +162,18 @@ export default function VideoOptionsTray({
     if (selectedOption.value === CUSTOM) {
       setVideoHeight(currentHeight);
       setVideoWidth(currentWidth);
+    } else if (isAsrCaptioningImprovements) {
+      const {
+        width,
+        height
+      } = playerLayoutDimensions[selectedOption.value];
+      setVideoHeight(height);
+      setVideoWidth(width);
     } else {
       const {
         height,
         width
-      } = isConsolidatedMediaPlayer ? scaleVideoSize(selectedOption.value, naturalWidth, naturalHeight) : scaleToSize(selectedOption.value, naturalWidth, naturalHeight);
+      } = scaleVideoSize(selectedOption.value, naturalWidth, naturalHeight);
       setVideoHeight(height);
       setVideoWidth(width);
     }
@@ -122,14 +181,33 @@ export default function VideoOptionsTray({
   function handleUpdateSubtitles(new_subtitles) {
     setSubtitles(new_subtitles);
   }
+  const handleEmbedOptionChange = useCallback(options => {
+    const mappedOptions = options.reduce((a, c) => {
+      a[c] = options.includes(c);
+      return a;
+    }, {});
+    setStudioEmbedOptions(options);
+    onStudioEmbedOptionChanged(mappedOptions);
+  }, [onStudioEmbedOptionChanged]);
   function handleSave(event, updateMediaObject) {
     event.preventDefault();
+    if (titleText.trim() === '') {
+      if (titleInputRef.current) {
+        titleInputRef.current.focus();
+      }
+      return;
+    }
     let appliedHeight = videoHeight;
     let appliedWidth = videoWidth;
     if (videoSize === CUSTOM) {
       appliedHeight = dimensionsState.height;
       appliedWidth = dimensionsState.width;
     }
+    if (isAsrCaptioningImprovements) {
+      trackPendoEvent('canvas_player_layout_selected', {
+        layout_type: videoSize.replace('-', '_')
+      });
+    }
     onSave({
       media_object_id: videoOptions.id,
       attachment_id: videoOptions.attachmentId,
@@ -139,31 +217,15 @@ export default function VideoOptionsTray({
       displayAs,
       subtitles,
       updateMediaObject,
-      editLocked
+      editLocked,
+      viewerRestrictions: mapViewerRestrictions(viewerRestrictions)
     });
   }
-  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 handleDirtyCheck = isDirty => {
+    setHasUnsavedChanges(isDirty);
+  };
   const messagesForSize = [];
-  if (videoSize !== CUSTOM) {
+  if (videoSize !== CUSTOM && !isAsrCaptioningImprovements) {
     messagesForSize.push({
       text: formatMessage('{width} x {height}px', {
         height: videoHeight,
@@ -172,7 +234,7 @@ export default function VideoOptionsTray({
       type: 'hint'
     });
   }
-  const saveDisabled = displayAs === 'embed' && (titleText === '' || videoSize === CUSTOM && !dimensionsState.isValid);
+  const saveDisabled = displayAs === 'embed' && videoSize === CUSTOM && !dimensionsState.isValid;
   return /*#__PURE__*/React.createElement(StoreProvider, trayProps, contentProps => /*#__PURE__*/React.createElement(Tray, {
     key: "video-options-tray",
     "data-mce-component": true,
@@ -204,7 +266,7 @@ export default function VideoOptionsTray({
     color: "primary",
     onClick: onRequestClose,
     screenReaderLabel: formatMessage('Close')
-  })))), loading && videoOptions.attachmentId ? /*#__PURE__*/React.createElement(Flex.Item, {
+  })))), loading && videoOptions.attachmentId || isLoading ? /*#__PURE__*/React.createElement(Flex.Item, {
     textAlign: "center",
     margin: "xx-large",
     padding: "xx-large"
@@ -233,15 +295,18 @@ export default function VideoOptionsTray({
     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,
+  }, titleText)) : /*#__PURE__*/React.createElement(TextInput, {
+    interaction: displayAs === 'link' ? 'disabled' : 'enabled',
+    renderLabel: formatMessage('Title'),
     onChange: handleTitleTextChange,
-    placeholder: formatMessage('(Describe the video)'),
-    resize: "vertical",
-    value: titleText
+    placeholder: formatMessage('Enter a media title'),
+    value: titleText,
+    inputRef: el => titleInputRef.current = el,
+    messages: titleText?.trim() === '' ? [{
+      text: formatMessage("Title can't be blank"),
+      type: 'newError'
+    }] : [],
+    isRequired: true
   })), showDisplayOptions && /*#__PURE__*/React.createElement(Flex.Item, {
     margin: "small none none none",
     padding: "small"
@@ -262,10 +327,11 @@ export default function VideoOptionsTray({
     as: "div",
     padding: "small small xx-small small"
   }, /*#__PURE__*/React.createElement(SimpleSelect, {
+    inputRef: applyDescribedBy,
     id: `${id}-size`,
     mountNode: instuiPopupMountNodeFn,
     disabled: displayAs !== 'embed',
-    renderLabel: formatMessage('Size'),
+    renderLabel: isAsrCaptioningImprovements ? formatMessage('Player layout') : formatMessage('Size'),
     messages: messagesForSize,
     assistiveText: formatMessage('Use arrow keys to navigate options.'),
     onChange: handleVideoSizeChange,
@@ -274,7 +340,13 @@ export default function VideoOptionsTray({
     id: `${id}-size-${size}`,
     key: size,
     value: size
-  }, labelForImageSize(size))))), videoSize === CUSTOM && /*#__PURE__*/React.createElement(View, {
+  }, isAsrCaptioningImprovements ? labelForPlayerLayoutSize(size) : labelForImageSize(size)))), isAsrCaptioningImprovements && !isStudio && /*#__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.')))), videoSize === CUSTOM && /*#__PURE__*/React.createElement(View, {
     as: "div",
     padding: "xx-small small"
   }, /*#__PURE__*/React.createElement(DimensionsInput, {
@@ -284,11 +356,33 @@ export default function VideoOptionsTray({
     minWidth: minWidth,
     minPercentage: minPercentage,
     hidePercentage: true
+  }))), isAsrCaptioningImprovements && !isStudio && /*#__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",
+    messages: [{
+      text: formatMessage('Transcript panel is available at widths above 720px.'),
+      type: 'screenreader-only'
+    }]
   }))), !isStudio && !editLocked && /*#__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"
+    }, isAsrCaptioningImprovements ? formatMessage('Caption Manager') : formatMessage('Closed Captions/Subtitles'))
+  }, !isAsrCaptioningImprovements && /*#__PURE__*/React.createElement(ClosedCaptionPanel, {
+    key: subtitles.reduce((acc, track) => acc + track.locale, ''),
     subtitles: subtitles.map(st => ({
       locale: st.locale,
       inherited: st.inherited,
@@ -301,16 +395,91 @@ export default function VideoOptionsTray({
     updateSubtitles: handleUpdateSubtitles,
     liveRegion: getLiveRegion,
     mountNode: instuiPopupMountNodeFn
-  }))))), /*#__PURE__*/React.createElement(Flex.Item, {
+  }), isAsrCaptioningImprovements && /*#__PURE__*/React.createElement(ClosedCaptionPanelV2, {
+    subtitles: subtitles.map(st => ({
+      ...st,
+      file: {
+        name: st.language || st.locale
+      },
+      asr: Boolean(st.asr)
+    })),
+    uploadMediaTranslations: Bridge.uploadMediaTranslations,
+    userLocale: Bridge.userLocale,
+    onUpdateSubtitles: handleUpdateSubtitles,
+    liveRegion: getLiveRegion,
+    mountNode: instuiPopupMountNodeFn,
+    uploadConfig: {
+      mediaObjectId: videoOptions.id,
+      attachmentId: videoOptions.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
+  }))), isStudio && isEmbedImprovements && studioOptions.isImprovedEmbed ? /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/React.createElement(CheckboxGroup, {
+    name: "studio-embed-options",
+    onChange: handleEmbedOptionChange,
+    value: studioEmbedOptions,
+    description: /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h3"
+    }, formatMessage('Viewer Restrictions'))
+  }, /*#__PURE__*/React.createElement(Text, {
+    variant: "contentSmall"
+  }, formatMessage('Changes will apply after you save this page.')), /*#__PURE__*/React.createElement(Checkbox, {
+    label: formatMessage('Lock speed at 1x'),
+    value: "lockSpeed",
+    variant: "toggle"
+  }), !studioOptions?.embedOptions?.isExternal ? /*#__PURE__*/React.createElement(Checkbox, {
+    label: formatMessage('Allow media download'),
+    value: "enableMediaDownload",
+    variant: "toggle"
+  }) : null, /*#__PURE__*/React.createElement(Checkbox, {
+    label: formatMessage('Allow transcript download'),
+    value: "enableTranscriptDownload",
+    variant: "toggle"
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    label: formatMessage('Show rolling transcript'),
+    value: "showRollingTranscript",
+    variant: "toggle"
+  }))) : null, !isStudio && 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, {
-    disabled: saveDisabled,
+    interaction: saveDisabled ? 'disabled' : 'enabled',
     onClick: event => handleSave(event, contentProps.updateMediaObject),
     color: "primary"
-  }, formatMessage('Done'))))))));
+  }, formatMessage('Done')))))))));
 }
 VideoOptionsTray.propTypes = {
   videoOptions: shape({
@@ -322,7 +491,10 @@ VideoOptionsTray.propTypes = {
     tracks: arrayOf(shape({
       locale: string.isRequired,
       inherited: bool
-    }))
+    })),
+    viewerRestrictions: shape({
+      show_rolling_transcript: bool
+    })
   }).isRequired,
   onEntered: func,
   onExited: func,
@@ -335,5 +507,8 @@ VideoOptionsTray.propTypes = {
   }),
   id: string,
   studioOptions: parsedStudioOptionsPropType,
-  requestSubtitlesFromIframe: func
+  requestSubtitlesFromIframe: func,
+  onStudioEmbedOptionChanged: func,
+  onCaptionsModified: func,
+  isLoading: bool
 };

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

@@ -16,14 +16,15 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { trackPendoEvent } from '@instructure/canvas-media';
 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 { instuiPopupMountNodeFn } from '../../../util/fullscreenHelpers';
 import RCEGlobals from '../../RCEGlobals';
+import { StoreProvider } from '../shared/StoreContext';
 export const handleUpload = (error, uploadData, onUploadComplete, uploadBookmark) => {
   let err_msg = error && Bridge.uploadMediaTranslations.UploadMediaStrings.UPLOADING_ERROR;
   if (error?.name === 'FileSizeError') {
@@ -84,15 +85,29 @@ export default function (ed, document) {
       open: true,
       liveRegion: () => document.getElementById('flash_screenreader_holder'),
       onStartUpload: fileProps => handleStartUpload(fileProps),
-      onUploadComplete: (err, data) => handleUpload(err, data, contentProps.mediaUploadComplete, uploadBookmark),
+      onUploadComplete: (err, data) => {
+        if (!err && data) {
+          if (RCEGlobals.getFeatures()?.rce_asr_captioning_improvements) {
+            var _data$uploadedFile$ty;
+            const fileType = (_data$uploadedFile$ty = data?.uploadedFile?.type) !== null && _data$uploadedFile$ty !== void 0 ? _data$uploadedFile$ty : '';
+            trackPendoEvent('canvas_native_media_embedded', {
+              insertion_method: 'insert_menu',
+              media_id: data?.mediaObject?.media_object?.media_id,
+              media_kind: fileType.startsWith('audio/') ? 'audio' : fileType.startsWith('video/') ? 'video' : undefined,
+              resourceType: ed.settings.canvas_rce_user_context.type,
+              resourceId: ed.settings.canvas_rce_user_context.id
+            });
+          }
+        }
+        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,
-      useStudioPlayer: RCEGlobals.getFeatures()?.consolidated_media_player
+      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id
     })), container);
   });
 }

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

@@ -43,7 +43,7 @@ const uploadMediaTranslations = {
     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'),
+    ADD_NEW_CAPTION_OR_SUBTITLE: formatMessage('Add another closed caption or subtitle'),
     ADDED_CAPTION: 'Captions for {lang} added',
     DELETED_CAPTION: 'Deleted captions for {lang}',
     PROGRESS_LABEL: formatMessage('Uploading'),

package/es/rce/plugins/instructure_record/playerLayoutOptions.d.ts

@@ -0,0 +1,25 @@
+export declare const SMALL = "small";
+export declare const MEDIUM = "medium";
+export declare const LARGE = "large";
+export declare const EXTRA_LARGE = "extra-large";
+export declare const CUSTOM = "custom";
+export declare const PLAYER_CONTROLS_HEIGHT = 48;
+export declare const TRANSCRIPT_SIDEBAR_WIDTH = 300;
+export declare const TRANSCRIPT_SIDEBAR_THRESHOLD = 720;
+export declare const playerLayoutDimensions: Record<string, {
+    width: number;
+    height: number;
+}>;
+declare const playerLayoutSizes: readonly ["small", "medium", "large", "extra-large", "custom"];
+export type PlayerLayoutSize = (typeof playerLayoutSizes)[number];
+export declare function getPlayerLayoutSizes(): readonly PlayerLayoutSize[];
+export declare function labelForPlayerLayoutSize(size: string): string;
+export declare function scalePlayerLayoutForWidth(_naturalWidth: number, _naturalHeight: number, targetWidth: number | null): {
+    width: number | null;
+    height: number | null;
+};
+export declare function scalePlayerLayoutForHeight(_naturalWidth: number, _naturalHeight: number, targetHeight: number | null): {
+    width: number | null;
+    height: number | null;
+};
+export {};

package/es/rce/plugins/instructure_record/playerLayoutOptions.js

@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2026 - 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 formatMessage from '../../../format-message';
+export const SMALL = 'small';
+export const MEDIUM = 'medium';
+export const LARGE = 'large';
+export const EXTRA_LARGE = 'extra-large';
+export const CUSTOM = 'custom';
+export const PLAYER_CONTROLS_HEIGHT = 48;
+export const TRANSCRIPT_SIDEBAR_WIDTH = 300;
+export const TRANSCRIPT_SIDEBAR_THRESHOLD = 720;
+export const playerLayoutDimensions = {
+  [SMALL]: {
+    width: 400,
+    height: 273
+  },
+  [MEDIUM]: {
+    width: 480,
+    height: 318
+  },
+  [LARGE]: {
+    width: 700,
+    height: 442
+  },
+  [EXTRA_LARGE]: {
+    width: 850,
+    height: 357
+  }
+};
+const playerLayoutSizes = [SMALL, MEDIUM, LARGE, EXTRA_LARGE, CUSTOM];
+export function getPlayerLayoutSizes() {
+  return playerLayoutSizes;
+}
+export function labelForPlayerLayoutSize(size) {
+  const dims = playerLayoutDimensions[size];
+  switch (size) {
+    case SMALL:
+      return formatMessage('Small ({width} x {height}px)', dims);
+    case MEDIUM:
+      return formatMessage('Medium ({width} x {height}px)', dims);
+    case LARGE:
+      return formatMessage('Large ({width} x {height}px)', dims);
+    case EXTRA_LARGE:
+      return formatMessage('Extra Large ({width} x {height}px)', dims);
+    default:
+      return formatMessage('Custom');
+  }
+}
+
+// Scale functions for the Custom player layout option.
+// Signature matches scaleForWidth/scaleForHeight in DimensionUtils.js
+// (naturalWidth/naturalHeight are unused here — the formula is fixed).
+export function scalePlayerLayoutForWidth(_naturalWidth, _naturalHeight, targetWidth) {
+  if (targetWidth == null) return {
+    width: null,
+    height: null
+  };
+  const videoWidth = targetWidth > TRANSCRIPT_SIDEBAR_THRESHOLD ? targetWidth - TRANSCRIPT_SIDEBAR_WIDTH : targetWidth;
+  return {
+    width: targetWidth,
+    height: Math.round(videoWidth * (9 / 16) + PLAYER_CONTROLS_HEIGHT)
+  };
+}
+export function scalePlayerLayoutForHeight(_naturalWidth, _naturalHeight, targetHeight) {
+  if (targetHeight == null) return {
+    width: null,
+    height: null
+  };
+  const videoWidth = (targetHeight - PLAYER_CONTROLS_HEIGHT) * (16 / 9);
+  const totalWidth = videoWidth > TRANSCRIPT_SIDEBAR_THRESHOLD ? Math.round(videoWidth + TRANSCRIPT_SIDEBAR_WIDTH) : Math.round(videoWidth);
+  return {
+    width: totalWidth,
+    height: targetHeight
+  };
+}

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

@@ -131,14 +131,12 @@ tinymce.PluginManager.add('instructure_record', function (ed) {
    * 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
+    text: formatMessage('Video Options')
   });
   ed.ui.registry.addContextToolbar('instructure-video-toolbar', {
     items: 'instructure-video-options',
@@ -150,8 +148,7 @@ tinymce.PluginManager.add('instructure_record', function (ed) {
     onAction() {
       audioTrayController.showTrayForEditor(ed);
     },
-    text: formatMessage('Audio Options'),
-    tooltip: formatMessage('Show audio options')
+    text: formatMessage('Audio Options')
   });
   ed.ui.registry.addContextToolbar('instructure-audio-toolbar', {
     items: 'instructure-audio-options',