@atlaskit/media-card 74.1.9 → 74.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/media-card
 
+## 74.2.0
+
+### Minor Changes
+
+- [`2c402e87213`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2c402e87213) - [Experimental] Add traceId in media card get image request.
+
+### Patch Changes
+
+- [`bf8302c838a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf8302c838a) - Implemented internal functionality to create local video preview.
+- Updated dependencies
+
 ## 74.1.9
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -90,7 +90,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.1.9";
+var packageVersion = "74.2.0";
 
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
@@ -101,6 +101,7 @@ 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;
 
@@ -121,6 +122,9 @@ var CardBase = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeElapsedTillCommenced", performance.now());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
+      traceId: (0, _mediaCommon.getRandomHex)(16)
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
       return _objectSpread(_objectSpread({
@@ -154,7 +158,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         alt: alt
       }) : undefined;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCardPreviewParams", function (identifier, fileState) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCardPreviewParams", function (identifier, fileState, traceContext) {
       var isBannedLocalPreview = _this.state.isBannedLocalPreview;
       var id = identifier.id;
       var _this$props2 = _this.props,
@@ -172,7 +176,8 @@ 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
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setCacheSSRPreview", function (identifier) {
@@ -233,7 +238,7 @@ 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 (0, _getCardPreview.getCardPreview)(params);
 
@@ -989,7 +994,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
           status = _this$state7.status,
           error = _this$state7.error;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error);
+      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
       (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {
@@ -1001,7 +1006,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         overall: {
           durationSincePageStart: this.timeElapsedTillCommenced
         }
-      });
+      }, this.traceContext);
       (0, _ufoExperiences.startUfoExperience)(this.internalOccurrenceKey);
     }
   }, {

package/dist/cjs/card/cardAnalytics.js

@@ -11,6 +11,7 @@ var _errors = require("../errors");
 
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 6 ? arguments[6] : undefined;
 
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
@@ -18,23 +19,23 @@ var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, s
 
   switch (status) {
     case 'complete':
-      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability));
+      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext));
       break;
 
     case 'failed-processing':
-      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability));
+      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext));
       break;
 
     case 'error':
-      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability));
+      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
       break;
   }
 };
 
 exports.fireOperationalEvent = fireOperationalEvent;
 
-var fireCommencedEvent = function fireCommencedEvent(createAnalyticsEvent, fileAttributes, performanceAttributes) {
-  (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderCommencedEventPayload)(fileAttributes, performanceAttributes), createAnalyticsEvent);
+var fireCommencedEvent = function fireCommencedEvent(createAnalyticsEvent, fileAttributes, performanceAttributes, traceContext) {
+  (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderCommencedEventPayload)(fileAttributes, performanceAttributes, traceContext), createAnalyticsEvent);
 };
 
 exports.fireCommencedEvent = fireCommencedEvent;

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

@@ -176,7 +176,7 @@ var getCardPreviewFromFilePreview = /*#__PURE__*/function () {
 exports.getCardPreviewFromFilePreview = getCardPreviewFromFilePreview;
 
 var getCardPreviewFromBackend = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(mediaClient, id, params) {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(mediaClient, id, params, traceId) {
     var blob;
     return _regenerator.default.wrap(function _callee4$(_context4) {
       while (1) {
@@ -184,7 +184,7 @@ 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;
@@ -207,7 +207,7 @@ 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/cjs/card/getCardPreview/index.js

@@ -126,13 +126,13 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
 
 var getCardPreview = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.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 _regenerator.default.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 = _cache.default.get(id, mode);
             dimensionsAreBigger = (0, _dimensionComparer.isBigger)(cachedPreview === null || cachedPreview === void 0 ? void 0 : cachedPreview.dimensions, dimensions);
@@ -214,7 +214,7 @@ 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;
@@ -318,14 +318,14 @@ var isSSRDataPreview = function isSSRDataPreview(preview) {
 exports.isSSRDataPreview = isSSRDataPreview;
 
 var fetchAndCacheRemotePreview = /*#__PURE__*/function () {
-  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs) {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceId) {
     var remotePreview;
     return _regenerator.default.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             _context2.next = 2;
-            return (0, _helpers.getCardPreviewFromBackend)(mediaClient, id, params);
+            return (0, _helpers.getCardPreviewFromBackend)(mediaClient, id, params, traceId);
 
           case 2:
             remotePreview = _context2.sent;
@@ -341,7 +341,7 @@ 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/cjs/utils/analytics.js

@@ -65,21 +65,24 @@ var getRenderPreviewableCardPayload = function getRenderPreviewableCardPayload(f
 
 exports.getRenderPreviewableCardPayload = getRenderPreviewableCardPayload;
 
-var getRenderCommencedEventPayload = function getRenderCommencedEventPayload(fileAttributes, performanceAttributes) {
+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
+      }
     }
   };
 };
 
 exports.getRenderCommencedEventPayload = getRenderCommencedEventPayload;
 
-var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability) {
+var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'succeeded',
@@ -88,7 +91,8 @@ var getRenderSucceededEventPayload = function getRenderSucceededEventPayload(fil
       fileAttributes: fileAttributes,
       performanceAttributes: performanceAttributes,
       status: 'success',
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     }
   };
 };
@@ -189,7 +193,7 @@ var extractErrorInfo = function extractErrorInfo(error) {
 
 exports.extractErrorInfo = extractErrorInfo;
 
-var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability) {
+var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttributes, performanceAttributes, error, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -200,14 +204,15 @@ var getRenderErrorEventPayload = function getRenderErrorEventPayload(fileAttribu
       status: 'fail'
     }, extractErrorInfo(error)), {}, {
       request: getRenderErrorRequestMetadata(error),
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     })
   };
 };
 
 exports.getRenderErrorEventPayload = getRenderErrorEventPayload;
 
-var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability) {
+var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload(fileAttributes, performanceAttributes, ssrReliability, traceContext) {
   return {
     eventType: 'operational',
     action: 'failed',
@@ -217,7 +222,8 @@ var getRenderFailedFileStatusPayload = function getRenderFailedFileStatusPayload
       performanceAttributes: performanceAttributes,
       status: 'fail',
       failReason: 'failed-processing',
-      ssrReliability: ssrReliability
+      ssrReliability: ssrReliability,
+      traceContext: traceContext
     }
   };
 };

package/dist/cjs/utils/ufoExperiences.js

@@ -22,7 +22,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/media-card";
-var packageVersion = "74.1.9";
+var packageVersion = "74.2.0";
 var concurrentExperience;
 
 var getExperience = function getExperience(id) {

package/dist/cjs/utils/videoSnapshot.js

@@ -11,25 +11,50 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _videoSnapshot = _interopRequireDefault(require("video-snapshot"));
-
 var takeSnapshot = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob) {
-    var snapshooter, dataUri;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            snapshooter = new _videoSnapshot.default(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.
+
+                if (!video.videoWidth && !video.videoHeight) {
+                  return reject(new Error('error retrieving video dimensions'));
+                }
+
+                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'));
+                }
 
-          case 3:
-            dataUri = _context.sent;
-            snapshooter.end();
-            return _context.abrupt("return", dataUri);
+                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 6:
+          case 1:
           case "end":
             return _context.stop();
         }

package/dist/cjs/version.json

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

package/dist/es2019/card/card.js

@@ -4,6 +4,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';
@@ -25,12 +26,13 @@ import { getMediaCardCursor } from '../utils/getMediaCardCursor';
 import { completeUfoExperience, startUfoExperience } from '../utils/ufoExperiences';
 import { generateUniqueId } from '../utils/generateUniqueId';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.1.9";
+const packageVersion = "74.2.0";
 export class CardBase extends Component {
   // An internalOccurrenceKey is a randomly generated value to differentiate various instances
   // 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
   constructor(props) {
     super(props);
 
@@ -54,6 +56,10 @@ export class CardBase extends Component {
 
     _defineProperty(this, "timeElapsedTillCommenced", performance.now());
 
+    _defineProperty(this, "traceContext", {
+      traceId: getRandomHex(16)
+    });
+
     _defineProperty(this, "getImageURLParams", ({
       collectionName: collection
     }) => ({
@@ -90,7 +96,7 @@ export class CardBase extends Component {
       } : undefined;
     });
 
-    _defineProperty(this, "getCardPreviewParams", (identifier, fileState) => {
+    _defineProperty(this, "getCardPreviewParams", (identifier, fileState, traceContext) => {
       const {
         isBannedLocalPreview
       } = this.state;
@@ -112,7 +118,8 @@ export class CardBase extends Component {
         imageUrlParams: this.getImageURLParams(identifier),
         mediaBlobUrlAttrs: this.getMediaBlobUrlAttrs(identifier, fileState),
         createAnalyticsEvent,
-        featureFlags: this.props.featureFlags
+        featureFlags: this.props.featureFlags,
+        traceId: traceContext.traceId
       };
     });
 
@@ -146,7 +153,7 @@ export class CardBase extends Component {
 
     _defineProperty(this, "resolvePreview", async (identifier, fileState) => {
       try {
-        const params = this.getCardPreviewParams(identifier, fileState);
+        const params = this.getCardPreviewParams(identifier, fileState, this.traceContext);
         const cardPreview = await getCardPreview(params);
         this.safeSetState({
           cardPreview
@@ -937,7 +944,7 @@ export class CardBase extends Component {
     const {
       createAnalyticsEvent
     } = this.props;
-    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);
   }
 
@@ -950,7 +957,7 @@ export class CardBase extends Component {
       overall: {
         durationSincePageStart: this.timeElapsedTillCommenced
       }
-    });
+    }, this.traceContext);
     startUfoExperience(this.internalOccurrenceKey);
   }
 

package/dist/es2019/card/cardAnalytics.js

@@ -1,24 +1,24 @@
 import { fireMediaCardEvent, getRenderSucceededEventPayload, getRenderErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, getRenderCommencedEventPayload, getRenderPreviewableCardPayload } from '../utils/analytics';
 import { MediaCardError } from '../errors';
-export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data')) => {
+export const fireOperationalEvent = (createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error = new MediaCardError('missing-error-data'), traceContext) => {
   const fireEvent = payload => fireMediaCardEvent(payload, createAnalyticsEvent);
 
   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 const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, performanceAttributes) => {
-  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes), createAnalyticsEvent);
+export const fireCommencedEvent = (createAnalyticsEvent, fileAttributes, performanceAttributes, traceContext) => {
+  fireMediaCardEvent(getRenderCommencedEventPayload(fileAttributes, performanceAttributes, traceContext), createAnalyticsEvent);
 };
 export const fireCopiedEvent = (createAnalyticsEvent, fileId, cardRef) => {
   if (typeof window.getSelection === 'function') {

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

@@ -69,9 +69,9 @@ export const getCardPreviewFromFilePreview = async filePreview => {
 
   throw new LocalPreviewError('local-preview-unsupported');
 };
-export const getCardPreviewFromBackend = async (mediaClient, id, params) => {
+export const getCardPreviewFromBackend = async (mediaClient, id, params, traceId) => {
   try {
-    const blob = await mediaClient.getImage(id, params);
+    const blob = await mediaClient.getImage(id, params, undefined, undefined, traceId);
     return {
       dataURI: URL.createObjectURL(blob),
       orientation: 1,

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

@@ -75,7 +75,8 @@ export const getCardPreview = async ({
   imageUrlParams,
   mediaBlobUrlAttrs,
   createAnalyticsEvent,
-  featureFlags
+  featureFlags,
+  traceId
 }) => {
   const mode = imageUrlParams.mode;
   const cachedPreview = cardPreviewCache.get(id, mode);
@@ -136,7 +137,7 @@ export const getCardPreview = async ({
     throw new MediaCardError('remote-preview-not-ready');
   }
 
-  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs);
+  const remotePreview = await fetchAndCacheRemotePreview(mediaClient, id, dimensions, imageUrlParams, mediaBlobUrlAttrs, traceId);
 
   if (getMediaFeatureFlag('memoryCacheLogging', featureFlags)) {
     createAnalyticsEvent && fireImageFetchingOperationalEvent(createAnalyticsEvent, 'remote-success', {
@@ -197,8 +198,8 @@ export const isSSRClientPreview = preview => {
   return ssrClientSources.includes(preview.source);
 };
 export const isSSRDataPreview = preview => preview.source === 'ssr-data';
-export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs) => {
-  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params);
+export const fetchAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceId) => {
+  const remotePreview = await getCardPreviewFromBackend(mediaClient, id, params, traceId);
   return extendAndCachePreview(id, params.mode, { ...remotePreview,
     dimensions
   }, mediaBlobUrlAttrs);

package/dist/es2019/utils/analytics.js

@@ -31,18 +31,21 @@ export const getRenderPreviewableCardPayload = fileAttributes => ({
     fileAttributes
   }
 });
-export const getRenderCommencedEventPayload = (fileAttributes, performanceAttributes) => {
+export const getRenderCommencedEventPayload = (fileAttributes, performanceAttributes, traceContext) => {
   return {
     eventType: 'operational',
     action: 'commenced',
     actionSubject: 'mediaCardRender',
     attributes: {
       fileAttributes,
-      performanceAttributes
+      performanceAttributes,
+      traceContext: {
+        traceId: traceContext.traceId
+      }
     }
   };
 };
-export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability) => ({
+export const getRenderSucceededEventPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext) => ({
   eventType: 'operational',
   action: 'succeeded',
   actionSubject: 'mediaCardRender',
@@ -50,7 +53,8 @@ export const getRenderSucceededEventPayload = (fileAttributes, performanceAttrib
     fileAttributes,
     performanceAttributes,
     status: 'success',
-    ssrReliability
+    ssrReliability,
+    traceContext
   }
 });
 export const getCacheHitEventPayload = cardPreviewAttributes => ({
@@ -117,7 +121,7 @@ export const extractErrorInfo = error => {
     errorDetail: getRenderErrorErrorDetail(error)
   };
 };
-export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability) => ({
+export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes, error, ssrReliability, traceContext) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -127,10 +131,11 @@ export const getRenderErrorEventPayload = (fileAttributes, performanceAttributes
     status: 'fail',
     ...extractErrorInfo(error),
     request: getRenderErrorRequestMetadata(error),
-    ssrReliability
+    ssrReliability,
+    traceContext
   }
 });
-export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability) => ({
+export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttributes, ssrReliability, traceContext) => ({
   eventType: 'operational',
   action: 'failed',
   actionSubject: 'mediaCardRender',
@@ -139,7 +144,8 @@ export const getRenderFailedFileStatusPayload = (fileAttributes, performanceAttr
     performanceAttributes,
     status: 'fail',
     failReason: 'failed-processing',
-    ssrReliability
+    ssrReliability,
+    traceContext
   }
 });
 export const getCopiedFilePayload = fileId => ({

package/dist/es2019/utils/ufoExperiences.js

@@ -3,7 +3,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata, LOGGED_FEATURE_FLAG_KE
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "74.1.9";
+const packageVersion = "74.2.0";
 let concurrentExperience;
 
 const getExperience = id => {

package/dist/es2019/utils/videoSnapshot.js

@@ -1,7 +1,38 @@
-import VideoSnapshot from 'video-snapshot';
 export const takeSnapshot = async blob => {
-  const snapshooter = new VideoSnapshot(blob);
-  const dataUri = await snapshooter.takeSnapshot();
-  snapshooter.end();
-  return dataUri;
+  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/version.json

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