@atlaskit/media-viewer 49.2.7 → 49.3.0

package/dist/esm/item-viewer.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
@@ -20,6 +21,7 @@ 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';
 var ImageViewer = Loadable({
   loader: function loader() {
     return import( /* webpackChunkName: "@atlaskit-internal_imageViewer" */'./viewers/image').then(function (mod) {
@@ -97,7 +99,8 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
     onClose = _ref.onClose,
     previewCount = _ref.previewCount,
     contextId = _ref.contextId,
-    createAnalyticsEvent = _ref.createAnalyticsEvent;
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    viewerOptions = _ref.viewerOptions;
   // States and Refs
   var _useState = useState(Outcome.pending()),
     _useState2 = _slicedToArray(_useState, 2),
@@ -182,14 +185,28 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
     setItem(Outcome.failed(mediaViewerError, fileState));
   }, [fileState]);
   var renderItem = function renderItem(fileItem) {
+    var _viewerOptions$custom;
     var collectionName = isFileIdentifier(identifier) ? identifier.collectionName : undefined;
     var viewerProps = {
       mediaClient: mediaClient,
       item: fileItem,
       collectionName: collectionName,
       onClose: onClose,
-      previewCount: previewCount
+      previewCount: previewCount,
+      viewerOptions: viewerOptions
     };
+    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: fileItem
+      });
+    });
+    if (customRenderer) {
+      return /*#__PURE__*/React.createElement(CustomViewer, _extends({
+        customRendererConfig: customRenderer,
+        onError: onLoadFail,
+        onSuccess: onSuccess
+      }, viewerProps));
+    }
 
     // TODO: fix all of the item errors
 
@@ -266,7 +283,7 @@ export var ItemViewerBase = function ItemViewerBase(_ref) {
         fileState: _fileState,
         fileStateFlags: fileStateFlagsRef.current,
         traceContext: traceContext.current
-      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file)), renderDownloadButton(_fileState, error));
+      }, /*#__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/esm/list.js

@@ -15,7 +15,8 @@ export var List = function List(_ref) {
     featureFlags = _ref.featureFlags,
     isSidebarVisible = _ref.isSidebarVisible,
     onNavigationChange = _ref.onNavigationChange,
-    items = _ref.items;
+    items = _ref.items,
+    viewerOptions = _ref.viewerOptions;
   var _useState = useState(defaultSelectedItem),
     _useState2 = _slicedToArray(_useState, 2),
     selectedItem = _useState2[0],
@@ -48,7 +49,8 @@ export var List = function List(_ref) {
     onClose: onClose,
     previewCount: previewCount,
     contextId: contextId,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    viewerOptions: viewerOptions
   }), /*#__PURE__*/React.createElement(Navigation, {
     items: items,
     selectedItem: selectedItem,

package/dist/esm/media-viewer.js

@@ -22,7 +22,8 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     innerRef = _ref.innerRef,
     _onClose = _ref.onClose,
     selectedItem = _ref.selectedItem,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    viewerOptions = _ref.viewerOptions;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSidebarVisible = _useState2[0],
@@ -85,7 +86,8 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     },
     isSidebarVisible: isSidebarVisible,
     contextId: contextId,
-    featureFlags: featureFlags
+    featureFlags: featureFlags,
+    viewerOptions: viewerOptions
   })), renderSidebar()));
   return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"

package/dist/esm/viewerOptions.js

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

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

@@ -17,6 +17,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';
@@ -92,7 +93,8 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
             case 0:
               _this.setState({
                 content: Outcome.successful(_objectSpread(_objectSpread({}, _this.state.content.data), {}, {
-                  selectedArchiveEntry: undefined
+                  selectedArchiveEntry: undefined,
+                  hasLoadedEntries: false // displays a nice loading spinner for the content viewer
                 }))
               });
               src = '';
@@ -106,7 +108,7 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
               _context2.next = 8;
               return rejectAfter(function () {
                 return selectedArchiveEntry.blob();
-              });
+              }, 10000);
             case 8:
               blob = _context2.sent;
               src = URL.createObjectURL(blob);
@@ -136,7 +138,8 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
                   isDirectory: selectedArchiveEntry.isDirectory,
                   error: undefined,
                   codeViewerSrc: codeViewerSrc,
-                  isCodeMimeType: isCodeMimeType
+                  isCodeMimeType: isCodeMimeType,
+                  hasLoadedEntries: true
                 }))
               });
             case 20:
@@ -238,7 +241,9 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
   }, {
     key: "renderArchiveItemViewer",
     value: function renderArchiveItemViewer(content) {
-      var item = this.props.item;
+      var _this$props2 = this.props,
+        item = _this$props2.item,
+        viewerOptions = _this$props2.viewerOptions;
       var src = content.src,
         name = content.name,
         isDirectory = content.isDirectory,
@@ -250,9 +255,48 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_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);
         }
+        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 _callee4() {
+                return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+                  while (1) switch (_context4.prev = _context4.next) {
+                    case 0:
+                      _context4.next = 2;
+                      return fetch(src);
+                    case 2:
+                      return _context4.abrupt("return", _context4.sent.blob());
+                    case 3:
+                    case "end":
+                      return _context4.stop();
+                  }
+                }, _callee4);
+              }));
+              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
@@ -324,16 +368,16 @@ export var ArchiveViewerBase = /*#__PURE__*/function (_BaseViewer) {
   }, {
     key: "renderPreviewError",
     value: function renderPreviewError(error, entry) {
-      var _this$props2 = this.props,
-        item = _this$props2.item,
-        createAnalyticsEvent = _this$props2.createAnalyticsEvent;
+      var _this$props3 = this.props,
+        item = _this$props3.item,
+        createAnalyticsEvent = _this$props3.createAnalyticsEvent;
       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("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file))));
+      }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_downloading_file))));
     }
   }]);
   return ArchiveViewerBase;

package/dist/esm/viewers/customViewer/customViewer.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { MediaViewerError } from '../../errors';
+import { useCallback, useEffect, useState } from 'react';
+import React from 'react';
+import { Spinner } from '../../loading';
+export var CustomViewer = function CustomViewer(_ref) {
+  var mediaClient = _ref.mediaClient,
+    item = _ref.item,
+    customRendererConfig = _ref.customRendererConfig,
+    onSuccess = _ref.onSuccess,
+    onError = _ref.onError;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    getBinaryContent = _useState2[0],
+    setGetBinaryContent = _useState2[1];
+  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 = useCallback(function (error) {
+    var 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: getBinaryContent,
+    onLoad: onSuccess,
+    onError: onLoadFailed
+  }));
+};

package/dist/types/components/media-viewer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type MediaViewerProps } from './types';
 import type { MediaViewerWithMediaClientConfigProps } from './types';
-export declare const MediaViewerBase: ({ featureFlags, onClose, selectedItem, collectionName, items, extensions, contextId, }: MediaViewerProps) => JSX.Element;
+export declare const MediaViewerBase: ({ featureFlags, onClose, selectedItem, collectionName, items, extensions, contextId, viewerOptions, }: MediaViewerProps) => JSX.Element;
 export declare const MediaViewerWithMediaClient: (props: MediaViewerWithMediaClientConfigProps) => JSX.Element;

package/dist/types/components/types.d.ts

@@ -2,6 +2,7 @@ import { type Identifier, type MediaClient } from '@atlaskit/media-client';
 import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
 import { type ReactNode } from 'react';
+import { type ViewerOptionsProps } from '../viewerOptions';
 export type FileStateFlags = {
     wasStatusProcessing: boolean;
     wasStatusUploading: boolean;
@@ -24,6 +25,7 @@ export interface MediaViewerProps {
     readonly featureFlags?: MediaFeatureFlags;
     readonly extensions?: MediaViewerExtensions;
     readonly contextId?: string;
+    readonly viewerOptions?: ViewerOptionsProps;
 }
 export type MediaMessage = {
     source: 'media';

package/dist/types/errors.d.ts

@@ -13,8 +13,8 @@ export declare class ArchiveViewerError extends MediaViewerError {
     constructor(primaryReason: ArchiveViewerErrorReason, secondaryError?: Error | undefined, zipEntry?: ZipEntry | undefined);
 }
 export declare function isArchiveViewerError(err: Error): err is ArchiveViewerError;
-export type MediaViewerErrorReason = 'collection-fetch-metadata' | 'header-fetch-metadata' | 'itemviewer-onerror' | 'itemviewer-fetch-metadata' | 'itemviewer-file-error-status' | 'itemviewer-file-failed-processing-status' | 'imageviewer-external-onerror' | 'imageviewer-fetch-url' | 'imageviewer-src-onerror' | 'audioviewer-fetch-url' | 'audioviewer-missing-artefact' | 'audioviewer-playback' | 'videoviewer-fetch-url' | 'videoviewer-missing-artefact' | 'videoviewer-playback' | 'docviewer-fetch-url' | 'docviewer-fetch-pdf' | 'codeviewer-fetch-src' | 'codeviewer-load-src' | 'codeviewer-file-size-exceeds' | 'codeviewer-parse-email' | 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error' | 'unsupported';
-export type ArchiveViewerErrorReason = 'archiveviewer-bundle-loader' | 'archiveviewer-read-binary' | 'archiveviewer-create-url' | 'archiveviewer-imageviewer-onerror' | 'archiveviewer-videoviewer-onerror' | 'archiveviewer-audioviewer-onerror' | 'archiveviewer-docviewer-onerror' | 'archiveviewer-codeviewer-onerror' | 'archiveviewer-codeviewer-file-size-exceeds' | 'archiveviewer-missing-name-src' | 'archiveviewer-unsupported' | 'archiveviewer-encrypted-entry';
+export type MediaViewerErrorReason = 'collection-fetch-metadata' | 'header-fetch-metadata' | 'itemviewer-onerror' | 'itemviewer-fetch-metadata' | 'itemviewer-file-error-status' | 'itemviewer-file-failed-processing-status' | 'imageviewer-external-onerror' | 'imageviewer-fetch-url' | 'imageviewer-src-onerror' | 'audioviewer-fetch-url' | 'audioviewer-missing-artefact' | 'audioviewer-playback' | 'videoviewer-fetch-url' | 'videoviewer-missing-artefact' | 'videoviewer-playback' | 'docviewer-fetch-url' | 'docviewer-fetch-pdf' | 'codeviewer-fetch-src' | 'codeviewer-load-src' | 'codeviewer-file-size-exceeds' | 'codeviewer-parse-email' | 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error' | 'unsupported' | 'custom-viewer-error';
+export type ArchiveViewerErrorReason = 'archiveviewer-bundle-loader' | 'archiveviewer-read-binary' | 'archiveviewer-create-url' | 'archiveviewer-imageviewer-onerror' | 'archiveviewer-videoviewer-onerror' | 'archiveviewer-audioviewer-onerror' | 'archiveviewer-docviewer-onerror' | 'archiveviewer-codeviewer-onerror' | 'archiveviewer-codeviewer-file-size-exceeds' | 'archiveviewer-missing-name-src' | 'archiveviewer-unsupported' | 'archiveviewer-encrypted-entry' | 'archiveviewer-customrenderer-onerror';
 export type PrimaryErrorReason = MediaViewerErrorReason | ArchiveViewerErrorReason;
 export type SecondaryErrorReason = MediaClientErrorReason | 'unknown' | 'nativeError' | undefined;
 export declare function getPrimaryErrorReason(error: MediaViewerError): PrimaryErrorReason;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default as MediaViewer } from './components/media-viewer-loader';
 export type { MediaViewerExtensions, MediaViewerExtensionsActions, MediaViewerProps, MediaMessage, } from './components/types';
+export type { ViewerOptionsProps, CustomRendererConfig, CustomRendererStateProps, CustomRendererProps, ArchiveFileItem, } from './viewerOptions';

package/dist/types/item-viewer.d.ts

@@ -5,23 +5,26 @@ import { Outcome } from './domain';
 import { MediaViewerError } from './errors';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
+import { type ViewerOptionsProps } from './viewerOptions';
 export type Props = Readonly<{
     identifier: Identifier;
     onClose?: () => void;
     previewCount: number;
     contextId?: string;
     featureFlags?: MediaFeatureFlags;
+    viewerOptions?: ViewerOptionsProps;
 }> & WithAnalyticsEventsProps & WithShowControlMethodProp;
 export type FileItem = FileState | 'external-image';
 export type State = Outcome<FileItem, MediaViewerError>;
 export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "external-image";
 export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
 export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
-export declare const ItemViewerBase: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
+export declare const ItemViewerBase: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, viewerOptions, }: Props) => React.ReactElement | null;
 export declare const ItemViewer: React.ForwardRefExoticComponent<Omit<Readonly<{
     identifier: Identifier;
     onClose?: (() => void) | undefined;
     previewCount: number;
     contextId?: string | undefined;
     featureFlags?: MediaFeatureFlags | undefined;
+    viewerOptions?: ViewerOptionsProps | undefined;
 }> & WithShowControlMethodProp, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types/list.d.ts

@@ -3,6 +3,7 @@ import { type Identifier } from '@atlaskit/media-client';
 import { type WithShowControlMethodProp } from '@atlaskit/media-ui';
 import { type MediaViewerExtensions } from './components/types';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
+import { type ViewerOptionsProps } from './viewerOptions';
 export type Props = Readonly<{
     onClose?: () => void;
     onNavigationChange?: (selectedItem: Identifier) => void;
@@ -13,10 +14,11 @@ export type Props = Readonly<{
     isSidebarVisible?: boolean;
     contextId?: string;
     featureFlags?: MediaFeatureFlags;
+    viewerOptions?: ViewerOptionsProps;
 } & WithShowControlMethodProp>;
 export type State = {
     selectedItem: Identifier;
     previewCount: number;
     isArchiveSideBarVisible: boolean;
 };
-export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, }: Props) => JSX.Element;
+export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, viewerOptions, }: Props) => JSX.Element;

package/dist/types/media-viewer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type Identifier } from '@atlaskit/media-client';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
 import { type MediaViewerExtensions } from './components/types';
+import { type ViewerOptionsProps } from './viewerOptions';
 export type Props = {
     onClose?: () => void;
     selectedItem?: Identifier;
@@ -10,5 +11,6 @@ export type Props = {
     extensions?: MediaViewerExtensions;
     contextId?: string;
     innerRef?: React.Ref<HTMLDivElement>;
+    viewerOptions?: ViewerOptionsProps;
 };
 export declare const MediaViewer: React.ComponentType<Props>;

package/dist/types/viewerOptions.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type NonErrorFileState } from '@atlaskit/media-client';
+export interface ViewerOptionsProps {
+    customRenderers?: CustomRendererConfig[];
+}
+export interface CustomRendererConfig {
+    shouldUseCustomRenderer: (props: CustomRendererStateProps) => boolean;
+    renderContent: (props: CustomRendererProps) => React.ReactNode;
+}
+export interface CustomRendererStateProps {
+    fileItem: NonErrorFileState;
+    archiveFileItem?: ArchiveFileItem;
+}
+export interface CustomRendererProps extends CustomRendererStateProps {
+    getBinaryContent: () => Promise<Blob>;
+    onLoad: () => void;
+    onError: (error: Error) => void;
+}
+export interface ArchiveFileItem {
+    name: string;
+}

package/dist/types/viewers/archiveSidebar/types.d.ts

@@ -1,9 +1,11 @@
 import { type MediaClient, type FileState, type ErrorFileState } from '@atlaskit/media-client';
 import { type ArchiveViewerError } from '../../errors';
+import { type ViewerOptionsProps } from '../../viewerOptions';
 export type ArchiveViewerProps = {
     item: Exclude<FileState, ErrorFileState>;
     mediaClient: MediaClient;
     collectionName?: string;
     onError: (error: ArchiveViewerError) => void;
     onSuccess: () => void;
+    viewerOptions?: ViewerOptionsProps;
 };

package/dist/types/viewers/customViewer/customViewer.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { FileState, MediaClient, NonErrorFileState } from '@atlaskit/media-client';
+import { MediaViewerError } from '../../errors';
+import type { CustomRendererConfig } from '../../viewerOptions';
+export type Props = {
+    mediaClient: MediaClient;
+    item: NonErrorFileState;
+    customRendererConfig: CustomRendererConfig;
+    onError: (error: MediaViewerError, fileItem?: FileState) => void;
+    onSuccess: () => void;
+};
+export declare const CustomViewer: ({ mediaClient, item, customRendererConfig, onSuccess, onError, }: Props) => JSX.Element;

package/dist/types-ts4.5/components/media-viewer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { type MediaViewerProps } from './types';
 import type { MediaViewerWithMediaClientConfigProps } from './types';
-export declare const MediaViewerBase: ({ featureFlags, onClose, selectedItem, collectionName, items, extensions, contextId, }: MediaViewerProps) => JSX.Element;
+export declare const MediaViewerBase: ({ featureFlags, onClose, selectedItem, collectionName, items, extensions, contextId, viewerOptions, }: MediaViewerProps) => JSX.Element;
 export declare const MediaViewerWithMediaClient: (props: MediaViewerWithMediaClientConfigProps) => JSX.Element;

package/dist/types-ts4.5/components/types.d.ts

@@ -2,6 +2,7 @@ import { type Identifier, type MediaClient } from '@atlaskit/media-client';
 import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
 import { type ReactNode } from 'react';
+import { type ViewerOptionsProps } from '../viewerOptions';
 export type FileStateFlags = {
     wasStatusProcessing: boolean;
     wasStatusUploading: boolean;
@@ -24,6 +25,7 @@ export interface MediaViewerProps {
     readonly featureFlags?: MediaFeatureFlags;
     readonly extensions?: MediaViewerExtensions;
     readonly contextId?: string;
+    readonly viewerOptions?: ViewerOptionsProps;
 }
 export type MediaMessage = {
     source: 'media';

package/dist/types-ts4.5/errors.d.ts

@@ -13,8 +13,8 @@ export declare class ArchiveViewerError extends MediaViewerError {
     constructor(primaryReason: ArchiveViewerErrorReason, secondaryError?: Error | undefined, zipEntry?: ZipEntry | undefined);
 }
 export declare function isArchiveViewerError(err: Error): err is ArchiveViewerError;
-export type MediaViewerErrorReason = 'collection-fetch-metadata' | 'header-fetch-metadata' | 'itemviewer-onerror' | 'itemviewer-fetch-metadata' | 'itemviewer-file-error-status' | 'itemviewer-file-failed-processing-status' | 'imageviewer-external-onerror' | 'imageviewer-fetch-url' | 'imageviewer-src-onerror' | 'audioviewer-fetch-url' | 'audioviewer-missing-artefact' | 'audioviewer-playback' | 'videoviewer-fetch-url' | 'videoviewer-missing-artefact' | 'videoviewer-playback' | 'docviewer-fetch-url' | 'docviewer-fetch-pdf' | 'codeviewer-fetch-src' | 'codeviewer-load-src' | 'codeviewer-file-size-exceeds' | 'codeviewer-parse-email' | 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error' | 'unsupported';
-export type ArchiveViewerErrorReason = 'archiveviewer-bundle-loader' | 'archiveviewer-read-binary' | 'archiveviewer-create-url' | 'archiveviewer-imageviewer-onerror' | 'archiveviewer-videoviewer-onerror' | 'archiveviewer-audioviewer-onerror' | 'archiveviewer-docviewer-onerror' | 'archiveviewer-codeviewer-onerror' | 'archiveviewer-codeviewer-file-size-exceeds' | 'archiveviewer-missing-name-src' | 'archiveviewer-unsupported' | 'archiveviewer-encrypted-entry';
+export type MediaViewerErrorReason = 'collection-fetch-metadata' | 'header-fetch-metadata' | 'itemviewer-onerror' | 'itemviewer-fetch-metadata' | 'itemviewer-file-error-status' | 'itemviewer-file-failed-processing-status' | 'imageviewer-external-onerror' | 'imageviewer-fetch-url' | 'imageviewer-src-onerror' | 'audioviewer-fetch-url' | 'audioviewer-missing-artefact' | 'audioviewer-playback' | 'videoviewer-fetch-url' | 'videoviewer-missing-artefact' | 'videoviewer-playback' | 'docviewer-fetch-url' | 'docviewer-fetch-pdf' | 'codeviewer-fetch-src' | 'codeviewer-load-src' | 'codeviewer-file-size-exceeds' | 'codeviewer-parse-email' | 'svg-img-error' | 'svg-binary-fetch' | 'svg-unknown-error' | 'unsupported' | 'custom-viewer-error';
+export type ArchiveViewerErrorReason = 'archiveviewer-bundle-loader' | 'archiveviewer-read-binary' | 'archiveviewer-create-url' | 'archiveviewer-imageviewer-onerror' | 'archiveviewer-videoviewer-onerror' | 'archiveviewer-audioviewer-onerror' | 'archiveviewer-docviewer-onerror' | 'archiveviewer-codeviewer-onerror' | 'archiveviewer-codeviewer-file-size-exceeds' | 'archiveviewer-missing-name-src' | 'archiveviewer-unsupported' | 'archiveviewer-encrypted-entry' | 'archiveviewer-customrenderer-onerror';
 export type PrimaryErrorReason = MediaViewerErrorReason | ArchiveViewerErrorReason;
 export type SecondaryErrorReason = MediaClientErrorReason | 'unknown' | 'nativeError' | undefined;
 export declare function getPrimaryErrorReason(error: MediaViewerError): PrimaryErrorReason;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,3 @@
 export { default as MediaViewer } from './components/media-viewer-loader';
 export type { MediaViewerExtensions, MediaViewerExtensionsActions, MediaViewerProps, MediaMessage, } from './components/types';
+export type { ViewerOptionsProps, CustomRendererConfig, CustomRendererStateProps, CustomRendererProps, ArchiveFileItem, } from './viewerOptions';

package/dist/types-ts4.5/item-viewer.d.ts

@@ -5,23 +5,26 @@ import { Outcome } from './domain';
 import { MediaViewerError } from './errors';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
+import { type ViewerOptionsProps } from './viewerOptions';
 export type Props = Readonly<{
     identifier: Identifier;
     onClose?: () => void;
     previewCount: number;
     contextId?: string;
     featureFlags?: MediaFeatureFlags;
+    viewerOptions?: ViewerOptionsProps;
 }> & WithAnalyticsEventsProps & WithShowControlMethodProp;
 export type FileItem = FileState | 'external-image';
 export type State = Outcome<FileItem, MediaViewerError>;
 export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "external-image";
 export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
 export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
-export declare const ItemViewerBase: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
+export declare const ItemViewerBase: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, viewerOptions, }: Props) => React.ReactElement | null;
 export declare const ItemViewer: React.ForwardRefExoticComponent<Omit<Readonly<{
     identifier: Identifier;
     onClose?: (() => void) | undefined;
     previewCount: number;
     contextId?: string | undefined;
     featureFlags?: MediaFeatureFlags | undefined;
+    viewerOptions?: ViewerOptionsProps | undefined;
 }> & WithShowControlMethodProp, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;

package/dist/types-ts4.5/list.d.ts

@@ -3,6 +3,7 @@ import { type Identifier } from '@atlaskit/media-client';
 import { type WithShowControlMethodProp } from '@atlaskit/media-ui';
 import { type MediaViewerExtensions } from './components/types';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
+import { type ViewerOptionsProps } from './viewerOptions';
 export type Props = Readonly<{
     onClose?: () => void;
     onNavigationChange?: (selectedItem: Identifier) => void;
@@ -13,10 +14,11 @@ export type Props = Readonly<{
     isSidebarVisible?: boolean;
     contextId?: string;
     featureFlags?: MediaFeatureFlags;
+    viewerOptions?: ViewerOptionsProps;
 } & WithShowControlMethodProp>;
 export type State = {
     selectedItem: Identifier;
     previewCount: number;
     isArchiveSideBarVisible: boolean;
 };
-export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, }: Props) => JSX.Element;
+export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, viewerOptions, }: Props) => JSX.Element;

package/dist/types-ts4.5/media-viewer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { type Identifier } from '@atlaskit/media-client';
 import { type MediaFeatureFlags } from '@atlaskit/media-common';
 import { type MediaViewerExtensions } from './components/types';
+import { type ViewerOptionsProps } from './viewerOptions';
 export type Props = {
     onClose?: () => void;
     selectedItem?: Identifier;
@@ -10,5 +11,6 @@ export type Props = {
     extensions?: MediaViewerExtensions;
     contextId?: string;
     innerRef?: React.Ref<HTMLDivElement>;
+    viewerOptions?: ViewerOptionsProps;
 };
 export declare const MediaViewer: React.ComponentType<Props>;

package/dist/types-ts4.5/viewerOptions.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type NonErrorFileState } from '@atlaskit/media-client';
+export interface ViewerOptionsProps {
+    customRenderers?: CustomRendererConfig[];
+}
+export interface CustomRendererConfig {
+    shouldUseCustomRenderer: (props: CustomRendererStateProps) => boolean;
+    renderContent: (props: CustomRendererProps) => React.ReactNode;
+}
+export interface CustomRendererStateProps {
+    fileItem: NonErrorFileState;
+    archiveFileItem?: ArchiveFileItem;
+}
+export interface CustomRendererProps extends CustomRendererStateProps {
+    getBinaryContent: () => Promise<Blob>;
+    onLoad: () => void;
+    onError: (error: Error) => void;
+}
+export interface ArchiveFileItem {
+    name: string;
+}

package/dist/types-ts4.5/viewers/archiveSidebar/types.d.ts

@@ -1,9 +1,11 @@
 import { type MediaClient, type FileState, type ErrorFileState } from '@atlaskit/media-client';
 import { type ArchiveViewerError } from '../../errors';
+import { type ViewerOptionsProps } from '../../viewerOptions';
 export type ArchiveViewerProps = {
     item: Exclude<FileState, ErrorFileState>;
     mediaClient: MediaClient;
     collectionName?: string;
     onError: (error: ArchiveViewerError) => void;
     onSuccess: () => void;
+    viewerOptions?: ViewerOptionsProps;
 };

package/dist/types-ts4.5/viewers/customViewer/customViewer.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { FileState, MediaClient, NonErrorFileState } from '@atlaskit/media-client';
+import { MediaViewerError } from '../../errors';
+import type { CustomRendererConfig } from '../../viewerOptions';
+export type Props = {
+    mediaClient: MediaClient;
+    item: NonErrorFileState;
+    customRendererConfig: CustomRendererConfig;
+    onError: (error: MediaViewerError, fileItem?: FileState) => void;
+    onSuccess: () => void;
+};
+export declare const CustomViewer: ({ mediaClient, item, customRendererConfig, onSuccess, onError, }: Props) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "49.2.7",
+	"version": "49.3.0",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,14 +40,14 @@
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/icon-file-type": "^6.7.0",
-		"@atlaskit/media-client": "^28.0.0",
+		"@atlaskit/media-client": "^28.2.0",
 		"@atlaskit/media-client-react": "^2.3.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-svg": "^0.2.0",
-		"@atlaskit/media-ui": "^26.0.0",
+		"@atlaskit/media-ui": "^26.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^13.0.0",
-		"@atlaskit/side-navigation": "^3.5.0",
+		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/side-navigation": "^3.6.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^14.0.0",
@@ -79,7 +79,7 @@
 		"@atlaskit/media-integration-test-helpers": "^3.1.0",
 		"@atlaskit/media-state": "^1.1.0",
 		"@atlaskit/media-test-data": "^2.6.0",
-		"@atlaskit/media-test-helpers": "^34.5.0",
+		"@atlaskit/media-test-helpers": "^34.6.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/toggle": "13.4.7",
 		"@atlaskit/visual-regression": "*",