@atlaskit/media-viewer 49.2.6 → 49.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/analytics/index.js +1 -1
  3. package/dist/cjs/analytics/ufoExperiences.js +1 -1
  4. package/dist/cjs/components/media-viewer.js +4 -2
  5. package/dist/cjs/item-viewer.js +20 -3
  6. package/dist/cjs/list.js +4 -2
  7. package/dist/cjs/media-viewer.js +4 -2
  8. package/dist/cjs/viewerOptions.js +5 -0
  9. package/dist/cjs/viewers/archiveSidebar/archive.js +52 -8
  10. package/dist/cjs/viewers/customViewer/customViewer.js +55 -0
  11. package/dist/cjs/viewers/video.js +25 -19
  12. package/dist/es2019/analytics/index.js +1 -1
  13. package/dist/es2019/analytics/ufoExperiences.js +1 -1
  14. package/dist/es2019/components/media-viewer.js +4 -2
  15. package/dist/es2019/item-viewer.js +18 -3
  16. package/dist/es2019/list.js +4 -2
  17. package/dist/es2019/media-viewer.js +4 -2
  18. package/dist/es2019/viewerOptions.js +1 -0
  19. package/dist/es2019/viewers/archiveSidebar/archive.js +27 -5
  20. package/dist/es2019/viewers/customViewer/customViewer.js +37 -0
  21. package/dist/es2019/viewers/video.js +7 -3
  22. package/dist/esm/analytics/index.js +1 -1
  23. package/dist/esm/analytics/ufoExperiences.js +1 -1
  24. package/dist/esm/components/media-viewer.js +4 -2
  25. package/dist/esm/item-viewer.js +20 -3
  26. package/dist/esm/list.js +4 -2
  27. package/dist/esm/media-viewer.js +4 -2
  28. package/dist/esm/viewerOptions.js +1 -0
  29. package/dist/esm/viewers/archiveSidebar/archive.js +52 -8
  30. package/dist/esm/viewers/customViewer/customViewer.js +46 -0
  31. package/dist/esm/viewers/video.js +25 -19
  32. package/dist/types/components/media-viewer.d.ts +1 -1
  33. package/dist/types/components/types.d.ts +2 -0
  34. package/dist/types/errors.d.ts +2 -2
  35. package/dist/types/index.d.ts +1 -0
  36. package/dist/types/item-viewer.d.ts +4 -1
  37. package/dist/types/list.d.ts +3 -1
  38. package/dist/types/media-viewer.d.ts +2 -0
  39. package/dist/types/viewerOptions.d.ts +21 -0
  40. package/dist/types/viewers/archiveSidebar/types.d.ts +2 -0
  41. package/dist/types/viewers/customViewer/customViewer.d.ts +12 -0
  42. package/dist/types-ts4.5/components/media-viewer.d.ts +1 -1
  43. package/dist/types-ts4.5/components/types.d.ts +2 -0
  44. package/dist/types-ts4.5/errors.d.ts +2 -2
  45. package/dist/types-ts4.5/index.d.ts +1 -0
  46. package/dist/types-ts4.5/item-viewer.d.ts +4 -1
  47. package/dist/types-ts4.5/list.d.ts +3 -1
  48. package/dist/types-ts4.5/media-viewer.d.ts +2 -0
  49. package/dist/types-ts4.5/viewerOptions.d.ts +21 -0
  50. package/dist/types-ts4.5/viewers/archiveSidebar/types.d.ts +2 -0
  51. package/dist/types-ts4.5/viewers/customViewer/customViewer.d.ts +12 -0
  52. package/package.json +7 -7
@@ -3,6 +3,7 @@ import { type Identifier } from '@atlaskit/media-client';
3
3
  import { type WithShowControlMethodProp } from '@atlaskit/media-ui';
4
4
  import { type MediaViewerExtensions } from './components/types';
5
5
  import { type MediaFeatureFlags } from '@atlaskit/media-common';
6
+ import { type ViewerOptionsProps } from './viewerOptions';
6
7
  export type Props = Readonly<{
7
8
  onClose?: () => void;
8
9
  onNavigationChange?: (selectedItem: Identifier) => void;
@@ -13,10 +14,11 @@ export type Props = Readonly<{
13
14
  isSidebarVisible?: boolean;
14
15
  contextId?: string;
15
16
  featureFlags?: MediaFeatureFlags;
17
+ viewerOptions?: ViewerOptionsProps;
16
18
  } & WithShowControlMethodProp>;
17
19
  export type State = {
18
20
  selectedItem: Identifier;
19
21
  previewCount: number;
20
22
  isArchiveSideBarVisible: boolean;
21
23
  };
22
- export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, }: Props) => JSX.Element;
24
+ export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, viewerOptions, }: Props) => JSX.Element;
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { type Identifier } from '@atlaskit/media-client';
3
3
  import { type MediaFeatureFlags } from '@atlaskit/media-common';
4
4
  import { type MediaViewerExtensions } from './components/types';
5
+ import { type ViewerOptionsProps } from './viewerOptions';
5
6
  export type Props = {
6
7
  onClose?: () => void;
7
8
  selectedItem?: Identifier;
@@ -10,5 +11,6 @@ export type Props = {
10
11
  extensions?: MediaViewerExtensions;
11
12
  contextId?: string;
12
13
  innerRef?: React.Ref<HTMLDivElement>;
14
+ viewerOptions?: ViewerOptionsProps;
13
15
  };
14
16
  export declare const MediaViewer: React.ComponentType<Props>;
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import { type NonErrorFileState } from '@atlaskit/media-client';
3
+ export interface ViewerOptionsProps {
4
+ customRenderers?: CustomRendererConfig[];
5
+ }
6
+ export interface CustomRendererConfig {
7
+ shouldUseCustomRenderer: (props: CustomRendererStateProps) => boolean;
8
+ renderContent: (props: CustomRendererProps) => React.ReactNode;
9
+ }
10
+ export interface CustomRendererStateProps {
11
+ fileItem: NonErrorFileState;
12
+ archiveFileItem?: ArchiveFileItem;
13
+ }
14
+ export interface CustomRendererProps extends CustomRendererStateProps {
15
+ getBinaryContent: () => Promise<Blob>;
16
+ onLoad: () => void;
17
+ onError: (error: Error) => void;
18
+ }
19
+ export interface ArchiveFileItem {
20
+ name: string;
21
+ }
@@ -1,9 +1,11 @@
1
1
  import { type MediaClient, type FileState, type ErrorFileState } from '@atlaskit/media-client';
2
2
  import { type ArchiveViewerError } from '../../errors';
3
+ import { type ViewerOptionsProps } from '../../viewerOptions';
3
4
  export type ArchiveViewerProps = {
4
5
  item: Exclude<FileState, ErrorFileState>;
5
6
  mediaClient: MediaClient;
6
7
  collectionName?: string;
7
8
  onError: (error: ArchiveViewerError) => void;
8
9
  onSuccess: () => void;
10
+ viewerOptions?: ViewerOptionsProps;
9
11
  };
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import type { FileState, MediaClient, NonErrorFileState } from '@atlaskit/media-client';
3
+ import { MediaViewerError } from '../../errors';
4
+ import type { CustomRendererConfig } from '../../viewerOptions';
5
+ export type Props = {
6
+ mediaClient: MediaClient;
7
+ item: NonErrorFileState;
8
+ customRendererConfig: CustomRendererConfig;
9
+ onError: (error: MediaViewerError, fileItem?: FileState) => void;
10
+ onSuccess: () => void;
11
+ };
12
+ export declare const CustomViewer: ({ mediaClient, item, customRendererConfig, onSuccess, onError, }: Props) => JSX.Element;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
2
  import { type MediaViewerProps } from './types';
3
3
  import type { MediaViewerWithMediaClientConfigProps } from './types';
4
- export declare const MediaViewerBase: ({ featureFlags, onClose, selectedItem, collectionName, items, extensions, contextId, }: MediaViewerProps) => JSX.Element;
4
+ export declare const MediaViewerBase: ({ featureFlags, onClose, selectedItem, collectionName, items, extensions, contextId, viewerOptions, }: MediaViewerProps) => JSX.Element;
5
5
  export declare const MediaViewerWithMediaClient: (props: MediaViewerWithMediaClientConfigProps) => JSX.Element;
@@ -2,6 +2,7 @@ import { type Identifier, type MediaClient } from '@atlaskit/media-client';
2
2
  import type { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
3
3
  import { type MediaFeatureFlags } from '@atlaskit/media-common';
4
4
  import { type ReactNode } from 'react';
5
+ import { type ViewerOptionsProps } from '../viewerOptions';
5
6
  export type FileStateFlags = {
6
7
  wasStatusProcessing: boolean;
7
8
  wasStatusUploading: boolean;
@@ -24,6 +25,7 @@ export interface MediaViewerProps {
24
25
  readonly featureFlags?: MediaFeatureFlags;
25
26
  readonly extensions?: MediaViewerExtensions;
26
27
  readonly contextId?: string;
28
+ readonly viewerOptions?: ViewerOptionsProps;
27
29
  }
28
30
  export type MediaMessage = {
29
31
  source: 'media';
@@ -13,8 +13,8 @@ export declare class ArchiveViewerError extends MediaViewerError {
13
13
  constructor(primaryReason: ArchiveViewerErrorReason, secondaryError?: Error | undefined, zipEntry?: ZipEntry | undefined);
14
14
  }
15
15
  export declare function isArchiveViewerError(err: Error): err is ArchiveViewerError;
16
- 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';
17
- 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';
16
+ 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';
17
+ 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';
18
18
  export type PrimaryErrorReason = MediaViewerErrorReason | ArchiveViewerErrorReason;
19
19
  export type SecondaryErrorReason = MediaClientErrorReason | 'unknown' | 'nativeError' | undefined;
20
20
  export declare function getPrimaryErrorReason(error: MediaViewerError): PrimaryErrorReason;
@@ -1,2 +1,3 @@
1
1
  export { default as MediaViewer } from './components/media-viewer-loader';
2
2
  export type { MediaViewerExtensions, MediaViewerExtensionsActions, MediaViewerProps, MediaMessage, } from './components/types';
3
+ export type { ViewerOptionsProps, CustomRendererConfig, CustomRendererStateProps, CustomRendererProps, ArchiveFileItem, } from './viewerOptions';
@@ -5,23 +5,26 @@ import { Outcome } from './domain';
5
5
  import { MediaViewerError } from './errors';
6
6
  import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
7
7
  import { type MediaFeatureFlags } from '@atlaskit/media-common';
8
+ import { type ViewerOptionsProps } from './viewerOptions';
8
9
  export type Props = Readonly<{
9
10
  identifier: Identifier;
10
11
  onClose?: () => void;
11
12
  previewCount: number;
12
13
  contextId?: string;
13
14
  featureFlags?: MediaFeatureFlags;
15
+ viewerOptions?: ViewerOptionsProps;
14
16
  }> & WithAnalyticsEventsProps & WithShowControlMethodProp;
15
17
  export type FileItem = FileState | 'external-image';
16
18
  export type State = Outcome<FileItem, MediaViewerError>;
17
19
  export declare const isExternalImageItem: (fileItem: FileItem) => fileItem is "external-image";
18
20
  export declare const isFileStateItem: (fileItem: FileItem) => fileItem is FileState;
19
21
  export declare const MAX_FILE_SIZE_SUPPORTED_BY_CODEVIEWER: number;
20
- export declare const ItemViewerBase: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, }: Props) => React.ReactElement | null;
22
+ export declare const ItemViewerBase: ({ identifier, showControls, onClose, previewCount, contextId, createAnalyticsEvent, viewerOptions, }: Props) => React.ReactElement | null;
21
23
  export declare const ItemViewer: React.ForwardRefExoticComponent<Omit<Readonly<{
22
24
  identifier: Identifier;
23
25
  onClose?: (() => void) | undefined;
24
26
  previewCount: number;
25
27
  contextId?: string | undefined;
26
28
  featureFlags?: MediaFeatureFlags | undefined;
29
+ viewerOptions?: ViewerOptionsProps | undefined;
27
30
  }> & WithShowControlMethodProp, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
@@ -3,6 +3,7 @@ import { type Identifier } from '@atlaskit/media-client';
3
3
  import { type WithShowControlMethodProp } from '@atlaskit/media-ui';
4
4
  import { type MediaViewerExtensions } from './components/types';
5
5
  import { type MediaFeatureFlags } from '@atlaskit/media-common';
6
+ import { type ViewerOptionsProps } from './viewerOptions';
6
7
  export type Props = Readonly<{
7
8
  onClose?: () => void;
8
9
  onNavigationChange?: (selectedItem: Identifier) => void;
@@ -13,10 +14,11 @@ export type Props = Readonly<{
13
14
  isSidebarVisible?: boolean;
14
15
  contextId?: string;
15
16
  featureFlags?: MediaFeatureFlags;
17
+ viewerOptions?: ViewerOptionsProps;
16
18
  } & WithShowControlMethodProp>;
17
19
  export type State = {
18
20
  selectedItem: Identifier;
19
21
  previewCount: number;
20
22
  isArchiveSideBarVisible: boolean;
21
23
  };
22
- export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, }: Props) => JSX.Element;
24
+ export declare const List: ({ defaultSelectedItem, onClose, showControls, extensions, onSidebarButtonClick, contextId, featureFlags, isSidebarVisible, onNavigationChange, items, viewerOptions, }: Props) => JSX.Element;
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import { type Identifier } from '@atlaskit/media-client';
3
3
  import { type MediaFeatureFlags } from '@atlaskit/media-common';
4
4
  import { type MediaViewerExtensions } from './components/types';
5
+ import { type ViewerOptionsProps } from './viewerOptions';
5
6
  export type Props = {
6
7
  onClose?: () => void;
7
8
  selectedItem?: Identifier;
@@ -10,5 +11,6 @@ export type Props = {
10
11
  extensions?: MediaViewerExtensions;
11
12
  contextId?: string;
12
13
  innerRef?: React.Ref<HTMLDivElement>;
14
+ viewerOptions?: ViewerOptionsProps;
13
15
  };
14
16
  export declare const MediaViewer: React.ComponentType<Props>;
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import { type NonErrorFileState } from '@atlaskit/media-client';
3
+ export interface ViewerOptionsProps {
4
+ customRenderers?: CustomRendererConfig[];
5
+ }
6
+ export interface CustomRendererConfig {
7
+ shouldUseCustomRenderer: (props: CustomRendererStateProps) => boolean;
8
+ renderContent: (props: CustomRendererProps) => React.ReactNode;
9
+ }
10
+ export interface CustomRendererStateProps {
11
+ fileItem: NonErrorFileState;
12
+ archiveFileItem?: ArchiveFileItem;
13
+ }
14
+ export interface CustomRendererProps extends CustomRendererStateProps {
15
+ getBinaryContent: () => Promise<Blob>;
16
+ onLoad: () => void;
17
+ onError: (error: Error) => void;
18
+ }
19
+ export interface ArchiveFileItem {
20
+ name: string;
21
+ }
@@ -1,9 +1,11 @@
1
1
  import { type MediaClient, type FileState, type ErrorFileState } from '@atlaskit/media-client';
2
2
  import { type ArchiveViewerError } from '../../errors';
3
+ import { type ViewerOptionsProps } from '../../viewerOptions';
3
4
  export type ArchiveViewerProps = {
4
5
  item: Exclude<FileState, ErrorFileState>;
5
6
  mediaClient: MediaClient;
6
7
  collectionName?: string;
7
8
  onError: (error: ArchiveViewerError) => void;
8
9
  onSuccess: () => void;
10
+ viewerOptions?: ViewerOptionsProps;
9
11
  };
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import type { FileState, MediaClient, NonErrorFileState } from '@atlaskit/media-client';
3
+ import { MediaViewerError } from '../../errors';
4
+ import type { CustomRendererConfig } from '../../viewerOptions';
5
+ export type Props = {
6
+ mediaClient: MediaClient;
7
+ item: NonErrorFileState;
8
+ customRendererConfig: CustomRendererConfig;
9
+ onError: (error: MediaViewerError, fileItem?: FileState) => void;
10
+ onSuccess: () => void;
11
+ };
12
+ export declare const CustomViewer: ({ mediaClient, item, customRendererConfig, onSuccess, onError, }: Props) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-viewer",
3
- "version": "49.2.6",
3
+ "version": "49.3.0",
4
4
  "description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -40,18 +40,18 @@
40
40
  "@atlaskit/form": "^10.5.0",
41
41
  "@atlaskit/icon": "^22.24.0",
42
42
  "@atlaskit/icon-file-type": "^6.7.0",
43
- "@atlaskit/media-client": "^28.0.0",
43
+ "@atlaskit/media-client": "^28.2.0",
44
44
  "@atlaskit/media-client-react": "^2.3.0",
45
45
  "@atlaskit/media-common": "^11.7.0",
46
46
  "@atlaskit/media-svg": "^0.2.0",
47
- "@atlaskit/media-ui": "^26.0.0",
47
+ "@atlaskit/media-ui": "^26.1.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
- "@atlaskit/primitives": "^13.0.0",
50
- "@atlaskit/side-navigation": "^3.5.0",
49
+ "@atlaskit/primitives": "^13.1.0",
50
+ "@atlaskit/side-navigation": "^3.6.0",
51
51
  "@atlaskit/spinner": "^16.3.0",
52
52
  "@atlaskit/textfield": "^6.5.0",
53
53
  "@atlaskit/theme": "^14.0.0",
54
- "@atlaskit/tokens": "^2.1.0",
54
+ "@atlaskit/tokens": "^2.2.0",
55
55
  "@atlaskit/ufo": "^0.3.0",
56
56
  "@babel/runtime": "^7.0.0",
57
57
  "@kenjiuno/msgreader": "^1.2.6",
@@ -79,7 +79,7 @@
79
79
  "@atlaskit/media-integration-test-helpers": "^3.1.0",
80
80
  "@atlaskit/media-state": "^1.1.0",
81
81
  "@atlaskit/media-test-data": "^2.6.0",
82
- "@atlaskit/media-test-helpers": "^34.5.0",
82
+ "@atlaskit/media-test-helpers": "^34.6.0",
83
83
  "@atlaskit/ssr": "*",
84
84
  "@atlaskit/toggle": "13.4.7",
85
85
  "@atlaskit/visual-regression": "*",