@atlaskit/media-viewer 48.1.7 → 48.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/media-viewer
 
+## 48.2.0
+
+### Minor Changes
+
+- [#43014](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43014) [`761551f78ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/761551f78ab) - Implement useFileState hook on Media Viewer under Version 2
+
+### Patch Changes
+
+- [#43014](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43014) [`f021d31543e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f021d31543e) - create useFileState hook versions of header and itemviewer, create list-v2, refactor MediaFileStateError to media-client-react
+- Updated dependencies
+
 ## 48.1.7
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _mediaCommon = require("@atlaskit/media-common");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "48.1.7";
+var packageVersion = exports.packageVersion = "48.2.0";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {
@@ -41,8 +41,7 @@ function getFileAttributes(fileState) {
 
 /** This type takes FailureAttributes and redefines `failReason` to be the strong media-viewer type */
 
-function fireAnalytics(payload, props) {
-  var createAnalyticsEvent = props.createAnalyticsEvent;
+function fireAnalytics(payload, createAnalyticsEvent) {
   if (createAnalyticsEvent) {
     var ev = createAnalyticsEvent(payload);
     ev.fire(_mediaCommon.ANALYTICS_MEDIA_CHANNEL);

package/dist/cjs/analytics/ufoExperiences.js

@@ -12,7 +12,7 @@ var _mediaCommon = require("@atlaskit/media-common");
 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 = "48.1.7";
+var packageVersion = "48.2.0";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/components/media-viewer.js

@@ -9,9 +9,11 @@ exports.MediaViewer = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _mediaViewerV = require("../v2/media-viewer-v2");
 var _mediaViewer = require("../media-viewer");
 var _utils = require("../utils");
 var _mediaClient = require("@atlaskit/media-client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 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; }
@@ -36,6 +38,9 @@ var normaliseItems = function normaliseItems(items, selectedItem, collectionName
     selectedItem: selectedItemWithCollectionName
   };
 };
+
+// TODO: This component will be removed in https://product-fabric.atlassian.net/browse/CXP-2722
+
 var MediaViewer = exports.MediaViewer = function MediaViewer(_ref) {
   var featureFlags = _ref.featureFlags,
     onClose = _ref.onClose,
@@ -71,7 +76,14 @@ var MediaViewer = exports.MediaViewer = function MediaViewer(_ref) {
       parent.postMessage(closingMsg, '*');
     };
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.media-experience.media-viewer-v2_hgsii') ? /*#__PURE__*/_react.default.createElement(_mediaViewerV.MediaViewerV2, {
+    selectedItem: normalisedSelectedItem,
+    onClose: onClose,
+    items: normalisedItems,
+    featureFlags: featureFlags,
+    extensions: extensions,
+    contextId: contextId
+  }) : /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
     mediaClient: mediaClient,
     selectedItem: normalisedSelectedItem,
     onClose: onClose,

package/dist/cjs/errorMessage.js

@@ -70,12 +70,14 @@ var ErrorMessage = exports.ErrorMessage = /*#__PURE__*/function (_React$Componen
         error = props.error,
         fileState = props.fileState,
         fileId = props.fileId,
-        traceContext = props.traceContext;
+        traceContext = props.traceContext,
+        createAnalyticsEvent = props.createAnalyticsEvent,
+        fileStateFlags = props.fileStateFlags;
       if (supressAnalytics !== true) {
         var payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
-        (0, _analytics.fireAnalytics)(payload, props);
+        (0, _analytics.fireAnalytics)(payload, createAnalyticsEvent);
         var rawPayload = _objectSpread(_objectSpread({}, payload === null || payload === void 0 ? void 0 : payload.attributes), {}, {
-          fileStateFlags: props.fileStateFlags
+          fileStateFlags: fileStateFlags
         });
         if (Object.keys(rawPayload).includes('status')) {
           delete rawPayload['status'];

package/dist/cjs/item-viewer.js

@@ -131,7 +131,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
-          (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, _this.traceContext), _this.props);
+          (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, _this.traceContext), _this.props.createAnalyticsEvent);
           (0, _ufoExperiences.succeedMediaFileUfoExperience)({
             fileAttributes: fileAttributes,
             fileStateFlags: _this.fileStateFlags
@@ -147,7 +147,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExternalImgSuccess", function () {
       (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
         fileId: 'external-image'
-      }), _this.props);
+      }), _this.props.createAnalyticsEvent);
       (0, _ufoExperiences.succeedMediaFileUfoExperience)({
         fileAttributes: {
           fileId: 'external-image'
@@ -352,7 +352,8 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
     value: function init(props) {
       var _this3 = this;
       var mediaClient = props.mediaClient,
-        identifier = props.identifier;
+        identifier = props.identifier,
+        createAnalyticsEvent = props.createAnalyticsEvent;
       if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
         // external images do not need to talk to our backend,
         // so therefore no need for media-client subscriptions.
@@ -363,7 +364,7 @@ var ItemViewerBase = exports.ItemViewerBase = /*#__PURE__*/function (_React$Comp
         return;
       }
       var id = identifier.id;
-      (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id, this.traceContext), this.props);
+      (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(id, this.traceContext), createAnalyticsEvent);
       (0, _ufoExperiences.startMediaFileUfoExperience)();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName

package/dist/cjs/media-viewer.js

@@ -44,16 +44,20 @@ var MediaViewerComponent = exports.MediaViewerComponent = /*#__PURE__*/function
       isSidebarVisible: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onShortcutClosed", function () {
-      (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('escKey'), _this.props);
-      var onClose = _this.props.onClose;
+      var _this$props = _this.props,
+        onClose = _this$props.onClose,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('escKey'), createAnalyticsEvent);
       if (onClose) {
         onClose();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onContentClose", function (_e, analyticsEvent) {
-      var onClose = _this.props.onClose;
+      var _this$props2 = _this.props,
+        onClose = _this$props2.onClose,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
       if (analyticsEvent && analyticsEvent.payload && analyticsEvent.payload.actionSubject === 'button') {
-        (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('button'), _this.props);
+        (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('button'), createAnalyticsEvent);
       }
       if (onClose) {
         onClose();
@@ -88,29 +92,29 @@ var MediaViewerComponent = exports.MediaViewerComponent = /*#__PURE__*/function
   (0, _createClass2.default)(MediaViewerComponent, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
-      (0, _analytics.fireAnalytics)((0, _modal.createModalEvent)(), this.props);
+      (0, _analytics.fireAnalytics)((0, _modal.createModalEvent)(), this.props.createAnalyticsEvent);
       (0, _perfMarks.start)('MediaViewer.SessionDuration');
     }
   }, {
     key: "defaultSelectedItem",
     get: function get() {
-      var _this$props = this.props,
-        items = _this$props.items,
-        selectedItem = _this$props.selectedItem;
+      var _this$props3 = this.props,
+        items = _this$props3.items,
+        selectedItem = _this$props3.selectedItem;
       var firstItem = items[0];
       return selectedItem || firstItem;
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        mediaClient = _this$props2.mediaClient,
-        onClose = _this$props2.onClose,
-        items = _this$props2.items,
-        extensions = _this$props2.extensions,
-        contextId = _this$props2.contextId,
-        featureFlags = _this$props2.featureFlags,
-        innerRef = _this$props2.innerRef;
+      var _this$props4 = this.props,
+        mediaClient = _this$props4.mediaClient,
+        onClose = _this$props4.onClose,
+        items = _this$props4.items,
+        extensions = _this$props4.extensions,
+        contextId = _this$props4.contextId,
+        featureFlags = _this$props4.featureFlags,
+        innerRef = _this$props4.innerRef;
       var isSidebarVisible = this.state.isSidebarVisible;
       var content = /*#__PURE__*/_react.default.createElement("div", {
         ref: innerRef
@@ -118,7 +122,7 @@ var MediaViewerComponent = exports.MediaViewerComponent = /*#__PURE__*/function
         "data-testid": "media-viewer-popup",
         className: _classnames.mediaViewerPopupClass
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
-        keyCode: 27,
+        code: 'Escape',
         handler: this.onShortcutClosed
       }), /*#__PURE__*/_react.default.createElement(_content.Content, {
         isSidebarVisible: isSidebarVisible,

package/dist/cjs/navigation.js

@@ -41,11 +41,12 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
       return function () {
         var _this$props = _this.props,
           onChange = _this$props.onChange,
-          items = _this$props.items;
+          items = _this$props.items,
+          createAnalyticsEvent = _this$props.createAnalyticsEvent;
         var selectedIndex = _this.selectedIndex;
         var newItem = direction === 'next' ? items[selectedIndex + 1] : items[selectedIndex - 1];
         if (newItem) {
-          (0, _analytics.fireAnalytics)((0, _navigated.createNavigatedEvent)(direction, source, newItem), _this.props);
+          (0, _analytics.fireAnalytics)((0, _navigated.createNavigatedEvent)(direction, source, newItem), createAnalyticsEvent);
           onChange(newItem);
         }
       };
@@ -82,7 +83,7 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
       }, isLeftVisible ? /*#__PURE__*/_react.default.createElement(_styleWrappers.Arrow, {
         className: _mediaUi.hideControlsClassName
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
-        keyCode: 37,
+        code: 'ArrowLeft',
         handler: prev('keyboard')
       }), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         testId: prevNavButtonId,
@@ -100,7 +101,7 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
       })) : null), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightWrapper, null, isRightVisible ? /*#__PURE__*/_react.default.createElement(_styleWrappers.Arrow, {
         className: _mediaUi.hideControlsClassName
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
-        keyCode: 39,
+        code: 'ArrowRight',
         handler: next('keyboard')
       }), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         testId: nextNavButtonId,

package/dist/cjs/styleWrappers.js

@@ -13,6 +13,7 @@ var _reactScrolllock = require("react-scrolllock");
 var _useCallbackRef = require("use-callback-ref");
 /** @jsx jsx */
 
+// We are keeping this data-testid since JIRA is still using it in their codebase to perform checks. Before removing this, we need to ensure this 'media-viewer-popup' test id is not being used anywhere else in other codebases
 var Blanket = exports.Blanket = function Blanket(_ref) {
   var datatestId = _ref['data-testid'],
     className = _ref.className,

package/dist/cjs/v2/header-v2.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HeaderV2 = 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 _reactIntlNext = require("react-intl-next");
+var _domain = require("../domain");
+var _styleWrappers = require("../styleWrappers");
+var _download = require("../download");
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
+var _util = require("../viewers/codeViewer/util");
+var _errors = require("../errors");
+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; }
+var HeaderV2 = exports.HeaderV2 = function HeaderV2(_ref) {
+  var _ref$isArchiveSideBar = _ref.isArchiveSideBarVisible,
+    isArchiveSideBarVisible = _ref$isArchiveSideBar === void 0 ? false : _ref$isArchiveSideBar,
+    extensions = _ref.extensions,
+    isSidebarVisible = _ref.isSidebarVisible,
+    onSidebarButtonClick = _ref.onSidebarButtonClick,
+    identifier = _ref.identifier,
+    onSetArchiveSideBarVisible = _ref.onSetArchiveSideBarVisible;
+  // States
+  var _useState = (0, _react.useState)(_domain.Outcome.pending()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    item = _useState2[0],
+    setItem = _useState2[1];
+
+  // Refs and Hooks
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var _ref2 = identifier,
+    id = _ref2.id,
+    collectionName = _ref2.collectionName,
+    occurrenceKey = _ref2.occurrenceKey;
+  var _useFileState = (0, _mediaClientReact.useFileState)(id, {
+      collectionName: collectionName,
+      occurrenceKey: occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  var onSetArchiveSideBarVisibleRef = (0, _react.useRef)(onSetArchiveSideBarVisible);
+  onSetArchiveSideBarVisibleRef.current = onSetArchiveSideBarVisible;
+
+  // previous values
+  (0, _react.useEffect)(function () {
+    if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
+      var _identifier$name = identifier.name,
+        name = _identifier$name === void 0 ? identifier.dataURI : _identifier$name;
+
+      // Simulate a processing file state to render right metadata
+      var _fileState = {
+        status: 'processing',
+        id: name,
+        mediaType: 'image',
+        mimeType: 'image/',
+        name: name,
+        representations: {},
+        size: 0
+      };
+      setItem(_domain.Outcome.successful(_fileState));
+      return;
+    }
+    if (!fileState) {
+      return;
+    }
+    if (fileState.status !== 'error') {
+      var _onSetArchiveSideBarV;
+      (_onSetArchiveSideBarV = onSetArchiveSideBarVisibleRef.current) === null || _onSetArchiveSideBarV === void 0 || _onSetArchiveSideBarV.call(onSetArchiveSideBarVisibleRef, !(0, _mediaClient.isErrorFileState)(fileState) && fileState.mediaType === 'archive');
+      setItem(_domain.Outcome.successful(fileState));
+    } else {
+      var error = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+      setItem(_domain.Outcome.failed(new _errors.MediaViewerError('header-fetch-metadata', error)));
+    }
+  }, [fileState, identifier]);
+  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)) {
+      // 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);
+
+      // specific cases for if we want a certain word translated in other languages
+      switch (ext) {
+        case 'msg':
+          return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.email);
+        case 'txt':
+          return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.text);
+      }
+
+      // no need for translations in other languages
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _util.getFormat)(language || 'unknown', ext));
+    }
+    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
+    };
+    var message = mediaTypeTranslationMap[mediaType || 'unknown'];
+
+    // Defaulting to unknown again since backend has more mediaTypes than the current supported ones
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, message || _mediaUi.messages.unknown);
+  };
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.Header, {
+    isArchiveSideBarVisible: isArchiveSideBarVisible,
+    className: _mediaUi.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, {
+        testId: 'media-viewer-file-type-icon',
+        mediaType: item.mediaType,
+        mimeType: item.mimeType,
+        name: item.name
+      })), /*#__PURE__*/_react.default.createElement(_styleWrappers.MedatadataTextWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataFileName, {
+        "data-testid": "media-viewer-file-name"
+      }, item.name || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.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) : '')));
+    },
+    pending: function pending() {
+      return null;
+    },
+    failed: function failed() {
+      return null;
+    }
+  })), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightHeader, null, (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
+    isSelected: isSidebarVisible,
+    testId: "media-viewer-sidebar-button",
+    onClick: onSidebarButtonClick,
+    iconBefore: extensions.sidebar.icon
+  }), item.match({
+    pending: function pending() {
+      return _download.DisabledToolbarDownloadButton;
+    },
+    failed: function failed() {
+      return _download.DisabledToolbarDownloadButton;
+    },
+    successful: function successful(item) {
+      return /*#__PURE__*/_react.default.createElement(_download.ToolbarDownloadButton, {
+        state: item,
+        identifier: identifier,
+        mediaClient: mediaClient
+      });
+    }
+  })));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(HeaderV2);