@atlaskit/media-file-preview 0.0.1

package/dist/cjs/useFilePreview.js

@@ -0,0 +1,355 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilePreview = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaCommon = require("@atlaskit/media-common");
+var _analytics = require("./analytics");
+var _errors = require("./errors");
+var _getPreview = require("./getPreview");
+var _globalScope = require("./globalScope");
+var _helpers = require("./helpers");
+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) { (0, _defineProperty2.default)(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; }
+var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
+  var _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    identifier = _ref.identifier,
+    ssr = _ref.ssr,
+    dimensions = _ref.dimensions,
+    traceContext = _ref.traceContext,
+    previewDidRender = _ref.previewDidRender,
+    skipRemote = _ref.skipRemote,
+    mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs;
+  var mediaClient = (0, _mediaClientReact.useMediaClient)();
+  var _useState = (0, _react.useState)('loading'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    nonCriticalError = _useState6[0],
+    setNonCriticalError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isBannedLocalPreview = _useState8[0],
+    setIsBannedLocalPreview = _useState8[1];
+  var wasResolvedUpfrontPreviewRef = (0, _react.useRef)(false);
+  var ssrReliabilityRef = (0, _react.useRef)(initialSsrReliability);
+  var requestDimensions = (0, _react.useMemo)(function () {
+    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 previewInitializer = function previewInitializer() {
+    var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
+    var preview = _getPreview.mediaFilePreviewCache.get(identifier.id, fileImageMode);
+    if (preview) {
+      return preview;
+    }
+    if (ssr) {
+      var ssrData = (0, _globalScope.getSSRData)(identifier);
+      if (ssrData !== null && ssrData !== void 0 && ssrData.error) {
+        ssrReliabilityRef.current.server = _objectSpread({
+          status: 'fail'
+        }, ssrData.error);
+      }
+      if (!(ssrData !== null && ssrData !== void 0 && ssrData.dataURI)) {
+        try {
+          return (0, _getPreview.getSSRPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+        } catch (e) {
+          ssrReliabilityRef.current[ssr] = _objectSpread({
+            status: 'fail'
+          }, (0, _analytics.extractErrorInfo)(e));
+        }
+      } else {
+        var _dimensions = ssrData.dimensions,
+          dataURI = ssrData.dataURI;
+        return {
+          dataURI: dataURI,
+          dimensions: _dimensions,
+          source: 'ssr-data'
+        };
+      }
+    }
+  };
+  var _useState9 = (0, _react.useState)(previewInitializer),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    preview = _useState10[0],
+    setPreview = _useState10[1];
+  var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
+      skipRemote: skipRemote,
+      collectionName: identifier.collectionName,
+      occurrenceKey: identifier.occurrenceKey
+    }),
+    fileState = _useFileState.fileState;
+
+  //----------------------------------------------------------------
+  // Update status
+  //----------------------------------------------------------------
+
+  // TOOD: make a full hook reset (remount) on New identifier or client
+  (0, _react.useEffect)(function () {
+    setStatus('loading');
+  }, [identifier]);
+  var updateFileStateRef = (0, _helpers.useCurrentValueRef)(function () {
+    if (fileState) {
+      // do not update the status if the status is final
+      if (['complete', 'error', 'failed-processing'].includes(status)) {
+        return;
+      }
+      if (fileState.status !== 'error') {
+        var mediaType = 'mediaType' in fileState ? fileState.mediaType : undefined;
+        var isPreviewable = !!mediaType && ['audio', 'video', 'image', 'doc'].indexOf(mediaType) > -1;
+        var isPreviewableFileState = !!fileState.preview;
+        var _isSupportedLocalPreview = mediaType === 'image' || mediaType === 'video';
+        var hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState && _isSupportedLocalPreview && !!fileState.mimeType && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType);
+        var hasRemotePreview = (0, _mediaClient.isImageRepresentationReady)(fileState);
+        var hasPreview = hasLocalPreview || hasRemotePreview;
+        var newStatus;
+        switch (fileState.status) {
+          case 'uploading':
+          case 'failed-processing':
+          case 'processing':
+            newStatus = fileState.status;
+            break;
+          case 'processed':
+            if (!isPreviewable || !hasPreview) {
+              newStatus = 'complete';
+              break;
+            }
+            newStatus = 'loading-preview';
+            break;
+          default:
+            newStatus = 'loading';
+        }
+        setStatus(newStatus);
+      } else {
+        var e = new _mediaClientReact.MediaFileStateError(fileState.id, fileState.reason, fileState.message, fileState.details);
+        var errorReason = status === 'uploading' ? 'upload' : 'metadata-fetch';
+        setError(new _errors.MediaFilePreviewError(errorReason, e));
+        setStatus('error');
+      }
+    }
+  });
+  (0, _react.useEffect)(function () {
+    updateFileStateRef.current();
+  }, [fileState, updateFileStateRef]);
+  (0, _react.useEffect)(function () {
+    if (previewDidRender &&
+    // We should't complete if status is uploading
+    ['loading-preview', 'processing'].includes(status)) {
+      setStatus('complete');
+      // TODO MEX-788: add test for "do not remove the preview when unsubscribing".
+      setIsBannedLocalPreview(false); // CXP-2723 TODO: we might be able to remove this??
+    }
+  }, [previewDidRender, status]);
+
+  // CXP-2723 TODO: Create test cases for banning local preview after status is complete
+
+  //----------------------------------------------------------------
+  // Preview Fetch Helper
+  //----------------------------------------------------------------
+  var getAndCacheRemotePreviewRef = (0, _helpers.useCurrentValueRef)(function () {
+    return (0, _getPreview.getAndCacheRemotePreview)(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
+  });
+
+  //----------------------------------------------------------------
+  // Cache SSR Preview
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    if (!skipRemote && ssr && !!preview && (0, _getPreview.isSSRClientPreview)(preview)) {
+      // Since the SSR preview brings the token in the query params,
+      // We need to fetch the remote preview to be able to cache it,
+      getAndCacheRemotePreviewRef.current().catch(function () {
+        // No need to log this error.
+        // If preview fails, it will be refetched later
+        //TODO: test this catch
+        // https://product-fabric.atlassian.net/browse/MEX-1071
+      });
+    }
+  }, [getAndCacheRemotePreviewRef, preview, skipRemote, ssr]);
+
+  //----------------------------------------------------------------
+  // Refetch SRR Preview if dimensions from Server have changed and are bigger,
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    // CXP-2813 TODO: This is called too many times if the refetch failed. Should be called only once
+    if (preview && !skipRemote && (0, _getPreview.isSSRDataPreview)(preview) && (0, _helpers.isBigger)(preview.dimensions, requestDimensions)) {
+      getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
+        var wrappedError = (0, _errors.ensureMediaFilePreviewError)('remote-preview-fetch-ssr', e, true);
+        setNonCriticalError(wrappedError);
+      });
+    }
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, skipRemote]);
+
+  //----------------------------------------------------------------
+  // Upfront Preview
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    if (!preview && !wasResolvedUpfrontPreviewRef.current && !skipRemote) {
+      // We block any possible future call to this method regardless of the outcome (success or fail)
+      // If it fails, the normal preview fetch should occur after the file state is fetched anyways
+      wasResolvedUpfrontPreviewRef.current = true;
+      var fetchedDimensions = _objectSpread({}, requestDimensions);
+      getAndCacheRemotePreviewRef.current().then(function (newPreview) {
+        // If there are new and bigger dimensions in the props, and the upfront preview is still resolving,
+        // the fetched preview is no longer valid, and thus, we dismiss it
+        if (!(0, _helpers.isBigger)(fetchedDimensions, requestDimensionsRef.current)) {
+          setPreview(newPreview);
+        }
+      }).catch(function () {
+        // NO need to log error. If this call fails, a refetch will happen after
+      });
+    }
+  }, [getAndCacheRemotePreviewRef, preview, requestDimensions, requestDimensionsRef, skipRemote]);
+
+  //----------------------------------------------------------------
+  // Cache, Local & Remote Preview
+  //----------------------------------------------------------------
+
+  (0, _react.useEffect)(function () {
+    var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, imageURLParams.mode);
+
+    // Cached Preview ----------------------------------------------------------------
+    if (!preview && cachedPreview && !(0, _helpers.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, requestDimensions)) {
+      setPreview(cachedPreview);
+    }
+    // Local Preview ----------------------------------------------------------------
+    else if (!preview && !isBannedLocalPreview && !!fileState && 'preview' in fileState && !!fileState.preview && (0, _getPreview.isSupportedLocalPreview)(fileState.mediaType) && (0, _mediaCommon.isMimeTypeSupportedByBrowser)(fileState.mimeType)) {
+      // Local preview is available only if it's supported by browser and supported by Media Card (isSupportedLocalPreview)
+      // 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) {
+        setIsBannedLocalPreview(true);
+        // CXP-2723 TODO: We might have to wrap this error in MediaCardError
+        setNonCriticalError(e);
+      });
+    }
+    // Remote Preview ----------------------------------------------------------------
+    else if ((!preview || (0, _helpers.isBigger)(preview.dimensions, requestDimensions)) && !skipRemote && wasResolvedUpfrontPreviewRef.current && !!fileState && (0, _mediaClient.isImageRepresentationReady)(fileState)) {
+      getAndCacheRemotePreviewRef.current().then(setPreview).catch(function (e) {
+        setStatus('error');
+        setError((0, _errors.ensureMediaFilePreviewError)('preview-fetch', e));
+      });
+    }
+  }, [fileState, getAndCacheRemotePreviewRef, identifier.id, imageURLParams.mode, isBannedLocalPreview, mediaBlobUrlAttrs, preview, requestDimensions, skipRemote]);
+
+  //----------------------------------------------------------------
+  // RETURN
+  //----------------------------------------------------------------
+
+  var onImageError = (0, _react.useCallback)(function (newPreview) {
+    if (newPreview) {
+      var failedSSRObject = _objectSpread({
+        status: 'fail'
+      }, (0, _analytics.extractErrorInfo)(new _errors.ImageLoadError(newPreview.source)));
+      if ((0, _getPreview.isSSRClientPreview)(newPreview)) {
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+
+      /*
+      If the preview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+      */
+
+      if ((0, _getPreview.isSSRDataPreview)(newPreview)) {
+        ssrReliabilityRef.current.server = failedSSRObject;
+        ssrReliabilityRef.current.client = failedSSRObject;
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this error
+    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
+      return;
+    }
+    var error = new _errors.ImageLoadError(newPreview === null || newPreview === void 0 ? void 0 : newPreview.source);
+    var isLocal = newPreview && (0, _getPreview.isLocalPreview)(newPreview);
+    var isSSR = newPreview && ((0, _getPreview.isSSRClientPreview)(newPreview) || (0, _getPreview.isSSRDataPreview)(newPreview));
+    if (isLocal || isSSR) {
+      if (isLocal) {
+        setIsBannedLocalPreview(true);
+        setNonCriticalError(error);
+      }
+      var fileImageMode = (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode);
+      _getPreview.mediaFilePreviewCache.remove(identifier.id, fileImageMode);
+      setPreview(undefined);
+    } else {
+      if (!['complete', 'error', 'failed-processing'].includes(status)) {
+        setStatus('error');
+        setError(error);
+      }
+    }
+  }, [identifier.id, preview === null || preview === void 0 ? void 0 : preview.dataURI, resizeMode, status]);
+  var onImageLoad = (0, _react.useCallback)(function (newPreview) {
+    if (newPreview) {
+      if ((0, _getPreview.isSSRClientPreview)(newPreview) && ssrReliabilityRef.current.client.status === 'unknown') {
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+
+      /*
+      If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+      */
+
+      if ((0, _getPreview.isSSRDataPreview)(newPreview) && ssrReliabilityRef.current.server.status === 'unknown') {
+        ssrReliabilityRef.current.server = {
+          status: 'success'
+        };
+        ssrReliabilityRef.current.client = {
+          status: 'success'
+        };
+      }
+    }
+
+    // If the dataURI has been replaced, we can dismiss this callback
+    if ((newPreview === null || newPreview === void 0 ? void 0 : newPreview.dataURI) !== (preview === null || preview === void 0 ? void 0 : preview.dataURI)) {
+      return;
+    }
+  }, [preview === null || preview === void 0 ? void 0 : preview.dataURI]);
+
+  // FOR SSR
+  var getScriptProps = function getScriptProps() {
+    var _ssrReliabilityRef$cu;
+    return (0, _globalScope.generateScriptProps)(identifier, preview === null || preview === void 0 ? void 0 : preview.dataURI, requestDimensions, ((_ssrReliabilityRef$cu = ssrReliabilityRef.current.server) === null || _ssrReliabilityRef$cu === void 0 ? void 0 : _ssrReliabilityRef$cu.status) === 'fail' ? ssrReliabilityRef.current.server : undefined);
+  };
+
+  // CXP-2723 TODO: should consider simplifying our analytics, and how
+  // we might get rid of ssrReliabiltyRef from our hook
+  return {
+    preview: preview,
+    error: error,
+    nonCriticalError: nonCriticalError,
+    ssrReliabilityRef: ssrReliabilityRef,
+    onImageError: onImageError,
+    onImageLoad: onImageLoad,
+    getScriptProps: getScriptProps
+  };
+};
+var initialSsrReliability = {
+  server: {
+    status: 'unknown'
+  },
+  client: {
+    status: 'unknown'
+  }
+};

package/dist/es2019/analytics.js

@@ -0,0 +1,44 @@
+import { getMediaClientErrorReason, isRequestError } from '@atlaskit/media-client';
+import { getFileStateErrorReason, isMediaFilePreviewError, isMediaFileStateError } from './errors';
+export const getErrorTraceContext = error => {
+  if (isMediaFilePreviewError(error) && !!error.secondaryError) {
+    if (isRequestError(error.secondaryError)) {
+      var _error$secondaryError;
+      return (_error$secondaryError = error.secondaryError.metadata) === null || _error$secondaryError === void 0 ? void 0 : _error$secondaryError.traceContext;
+    } else if (isMediaFileStateError(error.secondaryError)) {
+      var _error$secondaryError2, _error$secondaryError3;
+      return (_error$secondaryError2 = error.secondaryError.details) === null || _error$secondaryError2 === void 0 ? void 0 : (_error$secondaryError3 = _error$secondaryError2.metadata) === null || _error$secondaryError3 === void 0 ? void 0 : _error$secondaryError3.traceContext;
+    }
+  }
+};
+export const getRenderErrorFailReason = error => {
+  if (isMediaFilePreviewError(error)) {
+    return error.primaryReason;
+  } else {
+    return 'nativeError';
+  }
+};
+export const getRenderErrorErrorReason = error => {
+  if (isMediaFilePreviewError(error) && error.secondaryError) {
+    const mediaClientReason = isMediaFileStateError(error.secondaryError) ? getFileStateErrorReason(error.secondaryError) : getMediaClientErrorReason(error.secondaryError);
+    if (mediaClientReason !== 'unknown') {
+      return mediaClientReason;
+    }
+  }
+  return 'nativeError';
+};
+export const getRenderErrorErrorDetail = error => {
+  if (isMediaFilePreviewError(error) && error.secondaryError) {
+    return error.secondaryError.message;
+  } else {
+    return error.message;
+  }
+};
+export const extractErrorInfo = (error, metadataTraceContext) => {
+  return {
+    failReason: getRenderErrorFailReason(error),
+    error: getRenderErrorErrorReason(error),
+    errorDetail: getRenderErrorErrorDetail(error),
+    metadataTraceContext: metadataTraceContext !== null && metadataTraceContext !== void 0 ? metadataTraceContext : getErrorTraceContext(error)
+  };
+};

package/dist/es2019/errors.js

@@ -0,0 +1,90 @@
+import { MediaFileStateError } from '@atlaskit/media-client-react';
+
+/**
+ * Primary reason is logged through Data Portal.
+ * Make sure all the values are whitelisted in Measure -> Event Regitry -> "mediaCardRender failed" event
+ */
+
+export class MediaFilePreviewError extends Error {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason);
+    // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#support-for-newtarget
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+    Object.setPrototypeOf(this, new.target.prototype);
+
+    // https://v8.dev/docs/stack-trace-api
+    if ('captureStackTrace' in Error) {
+      Error.captureStackTrace(this, new.target);
+    }
+  }
+}
+export class LocalPreviewError extends MediaFilePreviewError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+}
+export class RemotePreviewError extends MediaFilePreviewError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+}
+export class SsrPreviewError extends MediaFilePreviewError {
+  constructor(primaryReason, secondaryError) {
+    super(primaryReason, secondaryError);
+    this.primaryReason = primaryReason;
+    this.secondaryError = secondaryError;
+  }
+}
+const getImageLoadPrimaryReason = source => {
+  switch (source) {
+    case 'cache-remote':
+      return 'cache-remote-uri';
+    case 'cache-local':
+      return 'cache-local-uri';
+    case 'external':
+      return 'external-uri';
+    case 'local':
+      return 'local-uri';
+    case 'remote':
+      return 'remote-uri';
+    // This fail reason will come from a bug, most likely.
+    default:
+      return `unknown-uri`;
+  }
+};
+export class ImageLoadError extends MediaFilePreviewError {
+  constructor(source) {
+    super(getImageLoadPrimaryReason(source));
+  }
+}
+export function isMediaFilePreviewError(err) {
+  return err instanceof MediaFilePreviewError;
+}
+export const isLocalPreviewError = err => err instanceof LocalPreviewError;
+export const isRemotePreviewError = err => err instanceof RemotePreviewError;
+export const isUnsupportedLocalPreviewError = err => isMediaFilePreviewError(err) && err.primaryReason === 'local-preview-unsupported';
+
+// In a try/catch statement, the error caught is the type of unknown.
+// We can use this helper to ensure that the error handled is the type of MediaFilePreviewError if unsure
+// If updatePrimaryReason is true, if it's a MediaFilePreviewError already, it will update it's primary reason
+export const ensureMediaFilePreviewError = (primaryReason, error, updatePrimaryReason) => {
+  if (isMediaFilePreviewError(error)) {
+    if (updatePrimaryReason && error.primaryReason !== primaryReason) {
+      return new MediaFilePreviewError(primaryReason, error.secondaryError);
+    }
+    return error;
+  }
+  return new MediaFilePreviewError(primaryReason, error);
+};
+export function isMediaFileStateError(err) {
+  return err instanceof MediaFileStateError;
+}
+export function getFileStateErrorReason(err) {
+  var _err$details$reason, _err$details;
+  return (_err$details$reason = (_err$details = err.details) === null || _err$details === void 0 ? void 0 : _err$details.reason) !== null && _err$details$reason !== void 0 ? _err$details$reason : 'unknown';
+}

package/dist/es2019/getPreview/cache.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { createObjectURLCache } from './objectURLCache';
+
+// Dimensions are used to create a key.
+// Cache is invalidated when different dimensions are provided.
+export const getCacheKey = (id, mode) => {
+  const resizeMode = mode || 'crop';
+  return [id, resizeMode].join('-');
+};
+export class CardPreviewCacheImpl {
+  constructor(previewCache) {
+    _defineProperty(this, "get", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
+      return this.previewCache.get(cacheKey);
+    });
+    _defineProperty(this, "set", (id, mode, cardPreview) => {
+      const cacheKey = getCacheKey(id, mode);
+      this.previewCache.set(cacheKey, cardPreview);
+    });
+    _defineProperty(this, "remove", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
+      this.previewCache.remove(cacheKey);
+    });
+    _defineProperty(this, "clear", () => {
+      this.previewCache.clear();
+    });
+    this.previewCache = previewCache;
+  }
+}
+export const mediaFilePreviewCache = new CardPreviewCacheImpl(createObjectURLCache());

package/dist/es2019/getPreview/getPreview.js

@@ -0,0 +1,75 @@
+import { addFileAttrsToUrl } from '@atlaskit/media-client';
+import { SsrPreviewError } from '../errors';
+import { mediaFilePreviewCache } from './cache';
+import { getLocalPreview, getRemotePreview } from './helpers';
+const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
+  let source;
+  switch (preview.source) {
+    case 'local':
+      source = 'cache-local';
+      break;
+    case 'remote':
+      source = 'cache-remote';
+      break;
+    case 'ssr-server':
+      source = 'cache-ssr-server';
+      break;
+    case 'ssr-client':
+      source = 'cache-ssr-client';
+      break;
+    default:
+      source = preview.source;
+  }
+  // We want to embed some meta context into dataURI for Copy/Paste to work.
+  const dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(preview.dataURI, mediaBlobUrlAttrs) : preview.dataURI;
+  // We store new cardPreview into cache
+  mediaFilePreviewCache.set(id, mode, {
+    ...preview,
+    source,
+    dataURI
+  });
+  return {
+    ...preview,
+    dataURI
+  };
+};
+export const getSSRPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
+  let dataURI;
+  try {
+    const rawDataURI = mediaClient.getImageUrlSync(id, params);
+    // We want to embed some meta context into dataURI for Copy/Paste to work.
+    dataURI = mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+    const source = ssr === 'client' ? 'ssr-client' : 'ssr-server';
+    return {
+      dataURI,
+      source,
+      orientation: 1
+    };
+  } catch (e) {
+    const reason = ssr === 'server' ? 'ssr-server-uri' : 'ssr-client-uri';
+    throw new SsrPreviewError(reason, e instanceof Error ? e : undefined);
+  }
+};
+export const isLocalPreview = preview => {
+  const localSources = ['local', 'cache-local'];
+  return localSources.includes(preview.source);
+};
+export const isSSRClientPreview = preview => {
+  const ssrClientSources = ['ssr-client', 'cache-ssr-client'];
+  return ssrClientSources.includes(preview.source);
+};
+export const isSSRDataPreview = preview => preview.source === 'ssr-data';
+export const getAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) => {
+  const remotePreview = await getRemotePreview(mediaClient, id, params, traceContext);
+  return extendAndCachePreview(id, params.mode, {
+    ...remotePreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
+};
+export const getAndCacheLocalPreview = async (id, filePreview, dimensions, mode, mediaBlobUrlAttrs) => {
+  const localPreview = await getLocalPreview(filePreview);
+  return extendAndCachePreview(id, mode, {
+    ...localPreview,
+    dimensions
+  }, mediaBlobUrlAttrs);
+};

package/dist/es2019/getPreview/helpers.js

@@ -0,0 +1,77 @@
+import { getMediaTypeFromMimeType } from '@atlaskit/media-common';
+import { getOrientation } from '@atlaskit/media-ui';
+import { LocalPreviewError, RemotePreviewError } from '../errors';
+import { takeSnapshot } from './videoSnapshot';
+
+/**
+ * This method tells the support for the media
+ * types covered in getCardPreviewFromFilePreview
+ */
+export const isSupportedLocalPreview = mediaType => mediaType === 'image' || mediaType === 'video';
+const getImageLocalPreview = async value => {
+  try {
+    const orientation = await getOrientation(value);
+    const dataURI = URL.createObjectURL(value);
+    return {
+      dataURI,
+      orientation,
+      source: 'local'
+    };
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-image', e instanceof Error ? e : undefined);
+  }
+};
+const getVideoLocalPreview = async value => {
+  try {
+    const dataURI = await takeSnapshot(value);
+    return {
+      dataURI,
+      orientation: 1,
+      source: 'local'
+    };
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-video', e instanceof Error ? e : undefined);
+  }
+};
+export const getLocalPreview = async filePreview => {
+  let value;
+  try {
+    const resolvedFilePreview = await filePreview;
+    value = resolvedFilePreview.value;
+  } catch (e) {
+    throw new LocalPreviewError('local-preview-rejected', e instanceof Error ? e : undefined);
+  }
+  if (typeof value === 'string') {
+    return {
+      dataURI: value,
+      orientation: 1,
+      source: 'local'
+    };
+  } else if (value instanceof Blob) {
+    const {
+      type
+    } = value;
+    const mediaType = getMediaTypeFromMimeType(type);
+    switch (mediaType) {
+      case 'image':
+        return getImageLocalPreview(value);
+      case 'video':
+        return getVideoLocalPreview(value);
+      default:
+        throw new LocalPreviewError('local-preview-unsupported');
+    }
+  }
+  throw new LocalPreviewError('local-preview-unsupported');
+};
+export const getRemotePreview = async (mediaClient, id, params, traceContext) => {
+  try {
+    const blob = await mediaClient.getImage(id, params, undefined, undefined, traceContext);
+    return {
+      dataURI: URL.createObjectURL(blob),
+      orientation: 1,
+      source: 'remote'
+    };
+  } catch (e) {
+    throw new RemotePreviewError('remote-preview-fetch', e instanceof Error ? e : undefined);
+  }
+};

package/dist/es2019/getPreview/index.js

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