@atlaskit/media-file-preview 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/media-file-preview
 
+## 0.5.0
+
+### Minor Changes
+
+- [#73279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73279) [`cdad00f21119`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cdad00f21119) - Create useMediaImage hook
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "useFilePreview", {
     return _useFilePreview.useFilePreview;
   }
 });
-var _useFilePreview = require("./useFilePreview");
+Object.defineProperty(exports, "useMediaImage", {
+  enumerable: true,
+  get: function get() {
+    return _useMediaImage.useMediaImage;
+  }
+});
+var _useFilePreview = require("./useFilePreview");
+var _useMediaImage = require("./useMediaImage");

package/dist/cjs/useMediaImage.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaImage = void 0;
+var _react = require("react");
+var _useFilePreview2 = require("./useFilePreview");
+var useMediaImage = exports.useMediaImage = function useMediaImage(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    dimensions = _ref.dimensions,
+    ssr = _ref.ssr,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    traceContext = _ref.traceContext,
+    skipRemote = _ref.skipRemote,
+    allowAnimated = _ref.allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge,
+    onLoadCallback = _ref.onLoad,
+    onErrorCallback = _ref.onError;
+  var _useFilePreview = (0, _useFilePreview2.useFilePreview)({
+      identifier: identifier,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      ssr: ssr,
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      traceContext: traceContext,
+      skipRemote: skipRemote,
+      allowAnimated: allowAnimated,
+      upscale: upscale,
+      maxAge: maxAge
+    }),
+    preview = _useFilePreview.preview,
+    status = _useFilePreview.status,
+    error = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    onImageLoad = _useFilePreview.onImageLoad,
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+  var onLoad = (0, _react.useCallback)(function () {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  var onError = (0, _react.useCallback)(function () {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  var getImgProps = (0, _react.useCallback)(function () {
+    return {
+      src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      onLoad: onLoad,
+      onError: onError,
+      'data-test-file-id': identifier.id,
+      'data-test-collection': identifier.collectionName,
+      'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+    };
+  }, [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status: status,
+    error: error,
+    getImgProps: getImgProps,
+    getSsrScriptProps: getSsrScriptProps
+  };
+};

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export { useFilePreview } from './useFilePreview';
+export { useFilePreview } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';

package/dist/es2019/useMediaImage.js

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFilePreview } from './useFilePreview';
+export const useMediaImage = ({
+  identifier,
+  resizeMode,
+  dimensions,
+  ssr,
+  mediaBlobUrlAttrs,
+  traceContext,
+  skipRemote,
+  allowAnimated,
+  upscale,
+  maxAge,
+  onLoad: onLoadCallback,
+  onError: onErrorCallback
+}) => {
+  const {
+    preview,
+    status,
+    error,
+    onImageError,
+    onImageLoad,
+    getSsrScriptProps
+  } = useFilePreview({
+    identifier,
+    resizeMode,
+    dimensions,
+    ssr,
+    mediaBlobUrlAttrs,
+    traceContext,
+    skipRemote,
+    allowAnimated,
+    upscale,
+    maxAge
+  });
+  const onLoad = useCallback(() => {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  const onError = useCallback(() => {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  const getImgProps = useCallback(() => ({
+    src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+    onLoad,
+    onError,
+    'data-test-file-id': identifier.id,
+    'data-test-collection': identifier.collectionName,
+    'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+  }), [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status,
+    error,
+    getImgProps,
+    getSsrScriptProps
+  };
+};

package/dist/esm/index.js

@@ -1 +1,2 @@
-export { useFilePreview } from './useFilePreview';
+export { useFilePreview } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';

package/dist/esm/useMediaImage.js

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+import { useFilePreview } from './useFilePreview';
+export var useMediaImage = function useMediaImage(_ref) {
+  var identifier = _ref.identifier,
+    resizeMode = _ref.resizeMode,
+    dimensions = _ref.dimensions,
+    ssr = _ref.ssr,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs,
+    traceContext = _ref.traceContext,
+    skipRemote = _ref.skipRemote,
+    allowAnimated = _ref.allowAnimated,
+    upscale = _ref.upscale,
+    maxAge = _ref.maxAge,
+    onLoadCallback = _ref.onLoad,
+    onErrorCallback = _ref.onError;
+  var _useFilePreview = useFilePreview({
+      identifier: identifier,
+      resizeMode: resizeMode,
+      dimensions: dimensions,
+      ssr: ssr,
+      mediaBlobUrlAttrs: mediaBlobUrlAttrs,
+      traceContext: traceContext,
+      skipRemote: skipRemote,
+      allowAnimated: allowAnimated,
+      upscale: upscale,
+      maxAge: maxAge
+    }),
+    preview = _useFilePreview.preview,
+    status = _useFilePreview.status,
+    error = _useFilePreview.error,
+    onImageError = _useFilePreview.onImageError,
+    onImageLoad = _useFilePreview.onImageLoad,
+    getSsrScriptProps = _useFilePreview.getSsrScriptProps;
+  var onLoad = useCallback(function () {
+    onLoadCallback && onLoadCallback();
+    onImageLoad(preview);
+  }, [onImageLoad, onLoadCallback, preview]);
+  var onError = useCallback(function () {
+    onErrorCallback && onErrorCallback();
+    onImageError(preview);
+  }, [onErrorCallback, onImageError, preview]);
+  var getImgProps = useCallback(function () {
+    return {
+      src: preview === null || preview === void 0 ? void 0 : preview.dataURI,
+      onLoad: onLoad,
+      onError: onError,
+      'data-test-file-id': identifier.id,
+      'data-test-collection': identifier.collectionName,
+      'data-test-preview-source': preview === null || preview === void 0 ? void 0 : preview.source
+    };
+  }, [identifier.collectionName, identifier.id, onError, onLoad, preview === null || preview === void 0 ? void 0 : preview.dataURI, preview === null || preview === void 0 ? void 0 : preview.source]);
+  return {
+    status: status,
+    error: error,
+    getImgProps: getImgProps,
+    getSsrScriptProps: getSsrScriptProps
+  };
+};

package/dist/types/index.d.ts

@@ -1,2 +1,5 @@
 export { useFilePreview } from './useFilePreview';
+export type { UseFilePreviewParams } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';
+export type { UseMediaImageParams } from './useMediaImage';
 export type { MediaFilePreview } from './types';

package/dist/types/useMediaImage.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreviewDimensions } from './types';
+export interface UseMediaImageParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** 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" */
+    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;
+    /** 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;
+    /** On image load and on error callback from the parent. We are keeping the name same to streamline the customer experience when using these properties back to their image components */
+    readonly onLoad?: () => void;
+    readonly onError?: () => void;
+}
+export declare const useMediaImage: ({ identifier, resizeMode, dimensions, ssr, mediaBlobUrlAttrs, traceContext, skipRemote, allowAnimated, upscale, maxAge, onLoad: onLoadCallback, onError: onErrorCallback, }: UseMediaImageParams) => {
+    status: import("./types").MediaFilePreviewStatus;
+    error: import("./errors").MediaFilePreviewError | undefined;
+    getImgProps: () => {
+        src: string | undefined;
+        onLoad: () => void;
+        onError: () => void;
+        'data-test-file-id': string;
+        'data-test-collection': string | undefined;
+        'data-test-preview-source': import("./types").MediaFilePreviewSource | undefined;
+    };
+    getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
+};

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

@@ -1,2 +1,5 @@
 export { useFilePreview } from './useFilePreview';
+export type { UseFilePreviewParams } from './useFilePreview';
+export { useMediaImage } from './useMediaImage';
+export type { UseMediaImageParams } from './useMediaImage';
 export type { MediaFilePreview } from './types';

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { FileIdentifier, MediaBlobUrlAttrs, MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { MediaTraceContext, SSR } from '@atlaskit/media-common';
+import { MediaFilePreviewDimensions } from './types';
+export interface UseMediaImageParams {
+    /** Instance of file identifier. */
+    readonly identifier: FileIdentifier;
+    /** 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" */
+    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;
+    /** 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;
+    /** On image load and on error callback from the parent. We are keeping the name same to streamline the customer experience when using these properties back to their image components */
+    readonly onLoad?: () => void;
+    readonly onError?: () => void;
+}
+export declare const useMediaImage: ({ identifier, resizeMode, dimensions, ssr, mediaBlobUrlAttrs, traceContext, skipRemote, allowAnimated, upscale, maxAge, onLoad: onLoadCallback, onError: onErrorCallback, }: UseMediaImageParams) => {
+    status: import("./types").MediaFilePreviewStatus;
+    error: import("./errors").MediaFilePreviewError | undefined;
+    getImgProps: () => {
+        src: string | undefined;
+        onLoad: () => void;
+        onError: () => void;
+        'data-test-file-id': string;
+        'data-test-collection': string | undefined;
+        'data-test-preview-source': import("./types").MediaFilePreviewSource | undefined;
+    };
+    getSsrScriptProps: (() => import("react").ScriptHTMLAttributes<HTMLScriptElement>) | undefined;
+};

package/example-helpers/TerminalTextDisplay.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { ReactNode } from 'react';
+
+type TerminalTextDisplayProps = {
+  children: ReactNode;
+};
+
+export const TerminalTextDisplay: React.FC<TerminalTextDisplayProps> = ({
+  children,
+}): React.ReactElement | null => (
+  <div
+    style={{
+      backgroundColor: '#000000',
+      color: '#33FF00',
+      borderRadius: 5,
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      padding: 20,
+      fontFamily: 'Courier New, monospace',
+      lineHeight: '1.4',
+      maxWidth: 600,
+      width: '100%',
+      fontSize: '1.1em',
+      whiteSpace: 'pre-wrap',
+      overflow: 'auto',
+    }}
+  >
+    {children}
+  </div>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-file-preview",
-  "version": "0.4.2",
+  "version": "0.5.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",
@@ -35,7 +35,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/media-client": "^26.1.0",
+    "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.1",
     "@atlaskit/media-common": "^11.0.0",
     "@atlaskit/media-ui": "^25.1.0",