@atlaskit/media-client 27.3.3 → 27.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-client
 
+## 27.4.0
+
+### Minor Changes
+
+- [#130787](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130787)
+  [`64a680780dc57`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/64a680780dc57) -
+  Add performance observer metrics for Media Card to assist investigation into hot-110955
+
+## 27.3.4
+
+### Patch Changes
+
+- [#120529](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120529)
+  [`dc8b7900f9d1b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc8b7900f9d1b) -
+  fix artifacts cdn url
+
 ## 27.3.3
 
 ### Patch Changes

package/dist/cjs/client/file-fetcher/index.js

@@ -154,7 +154,7 @@ var FileFetcherImpl = exports.FileFetcherImpl = /*#__PURE__*/function () {
       if (content instanceof Blob) {
         size = content.size;
         mimeType = content.type;
-        if ((0, _mediaTypeUtils.isMimeTypeSupportedByBrowser)(content.type) || (0, _platformFeatureFlags.getBooleanFF)('platform.media-svg-rendering')) {
+        if ((0, _mediaTypeUtils.isMimeTypeSupportedByBrowser)(content.type) || (0, _platformFeatureFlags.fg)('platform.media-svg-rendering')) {
           preview = {
             value: content,
             origin: 'local'

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

@@ -10,13 +10,13 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mediaCore = require("@atlaskit/media-core");
 var _mediaCommon = require("@atlaskit/media-common");
 var _constants = require("../../constants");
 var _artifacts = require("../../models/artifacts");
 var _request3 = require("../../utils/request");
 var _helpers = require("../../utils/request/helpers");
 var _resolveAuth = require("./resolveAuth");
-var _mediaCore = require("@atlaskit/media-core");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -291,7 +291,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
         params: extendImageParams(params),
         auth: auth
       };
-      var imageEndpoint = (0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+      var imageEndpoint = (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
       return (0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options);
     }
   }, {
@@ -309,7 +309,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
             case 0:
               maxAge = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : _constants.FILE_CACHE_MAX_AGE;
               headers = {};
-              binaryEndpoint = (0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+              binaryEndpoint = (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
               metadata = {
                 method: 'GET',
                 endpoint: "/file/{fileId}/".concat(binaryEndpoint)
@@ -363,7 +363,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              binaryEndpoint = (0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+              binaryEndpoint = (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
               return _context6.abrupt("return", (0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(binaryEndpoint), options));
             case 7:
             case "end":
@@ -391,22 +391,12 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
               }
               throw new Error("artifact ".concat(artifactName, " not found"));
             case 3:
-              if (artifactUrl.includes('media-cdn')) {
-                _context7.next = 9;
-                break;
-              }
-              _context7.next = 6;
+              _context7.next = 5;
               return this.resolveAuth({
                 collectionName: collectionName
               });
-            case 6:
-              _context7.t0 = _context7.sent;
-              _context7.next = 10;
-              break;
-            case 9:
-              _context7.t0 = undefined;
-            case 10:
-              auth = _context7.t0;
+            case 5:
+              auth = _context7.sent;
               options = {
                 params: {
                   collection: collectionName,
@@ -415,7 +405,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 auth: auth
               };
               return _context7.abrupt("return", (0, _helpers.createUrl)(artifactUrl, options));
-            case 13:
+            case 8:
             case "end":
               return _context7.stop();
           }
@@ -440,7 +430,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
               if (isWebpSupported) {
                 headers.accept = 'image/webp,image/*,*/*;q=0.8';
               }
-              imageEndpoint = (0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+              imageEndpoint = (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
               metadata = {
                 method: 'GET',
                 endpoint: "/file/{fileId}/".concat(imageEndpoint)
@@ -451,7 +441,8 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 },
                 params: extendImageParams(params, fetchMaxRes),
                 headers: headers,
-                traceContext: traceContext
+                traceContext: traceContext,
+                addMediaClientParam: (0, _platformFeatureFlags.fg)('platform.media-card-performance-observer_lgc7b') && true
               });
               return _context8.abrupt("return", this.request("/file/".concat(id, "/").concat(imageEndpoint), options, controller).then((0, _helpers.createMapResponseToBlob)(metadata)));
             case 7:
@@ -605,7 +596,9 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
           body,
           clientOptions,
           traceContext,
+          addMediaClientParam,
           auth,
+          clientId,
           extendedTraceContext,
           response,
           _args12 = arguments;
@@ -618,31 +611,34 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 authContext: {}
               };
               controller = _args12.length > 2 ? _args12[2] : undefined;
-              method = options.method, endpoint = options.endpoint, authContext = options.authContext, params = options.params, headers = options.headers, body = options.body, clientOptions = options.clientOptions, traceContext = options.traceContext;
+              method = options.method, endpoint = options.endpoint, authContext = options.authContext, params = options.params, headers = options.headers, body = options.body, clientOptions = options.clientOptions, traceContext = options.traceContext, addMediaClientParam = options.addMediaClientParam;
               _context12.next = 5;
               return this.resolveAuth(authContext);
             case 5:
               auth = _context12.sent;
+              clientId = (0, _mediaCore.isClientBasedAuth)(auth) ? auth.clientId : undefined;
               extendedTraceContext = traceContext ? _objectSpread(_objectSpread({}, traceContext), {}, {
                 spanId: (traceContext === null || traceContext === void 0 ? void 0 : traceContext.spanId) || (0, _mediaCommon.getRandomHex)(8)
               }) : undefined;
-              _context12.next = 9;
+              _context12.next = 10;
               return (0, _request3.request)("".concat(auth.baseUrl).concat(path), {
                 method: method,
                 endpoint: endpoint,
                 auth: auth,
-                params: params,
+                params: addMediaClientParam ? _objectSpread(_objectSpread({}, params), {}, {
+                  clientId: clientId
+                }) : params,
                 headers: headers,
                 body: body,
                 clientOptions: clientOptions,
                 traceContext: extendedTraceContext
               }, controller);
-            case 9:
+            case 10:
               response = _context12.sent;
               setKeyValueInSessionStorage(MEDIA_API_REGION, response.headers.get('x-media-region'));
               setKeyValueInSessionStorage(MEDIA_API_ENVIRONMENT, response.headers.get('x-media-env'));
               return _context12.abrupt("return", response);
-            case 13:
+            case 14:
             case "end":
               return _context12.stop();
           }

package/dist/cjs/models/artifacts.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getArtifactUrl = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var getArtifactUrl = exports.getArtifactUrl = function getArtifactUrl(artifacts, prop) {
-  var _artifacts$prop3;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery')) {
-    var _artifacts$prop, _artifacts$prop2;
-    return ((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.cdnUrl) || ((_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url);
+  var _artifacts$prop2;
+  if ((0, _platformFeatureFlags.fg)('platform.media-cdn-delivery')) {
+    var _artifacts$prop;
+    return "".concat((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.url, "/cdn");
   }
-  return (_artifacts$prop3 = artifacts[prop]) === null || _artifacts$prop3 === void 0 ? void 0 : _artifacts$prop3.url;
+  return (_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url;
 };

package/dist/es2019/client/file-fetcher/index.js

@@ -27,7 +27,7 @@ import { shouldFetchRemoteFileStates } from '../../utils/shouldFetchRemoteFileSt
 import { PollingFunction } from '../../utils/polling';
 import { isEmptyFile } from '../../utils/detectEmptyFile';
 import { mediaStore } from '@atlaskit/media-state';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 export { isFileFetcherError, FileFetcherError } from './error';
 export class FileFetcherImpl {
   constructor(mediaApi, store = mediaStore) {
@@ -108,7 +108,7 @@ export class FileFetcherImpl {
       if (content instanceof Blob) {
         size = content.size;
         mimeType = content.type;
-        if (isMimeTypeSupportedByBrowser(content.type) || getBooleanFF('platform.media-svg-rendering')) {
+        if (isMimeTypeSupportedByBrowser(content.type) || fg('platform.media-svg-rendering')) {
           preview = {
             value: content,
             origin: 'local'

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isClientBasedAuth } from '@atlaskit/media-core';
 import { getRandomHex } from '@atlaskit/media-common';
 import { FILE_CACHE_MAX_AGE, MAX_RESOLUTION } from '../../constants';
 import { getArtifactUrl } from '../../models/artifacts';
@@ -6,7 +7,7 @@ import { request } from '../../utils/request';
 import { createUrl, createMapResponseToJson, createMapResponseToBlob } from '../../utils/request/helpers';
 import { resolveAuth, resolveInitialAuth } from './resolveAuth';
 import { ChunkHashAlgorithm } from '@atlaskit/media-core';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 const MEDIA_API_REGION = 'media-api-region';
 const MEDIA_API_ENVIRONMENT = 'media-api-environment';
 const extendImageParams = (params, fetchMaxRes = false) => {
@@ -185,12 +186,12 @@ export class MediaStore {
       params: extendImageParams(params),
       auth
     };
-    const imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+    const imageEndpoint = fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
     return createUrl(`${auth.baseUrl}/file/${id}/${imageEndpoint}`, options);
   }
   async getFileBinary(id, collectionName, maxAge = FILE_CACHE_MAX_AGE) {
     const headers = {};
-    const binaryEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+    const binaryEndpoint = fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
     const metadata = {
       method: 'GET',
       endpoint: `/file/{fileId}/${binaryEndpoint}`
@@ -220,7 +221,7 @@ export class MediaStore {
       },
       auth
     };
-    const binaryEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+    const binaryEndpoint = fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
     return createUrl(`${auth.baseUrl}/file/${id}/${binaryEndpoint}`, options);
   }
   async getArtifactURL(artifacts, artifactName, collectionName) {
@@ -228,9 +229,9 @@ export class MediaStore {
     if (!artifactUrl) {
       throw new Error(`artifact ${artifactName} not found`);
     }
-    const auth = !artifactUrl.includes('media-cdn') ? await this.resolveAuth({
+    const auth = await this.resolveAuth({
       collectionName
-    }) : undefined;
+    });
     const options = {
       params: {
         collection: collectionName,
@@ -247,7 +248,7 @@ export class MediaStore {
     if (isWebpSupported) {
       headers.accept = 'image/webp,image/*,*/*;q=0.8';
     }
-    const imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+    const imageEndpoint = fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
     const metadata = {
       method: 'GET',
       endpoint: `/file/{fileId}/${imageEndpoint}`
@@ -259,7 +260,8 @@ export class MediaStore {
       },
       params: extendImageParams(params, fetchMaxRes),
       headers,
-      traceContext
+      traceContext,
+      addMediaClientParam: fg('platform.media-card-performance-observer_lgc7b') && true
     };
     return this.request(`/file/${id}/${imageEndpoint}`, options, controller).then(createMapResponseToBlob(metadata));
   }
@@ -350,9 +352,11 @@ export class MediaStore {
       headers,
       body,
       clientOptions,
-      traceContext
+      traceContext,
+      addMediaClientParam
     } = options;
     const auth = await this.resolveAuth(authContext);
+    const clientId = isClientBasedAuth(auth) ? auth.clientId : undefined;
     const extendedTraceContext = traceContext ? {
       ...traceContext,
       spanId: (traceContext === null || traceContext === void 0 ? void 0 : traceContext.spanId) || getRandomHex(8)
@@ -361,7 +365,10 @@ export class MediaStore {
       method,
       endpoint,
       auth,
-      params,
+      params: addMediaClientParam ? {
+        ...params,
+        clientId
+      } : params,
       headers,
       body,
       clientOptions,

package/dist/es2019/models/artifacts.js

@@ -1,9 +1,9 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const getArtifactUrl = (artifacts, prop) => {
-  var _artifacts$prop3;
-  if (getBooleanFF('platform.media-cdn-delivery')) {
-    var _artifacts$prop, _artifacts$prop2;
-    return ((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.cdnUrl) || ((_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url);
+  var _artifacts$prop2;
+  if (fg('platform.media-cdn-delivery')) {
+    var _artifacts$prop;
+    return `${(_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.url}/cdn`;
   }
-  return (_artifacts$prop3 = artifacts[prop]) === null || _artifacts$prop3 === void 0 ? void 0 : _artifacts$prop3.url;
+  return (_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url;
 };

package/dist/esm/client/file-fetcher/index.js

@@ -33,7 +33,7 @@ import { shouldFetchRemoteFileStates } from '../../utils/shouldFetchRemoteFileSt
 import { PollingFunction } from '../../utils/polling';
 import { isEmptyFile } from '../../utils/detectEmptyFile';
 import { mediaStore } from '@atlaskit/media-state';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 export { isFileFetcherError, FileFetcherError } from './error';
 export var FileFetcherImpl = /*#__PURE__*/function () {
   function FileFetcherImpl(mediaApi) {
@@ -137,7 +137,7 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
       if (content instanceof Blob) {
         size = content.size;
         mimeType = content.type;
-        if (isMimeTypeSupportedByBrowser(content.type) || getBooleanFF('platform.media-svg-rendering')) {
+        if (isMimeTypeSupportedByBrowser(content.type) || fg('platform.media-svg-rendering')) {
           preview = {
             value: content,
             origin: 'local'

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

@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { isClientBasedAuth } from '@atlaskit/media-core';
 import { getRandomHex } from '@atlaskit/media-common';
 import { FILE_CACHE_MAX_AGE, MAX_RESOLUTION } from '../../constants';
 import { getArtifactUrl } from '../../models/artifacts';
@@ -12,7 +13,7 @@ import { request as _request } from '../../utils/request';
 import { createUrl, createMapResponseToJson, createMapResponseToBlob } from '../../utils/request/helpers';
 import { resolveAuth, resolveInitialAuth } from './resolveAuth';
 import { ChunkHashAlgorithm } from '@atlaskit/media-core';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 var MEDIA_API_REGION = 'media-api-region';
 var MEDIA_API_ENVIRONMENT = 'media-api-environment';
 var extendImageParams = function extendImageParams(params) {
@@ -284,7 +285,7 @@ export var MediaStore = /*#__PURE__*/function () {
         params: extendImageParams(params),
         auth: auth
       };
-      var imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+      var imageEndpoint = fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
       return createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options);
     }
   }, {
@@ -302,7 +303,7 @@ export var MediaStore = /*#__PURE__*/function () {
             case 0:
               maxAge = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : FILE_CACHE_MAX_AGE;
               headers = {};
-              binaryEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+              binaryEndpoint = fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
               metadata = {
                 method: 'GET',
                 endpoint: "/file/{fileId}/".concat(binaryEndpoint)
@@ -356,7 +357,7 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              binaryEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+              binaryEndpoint = fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
               return _context6.abrupt("return", createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(binaryEndpoint), options));
             case 7:
             case "end":
@@ -384,22 +385,12 @@ export var MediaStore = /*#__PURE__*/function () {
               }
               throw new Error("artifact ".concat(artifactName, " not found"));
             case 3:
-              if (artifactUrl.includes('media-cdn')) {
-                _context7.next = 9;
-                break;
-              }
-              _context7.next = 6;
+              _context7.next = 5;
               return this.resolveAuth({
                 collectionName: collectionName
               });
-            case 6:
-              _context7.t0 = _context7.sent;
-              _context7.next = 10;
-              break;
-            case 9:
-              _context7.t0 = undefined;
-            case 10:
-              auth = _context7.t0;
+            case 5:
+              auth = _context7.sent;
               options = {
                 params: {
                   collection: collectionName,
@@ -408,7 +399,7 @@ export var MediaStore = /*#__PURE__*/function () {
                 auth: auth
               };
               return _context7.abrupt("return", createUrl(artifactUrl, options));
-            case 13:
+            case 8:
             case "end":
               return _context7.stop();
           }
@@ -433,7 +424,7 @@ export var MediaStore = /*#__PURE__*/function () {
               if (isWebpSupported) {
                 headers.accept = 'image/webp,image/*,*/*;q=0.8';
               }
-              imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+              imageEndpoint = fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
               metadata = {
                 method: 'GET',
                 endpoint: "/file/{fileId}/".concat(imageEndpoint)
@@ -444,7 +435,8 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 params: extendImageParams(params, fetchMaxRes),
                 headers: headers,
-                traceContext: traceContext
+                traceContext: traceContext,
+                addMediaClientParam: fg('platform.media-card-performance-observer_lgc7b') && true
               });
               return _context8.abrupt("return", this.request("/file/".concat(id, "/").concat(imageEndpoint), options, controller).then(createMapResponseToBlob(metadata)));
             case 7:
@@ -598,7 +590,9 @@ export var MediaStore = /*#__PURE__*/function () {
           body,
           clientOptions,
           traceContext,
+          addMediaClientParam,
           auth,
+          clientId,
           extendedTraceContext,
           response,
           _args12 = arguments;
@@ -611,31 +605,34 @@ export var MediaStore = /*#__PURE__*/function () {
                 authContext: {}
               };
               controller = _args12.length > 2 ? _args12[2] : undefined;
-              method = options.method, endpoint = options.endpoint, authContext = options.authContext, params = options.params, headers = options.headers, body = options.body, clientOptions = options.clientOptions, traceContext = options.traceContext;
+              method = options.method, endpoint = options.endpoint, authContext = options.authContext, params = options.params, headers = options.headers, body = options.body, clientOptions = options.clientOptions, traceContext = options.traceContext, addMediaClientParam = options.addMediaClientParam;
               _context12.next = 5;
               return this.resolveAuth(authContext);
             case 5:
               auth = _context12.sent;
+              clientId = isClientBasedAuth(auth) ? auth.clientId : undefined;
               extendedTraceContext = traceContext ? _objectSpread(_objectSpread({}, traceContext), {}, {
                 spanId: (traceContext === null || traceContext === void 0 ? void 0 : traceContext.spanId) || getRandomHex(8)
               }) : undefined;
-              _context12.next = 9;
+              _context12.next = 10;
               return _request("".concat(auth.baseUrl).concat(path), {
                 method: method,
                 endpoint: endpoint,
                 auth: auth,
-                params: params,
+                params: addMediaClientParam ? _objectSpread(_objectSpread({}, params), {}, {
+                  clientId: clientId
+                }) : params,
                 headers: headers,
                 body: body,
                 clientOptions: clientOptions,
                 traceContext: extendedTraceContext
               }, controller);
-            case 9:
+            case 10:
               response = _context12.sent;
               setKeyValueInSessionStorage(MEDIA_API_REGION, response.headers.get('x-media-region'));
               setKeyValueInSessionStorage(MEDIA_API_ENVIRONMENT, response.headers.get('x-media-env'));
               return _context12.abrupt("return", response);
-            case 13:
+            case 14:
             case "end":
               return _context12.stop();
           }

package/dist/esm/models/artifacts.js

@@ -1,9 +1,9 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var getArtifactUrl = function getArtifactUrl(artifacts, prop) {
-  var _artifacts$prop3;
-  if (getBooleanFF('platform.media-cdn-delivery')) {
-    var _artifacts$prop, _artifacts$prop2;
-    return ((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.cdnUrl) || ((_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url);
+  var _artifacts$prop2;
+  if (fg('platform.media-cdn-delivery')) {
+    var _artifacts$prop;
+    return "".concat((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.url, "/cdn");
   }
-  return (_artifacts$prop3 = artifacts[prop]) === null || _artifacts$prop3 === void 0 ? void 0 : _artifacts$prop3.url;
+  return (_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url;
 };

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

@@ -1,5 +1,5 @@
 import { type Auth, type AsapBasedAuth, type AuthContext, type ClientAltBasedAuth } from '@atlaskit/media-core';
-import { type MediaTraceContext } from '@atlaskit/media-common';
+import { type SSR, type MediaTraceContext } from '@atlaskit/media-common';
 import { type MediaFileArtifacts } from '@atlaskit/media-state';
 import { type MediaItemDetails, type MediaFile, type MediaUpload } from '../../models/media';
 import { type ClientOptions, type RequestHeaders, type RequestMethod, type RequestParams, type RequestMetadata } from '../../utils/request/types';
@@ -37,6 +37,7 @@ export type MediaStoreRequestOptions = RequestMetadata & {
     readonly clientOptions?: ClientOptions;
     readonly traceContext?: MediaTraceContext;
     readonly ChunkhashAlgorithm?: ChunkHashAlgorithm;
+    readonly addMediaClientParam?: boolean;
 };
 export type MediaStoreCreateFileFromUploadParams = {
     readonly collection?: string;
@@ -94,6 +95,8 @@ export type MediaStoreGetFileImageParams = {
     readonly mode?: 'fit' | 'full-fit' | 'crop';
     readonly upscale?: boolean;
     readonly 'max-age'?: number;
+    readonly source?: string;
+    readonly ssr?: SSR;
 };
 export interface SourceFile {
     id: string;

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

@@ -1,5 +1,5 @@
 import { type Auth, type AsapBasedAuth, type AuthContext, type ClientAltBasedAuth } from '@atlaskit/media-core';
-import { type MediaTraceContext } from '@atlaskit/media-common';
+import { type SSR, type MediaTraceContext } from '@atlaskit/media-common';
 import { type MediaFileArtifacts } from '@atlaskit/media-state';
 import { type MediaItemDetails, type MediaFile, type MediaUpload } from '../../models/media';
 import { type ClientOptions, type RequestHeaders, type RequestMethod, type RequestParams, type RequestMetadata } from '../../utils/request/types';
@@ -37,6 +37,7 @@ export type MediaStoreRequestOptions = RequestMetadata & {
     readonly clientOptions?: ClientOptions;
     readonly traceContext?: MediaTraceContext;
     readonly ChunkhashAlgorithm?: ChunkHashAlgorithm;
+    readonly addMediaClientParam?: boolean;
 };
 export type MediaStoreCreateFileFromUploadParams = {
     readonly collection?: string;
@@ -94,6 +95,8 @@ export type MediaStoreGetFileImageParams = {
     readonly mode?: 'fit' | 'full-fit' | 'crop';
     readonly upscale?: boolean;
     readonly 'max-age'?: number;
+    readonly source?: string;
+    readonly ssr?: SSR;
 };
 export interface SourceFile {
     id: string;

package/example-helpers/stylesWrapper.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { type ChangeEvent, type ReactNode } from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-client",
-	"version": "27.3.3",
+	"version": "27.4.0",
 	"description": "Media API Web Client Library",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/chunkinator": "^6.0.0",
-		"@atlaskit/media-common": "^11.3.0",
+		"@atlaskit/media-common": "^11.4.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"dataloader": "^2.0.0",
@@ -53,14 +53,14 @@
 		"xstate": "4.20.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/media-core": "^34.1.2",
+		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-state": "^1.0.0"
 	},
 	"devDependencies": {
-		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-state": "^1.1.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlassian/feature-flags-test-utils": "0.2.3",
 		"@emotion/react": "^11.7.1",
 		"@types/deep-equal": "^1.0.1",
@@ -89,6 +89,9 @@
 		},
 		"platform.media-cdn-delivery": {
 			"type": "boolean"
+		},
+		"platform.media-card-performance-observer_lgc7b": {
+			"type": "boolean"
 		}
 	}
 }