@atlaskit/media-viewer 54.6.5 → 54.7.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-viewer
 
+## 54.7.0
+
+### Minor Changes
+
+- [`143ebd1ce2710`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/143ebd1ce2710) -
+  Show a dedicated "File is too large to preview" heading instead of the generic "Something went
+  wrong" copy when a file exceeds the size limit supported by the browser-based viewer (currently:
+  code/text files over the 10MB CodeViewer limit, both in the main viewer and inside ZIP archives).
+  These failures are reported via the `previewTooLarge` analytics event rather than `loadFailed`,
+  since they aren't load failures. Behind the `platform_media_too_large_preview_state` feature gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 54.6.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 54.6.5
 
 ### Patch Changes

package/dist/cjs/analytics/events/operational/previewTooLarge.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPreviewTooLargeEvent = void 0;
+var _ = require("../..");
+var _errors = require("../../../errors");
+var createPreviewTooLargeEvent = exports.createPreviewTooLargeEvent = function createPreviewTooLargeEvent(error, fileState) {
+  var _getFileAttributes = (0, _.getFileAttributes)(fileState),
+    fileId = _getFileAttributes.fileId,
+    fileMediatype = _getFileAttributes.fileMediatype,
+    fileMimetype = _getFileAttributes.fileMimetype,
+    fileSize = _getFileAttributes.fileSize;
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'previewTooLarge',
+    attributes: {
+      failReason: (0, _errors.getPrimaryErrorReason)(error),
+      fileAttributes: {
+        fileId: fileId,
+        fileMediatype: fileMediatype,
+        fileMimetype: fileMimetype,
+        fileSize: fileSize
+      }
+    }
+  };
+};

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "54.6.4";
+var packageVersion = exports.packageVersion = "54.6.6";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -14,7 +14,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "54.6.4";
+var packageVersion = "54.6.6";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/content.js

@@ -13,7 +13,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireWildcard(require("react"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _MediaButton = _interopRequireDefault(require("@atlaskit/media-ui/MediaButton"));
+var _classNames = require("@atlaskit/media-ui/classNames");
+var _inactivityDetector = require("@atlaskit/media-ui/inactivityDetector");
 var _styleWrappers = require("./styleWrappers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -38,13 +40,13 @@ var Content = exports.Content = /*#__PURE__*/function (_Component) {
         isSidebarVisible = _this$props.isSidebarVisible;
       return /*#__PURE__*/_react.default.createElement(_styleWrappers.ContentWrapper, {
         isSidebarVisible: isSidebarVisible
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.InactivityDetector, null, function (triggerActivityCallback) {
+      }, /*#__PURE__*/_react.default.createElement(_inactivityDetector.InactivityDetector, null, function (triggerActivityCallback) {
         var children = /*#__PURE__*/_react.default.cloneElement(_this.props.children, {
           showControls: triggerActivityCallback
         });
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.CloseButtonWrapper, {
-          className: _mediaUi.hideControlsClassName
-        }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+          className: _classNames.hideControlsClassName
+        }, /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
           testId: "media-viewer-close-button",
           onClick: onClose,
           iconBefore: /*#__PURE__*/_react.default.createElement(_cross.default, {

package/dist/cjs/download.js

@@ -14,7 +14,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _useAnalyticsEvents3 = require("@atlaskit/analytics-next/useAnalyticsEvents");
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/download"));
 var _mediaClient = require("@atlaskit/media-client");
-var _mediaUi = require("@atlaskit/media-ui");
+var _MediaButton = _interopRequireDefault(require("@atlaskit/media-ui/MediaButton"));
+var _messages = require("@atlaskit/media-ui/messages");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _downloadButtonClicked = require("./analytics/events/ui/downloadButtonClicked");
@@ -46,7 +47,7 @@ function DownloadButton(_ref) {
     (0, _analytics.fireAnalytics)(analyticspayload, createAnalyticsEvent);
     providedOnClick(event, analyticsEvent);
   }, [analyticspayload, providedOnClick, createAnalyticsEvent]);
-  var downloadButton = /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, (0, _extends2.default)({}, rest, {
+  var downloadButton = /*#__PURE__*/_react.default.createElement(_MediaButton.default, (0, _extends2.default)({}, rest, {
     onClick: onClick
   }));
   return tooltip ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -81,7 +82,7 @@ var useDownloadButtonDisabledProps = function useDownloadButtonDisabledProps(med
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isDisabled = mediaClient.config.enforceDataSecurityPolicy;
-  var tooltip = isDisabled ? formatMessage(_mediaUi.messages.download_disabled_security_policy) : undefined;
+  var tooltip = isDisabled ? formatMessage(_messages.messages.download_disabled_security_policy) : undefined;
   return {
     isDisabled: isDisabled,
     tooltip: tooltip
@@ -152,7 +153,7 @@ var ErrorViewDownloadButton = exports.ErrorViewDownloadButton = function ErrorVi
     mediaClient: mediaClient,
     collectionName: collectionName,
     traceContext: traceContext
-  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.download)));
+  }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.download)));
 };
 var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDownloadButton(_ref5) {
   var state = _ref5.state,
@@ -177,7 +178,7 @@ var ToolbarDownloadButton = exports.ToolbarDownloadButton = function ToolbarDown
     fallbackMediaName: fallbackMediaName
   });
 };
-var DisabledToolbarDownloadButton = exports.DisabledToolbarDownloadButton = /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+var DisabledToolbarDownloadButton = exports.DisabledToolbarDownloadButton = /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
   isDisabled: true,
   iconBefore: downloadIcon
 });

package/dist/cjs/errorMessage.js

@@ -13,14 +13,16 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styleWrappers = require("./styleWrappers");
 var _errorImages = require("./error-images");
 var _analytics = require("./analytics");
 var _errors = require("./errors");
 var _loadFailed = require("./analytics/events/operational/loadFailed");
 var _previewUnsupported = require("./analytics/events/operational/previewUnsupported");
+var _previewTooLarge = require("./analytics/events/operational/previewTooLarge");
 var _ufoExperiences = require("./analytics/ufoExperiences");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -29,10 +31,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var errorLoadingFileImage = function errorLoadingFileImage(formatMessage) {
   return /*#__PURE__*/_react.default.createElement(_styleWrappers.ErrorImage, {
     src: _errorImages.errorLoadingFile,
-    alt: formatMessage(_mediaUi.messages.error_loading_file)
+    alt: formatMessage(_messages.messages.error_loading_file)
   });
 };
-var errorReasonToMessages = exports.errorReasonToMessages = [['serverRateLimited', _mediaUi.messages.might_be_a_hiccup], ['invalidFileId', _mediaUi.messages.item_not_found_in_list], ['itemviewer-file-failed-processing-status', _mediaUi.messages.image_format_invalid_error], ['archiveviewer-read-binary', _mediaUi.messages.zip_entry_load_fail], ['archiveviewer-create-url', _mediaUi.messages.zip_entry_load_fail], ['archiveviewer-missing-name-src', _mediaUi.messages.zip_entry_load_fail], ['archiveviewer-encrypted-entry', _mediaUi.messages.couldnt_generate_encrypted_entry_preview], ['archiveviewer-codeviewer-file-size-exceeds', _mediaUi.messages.couldnt_load_file], ['codeviewer-file-size-exceeds', _mediaUi.messages.couldnt_load_file]];
+var errorReasonToMessages = exports.errorReasonToMessages = [['serverRateLimited', _messages.messages.might_be_a_hiccup], ['invalidFileId', _messages.messages.item_not_found_in_list], ['itemviewer-file-failed-processing-status', _messages.messages.image_format_invalid_error], ['archiveviewer-read-binary', _messages.messages.zip_entry_load_fail], ['archiveviewer-create-url', _messages.messages.zip_entry_load_fail], ['archiveviewer-missing-name-src', _messages.messages.zip_entry_load_fail], ['archiveviewer-encrypted-entry', _messages.messages.couldnt_generate_encrypted_entry_preview], ['archiveviewer-codeviewer-file-size-exceeds', _messages.messages.couldnt_load_file], ['codeviewer-file-size-exceeds', _messages.messages.couldnt_load_file]];
 var getErrorMessageFromError = exports.getErrorMessageFromError = function getErrorMessageFromError(error) {
   var matchingRow = errorReasonToMessages.find(function (row) {
     return row[0] === (0, _errors.getPrimaryErrorReason)(error) || row[0] === (0, _errors.getSecondaryErrorReason)(error);
@@ -59,12 +61,23 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
       if ((0, _errors.getPrimaryErrorReason)(error) === 'archiveviewer-not-zip' || (0, _errors.getPrimaryErrorReason)(error) === 'imageviewer-unsupported-mime') {
         return {
           icon: errorLoadingFileImage(formatMessage),
-          messages: [_mediaUi.messages.unsupported_file_format, _mediaUi.messages.archive_format_not_supported]
+          messages: [_messages.messages.unsupported_file_format, _messages.messages.archive_format_not_supported]
+        };
+      }
+
+      // Code/text files (in the main viewer or inside a ZIP archive) over the
+      // CodeViewer's 10MB limit aren't a load failure - the file is simply too
+      // large for this viewer to preview. Show a dedicated "File is too large to
+      // preview" heading instead of the generic "Something went wrong" copy.
+      if (ErrorMessage.isPreviewTooLarge(error) && (0, _platformFeatureFlags.fg)('platform_media_too_large_preview_state')) {
+        return {
+          icon: errorLoadingFileImage(formatMessage),
+          messages: [_messages.messages.file_too_large_to_preview, _messages.messages.file_too_large_description]
         };
       }
       var errorInfo = {
         icon: errorLoadingFileImage(formatMessage),
-        messages: [_mediaUi.messages.something_went_wrong, _mediaUi.messages.couldnt_generate_preview]
+        messages: [_messages.messages.something_went_wrong, _messages.messages.couldnt_generate_preview]
       };
       var message = getErrorMessageFromError(error);
       if (message) {
@@ -121,10 +134,21 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
     value: function isPreviewUnsupported(error) {
       return ErrorMessage.previewUnsupportedReasons.includes((0, _errors.getPrimaryErrorReason)(error));
     }
+
+    // Error reasons that mean the file exceeds the size limit supported by the
+    // browser-based viewer (not a load failure). These are reported as the
+    // informational, non-SLI `previewTooLarge` metric instead of `loadFailed`.
+  }, {
+    key: "isPreviewTooLarge",
+    value: function isPreviewTooLarge(error) {
+      return ErrorMessage.previewTooLargeReasons.includes((0, _errors.getPrimaryErrorReason)(error));
+    }
   }, {
     key: "getEventPayload",
     value: function getEventPayload(error, fileId, fileState, traceContext) {
-      if (fileState && ErrorMessage.isPreviewUnsupported(error)) {
+      if (fileState && ErrorMessage.isPreviewTooLarge(error) && (0, _platformFeatureFlags.fg)('platform_media_too_large_preview_state')) {
+        return (0, _previewTooLarge.createPreviewTooLargeEvent)(error, fileState);
+      } else if (fileState && ErrorMessage.isPreviewUnsupported(error)) {
         // this is not an SLI (load failure), its just a useful metric for files
         // whose format the browser-based viewer can't preview.
         return (0, _previewUnsupported.createPreviewUnsupportedEvent)(fileState);
@@ -135,5 +159,6 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
   }]);
 }(_react.default.Component); // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 (0, _defineProperty2.default)(ErrorMessage, "previewUnsupportedReasons", ['unsupported', 'imageviewer-unsupported-mime']);
+(0, _defineProperty2.default)(ErrorMessage, "previewTooLargeReasons", ['codeviewer-file-size-exceeds', 'archiveviewer-codeviewer-file-size-exceeds']);
 var ErroMsg = (0, _withAnalyticsEvents.default)()((0, _reactIntl.injectIntl)(ErrorMessage));
 var _default = exports.default = ErroMsg;

package/dist/cjs/header.js

@@ -9,8 +9,13 @@ exports.default = exports.Header = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _mediaClient = require("@atlaskit/media-client");
-var _mediaUi = require("@atlaskit/media-ui");
-var _codeViewer = require("@atlaskit/media-ui/codeViewer");
+var _classNames = require("@atlaskit/media-ui/classNames");
+var _messages = require("@atlaskit/media-ui/messages");
+var _humanReadableSize = require("@atlaskit/media-ui/humanReadableSize");
+var _MediaButton = _interopRequireDefault(require("@atlaskit/media-ui/MediaButton"));
+var _getLanguageType = require("@atlaskit/media-ui/getLanguageType");
+var _getExtension = require("@atlaskit/media-ui/getExtension");
+var _isCodeViewerItem = require("@atlaskit/media-ui/isCodeViewerItem");
 var _isZipMimeType = require("@atlaskit/media-common/isZipMimeType");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _reactIntl = require("react-intl");
@@ -119,18 +124,18 @@ var Header = exports.Header = function Header(_ref) {
   }, [fileState, fallbackMediaNameFetcher]);
   var renderFileTypeText = function renderFileTypeText(item) {
     // render appropriate header if its a code/email item and the feature flag is enabled
-    if ((0, _codeViewer.isCodeViewerItem)(item.name, item.mimeType)) {
+    if ((0, _isCodeViewerItem.isCodeViewerItem)(item.name, item.mimeType)) {
       // gather language and extension
       // i.e test.py would have a language of 'python' and an extension of 'py'
-      var language = (0, _codeViewer.getLanguageType)(item.name, item.mimeType);
-      var ext = (0, _codeViewer.getExtension)(item.name);
+      var language = (0, _getLanguageType.getLanguageType)(item.name, item.mimeType);
+      var ext = (0, _getExtension.getExtension)(item.name);
 
       // specific cases for if we want a certain word translated in other languages
       switch (ext) {
         case 'msg':
-          return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.email);
+          return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.email);
         case 'txt':
-          return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.text);
+          return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.text);
       }
 
       // no need for translations in other languages
@@ -138,23 +143,23 @@ var Header = exports.Header = function Header(_ref) {
     }
     var mediaType = item.mediaType;
     var mediaTypeTranslationMap = {
-      doc: _mediaUi.messages.document,
-      audio: _mediaUi.messages.audio,
-      video: _mediaUi.messages.video,
-      image: _mediaUi.messages.image,
-      archive: _mediaUi.messages.archive,
-      unknown: _mediaUi.messages.unknown
+      doc: _messages.messages.document,
+      audio: _messages.messages.audio,
+      video: _messages.messages.video,
+      image: _messages.messages.image,
+      archive: _messages.messages.archive,
+      unknown: _messages.messages.unknown
     };
     var message = mediaTypeTranslationMap[mediaType || 'unknown'];
 
     // Defaulting to unknown again since backend has more mediaTypes than the current supported ones
-    return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, message || _mediaUi.messages.unknown);
+    return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, message || _messages.messages.unknown);
   };
   return /*#__PURE__*/_react.default.createElement(_styleWrappers.Header, {
     isArchiveSideBarVisible: isArchiveSideBarVisible
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: _mediaUi.hideControlsClassName
+    className: _classNames.hideControlsClassName
   }, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftHeader, null, item.match({
     successful: function successful(item) {
       return !(0, _mediaClient.isErrorFileState)(item) && /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataIconWrapper, null, /*#__PURE__*/_react.default.createElement(_mimeTypeIcon.MimeTypeIcon, {
@@ -164,9 +169,9 @@ var Header = exports.Header = function Header(_ref) {
         name: item.name
       })), /*#__PURE__*/_react.default.createElement(_styleWrappers.MedatadataTextWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataFileName, {
         "data-testid": "media-viewer-file-name"
-      }, item.name || (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) && fallbackMediaName || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.unknown)), /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataSubText, {
+      }, item.name || (0, _expValEquals.expValEquals)('platform_editor_media_name_fallback_viewer_card', 'isEnabled', true) && fallbackMediaName || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.unknown)), /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataSubText, {
         "data-testid": "media-viewer-file-metadata-text"
-      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.FormattedMessageWrapper, null, renderFileTypeText(item)), item.size ? ' · ' + (0, _mediaUi.toHumanReadableMediaSize)(item.size) : '')));
+      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.FormattedMessageWrapper, null, renderFileTypeText(item)), item.size ? ' · ' + (0, _humanReadableSize.toHumanReadableMediaSize)(item.size) : '')));
     },
     pending: function pending() {
       return null;
@@ -178,7 +183,7 @@ var Header = exports.Header = function Header(_ref) {
     if (action.isVisible && !action.isVisible(identifier)) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+    return /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
       key: index,
       testId: "media-viewer-header-action-".concat(index),
       onClick: function onClick() {
@@ -189,7 +194,7 @@ var Header = exports.Header = function Header(_ref) {
       iconBefore: action.icon,
       "aria-label": action.label
     });
-  }), (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+  }), (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/_react.default.createElement(_MediaButton.default, {
     isSelected: isSidebarVisible,
     testId: "media-viewer-sidebar-button",
     onClick: onSidebarButtonClick,

package/dist/cjs/item-viewer.js

@@ -13,8 +13,8 @@ var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _mediaClient = require("@atlaskit/media-client");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
-var _codeViewer = require("@atlaskit/media-ui/codeViewer");
+var _messages = require("@atlaskit/media-ui/messages");
+var _isCodeViewerItem = require("@atlaskit/media-ui/isCodeViewerItem");
 var _useFileState2 = require("@atlaskit/media-client-react/use-file-state");
 var _useMediaClient = require("@atlaskit/media-client-react/use-media-client");
 var _domain = require("./domain");
@@ -200,7 +200,7 @@ var canRenderWithoutProcessing = function canRenderWithoutProcessing(fileState)
     size = fileState.size;
 
   // Text/code files via CodeViewer (10MB limit)
-  if ((0, _codeViewer.isCodeViewerItem)(name, mimeType) && size <= MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+  if ((0, _isCodeViewerItem.isCodeViewerItem)(name, mimeType) && size <= MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
     return true;
   }
 
@@ -370,7 +370,7 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref2) {
 
     // TODO: fix all of the item errors
 
-    if ((0, _codeViewer.isCodeViewerItem)(fileItem.name, fileItem.mimeType)) {
+    if ((0, _isCodeViewerItem.isCodeViewerItem)(fileItem.name, fileItem.mimeType)) {
       //Render error message if code file has size over 10MB.
       //Required by https://product-fabric.atlassian.net/browse/MEX-1788
       if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
@@ -468,7 +468,7 @@ var ItemViewerBase = exports.ItemViewerBase = function ItemViewerBase(_ref2) {
         fileState: _fileState,
         fileStateFlags: fileStateFlagsRef.current,
         traceContext: traceContext
-      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
     } else {
       return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
         fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',

package/dist/cjs/list.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.List = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _classNames = require("@atlaskit/media-ui/classNames");
 var _itemViewer = require("./item-viewer");
 var _styleWrappers = require("./styleWrappers");
 var _navigation = require("./navigation");
@@ -46,7 +46,7 @@ var List = exports.List = function List(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
-    className: _mediaUi.hideControlsClassName,
+    className: _classNames.hideControlsClassName,
     isArchiveSideBarVisible: isArchiveSideBarVisible
   }, /*#__PURE__*/_react.default.createElement(_header.default, {
     identifier: selectedItem,

package/dist/cjs/loading.js

@@ -8,13 +8,13 @@ exports.Spinner = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = _interopRequireDefault(require("react"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 var _reactIntl = require("react-intl");
 var Spinner = exports.Spinner = function Spinner(_ref) {
   (0, _objectDestructuringEmpty2.default)(_ref);
   var intl = (0, _reactIntl.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_spinner.default, {
-    label: intl.formatMessage(_mediaUi.messages.loading_file),
+    label: intl.formatMessage(_messages.messages.loading_file),
     appearance: "invert",
     size: "large"
   });

package/dist/cjs/media-viewer.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
+var _shortcut = require("@atlaskit/media-ui/shortcut");
 var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
 var _analytics = require("./analytics");
 var _modal = require("./analytics/events/screen/modal");
@@ -70,7 +70,7 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: _classnames.mediaViewerPopupClass
-  }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
+  }, /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
     code: 'Escape',
     handler: function handler() {
       (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('escKey'), createAnalyticsEventRef.current);

package/dist/cjs/navigation.js

@@ -14,7 +14,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = _interopRequireWildcard(require("react"));
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _classNames = require("@atlaskit/media-ui/classNames");
+var _shortcut = require("@atlaskit/media-ui/shortcut");
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _styleWrappers = require("./styleWrappers");
@@ -125,8 +126,8 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       _react.default.createElement(_styleWrappers.Arrow, {
-        className: _mediaUi.hideControlsClassName
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
+        className: _classNames.hideControlsClassName
+      }, /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
         code: 'ArrowLeft',
         handler: prev('keyboard'),
         eventType: 'keyup'
@@ -138,8 +139,8 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       _react.default.createElement(_styleWrappers.Arrow, {
-        className: _mediaUi.hideControlsClassName
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
+        className: _classNames.hideControlsClassName
+      }, /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
         code: 'ArrowRight',
         handler: next('keyboard'),
         eventType: 'keyup'

package/dist/cjs/viewers/archiveSidebar/archive-sidebar-folder-entry.js

@@ -22,7 +22,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _styleWrappers = require("./styleWrappers");
 var _utils = require("../../utils");
 var _customButtonItem = require("./custom-button-item");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 var _archiveDownloadButton = require("./archive-download-button");
 var _reactIntl = require("react-intl");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -69,7 +69,7 @@ var ArchiveSidebarFolderEntryBase = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
         shouldRenderAbuseModal = _this$props2.shouldRenderAbuseModal,
         intl = _this$props2.intl;
-      var tooltip = enforceDataSecurityPolicy ? intl.formatMessage(_mediaUi.messages.download_disabled_security_policy) : undefined;
+      var tooltip = enforceDataSecurityPolicy ? intl.formatMessage(_messages.messages.download_disabled_security_policy) : undefined;
       var downloadFn = function downloadFn() {
         return _this.downloadZipEntry(entry, root);
       };

package/dist/cjs/viewers/archiveSidebar/archive.js

@@ -18,8 +18,10 @@ var _unzipit = require("unzipit");
 var _reactIntl = require("react-intl");
 var _mediaClient = require("@atlaskit/media-client");
 var _isZipMimeType = require("@atlaskit/media-common/isZipMimeType");
-var _mediaUi = require("@atlaskit/media-ui");
-var _codeViewer = require("@atlaskit/media-ui/codeViewer");
+var _customMediaPlayer = require("@atlaskit/media-ui/customMediaPlayer");
+var _messages = require("@atlaskit/media-ui/messages");
+var _getLanguageType = require("@atlaskit/media-ui/getLanguageType");
+var _isCodeViewerItem = require("@atlaskit/media-ui/isCodeViewerItem");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _domain = require("../../domain");
 var _styleWrappers = require("../../styleWrappers");
@@ -132,7 +134,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
               src = '';
               codeViewerSrc = '';
               mimeType = (0, _utils.getMimeTypeFromFilename)(selectedArchiveEntry.name);
-              isCodeMimeType = (0, _codeViewer.isCodeViewerItem)(selectedArchiveEntry.name, mimeType);
+              isCodeMimeType = (0, _isCodeViewerItem.isCodeViewerItem)(selectedArchiveEntry.name, mimeType);
               if (selectedArchiveEntry.isDirectory) {
                 _context2.next = 6;
                 break;
@@ -357,7 +359,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
             onError: this.onViewerError('archiveviewer-codeviewer-onerror', selectedArchiveEntry),
             item: item,
             src: codeViewerSrc || '',
-            language: (0, _codeViewer.getLanguageType)(name) || _util.DEFAULT_LANGUAGE
+            language: (0, _getLanguageType.getLanguageType)(name) || _util.DEFAULT_LANGUAGE
           });
         }
         switch (mediaType) {
@@ -371,7 +373,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
           case 'video':
             return /*#__PURE__*/_react.default.createElement(_styleWrappers2.ArchiveItemViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomVideoPlayerWrapper, {
               "data-testid": "media-viewer-video-content"
-            }, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
+            }, /*#__PURE__*/_react.default.createElement(_customMediaPlayer.CustomMediaPlayer, {
               type: "video",
               isAutoPlay: false,
               src: src,
@@ -384,7 +386,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
             }, /*#__PURE__*/_react.default.createElement(_styleWrappers.DefaultCoverWrapper, null, /*#__PURE__*/_react.default.createElement(_audio.default, {
               label: "cover",
               color: "currentColor"
-            })), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
+            })), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_customMediaPlayer.CustomMediaPlayer, {
               type: "audio",
               isAutoPlay: false,
               src: src,
@@ -422,7 +424,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
         fileState: item,
         error: error,
         supressAnalytics: true
-      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.try_downloading_file))));
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.try_downloading_file))));
     }
   }]);
 }(_baseViewer.BaseViewer);

package/dist/cjs/viewers/archiveSidebar/styleWrappers.js

@@ -12,7 +12,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var ARCHIVE_SIDE_BAR_WIDTH = exports.ARCHIVE_SIDE_BAR_WIDTH = 300;
@@ -62,7 +62,7 @@ var ArchiveDownloadButtonWrapper = exports.ArchiveDownloadButtonWrapper = functi
     _onClick = _ref4.onClick;
   var intl = (0, _reactIntl.useIntl)();
   return /*#__PURE__*/React.createElement("button", {
-    "aria-label": intl.formatMessage(_mediaUi.messages.archive_download_label_assistive_text),
+    "aria-label": intl.formatMessage(_messages.messages.archive_download_label_assistive_text),
     onClick: function onClick(event) {
       return _onClick && _onClick(event);
     },

package/dist/cjs/viewers/audio.js

@@ -21,7 +21,7 @@ var _errors = require("../errors");
 var _styleWrappers = require("../styleWrappers");
 var _baseViewer = require("./base-viewer");
 var _isIE = require("../utils/isIE");
-var _mediaUi = require("@atlaskit/media-ui");
+var _customMediaPlayer = require("@atlaskit/media-ui/customMediaPlayer");
 var _getObjectUrlFromFileState = require("../utils/getObjectUrlFromFileState");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -149,7 +149,7 @@ var AudioViewer = exports.AudioViewer = /*#__PURE__*/function (_BaseViewer) {
       var isAutoPlay = previewCount === 0;
       return useCustomAudioPlayer ? /*#__PURE__*/_react.default.createElement(_styleWrappers.AudioPlayer, {
         "data-testid": "media-viewer-audio-content"
-      }, this.renderCover(), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_mediaUi.CustomMediaPlayer, {
+      }, this.renderCover(), /*#__PURE__*/_react.default.createElement(_styleWrappers.CustomAudioPlayerWrapper, null, /*#__PURE__*/_react.default.createElement(_customMediaPlayer.CustomMediaPlayer, {
         type: "audio",
         isAutoPlay: isAutoPlay,
         src: src,

package/dist/cjs/viewers/base-viewer.js

@@ -14,7 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 var _deepEqual = _interopRequireDefault(require("deep-equal"));
 var _mediaClient = require("@atlaskit/media-client");
 var _errorMessage = _interopRequireDefault(require("../errorMessage"));
@@ -91,7 +91,7 @@ var BaseViewer = exports.BaseViewer = /*#__PURE__*/function (_React$Component) {
             fileState: item,
             error: error,
             supressAnalytics: true // item-viewer.tsx will send
-          }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.try_downloading_file)), _this2.renderDownloadButton(error));
+          }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.try_downloading_file)), _this2.renderDownloadButton(error));
         }
       });
     }