@atlaskit/media-card 77.4.10 → 77.5.1

package/dist/es2019/card/v2/cardWithMediaClientV2.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { withMediaClient } from '@atlaskit/media-client-react';
+import MediaCardAnalyticsErrorBoundary from '../media-card-analytics-error-boundary';
+import { CardV2 } from './cardV2';
+export const CardWithMediaClientV2 = props => {
+  const {
+    dimensions,
+    onClick,
+    featureFlags
+  } = props;
+  const Card = React.useMemo(() => {
+    return withMediaClient(CardV2);
+  }, []);
+  const featureFlagsWithMediaCardV2 = React.useMemo(() => ({
+    ...featureFlags,
+    mediaCardV2: true //used for analytics - internal use only
+  }), [featureFlags]);
+  return /*#__PURE__*/React.createElement(MediaCardAnalyticsErrorBoundary, {
+    dimensions: dimensions,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Card, _extends({}, props, {
+    featureFlags: featureFlagsWithMediaCardV2
+  })));
+};

package/dist/es2019/card/v2/useFilePreview/errors.js

@@ -0,0 +1,81 @@
+/**
+ * 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);
+};

package/dist/es2019/card/v2/useFilePreview/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/card/v2/useFilePreview/getPreview/filePreviewStatus.js

@@ -0,0 +1,43 @@
+import { isMimeTypeSupportedByBrowser } from '@atlaskit/media-common';
+import { isPreviewableFileState, isPreviewableType, isImageRepresentationReady } from '@atlaskit/media-client';
+import { isSupportedLocalPreview } from './helpers';
+
+// TODO: align these checks with helpers from Media Client
+// https://product-fabric.atlassian.net/browse/BMPT-1300
+export const extractFilePreviewStatus = (fileState, isBannedLocalPreview) => {
+  const hasFilesize = 'size' in fileState && !!fileState.size;
+  const {
+    mediaType
+  } = 'mediaType' in fileState && fileState || {};
+  const {
+    mimeType
+  } = 'mimeType' in fileState && fileState || {};
+  const isPreviewable = !!mediaType && isPreviewableType(mediaType);
+
+  // 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
+  const hasLocalPreview = !isBannedLocalPreview && isPreviewableFileState(fileState) && isSupportedLocalPreview(mediaType) && !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  const hasRemotePreview = isImageRepresentationReady(fileState);
+  const hasPreview = hasLocalPreview || hasRemotePreview;
+  const isSupportedByBrowser = !!mimeType && isMimeTypeSupportedByBrowser(mimeType);
+  return {
+    hasFilesize,
+    isPreviewable,
+    hasPreview,
+    isSupportedByBrowser
+  };
+};
+
+// CXP-2723 TODO: Review this in relation to removing status from the hook
+export const isPreviewableStatus = (cardStatus, {
+  isPreviewable,
+  hasPreview,
+  isSupportedByBrowser
+}) => {
+  return hasPreview && isPreviewable && (cardStatus === 'complete' || cardStatus === 'loading-preview' || cardStatus === 'uploading' ||
+  // For Video, we can have local or remote preview while processing.
+  // Then, we only want to show the thumbnail if the file is supported by the browser,
+  // this way we prevent playing unsupported videos that are not procesed
+  cardStatus === 'processing' && isSupportedByBrowser);
+};

package/dist/es2019/card/v2/useFilePreview/getPreview/getPreview.js

@@ -0,0 +1,75 @@
+import { addFileAttrsToUrl } from '@atlaskit/media-client';
+import { mediaFilePreviewCache } from './cache';
+import { getLocalPreview, getRemotePreview } from './helpers';
+import { SsrPreviewError } from '../errors';
+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 getSSRCardPreview = (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/card/v2/useFilePreview/getPreview/helpers.js

@@ -0,0 +1,76 @@
+import { takeSnapshot } from './videoSnapshot';
+import { getMediaTypeFromMimeType } from '@atlaskit/media-common';
+import { getOrientation } from '@atlaskit/media-ui';
+import { LocalPreviewError, RemotePreviewError } from '../errors';
+/**
+ * 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/card/v2/useFilePreview/getPreview/index.js

@@ -0,0 +1,3 @@
+export { mediaFilePreviewCache } from './cache';
+export { isPreviewableStatus, extractFilePreviewStatus } from './filePreviewStatus';
+export { getSSRCardPreview, isLocalPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview } from './getPreview';

package/dist/es2019/card/v2/useFilePreview/getPreview/objectURLCache.js

@@ -0,0 +1,44 @@
+import { LRUMap } from 'lru_map';
+import { EventEmitter2 } from 'eventemitter2';
+export const PREVIEW_CACHE_LRU_SIZE = 50;
+class ExtendedLRUCache extends LRUMap {
+  constructor(limit) {
+    super(limit);
+    this.eventEmitter = new EventEmitter2();
+  }
+  shift() {
+    const entry = super.shift();
+    this.eventEmitter.emit('shift', entry);
+    return entry;
+  }
+  on(event, callback) {
+    this.eventEmitter.on(event, callback);
+  }
+}
+export class ObjectURLCache {
+  constructor(size) {
+    this.cache = new ExtendedLRUCache(size);
+    this.cache.on('shift', entry => {
+      if (entry && entry[1].dataURI) {
+        URL.revokeObjectURL(entry[1].dataURI);
+      }
+    });
+  }
+  has(key) {
+    return !!this.cache.find(key);
+  }
+  get(key) {
+    return this.cache.get(key);
+  }
+  set(key, value) {
+    this.cache.set(key, value);
+  }
+  remove(key) {
+    const removed = this.cache.delete(key);
+    removed && URL.revokeObjectURL(removed.dataURI);
+  }
+  clear() {
+    this.cache.clear();
+  }
+}
+export const createObjectURLCache = () => new ObjectURLCache(PREVIEW_CACHE_LRU_SIZE);

package/dist/es2019/card/v2/useFilePreview/getPreview/videoSnapshot.js

@@ -0,0 +1,36 @@
+export const takeSnapshot = async blob => {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(blob);
+    const video = document.createElement('video');
+    video.preload = 'metadata';
+    video.src = url;
+    video.muted = true;
+    video.play().catch(() => {
+      return reject(new Error('failed to play video'));
+    });
+    video.addEventListener('timeupdate', function timeUpdateHandler() {
+      video.removeEventListener('timeupdate', timeUpdateHandler);
+      video.pause();
+      URL.revokeObjectURL(url);
+      //create canvas to draw our first frame on.
+
+      if (!video.videoWidth && !video.videoHeight) {
+        return reject(new Error('error retrieving video dimensions'));
+      }
+      const canvas = document.createElement('canvas');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext('2d');
+      if (!context) {
+        return reject(new Error('error creating canvas context'));
+      }
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataURL = canvas.toDataURL('image/jpeg', 0.85);
+      resolve(dataURL);
+    });
+    video.addEventListener('error', () => {
+      reject(new Error('failed to load video'));
+      URL.revokeObjectURL(url);
+    });
+  });
+};

package/dist/es2019/card/v2/useFilePreview/globalScope/getSSRData.js

@@ -0,0 +1,8 @@
+import { getMediaCardSSR, getKey } from './globalScope';
+export const getSSRData = identifier => {
+  const mediaCardSsr = getMediaCardSSR();
+  if (!mediaCardSsr) {
+    return;
+  }
+  return mediaCardSsr[getKey(identifier)];
+};

package/dist/es2019/card/v2/useFilePreview/globalScope/globalScope.js

@@ -0,0 +1,48 @@
+import { printFunctionCall, printScript } from './printScript';
+// ----- WARNING -----
+// This is a very sensitive fraction of code.
+// Any changes to this file must be tested directly in product before merging.
+// The scripts printed here might differ from what we observe in our internal tests
+// due to minimification, for example.
+export const GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
+export const GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
+export function getMediaGlobalScope(globalScope = window) {
+  // Must match GLOBAL_MEDIA_NAMESPACE. Can't reference the constant from here.
+  const namespace = '__MEDIA_INTERNAL';
+  if (!globalScope[namespace]) {
+    globalScope[namespace] = {};
+  }
+  return globalScope[namespace];
+}
+export function getMediaCardSSR(globalScope = window) {
+  const globalMedia = getMediaGlobalScope(globalScope);
+  // Must match GLOBAL_MEDIA_CARD_SSR. Can't reference the constant from here.
+  const key = 'mediaCardSsr';
+  if (!globalMedia[key]) {
+    globalMedia[key] = {};
+  }
+  return globalMedia[key];
+}
+const dashed = param => param ? `-${param}` : '';
+export const getKey = ({
+  id,
+  collectionName,
+  occurrenceKey
+}) => `${id}${dashed(collectionName)}${dashed(occurrenceKey)}`;
+export const storeDataURI = (key, dataURI, dimensions, error, globalScope = window) => {
+  const mediaCardSsr = getMediaCardSSR(globalScope);
+  mediaCardSsr[key] = {
+    dataURI,
+    dimensions,
+    error
+  };
+};
+const generateScript = (identifier, dataURI, dimensions, error) => {
+  const functionCall = printFunctionCall(storeDataURI, getKey(identifier), dataURI, dimensions, error);
+  return printScript([getMediaCardSSR.toString(), getMediaGlobalScope.toString(), functionCall]);
+};
+export const generateScriptProps = (identifier, dataURI, dimensions, error) => ({
+  dangerouslySetInnerHTML: {
+    __html: generateScript(identifier, dataURI, dimensions, error)
+  }
+});

package/dist/es2019/card/v2/useFilePreview/globalScope/index.js

@@ -0,0 +1,2 @@
+export { GLOBAL_MEDIA_NAMESPACE, GLOBAL_MEDIA_CARD_SSR, generateScriptProps, getKey } from './globalScope';
+export { getSSRData } from './getSSRData';

package/dist/es2019/card/v2/useFilePreview/globalScope/printScript.js

@@ -0,0 +1,16 @@
+const printParam = param => {
+  if (typeof param === 'string') {
+    return `'${param}'`;
+  } else if (typeof param === 'object') {
+    return JSON.stringify(param);
+  } else if (param === undefined) {
+    return 'undefined';
+  }
+  return param;
+};
+const printParams = args => args.map(arg => printParam(arg)).join(',');
+export const printFunctionCall = (fn, ...args) => `(${fn.toString()})(${printParams(args)});`;
+export const printScript = statements => `(function(){
+  ${statements.join(';')}
+})();
+`;

package/dist/es2019/card/v2/useFilePreview/globalScope/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/card/v2/useFilePreview/helpers.js

@@ -0,0 +1,61 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * Checks if at least one of next dimensions is bigger than current
+ * If a single dimension is undefined, returns false
+ */
+export const isBigger = (current, next) => {
+  const {
+    width: currentWidth,
+    height: currentHeight
+  } = current || {};
+  const {
+    width: nextWidth,
+    height: nextHeight
+  } = next || {};
+  if (!!currentWidth && !!currentHeight && !!nextWidth && !!nextHeight) {
+    const nextIsWider = currentWidth < nextWidth;
+    const nextIsHigher = currentHeight < nextHeight;
+    return nextIsHigher || nextIsWider;
+  } else {
+    return false;
+  }
+};
+
+/** Verifies if the current screen is retina display */
+function isRetina() {
+  const mediaQuery = '(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)';
+  return window.devicePixelRatio > 1 || window.matchMedia && window.matchMedia(mediaQuery).matches;
+}
+export const createRequestDimensions = dimensions => {
+  if (!dimensions) {
+    return;
+  }
+  const retinaFactor = isRetina() ? 2 : 1;
+  const {
+    width,
+    height
+  } = dimensions;
+  const result = {};
+  if (width) {
+    result.width = width * retinaFactor;
+  }
+  if (height) {
+    result.height = height * retinaFactor;
+  }
+  return result;
+};
+
+/** Stores the provided value in a   */
+export function useCurrentValueRef(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+export function usePrevious(value) {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/dist/es2019/card/v2/useFilePreview/index.js

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

package/dist/es2019/card/v2/useFilePreview/types.js

@@ -0,0 +1 @@
+export {};