@atlaskit/media-viewer 48.10.1 → 49.0.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/media-viewer
 
+## 49.0.1
+
+### Patch Changes
+
+- [#150125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150125)
+  [`8217cf9a2faac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8217cf9a2faac) -
+  fix withMediaClient usage in Media Viewer and unit tests
+
+## 49.0.0
+
+### Major Changes
+
+- [#149704](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/149704)
+  [`58dcd069492e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/58dcd069492e5) -
+  remove mediaviewer v2 feature flag making the default experience the refactored one which may
+  result in tests failing where consumers test the internals of media components
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 48.10.1
 
 ### Patch Changes

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 = "48.10.1";
+var packageVersion = exports.packageVersion = "49.0.1";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

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.10.1";
+var packageVersion = "49.0.1";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

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

@@ -9,11 +9,9 @@ exports.MediaViewerWithMediaClient = exports.MediaViewerBase = 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");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -45,7 +43,6 @@ var normaliseItems = function normaliseItems(items, selectedItem, collectionName
 var MediaViewerBase = exports.MediaViewerBase = function MediaViewerBase(_ref) {
   var featureFlags = _ref.featureFlags,
     onClose = _ref.onClose,
-    mediaClient = _ref.mediaClient,
     selectedItem = _ref.selectedItem,
     collectionName = _ref.collectionName,
     items = _ref.items,
@@ -77,15 +74,7 @@ var MediaViewerBase = exports.MediaViewerBase = function MediaViewerBase(_ref) {
       parent.postMessage(closingMsg, '*');
     };
   }, []);
-  return (0, _platformFeatureFlags.fg)('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,
+  return /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
     selectedItem: normalisedSelectedItem,
     onClose: onClose,
     items: normalisedItems,
@@ -98,6 +87,8 @@ var MediaViewerBase = exports.MediaViewerBase = function MediaViewerBase(_ref) {
 // Can't export in a single line. Typescript struggles to recognize the component signature in the error boundary test file ./media-viewer-error-boundary.test.tsx
 // export const MediaViewerWithMediaClient = withMediaClient(MediaViewerBase)
 var MediaViewerWithMediaClient = exports.MediaViewerWithMediaClient = function MediaViewerWithMediaClient(props) {
-  var ViewerComponent = (0, _mediaClientReact.withMediaClient)(MediaViewerBase);
+  var ViewerComponent = _react.default.useMemo(function () {
+    return (0, _mediaClientReact.withMediaClient)(MediaViewerBase);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(ViewerComponent, props);
 };

package/dist/cjs/header.js

@@ -1,250 +1,161 @@
 "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.Header = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _mediaClient = require("@atlaskit/media-client");
-var _deepEqual = _interopRequireDefault(require("deep-equal"));
 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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var initialState = {
-  item: _domain.Outcome.pending()
-};
-var Header = exports.Header = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Header, _React$Component);
-  var _super = _createSuper(Header);
-  function Header() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Header);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", initialState);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDownload", function () {
-      var item = _this.state.item;
-      var _this$props = _this.props,
-        identifier = _this$props.identifier,
-        mediaClient = _this$props.mediaClient;
-      return 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
-          });
-        }
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSidebarButton", function () {
-      var _this$props2 = _this.props,
-        extensions = _this$props2.extensions,
-        isSidebarVisible = _this$props2.isSidebarVisible,
-        onSidebarButtonClick = _this$props2.onSidebarButtonClick;
-      if (extensions && extensions.sidebar) {
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaButton, {
-          isSelected: isSidebarVisible,
-          testId: "media-viewer-sidebar-button",
-          onClick: onSidebarButtonClick,
-          iconBefore: extensions.sidebar.icon
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSize", function (item) {
-      if (item.size) {
-        return _this.renderSeparator() + (0, _mediaUi.toHumanReadableMediaSize)(item.size);
-      } else {
-        return '';
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSeparator", function () {
-      return ' · ';
-    });
-    (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, 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);
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var Header = exports.Header = function Header(_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];
 
-        // 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);
-        }
+  // 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;
 
-        // 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'];
+  // 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;
 
-      // 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);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMediaIcon", function (mediaType, mimeType, fileName) {
-      return /*#__PURE__*/_react.default.createElement(_mimeTypeIcon.MimeTypeIcon, {
-        testId: 'media-viewer-file-type-icon',
-        mediaType: mediaType,
-        mimeType: mimeType,
-        name: fileName
-      });
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(Header, [{
-    key: "UNSAFE_componentWillUpdate",
-    value: function UNSAFE_componentWillUpdate(nextProps) {
-      if (this.needsReset(this.props, nextProps)) {
-        this.release();
-        this.init(nextProps);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.init(this.props);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.release();
-    }
-  }, {
-    key: "init",
-    value: function init(props) {
-      var _this2 = this;
-      this.setState(initialState, function () {
-        var mediaClient = props.mediaClient,
-          identifier = props.identifier,
-          onSetArchiveSideBarVisible = props.onSetArchiveSideBarVisible;
-        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
-          };
-          _this2.setState({
-            item: _domain.Outcome.successful(fileState)
-          });
-          return;
-        }
-        var id = identifier.id;
-        _this2.subscription = mediaClient.file.getFileState(id, {
-          collectionName: identifier.collectionName
-        }).subscribe({
-          next: function next(file) {
-            onSetArchiveSideBarVisible === null || onSetArchiveSideBarVisible === void 0 || onSetArchiveSideBarVisible(!(0, _mediaClient.isErrorFileState)(file) && file.mediaType === 'archive');
-            _this2.setState({
-              item: _domain.Outcome.successful(file)
-            });
-          },
-          error: function error(_error) {
-            _this2.setState({
-              item: _domain.Outcome.failed(new _errors.MediaViewerError('header-fetch-metadata', _error))
-            });
-          }
-        });
-      });
+      // 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;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$isArchive = this.props.isArchiveSideBarVisible,
-        isArchiveSideBarVisible = _this$props$isArchive === void 0 ? false : _this$props$isArchive;
-      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
-      }, /*#__PURE__*/_react.default.createElement(_styleWrappers.LeftHeader, null, this.renderMetadata()), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightHeader, null, this.renderSidebarButton(), this.renderDownload()));
+    if (!fileState) {
+      return;
     }
-  }, {
-    key: "renderMetadata",
-    value: function renderMetadata() {
-      var _this3 = this;
-      var item = this.state.item;
-      return item.match({
-        successful: function successful(item) {
-          return _this3.renderMetadataLayout(item);
-        },
-        pending: function pending() {
-          return null;
-        },
-        failed: function failed() {
-          return null;
-        }
-      });
+    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)));
     }
-  }, {
-    key: "renderMetadataLayout",
-    value: function renderMetadataLayout(item) {
-      if (!(0, _mediaClient.isErrorFileState)(item)) {
-        return /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.MetadataIconWrapper, null, this.getMediaIcon(item.mediaType, item.mimeType, 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, this.renderFileTypeText(item)), this.renderSize(item))));
-      } else {
-        return null;
+  }, [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));
     }
-  }, {
-    key: "needsReset",
-    value: function needsReset(propsA, propsB) {
-      return !(0, _deepEqual.default)(propsA.identifier, propsB.identifier);
+    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
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    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;
     }
-  }, {
-    key: "release",
-    value: function release() {
-      if (this.subscription) {
-        this.subscription.unsubscribe();
-      }
+  })), /*#__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
+      });
     }
-  }]);
-  return Header;
-}(_react.default.Component);
+  })));
+};
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Header);