@atlaskit/media-viewer 49.2.7 → 49.4.0

package/dist/cjs/viewers/customViewer/customViewer.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomViewer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _errors = require("../../errors");
+var _react = _interopRequireWildcard(require("react"));
+var _loading = require("../../loading");
+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 CustomViewer = exports.CustomViewer = function CustomViewer(_ref) {
+  var mediaClient = _ref.mediaClient,
+    item = _ref.item,
+    customRendererConfig = _ref.customRendererConfig,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    getBinaryContent = _useState2[0],
+    setGetBinaryContent = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setGetBinaryContent(undefined);
+    var abortController = new AbortController();
+    // This sets the 'getBinaryContent' to an async function that fetches the binary content of the file
+    // The 'getBinaryContent' function has to be updated when the item changes
+    // This approach handles aborting in-progress request outside of the custom-renderer concern
+    if (item.status === 'processed' || item.status === 'failed-processing') {
+      setGetBinaryContent(function () {
+        return function () {
+          return mediaClient.mediaStore.getFileBinary(item.id, undefined, abortController);
+        };
+      });
+    }
+    return function () {
+      return abortController.abort();
+    };
+  }, [item, mediaClient]);
+  var onLoadFailed = (0, _react.useCallback)(function (error) {
+    var mediaError = new _errors.MediaViewerError('custom-viewer-error', error);
+    onError(mediaError, item);
+  }, [item, onError]);
+  if (!getBinaryContent) {
+    return /*#__PURE__*/_react.default.createElement(_loading.Spinner, null);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customRendererConfig.renderContent({
+    fileItem: item,
+    getBinaryContent: getBinaryContent,
+    onLoad: onSuccess,
+    onError: onLoadFailed
+  }));
+};

package/dist/es2019/analytics/events/operational/download.js

@@ -0,0 +1,55 @@
+import { getFileAttributes } from '../..';
+import { getPrimaryErrorReason, getSecondaryErrorReason, getErrorDetail, getRequestMetadata } from '../../../errors';
+export const createDownloadSucceededEventPayload = (fileState, traceContext) => {
+  const {
+    fileId,
+    fileMediatype,
+    fileMimetype,
+    fileSize
+  } = getFileAttributes(fileState);
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadSucceeded',
+    attributes: {
+      status: 'success',
+      fileMediatype,
+      fileMimetype,
+      fileAttributes: {
+        fileId,
+        fileMediatype,
+        fileMimetype,
+        fileSize
+      },
+      traceContext
+    }
+  };
+};
+export const createDownloadFailedEventPayload = (fileId, error, fileState, traceContext) => {
+  const {
+    fileMediatype,
+    fileMimetype,
+    fileSize
+  } = getFileAttributes(fileState);
+  return {
+    eventType: 'operational',
+    actionSubject: 'mediaFile',
+    action: 'downloadFailed',
+    attributes: {
+      status: 'fail',
+      failReason: getPrimaryErrorReason(error),
+      error: getSecondaryErrorReason(error),
+      errorDetail: getErrorDetail(error),
+      request: getRequestMetadata(error),
+      fileMimetype,
+      fileMediatype,
+      fileAttributes: {
+        fileId,
+        fileMediatype,
+        fileMimetype,
+        fileSize
+      },
+      traceContext
+    }
+  };
+};

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "49.2.7";
+const packageVersion = "49.4.0";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

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 = "49.2.7";
+const packageVersion = "49.4.0";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {

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

@@ -32,7 +32,8 @@ export const MediaViewerBase = ({
   collectionName,
   items,
   extensions,
-  contextId
+  contextId,
+  viewerOptions
 }) => {
   const {
     items: normalisedItems,
@@ -65,7 +66,8 @@ export const MediaViewerBase = ({
     items: normalisedItems,
     featureFlags: featureFlags,
     extensions: extensions,
-    contextId: contextId
+    contextId: contextId,
+    viewerOptions: viewerOptions
   });
 };
 

package/dist/es2019/download.js

@@ -1,60 +1,85 @@
 import _extends from "@babel/runtime/helpers/extends";
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import { isErrorFileState, isExternalImageIdentifier } from '@atlaskit/media-client';
 import { MediaButton, messages } from '@atlaskit/media-ui';
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { ANALYTICS_MEDIA_CHANNEL } from '@atlaskit/media-common';
 import { createDownloadButtonClickedEvent } from './analytics/events/ui/downloadButtonClicked';
+import { createDownloadFailedEventPayload, createDownloadSucceededEventPayload } from './analytics/events/operational/download';
+import { fireAnalytics } from './analytics';
 import { createFailedPreviewDownloadButtonClickedEvent } from './analytics/events/ui/failedPreviewDownloadButtonClicked';
 import { DownloadButtonWrapper } from './styleWrappers';
+import { MediaViewerError } from './errors';
 const downloadIcon = /*#__PURE__*/React.createElement(DownloadIcon, {
   color: "currentColor",
   spacing: "spacious",
   label: "Download"
 });
 function noop() {}
-export function DownloadButton({
+function DownloadButton({
   analyticspayload,
   onClick: providedOnClick = noop,
   ...rest
 }) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const onClick = useCallback((event, analyticsEvent) => {
-    const clone = analyticsEvent.clone();
-    if (clone) {
-      clone.update(analyticspayload);
-      clone.fire(ANALYTICS_MEDIA_CHANNEL);
-    }
+    fireAnalytics(analyticspayload, createAnalyticsEvent);
     providedOnClick(event, analyticsEvent);
-  }, [analyticspayload, providedOnClick]);
+  }, [analyticspayload, providedOnClick, createAnalyticsEvent]);
   return /*#__PURE__*/React.createElement(MediaButton, _extends({}, rest, {
     onClick: onClick
   }));
 }
-export const createItemDownloader = (file, mediaClient, collectionName) => () => {
+const createItemDownloader = (file, mediaClient, options) => async () => {
+  const {
+    collectionName,
+    traceContext,
+    createAnalyticsEvent
+  } = options;
   const id = file.id;
   const name = !isErrorFileState(file) ? file.name : undefined;
-  return mediaClient.file.downloadBinary(id, name, collectionName);
+  mediaClient.file.downloadBinary(id, name, collectionName, traceContext).then(() => {
+    fireAnalytics(createDownloadSucceededEventPayload(file, traceContext), createAnalyticsEvent);
+  }).catch(e => {
+    fireAnalytics(createDownloadFailedEventPayload(file.id, new MediaViewerError('download', e), file, traceContext), createAnalyticsEvent);
+  });
 };
-export const ErrorViewDownloadButton = props => {
-  const {
-    fileState,
-    error
-  } = props;
+export const ErrorViewDownloadButton = ({
+  fileState,
+  mediaClient,
+  error,
+  traceContext,
+  collectionName
+}) => {
   const downloadEvent = createFailedPreviewDownloadButtonClickedEvent(fileState, error);
-  return /*#__PURE__*/React.createElement(DownloadButtonWrapper, null, /*#__PURE__*/React.createElement(DownloadButton, {
-    testId: "media-viewer-download-button",
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(DownloadButtonWrapper, null, /*#__PURE__*/React.createElement(DownloadButton
+  // testId="media-viewer-failed-preview-download-button"
+  , {
+    testId: "media-viewer-error-download-button",
     analyticspayload: downloadEvent,
     appearance: "primary",
-    onClick: createItemDownloader(props.fileState, props.mediaClient, props.collectionName)
+    onClick: createItemDownloader(fileState, mediaClient, {
+      collectionName,
+      traceContext,
+      createAnalyticsEvent
+    })
   }, /*#__PURE__*/React.createElement(FormattedMessage, messages.download)));
 };
-export const ToolbarDownloadButton = props => {
+export const ToolbarDownloadButton = ({
+  state,
+  mediaClient,
+  identifier,
+  traceContext
+}) => {
   const {
-    state,
-    mediaClient,
-    identifier
-  } = props;
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
   const downloadEvent = createDownloadButtonClickedEvent(state);
 
   // TODO [MS-1731]: make it work for external files as well
@@ -64,7 +89,11 @@ export const ToolbarDownloadButton = props => {
   return /*#__PURE__*/React.createElement(DownloadButton, {
     testId: "media-viewer-download-button",
     analyticspayload: downloadEvent,
-    onClick: createItemDownloader(state, mediaClient, identifier.collectionName),
+    onClick: createItemDownloader(state, mediaClient, {
+      collectionName: identifier.collectionName,
+      createAnalyticsEvent,
+      traceContext
+    }),
     iconBefore: downloadIcon
   });
 };

package/dist/es2019/header.js

@@ -16,7 +16,8 @@ export const Header = ({
   isSidebarVisible,
   onSidebarButtonClick,
   identifier,
-  onSetArchiveSideBarVisible
+  onSetArchiveSideBarVisible,
+  traceContext
 }) => {
   // States
   const [item, setItem] = useState(Outcome.pending());
@@ -133,7 +134,8 @@ export const Header = ({
     successful: item => /*#__PURE__*/React.createElement(ToolbarDownloadButton, {
       state: item,
       identifier: identifier,
-      mediaClient: mediaClient
+      mediaClient: mediaClient,
+      traceContext: traceContext
     })
   })));
 };

package/dist/es2019/item-viewer.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import Loadable from 'react-loadable';
 import { isExternalImageIdentifier, isFileIdentifier } from '@atlaskit/media-client';
+import { Text } from '@atlaskit/primitives';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
 import { isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
@@ -17,8 +18,8 @@ import { createLoadSucceededEvent } from './analytics/events/operational/loadSuc
 import { fireAnalytics, getFileAttributes } from './analytics';
 import { InteractiveImg } from './viewers/image/interactive-img';
 import ArchiveViewerLoader from './viewers/archiveSidebar/archiveViewerLoader';
-import { getRandomHex } from '@atlaskit/media-common';
 import { startMediaFileUfoExperience, succeedMediaFileUfoExperience } from './analytics/ufoExperiences';
+import { CustomViewer } from './viewers/customViewer/customViewer';
 const ImageViewer = Loadable({
   loader: () => import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image').then(mod => mod.ImageViewer),
   loading: () => /*#__PURE__*/React.createElement(Spinner, null)
@@ -55,13 +56,12 @@ export const ItemViewerBase = ({
   onClose,
   previewCount,
   contextId,
-  createAnalyticsEvent
+  createAnalyticsEvent,
+  viewerOptions,
+  traceContext
 }) => {
   // States and Refs
   const [item, setItem] = useState(Outcome.pending());
-  const traceContext = useRef({
-    traceId: getRandomHex(8)
-  });
   const fileStateFlagsRef = useRef({
     wasStatusUploading: false,
     wasStatusProcessing: false
@@ -83,9 +83,10 @@ export const ItemViewerBase = ({
       fileState: fileState,
       mediaClient: mediaClient,
       error: error,
-      collectionName: collectionName
+      collectionName: collectionName,
+      traceContext: traceContext
     });
-  }, [mediaClient, identifier]);
+  }, [mediaClient, identifier, traceContext]);
 
   // Did mount
 
@@ -93,9 +94,9 @@ export const ItemViewerBase = ({
     if (isExternalImageIdentifier(identifier)) {
       return;
     }
-    fireAnalytics(createCommencedEvent(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext.current), createAnalyticsEventRef.current);
+    fireAnalytics(createCommencedEvent(identifier === null || identifier === void 0 ? void 0 : identifier.id, traceContext), createAnalyticsEventRef.current);
     startMediaFileUfoExperience();
-  }, [identifier]);
+  }, [identifier, traceContext]);
   useEffect(() => {
     if (isExternalImageIdentifier(identifier)) {
       // external images do not need to talk to our backend,
@@ -129,26 +130,39 @@ export const ItemViewerBase = ({
     item.whenSuccessful(fileItem => {
       if (isFileStateItem(fileItem)) {
         const fileAttributes = getFileAttributes(fileItem);
-        fireAnalytics(createLoadSucceededEvent(fileAttributes, traceContext.current), createAnalyticsEventRef.current);
+        fireAnalytics(createLoadSucceededEvent(fileAttributes, traceContext), createAnalyticsEventRef.current);
         succeedMediaFileUfoExperience({
           fileAttributes,
           fileStateFlags: fileStateFlagsRef.current
         });
       }
     });
-  }, [item]);
+  }, [item, traceContext]);
   const onLoadFail = useCallback(mediaViewerError => {
     setItem(Outcome.failed(mediaViewerError, fileState));
   }, [fileState]);
   const renderItem = fileItem => {
+    var _viewerOptions$custom;
     const collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
     const viewerProps = {
       mediaClient,
       item: fileItem,
       collectionName,
       onClose,
-      previewCount
+      previewCount,
+      viewerOptions,
+      traceContext
     };
+    const customRenderer = viewerOptions === null || viewerOptions === void 0 ? void 0 : (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(renderer => renderer.shouldUseCustomRenderer({
+      fileItem
+    }));
+    if (customRenderer) {
+      return /*#__PURE__*/React.createElement(CustomViewer, _extends({
+        customRendererConfig: customRenderer,
+        onError: onLoadFail,
+        onSuccess: onSuccess
+      }, viewerProps));
+    }
 
     // TODO: fix all of the item errors
 
@@ -169,7 +183,7 @@ export const ItemViewerBase = ({
         onLoad: onSuccess,
         onError: onLoadFail,
         onClose: onClose,
-        traceContext: traceContext.current
+        traceContext: traceContext
       });
     }
     const {
@@ -180,8 +194,7 @@ export const ItemViewerBase = ({
         return /*#__PURE__*/React.createElement(ImageViewer, _extends({
           onLoad: onSuccess,
           onError: onLoadFail,
-          contextId: contextId,
-          traceContext: traceContext.current
+          contextId: contextId
         }, viewerProps));
       case 'audio':
         return /*#__PURE__*/React.createElement(AudioViewer, _extends({
@@ -226,8 +239,8 @@ export const ItemViewerBase = ({
         error: error,
         fileState: fileState,
         fileStateFlags: fileStateFlagsRef.current,
-        traceContext: traceContext.current
-      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), renderDownloadButton(fileState, error));
+        traceContext: traceContext
+      }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), renderDownloadButton(fileState, error));
     } else {
       return /*#__PURE__*/React.createElement(ErrorMessage, {
         fileId: isFileIdentifier(identifier) ? identifier.id : 'undefined',

package/dist/es2019/list.js

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { hideControlsClassName } from '@atlaskit/media-ui';
 import { ItemViewer } from './item-viewer';
 import { HeaderWrapper, ListWrapper } from './styleWrappers';
 import { Navigation } from './navigation';
+import { getRandomHex } from '@atlaskit/media-common';
 import Header from './header';
 export const List = ({
   defaultSelectedItem,
@@ -14,11 +15,15 @@ export const List = ({
   featureFlags,
   isSidebarVisible,
   onNavigationChange,
-  items
+  items,
+  viewerOptions
 }) => {
   const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);
   const [previewCount, setPreviewCount] = useState(0);
   const [isArchiveSideBarVisible, setIsArchiveSideBarVisible] = useState(false);
+  const traceContext = useRef({
+    traceId: getRandomHex(8)
+  });
   return /*#__PURE__*/React.createElement(ListWrapper, null, /*#__PURE__*/React.createElement(HeaderWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
@@ -32,14 +37,17 @@ export const List = ({
     isSidebarVisible: isSidebarVisible,
     isArchiveSideBarVisible: isArchiveSideBarVisible,
     featureFlags: featureFlags,
-    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible
+    onSetArchiveSideBarVisible: setIsArchiveSideBarVisible,
+    traceContext: traceContext.current
   })), /*#__PURE__*/React.createElement(ItemViewer, {
     identifier: selectedItem,
     showControls: showControls,
     onClose: onClose,
     previewCount: previewCount,
     contextId: contextId,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    viewerOptions: viewerOptions,
+    traceContext: traceContext.current
   }), /*#__PURE__*/React.createElement(Navigation, {
     items: items,
     selectedItem: selectedItem,

package/dist/es2019/media-viewer.js

@@ -21,7 +21,8 @@ const MediaViewerComponent = ({
   innerRef,
   onClose,
   selectedItem,
-  intl
+  intl,
+  viewerOptions
 }) => {
   const [isSidebarVisible, setIsSidebarVisible] = useState(false);
   const [selectedIdentifier, setSelectedIdentifier] = useState();
@@ -76,7 +77,8 @@ const MediaViewerComponent = ({
     onSidebarButtonClick: () => setIsSidebarVisible(!isSidebarVisible),
     isSidebarVisible: isSidebarVisible,
     contextId: contextId,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    viewerOptions: viewerOptions
   })), renderSidebar()));
   return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"

package/dist/es2019/viewerOptions.js

@@ -0,0 +1 @@
+export {};

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

@@ -5,6 +5,7 @@ import { unzip, HTTPRangeReader } from 'unzipit';
 import { FormattedMessage } from 'react-intl-next';
 import { CustomMediaPlayer, messages } from '@atlaskit/media-ui';
 import { getLanguageType, isCodeViewerItem } from '@atlaskit/media-ui/codeViewer';
+import { Text } from '@atlaskit/primitives';
 import { Outcome } from '../../domain';
 import { CustomVideoPlayerWrapper, AudioPlayer, CustomAudioPlayerWrapper, DefaultCoverWrapper, ListWrapper } from '../../styleWrappers';
 import AudioIcon from '@atlaskit/icon/core/migration/audio--media-services-audio';
@@ -48,7 +49,8 @@ export class ArchiveViewerBase extends BaseViewer {
       this.setState({
         content: Outcome.successful({
           ...this.state.content.data,
-          selectedArchiveEntry: undefined
+          selectedArchiveEntry: undefined,
+          hasLoadedEntries: false // displays a nice loading spinner for the content viewer
         })
       });
       let src = '';
@@ -56,7 +58,7 @@ export class ArchiveViewerBase extends BaseViewer {
       const isCodeMimeType = isCodeViewerItem(selectedArchiveEntry.name, getMimeTypeFromFilename(selectedArchiveEntry.name));
       if (!selectedArchiveEntry.isDirectory) {
         try {
-          const blob = await rejectAfter(() => selectedArchiveEntry.blob());
+          const blob = await rejectAfter(() => selectedArchiveEntry.blob(), 10000);
           src = URL.createObjectURL(blob);
           if (isCodeMimeType) {
             codeViewerSrc = await rejectAfter(() => blob.text());
@@ -74,7 +76,8 @@ export class ArchiveViewerBase extends BaseViewer {
           isDirectory: selectedArchiveEntry.isDirectory,
           error: undefined,
           codeViewerSrc,
-          isCodeMimeType
+          isCodeMimeType,
+          hasLoadedEntries: true
         })
       });
     });
@@ -145,7 +148,8 @@ export class ArchiveViewerBase extends BaseViewer {
   }
   renderArchiveItemViewer(content) {
     const {
-      item
+      item,
+      viewerOptions
     } = this.props;
     const {
       src,
@@ -160,9 +164,27 @@ export class ArchiveViewerBase extends BaseViewer {
       return this.renderPreviewError(error, selectedArchiveEntry);
     }
     if (!isDirectory && selectedArchiveEntry) {
+      var _viewerOptions$custom;
       if (!name || !src) {
         return this.renderPreviewError(new ArchiveViewerError('archiveviewer-missing-name-src'), selectedArchiveEntry);
       }
+      const customRenderer = viewerOptions === null || viewerOptions === void 0 ? void 0 : (_viewerOptions$custom = viewerOptions.customRenderers) === null || _viewerOptions$custom === void 0 ? void 0 : _viewerOptions$custom.find(renderer => renderer.shouldUseCustomRenderer({
+        fileItem: item,
+        archiveFileItem: {
+          name
+        }
+      }));
+      if (customRenderer) {
+        return /*#__PURE__*/React.createElement(ArchiveItemViewerWrapper, null, customRenderer.renderContent({
+          fileItem: item,
+          archiveFileItem: {
+            name
+          },
+          getBinaryContent: async () => (await fetch(src)).blob(),
+          onLoad: this.onViewerLoad(selectedArchiveEntry),
+          onError: this.onViewerError('archiveviewer-customrenderer-onerror', selectedArchiveEntry)
+        }));
+      }
       const mediaType = getMediaTypeFromFilename(name);
       if (isCodeMimeType) {
         // Same code viewer logic as in Item-Viewer.tsx
@@ -242,7 +264,7 @@ export class ArchiveViewerBase extends BaseViewer {
       fileState: item,
       error: error,
       supressAnalytics: true
-    }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file))));
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file))));
   }
 }
 export const ArchiveViewer = withAnalyticsEvents()(ArchiveViewerBase);

package/dist/es2019/viewers/base-viewer.js

@@ -81,13 +81,15 @@ export class BaseViewer extends React.Component {
     const {
       item,
       mediaClient,
-      collectionName
+      collectionName,
+      traceContext
     } = this.props;
     return /*#__PURE__*/React.createElement(ErrorViewDownloadButton, {
       fileState: item,
       mediaClient: mediaClient,
       error: error,
-      collectionName: collectionName
+      collectionName: collectionName,
+      traceContext: traceContext
     });
   }
   needsReset(propsA, propsB) {

package/dist/es2019/viewers/customViewer/customViewer.js

@@ -0,0 +1,37 @@
+import { MediaViewerError } from '../../errors';
+import { useCallback, useEffect, useState } from 'react';
+import React from 'react';
+import { Spinner } from '../../loading';
+export const CustomViewer = ({
+  mediaClient,
+  item,
+  customRendererConfig,
+  onSuccess,
+  onError
+}) => {
+  const [getBinaryContent, setGetBinaryContent] = useState();
+  useEffect(() => {
+    setGetBinaryContent(undefined);
+    const abortController = new AbortController();
+    // This sets the 'getBinaryContent' to an async function that fetches the binary content of the file
+    // The 'getBinaryContent' function has to be updated when the item changes
+    // This approach handles aborting in-progress request outside of the custom-renderer concern
+    if (item.status === 'processed' || item.status === 'failed-processing') {
+      setGetBinaryContent(() => () => mediaClient.mediaStore.getFileBinary(item.id, undefined, abortController));
+    }
+    return () => abortController.abort();
+  }, [item, mediaClient]);
+  const onLoadFailed = useCallback(error => {
+    const mediaError = new MediaViewerError('custom-viewer-error', error);
+    onError(mediaError, item);
+  }, [item, onError]);
+  if (!getBinaryContent) {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, customRendererConfig.renderContent({
+    fileItem: item,
+    getBinaryContent,
+    onLoad: onSuccess,
+    onError: onLoadFailed
+  }));
+};