@atlaskit/media-file-preview 0.0.1

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

@@ -0,0 +1,28 @@
+import { MediaClientErrorReason } from '@atlaskit/media-client';
+import { MediaTraceContext, SuccessAttributes } from '@atlaskit/media-common';
+import { MediaFilePreviewError, MediaFilePreviewErrorPrimaryReason } from './errors';
+export type FailedErrorFailReason = MediaFilePreviewErrorPrimaryReason | 'nativeError';
+export type MediaFilePreviewErrorInfo = {
+    failReason: FailedErrorFailReason;
+    error: MediaClientErrorReason | 'nativeError';
+    errorDetail: string;
+    metadataTraceContext?: MediaTraceContext;
+};
+export type SSRStatusFail = MediaFilePreviewErrorInfo & {
+    status: 'fail';
+};
+type SSRStatusSuccess = SuccessAttributes;
+type SSRStatusUnknown = {
+    status: 'unknown';
+};
+type SSRStatusAttributes = SSRStatusSuccess | SSRStatusFail | SSRStatusUnknown;
+export type SSRStatus = {
+    server: SSRStatusAttributes;
+    client: SSRStatusAttributes;
+};
+export declare const getErrorTraceContext: (error: MediaFilePreviewError) => MediaTraceContext | undefined;
+export declare const getRenderErrorFailReason: (error: MediaFilePreviewError) => FailedErrorFailReason;
+export declare const getRenderErrorErrorReason: (error: MediaFilePreviewError) => MediaClientErrorReason | 'nativeError';
+export declare const getRenderErrorErrorDetail: (error: MediaFilePreviewError) => string;
+export declare const extractErrorInfo: (error: MediaFilePreviewError, metadataTraceContext?: MediaTraceContext) => MediaFilePreviewErrorInfo;
+export {};

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

@@ -0,0 +1,42 @@
+import { MediaClientErrorReason } from '@atlaskit/media-client';
+import { MediaFileStateError } from '@atlaskit/media-client-react';
+import { MediaFilePreview } from './types';
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
+export type MediaFilePreviewErrorPrimaryReason = 'upload' | 'metadata-fetch' | 'error-file-state' | RemotePreviewPrimaryReason | LocalPreviewPrimaryReason | ImageLoadPrimaryReason | SsrPreviewPrimaryReason | 'missing-error-data' | 'preview-fetch';
+export type ImageLoadPrimaryReason = 'cache-remote-uri' | 'cache-local-uri' | 'local-uri' | 'remote-uri' | 'external-uri' | 'unknown-uri';
+export type RemotePreviewPrimaryReason = 'remote-preview-fetch' | 'remote-preview-not-ready' | 'remote-preview-fetch-ssr';
+export type LocalPreviewPrimaryReason = 'local-preview-get' | 'local-preview-unsupported' | 'local-preview-rejected' | 'local-preview-image' | 'local-preview-video';
+export type SsrPreviewPrimaryReason = 'ssr-client-uri' | 'ssr-client-load' | 'ssr-server-uri' | 'ssr-server-load';
+export declare class MediaFilePreviewError extends Error {
+    readonly primaryReason: MediaFilePreviewErrorPrimaryReason;
+    readonly secondaryError?: Error | undefined;
+    constructor(primaryReason: MediaFilePreviewErrorPrimaryReason, secondaryError?: Error | undefined);
+}
+export declare class LocalPreviewError extends MediaFilePreviewError {
+    readonly primaryReason: LocalPreviewPrimaryReason;
+    readonly secondaryError?: Error | undefined;
+    constructor(primaryReason: LocalPreviewPrimaryReason, secondaryError?: Error | undefined);
+}
+export declare class RemotePreviewError extends MediaFilePreviewError {
+    readonly primaryReason: RemotePreviewPrimaryReason;
+    readonly secondaryError?: Error | undefined;
+    constructor(primaryReason: RemotePreviewPrimaryReason, secondaryError?: Error | undefined);
+}
+export declare class SsrPreviewError extends MediaFilePreviewError {
+    readonly primaryReason: SsrPreviewPrimaryReason;
+    readonly secondaryError?: Error | undefined;
+    constructor(primaryReason: SsrPreviewPrimaryReason, secondaryError?: Error | undefined);
+}
+export declare class ImageLoadError extends MediaFilePreviewError {
+    constructor(source?: MediaFilePreview['source']);
+}
+export declare function isMediaFilePreviewError(err: Error): err is MediaFilePreviewError;
+export declare const isLocalPreviewError: (err: Error) => err is LocalPreviewError;
+export declare const isRemotePreviewError: (err: Error) => err is RemotePreviewError;
+export declare const isUnsupportedLocalPreviewError: (err: Error) => boolean;
+export declare const ensureMediaFilePreviewError: (primaryReason: MediaFilePreviewErrorPrimaryReason, error: Error, updatePrimaryReason?: boolean) => MediaFilePreviewError;
+export declare function isMediaFileStateError(err: Error): err is MediaFileStateError;
+export declare function getFileStateErrorReason(err: MediaFileStateError): MediaClientErrorReason | 'unknown';

package/dist/types-ts4.5/getPreview/cache.d.ts

@@ -0,0 +1,21 @@
+import { ImageResizeMode } from '@atlaskit/media-client';
+import { MediaFilePreview } from '../types';
+import { ObjectURLCache } from './objectURLCache';
+type Mode = ImageResizeMode | undefined;
+export declare const getCacheKey: (id: string, mode: Mode) => string;
+export interface MediaFilePreviewCache {
+    get(id: string, mode: Mode): MediaFilePreview | undefined;
+    set(id: string, mode: Mode, cardPreview: MediaFilePreview): void;
+    remove(id: string, mode: Mode): void;
+    clear(): void;
+}
+export declare class CardPreviewCacheImpl implements MediaFilePreviewCache {
+    private previewCache;
+    constructor(previewCache: ObjectURLCache);
+    get: (id: string, mode: Mode) => MediaFilePreview | undefined;
+    set: (id: string, mode: Mode, cardPreview: MediaFilePreview) => void;
+    remove: (id: string, mode: Mode) => void;
+    clear: () => void;
+}
+export declare const mediaFilePreviewCache: CardPreviewCacheImpl;
+export {};

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

@@ -0,0 +1,9 @@
+import { FilePreview, MediaBlobUrlAttrs, MediaClient, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreview, MediaFilePreviewDimensions } from '../types';
+export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => MediaFilePreview;
+export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
+export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;
+export declare const isSSRDataPreview: (preview: MediaFilePreview) => boolean;
+export declare const getAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: MediaFilePreviewDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;
+export declare const getAndCacheLocalPreview: (id: string, filePreview: FilePreview | Promise<FilePreview>, dimensions: MediaFilePreviewDimensions, mode: MediaStoreGetFileImageParams['mode'], mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => Promise<MediaFilePreview>;

package/dist/types-ts4.5/getPreview/helpers.d.ts

@@ -0,0 +1,10 @@
+import { FilePreview, MediaClient, MediaStoreGetFileImageParams, MediaType } from '@atlaskit/media-client';
+import { MediaTraceContext } from '@atlaskit/media-common';
+import { MediaFilePreview } from '../types';
+/**
+ * This method tells the support for the media
+ * types covered in getCardPreviewFromFilePreview
+ */
+export declare const isSupportedLocalPreview: (mediaType?: MediaType) => boolean;
+export declare const getLocalPreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<MediaFilePreview>;
+export declare const getRemotePreview: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceContext?: MediaTraceContext) => Promise<MediaFilePreview>;

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

@@ -0,0 +1,3 @@
+export { mediaFilePreviewCache } from './cache';
+export { getSSRPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, } from './getPreview';
+export { isSupportedLocalPreview } from './helpers';

package/dist/types-ts4.5/getPreview/objectURLCache.d.ts

@@ -0,0 +1,12 @@
+import { MediaFilePreview } from '../types';
+export declare const PREVIEW_CACHE_LRU_SIZE = 50;
+export declare class ObjectURLCache {
+    private readonly cache;
+    constructor(size: number);
+    has(key: string): boolean;
+    get(key: string): MediaFilePreview | undefined;
+    set(key: string, value: MediaFilePreview): void;
+    remove(key: string): void;
+    clear(): void;
+}
+export declare const createObjectURLCache: () => ObjectURLCache;

package/dist/types-ts4.5/getPreview/videoSnapshot.d.ts

@@ -0,0 +1 @@
+export declare const takeSnapshot: (blob: Blob) => Promise<string>;

package/dist/types-ts4.5/globalScope/getSSRData.d.ts

@@ -0,0 +1,3 @@
+import { FileIdentifier } from '@atlaskit/media-client';
+import type { MediaCardSsrData } from './types';
+export declare const getSSRData: (identifier: FileIdentifier) => MediaCardSsrData | undefined;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FileIdentifier } from '@atlaskit/media-client';
+import { NumericalCardDimensions } from '@atlaskit/media-common';
+import { MediaFilePreviewErrorInfo } from '../analytics';
+import { MediaCardSsr } from './types';
+export declare const GLOBAL_MEDIA_CARD_SSR = "mediaCardSsr";
+export declare const GLOBAL_MEDIA_NAMESPACE = "__MEDIA_INTERNAL";
+export type MediaGlobalScope = {
+    [GLOBAL_MEDIA_CARD_SSR]?: MediaCardSsr;
+};
+export declare function getMediaGlobalScope(globalScope?: any): MediaGlobalScope;
+export declare function getMediaCardSSR(globalScope?: any): MediaCardSsr;
+export declare const getKey: ({ id, collectionName, occurrenceKey }: FileIdentifier) => string;
+export declare const storeDataURI: (key: string, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaFilePreviewErrorInfo, globalScope?: any) => void;
+export declare const generateScriptProps: (identifier: FileIdentifier, dataURI?: string, dimensions?: Partial<NumericalCardDimensions>, error?: MediaFilePreviewErrorInfo) => React.ScriptHTMLAttributes<HTMLScriptElement>;

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

@@ -0,0 +1,4 @@
+export { GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, generateScriptProps, getKey, } from './globalScope';
+export { getSSRData } from './getSSRData';
+export type { MediaCardSsrData, MediaCardSsr } from './types';
+export type { MediaGlobalScope } from './globalScope';

package/dist/types-ts4.5/globalScope/printScript.d.ts

@@ -0,0 +1,2 @@
+export declare const printFunctionCall: <T extends any[]>(fn: (...args: T) => void, ...args: T) => string;
+export declare const printScript: (statements: string[]) => string;

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

@@ -0,0 +1,8 @@
+import { NumericalCardDimensions } from '@atlaskit/media-common';
+import { MediaFilePreviewErrorInfo } from '../analytics';
+export type MediaCardSsrData = {
+    dataURI?: string;
+    dimensions?: Partial<NumericalCardDimensions>;
+    error?: MediaFilePreviewErrorInfo;
+};
+export type MediaCardSsr = Record<string, MediaCardSsrData>;

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

@@ -0,0 +1,10 @@
+import { MutableRefObject } from 'react';
+import { MediaFilePreviewDimensions } from './types';
+/**
+ * Checks if at least one of next dimensions is bigger than current
+ * If a single dimension is undefined, returns false
+ */
+export declare const isBigger: (current?: MediaFilePreviewDimensions, next?: MediaFilePreviewDimensions) => boolean;
+export declare const createRequestDimensions: (dimensions: Partial<MediaFilePreviewDimensions>) => Partial<MediaFilePreviewDimensions> | undefined;
+/** Stores the provided value in a ref object to avoid "component rerenders" when the value is used as a hook dependency */
+export declare function useCurrentValueRef<T>(value: T): MutableRefObject<T>;

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

@@ -0,0 +1,2 @@
+export { useFilePreview } from './useFilePreview';
+export type { MediaFilePreview } from './types';

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

@@ -0,0 +1,12 @@
+export type MediaFilePreviewSource = 'local' | 'remote' | 'ssr-server' | 'ssr-client' | 'ssr-data' | 'cache-local' | 'cache-remote' | 'cache-ssr-client' | 'cache-ssr-server' | 'external';
+export type MediaFilePreviewDimensions = {
+    width?: number;
+    height?: number;
+};
+export interface MediaFilePreview {
+    dataURI: string;
+    orientation?: number;
+    dimensions?: MediaFilePreviewDimensions;
+    source: MediaFilePreviewSource;
+}
+export type MediaFilePreviewStatus = 'uploading' | 'loading' | 'processing' | 'loading-preview' | 'complete' | 'error' | 'failed-processing';

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { SSRStatus } from './analytics';
+import { MediaFilePreviewError } from './errors';
+import { MediaFilePreview, MediaFilePreviewDimensions } from './types';
+export interface UseFilePreviewParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' | 'stretchy-fit' */
+    readonly resizeMode?: ImageResizeMode;
+    /** Dimensions to be requested to the server. Will be scaled x2 in Retina Displays */
+    readonly dimensions?: MediaFilePreviewDimensions;
+    /** Server-Side-Rendering modes are "server" and "client" */
+    readonly ssr?: SSR;
+    /** Attributes to attach to the created Blob Url */
+    readonly mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
+    /** Trace context to be passed to the backend requests */
+    readonly traceContext?: MediaTraceContext;
+    /** Notify the hook that the preview successfully rendered */
+    readonly previewDidRender?: boolean;
+    /** Do not fetch a remote preview. Helpful for lazy loading */
+    readonly skipRemote?: boolean;
+}
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+    preview: MediaFilePreview | undefined;
+    error: MediaFilePreviewError | undefined;
+    nonCriticalError: MediaFilePreviewError | undefined;
+    ssrReliabilityRef: import("react").MutableRefObject<SSRStatus>;
+    onImageError: (newPreview?: MediaFilePreview) => void;
+    onImageLoad: (newPreview?: MediaFilePreview) => void;
+    getScriptProps: () => import("react").ScriptHTMLAttributes<HTMLScriptElement>;
+};

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@atlaskit/media-file-preview",
+  "version": "0.0.1",
+  "description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Media Experience",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "MediaFilePreview",
+      "category": "Components"
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/media-client": "^26.1.0",
+    "@atlaskit/media-client-react": "^2.0.1",
+    "@atlaskit/media-common": "^11.0.0",
+    "@atlaskit/media-ui": "^25.0.12",
+    "@babel/runtime": "^7.0.0",
+    "eventemitter2": "^4.1.0",
+    "lru_map": "^0.4.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/section-message": "^6.4.17",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}