@atlaskit/media-client 27.3.4 → 27.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-client
 
+## 27.5.0
+
+### Minor Changes
+
+- [#132649](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132649)
+  [`ab55ae1b17d7d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab55ae1b17d7d) -
+  add media cdn single host redirect
+
+## 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

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,14 @@ 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 _mediaCdn = require("../../utils/mediaCdn");
 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; }
@@ -292,7 +293,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
         auth: auth
       };
       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);
+      return (0, _mediaCdn.mapToMediaCdnUrl)((0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options));
     }
   }, {
     key: "getFileBinary",
@@ -324,7 +325,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                   'max-age': "".concat(maxAge)
                 }
               });
-              return _context5.abrupt("return", this.request("/file/".concat(id, "/").concat(binaryEndpoint), options).then((0, _helpers.createMapResponseToBlob)(metadata)));
+              return _context5.abrupt("return", this.request("/file/".concat(id, "/").concat(binaryEndpoint), options, undefined, true).then((0, _helpers.createMapResponseToBlob)(metadata)));
             case 6:
             case "end":
               return _context5.stop();
@@ -364,7 +365,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 auth: auth
               };
               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));
+              return _context6.abrupt("return", (0, _mediaCdn.mapToMediaCdnUrl)((0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(binaryEndpoint), options)));
             case 7:
             case "end":
               return _context6.stop();
@@ -441,9 +442,10 @@ 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)));
+              return _context8.abrupt("return", this.request("/file/".concat(id, "/").concat(imageEndpoint), options, controller, true).then((0, _helpers.createMapResponseToBlob)(metadata)));
             case 7:
             case "end":
               return _context8.stop();
@@ -587,6 +589,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
       var _request2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12(path) {
         var options,
           controller,
+          useMediaCdn,
           method,
           endpoint,
           authContext,
@@ -595,8 +598,11 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
           body,
           clientOptions,
           traceContext,
+          addMediaClientParam,
           auth,
+          clientId,
           extendedTraceContext,
+          url,
           response,
           _args12 = arguments;
         return _regenerator.default.wrap(function _callee12$(_context12) {
@@ -608,31 +614,39 @@ 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;
-              _context12.next = 5;
+              useMediaCdn = _args12.length > 3 ? _args12[3] : 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, addMediaClientParam = options.addMediaClientParam;
+              _context12.next = 6;
               return this.resolveAuth(authContext);
-            case 5:
+            case 6:
               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;
-              return (0, _request3.request)("".concat(auth.baseUrl).concat(path), {
+              url = "".concat(auth.baseUrl).concat(path);
+              if (useMediaCdn) {
+                url = (0, _mediaCdn.mapToMediaCdnUrl)(url);
+              }
+              _context12.next = 13;
+              return (0, _request3.request)(url, {
                 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 13:
               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 17:
             case "end":
               return _context12.stop();
           }

package/dist/cjs/models/artifacts.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getArtifactUrl = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _mediaCdn = require("../utils/mediaCdn");
 var getArtifactUrl = exports.getArtifactUrl = function getArtifactUrl(artifacts, prop) {
   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 (0, _mediaCdn.mapToMediaCdnUrl)("".concat((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.url, "/cdn"));
   }
   return (_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url;
 };

package/dist/cjs/utils/mediaCdn.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MEDIA_CDN_MAP = void 0;
+exports.mapToMediaCdnUrl = mapToMediaCdnUrl;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var MEDIA_CDN_MAP = exports.MEDIA_CDN_MAP = {
+  'api.media.atlassian.com': 'media-cdn.atlassian.com',
+  'media.staging.atl-paas.net': 'media-cdn.stg.atlassian.com'
+};
+function mapToMediaCdnUrl(url) {
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if ((0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') && (0, _platformFeatureFlags.fg)('platform.media-cdn-single-host')) {
+    try {
+      var parsedUrl = new URL(url);
+      var cdnHost = MEDIA_CDN_MAP[parsedUrl.host];
+
+      // If no mapping is found, return the original URL
+      if (!cdnHost) {
+        return url;
+      }
+
+      // Replace the host with the CDN host in the original URL
+      parsedUrl.host = cdnHost;
+      return parsedUrl.toString();
+    } catch (error) {
+      return url;
+    }
+  }
+  return 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,9 +1,11 @@
 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';
 import { request } from '../../utils/request';
 import { createUrl, createMapResponseToJson, createMapResponseToBlob } from '../../utils/request/helpers';
+import { mapToMediaCdnUrl } from '../../utils/mediaCdn';
 import { resolveAuth, resolveInitialAuth } from './resolveAuth';
 import { ChunkHashAlgorithm } from '@atlaskit/media-core';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -186,7 +188,7 @@ export class MediaStore {
       auth
     };
     const imageEndpoint = fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
-    return createUrl(`${auth.baseUrl}/file/${id}/${imageEndpoint}`, options);
+    return mapToMediaCdnUrl(createUrl(`${auth.baseUrl}/file/${id}/${imageEndpoint}`, options));
   }
   async getFileBinary(id, collectionName, maxAge = FILE_CACHE_MAX_AGE) {
     const headers = {};
@@ -206,7 +208,7 @@ export class MediaStore {
         'max-age': `${maxAge}`
       }
     };
-    return this.request(`/file/${id}/${binaryEndpoint}`, options).then(createMapResponseToBlob(metadata));
+    return this.request(`/file/${id}/${binaryEndpoint}`, options, undefined, true).then(createMapResponseToBlob(metadata));
   }
   async getFileBinaryURL(id, collectionName, maxAge = FILE_CACHE_MAX_AGE) {
     const auth = await this.resolveAuth({
@@ -221,7 +223,7 @@ export class MediaStore {
       auth
     };
     const binaryEndpoint = fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
-    return createUrl(`${auth.baseUrl}/file/${id}/${binaryEndpoint}`, options);
+    return mapToMediaCdnUrl(createUrl(`${auth.baseUrl}/file/${id}/${binaryEndpoint}`, options));
   }
   async getArtifactURL(artifacts, artifactName, collectionName) {
     const artifactUrl = getArtifactUrl(artifacts, artifactName);
@@ -259,9 +261,10 @@ 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));
+    return this.request(`/file/${id}/${imageEndpoint}`, options, controller, true).then(createMapResponseToBlob(metadata));
   }
   async getItems(ids, collectionName, traceContext) {
     const descriptors = ids.map(id => ({
@@ -341,7 +344,7 @@ export class MediaStore {
     method: 'GET',
     endpoint: undefined,
     authContext: {}
-  }, controller) {
+  }, controller, useMediaCdn) {
     const {
       method,
       endpoint,
@@ -350,18 +353,27 @@ 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)
     } : undefined;
-    const response = await request(`${auth.baseUrl}${path}`, {
+    let url = `${auth.baseUrl}${path}`;
+    if (useMediaCdn) {
+      url = mapToMediaCdnUrl(url);
+    }
+    const response = await request(url, {
       method,
       endpoint,
       auth,
-      params,
+      params: addMediaClientParam ? {
+        ...params,
+        clientId
+      } : params,
       headers,
       body,
       clientOptions,

package/dist/es2019/models/artifacts.js

@@ -1,9 +1,10 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mapToMediaCdnUrl } from '../utils/mediaCdn';
 export const getArtifactUrl = (artifacts, prop) => {
   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 mapToMediaCdnUrl(`${(_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.url}/cdn`);
   }
   return (_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url;
 };

package/dist/es2019/utils/mediaCdn.js

@@ -0,0 +1,26 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+export const MEDIA_CDN_MAP = {
+  'api.media.atlassian.com': 'media-cdn.atlassian.com',
+  'media.staging.atl-paas.net': 'media-cdn.stg.atlassian.com'
+};
+export function mapToMediaCdnUrl(url) {
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if (fg('platform.media-cdn-delivery') && fg('platform.media-cdn-single-host')) {
+    try {
+      const parsedUrl = new URL(url);
+      const cdnHost = MEDIA_CDN_MAP[parsedUrl.host];
+
+      // If no mapping is found, return the original URL
+      if (!cdnHost) {
+        return url;
+      }
+
+      // Replace the host with the CDN host in the original URL
+      parsedUrl.host = cdnHost;
+      return parsedUrl.toString();
+    } catch (error) {
+      return url;
+    }
+  }
+  return 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,11 +5,13 @@ 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';
 import { request as _request } from '../../utils/request';
 import { createUrl, createMapResponseToJson, createMapResponseToBlob } from '../../utils/request/helpers';
+import { mapToMediaCdnUrl } from '../../utils/mediaCdn';
 import { resolveAuth, resolveInitialAuth } from './resolveAuth';
 import { ChunkHashAlgorithm } from '@atlaskit/media-core';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -285,7 +287,7 @@ export var MediaStore = /*#__PURE__*/function () {
         auth: auth
       };
       var imageEndpoint = fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
-      return createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options);
+      return mapToMediaCdnUrl(createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options));
     }
   }, {
     key: "getFileBinary",
@@ -317,7 +319,7 @@ export var MediaStore = /*#__PURE__*/function () {
                   'max-age': "".concat(maxAge)
                 }
               });
-              return _context5.abrupt("return", this.request("/file/".concat(id, "/").concat(binaryEndpoint), options).then(createMapResponseToBlob(metadata)));
+              return _context5.abrupt("return", this.request("/file/".concat(id, "/").concat(binaryEndpoint), options, undefined, true).then(createMapResponseToBlob(metadata)));
             case 6:
             case "end":
               return _context5.stop();
@@ -357,7 +359,7 @@ export var MediaStore = /*#__PURE__*/function () {
                 auth: auth
               };
               binaryEndpoint = fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
-              return _context6.abrupt("return", createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(binaryEndpoint), options));
+              return _context6.abrupt("return", mapToMediaCdnUrl(createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(binaryEndpoint), options)));
             case 7:
             case "end":
               return _context6.stop();
@@ -434,9 +436,10 @@ 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)));
+              return _context8.abrupt("return", this.request("/file/".concat(id, "/").concat(imageEndpoint), options, controller, true).then(createMapResponseToBlob(metadata)));
             case 7:
             case "end":
               return _context8.stop();
@@ -580,6 +583,7 @@ export var MediaStore = /*#__PURE__*/function () {
       var _request2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12(path) {
         var options,
           controller,
+          useMediaCdn,
           method,
           endpoint,
           authContext,
@@ -588,8 +592,11 @@ export var MediaStore = /*#__PURE__*/function () {
           body,
           clientOptions,
           traceContext,
+          addMediaClientParam,
           auth,
+          clientId,
           extendedTraceContext,
+          url,
           response,
           _args12 = arguments;
         return _regeneratorRuntime.wrap(function _callee12$(_context12) {
@@ -601,31 +608,39 @@ 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;
-              _context12.next = 5;
+              useMediaCdn = _args12.length > 3 ? _args12[3] : 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, addMediaClientParam = options.addMediaClientParam;
+              _context12.next = 6;
               return this.resolveAuth(authContext);
-            case 5:
+            case 6:
               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;
-              return _request("".concat(auth.baseUrl).concat(path), {
+              url = "".concat(auth.baseUrl).concat(path);
+              if (useMediaCdn) {
+                url = mapToMediaCdnUrl(url);
+              }
+              _context12.next = 13;
+              return _request(url, {
                 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 13:
               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 17:
             case "end":
               return _context12.stop();
           }

package/dist/esm/models/artifacts.js

@@ -1,9 +1,10 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { mapToMediaCdnUrl } from '../utils/mediaCdn';
 export var getArtifactUrl = function getArtifactUrl(artifacts, prop) {
   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 mapToMediaCdnUrl("".concat((_artifacts$prop = artifacts[prop]) === null || _artifacts$prop === void 0 ? void 0 : _artifacts$prop.url, "/cdn"));
   }
   return (_artifacts$prop2 = artifacts[prop]) === null || _artifacts$prop2 === void 0 ? void 0 : _artifacts$prop2.url;
 };

package/dist/esm/utils/mediaCdn.js

@@ -0,0 +1,26 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+export var MEDIA_CDN_MAP = {
+  'api.media.atlassian.com': 'media-cdn.atlassian.com',
+  'media.staging.atl-paas.net': 'media-cdn.stg.atlassian.com'
+};
+export function mapToMediaCdnUrl(url) {
+  // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+  if (fg('platform.media-cdn-delivery') && fg('platform.media-cdn-single-host')) {
+    try {
+      var parsedUrl = new URL(url);
+      var cdnHost = MEDIA_CDN_MAP[parsedUrl.host];
+
+      // If no mapping is found, return the original URL
+      if (!cdnHost) {
+        return url;
+      }
+
+      // Replace the host with the CDN host in the original URL
+      parsedUrl.host = cdnHost;
+      return parsedUrl.toString();
+    } catch (error) {
+      return url;
+    }
+  }
+  return url;
+}

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

@@ -28,7 +28,7 @@ export declare class MediaStore implements MediaApi {
     }>;
     appendChunksToUpload(uploadId: string, body: AppendChunksToUploadRequestBody, collectionName?: string, traceContext?: MediaTraceContext): Promise<void>;
     copyFileWithToken(body: MediaStoreCopyFileWithTokenBody, params: MediaStoreCopyFileWithTokenParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaFile>>;
-    request(path: string, options?: MediaStoreRequestOptions, controller?: AbortController): Promise<Response>;
+    request(path: string, options?: MediaStoreRequestOptions, controller?: AbortController, useMediaCdn?: boolean): Promise<Response>;
     resolveAuth: (authContext?: AuthContext) => Promise<Auth>;
     resolveInitialAuth: () => Auth;
     get chunkHashAlgorithm(): ChunkHashAlgorithm;

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/utils/mediaCdn.d.ts

@@ -0,0 +1,4 @@
+export declare const MEDIA_CDN_MAP: {
+    [key: string]: string;
+};
+export declare function mapToMediaCdnUrl(url: string): string;

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

@@ -28,7 +28,7 @@ export declare class MediaStore implements MediaApi {
     }>;
     appendChunksToUpload(uploadId: string, body: AppendChunksToUploadRequestBody, collectionName?: string, traceContext?: MediaTraceContext): Promise<void>;
     copyFileWithToken(body: MediaStoreCopyFileWithTokenBody, params: MediaStoreCopyFileWithTokenParams, traceContext?: MediaTraceContext): Promise<MediaStoreResponse<MediaFile>>;
-    request(path: string, options?: MediaStoreRequestOptions, controller?: AbortController): Promise<Response>;
+    request(path: string, options?: MediaStoreRequestOptions, controller?: AbortController, useMediaCdn?: boolean): Promise<Response>;
     resolveAuth: (authContext?: AuthContext) => Promise<Auth>;
     resolveInitialAuth: () => Auth;
     get chunkHashAlgorithm(): ChunkHashAlgorithm;

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/dist/types-ts4.5/utils/mediaCdn.d.ts

@@ -0,0 +1,4 @@
+export declare const MEDIA_CDN_MAP: {
+    [key: string]: string;
+};
+export declare function mapToMediaCdnUrl(url: string): 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.4",
+	"version": "27.5.0",
 	"description": "Media API Web Client Library",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,8 +36,8 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/chunkinator": "^6.0.0",
-		"@atlaskit/media-common": "^11.3.0",
+		"@atlaskit/chunkinator": "^6.1.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,12 @@
 		},
 		"platform.media-cdn-delivery": {
 			"type": "boolean"
+		},
+		"platform.media-card-performance-observer_lgc7b": {
+			"type": "boolean"
+		},
+		"platform.media-cdn-single-host": {
+			"type": "boolean"
 		}
 	}
 }