@atlaskit/media-viewer 54.8.21 → 54.8.23

package/dist/esm/viewers/archiveSidebar/archive-viewer-base.js

@@ -0,0 +1,393 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import AudioIcon from '@atlaskit/icon/core/audio';
+import { CustomMediaPlayer } from '@atlaskit/media-ui/customMediaPlayer';
+import { getLanguageType } from '@atlaskit/media-ui/getLanguageType';
+import { isCodeViewerItem } from '@atlaskit/media-ui/isCodeViewerItem';
+import { messages } from '@atlaskit/media-ui/messages';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Text } from '@atlaskit/primitives/compiled';
+import { ArchiveViewerError } from '../../ArchiveViewerError';
+import { createPreviewUnsupportedEvent } from '../../analytics/events/operational/previewUnsupported';
+import { createZipEntryLoadFailedEvent } from '../../analytics/events/operational/zipEntryLoadFailed';
+import { createZipEntryLoadSucceededEvent } from '../../analytics/events/operational/zipEntryLoadSucceeded';
+import { fireAnalytics } from '../../analytics/fireAnalytics';
+import { buildVideoErrorDiagnostics } from '../../buildVideoErrorDiagnostics';
+import { Outcome } from '../../domain/outcome';
+import ErrorMessage from '../../errorMessageWithAnalytics';
+import { isMediaViewerError } from '../../isMediaViewerError';
+import { MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER } from '../../item-viewer';
+import { Spinner } from '../../loading';
+import { CustomVideoPlayerWrapper, AudioPlayer, CustomAudioPlayerWrapper, DefaultCoverWrapper, ListWrapper } from '../../styleWrappers';
+import { getMediaTypeFromFilename } from '../../utils/getMediaTypeFromFilename';
+import { getMimeTypeFromFilename } from '../../utils/getMimeTypeFromFilename';
+import { rejectAfter } from '../../utils/rejectAfter';
+import { BaseViewer } from '../base-viewer';
+import { CodeViewRenderer } from '../codeViewer/CodeViewRenderer-2';
+import { DEFAULT_LANGUAGE } from '../codeViewer/util';
+import { InteractiveImg } from '../image/interactive-img';
+import { ArchiveItemViewerWrapper } from './archive-item-viewer-wrapper';
+import { ArchiveLayout } from './archive-layout';
+import ArchiveSidebarRenderer from './archive-sidebar-renderer';
+import { ArchiveViewerWrapper } from './archive-viewer-wrapper';
+import { ENCRYPTED_ENTRY_ERROR_MESSAGE } from './consts';
+import { NativePdfViewer } from './nativePdfViewer';
+export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
+  function ArchiveViewerBase() {
+    var _this;
+    _classCallCheck(this, ArchiveViewerBase);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ArchiveViewerBase, [].concat(args));
+    _defineProperty(_this, "onError", function (error, entry) {
+      // Non-ZIP archives (e.g. RAR, TAR, 7z) are a known limitation of the
+      // browser-based `unzipit` viewer, not a per-entry failure. Render a
+      // full-width "format not supported" message via BaseViewer's failed
+      // outcome (no sidebar, no 300px offset) and do NOT escalate to the
+      // parent item-viewer error boundary, which would double-render the
+      // message inside the offset archive layout.
+      if (error.primaryReason === 'archiveviewer-not-zip') {
+        // Fire a dedicated, non-SLI `previewUnsupported` event (not a
+        // `loadFailed`) so unsupported archives don't pollute error
+        // dashboards. The event's fileAttributes distinguish the two cases:
+        // `fileMediatype: 'unknown'` (browser-unrecognised, e.g. RAR) vs
+        // `fileMediatype: 'archive'` with a non-ZIP `fileMimetype` (unzipit
+        // limitation, e.g. 7z/tar/gzip).
+        fireAnalytics(createPreviewUnsupportedEvent(_this.props.item), _this.props.createAnalyticsEvent);
+        _this.setState({
+          content: Outcome.failed(error)
+        });
+        return;
+      }
+      _this.props.onError(error);
+      _this.setState({
+        content: Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+          selectedArchiveEntry: entry,
+          error: error
+        }))
+      });
+    });
+    _defineProperty(_this, "onSelectedArchiveEntryChange", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(selectedArchiveEntry) {
+        var src, codeViewerSrc, mimeType, isCodeMimeType, blob, blobWithMimeType, _t;
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this.setState({
+                content: Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+                  selectedArchiveEntry: undefined,
+                  hasLoadedEntries: false // displays a nice loading spinner for the content viewer
+                }))
+              });
+              src = '';
+              codeViewerSrc = '';
+              mimeType = getMimeTypeFromFilename(selectedArchiveEntry.name);
+              isCodeMimeType = isCodeViewerItem(selectedArchiveEntry.name, mimeType);
+              if (selectedArchiveEntry.isDirectory) {
+                _context.next = 6;
+                break;
+              }
+              _context.prev = 1;
+              _context.next = 2;
+              return rejectAfter(function () {
+                return selectedArchiveEntry.blob();
+              }, 10000);
+            case 2:
+              blob = _context.sent;
+              blobWithMimeType = new Blob([blob], {
+                type: mimeType
+              });
+              src = URL.createObjectURL(blobWithMimeType);
+              if (!isCodeMimeType) {
+                _context.next = 4;
+                break;
+              }
+              _context.next = 3;
+              return rejectAfter(function () {
+                return blob.text();
+              });
+            case 3:
+              codeViewerSrc = _context.sent;
+            case 4:
+              _context.next = 6;
+              break;
+            case 5:
+              _context.prev = 5;
+              _t = _context["catch"](1);
+              return _context.abrupt("return", _this.onError(new ArchiveViewerError(_t.message === ENCRYPTED_ENTRY_ERROR_MESSAGE ? 'archiveviewer-encrypted-entry' : 'archiveviewer-create-url', _t), selectedArchiveEntry));
+            case 6:
+              _this.setState({
+                content: Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+                  selectedArchiveEntry: selectedArchiveEntry,
+                  src: src,
+                  name: selectedArchiveEntry.name,
+                  isDirectory: selectedArchiveEntry.isDirectory,
+                  error: undefined,
+                  codeViewerSrc: codeViewerSrc,
+                  isCodeMimeType: isCodeMimeType,
+                  hasLoadedEntries: true
+                }))
+              });
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 5]]);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    _defineProperty(_this, "onHeaderClicked", function () {
+      // This will set the preview to show the Folder icon
+      _this.setState({
+        content: Outcome.successful(_objectSpread({}, _this.state.content.data))
+      });
+    });
+    _defineProperty(_this, "onViewerLoad", function (selectedArchiveEntry) {
+      return function () {
+        fireAnalytics(createZipEntryLoadSucceededEvent(_this.props.item, selectedArchiveEntry), _this.props.createAnalyticsEvent);
+      };
+    });
+    _defineProperty(_this, "onViewerError", function (primaryErrorReason, selectedArchiveEntry) {
+      return function (error) {
+        if (error instanceof Error && isMediaViewerError(error)) {
+          return _this.onError(new ArchiveViewerError(primaryErrorReason, error.secondaryError, selectedArchiveEntry));
+        }
+        // The video/audio CustomMediaPlayer surfaces a native `MediaError` (not a
+        // JS `Error`). Convert it into a descriptive diagnostics `Error` so the
+        // downstream analytics report a meaningful cause instead of `unknown`.
+        var secondaryError = error && !(error instanceof Error) ? buildVideoErrorDiagnostics(undefined, error) : error !== null && error !== void 0 ? error : undefined;
+        return _this.onError(new ArchiveViewerError(primaryErrorReason, secondaryError, selectedArchiveEntry));
+      };
+    });
+    _defineProperty(_this, "onSidebarLoaded", function () {
+      _this.setState({
+        content: Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
+          hasLoadedEntries: true
+        }))
+      });
+      _this.props.onSuccess();
+      if (fg('download_event_for_jira_attachments')) {
+        _this.onMediaDisplayed();
+      }
+    });
+    return _this;
+  }
+  _inherits(ArchiveViewerBase, _BaseViewer);
+  return _createClass(ArchiveViewerBase, [{
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        return _regeneratorRuntime.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this.setState(this.initialState);
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function init() {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "initialState",
+    get: function get() {
+      return {
+        content: Outcome.successful({
+          src: '',
+          name: '',
+          isDirectory: true
+        })
+      };
+    }
+  }, {
+    key: "release",
+    value: function release() {
+      var content = this.state.content;
+      if (!content.data || !content.data.src) {
+        return;
+      }
+      URL.revokeObjectURL(content.data.src);
+    }
+  }, {
+    key: "renderSuccessful",
+    value: function renderSuccessful(content) {
+      var _this$props = this.props,
+        item = _this$props.item,
+        mediaClient = _this$props.mediaClient,
+        collectionName = _this$props.collectionName;
+      var selectedArchiveEntry = content.selectedArchiveEntry,
+        hasLoadedEntries = content.hasLoadedEntries;
+      var hasSelectedArchiveEntry = selectedArchiveEntry !== undefined;
+      return /*#__PURE__*/React.createElement(ArchiveLayout, null, /*#__PURE__*/React.createElement(ArchiveSidebarRenderer, {
+        selectedFileState: item,
+        mediaClient: mediaClient,
+        onSelectedArchiveEntryChange: this.onSelectedArchiveEntryChange,
+        onHeaderClicked: this.onHeaderClicked,
+        isArchiveEntryLoading: !hasSelectedArchiveEntry,
+        collectionName: collectionName,
+        onError: this.onError,
+        onSuccess: this.onSidebarLoaded
+      }), /*#__PURE__*/React.createElement(ArchiveViewerWrapper, null, !hasSelectedArchiveEntry && !hasLoadedEntries ? /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(Spinner, null)) : this.renderArchiveItemViewer(content)));
+    }
+  }, {
+    key: "renderArchiveItemViewer",
+    value: function renderArchiveItemViewer(content) {
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        viewerOptions = _this$props2.viewerOptions;
+      var src = content.src,
+        name = content.name,
+        isDirectory = content.isDirectory,
+        error = content.error,
+        selectedArchiveEntry = content.selectedArchiveEntry,
+        codeViewerSrc = content.codeViewerSrc,
+        isCodeMimeType = content.isCodeMimeType;
+      if (error) {
+        return this.renderPreviewError(error, selectedArchiveEntry);
+      }
+      if (!isDirectory && selectedArchiveEntry) {
+        var _viewerOptions$custom;
+        if (!name || !src) {
+          return this.renderPreviewError(new ArchiveViewerError('archiveviewer-missing-name-src'), selectedArchiveEntry);
+        }
+        var customRenderer = viewerOptions === null || viewerOptions === void 0 || (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(function (renderer) {
+          return renderer.shouldUseCustomRenderer({
+            fileItem: item,
+            archiveFileItem: {
+              name: name
+            }
+          });
+        });
+        if (customRenderer) {
+          return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, customRenderer.renderContent({
+            fileItem: item,
+            archiveFileItem: {
+              name: name
+            },
+            getBinaryContent: function () {
+              var _getBinaryContent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+                return _regeneratorRuntime.wrap(function (_context3) {
+                  while (1) switch (_context3.prev = _context3.next) {
+                    case 0:
+                      _context3.next = 1;
+                      return fetch(src);
+                    case 1:
+                      return _context3.abrupt("return", _context3.sent.blob());
+                    case 2:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }, _callee3);
+              }));
+              function getBinaryContent() {
+                return _getBinaryContent.apply(this, arguments);
+              }
+              return getBinaryContent;
+            }(),
+            onLoad: this.onViewerLoad(selectedArchiveEntry),
+            onError: this.onViewerError('archiveviewer-customrenderer-onerror', selectedArchiveEntry)
+          }));
+        }
+        var mediaType = getMediaTypeFromFilename(name);
+        if (isCodeMimeType) {
+          // Same code viewer logic as in Item-Viewer.tsx
+          // Render error message if code file has size over 10MB.
+          // Required by https://product-fabric.atlassian.net/browse/MEX-1788
+          if ((selectedArchiveEntry === null || selectedArchiveEntry === void 0 ? void 0 : selectedArchiveEntry.size) > MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER) {
+            return this.renderPreviewError(new ArchiveViewerError('archiveviewer-codeviewer-file-size-exceeds'), selectedArchiveEntry);
+          }
+          return /*#__PURE__*/React.createElement(CodeViewRenderer, {
+            onSuccess: this.onViewerLoad(selectedArchiveEntry),
+            onError: this.onViewerError('archiveviewer-codeviewer-onerror', selectedArchiveEntry),
+            item: item,
+            src: codeViewerSrc || '',
+            language: getLanguageType(name) || DEFAULT_LANGUAGE
+          });
+        }
+        switch (mediaType) {
+          case 'image':
+            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(InteractiveImg, {
+              src: src,
+              alt: name,
+              onLoad: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-imageviewer-onerror', selectedArchiveEntry)
+            }));
+          case 'video':
+            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(CustomVideoPlayerWrapper, {
+              "data-testid": "media-viewer-video-content"
+            }, /*#__PURE__*/React.createElement(CustomMediaPlayer, {
+              type: "video",
+              isAutoPlay: false,
+              src: src,
+              onCanPlay: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-videoviewer-onerror', selectedArchiveEntry)
+            })));
+          case 'audio':
+            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, /*#__PURE__*/React.createElement(AudioPlayer, {
+              "data-testid": "media-viewer-audio-content"
+            }, /*#__PURE__*/React.createElement(DefaultCoverWrapper, null, /*#__PURE__*/React.createElement(AudioIcon, {
+              label: "cover",
+              color: "currentColor"
+            })), /*#__PURE__*/React.createElement(CustomAudioPlayerWrapper, null, /*#__PURE__*/React.createElement(CustomMediaPlayer, {
+              type: "audio",
+              isAutoPlay: false,
+              src: src,
+              onCanPlay: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-audioviewer-onerror', selectedArchiveEntry)
+            }))));
+          case 'doc':
+            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, {
+              fullHeight: true
+            }, /*#__PURE__*/React.createElement(NativePdfViewer, {
+              src: src,
+              onSuccess: this.onViewerLoad(selectedArchiveEntry),
+              onError: this.onViewerError('archiveviewer-docviewer-onerror', selectedArchiveEntry)
+            }, this.renderPreviewError(new ArchiveViewerError('archiveviewer-docviewer-onerror'), selectedArchiveEntry, false)));
+          case 'archive':
+            //BMPT-388 - Add illustration here, currently empty viewer
+            return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null);
+          default:
+            return this.renderPreviewError(new ArchiveViewerError('archiveviewer-unsupported'), selectedArchiveEntry);
+        }
+      }
+    }
+  }, {
+    key: "renderPreviewError",
+    value: function renderPreviewError(error, entry) {
+      var shouldFireAnalytics = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var _this$props3 = this.props,
+        item = _this$props3.item,
+        createAnalyticsEvent = _this$props3.createAnalyticsEvent;
+      if (shouldFireAnalytics) {
+        fireAnalytics(createZipEntryLoadFailedEvent(item, error, entry), createAnalyticsEvent);
+      }
+      return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
+        fileId: item.id,
+        fileState: item,
+        error: error,
+        supressAnalytics: true
+      }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file))));
+    }
+  }]);
+}(BaseViewer);

package/dist/esm/viewers/archiveSidebar/archive-viewer-wrapper.compiled.css

@@ -0,0 +1,7 @@
+._154iidpf{top:0}
+._1e0c1txw{display:flex}
+._1ltv15ov{left:var(--_53yrec)}
+._1xi2idpf{right:0}
+._4cvr1h6o{align-items:center}
+._94n5idpf{bottom:0}
+._kqswstnw{position:absolute}

package/dist/esm/viewers/archiveSidebar/archive-viewer-wrapper.js

@@ -0,0 +1,16 @@
+/* archive-viewer-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./archive-viewer-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { ARCHIVE_SIDE_BAR_WIDTH } from './styleWrappers';
+var archiveViewerWrapperStyles = null;
+export var ArchiveViewerWrapper = function ArchiveViewerWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _154iidpf _1ltv15ov _1xi2idpf _94n5idpf _4cvr1h6o _1e0c1txw"]),
+    style: {
+      "--_53yrec": ix("".concat(ARCHIVE_SIDE_BAR_WIDTH, "px"))
+    }
+  }, children);
+};