@atlaskit/media-viewer 48.1.7 → 48.2.0

package/dist/es2019/v2/media-viewer-v2.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState, useLayoutEffect, useRef } from 'react';
+import { IntlProvider, injectIntl } from 'react-intl-next';
+import { Shortcut } from '@atlaskit/media-ui';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { fireAnalytics } from '../analytics';
+import { createModalEvent } from '../analytics/events/screen/modal';
+import { createClosedEvent } from '../analytics/events/ui/closed';
+import { ListV2 } from './list-v2';
+import { Content } from '../content';
+import { Blanket, SidebarWrapper } from '../styleWrappers';
+import { start } from 'perf-marks';
+import { mediaViewerPopupClass } from '../classnames';
+import ScrollLock from 'react-scrolllock';
+import FocusLock from 'react-focus-lock';
+const MediaViewerComponent = ({
+  featureFlags,
+  items,
+  extensions,
+  contextId,
+  innerRef,
+  onClose,
+  selectedItem,
+  intl
+}) => {
+  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
+  const [selectedIdentifier, setSelectedIdentifier] = useState();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const createAnalyticsEventRef = useRef(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+  useLayoutEffect(() => {
+    fireAnalytics(createModalEvent(), createAnalyticsEventRef.current);
+    start('MediaViewer.SessionDuration');
+  }, []);
+  const defaultSelectedItem = selectedItem || items[0];
+  const renderSidebar = () => {
+    const sidebarSelectedIdentifier = selectedIdentifier || defaultSelectedItem;
+    if (sidebarSelectedIdentifier && isSidebarVisible && extensions && extensions.sidebar) {
+      return /*#__PURE__*/React.createElement(SidebarWrapper, {
+        "data-testid": "media-viewer-sidebar-content"
+      }, extensions.sidebar.renderer(sidebarSelectedIdentifier, {
+        close: () => setIsSidebarVisible(!isSidebarVisible)
+      }));
+    }
+  };
+  const content = /*#__PURE__*/React.createElement("div", {
+    ref: innerRef
+  }, /*#__PURE__*/React.createElement(Blanket, {
+    "data-testid": "media-viewer-popup",
+    className: mediaViewerPopupClass
+  }, /*#__PURE__*/React.createElement(Shortcut, {
+    code: 'Escape',
+    handler: () => {
+      fireAnalytics(createClosedEvent('escKey'), createAnalyticsEventRef.current);
+      onClose && onClose();
+    }
+  }), /*#__PURE__*/React.createElement(Content, {
+    isSidebarVisible: isSidebarVisible,
+    onClose: (_e, analyticsEvent) => {
+      var _analyticsEvent$paylo;
+      if ((analyticsEvent === null || analyticsEvent === void 0 ? void 0 : (_analyticsEvent$paylo = analyticsEvent.payload) === null || _analyticsEvent$paylo === void 0 ? void 0 : _analyticsEvent$paylo.actionSubject) === 'button') {
+        fireAnalytics(createClosedEvent('button'), createAnalyticsEventRef.current);
+      }
+      onClose && onClose();
+    }
+  }, /*#__PURE__*/React.createElement(ListV2, {
+    defaultSelectedItem: defaultSelectedItem || items[0],
+    items: items,
+    onClose: onClose,
+    extensions: extensions,
+    onNavigationChange: setSelectedIdentifier,
+    onSidebarButtonClick: () => setIsSidebarVisible(!isSidebarVisible),
+    isSidebarVisible: isSidebarVisible,
+    contextId: contextId,
+    featureFlags: featureFlags
+  })), renderSidebar()));
+  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: "en"
+  }, content);
+};
+const MediaViewerWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(MediaViewerComponent, _extends({}, props, {
+    innerRef: ref
+  }));
+});
+const MediaViewerWithScrollLock = props => {
+  return /*#__PURE__*/React.createElement(FocusLock, {
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(ScrollLock, null), /*#__PURE__*/React.createElement(MediaViewerWithRef, props));
+};
+export const MediaViewerV2 = injectIntl(MediaViewerWithScrollLock, {
+  enforceContext: false
+});

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

@@ -88,7 +88,7 @@ export class ArchiveViewerBase extends BaseViewer {
       });
     });
     _defineProperty(this, "onViewerLoad", selectedArchiveEntry => () => {
-      fireAnalytics(createZipEntryLoadSucceededEvent(this.props.item, selectedArchiveEntry), this.props);
+      fireAnalytics(createZipEntryLoadSucceededEvent(this.props.item, selectedArchiveEntry), this.props.createAnalyticsEvent);
     });
     _defineProperty(this, "onViewerError", (primaryErrorReason, selectedArchiveEntry) => error => error && isMediaViewerError(error) ? this.onError(new ArchiveViewerError(primaryErrorReason, error.secondaryError, selectedArchiveEntry)) : this.onError(new ArchiveViewerError(primaryErrorReason, error, selectedArchiveEntry)));
     _defineProperty(this, "onSidebarLoaded", () => {
@@ -229,9 +229,10 @@ export class ArchiveViewerBase extends BaseViewer {
   }
   renderPreviewError(error, entry) {
     const {
-      item
+      item,
+      createAnalyticsEvent
     } = this.props;
-    fireAnalytics(createZipEntryLoadFailedEvent(this.props.item, error, entry), this.props);
+    fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
     return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       fileId: item.id,
       fileState: item,

package/dist/es2019/zoomControls.js

@@ -17,22 +17,24 @@ export class ZoomControlsBase extends Component {
     _defineProperty(this, "zoomIn", () => {
       const {
         onChange,
-        zoomLevel
+        zoomLevel,
+        createAnalyticsEvent
       } = this.props;
       if (zoomLevel.canZoomIn) {
         const zoom = zoomLevel.zoomIn();
-        fireAnalytics(createZoomInButtonClickEvent(zoom.value), this.props);
+        fireAnalytics(createZoomInButtonClickEvent(zoom.value), createAnalyticsEvent);
         onChange(zoom);
       }
     });
     _defineProperty(this, "zoomOut", () => {
       const {
         onChange,
-        zoomLevel
+        zoomLevel,
+        createAnalyticsEvent
       } = this.props;
       if (zoomLevel.canZoomOut) {
         const zoom = zoomLevel.zoomOut();
-        fireAnalytics(createZoomOutButtonClickedEvent(zoom.value), this.props);
+        fireAnalytics(createZoomOutButtonClickedEvent(zoom.value), createAnalyticsEvent);
         onChange(zoom);
       }
     });

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "48.1.7";
+var packageVersion = "48.2.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {
@@ -33,8 +33,7 @@ export function getFileAttributes(fileState) {
 
 /** This type takes FailureAttributes and redefines `failReason` to be the strong media-viewer type */
 
-export function fireAnalytics(payload, props) {
-  var createAnalyticsEvent = props.createAnalyticsEvent;
+export function fireAnalytics(payload, createAnalyticsEvent) {
   if (createAnalyticsEvent) {
     var ev = createAnalyticsEvent(payload);
     ev.fire(ANALYTICS_MEDIA_CHANNEL);

package/dist/esm/analytics/ufoExperiences.js

@@ -5,7 +5,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 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/esm/components/media-viewer.js

@@ -3,9 +3,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import React, { useEffect, useMemo } from 'react';
+import { MediaViewerV2 as MediaViewerNextGenV2 } from '../v2/media-viewer-v2';
 import { MediaViewer as MediaViewerNextGen } from '../media-viewer';
 import { isSameIdentifier } from '../utils';
 import { isFileIdentifier } from '@atlaskit/media-client';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var ensureCollectionName = function ensureCollectionName(identifier, collectionName) {
   return isFileIdentifier(identifier) ? _objectSpread(_objectSpread({}, identifier), {}, {
     collectionName: identifier.collectionName || collectionName
@@ -26,6 +28,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
+
 export var MediaViewer = function MediaViewer(_ref) {
   var featureFlags = _ref.featureFlags,
     onClose = _ref.onClose,
@@ -61,7 +66,14 @@ export var MediaViewer = function MediaViewer(_ref) {
       parent.postMessage(closingMsg, '*');
     };
   }, []);
-  return /*#__PURE__*/React.createElement(MediaViewerNextGen, {
+  return getBooleanFF('platform.media-experience.media-viewer-v2_hgsii') ? /*#__PURE__*/React.createElement(MediaViewerNextGenV2, {
+    selectedItem: normalisedSelectedItem,
+    onClose: onClose,
+    items: normalisedItems,
+    featureFlags: featureFlags,
+    extensions: extensions,
+    contextId: contextId
+  }) : /*#__PURE__*/React.createElement(MediaViewerNextGen, {
     mediaClient: mediaClient,
     selectedItem: normalisedSelectedItem,
     onClose: onClose,

package/dist/esm/errorMessage.js

@@ -63,12 +63,14 @@ export var ErrorMessage = /*#__PURE__*/function (_React$Component) {
         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);
-        fireAnalytics(payload, props);
+        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/esm/item-viewer.js

@@ -111,7 +111,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
       item.whenSuccessful(function (fileItem) {
         if (isFileStateItem(fileItem)) {
           var fileAttributes = getFileAttributes(fileItem);
-          fireAnalytics(createLoadSucceededEvent(fileAttributes, _this.traceContext), _this.props);
+          fireAnalytics(createLoadSucceededEvent(fileAttributes, _this.traceContext), _this.props.createAnalyticsEvent);
           succeedMediaFileUfoExperience({
             fileAttributes: fileAttributes,
             fileStateFlags: _this.fileStateFlags
@@ -127,7 +127,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onExternalImgSuccess", function () {
       fireAnalytics(createLoadSucceededEvent({
         fileId: 'external-image'
-      }), _this.props);
+      }), _this.props.createAnalyticsEvent);
       succeedMediaFileUfoExperience({
         fileAttributes: {
           fileId: 'external-image'
@@ -332,7 +332,8 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
     value: function init(props) {
       var _this3 = this;
       var mediaClient = props.mediaClient,
-        identifier = props.identifier;
+        identifier = props.identifier,
+        createAnalyticsEvent = props.createAnalyticsEvent;
       if (isExternalImageIdentifier(identifier)) {
         // external images do not need to talk to our backend,
         // so therefore no need for media-client subscriptions.
@@ -343,7 +344,7 @@ export var ItemViewerBase = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var id = identifier.id;
-      fireAnalytics(createCommencedEvent(id, this.traceContext), this.props);
+      fireAnalytics(createCommencedEvent(id, this.traceContext), createAnalyticsEvent);
       startMediaFileUfoExperience();
       this.subscription = mediaClient.file.getFileState(id, {
         collectionName: identifier.collectionName

package/dist/esm/media-viewer.js

@@ -37,16 +37,20 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
       isSidebarVisible: false
     });
     _defineProperty(_assertThisInitialized(_this), "onShortcutClosed", function () {
-      fireAnalytics(createClosedEvent('escKey'), _this.props);
-      var onClose = _this.props.onClose;
+      var _this$props = _this.props,
+        onClose = _this$props.onClose,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      fireAnalytics(createClosedEvent('escKey'), createAnalyticsEvent);
       if (onClose) {
         onClose();
       }
     });
     _defineProperty(_assertThisInitialized(_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') {
-        fireAnalytics(createClosedEvent('button'), _this.props);
+        fireAnalytics(createClosedEvent('button'), createAnalyticsEvent);
       }
       if (onClose) {
         onClose();
@@ -81,29 +85,29 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(MediaViewerComponent, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
-      fireAnalytics(createModalEvent(), this.props);
+      fireAnalytics(createModalEvent(), this.props.createAnalyticsEvent);
       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.createElement("div", {
         ref: innerRef
@@ -111,7 +115,7 @@ export var MediaViewerComponent = /*#__PURE__*/function (_React$Component) {
         "data-testid": "media-viewer-popup",
         className: mediaViewerPopupClass
       }, /*#__PURE__*/React.createElement(Shortcut, {
-        keyCode: 27,
+        code: 'Escape',
         handler: this.onShortcutClosed
       }), /*#__PURE__*/React.createElement(Content, {
         isSidebarVisible: isSidebarVisible,

package/dist/esm/navigation.js

@@ -34,11 +34,12 @@ export var 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) {
-          fireAnalytics(createNavigatedEvent(direction, source, newItem), _this.props);
+          fireAnalytics(createNavigatedEvent(direction, source, newItem), createAnalyticsEvent);
           onChange(newItem);
         }
       };
@@ -75,7 +76,7 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
       }, isLeftVisible ? /*#__PURE__*/React.createElement(Arrow, {
         className: hideControlsClassName
       }, /*#__PURE__*/React.createElement(Shortcut, {
-        keyCode: 37,
+        code: 'ArrowLeft',
         handler: prev('keyboard')
       }), /*#__PURE__*/React.createElement(Button, {
         testId: prevNavButtonId,
@@ -93,7 +94,7 @@ export var NavigationBase = /*#__PURE__*/function (_Component) {
       })) : null), /*#__PURE__*/React.createElement(RightWrapper, null, isRightVisible ? /*#__PURE__*/React.createElement(Arrow, {
         className: hideControlsClassName
       }, /*#__PURE__*/React.createElement(Shortcut, {
-        keyCode: 39,
+        code: 'ArrowRight',
         handler: next('keyboard')
       }), /*#__PURE__*/React.createElement(Button, {
         testId: nextNavButtonId,

package/dist/esm/styleWrappers.js

@@ -5,6 +5,7 @@ import { forwardRef, useMemo } from 'react';
 import { arrowStyles, arrowsWrapperStyles, audioCoverStyles, audioPlayerStyles, audioStyles, baselineExtendStyles, blanketStyles, closeButtonWrapperStyles, contentWrapperStyles, customAudioPlayerWrapperStyles, customVideoPlayerWrapperStyles, defaultCoverWrapperStyles, downloadButtonWrapperStyles, errorImageStyles, errorMessageWrapperStyles, formattedMessageWrapperStyles, hdIconGroupWrapperStyles, hdIconWrapperStyles, headerStyles, headerWrapperStyles, imageWrapperStyles, imgStyles, leftHeaderStyles, leftWrapperStyles, listWrapperStyles, medatadataTextWrapperStyles, metadataFileNameStyles, metadataIconWrapperStyles, metadataSubTextStyles, metadataWrapperStyles, pdfWrapperStyles, rightHeaderStyles, rightWrapperStyles, sidebarWrapperStyles, spinnerWrapperStyles, videoStyles, zoomControlsWrapperStyles, zoomLevelIndicatorStyles, zoomWrapperStyles } from './styles';
 import { TouchScrollable } from 'react-scrolllock';
 import { useMergeRefs } from 'use-callback-ref';
+// 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
 export var Blanket = function Blanket(_ref) {
   var datatestId = _ref['data-testid'],
     className = _ref.className,

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

@@ -0,0 +1,149 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import { isExternalImageIdentifier, isErrorFileState } from '@atlaskit/media-client';
+import { hideControlsClassName, messages, toHumanReadableMediaSize, MediaButton } from '@atlaskit/media-ui';
+import { getLanguageType, getExtension, isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { Outcome } from '../domain';
+import { Header as HeaderWrapper, LeftHeader, RightHeader, MetadataWrapper, MetadataSubText, MedatadataTextWrapper, MetadataIconWrapper, MetadataFileName, FormattedMessageWrapper } from '../styleWrappers';
+import { ToolbarDownloadButton, DisabledToolbarDownloadButton } from '../download';
+import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
+import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
+import { getFormat } from '../viewers/codeViewer/util';
+import { MediaViewerError } from '../errors';
+export var 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 = useState(Outcome.pending()),
+    _useState2 = _slicedToArray(_useState, 2),
+    item = _useState2[0],
+    setItem = _useState2[1];
+
+  // Refs and Hooks
+  var mediaClient = useMediaClient();
+  var _ref2 = identifier,
+    id = _ref2.id,
+    collectionName = _ref2.collectionName,
+    occurrenceKey = _ref2.occurrenceKey;
+  var _useFileState = useFileState(id, {
+      collectionName: collectionName,
+      occurrenceKey: occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+  var onSetArchiveSideBarVisibleRef = useRef(onSetArchiveSideBarVisible);
+  onSetArchiveSideBarVisibleRef.current = onSetArchiveSideBarVisible;
+
+  // previous values
+  useEffect(function () {
+    if (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(Outcome.successful(_fileState));
+      return;
+    }
+    if (!fileState) {
+      return;
+    }
+    if (fileState.status !== 'error') {
+      var _onSetArchiveSideBarV;
+      (_onSetArchiveSideBarV = onSetArchiveSideBarVisibleRef.current) === null || _onSetArchiveSideBarV === void 0 || _onSetArchiveSideBarV.call(onSetArchiveSideBarVisibleRef, !isErrorFileState(fileState) && fileState.mediaType === 'archive');
+      setItem(Outcome.successful(fileState));
+    } else {
+      var error = new MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+      setItem(Outcome.failed(new 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 (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 = getLanguageType(item.name, item.mimeType);
+      var ext = getExtension(item.name);
+
+      // specific cases for if we want a certain word translated in other languages
+      switch (ext) {
+        case 'msg':
+          return /*#__PURE__*/React.createElement(FormattedMessage, messages.email);
+        case 'txt':
+          return /*#__PURE__*/React.createElement(FormattedMessage, messages.text);
+      }
+
+      // no need for translations in other languages
+      return /*#__PURE__*/React.createElement(React.Fragment, null, getFormat(language || 'unknown', ext));
+    }
+    var mediaType = item.mediaType;
+    var mediaTypeTranslationMap = {
+      doc: messages.document,
+      audio: messages.audio,
+      video: messages.video,
+      image: messages.image,
+      archive: messages.archive,
+      unknown: messages.unknown
+    };
+    var message = mediaTypeTranslationMap[mediaType || 'unknown'];
+
+    // Defaulting to unknown again since backend has more mediaTypes than the current supported ones
+    return /*#__PURE__*/React.createElement(FormattedMessage, message || messages.unknown);
+  };
+  return /*#__PURE__*/React.createElement(HeaderWrapper, {
+    isArchiveSideBarVisible: isArchiveSideBarVisible,
+    className: hideControlsClassName
+  }, /*#__PURE__*/React.createElement(LeftHeader, null, item.match({
+    successful: function successful(item) {
+      return !isErrorFileState(item) && /*#__PURE__*/React.createElement(MetadataWrapper, null, /*#__PURE__*/React.createElement(MetadataIconWrapper, null, /*#__PURE__*/React.createElement(MimeTypeIcon, {
+        testId: 'media-viewer-file-type-icon',
+        mediaType: item.mediaType,
+        mimeType: item.mimeType,
+        name: item.name
+      })), /*#__PURE__*/React.createElement(MedatadataTextWrapper, null, /*#__PURE__*/React.createElement(MetadataFileName, {
+        "data-testid": "media-viewer-file-name"
+      }, item.name || /*#__PURE__*/React.createElement(FormattedMessage, messages.unknown)), /*#__PURE__*/React.createElement(MetadataSubText, {
+        "data-testid": "media-viewer-file-metadata-text"
+      }, /*#__PURE__*/React.createElement(FormattedMessageWrapper, null, renderFileTypeText(item)), item.size ? ' · ' + toHumanReadableMediaSize(item.size) : '')));
+    },
+    pending: function pending() {
+      return null;
+    },
+    failed: function failed() {
+      return null;
+    }
+  })), /*#__PURE__*/React.createElement(RightHeader, null, (extensions === null || extensions === void 0 ? void 0 : extensions.sidebar) && /*#__PURE__*/React.createElement(MediaButton, {
+    isSelected: isSidebarVisible,
+    testId: "media-viewer-sidebar-button",
+    onClick: onSidebarButtonClick,
+    iconBefore: extensions.sidebar.icon
+  }), item.match({
+    pending: function pending() {
+      return DisabledToolbarDownloadButton;
+    },
+    failed: function failed() {
+      return DisabledToolbarDownloadButton;
+    },
+    successful: function successful(item) {
+      return /*#__PURE__*/React.createElement(ToolbarDownloadButton, {
+        state: item,
+        identifier: identifier,
+        mediaClient: mediaClient
+      });
+    }
+  })));
+};
+export default injectIntl(HeaderV2);