@instructure/canvas-rce 5.6.16 → 5.6.17

package/lib/translated/en_GB/modules/rce/plugins/instructure_record/VideoOptionsTray/__tests__/VideoOptionsTray.test.js

@@ -19,6 +19,7 @@ import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import VideoOptionsTray from '..';
 import VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
+import RCEGlobals from '../../../../RCEGlobals';
 jest.useFakeTimers();
 describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
   let props;
@@ -216,6 +217,40 @@ describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
       });
     });
   });
+  describe('Attachment Media Options Tray', () => {
+    it('does not have closed caption controls or title input for locked attachments', () => {
+      RCEGlobals.getConfig = jest.fn().mockReturnValue({
+        lockedAttachments: {
+          10: true
+        }
+      });
+      props.videoOptions = {
+        attachmentId: 10
+      };
+      const {
+        queryByText
+      } = render( /*#__PURE__*/React.createElement(VideoOptionsTray, props));
+      expect(queryByText('Closed Captions/Subtitles')).not.toBeInTheDocument();
+      expect(queryByText('Title')).not.toBeInTheDocument();
+    });
+    it('shows closed caption controls and title input for unlocked attachments', async () => {
+      RCEGlobals.getConfig = jest.fn().mockReturnValue({
+        lockedAttachments: {
+          9: true
+        }
+      });
+      props.videoOptions = {
+        attachmentId: 10
+      };
+      renderComponent();
+      await waitFor(() => {
+        expect(tray.$closedCaptionPanel).toBeInTheDocument();
+      });
+      await waitFor(() => {
+        expect(tray.$titleTextField).toBeInTheDocument();
+      });
+    });
+  });
   describe('Studio Media Options Tray', () => {
     beforeEach(() => {
       props.studioOptions = {

package/lib/translated/en_GB/modules/rce/plugins/instructure_record/VideoOptionsTray/index.js

@@ -38,10 +38,13 @@ import DimensionsInput, { useDimensionsState } from '../../shared/DimensionsInpu
 import { getTrayHeight } from '../../shared/trayUtils';
 import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers';
 import { parsedStudioOptionsPropType } from '../../shared/StudioLtiSupportUtils';
+import RCEGlobals from '../../../RCEGlobals';
 
 const getLiveRegion = () => document.getElementById('flash_screenreader_holder');
 
 export default function VideoOptionsTray(_ref) {
+  var _RCEGlobals$getConfig;
+
   let {
     videoOptions,
     onRequestClose,
@@ -68,7 +71,9 @@ export default function VideoOptionsTray(_ref) {
   const [minWidth] = useState(MIN_WIDTH_VIDEO);
   const [minHeight] = useState(Math.round(videoHeight / videoWidth * MIN_WIDTH_VIDEO));
   const [minPercentage] = useState(MIN_PERCENTAGE);
+  const lock_statuses = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.lockedAttachments;
   const isStudio = !!studioOptions;
+  const isLocked = !!lock_statuses && !!lock_statuses[videoOptions.attachmentId];
   const showDisplayOptions = !isStudio || studioOptions.convertibleToLink;
   const showSizeControls = !isStudio || studioOptions.resizable;
   const dimensionsState = useDimensionsState(videoOptions, {
@@ -118,12 +123,14 @@ export default function VideoOptionsTray(_ref) {
 
     onSave({
       media_object_id: videoOptions.id,
+      attachment_id: videoOptions.attachmentId,
       titleText,
       appliedHeight,
       appliedWidth,
       displayAs,
       subtitles,
-      updateMediaObject
+      updateMediaObject,
+      isLocked
     });
   }
 
@@ -203,7 +210,7 @@ export default function VideoOptionsTray(_ref) {
     shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
+  }, !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, isStudio ? /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
@@ -260,8 +267,9 @@ export default function VideoOptionsTray(_ref) {
     disabled: displayAs !== 'embed',
     minHeight: minHeight,
     minWidth: minWidth,
-    minPercentage: minPercentage
-  }))), !isStudio && /*#__PURE__*/React.createElement(Flex.Item, {
+    minPercentage: minPercentage,
+    hidePercentage: true
+  }))), !isStudio && !isLocked && /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
   }, /*#__PURE__*/React.createElement(FormFieldGroup, {
     description: "Closed Captions/Subtitles"
@@ -291,7 +299,7 @@ export default function VideoOptionsTray(_ref) {
 }
 VideoOptionsTray.propTypes = {
   videoOptions: shape({
-    titleText: string.isRequired,
+    titleText: string,
     appliedHeight: number,
     appliedWidth: number,
     naturalHeight: number.isRequired,

package/lib/translated/en_GB/modules/rce/plugins/instructure_record/clickCallback.js

@@ -22,6 +22,7 @@ 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;
 
@@ -95,7 +96,8 @@ export default function (ed, document) {
         record: true,
         upload: true
       },
-      uploadMediaTranslations: Bridge.uploadMediaTranslations
+      uploadMediaTranslations: Bridge.uploadMediaTranslations,
+      media_links_use_attachment_id: RCEGlobals.getFeatures().media_links_use_attachment_id
     })), container);
   });
 }

package/lib/translated/en_GB/modules/rce/plugins/shared/CanvasContentTray.js

@@ -29,7 +29,6 @@ import Filter, { useFilterSettings } from './Filter';
 import { getTrayHeight } from './trayUtils';
 import { ICON_MAKER_ICONS } from '../instructure_icon_maker/svg/constants';
 import { getLinkContentFromEditor } from './ContentSelection';
-import { getIcon } from './linkUtils';
 import { LinkDisplay } from './LinkDisplay';
 /**
  * Returns the translated tray label
@@ -245,7 +244,6 @@ export default function CanvasContentTray(props) {
   const [link, setLink] = useState(null);
   const [linkText, setLinkText] = useState(null);
   const [placeholderText, setPlaceholderText] = useState(null);
-  const Icon = getIcon(link === null || link === void 0 ? void 0 : link.type);
   const {
     bridge,
     editor,
@@ -290,7 +288,7 @@ export default function CanvasContentTray(props) {
             published
           });
           setLinkText(text);
-          setPlaceholderText(text);
+          setPlaceholderText(fileName);
         } else {
           setIsEditTray(false);
         }
@@ -347,6 +345,9 @@ export default function CanvasContentTray(props) {
   }
 
   function handleCloseTray() {
+    // clear the store's saved search string so the tray doesn't
+    // reopen with a previous tray instance's search results
+    storeProps.onChangeSearchString('');
     setHasOpened(false);
     onTrayClosing && onTrayClosing(false); // tell RCEWrapper we're closed
   }
@@ -355,7 +356,7 @@ export default function CanvasContentTray(props) {
     handleDismissTray();
     const newLink = { ...link,
       forceRename: true,
-      text: linkText || placeholderText
+      text: linkText
     };
     bridge.insertLink(newLink);
   }
@@ -367,6 +368,7 @@ export default function CanvasContentTray(props) {
       padding: "small medium",
       textAlign: "end"
     }, /*#__PURE__*/React.createElement(Button, {
+      "data-testid": "cancel-replace-button",
       onClick: handleDismissTray
     }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
       margin: "0 0 0 x-small",
@@ -470,11 +472,11 @@ export default function CanvasContentTray(props) {
     screenReaderLabel: "Close"
   }))), isEditTray && /*#__PURE__*/React.createElement(LinkDisplay, {
     linkText: linkText,
-    Icon: Icon,
-    placeholderText: placeholderText,
+    placeholderText: (link === null || link === void 0 ? void 0 : link.title) || placeholderText,
     linkFileName: (link === null || link === void 0 ? void 0 : link.title) || '',
     published: (link === null || link === void 0 ? void 0 : link.published) || false,
-    handleTextChange: setLinkText
+    handleTextChange: setLinkText,
+    linkType: link === null || link === void 0 ? void 0 : link.type
   }), /*#__PURE__*/React.createElement(Filter, Object.assign({}, filterSettings, {
     mountNode: props.mountNode,
     userContextType: props.contextType,

package/lib/translated/en_GB/modules/rce/plugins/shared/DimensionsInput/__tests__/DimensionsInput.test.js

@@ -16,7 +16,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import DimensionsInput, { useDimensionsState } from '..';
 import DimensionsInputDriver from './DimensionsInputDriver';
 const W_AND_H_NAN_ERROR = 'Width and height must be numbers';
@@ -43,7 +43,8 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
     props = {
       minWidth: 30,
       minHeight: 60,
-      minPercentage: 10
+      minPercentage: 10,
+      hidePercentage: false
     };
   });
   afterEach(() => {
@@ -1149,4 +1150,49 @@ describe('RCE > Plugins > Shared > DimensionsInput', () => {
       });
     });
   });
+  describe('When hidePercentage is false', () => {
+    let percentageRadio;
+    let pixelsRadio;
+    beforeEach(() => {
+      initialState.usePercentageUnits = true;
+      renderComponent();
+      const container = screen.getByTestId('dimension-type');
+      percentageRadio = within(container).getByLabelText('Percentage');
+      pixelsRadio = within(container).getByLabelText('Pixels');
+    });
+    it('The radio input group for Percentage and Pixels is displayed', () => {
+      const radioInputGroup = screen.getByRole('group', {
+        name: /Dimension Type/i
+      });
+      expect(radioInputGroup).toBeVisible();
+    });
+    it('The "Percentage" radio input is checked', () => {
+      expect(percentageRadio).toBeChecked();
+      expect(pixelsRadio).not.toBeChecked();
+    });
+    it('The dimension input for width is not rendered', () => {
+      const widthInput = screen.queryByLabelText('Width');
+      expect(widthInput).not.toBeInTheDocument();
+    });
+    it('The dimension input for height is not rendered', () => {
+      const heightInput = screen.queryByLabelText('Height');
+      expect(heightInput).not.toBeInTheDocument();
+    });
+  });
+  describe('When hidePercentage is true', () => {
+    beforeEach(() => {
+      props.hidePercentage = true;
+      renderComponent();
+    });
+    it('The radio input group for Percentage and Pixels is not displayed', () => {
+      const radioInputGroup = screen.queryByRole('group', {
+        name: /Dimension Type/i
+      });
+      expect(radioInputGroup).toBeNull();
+    });
+    it('The custom text description is displayed', () => {
+      const label = screen.getByText('Custom width and height (Pixels)');
+      expect(label).toBeVisible();
+    });
+  });
 });

package/lib/translated/en_GB/modules/rce/plugins/shared/DimensionsInput/index.js

@@ -21,6 +21,7 @@ import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { IconLockLine } from '@instructure/ui-icons';
 import { Flex } from '@instructure/ui-flex';
+import { Text } from '@instructure/ui-text';
 import { RadioInput, RadioInputGroup } from '@instructure/ui-radio-input';
 import formatMessage from '../../../../format-message';
 import DimensionInput from './DimensionInput';
@@ -64,7 +65,8 @@ export default function DimensionsInput(props) {
     dimensionsState,
     minHeight,
     minWidth,
-    minPercentage
+    minPercentage,
+    hidePercentage
   } = props;
 
   const handleDimensionTypeChange = e => {
@@ -76,7 +78,9 @@ export default function DimensionsInput(props) {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "small"
-  }, /*#__PURE__*/React.createElement(RadioInputGroup, {
+  }, hidePercentage ? /*#__PURE__*/React.createElement(Text, {
+    weight: "bold"
+  }, "Custom width and height (Pixels)") : /*#__PURE__*/React.createElement(RadioInputGroup, {
     "data-testid": "dimension-type",
     name: "dimension-type",
     description: "Dimension Type",
@@ -144,5 +148,9 @@ DimensionsInput.propTypes = {
   }),
   minHeight: number.isRequired,
   minWidth: number.isRequired,
-  minPercentage: number.isRequired
+  minPercentage: number.isRequired,
+  hidePercentage: bool
+};
+DimensionsInput.defaultProps = {
+  hidePercentage: false
 };

package/lib/translated/en_GB/modules/rce/plugins/shared/LinkDisplay.js

@@ -22,15 +22,17 @@ import { Flex } from '@instructure/ui-flex';
 import { TextInput } from '@instructure/ui-text-input';
 import formatMessage from '../../../format-message';
 import { showFlashAlert } from '../../../common/FlashAlert';
-const EDIT_MESSAGE = "If left empty link, text will display as course link name";
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { getIcon, getFriendlyLinkType } from './linkUtils';
+const EDIT_MESSAGE = "If left empty, link text will display as course link name";
 export const LinkDisplay = _ref => {
   let {
     linkText,
-    Icon,
     placeholderText,
     linkFileName,
     published,
-    handleTextChange
+    handleTextChange,
+    linkType
   } = _ref;
   useEffect(() => {
     showFlashAlert({
@@ -39,14 +41,18 @@ export const LinkDisplay = _ref => {
       srOnly: true
     });
   }, [linkFileName]);
+  const Icon = getIcon(linkType);
+  const linkTypeMessage = getFriendlyLinkType(linkType);
+  const publishedMessage = published ? "published" : "unpublished";
   return /*#__PURE__*/React.createElement(View, {
     as: "div",
     "data-testid": "LinkDisplay"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div"
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(TextInput, {
+    "data-testId": "link-text-input",
     renderLabel: () => "Text (optional)",
-    onChange: (e, value) => handleTextChange(value),
+    onChange: (_e, value) => handleTextChange(value),
     value: linkText,
     placeholder: placeholderText,
     messages: [{
@@ -78,5 +84,7 @@ export const LinkDisplay = _ref => {
     as: "div"
   }, /*#__PURE__*/React.createElement("span", {
     "data-testid": "selected-link-name"
-  }, linkFileName))))));
+  }, linkFileName), linkType && /*#__PURE__*/React.createElement(ScreenReaderContent, {
+    "data-testid": "screenreader_content"
+  }, "link type: " + linkTypeMessage, linkType !== 'navigation' && publishedMessage))))));
 };

package/lib/translated/en_GB/modules/rce/plugins/shared/RceFileBrowser.js

@@ -69,7 +69,7 @@ export default function RceFileBrowser(props) {
       title: fileInfo.name,
       href: url,
       embedded_iframe_url,
-      media_id: (_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id,
+      media_id: ((_fileInfo$api$embed = fileInfo.api.embed) === null || _fileInfo$api$embed === void 0 ? void 0 : _fileInfo$api$embed.id) || fileInfo.api.mediaEntryId,
       target: '_blank',
       content_type
     };

package/lib/translated/en_GB/modules/rce/plugins/shared/__tests__/CanvasContentTray.test.js

@@ -22,6 +22,7 @@ import * as fakeSource from '../../../../rcs/fake';
 import initialState from '../../../../sidebar/store/initialState';
 import sidebarHandlers from '../../../../sidebar/containers/sidebarHandlers';
 import CanvasContentTray from '../CanvasContentTray';
+import { LinkDisplay } from '../LinkDisplay';
 jest.useFakeTimers();
 jest.mock('../../../../canvasFileBrowser/FileBrowser', () => {
   return jest.fn(() => 'Files Browser');
@@ -40,6 +41,11 @@ jest.mock('../../../../bridge', () => {
   original.default.insertLink = jest.fn();
   return original;
 });
+jest.mock('../LinkDisplay', () => ({
+  LinkDisplay: jest.fn(() => /*#__PURE__*/React.createElement("div", {
+    "data-testid": "LinkDisplay"
+  }))
+}));
 const storeInitialState = { ...initialState({
     contextId: '1201',
     contextType: 'course',
@@ -107,6 +113,20 @@ describe('RCE Plugins > CanvasContentTray', () => {
     return getTray().getAttribute('aria-label');
   }
 
+  it('clears search string on tray close', async () => {
+    const mockOnChangeSearchString = jest.fn();
+    renderComponent(getProps({
+      storeProps: { ...storeInitialState,
+        onChangeSearchString: mockOnChangeSearchString
+      }
+    }));
+    await showTrayForPlugin('links');
+    const closeButton = component.getByTestId('CloseButton_ContentTray').querySelector('button');
+    closeButton.focus();
+    closeButton.click();
+    await waitForElementToBeRemoved(() => component.queryByTestId('CanvasContentTray'));
+    expect(mockOnChangeSearchString).toHaveBeenLastCalledWith('');
+  });
   describe('Edit Course Links Tray', () => {
     beforeEach(async () => {
       renderComponent();
@@ -137,6 +157,15 @@ describe('RCE Plugins > CanvasContentTray', () => {
         });
       });
     });
+    it('sets placeholder to the current link title', async () => {
+      renderComponent();
+      await showTrayForPlugin('course_link_edit');
+      await waitFor(() => {
+        expect(LinkDisplay).toHaveBeenCalledWith(expect.objectContaining({
+          placeholderText: 'some filename'
+        }), {});
+      });
+    });
   });
   describe('Tray Label in course context', () => {
     beforeEach(() => {

package/lib/translated/en_GB/modules/rce/plugins/shared/__tests__/LinkDisplay.test.js

@@ -18,7 +18,6 @@
 import React from 'react';
 import { LinkDisplay } from '../LinkDisplay';
 import { render, fireEvent } from '@testing-library/react';
-import { IconBlank } from '../linkUtils';
 import { showFlashAlert } from '../../../../common/FlashAlert';
 jest.mock('../../../../common/FlashAlert');
 describe('LinkDisplay', () => {
@@ -27,10 +26,10 @@ describe('LinkDisplay', () => {
     props = {
       linkText: 'default text',
       linkFileName: 'default link filename',
-      Icon: IconBlank,
       placeholderText: 'default placeholder',
       published: true,
-      handleTextChange: jest.fn()
+      handleTextChange: jest.fn(),
+      linkType: 'wikiPages'
     };
   });
   afterEach(() => {
@@ -51,13 +50,6 @@ describe('LinkDisplay', () => {
     const textInput = getByLabelText(/text \(optional\)/i);
     expect(textInput.value).toEqual('default text');
   });
-  it('component displays the icon passed in as a prop', () => {
-    const {
-      container
-    } = renderComponent();
-    const icon = container.querySelector('svg[name="IconBlank"]');
-    expect(icon).toBeInTheDocument();
-  });
   it('placeholder text matches the prop', () => {
     const {
       getByLabelText
@@ -116,4 +108,52 @@ describe('LinkDisplay', () => {
       type: 'info'
     });
   });
+  it('renders the appropriate icon based on linkType', () => {
+    const {
+      rerender,
+      getByTestId
+    } = renderComponent();
+    let iconContainer = getByTestId('icon-wrapper');
+    expect(iconContainer.querySelector('svg')).toHaveAttribute('name', 'IconDocument');
+    rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+      linkType: "assignments"
+    })));
+    iconContainer = getByTestId('icon-wrapper');
+    expect(iconContainer.querySelector('svg')).toHaveAttribute('name', 'IconAssignment');
+  });
+  describe('screenreader content', () => {
+    it('describes the linkType and publish status', () => {
+      const {
+        rerender,
+        getByTestId
+      } = renderComponent();
+      expect(getByTestId('screenreader_content').textContent).toEqual('link type: Pagepublished');
+      rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+        linkType: "quizzes",
+        published: false
+      })));
+      expect(getByTestId('screenreader_content').textContent).toEqual('link type: Quizunpublished');
+    });
+    it('is not present if linkType is falsy', () => {
+      const {
+        rerender,
+        queryByTestId
+      } = renderComponent({
+        linkType: undefined
+      });
+      expect(queryByTestId('screenreader_content')).not.toBeInTheDocument();
+      rerender( /*#__PURE__*/React.createElement(LinkDisplay, Object.assign({}, props, {
+        linkType: null
+      })));
+      expect(queryByTestId('screenreader_content')).not.toBeInTheDocument();
+    });
+    it('does not describe publish status if linkType is navigation', () => {
+      const {
+        getByTestId
+      } = renderComponent({
+        linkType: 'navigation'
+      });
+      expect(getByTestId('screenreader_content').textContent).toEqual('link type: Navigation');
+    });
+  });
 });

package/lib/translated/en_GB/modules/rce/plugins/shared/__tests__/compressionUtils.test.js

@@ -108,7 +108,11 @@ describe('compressImage()', () => {
     };
   });
   it('returns compressed blob image', async () => {
-    const result = await compressImage('data:image/jpeg;base64,abcdefhijk==');
+    const result = await compressImage({
+      encodedImage: 'data:image/jpeg;base64,abcdefhijk==',
+      previewWidth: 200,
+      previewHeight: 400
+    });
     expect(result).toEqual('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
   });
 });

package/lib/translated/en_GB/modules/rce/plugins/shared/__tests__/fileTypeUtils.test.js

@@ -135,7 +135,7 @@ describe('fileTypeUtils', () => {
       afterAll(() => {
         RCEGlobals.getFeatures.mockRestore();
       });
-      it('uses attachment route if feature flag on', () => {
+      it('uses attachment route if id is present', () => {
         const file = {
           id: '123',
           type: 'video/mov'
@@ -143,6 +143,15 @@ describe('fileTypeUtils', () => {
         const url = mediaPlayerURLFromFile(file);
         expect(url).toBe('/media_attachments_iframe/123?type=video&embedded=true');
       });
+      it('uses the file verifier if present', () => {
+        const file = {
+          id: '123',
+          type: 'video/mov',
+          url: 'host?verifier=something'
+        };
+        const url = mediaPlayerURLFromFile(file);
+        expect(url).toBe('/media_attachments_iframe/123?type=video&verifier=something&embedded=true');
+      });
       it('uses media_object route if no attachmentId exists', () => {
         const file = {
           media_entry_id: 'm-media_id',

package/lib/translated/en_GB/modules/rce/plugins/shared/compressionUtils.js

@@ -74,7 +74,12 @@ export function shouldCompressImage(_ref2) {
   } = _ref2;
   return ['image/jpeg', 'image/webp', 'image/bmp', 'image/tiff'].includes(type) && size > MAX_IMAGE_SIZE_BYTES;
 }
-export function compressImage(encodedImage, previewWidth, previewHeight) {
+export function compressImage(_ref3) {
+  let {
+    encodedImage,
+    previewWidth,
+    previewHeight
+  } = _ref3;
   return new Promise((resolve, reject) => {
     const image = new Image();
     image.src = encodedImage;

package/lib/translated/en_GB/modules/rce/plugins/shared/fileTypeUtils.js

@@ -93,12 +93,14 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   const content_type = file['content-type'] || file.content_type || file.type;
   const type = content_type.replace(/\/.*$/, '');
 
-  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type)) {
-    const attachmentId = file.id;
-
-    if (attachmentId) {
-      return `/media_attachments_iframe/${attachmentId}?type=${type}&embedded=true`;
+  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.media_links_use_attachment_id && isAudioOrVideo(content_type) && file.id) {
+    if (!file.url && !file.href) {
+      return `/media_attachments_iframe/${file.id}?type=${type}&embedded=true`;
     }
+
+    const parsed_url = parse(file.url || file.href, true);
+    const verifier = parsed_url.query.verifier ? `&verifier=${parsed_url.query.verifier}` : '';
+    return `/media_attachments_iframe/${file.id}?type=${type}${verifier}&embedded=true`;
   }
 
   if (file.embedded_iframe_url) {
@@ -108,7 +110,7 @@ export function mediaPlayerURLFromFile(file, canvasOrigin) {
   if (isAudioOrVideo(content_type)) {
     var _file$embed;
 
-    const mediaEntryId = file.media_entry_id || ((_file$embed = file.embed) === null || _file$embed === void 0 ? void 0 : _file$embed.id);
+    const mediaEntryId = file.media_entry_id || ((_file$embed = file.embed) === null || _file$embed === void 0 ? void 0 : _file$embed.id) || file.mediaEntryId;
 
     if (mediaEntryId && mediaEntryId !== 'maybe') {
       return `/media_objects_iframe/${mediaEntryId}?type=${type}`;

package/lib/translated/en_GB/modules/rce/plugins/shared/linkUtils.js

@@ -55,4 +55,34 @@ export const getIcon = type => {
     default:
       return IconDocumentLine;
   }
+};
+export const getFriendlyLinkType = type => {
+  switch (type) {
+    case 'assignments':
+      return "Assignment";
+
+    case 'discussions':
+      return "Discussion";
+
+    case 'modules':
+      return "Module";
+
+    case 'quizzes':
+      return "Quiz";
+
+    case 'quizzes.next':
+      return "New Quiz";
+
+    case 'announcements':
+      return "Announcement";
+
+    case 'wikiPages':
+      return "Page";
+
+    case 'navigation':
+      return "Navigation";
+
+    default:
+      return '';
+  }
 };