@atlaskit/media-file-preview 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -1 +1,7 @@
 # @atlaskit/media-file-preview
+
+## 0.1.0
+
+### Minor Changes
+
+- [#65749](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65749) [`cf9674e67f0c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cf9674e67f0c) - Breaking: updated prop types

package/dist/cjs/useFilePreview.js

@@ -27,7 +27,11 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     traceContext = _ref.traceContext,
     previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
-    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    _ref$allowAnimated = _ref.allowAnimated,
+    allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge;
   var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _useState = (0, _react.useState)('loading'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -51,17 +55,16 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     return dimensions ? (0, _helpers.createRequestDimensions)(dimensions) : undefined;
   }, [dimensions]);
   var requestDimensionsRef = (0, _helpers.useCurrentValueRef)(requestDimensions);
-  var imageURLParams = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({
-      collection: identifier.collectionName,
-      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestDimensions), {}, {
-      allowAnimated: true
-    });
-  }, [requestDimensions, identifier.collectionName, resizeMode]);
+  var imageURLParams = _objectSpread(_objectSpread({
+    collection: identifier.collectionName,
+    mode: resizeMode
+  }, requestDimensions), {}, {
+    allowAnimated: allowAnimated,
+    upscale: upscale,
+    'max-age': maxAge
+  });
   var previewInitializer = function previewInitializer() {
-    var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-    var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
     if (preview) {
       return preview;
     }
@@ -227,7 +230,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------
 
   (0, _react.useEffect)(function () {
-    var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+    var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
 
     // Cached Preview ----------------------------------------------------------------
     if (!preview && cachedPreview && !(0, _helpers.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
@@ -239,7 +242,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, fileState.preview, requestDimensions || {}, imageURLParams.mode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
+      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -252,7 +255,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         setError((0, _errors.ensureMediaFilePreviewError)('preview-fetch', e));
       });
     }
-  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -289,8 +292,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         setIsBannedLocalPreview(true);
         setNonCriticalError(error);
       }
-      var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
-      _getPreview.mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      _getPreview.mediaFilePreviewCache.remove(identifier.id, resizeMode);
       setPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {

package/dist/es2019/useFilePreview.js

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
+import { isImageRepresentationReady } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { extractErrorInfo } from './analytics';
@@ -15,7 +15,10 @@ export const useFilePreview = ({
   traceContext,
   previewDidRender,
   skipRemote,
-  mediaBlobUrlAttrs
+  mediaBlobUrlAttrs,
+  allowAnimated = true,
+  upscale,
+  maxAge
 }) => {
   const mediaClient = useMediaClient();
   const [status, setStatus] = useState('loading');
@@ -26,15 +29,16 @@ export const useFilePreview = ({
   const ssrReliabilityRef = useRef(initialSsrReliability);
   const requestDimensions = useMemo(() => dimensions ? createRequestDimensions(dimensions) : undefined, [dimensions]);
   const requestDimensionsRef = useCurrentValueRef(requestDimensions);
-  const imageURLParams = useMemo(() => ({
+  const imageURLParams = {
     collection: identifier.collectionName,
-    mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode,
+    mode: resizeMode,
     ...requestDimensions,
-    allowAnimated: true
-  }), [requestDimensions, identifier.collectionName, resizeMode]);
+    allowAnimated,
+    upscale,
+    'max-age': maxAge
+  };
   const previewInitializer = () => {
-    const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    const preview = mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    const preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
     if (preview) {
       return preview;
     }
@@ -204,7 +208,7 @@ export const useFilePreview = ({
   //----------------------------------------------------------------
 
   useEffect(() => {
-    const cachedPreview = mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+    const cachedPreview = mediaFilePreviewCache.get(identifier.id, resizeMode);
 
     // Cached Preview ----------------------------------------------------------------
     if (!preview && cachedPreview && !isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
@@ -216,7 +220,7 @@ export const useFilePreview = ({
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, imageURLParams.mode, mediaBlobUrlAttrs).then(setPreview).catch(e => {
+      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(e => {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -229,7 +233,7 @@ export const useFilePreview = ({
         setError(ensureMediaFilePreviewError('preview-fetch', e));
       });
     }
-  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -267,8 +271,7 @@ export const useFilePreview = ({
         setIsBannedLocalPreview(true);
         setNonCriticalError(error);
       }
-      const fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      mediaFilePreviewCache.remove(identifier.id, resizeMode);
       setPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {

package/dist/esm/useFilePreview.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { imageResizeModeToFileImageMode, isImageRepresentationReady } from '@atlaskit/media-client';
+import { isImageRepresentationReady } from '@atlaskit/media-client';
 import { MediaFileStateError, useFileState, useMediaClient } from '@atlaskit/media-client-react';
 import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
 import { extractErrorInfo } from './analytics';
@@ -20,7 +20,11 @@ export var useFilePreview = function useFilePreview(_ref) {
     traceContext = _ref.traceContext,
     previewDidRender = _ref.previewDidRender,
     skipRemote = _ref.skipRemote,
-    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    _ref$allowAnimated = _ref.allowAnimated,
+    allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge;
   var mediaClient = useMediaClient();
   var _useState = useState('loading'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -44,17 +48,16 @@ export var useFilePreview = function useFilePreview(_ref) {
     return dimensions ? createRequestDimensions(dimensions) : undefined;
   }, [dimensions]);
   var requestDimensionsRef = useCurrentValueRef(requestDimensions);
-  var imageURLParams = useMemo(function () {
-    return _objectSpread(_objectSpread({
-      collection: identifier.collectionName,
-      mode: resizeMode === 'stretchy-fit' ? 'full-fit' : resizeMode
-    }, requestDimensions), {}, {
-      allowAnimated: true
-    });
-  }, [requestDimensions, identifier.collectionName, resizeMode]);
+  var imageURLParams = _objectSpread(_objectSpread({
+    collection: identifier.collectionName,
+    mode: resizeMode
+  }, requestDimensions), {}, {
+    allowAnimated: allowAnimated,
+    upscale: upscale,
+    'max-age': maxAge
+  });
   var previewInitializer = function previewInitializer() {
-    var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-    var preview = mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    var preview = mediaFilePreviewCache.get(identifier.id, resizeMode);
     if (preview) {
       return preview;
     }
@@ -220,7 +223,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------
 
   useEffect(function () {
-    var cachedPreview = mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+    var cachedPreview = mediaFilePreviewCache.get(identifier.id, resizeMode);
 
     // Cached Preview ----------------------------------------------------------------
     if (!preview && cachedPreview && !isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
@@ -232,7 +235,7 @@ export var useFilePreview = function useFilePreview(_ref) {
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
 
-      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, imageURLParams.mode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
+      getAndCacheLocalPreview(identifier.id, fileState.preview, requestDimensions || {}, resizeMode, mediaBlobUrlAttrs).then(setPreview).catch(function (e) {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -245,7 +248,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         setError(ensureMediaFilePreviewError('preview-fetch', e));
       });
     }
-  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -282,8 +285,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         setIsBannedLocalPreview(true);
         setNonCriticalError(error);
       }
-      var fileImageMode = imageResizeModeToFileImageMode(resizeMode);
-      mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      mediaFilePreviewCache.remove(identifier.id, resizeMode);
       setPreview(undefined);
     } else {
       if (!['complete', 'error', 'failed-processing'].includes(status)) {

package/dist/types/getPreview/cache.d.ts

@@ -1,7 +1,7 @@
-import { ImageResizeMode } from '@atlaskit/media-client';
+import { MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaFilePreview } from '../types';
 import { ObjectURLCache } from './objectURLCache';
-type Mode = ImageResizeMode | undefined;
+type Mode = MediaStoreGetFileImageParams['mode'] | undefined;
 export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface MediaFilePreviewCache {
     get(id: string, mode: Mode): MediaFilePreview | undefined;

package/dist/types/useFilePreview.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaTraceContext, SSR } from '@atlaskit/media-common';
 import { SSRStatus } from './analytics';
 import { MediaFilePreviewError } from './errors';
@@ -7,8 +7,8 @@ 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;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' */
+    readonly resizeMode?: MediaStoreGetFileImageParams['mode'];
     /** 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" */
@@ -21,8 +21,15 @@ export interface UseFilePreviewParams {
     readonly previewDidRender?: boolean;
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
+    /** Define whether an animated image is acceptable to return */
+    readonly allowAnimated?: boolean;
+    /** Define the upscale strategy for this image. */
+    readonly upscale?: boolean;
+    /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
+     */
+    readonly maxAge?: number;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
     preview: MediaFilePreview | undefined;
     error: MediaFilePreviewError | undefined;
     nonCriticalError: MediaFilePreviewError | undefined;

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

@@ -1,7 +1,7 @@
-import { ImageResizeMode } from '@atlaskit/media-client';
+import { MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaFilePreview } from '../types';
 import { ObjectURLCache } from './objectURLCache';
-type Mode = ImageResizeMode | undefined;
+type Mode = MediaStoreGetFileImageParams['mode'] | undefined;
 export declare const getCacheKey: (id: string, mode: Mode) => string;
 export interface MediaFilePreviewCache {
     get(id: string, mode: Mode): MediaFilePreview | undefined;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FileIdentifier, ImageResizeMode, MediaBlobUrlAttrs } from '@atlaskit/media-client';
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { MediaTraceContext, SSR } from '@atlaskit/media-common';
 import { SSRStatus } from './analytics';
 import { MediaFilePreviewError } from './errors';
@@ -7,8 +7,8 @@ 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;
+    /** Resize the media to 'crop' | 'fit' | 'full-fit' */
+    readonly resizeMode?: MediaStoreGetFileImageParams['mode'];
     /** 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" */
@@ -21,8 +21,15 @@ export interface UseFilePreviewParams {
     readonly previewDidRender?: boolean;
     /** Do not fetch a remote preview. Helpful for lazy loading */
     readonly skipRemote?: boolean;
+    /** Define whether an animated image is acceptable to return */
+    readonly allowAnimated?: boolean;
+    /** Define the upscale strategy for this image. */
+    readonly upscale?: boolean;
+    /** Make the client receive the response with the given max-age cache control header. Minimum: 0, maximum: 9223372036854776000.
+     */
+    readonly maxAge?: number;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, traceContext, previewDidRender, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, }: UseFilePreviewParams) => {
     preview: MediaFilePreview | undefined;
     error: MediaFilePreviewError | undefined;
     nonCriticalError: MediaFilePreviewError | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "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",
@@ -52,7 +52,6 @@
     "@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",