@atlaskit/media-card 74.1.9 → 74.2.0

package/dist/esm/card/card.js

@@ -22,6 +22,7 @@ import ReactDOM from 'react-dom';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { withMediaAnalyticsContext } from '@atlaskit/media-common';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
+import { getRandomHex } from '@atlaskit/media-common';
 import { globalMediaEventEmitter, isDifferentIdentifier, isFileIdentifier, RECENTS_COLLECTION, isImageRepresentationReady, isExternalImageIdentifier, isProcessedFileState, imageResizeModeToFileImageMode } from '@atlaskit/media-client';
 import { MediaViewer } from '@atlaskit/media-viewer';
 import { injectIntl, IntlProvider } from 'react-intl-next';
@@ -43,7 +44,7 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.1.9";
+var packageVersion = "74.2.0";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
 
@@ -53,6 +54,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
   // of Cards regardless of whether it shares the same file (either internal or external)
   // We initialise timeElapsedTillCommenced
   // to avoid extra branching on a possibly undefined value.
+  // Generate unique traceId for file
   function CardBase(props) {
     var _this;
 
@@ -80,6 +82,10 @@ export var CardBase = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "timeElapsedTillCommenced", performance.now());
 
+    _defineProperty(_assertThisInitialized(_this), "traceContext", {
+      traceId: getRandomHex(16)
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
       return _objectSpread(_objectSpread({
@@ -115,7 +121,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
       }) : undefined;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getCardPreviewParams", function (identifier, fileState) {
+    _defineProperty(_assertThisInitialized(_this), "getCardPreviewParams", function (identifier, fileState, traceContext) {
       var isBannedLocalPreview = _this.state.isBannedLocalPreview;
       var id = identifier.id;
       var _this$props2 = _this.props,
@@ -133,7 +139,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         imageUrlParams: _this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: _this.getMediaBlobUrlAttrs(identifier, fileState),
         createAnalyticsEvent: createAnalyticsEvent,
-        featureFlags: _this.props.featureFlags
+        featureFlags: _this.props.featureFlags,
+        traceId: traceContext.traceId
       };
     });
 
@@ -197,7 +204,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
             switch (_context2.prev = _context2.next) {
               case 0:
                 _context2.prev = 0;
-                params = _this.getCardPreviewParams(identifier, fileState);
+                params = _this.getCardPreviewParams(identifier, fileState, _this.traceContext);
                 _context2.next = 4;
                 return getCardPreview(params);
 
@@ -973,7 +980,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
           status = _this$state7.status,
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
+      createAnalyticsEvent && _fireOperationalEvent(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
       completeUfoExperience(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {
@@ -985,7 +992,7 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         overall: {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
-      });
+      }, this.traceContext);
       startUfoExperience(this.internalOccurrenceKey);
     }
   }, {

package/dist/esm/card/cardAnalytics.js

@@ -2,6 +2,7 @@ import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEvent
 import { MediaCardError } from '../errors';
 export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 6 ? arguments[6] : undefined;
 
   var fireEvent = function fireEvent(payload) {
     return fireMediaCardEvent(payload, createAnalyticsEvent);
@@ -9,20 +10,20 @@ export var fireOperationalEvent = function fireOperationalEvent(createAnalyticsE
 
   switch (status) {
     case 'complete':
-      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability));
+      fireEvent(getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
       break;
 
     case 'failed-processing':
-      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability));
+      fireEvent(getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext));
       break;
 
     case 'error':
-      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent(getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
       break;
   }
 };
-export var fireCommencedEvent = function fireCommencedEvent(createAnalyticsEvent, fileAttributes, performanceAttributes) {
-  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
+export var fireCommencedEvent = function fireCommencedEvent(createAnalyticsEvent, fileAttributes, performanceAttributes, traceContext) {
+  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes, traceContext), createAnalyticsEvent);
 };
 export var fireCopiedEvent = function fireCopiedEvent(createAnalyticsEvent, fileId, cardRef) {
   if (typeof window.getSelection === 'function') {

package/dist/esm/card/getCardPreview/helpers.js

@@ -157,7 +157,7 @@ export var getCardPreviewFromFilePreview = /*#__PURE__*/function () {
   };
 }();
 export var getCardPreviewFromBackend = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(mediaClient, id, params) {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(mediaClient, id, params, traceId) {
     var blob;
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
@@ -165,7 +165,7 @@ export var getCardPreviewFromBackend = /*#__PURE__*/function () {
           case 0:
             _context4.prev = 0;
             _context4.next = 3;
-            return mediaClient.getImage(id, params);
+            return mediaClient.getImage(id, params, undefined, undefined, traceId);
 
           case 3:
             blob = _context4.sent;
@@ -188,7 +188,7 @@ export var getCardPreviewFromBackend = /*#__PURE__*/function () {
     }, _callee4, null, [[0, 7]]);
   }));
 
-  return function getCardPreviewFromBackend(_x4, _x5, _x6) {
+  return function getCardPreviewFromBackend(_x4, _x5, _x6, _x7) {
     return _ref4.apply(this, arguments);
   };
 }();

package/dist/esm/card/getCardPreview/index.js

@@ -77,13 +77,13 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
 
 export var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
+    var mediaClient, id, _ref$dimensions, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceId, mode, cachedPreview, dimensionsAreBigger, localPreview, remotePreview;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs, createAnalyticsEvent = _ref.createAnalyticsEvent, featureFlags = _ref.featureFlags;
+            mediaClient = _ref.mediaClient, id = _ref.id, _ref$dimensions = _ref.dimensions, dimensions = _ref$dimensions === void 0 ? {} : _ref$dimensions, filePreview = _ref.filePreview, onLocalPreviewError = _ref.onLocalPreviewError, isRemotePreviewReady = _ref.isRemotePreviewReady, imageUrlParams = _ref.imageUrlParams, mediaBlobUrlAttrs = _ref.mediaBlobUrlAttrs, createAnalyticsEvent = _ref.createAnalyticsEvent, featureFlags = _ref.featureFlags, traceId = _ref.traceId;
             mode = imageUrlParams.mode;
             cachedPreview = cardPreviewCache.get(id, mode);
             dimensionsAreBigger = isBigger(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
@@ -165,7 +165,7 @@ export var getCardPreview = /*#__PURE__*/function () {
 
           case 22:
             _context.next = 24;
-            return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+            return fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs, traceId);
 
           case 24:
             remotePreview = _context.sent;
@@ -245,14 +245,14 @@ export var isSSRDataPreview = function isSSRDataPreview(preview) {
   return preview.source === 'ssr-data';
 };
 export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceId) {
     var remotePreview;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             _context2.next = 2;
-            return getCardPreviewFromBackend(mediaClient, id, params);
+            return getCardPreviewFromBackend(mediaClient, id, params, traceId);
 
           case 2:
             remotePreview = _context2.sent;
@@ -268,7 +268,7 @@ export var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
     }, _callee2);
   }));
 
-  return function fetchAndCacheRemotePreview(_x2, _x3, _x4, _x5, _x6) {
+  return function fetchAndCacheRemotePreview(_x2, _x3, _x4, _x5, _x6, _x7) {
     return _ref4.apply(this, arguments);
   };
 }();

package/dist/esm/utils/analytics.js

@@ -41,18 +41,21 @@ export var getRenderPreviewableCardPayload = function getRenderPreviewableCardPa
     }
   };
 };
-export var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
+export var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes, traceContext) {
   return {
     eventType: 'operational',
     action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes: fileAttributes,
-      performanceAttributes: performanceAttributes
+      performanceAttributes: performanceAttributes,
+      traceContext: {
+        traceId: traceContext.traceId
+      }
     }
   };
 };
-export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability) {
+export var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -61,7 +64,8 @@ export var getRenderSucceededEventPayload = function getRenderSucceededEventPayl
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     }
   };
 };
@@ -135,7 +139,7 @@ export var extractErrorInfo = function extractErrorInfo(error) {
     errorDetail: getRenderErrorErrorDetail(error)
   };
 };
-export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability) {
+export var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -146,11 +150,12 @@ export var getRenderErrorEventPayload = function getRenderErrorEventPayload(file
       status: 'fail'
     }, extractErrorInfo(error)), {}, {
       request: getRenderErrorRequestMetadata(error),
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     })
   };
 };
-export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability) {
+export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -160,7 +165,8 @@ export var getRenderFailedFileStatusPayload = function getRenderFailedFileStatus
       performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'failed-processing',
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     }
   };
 };

package/dist/esm/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.1.9";
+var packageVersion = "74.2.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/esm/utils/videoSnapshot.js

@@ -1,23 +1,49 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import VideoSnapshot from 'video-snapshot';
 export var takeSnapshot = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {
-    var snapshooter, dataUri;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            snapshooter = new VideoSnapshot(blob);
-            _context.next = 3;
-            return snapshooter.takeSnapshot();
+            return _context.abrupt("return", new Promise(function (resolve, reject) {
+              var url = URL.createObjectURL(blob);
+              var video = document.createElement('video');
+              video.preload = 'metadata';
+              video.src = url;
+              video.muted = true;
+              video.play().catch(function () {
+                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.
 
-          case 3:
-            dataUri = _context.sent;
-            snapshooter.end();
-            return _context.abrupt("return", dataUri);
+                if (!video.videoWidth && !video.videoHeight) {
+                  return reject(new Error('error retrieving video dimensions'));
+                }
 
-          case 6:
+                var canvas = document.createElement('canvas');
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                var context = canvas.getContext('2d');
+
+                if (!context) {
+                  return reject(new Error('error creating canvas context'));
+                }
+
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                var dataURL = canvas.toDataURL('image/jpeg', 0.85);
+                resolve(dataURL);
+              });
+              video.addEventListener('error', function () {
+                reject(new Error('failed to load video'));
+                URL.revokeObjectURL(url);
+              });
+            }));
+
+          case 1:
           case "end":
             return _context.stop();
         }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "74.1.9",
+	"version": "74.2.0",
 	"sideEffects": false
 }

package/dist/types/card/card.d.ts

@@ -13,6 +13,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private timeElapsedTillCommenced;
     subscription?: MediaSubscription;
     private ssrData?;
+    private traceContext;
     static defaultProps: Partial<CardProps>;
     constructor(props: CardBaseProps);
     componentDidMount(): void;

package/dist/types/card/cardAnalytics.d.ts

@@ -1,9 +1,9 @@
-import { FileAttributes, PerformanceAttributes } from '@atlaskit/media-common';
+import { FileAttributes, MediaTraceContext, PerformanceAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../utils/analytics';
 import { CardStatus } from '../types';
 import { MediaCardError } from '../errors';
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError) => void;
-export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error: MediaCardError | undefined, traceContext: MediaTraceContext) => void;
+export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;

package/dist/types/card/getCardPreview/helpers.d.ts

@@ -6,4 +6,4 @@ import { CardPreview } from '../../types';
  */
 export declare const isSupportedLocalPreview: (mediaType?: MediaType | undefined) => boolean;
 export declare const getCardPreviewFromFilePreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<CardPreview>;
-export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams) => Promise<CardPreview>;
+export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceId?: string | undefined) => Promise<CardPreview>;

package/dist/types/card/getCardPreview/index.d.ts

@@ -25,6 +25,7 @@ export declare type CardPreviewParams = {
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     featureFlags?: MediaFeatureFlags;
+    traceId?: string;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -36,7 +37,7 @@ export declare type CardPreviewParams = {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceId, }: CardPreviewParams) => Promise<CardPreview>;
 export declare const shouldResolvePreview: ({ status, fileState, prevDimensions, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;
@@ -54,4 +55,4 @@ export declare const isSSRPreview: (preview: CardPreview) => boolean;
 export declare const isSSRServerPreview: (preview: CardPreview) => boolean;
 export declare const isSSRClientPreview: (preview: CardPreview) => boolean;
 export declare const isSSRDataPreview: (preview: CardPreview) => boolean;
-export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => Promise<CardPreview>;
+export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined, traceId?: string | undefined) => Promise<CardPreview>;

package/dist/types/utils/analytics.d.ts

@@ -1,5 +1,5 @@
 import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
 import { CardPreviewSource, CardDimensions } from '../types';
@@ -37,13 +37,13 @@ export declare type SSRStatus = {
 export declare type WithSSRReliability = {
     ssrReliability?: SSRStatus;
 };
-export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & FailureAttributes & {
+export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & WithTraceContext & FailureAttributes & {
     failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
 }, 'failed', 'mediaCardRender'>;
-export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
-export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, 'commenced', 'mediaCardRender'>;
+export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes & WithTraceContext, 'succeeded', 'mediaCardRender'>;
+export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithTraceContext, 'commenced', 'mediaCardRender'>;
 export declare type CacheHitEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'cache-hit', 'mediaCardCache'>;
 export declare type RemoteSuccessEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'Remote-success', 'mediaCardCache'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
@@ -59,8 +59,8 @@ export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAtt
 export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload | CacheHitEventPayload | RemoteSuccessEventPayload;
 export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: import("@atlaskit/media-common").FileStatus | undefined) => FileAttributes;
 export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
-export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderCommencedEventPayload;
-export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderSucceededEventPayload;
+export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => RenderCommencedEventPayload;
+export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderSucceededEventPayload;
 export declare const getCacheHitEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => CacheHitEventPayload;
 export declare const getRemoteSuccessEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => RemoteSuccessEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
@@ -69,8 +69,8 @@ export declare const getRenderErrorErrorReason: (error: MediaCardError) => Media
 export declare const getRenderErrorErrorDetail: (error: MediaCardError) => string;
 export declare const getRenderErrorRequestMetadata: (error: MediaCardError) => RequestMetadata | undefined;
 export declare const extractErrorInfo: (error: MediaCardError) => MediaCardErrorInfo;
-export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus) => RenderFailedEventPayload;
-export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderFailedEventPayload;
+export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
+export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
 export declare const getCopiedFilePayload: (fileId: string) => CopiedFileEventPayload;
 export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
 export declare const createAndFireMediaCardEvent: (payload: MediaCardAnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/dist/types-ts4.0/card/card.d.ts

@@ -13,6 +13,7 @@ export declare class CardBase extends Component<CardBaseProps, CardState> {
     private timeElapsedTillCommenced;
     subscription?: MediaSubscription;
     private ssrData?;
+    private traceContext;
     static defaultProps: Partial<CardProps>;
     constructor(props: CardBaseProps);
     componentDidMount(): void;

package/dist/types-ts4.0/card/cardAnalytics.d.ts

@@ -1,9 +1,9 @@
-import { FileAttributes, PerformanceAttributes } from '@atlaskit/media-common';
+import { FileAttributes, MediaTraceContext, PerformanceAttributes } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { SSRStatus } from '../utils/analytics';
 import { CardStatus } from '../types';
 import { MediaCardError } from '../errors';
-export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error?: MediaCardError) => void;
-export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => void;
+export declare const fireOperationalEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, status: CardStatus, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, error: MediaCardError | undefined, traceContext: MediaTraceContext) => void;
+export declare const fireCommencedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => void;
 export declare const fireCopiedEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileId: string, cardRef: HTMLDivElement) => void;
 export declare const fireScreenEvent: (createAnalyticsEvent: CreateUIAnalyticsEvent, fileAttributes: FileAttributes) => void;

package/dist/types-ts4.0/card/getCardPreview/helpers.d.ts

@@ -6,4 +6,4 @@ import { CardPreview } from '../../types';
  */
 export declare const isSupportedLocalPreview: (mediaType?: MediaType | undefined) => boolean;
 export declare const getCardPreviewFromFilePreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<CardPreview>;
-export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams) => Promise<CardPreview>;
+export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceId?: string | undefined) => Promise<CardPreview>;

package/dist/types-ts4.0/card/getCardPreview/index.d.ts

@@ -25,6 +25,7 @@ export declare type CardPreviewParams = {
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     featureFlags?: MediaFeatureFlags;
+    traceId?: string;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -36,7 +37,7 @@ export declare type CardPreviewParams = {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceId, }: CardPreviewParams) => Promise<CardPreview>;
 export declare const shouldResolvePreview: ({ status, fileState, prevDimensions, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;
@@ -54,4 +55,4 @@ export declare const isSSRPreview: (preview: CardPreview) => boolean;
 export declare const isSSRServerPreview: (preview: CardPreview) => boolean;
 export declare const isSSRClientPreview: (preview: CardPreview) => boolean;
 export declare const isSSRDataPreview: (preview: CardPreview) => boolean;
-export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined) => Promise<CardPreview>;
+export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined, traceId?: string | undefined) => Promise<CardPreview>;

package/dist/types-ts4.0/utils/analytics.d.ts

@@ -1,5 +1,5 @@
 import { FileDetails, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
 import { CardPreviewSource, CardDimensions } from '../types';
@@ -37,13 +37,13 @@ export declare type SSRStatus = {
 export declare type WithSSRReliability = {
     ssrReliability?: SSRStatus;
 };
-export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & FailureAttributes & {
+export declare type RenderFailedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & WithTraceContext & FailureAttributes & {
     failReason: FailedErrorFailReason | 'failed-processing';
     error?: MediaClientErrorReason | 'nativeError';
     request?: RequestMetadata;
 }, 'failed', 'mediaCardRender'>;
-export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes, 'succeeded', 'mediaCardRender'>;
-export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes, 'commenced', 'mediaCardRender'>;
+export declare type RenderSucceededEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithSSRReliability & SuccessAttributes & WithTraceContext, 'succeeded', 'mediaCardRender'>;
+export declare type RenderCommencedEventPayload = OperationalEventPayload<WithFileAttributes & WithPerformanceAttributes & WithTraceContext, 'commenced', 'mediaCardRender'>;
 export declare type CacheHitEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'cache-hit', 'mediaCardCache'>;
 export declare type RemoteSuccessEventPayload = OperationalEventPayload<WithCardPreviewCacheAttributes, 'Remote-success', 'mediaCardCache'>;
 export declare type CopiedFileEventPayload = UIEventPayload<{}, 'copied', string>;
@@ -59,8 +59,8 @@ export declare type RenderScreenEventPayload = Omit<ScreenEventPayload<ScreenAtt
 export declare type MediaCardAnalyticsEventPayload = RenderCommencedEventPayload | RenderSucceededEventPayload | RenderFailedEventPayload | CopiedFileEventPayload | ClickedEventPayload | RenderScreenEventPayload | CacheHitEventPayload | RemoteSuccessEventPayload;
 export declare const getFileAttributes: (metadata: FileDetails, fileStatus?: import("@atlaskit/media-common").FileStatus | undefined) => FileAttributes;
 export declare const getRenderPreviewableCardPayload: (fileAttributes: FileAttributes) => RenderScreenEventPayload;
-export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderCommencedEventPayload;
-export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderSucceededEventPayload;
+export declare const getRenderCommencedEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, traceContext: MediaTraceContext) => RenderCommencedEventPayload;
+export declare const getRenderSucceededEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderSucceededEventPayload;
 export declare const getCacheHitEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => CacheHitEventPayload;
 export declare const getRemoteSuccessEventPayload: (cardPreviewAttributes: CardPreviewAttributes) => RemoteSuccessEventPayload;
 export declare const getRenderFailedExternalUriPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes) => RenderFailedEventPayload;
@@ -69,8 +69,8 @@ export declare const getRenderErrorErrorReason: (error: MediaCardError) => Media
 export declare const getRenderErrorErrorDetail: (error: MediaCardError) => string;
 export declare const getRenderErrorRequestMetadata: (error: MediaCardError) => RequestMetadata | undefined;
 export declare const extractErrorInfo: (error: MediaCardError) => MediaCardErrorInfo;
-export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus) => RenderFailedEventPayload;
-export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus) => RenderFailedEventPayload;
+export declare const getRenderErrorEventPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, error: MediaCardError, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
+export declare const getRenderFailedFileStatusPayload: (fileAttributes: FileAttributes, performanceAttributes: PerformanceAttributes, ssrReliability: SSRStatus, traceContext: MediaTraceContext) => RenderFailedEventPayload;
 export declare const getCopiedFilePayload: (fileId: string) => CopiedFileEventPayload;
 export declare function fireMediaCardEvent(payload: MediaCardAnalyticsEventPayload, createAnalyticsEvent?: CreateUIAnalyticsEvent): void;
 export declare const createAndFireMediaCardEvent: (payload: MediaCardAnalyticsEventPayload) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.1.9",
+  "version": "74.2.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,11 +40,11 @@
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^18.0.0",
-    "@atlaskit/media-common": "^2.16.0",
+    "@atlaskit/media-client": "^18.1.0",
+    "@atlaskit/media-common": "^2.17.0",
     "@atlaskit/media-ui": "^22.1.0",
     "@atlaskit/media-viewer": "^47.1.0",
-    "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -52,8 +52,7 @@
     "classnames": "^2.2.5",
     "eventemitter2": "^4.1.0",
     "lru_map": "^0.4.1",
-    "react-loadable": "^5.1.0",
-    "video-snapshot": "^1.0.11"
+    "react-loadable": "^5.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
@@ -64,7 +63,7 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.4.0",
@@ -72,7 +71,7 @@
     "@atlaskit/media-picker": "^64.0.0",
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/range": "^6.1.0",
+    "@atlaskit/range": "^7.0.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",