@atlaskit/media-viewer 48.1.7 → 48.2.0

package/dist/cjs/v2/item-viewer-v2.js

@@ -0,0 +1,322 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFileStateItem = exports.isExternalImageItem = exports.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = exports.ItemViewerV2Base = exports.ItemViewerV2 = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _mediaClient = require("@atlaskit/media-client");
+var _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
+var _codeViewer = require("@atlaskit/media-ui/codeViewer");
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _domain = require("../domain");
+var _loading = require("../loading");
+var _errorMessage = _interopRequireDefault(require("../errorMessage"));
+var _errors = require("../errors");
+var _download = require("../download");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _commenced = require("../analytics/events/operational/commenced");
+var _loadSucceeded = require("../analytics/events/operational/loadSucceeded");
+var _analytics = require("../analytics");
+var _interactiveImg = require("../viewers/image/interactive-img");
+var _archiveViewerLoader = _interopRequireDefault(require("../viewers/archiveSidebar/archiveViewerLoader"));
+var _mediaCommon = require("@atlaskit/media-common");
+var _ufoExperiences = require("../analytics/ufoExperiences");
+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( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'../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( /* webpackChunkName: "@atlaskit-internal_videoViewer" */'../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( /* webpackChunkName: "@atlaskit-internal_audioViewer" */'../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( /* webpackChunkName: "@atlaskit-internal_docViewer" */'../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( /* webpackChunkName: "@atlaskit-internal_codeViewer" */'../viewers/codeViewer'));
+    }).then(function (mod) {
+      return mod.CodeViewer;
+    });
+  },
+  loading: function loading() {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+});
+// Consts
+var isExternalImageItem = exports.isExternalImageItem = function isExternalImageItem(fileItem) {
+  return fileItem === 'external-image';
+};
+var isFileStateItem = exports.isFileStateItem = function isFileStateItem(fileItem) {
+  return !isExternalImageItem(fileItem);
+};
+var MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = exports.MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER = 10 * 1024 * 1024;
+var ItemViewerV2Base = exports.ItemViewerV2Base = function ItemViewerV2Base(_ref) {
+  var identifier = _ref.identifier,
+    showControls = _ref.showControls,
+    onClose = _ref.onClose,
+    previewCount = _ref.previewCount,
+    contextId = _ref.contextId,
+    createAnalyticsEvent = _ref.createAnalyticsEvent;
+  // States and Refs
+  var _useState = (0, _react.useState)(_domain.Outcome.pending()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    item = _useState2[0],
+    setItem = _useState2[1];
+  var traceContext = (0, _react.useRef)({
+    traceId: (0, _mediaCommon.getRandomHex)(8)
+  });
+  var fileStateFlagsRef = (0, _react.useRef)({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  var createAnalyticsEventRef = (0, _react.useRef)(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+
+  // Hooks
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var _useFileState = (0, _mediaClientReact.useFileState)((0, _mediaClient.isExternalImageIdentifier)(identifier) ? '' : identifier.id, {
+      collectionName: (0, _mediaClient.isExternalImageIdentifier)(identifier) ? '' : identifier.collectionName,
+      skipRemote: (0, _mediaClient.isExternalImageIdentifier)(identifier)
+    }),
+    fileState = _useFileState.fileState;
+  var renderDownloadButton = (0, _react.useCallback)(function (fileState, error) {
+    var collectionName = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName : undefined;
+    return /*#__PURE__*/_react.default.createElement(_download.ErrorViewDownloadButton, {
+      fileState: fileState,
+      mediaClient: mediaClient,
+      error: error,
+      collectionName: collectionName
+    });
+  }, [mediaClient, identifier]);
+
+  // Did mount
+
+  (0, _react.useEffect)(function () {
+    if ((0, _mediaClient.isExternalImageIdentifier)(identifier)) {
+      // external images do not need to talk to our backend,
+      // so therefore no need for media-client subscriptions.
+      // just set a successful outcome of type "external-image".
+      setItem(_domain.Outcome.successful('external-image'));
+      return;
+    }
+    (0, _analytics.fireAnalytics)((0, _commenced.createCommencedEvent)(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext.current), createAnalyticsEventRef.current);
+    (0, _ufoExperiences.startMediaFileUfoExperience)();
+
+    // File Subscription
+
+    if (fileState) {
+      var status = fileState.status;
+      if (fileState.status !== 'error') {
+        // updateFileStateFlag
+
+        if (status === 'processing') {
+          fileStateFlagsRef.current.wasStatusProcessing = true;
+        } else if (status === 'uploading') {
+          fileStateFlagsRef.current.wasStatusUploading = true;
+        }
+        setItem(_domain.Outcome.successful(fileState));
+      } else {
+        var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        setItem(_domain.Outcome.failed(new _errors.MediaViewerError('itemviewer-fetch-metadata', e)));
+      }
+    }
+  }, [fileState, identifier]);
+  var onSuccess = (0, _react.useCallback)(function () {
+    item.whenSuccessful(function (fileItem) {
+      if (isFileStateItem(fileItem)) {
+        var fileAttributes = (0, _analytics.getFileAttributes)(fileItem);
+        (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)(fileAttributes, traceContext.current), createAnalyticsEventRef.current);
+        (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+          fileAttributes: fileAttributes,
+          fileStateFlags: fileStateFlagsRef.current
+        });
+      }
+    });
+  }, [item]);
+  var onLoadFail = (0, _react.useCallback)(function (mediaViewerError) {
+    setItem(_domain.Outcome.failed(mediaViewerError));
+  }, []);
+  var renderError = (0, _react.useCallback)(function (error, fileItem) {
+    if (fileItem) {
+      var _fileState;
+      if (fileItem === 'external-image') {
+        // external image error outcome
+        _fileState = {
+          id: 'external-image',
+          status: 'error'
+        };
+      } else {
+        // FileState error outcome
+        _fileState = fileItem;
+      }
+      return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
+        fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileState: _fileState,
+        fileStateFlags: fileStateFlagsRef.current,
+        traceContext: traceContext.current
+      }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
+        fileId: (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : 'undefined',
+        error: error,
+        fileStateFlags: fileStateFlagsRef.current
+      });
+    }
+  }, [identifier, renderDownloadButton, traceContext]);
+  return item.match({
+    successful: function successful(fileItem) {
+      if (fileItem === 'external-image') {
+        // render an external image
+        var _ref2 = identifier,
+          dataURI = _ref2.dataURI;
+        return /*#__PURE__*/_react.default.createElement(_interactiveImg.InteractiveImg, {
+          src: dataURI,
+          onLoad: function onLoad() {
+            (0, _analytics.fireAnalytics)((0, _loadSucceeded.createLoadSucceededEvent)({
+              fileId: 'external-image'
+            }), createAnalyticsEventRef.current);
+            (0, _ufoExperiences.succeedMediaFileUfoExperience)({
+              fileAttributes: {
+                fileId: 'external-image'
+              },
+              fileStateFlags: fileStateFlagsRef.current
+            });
+          },
+          onError: function onError() {
+            setItem(_domain.Outcome.failed(new _errors.MediaViewerError('imageviewer-external-onerror')));
+          }
+        });
+      } else {
+        // render a FileState fetched through media-client
+        switch (fileItem.status) {
+          case 'processed':
+          case 'uploading':
+          case 'processing':
+            // TODO: renderItem
+            var collectionName = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.collectionName : undefined;
+            var viewerProps = {
+              mediaClient: mediaClient,
+              item: fileItem,
+              collectionName: collectionName,
+              onClose: onClose,
+              previewCount: previewCount
+            };
+
+            // TODO: fix all of the item errors
+
+            if ((0, _codeViewer.isCodeViewerItem)(fileItem.name, fileItem.mimeType)) {
+              //Render error message if code file has size over 10MB.
+              //Required by https://product-fabric.atlassian.net/browse/MEX-1788
+              if (fileItem.size > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+                return renderError(new _errors.MediaViewerError('codeviewer-file-size-exceeds'), fileItem);
+              }
+              return /*#__PURE__*/_react.default.createElement(CodeViewer, (0, _extends2.default)({
+                onSuccess: onSuccess,
+                onError: onLoadFail
+              }, viewerProps));
+            }
+            var mediaType = fileItem.mediaType;
+            switch (mediaType) {
+              case 'image':
+                return /*#__PURE__*/_react.default.createElement(ImageViewer, (0, _extends2.default)({
+                  onLoad: onSuccess,
+                  onError: onLoadFail,
+                  contextId: contextId,
+                  traceContext: traceContext.current
+                }, viewerProps));
+              case 'audio':
+                return /*#__PURE__*/_react.default.createElement(AudioViewer, (0, _extends2.default)({
+                  showControls: showControls,
+                  onCanPlay: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'video':
+                return /*#__PURE__*/_react.default.createElement(VideoViewer, (0, _extends2.default)({
+                  showControls: showControls,
+                  onCanPlay: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'doc':
+                return /*#__PURE__*/_react.default.createElement(DocViewer, (0, _extends2.default)({
+                  onSuccess: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+              case 'archive':
+                return /*#__PURE__*/_react.default.createElement(_archiveViewerLoader.default, (0, _extends2.default)({
+                  onSuccess: onSuccess,
+                  onError: onLoadFail
+                }, viewerProps));
+            }
+            return renderError(new _errors.MediaViewerError('unsupported'), fileItem);
+          case 'failed-processing':
+            return renderError(new _errors.MediaViewerError('itemviewer-file-failed-processing-status'), fileItem);
+          case 'error':
+            return renderError(new _errors.MediaViewerError('itemviewer-file-error-status'), fileItem);
+        }
+      }
+    },
+    pending: function pending() {
+      return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+    },
+    failed: function failed(error) {
+      return renderError(error, item.data);
+    }
+  });
+};
+var ViewerWithKey = function ViewerWithKey(props) {
+  var identifier = props.identifier;
+  var key = (0, _mediaClient.isFileIdentifier)(identifier) ? identifier.id : identifier.dataURI;
+  return /*#__PURE__*/_react.default.createElement(ItemViewerV2Base, (0, _extends2.default)({}, props, {
+    key: key
+  }));
+};
+var ItemViewerV2 = exports.ItemViewerV2 = (0, _analyticsNext.withAnalyticsEvents)()(ViewerWithKey);

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListV2 = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mediaUi = require("@atlaskit/media-ui");
+var _itemViewerV = require("./item-viewer-v2");
+var _styleWrappers = require("../styleWrappers");
+var _navigation = require("../navigation");
+var _headerV = _interopRequireDefault(require("./header-v2"));
+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 ListV2 = exports.ListV2 = function ListV2(_ref) {
+  var defaultSelectedItem = _ref.defaultSelectedItem,
+    onClose = _ref.onClose,
+    showControls = _ref.showControls,
+    extensions = _ref.extensions,
+    onSidebarButtonClick = _ref.onSidebarButtonClick,
+    contextId = _ref.contextId,
+    featureFlags = _ref.featureFlags,
+    isSidebarVisible = _ref.isSidebarVisible,
+    onNavigationChange = _ref.onNavigationChange,
+    items = _ref.items;
+  var _useState = (0, _react.useState)(defaultSelectedItem),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    previewCount = _useState4[0],
+    setPreviewCount = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isArchiveSideBarVisible = _useState6[0],
+    setIsArchiveSideBarVisible = _useState6[1];
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper, {
+    className: _mediaUi.hideControlsClassName,
+    isArchiveSideBarVisible: isArchiveSideBarVisible
+  }, /*#__PURE__*/_react.default.createElement(_headerV.default, {
+    identifier: selectedItem,
+    onClose: onClose,
+    extensions: extensions,
+    onSidebarButtonClick: onSidebarButtonClick,
+    isSidebarVisible: isSidebarVisible,
+    isArchiveSideBarVisible: isArchiveSideBarVisible,
+    featureFlags: featureFlags,
+    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible
+  })), /*#__PURE__*/_react.default.createElement(_itemViewerV.ItemViewerV2, {
+    identifier: selectedItem,
+    showControls: showControls,
+    onClose: onClose,
+    previewCount: previewCount,
+    contextId: contextId,
+    featureFlags: featureFlags
+  }), /*#__PURE__*/_react.default.createElement(_navigation.Navigation, {
+    items: items,
+    selectedItem: selectedItem,
+    onChange: function onChange(selectedItem) {
+      onNavigationChange === null || onNavigationChange === void 0 || onNavigationChange(selectedItem);
+      showControls === null || showControls === void 0 || showControls();
+      setSelectedItem(selectedItem);
+      setPreviewCount(previewCount + 1);
+    },
+    isArchiveSideBarVisible: isArchiveSideBarVisible
+  }));
+};

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaViewerV2 = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../analytics");
+var _modal = require("../analytics/events/screen/modal");
+var _closed = require("../analytics/events/ui/closed");
+var _listV = require("./list-v2");
+var _content = require("../content");
+var _styleWrappers = require("../styleWrappers");
+var _perfMarks = require("perf-marks");
+var _classnames = require("../classnames");
+var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
+var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
+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 MediaViewerComponent = function MediaViewerComponent(_ref) {
+  var featureFlags = _ref.featureFlags,
+    items = _ref.items,
+    extensions = _ref.extensions,
+    contextId = _ref.contextId,
+    innerRef = _ref.innerRef,
+    _onClose = _ref.onClose,
+    selectedItem = _ref.selectedItem,
+    intl = _ref.intl;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isSidebarVisible = _useState2[0],
+    setIsSidebarVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedIdentifier = _useState4[0],
+    setSelectedIdentifier = _useState4[1];
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var createAnalyticsEventRef = (0, _react.useRef)(createAnalyticsEvent);
+  createAnalyticsEventRef.current = createAnalyticsEvent;
+  (0, _react.useLayoutEffect)(function () {
+    (0, _analytics.fireAnalytics)((0, _modal.createModalEvent)(), createAnalyticsEventRef.current);
+    (0, _perfMarks.start)('MediaViewer.SessionDuration');
+  }, []);
+  var defaultSelectedItem = selectedItem || items[0];
+  var renderSidebar = function renderSidebar() {
+    var sidebarSelectedIdentifier = selectedIdentifier || defaultSelectedItem;
+    if (sidebarSelectedIdentifier && isSidebarVisible && extensions && extensions.sidebar) {
+      return /*#__PURE__*/_react.default.createElement(_styleWrappers.SidebarWrapper, {
+        "data-testid": "media-viewer-sidebar-content"
+      }, extensions.sidebar.renderer(sidebarSelectedIdentifier, {
+        close: function close() {
+          return setIsSidebarVisible(!isSidebarVisible);
+        }
+      }));
+    }
+  };
+  var content = /*#__PURE__*/_react.default.createElement("div", {
+    ref: innerRef
+  }, /*#__PURE__*/_react.default.createElement(_styleWrappers.Blanket, {
+    "data-testid": "media-viewer-popup",
+    className: _classnames.mediaViewerPopupClass
+  }, /*#__PURE__*/_react.default.createElement(_mediaUi.Shortcut, {
+    code: 'Escape',
+    handler: function handler() {
+      (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('escKey'), createAnalyticsEventRef.current);
+      _onClose && _onClose();
+    }
+  }), /*#__PURE__*/_react.default.createElement(_content.Content, {
+    isSidebarVisible: isSidebarVisible,
+    onClose: function onClose(_e, analyticsEvent) {
+      var _analyticsEvent$paylo;
+      if ((analyticsEvent === null || analyticsEvent === void 0 || (_analyticsEvent$paylo = analyticsEvent.payload) === null || _analyticsEvent$paylo === void 0 ? void 0 : _analyticsEvent$paylo.actionSubject) === 'button') {
+        (0, _analytics.fireAnalytics)((0, _closed.createClosedEvent)('button'), createAnalyticsEventRef.current);
+      }
+      _onClose && _onClose();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_listV.ListV2, {
+    defaultSelectedItem: defaultSelectedItem || items[0],
+    items: items,
+    onClose: _onClose,
+    extensions: extensions,
+    onNavigationChange: setSelectedIdentifier,
+    onSidebarButtonClick: function onSidebarButtonClick() {
+      return setIsSidebarVisible(!isSidebarVisible);
+    },
+    isSidebarVisible: isSidebarVisible,
+    contextId: contextId,
+    featureFlags: featureFlags
+  })), renderSidebar()));
+  return intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+    locale: "en"
+  }, content);
+};
+var MediaViewerWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(MediaViewerComponent, (0, _extends2.default)({}, props, {
+    innerRef: ref
+  }));
+});
+var MediaViewerWithScrollLock = function MediaViewerWithScrollLock(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
+    autoFocus: true
+  }, /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null), /*#__PURE__*/_react.default.createElement(MediaViewerWithRef, props));
+};
+var MediaViewerV2 = exports.MediaViewerV2 = (0, _reactIntlNext.injectIntl)(MediaViewerWithScrollLock, {
+  enforceContext: false
+});

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

@@ -164,7 +164,7 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onViewerLoad", function (selectedArchiveEntry) {
       return function () {
-        (0, _analytics.fireAnalytics)((0, _zipEntryLoadSucceeded.createZipEntryLoadSucceededEvent)(_this.props.item, selectedArchiveEntry), _this.props);
+        (0, _analytics.fireAnalytics)((0, _zipEntryLoadSucceeded.createZipEntryLoadSucceededEvent)(_this.props.item, selectedArchiveEntry), _this.props.createAnalyticsEvent);
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onViewerError", function (primaryErrorReason, selectedArchiveEntry) {
@@ -326,8 +326,10 @@ var ArchiveViewerBase = exports.ArchiveViewerBase = /*#__PURE__*/function (_Base
   }, {
     key: "renderPreviewError",
     value: function renderPreviewError(error, entry) {
-      var item = this.props.item;
-      (0, _analytics.fireAnalytics)((0, _zipEntryLoadFailed.createZipEntryLoadFailedEvent)(this.props.item, error, entry), this.props);
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+      (0, _analytics.fireAnalytics)((0, _zipEntryLoadFailed.createZipEntryLoadFailedEvent)(item, error, entry), createAnalyticsEvent);
       return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
         fileId: item.id,
         fileState: item,

package/dist/cjs/zoomControls.js

@@ -40,20 +40,22 @@ var ZoomControlsBase = exports.ZoomControlsBase = /*#__PURE__*/function (_Compon
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "zoomIn", function () {
       var _this$props = _this.props,
         onChange = _this$props.onChange,
-        zoomLevel = _this$props.zoomLevel;
+        zoomLevel = _this$props.zoomLevel,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent;
       if (zoomLevel.canZoomIn) {
         var zoom = zoomLevel.zoomIn();
-        (0, _analytics.fireAnalytics)((0, _zoomInButtonClicked.createZoomInButtonClickEvent)(zoom.value), _this.props);
+        (0, _analytics.fireAnalytics)((0, _zoomInButtonClicked.createZoomInButtonClickEvent)(zoom.value), createAnalyticsEvent);
         onChange(zoom);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "zoomOut", function () {
       var _this$props2 = _this.props,
         onChange = _this$props2.onChange,
-        zoomLevel = _this$props2.zoomLevel;
+        zoomLevel = _this$props2.zoomLevel,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
       if (zoomLevel.canZoomOut) {
         var zoom = zoomLevel.zoomOut();
-        (0, _analytics.fireAnalytics)((0, _zoomOutButtonClicked.createZoomOutButtonClickedEvent)(zoom.value), _this.props);
+        (0, _analytics.fireAnalytics)((0, _zoomOutButtonClicked.createZoomOutButtonClickedEvent)(zoom.value), createAnalyticsEvent);
         onChange(zoom);
       }
     });

package/dist/es2019/analytics/index.js

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

package/dist/es2019/analytics/ufoExperiences.js

@@ -2,7 +2,7 @@ import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atl
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "48.1.7";
+const packageVersion = "48.2.0";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

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

@@ -1,7 +1,9 @@
 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';
 const ensureCollectionName = (identifier, collectionName) => isFileIdentifier(identifier) ? {
   ...identifier,
   collectionName: identifier.collectionName || collectionName
@@ -21,6 +23,9 @@ const normaliseItems = (items, selectedItem, collectionName) => {
     selectedItem: selectedItemWithCollectionName
   };
 };
+
+// TODO: This component will be removed in https://product-fabric.atlassian.net/browse/CXP-2722
+
 export const MediaViewer = ({
   featureFlags,
   onClose,
@@ -56,7 +61,14 @@ export const MediaViewer = ({
       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/es2019/errorMessage.js

@@ -45,14 +45,16 @@ export class ErrorMessage extends React.Component {
       error,
       fileState,
       fileId,
-      traceContext
+      traceContext,
+      createAnalyticsEvent,
+      fileStateFlags
     } = props;
     if (supressAnalytics !== true) {
       const payload = ErrorMessage.getEventPayload(error, fileId, fileState, traceContext);
-      fireAnalytics(payload, props);
+      fireAnalytics(payload, createAnalyticsEvent);
       const rawPayload = {
         ...(payload === null || payload === void 0 ? void 0 : payload.attributes),
-        fileStateFlags: props.fileStateFlags
+        fileStateFlags
       };
       if (Object.keys(rawPayload).includes('status')) {
         delete rawPayload['status'];