@atlaskit/media-client 27.3.4 → 27.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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; }
@@ -441,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:
@@ -595,7 +596,9 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
           body,
           clientOptions,
           traceContext,
+          addMediaClientParam,
           auth,
+          clientId,
           extendedTraceContext,
           response,
           _args12 = arguments;
@@ -608,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/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';
@@ -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/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';
@@ -434,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:
@@ -588,7 +590,9 @@ export var MediaStore = /*#__PURE__*/function () {
           body,
           clientOptions,
           traceContext,
+          addMediaClientParam,
           auth,
+          clientId,
           extendedTraceContext,
           response,
           _args12 = arguments;
@@ -601,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/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.4",
+	"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"
 		}
 	}
 }