@atlaskit/media-client 18.0.0 → 18.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/media-client
 
+## 18.1.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
+
 ## 18.0.0
 
 ### Major Changes

package/dist/cjs/client/media-client.js

@@ -51,8 +51,8 @@ var MediaClient = /*#__PURE__*/function () {
 
   (0, _createClass2.default)(MediaClient, [{
     key: "getImage",
-    value: function getImage(id, params, controller, fetchMaxRes) {
-      return this.mediaStore.getImage(id, params, controller, fetchMaxRes);
+    value: function getImage(id, params, controller, fetchMaxRes, traceId) {
+      return this.mediaStore.getImage(id, params, controller, fetchMaxRes, traceId);
     }
   }, {
     key: "getImageUrl",

package/dist/cjs/client/media-store/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "MediaStoreError", {
     return _error.MediaStoreError;
   }
 });
-exports.getMediaRegion = exports.getMediaEnvironment = void 0;
+exports.getMediaRegion = exports.getMediaEnvironment = exports.ZipkinHeaderKeys = void 0;
 Object.defineProperty(exports, "isMediaStoreError", {
   enumerable: true,
   get: function get() {
@@ -30,6 +30,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _mediaCommon = require("@atlaskit/media-common");
+
 var _constants = require("../../constants");
 
 var _artifacts = require("../../models/artifacts");
@@ -70,6 +72,14 @@ var jsonHeaders = {
   Accept: 'application/json',
   'Content-Type': 'application/json'
 };
+var ZipkinHeaderKeys = {
+  traceId: 'x-b3-traceid',
+  spanId: 'x-b3-spanid',
+  parentSpanId: 'x-b3-parentspanid',
+  sampled: 'x-b3-sampled',
+  flags: 'x-b3-flags'
+};
+exports.ZipkinHeaderKeys = ZipkinHeaderKeys;
 
 var MediaStore = /*#__PURE__*/function () {
   function MediaStore(config, featureFlags) {
@@ -495,7 +505,9 @@ var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "getImage",
     value: function () {
-      var _getImage = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(id, params, controller, fetchMaxRes) {
+      var _getImage = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(id, params, controller, fetchMaxRes, traceId) {
+        var _ref4;
+
         var isWebpSupported, headers, metadata, options;
         return _regenerator.default.wrap(function _callee7$(_context7) {
           while (1) {
@@ -503,11 +515,10 @@ var MediaStore = /*#__PURE__*/function () {
               case 0:
                 // TODO add checkWebpSupport() back https://product-fabric.atlassian.net/browse/MPT-584
                 isWebpSupported = false;
+                headers = !!traceId ? (_ref4 = {}, (0, _defineProperty2.default)(_ref4, ZipkinHeaderKeys.traceId, traceId), (0, _defineProperty2.default)(_ref4, ZipkinHeaderKeys.spanId, (0, _mediaCommon.getRandomHex)(16)), _ref4) : {};
 
                 if (isWebpSupported) {
-                  headers = {
-                    accept: 'image/webp,image/*,*/*;q=0.8'
-                  };
+                  headers.accept = 'image/webp,image/*,*/*;q=0.8';
                 }
 
                 metadata = {
@@ -523,7 +534,7 @@ var MediaStore = /*#__PURE__*/function () {
                 });
                 return _context7.abrupt("return", this.request("/file/".concat(id, "/image"), options, controller).then((0, _helpers.createMapResponseToBlob)(metadata)));
 
-              case 5:
+              case 6:
               case "end":
                 return _context7.stop();
             }
@@ -531,7 +542,7 @@ var MediaStore = /*#__PURE__*/function () {
         }, _callee7, this);
       }));
 
-      function getImage(_x15, _x16, _x17, _x18) {
+      function getImage(_x15, _x16, _x17, _x18, _x19) {
         return _getImage.apply(this, arguments);
       }
 
@@ -576,7 +587,7 @@ var MediaStore = /*#__PURE__*/function () {
         }, _callee8, this);
       }));
 
-      function getItems(_x19, _x20) {
+      function getItems(_x20, _x21) {
         return _getItems.apply(this, arguments);
       }
 
@@ -611,7 +622,7 @@ var MediaStore = /*#__PURE__*/function () {
         }, _callee9, this);
       }));
 
-      function getImageMetadata(_x21, _x22) {
+      function getImageMetadata(_x22, _x23) {
         return _getImageMetadata.apply(this, arguments);
       }
 
@@ -648,7 +659,7 @@ var MediaStore = /*#__PURE__*/function () {
         }, _callee10, this);
       }));
 
-      function appendChunksToUpload(_x23, _x24, _x25) {
+      function appendChunksToUpload(_x24, _x25, _x26) {
         return _appendChunksToUpload.apply(this, arguments);
       }
 
@@ -733,7 +744,7 @@ var MediaStore = /*#__PURE__*/function () {
         }, _callee11, this);
       }));
 
-      function request(_x26) {
+      function request(_x27) {
         return _request2.apply(this, arguments);
       }
 

package/dist/cjs/utils/getVideoDimensionsFromBlob.js

@@ -11,35 +11,39 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
-var _videoSnapshot = _interopRequireDefault(require("video-snapshot"));
-
 var getVideoDimensionsFromBlob = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob) {
-    var snapshoter,
-        _args = arguments;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            snapshoter = _args.length > 1 && _args[1] !== undefined ? _args[1] : new _videoSnapshot.default(blob);
-            _context.prev = 1;
-            _context.next = 4;
-            return snapshoter.getDimensions();
-
-          case 4:
-            return _context.abrupt("return", _context.sent);
-
-          case 5:
-            _context.prev = 5;
-            snapshoter.end();
-            return _context.finish(5);
-
-          case 8:
+            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; // loadedmetadata, loadeddata, play, playing
+
+              video.addEventListener('loadedmetadata', function timeupdateHandler() {
+                video.removeEventListener('loadedmetadata', timeupdateHandler);
+                resolve({
+                  width: video.videoWidth,
+                  height: video.videoHeight
+                });
+                URL.revokeObjectURL(url);
+              });
+              video.addEventListener('error', function () {
+                reject(new Error('failed to load video'));
+                URL.revokeObjectURL(url);
+              });
+            }));
+
+          case 1:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[1,, 5, 8]]);
+    }, _callee);
   }));
 
   return function getVideoDimensionsFromBlob(_x) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-client",
-	"version": "18.0.0",
+	"version": "18.1.0",
 	"sideEffects": false
 }

package/dist/es2019/client/media-client.js

@@ -20,8 +20,8 @@ export class MediaClient {
     this.stargate = new StargateClient(mediaClientConfig.stargateBaseUrl);
   }
 
-  getImage(id, params, controller, fetchMaxRes) {
-    return this.mediaStore.getImage(id, params, controller, fetchMaxRes);
+  getImage(id, params, controller, fetchMaxRes, traceId) {
+    return this.mediaStore.getImage(id, params, controller, fetchMaxRes, traceId);
   }
 
   getImageUrl(id, params) {

package/dist/es2019/client/media-store/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getRandomHex } from '@atlaskit/media-common';
 import { FILE_CACHE_MAX_AGE, MAX_RESOLUTION } from '../../constants';
 import { getArtifactUrl } from '../../models/artifacts';
 import { request } from '../../utils/request';
@@ -31,6 +32,13 @@ const jsonHeaders = {
   Accept: 'application/json',
   'Content-Type': 'application/json'
 };
+export const ZipkinHeaderKeys = {
+  traceId: 'x-b3-traceid',
+  spanId: 'x-b3-spanid',
+  parentSpanId: 'x-b3-parentspanid',
+  sampled: 'x-b3-sampled',
+  flags: 'x-b3-flags'
+};
 export class MediaStore {
   constructor(config, featureFlags) {
     _defineProperty(this, "resolveAuth", authContext => resolveAuth(this.config.authProvider, authContext));
@@ -270,15 +278,16 @@ export class MediaStore {
     return createUrl(`${auth.baseUrl}${artifactUrl}`, options);
   }
 
-  async getImage(id, params, controller, fetchMaxRes) {
+  async getImage(id, params, controller, fetchMaxRes, traceId) {
     // TODO add checkWebpSupport() back https://product-fabric.atlassian.net/browse/MPT-584
     const isWebpSupported = false;
-    let headers;
+    let headers = !!traceId ? {
+      [ZipkinHeaderKeys.traceId]: traceId,
+      [ZipkinHeaderKeys.spanId]: getRandomHex(16)
+    } : {};
 
     if (isWebpSupported) {
-      headers = {
-        accept: 'image/webp,image/*,*/*;q=0.8'
-      };
+      headers.accept = 'image/webp,image/*,*/*;q=0.8';
     }
 
     const metadata = {

package/dist/es2019/utils/getVideoDimensionsFromBlob.js

@@ -1,8 +1,22 @@
-import VideoSnapshot from 'video-snapshot';
-export const getVideoDimensionsFromBlob = async (blob, snapshoter = new VideoSnapshot(blob)) => {
-  try {
-    return await snapshoter.getDimensions();
-  } finally {
-    snapshoter.end();
-  }
+export const getVideoDimensionsFromBlob = 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; // loadedmetadata, loadeddata, play, playing
+
+    video.addEventListener('loadedmetadata', function timeupdateHandler() {
+      video.removeEventListener('loadedmetadata', timeupdateHandler);
+      resolve({
+        width: video.videoWidth,
+        height: video.videoHeight
+      });
+      URL.revokeObjectURL(url);
+    });
+    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-client",
-	"version": "18.0.0",
+	"version": "18.1.0",
 	"sideEffects": false
 }

package/dist/esm/client/media-client.js

@@ -28,8 +28,8 @@ export var MediaClient = /*#__PURE__*/function () {
 
   _createClass(MediaClient, [{
     key: "getImage",
-    value: function getImage(id, params, controller, fetchMaxRes) {
-      return this.mediaStore.getImage(id, params, controller, fetchMaxRes);
+    value: function getImage(id, params, controller, fetchMaxRes, traceId) {
+      return this.mediaStore.getImage(id, params, controller, fetchMaxRes, traceId);
     }
   }, {
     key: "getImageUrl",

package/dist/esm/client/media-store/index.js

@@ -8,6 +8,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) { _defineProperty(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; }
 
+import { getRandomHex } from '@atlaskit/media-common';
 import { FILE_CACHE_MAX_AGE, MAX_RESOLUTION } from '../../constants';
 import { getArtifactUrl } from '../../models/artifacts';
 import { request as _request } from '../../utils/request';
@@ -38,6 +39,13 @@ var jsonHeaders = {
   Accept: 'application/json',
   'Content-Type': 'application/json'
 };
+export var ZipkinHeaderKeys = {
+  traceId: 'x-b3-traceid',
+  spanId: 'x-b3-spanid',
+  parentSpanId: 'x-b3-parentspanid',
+  sampled: 'x-b3-sampled',
+  flags: 'x-b3-flags'
+};
 export var MediaStore = /*#__PURE__*/function () {
   function MediaStore(config, featureFlags) {
     var _this = this;
@@ -465,7 +473,9 @@ export var MediaStore = /*#__PURE__*/function () {
   }, {
     key: "getImage",
     value: function () {
-      var _getImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(id, params, controller, fetchMaxRes) {
+      var _getImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(id, params, controller, fetchMaxRes, traceId) {
+        var _ref4;
+
         var isWebpSupported, headers, metadata, options;
         return _regeneratorRuntime.wrap(function _callee7$(_context7) {
           while (1) {
@@ -473,11 +483,10 @@ export var MediaStore = /*#__PURE__*/function () {
               case 0:
                 // TODO add checkWebpSupport() back https://product-fabric.atlassian.net/browse/MPT-584
                 isWebpSupported = false;
+                headers = !!traceId ? (_ref4 = {}, _defineProperty(_ref4, ZipkinHeaderKeys.traceId, traceId), _defineProperty(_ref4, ZipkinHeaderKeys.spanId, getRandomHex(16)), _ref4) : {};
 
                 if (isWebpSupported) {
-                  headers = {
-                    accept: 'image/webp,image/*,*/*;q=0.8'
-                  };
+                  headers.accept = 'image/webp,image/*,*/*;q=0.8';
                 }
 
                 metadata = {
@@ -493,7 +502,7 @@ export var MediaStore = /*#__PURE__*/function () {
                 });
                 return _context7.abrupt("return", this.request("/file/".concat(id, "/image"), options, controller).then(createMapResponseToBlob(metadata)));
 
-              case 5:
+              case 6:
               case "end":
                 return _context7.stop();
             }
@@ -501,7 +510,7 @@ export var MediaStore = /*#__PURE__*/function () {
         }, _callee7, this);
       }));
 
-      function getImage(_x15, _x16, _x17, _x18) {
+      function getImage(_x15, _x16, _x17, _x18, _x19) {
         return _getImage.apply(this, arguments);
       }
 
@@ -546,7 +555,7 @@ export var MediaStore = /*#__PURE__*/function () {
         }, _callee8, this);
       }));
 
-      function getItems(_x19, _x20) {
+      function getItems(_x20, _x21) {
         return _getItems.apply(this, arguments);
       }
 
@@ -581,7 +590,7 @@ export var MediaStore = /*#__PURE__*/function () {
         }, _callee9, this);
       }));
 
-      function getImageMetadata(_x21, _x22) {
+      function getImageMetadata(_x22, _x23) {
         return _getImageMetadata.apply(this, arguments);
       }
 
@@ -618,7 +627,7 @@ export var MediaStore = /*#__PURE__*/function () {
         }, _callee10, this);
       }));
 
-      function appendChunksToUpload(_x23, _x24, _x25) {
+      function appendChunksToUpload(_x24, _x25, _x26) {
         return _appendChunksToUpload.apply(this, arguments);
       }
 
@@ -703,7 +712,7 @@ export var MediaStore = /*#__PURE__*/function () {
         }, _callee11, this);
       }));
 
-      function request(_x26) {
+      function request(_x27) {
         return _request2.apply(this, arguments);
       }
 

package/dist/esm/utils/getVideoDimensionsFromBlob.js

@@ -1,33 +1,38 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import VideoSnapshot from 'video-snapshot';
 export var getVideoDimensionsFromBlob = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {
-    var snapshoter,
-        _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            snapshoter = _args.length > 1 && _args[1] !== undefined ? _args[1] : new VideoSnapshot(blob);
-            _context.prev = 1;
-            _context.next = 4;
-            return snapshoter.getDimensions();
+            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; // loadedmetadata, loadeddata, play, playing
 
-          case 4:
-            return _context.abrupt("return", _context.sent);
+              video.addEventListener('loadedmetadata', function timeupdateHandler() {
+                video.removeEventListener('loadedmetadata', timeupdateHandler);
+                resolve({
+                  width: video.videoWidth,
+                  height: video.videoHeight
+                });
+                URL.revokeObjectURL(url);
+              });
+              video.addEventListener('error', function () {
+                reject(new Error('failed to load video'));
+                URL.revokeObjectURL(url);
+              });
+            }));
 
-          case 5:
-            _context.prev = 5;
-            snapshoter.end();
-            return _context.finish(5);
-
-          case 8:
+          case 1:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[1,, 5, 8]]);
+    }, _callee);
   }));
 
   return function getVideoDimensionsFromBlob(_x) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-client",
-	"version": "18.0.0",
+	"version": "18.1.0",
 	"sideEffects": false
 }

package/dist/types/client/media-client.d.ts

@@ -17,7 +17,7 @@ export declare class MediaClient {
     private mobileUpload?;
     readonly config: MediaClientConfig;
     constructor(mediaClientConfig: MediaClientConfig, featureFlags?: MediaFeatureFlags | undefined);
-    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean): Promise<Blob>;
+    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceId?: string): Promise<Blob>;
     getImageUrl(id: string, params?: MediaStoreGetFileImageParams): Promise<string>;
     getImageUrlSync(id: string, params?: MediaStoreGetFileImageParams): string;
     getImageMetadata(id: string, params?: MediaStoreGetFileImageParams): Promise<ImageMetadata>;

package/dist/types/client/media-store/index.d.ts

@@ -5,6 +5,13 @@ import { MediaChunksProbe, MediaCollectionItemFullDetails, MediaCollectionItems,
 import { ClientOptions, RequestHeaders, RequestMethod, RequestParams, RequestMetadata } from '../../utils/request/types';
 export type { MediaStoreErrorReason, MediaStoreErrorAttributes } from './error';
 export { MediaStoreError, isMediaStoreError } from './error';
+export declare const ZipkinHeaderKeys: {
+    traceId: string;
+    spanId: string;
+    parentSpanId: string;
+    sampled: string;
+    flags: string;
+};
 export declare class MediaStore {
     private readonly config;
     readonly featureFlags?: MediaFeatureFlags | undefined;
@@ -29,7 +36,7 @@ export declare class MediaStore {
     private createFileImageURL;
     getFileBinaryURL(id: string, collectionName?: string): Promise<string>;
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
-    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean): Promise<Blob>;
+    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceId?: string): Promise<Blob>;
     getItems(ids: string[], collectionName?: string): Promise<MediaStoreResponse<ItemsPayload>>;
     getImageMetadata(id: string, params?: MediaStoreGetFileImageParams): Promise<{
         metadata: ImageMetadata;

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

@@ -1,6 +1,5 @@
-import VideoSnapshot from 'video-snapshot';
-export declare type Dimensions = {
+export interface Dimensions {
     width: number;
     height: number;
-};
-export declare const getVideoDimensionsFromBlob: (blob: Blob, snapshoter?: VideoSnapshot) => Promise<Dimensions>;
+}
+export declare const getVideoDimensionsFromBlob: (blob: Blob) => Promise<Dimensions>;

package/dist/types/utils/request/helpers.d.ts

@@ -8,7 +8,7 @@ export declare function isFetchNetworkError(err: any): err is TypeError;
 export declare function isRateLimitedError(error: Error | undefined): boolean;
 export declare function mapAuthToRequestHeaders(auth: Auth): RequestHeaders;
 export declare function createUrl(url: string, { params, auth }: CreateUrlOptions): string;
-export declare function withAuth(auth?: Auth): (headers?: RequestHeaders | undefined) => RequestHeaders | undefined;
+export declare function withAuth(auth?: Auth): (headers?: RequestHeaders | undefined) => Record<string, string> | undefined;
 /**
  * @deprecated Helper is deprecated and will be removed in the next major version.
  * TODO: https://product-fabric.atlassian.net/browse/BMPT-1354

package/dist/types-ts4.0/client/media-client.d.ts

@@ -17,7 +17,7 @@ export declare class MediaClient {
     private mobileUpload?;
     readonly config: MediaClientConfig;
     constructor(mediaClientConfig: MediaClientConfig, featureFlags?: MediaFeatureFlags | undefined);
-    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean): Promise<Blob>;
+    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceId?: string): Promise<Blob>;
     getImageUrl(id: string, params?: MediaStoreGetFileImageParams): Promise<string>;
     getImageUrlSync(id: string, params?: MediaStoreGetFileImageParams): string;
     getImageMetadata(id: string, params?: MediaStoreGetFileImageParams): Promise<ImageMetadata>;

package/dist/types-ts4.0/client/media-store/index.d.ts

@@ -5,6 +5,13 @@ import { MediaChunksProbe, MediaCollectionItemFullDetails, MediaCollectionItems,
 import { ClientOptions, RequestHeaders, RequestMethod, RequestParams, RequestMetadata } from '../../utils/request/types';
 export type { MediaStoreErrorReason, MediaStoreErrorAttributes } from './error';
 export { MediaStoreError, isMediaStoreError } from './error';
+export declare const ZipkinHeaderKeys: {
+    traceId: string;
+    spanId: string;
+    parentSpanId: string;
+    sampled: string;
+    flags: string;
+};
 export declare class MediaStore {
     private readonly config;
     readonly featureFlags?: MediaFeatureFlags | undefined;
@@ -29,7 +36,7 @@ export declare class MediaStore {
     private createFileImageURL;
     getFileBinaryURL(id: string, collectionName?: string): Promise<string>;
     getArtifactURL(artifacts: MediaFileArtifacts, artifactName: keyof MediaFileArtifacts, collectionName?: string): Promise<string>;
-    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean): Promise<Blob>;
+    getImage(id: string, params?: MediaStoreGetFileImageParams, controller?: AbortController, fetchMaxRes?: boolean, traceId?: string): Promise<Blob>;
     getItems(ids: string[], collectionName?: string): Promise<MediaStoreResponse<ItemsPayload>>;
     getImageMetadata(id: string, params?: MediaStoreGetFileImageParams): Promise<{
         metadata: ImageMetadata;

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

@@ -1,6 +1,5 @@
-import VideoSnapshot from 'video-snapshot';
-export declare type Dimensions = {
+export interface Dimensions {
     width: number;
     height: number;
-};
-export declare const getVideoDimensionsFromBlob: (blob: Blob, snapshoter?: VideoSnapshot) => Promise<Dimensions>;
+}
+export declare const getVideoDimensionsFromBlob: (blob: Blob) => Promise<Dimensions>;

package/dist/types-ts4.0/utils/request/helpers.d.ts

@@ -8,7 +8,7 @@ export declare function isFetchNetworkError(err: any): err is TypeError;
 export declare function isRateLimitedError(error: Error | undefined): boolean;
 export declare function mapAuthToRequestHeaders(auth: Auth): RequestHeaders;
 export declare function createUrl(url: string, { params, auth }: CreateUrlOptions): string;
-export declare function withAuth(auth?: Auth): (headers?: RequestHeaders | undefined) => RequestHeaders | undefined;
+export declare function withAuth(auth?: Auth): (headers?: RequestHeaders | undefined) => Record<string, string> | undefined;
 /**
  * @deprecated Helper is deprecated and will be removed in the next major version.
  * TODO: https://product-fabric.atlassian.net/browse/BMPT-1354

package/example-helpers/styles.ts

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { FileStatus } from '../src';
 
@@ -29,11 +30,11 @@ export interface FilesWrapperProps {
 }
 
 const statusColorMap: { [key in FileStatus]: string } = {
-  uploading: 'cornflowerblue',
-  processing: 'peachpuff',
-  processed: 'darkseagreen',
-  error: 'indianred',
-  'failed-processing': 'indianred',
+  uploading: token('color.background.accent.blue.subtle', 'cornflowerblue'),
+  processing: token('color.background.accent.orange.subtler', 'peachpuff'),
+  processed: token('color.background.accent.green.subtle', 'darkseagreen'),
+  error: token('color.background.accent.red.subtle', 'indianred'),
+  'failed-processing': token('color.background.accent.red.subtle', 'indianred'),
 };
 
 export const fileWrapperStyles = (status: FileStatus) => css`
@@ -47,11 +48,11 @@ export const fileWrapperStyles = (status: FileStatus) => css`
 export const cardsWrapperStyles = css`
   width: 900px;
   padding: 10px;
-  border-right: 1px solid #ccc;
+  border-right: 1px solid ${token('color.border', '#ccc')};
 
   h1 {
     text-align: center;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid ${token('color.border', '#ccc')};
   }
 
   > div {
@@ -68,7 +69,7 @@ export const headerStyles = css`
 `;
 
 export const fileStateWrapperStyles = css`
-  border: 1px solid;
+  border: 1px solid ${token('color.border', '#ccc')};
   margin: 10px;
   padding: 10px;
   width: 500px;