@atlaskit/media-viewer 46.0.1 → 46.2.1

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # @atlaskit/media-viewer
 
+## 46.2.1
+
+### Patch Changes
+
+- [`a44c7c42fa7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a44c7c42fa7) - Added payload publisher wrapper for logging ufo events in examples
+- [`5a79ea6f7d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5a79ea6f7d6) - Add support for assessing the mimetype of a file when deciding what viewer to show
+- [`065ae19cb44`](https://bitbucket.org/atlassian/atlassian-frontend/commits/065ae19cb44) - Enforced "up to date" logged feature flags via type checks
+- Updated dependencies
+
+## 46.2.0
+
+### Minor Changes
+
+- [`60136fd1e34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60136fd1e34) - Replicate Media Viewer Reliability Events using UFO client library
+- [`f862d5ae7aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f862d5ae7aa) - remove RxJs peer dependency
+- [`dea110be493`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dea110be493) - [ux] MEX-1334 Implemented code splitting in media-viewer
+- [`118f3af101f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/118f3af101f) - Media Client APIs has been updated to use MediaSubscribable which provides subscription functionality (similar to RxJs observables).
+  It exposes subscribe method that is called with MediaObserver as an argument and returns MediaSubscription.
+  MediaSubscription exposes unsubscribe method.
+
+  getFileState:
+  The returned type of this function has changed from RxJs ReplaySubject to MediaSubscribable.
+
+  ```
+  import { MediaClient, MediaObserver, MediaSubscribable, MediaSubscription } from '@atlaskit/media-client';
+
+  const mediaClient = new MediaClient({ authProvider });
+
+  const fileStateSubscribable: MediaSubscribable<FileState> = mediaClient.file.getFileState(id);
+
+  const mediaObserver: MediaObserver<FileState> = {
+    next: (fileState) => {
+      nextCallback(fileState)
+    },
+    error: (error) => {
+      errorCallback(error)
+    },
+  };
+
+  const subscription: MediaSubscription = fileStateSubscribable.subscribe(mediaObserver);
+
+  subscription.unsubscribe();
+  ```
+
+  upload:
+  The returned type of this function has changed from RxJs ReplaySubject to MediaSubscribable.
+
+  ```
+  import { MediaClient, MediaObserver, MediaSubscribable, MediaSubscription } from '@atlaskit/media-client';
+
+  const mediaClient = new MediaClient({ authProvider });
+
+  const uploadFileSubscribable: MediaSubscribable<FileState> = mediaClient.file.upload(uploadableFile);
+
+  const mediaObserver: MediaObserver<FileState> = {
+    next: (fileState) => {
+      nextCallback(fileState)
+    },
+    error: (error) => {
+      errorCallback(error)
+    },
+  };
+
+  const subscription: MediaSubscription = uploadFileSubscribable.subscribe(mediaObserver);
+
+  subscription.unsubscribe();
+  ```
+
+  getItems:
+  The returned type of this function has changed from RxJs ReplaySubject to MediaSubscribable.
+
+  ```
+  import { MediaClient, MediaObserver, MediaSubscribable, MediaSubscription } from '@atlaskit/media-client';
+
+  const mediaClient = new MediaClient({ authProvider });
+
+  const collectionItemsSubscribable: MediaSubscribable<MediaCollectionItem[]> = mediaClient.collection.getItems(collectionName);
+
+  const mediaObserver: MediaObserver<MediaCollectionItem[]> = {
+    next: (items) => {
+      nextCallback(items)
+    },
+    error: (error) => {
+      errorCallback(error)
+    },
+  };
+
+  const subscription: MediaSubscription = collectionItemsSubscribable.subscribe(mediaObserver);
+
+  subscription.unsubscribe();
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 46.1.0
+
+### Minor Changes
+
+- [`30fffbfe4d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30fffbfe4d6) - Replaced Deprecated dependency @atlaskit/navigation-next with @atlaskit/side-navigation and styled-components
+- [`94539e589cc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94539e589cc) - MEX-1105 Migrated @atlaskit/button to @atlaskit/button/standard-button
+
+### Patch Changes
+
+- [`3d9682b0377`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d9682b0377) - add errorDetail logging for RequestError and MediaStoreError to getErrorDetail
+- Updated dependencies
+
 ## 46.0.1
 
 ### Patch Changes

package/dist/cjs/analytics/ufoExperiences.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.succeedMediaFileUfoExperience = exports.startMediaFileUfoExperience = exports.failMediaFileUfoExperience = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _ufo = require("@atlaskit/ufo");
+
+var _version = require("../version.json");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var ufoExperience;
+
+var getExperience = function getExperience() {
+  if (!ufoExperience) {
+    var inlineExperience = {
+      platform: {
+        component: 'media-viewer'
+      },
+      type: _ufo.ExperienceTypes.Experience,
+      performanceType: _ufo.ExperiencePerformanceTypes.InlineResult
+    };
+    ufoExperience = new _ufo.UFOExperience('media-file', inlineExperience);
+  }
+
+  return ufoExperience;
+};
+
+var startMediaFileUfoExperience = function startMediaFileUfoExperience() {
+  getExperience().start();
+};
+
+exports.startMediaFileUfoExperience = startMediaFileUfoExperience;
+
+var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperience(properties) {
+  getExperience().success({
+    metadata: {
+      fileAttributes: properties,
+      packageName: _version.name,
+      packageVersion: _version.version
+    }
+  });
+};
+
+exports.succeedMediaFileUfoExperience = succeedMediaFileUfoExperience;
+
+var failMediaFileUfoExperience = function failMediaFileUfoExperience(properties) {
+  var refinedMetadata = _objectSpread(_objectSpread({}, properties), {}, {
+    packageName: _version.name,
+    packageVersion: _version.version
+  });
+
+  getExperience().failure({
+    metadata: refinedMetadata
+  });
+};
+
+exports.failMediaFileUfoExperience = failMediaFileUfoExperience;

package/dist/cjs/errorMessage.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getErrorMessageFromError = exports.errorReasonToMessages = exports.default = exports.ErrorMessage = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -37,6 +39,12 @@ var _loadFailed = require("./analytics/events/operational/loadFailed");
 
 var _previewUnsupported = require("./analytics/events/operational/previewUnsupported");
 
+var _ufoExperiences = require("./analytics/ufoExperiences");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -100,6 +108,15 @@ var ErrorMessage = /*#__PURE__*/function (_React$Component) {
       if (supressAnalytics !== true) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState);
         (0, _analytics.fireAnalytics)(payload, props);
+
+        var rawPayload = _objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes);
+
+        if (Object.keys(rawPayload).includes('status')) {
+          delete rawPayload['status'];
+        }
+
+        var failMediaFileUfoExperiencePayload = rawPayload;
+        (0, _ufoExperiences.failMediaFileUfoExperience)(failMediaFileUfoExperiencePayload);
       }
     }
   }, {

package/dist/cjs/errors.js

@@ -108,9 +108,19 @@ function getSecondaryErrorReason(error) {
 
 function getErrorDetail(error) {
   // when the secondaryReason is "nativeError" we extract the error message for debugging
-  if (error && isMediaViewerError(error) && getSecondaryErrorReason(error) === 'nativeError') {
-    // pls don't send stack traces, they can get polluted and blow out payload sizes
-    return error.secondaryError && error.secondaryError.message;
+  if (error && isMediaViewerError(error)) {
+    if (getSecondaryErrorReason(error) === 'nativeError') {
+      // pls don't send stack traces, they can get polluted and blow out payload sizes
+      return error.secondaryError && error.secondaryError.message;
+    }
+
+    var _secondaryError = error.secondaryError;
+
+    if (_secondaryError && ((0, _mediaClient.isRequestError)(_secondaryError) || (0, _mediaClient.isMediaStoreError)(_secondaryError))) {
+      var _secondaryError$inner;
+
+      return (_secondaryError$inner = _secondaryError.innerError) === null || _secondaryError$inner === void 0 ? void 0 : _secondaryError$inner.message;
+    }
   }
 }
 

package/dist/cjs/header.js

@@ -117,10 +117,10 @@ var Header = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFileTypeText", function (item) {
       // render appropriate header if its a code/email item and the feature flag is enabled
-      if ((0, _codeViewer.isCodeViewerItem)(item.name)) {
+      if ((0, _codeViewer.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);
+        var language = (0, _codeViewer.getLanguageType)(item.name, item.mimeType);
         var ext = (0, _codeViewer.getExtension)(item.name); // specific cases for if we want a certain word translated in other languages
 
         switch (ext) {

package/dist/cjs/item-viewer.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFileStateItem = exports.isExternalImageItem = exports.ItemViewerBase = exports.ItemViewer = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -25,6 +27,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+
 var _mediaClient = require("@atlaskit/media-client");
 
 var _reactIntlNext = require("react-intl-next");
@@ -35,14 +39,6 @@ var _codeViewer = require("@atlaskit/media-ui/codeViewer");
 
 var _domain = require("./domain");
 
-var _image = require("./viewers/image");
-
-var _video = require("./viewers/video");
-
-var _doc = require("./viewers/doc");
-
-var _codeViewer2 = require("./viewers/codeViewer");
-
 var _loading = require("./loading");
 
 var _deepEqual = _interopRequireDefault(require("deep-equal"));
@@ -61,16 +57,81 @@ var _loadSucceeded = require("./analytics/events/operational/loadSucceeded");
 
 var _analytics = require("./analytics");
 
-var _audio = require("./viewers/audio");
-
 var _interactiveImg = require("./viewers/image/interactive-img");
 
 var _archiveViewerLoader = _interopRequireDefault(require("./viewers/archiveSidebar/archiveViewerLoader"));
 
+var _ufoExperiences = require("./analytics/ufoExperiences");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ImageViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/image'));
+    }).then(function (mod) {
+      return mod.ImageViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var VideoViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/video'));
+    }).then(function (mod) {
+      return mod.VideoViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var AudioViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/audio'));
+    }).then(function (mod) {
+      return mod.AudioViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var DocViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/doc'));
+    }).then(function (mod) {
+      return mod.DocViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+var CodeViewer = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./viewers/codeViewer'));
+    }).then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+
 var isExternalImageItem = function isExternalImageItem(fileItem) {
   return fileItem === 'external-image';
 };
@@ -108,6 +169,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
           (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes), _this.props);
+          (0, _ufoExperiences.succeedMediaFileUfoExperience)(fileAttributes);
         }
       });
     });
@@ -120,6 +182,9 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
         fileId: 'external-image'
       }), _this.props);
+      (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+        fileId: 'external-image'
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgError", function () {
       _this.setState({
@@ -173,8 +238,8 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         previewCount: previewCount
       };
 
-      if ((0, _codeViewer.isCodeViewerItem)(fileState.name)) {
-        return /*#__PURE__*/_react.default.createElement(_codeViewer2.CodeViewer, (0, _extends2.default)({
+      if ((0, _codeViewer.isCodeViewerItem)(fileState.name, fileState.mimeType)) {
+        return /*#__PURE__*/_react.default.createElement(CodeViewer, (0, _extends2.default)({
           onSuccess: this.onSuccess,
           onError: this.onLoadFail
         }, viewerProps));
@@ -182,28 +247,28 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
       switch (fileState.mediaType) {
         case 'image':
-          return /*#__PURE__*/_react.default.createElement(_image.ImageViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(ImageViewer, (0, _extends2.default)({
             onLoad: this.onSuccess,
             onError: this.onLoadFail,
             contextId: contextId
           }, viewerProps));
 
         case 'audio':
-          return /*#__PURE__*/_react.default.createElement(_audio.AudioViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(AudioViewer, (0, _extends2.default)({
             showControls: showControls,
             onCanPlay: this.onSuccess,
             onError: this.onLoadFail
           }, viewerProps));
 
         case 'video':
-          return /*#__PURE__*/_react.default.createElement(_video.VideoViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(VideoViewer, (0, _extends2.default)({
             showControls: showControls,
             onCanPlay: this.onSuccess,
             onError: this.onLoadFail
           }, viewerProps));
 
         case 'doc':
-          return /*#__PURE__*/_react.default.createElement(_doc.DocViewer, (0, _extends2.default)({
+          return /*#__PURE__*/_react.default.createElement(DocViewer, (0, _extends2.default)({
             onSuccess: this.onSuccess,
             onError: this.onLoadFail
           }, viewerProps));
@@ -326,6 +391,7 @@ var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
 
       var id = identifier.id;
       (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id), this.props);
+      (0, _ufoExperiences.startMediaFileUfoExperience)();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName
       }).subscribe({

package/dist/cjs/media-viewer.js

@@ -212,7 +212,14 @@ var MediaViewer = (0, _mediaCommon.withMediaAnalyticsContext)({
   component: _analytics.component,
   componentName: _analytics.componentName
 }, {
-  filterFeatureFlags: []
+  filterFeatureFlags: (0, _mediaCommon.filterFeatureFlagNames)({
+    newCardExperience: false,
+    captions: false,
+    timestampOnVideo: false,
+    observedWidth: false,
+    mediaInline: false,
+    folderUploads: false
+  })
 })((0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(MediaViewerComponent, {
   enforceContext: false
 })));

package/dist/cjs/navigation.js

@@ -29,7 +29,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -118,7 +118,7 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
         keyCode: 37,
         handler: prev('keyboard')
-      }), /*#__PURE__*/_react.default.createElement(_button.default, {
+      }), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         testId: prevNavButtonId,
         onClick: prev('mouse'),
         iconBefore: /*#__PURE__*/_react.default.createElement(_chevronLeftCircle.default, {
@@ -131,7 +131,7 @@ var NavigationBase = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
         keyCode: 39,
         handler: next('keyboard')
-      }), /*#__PURE__*/_react.default.createElement(_button.default, {
+      }), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         testId: nextNavButtonId,
         onClick: next('mouse'),
         iconBefore: /*#__PURE__*/_react.default.createElement(_chevronRightCircle.default, {

package/dist/cjs/styled.js

@@ -176,7 +176,7 @@ var Audio = _styledComponents.default.audio(_templateObject33 || (_templateObjec
 
 exports.Audio = Audio;
 
-var AudioCover = _styledComponents.default.img(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000000;\n"])));
+var AudioCover = _styledComponents.default.img(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  object-fit: scale-down;\n  background-color: #000;\n"])));
 
 exports.AudioCover = AudioCover;
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "46.0.1",
+	"version": "46.2.1",
 	"sideEffects": false
 }

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

@@ -27,9 +27,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styled = require("./styled");
-
-var _navigationNext = require("@atlaskit/navigation-next");
+var _sideNavigation = require("@atlaskit/side-navigation");
 
 var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/folder/24"));
 
@@ -39,6 +37,8 @@ var _mediaCommon = require("@atlaskit/media-common");
 
 var _mediaTypeIcon = require("@atlaskit/media-ui/media-type-icon");
 
+var _styled = require("./styled");
+
 var _utils = require("../../utils");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -71,14 +71,13 @@ var ArchiveSidebarFolderEntry = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react.default.createElement(_styled.ArchiveSidebarFileEntryWrapper, {
         key: entry.name
-      }, /*#__PURE__*/_react.default.createElement(_styled.SidebarItemWrapper, null, /*#__PURE__*/_react.default.createElement(_navigationNext.Item, {
-        before: function before() {
-          return _this.renderEntryIcon(entry);
-        },
-        text: _this.formatName(root, entry.name),
-        spacing: "compact",
-        onClick: onClick
-      })), entry.isDirectory ? null : _this.renderDownloadButton(entry, root));
+      }, /*#__PURE__*/_react.default.createElement(_styled.SidebarItemWrapper, null, /*#__PURE__*/_react.default.createElement(_sideNavigation.ButtonItem, {
+        iconBefore: _this.renderEntryIcon(entry),
+        onClick: onClick,
+        cssFn: function cssFn() {
+          return _styled.itemStyle;
+        }
+      }, _this.formatName(root, entry.name))), entry.isDirectory ? null : _this.renderDownloadButton(entry, root));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderEntryIcon", function (entry) {
       if (entry.isDirectory) {

package/dist/cjs/viewers/archiveSidebar/archive-sidebar-header.js

@@ -25,12 +25,14 @@ var _react = _interopRequireDefault(require("react"));
 
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 
-var _navigationNext = require("@atlaskit/navigation-next");
+var _sideNavigation = require("@atlaskit/side-navigation");
 
 var _home = _interopRequireDefault(require("@atlaskit/icon/glyph/home"));
 
 var _utils = require("../../utils");
 
+var _styled = require("./styled");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -66,12 +68,12 @@ var ArchiveSidebarHeader = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           folderName = _this$props.folderName,
           onHeaderClick = _this$props.onHeaderClick;
-      return /*#__PURE__*/_react.default.createElement(_navigationNext.Item, {
-        before: this.getHeaderIcon,
-        text: (0, _utils.getFormattedFolderName)(folderName),
-        spacing: "compact",
-        onClick: onHeaderClick
-      });
+      return /*#__PURE__*/_react.default.createElement(_sideNavigation.ButtonItem, {
+        onClick: onHeaderClick,
+        cssFn: function cssFn() {
+          return _styled.itemStyle;
+        }
+      }, /*#__PURE__*/_react.default.createElement(_styled.SidebarHeaderWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.SidebarHeaderIcon, null, this.getHeaderIcon()), /*#__PURE__*/_react.default.createElement(_styled.SidebarHeaderEntry, null, (0, _utils.getFormattedFolderName)(folderName))));
     }
   }]);
   return ArchiveSidebarHeader;

package/dist/cjs/viewers/archiveSidebar/archive-sidebar-renderer.js

@@ -41,8 +41,6 @@ var _errors = require("../../errors");
 
 var _styled2 = require("./styled");
 
-var _navigationNext = require("@atlaskit/navigation-next");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -133,12 +131,7 @@ var ArchiveSidebarRenderer = /*#__PURE__*/function (_Component) {
           isArchiveEntryLoading = _this$props2.isArchiveEntryLoading,
           onSelectedArchiveEntryChange = _this$props2.onSelectedArchiveEntryChange,
           onError = _this$props2.onError;
-      return /*#__PURE__*/_react.default.createElement(_navigationNext.ThemeProvider, {
-        theme: {
-          context: 'product',
-          mode: _navigationNext.dark
-        }
-      }, status === 'loading' && /*#__PURE__*/_react.default.createElement(_styled2.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null))) || /*#__PURE__*/_react.default.createElement(_archiveSidebar.ArchiveSidebar, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, status === 'loading' && /*#__PURE__*/_react.default.createElement(_styled2.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_styled.SpinnerWrapper, null, /*#__PURE__*/_react.default.createElement(_loading.Spinner, null))) || /*#__PURE__*/_react.default.createElement(_archiveSidebar.ArchiveSidebar, {
         entries: entries,
         onEntrySelected: onSelectedArchiveEntryChange,
         onHeaderClicked: onHeaderClicked,

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

@@ -35,8 +35,6 @@ var _styled = require("./styled");
 
 var _archiveSidebarFolderEntry = require("./archive-sidebar-folder-entry");
 
-var _navigationNext = require("@atlaskit/navigation-next");
-
 var _archiveSidebarHeader = require("./archive-sidebar-header");
 
 var _utils = require("../../utils");
@@ -251,7 +249,7 @@ var ArchiveSidebar = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react.default.createElement(_styled.ArchiveSideBar, null, /*#__PURE__*/_react.default.createElement(_archiveSidebarHeader.ArchiveSidebarHeader, {
         folderName: currentArchiveSidebarFolder.root,
         onHeaderClick: this.onHeaderClicked
-      }), /*#__PURE__*/_react.default.createElement(_navigationNext.Separator, null), /*#__PURE__*/_react.default.createElement(_archiveSidebarFolderEntry.ArchiveSidebarFolderEntry, (0, _extends2.default)({}, currentArchiveSidebarFolder, {
+      }), /*#__PURE__*/_react.default.createElement(_styled.Separator, null), /*#__PURE__*/_react.default.createElement(_archiveSidebarFolderEntry.ArchiveSidebarFolderEntry, (0, _extends2.default)({}, currentArchiveSidebarFolder, {
         onError: onError
       })));
     }

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

@@ -27,6 +27,12 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _react = _interopRequireDefault(require("react"));
 
+var _unzipit = require("unzipit");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _mediaUi = require("@atlaskit/media-ui");
+
 var _domain = require("../../domain");
 
 var _styled = require("../../styled");
@@ -39,14 +45,8 @@ var _baseViewer = require("../base-viewer");
 
 var _interactiveImg = require("../image/interactive-img");
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _pdfRenderer = require("../doc/pdfRenderer");
 
-var _unzipit = require("unzipit");
-
-var _reactIntlNext = require("react-intl-next");
-
 var _styled2 = require("./styled");
 
 var _archiveSidebarRenderer = _interopRequireDefault(require("./archive-sidebar-renderer"));