@atlaskit/media-client 27.0.1 → 27.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-client
 
+## 27.2.0
+
+### Minor Changes
+
+-   [#101187](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101187)
+    [`021415681643`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/021415681643) -
+    Added SVG sample files
+
+## 27.1.0
+
+### Minor Changes
+
+-   [#103718](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103718)
+    [`5bdb1cb0f2b7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5bdb1cb0f2b7) -
+    CXP-3328 Integrate CDN delivery to media-client
+
 ## 27.0.1
 
 ### Patch Changes

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

@@ -17,6 +17,7 @@ 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; }
 var MEDIA_API_REGION = 'media-api-region';
@@ -290,7 +291,8 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
         params: extendImageParams(params),
         auth: auth
       };
-      return (0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/image"), options);
+      var imageEndpoint = (0, _platformFeatureFlags.getBooleanFF)('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+      return (0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options);
     }
   }, {
     key: "getFileBinary",
@@ -298,6 +300,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
       var _getFileBinary = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(id, collectionName) {
         var maxAge,
           headers,
+          binaryEndpoint,
           metadata,
           options,
           _args5 = arguments;
@@ -306,9 +309,10 @@ 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';
               metadata = {
                 method: 'GET',
-                endpoint: '/file/{fileId}/binary'
+                endpoint: "/file/{fileId}/".concat(binaryEndpoint)
               };
               options = _objectSpread(_objectSpread({}, metadata), {}, {
                 authContext: {
@@ -319,8 +323,8 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                   'max-age': "".concat(maxAge)
                 }
               });
-              return _context5.abrupt("return", this.request("/file/".concat(id, "/binary"), options).then((0, _helpers.createMapResponseToBlob)(metadata)));
-            case 5:
+              return _context5.abrupt("return", this.request("/file/".concat(id, "/").concat(binaryEndpoint), options).then((0, _helpers.createMapResponseToBlob)(metadata)));
+            case 6:
             case "end":
               return _context5.stop();
           }
@@ -338,6 +342,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
         var maxAge,
           auth,
           options,
+          binaryEndpoint,
           _args6 = arguments;
         return _regenerator.default.wrap(function _callee6$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
@@ -357,8 +362,9 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context6.abrupt("return", (0, _helpers.createUrl)("".concat(auth.baseUrl, "/file/").concat(id, "/binary"), options));
-            case 6:
+              binaryEndpoint = (0, _platformFeatureFlags.getBooleanFF)('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":
               return _context6.stop();
           }
@@ -384,12 +390,22 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
               }
               throw new Error("artifact ".concat(artifactName, " not found"));
             case 3:
-              _context7.next = 5;
+              if (artifactUrl.includes('media-cdn')) {
+                _context7.next = 9;
+                break;
+              }
+              _context7.next = 6;
               return this.resolveAuth({
                 collectionName: collectionName
               });
-            case 5:
-              auth = _context7.sent;
+            case 6:
+              _context7.t0 = _context7.sent;
+              _context7.next = 10;
+              break;
+            case 9:
+              _context7.t0 = undefined;
+            case 10:
+              auth = _context7.t0;
               options = {
                 params: {
                   collection: collectionName,
@@ -397,8 +413,8 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context7.abrupt("return", (0, _helpers.createUrl)("".concat(auth.baseUrl).concat(artifactUrl), options));
-            case 8:
+              return _context7.abrupt("return", (0, _helpers.createUrl)(artifactUrl, options));
+            case 13:
             case "end":
               return _context7.stop();
           }
@@ -413,7 +429,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
     key: "getImage",
     value: function () {
       var _getImage = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(id, params, controller, fetchMaxRes, traceContext) {
-        var isWebpSupported, headers, metadata, options;
+        var isWebpSupported, headers, imageEndpoint, metadata, options;
         return _regenerator.default.wrap(function _callee8$(_context8) {
           while (1) switch (_context8.prev = _context8.next) {
             case 0:
@@ -423,9 +439,10 @@ 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';
               metadata = {
                 method: 'GET',
-                endpoint: '/file/{fileId}/image'
+                endpoint: "/file/{fileId}/".concat(imageEndpoint)
               };
               options = _objectSpread(_objectSpread({}, metadata), {}, {
                 authContext: {
@@ -435,8 +452,8 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 headers: headers,
                 traceContext: traceContext
               });
-              return _context8.abrupt("return", this.request("/file/".concat(id, "/image"), options, controller).then((0, _helpers.createMapResponseToBlob)(metadata)));
-            case 6:
+              return _context8.abrupt("return", this.request("/file/".concat(id, "/").concat(imageEndpoint), options, controller).then((0, _helpers.createMapResponseToBlob)(metadata)));
+            case 7:
             case "end":
               return _context8.stop();
           }

package/dist/cjs/models/artifacts.js

@@ -5,9 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getArtifactUrl = void 0;
 var getArtifactUrl = exports.getArtifactUrl = function getArtifactUrl(artifacts, prop) {
-  var artifact = artifacts[prop];
-  if (!artifact || !artifact.url) {
-    return undefined;
-  }
-  return artifact.url;
+  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);
 };

package/dist/cjs/utils/request/helpers.js

@@ -75,7 +75,7 @@ function mapAuthToRequestHeaders(auth) {
 function createUrl(url, _ref2) {
   var params = _ref2.params,
     auth = _ref2.auth;
-  var parsedUrl = new URL(url);
+  var parsedUrl = new URL(url, auth === null || auth === void 0 ? void 0 : auth.baseUrl);
   var authParams = auth && (0, _authQueryParameters.mapAuthToQueryParameters)(auth) || {};
   var paramsToAppend = _objectSpread(_objectSpread({}, params), authParams);
   Object.entries(paramsToAppend).filter(function (_ref3) {

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

@@ -6,6 +6,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';
 const MEDIA_API_REGION = 'media-api-region';
 const MEDIA_API_ENVIRONMENT = 'media-api-environment';
 const extendImageParams = (params, fetchMaxRes = false) => {
@@ -184,13 +185,15 @@ export class MediaStore {
       params: extendImageParams(params),
       auth
     };
-    return createUrl(`${auth.baseUrl}/file/${id}/image`, options);
+    const imageEndpoint = getBooleanFF('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 metadata = {
       method: 'GET',
-      endpoint: '/file/{fileId}/binary'
+      endpoint: `/file/{fileId}/${binaryEndpoint}`
     };
     const options = {
       ...metadata,
@@ -202,7 +205,7 @@ export class MediaStore {
         'max-age': `${maxAge}`
       }
     };
-    return this.request(`/file/${id}/binary`, options).then(createMapResponseToBlob(metadata));
+    return this.request(`/file/${id}/${binaryEndpoint}`, options).then(createMapResponseToBlob(metadata));
   }
   async getFileBinaryURL(id, collectionName, maxAge = FILE_CACHE_MAX_AGE) {
     const auth = await this.resolveAuth({
@@ -216,16 +219,17 @@ export class MediaStore {
       },
       auth
     };
-    return createUrl(`${auth.baseUrl}/file/${id}/binary`, options);
+    const binaryEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
+    return createUrl(`${auth.baseUrl}/file/${id}/${binaryEndpoint}`, options);
   }
   async getArtifactURL(artifacts, artifactName, collectionName) {
     const artifactUrl = getArtifactUrl(artifacts, artifactName);
     if (!artifactUrl) {
       throw new Error(`artifact ${artifactName} not found`);
     }
-    const auth = await this.resolveAuth({
+    const auth = !artifactUrl.includes('media-cdn') ? await this.resolveAuth({
       collectionName
-    });
+    }) : undefined;
     const options = {
       params: {
         collection: collectionName,
@@ -233,7 +237,7 @@ export class MediaStore {
       },
       auth
     };
-    return createUrl(`${auth.baseUrl}${artifactUrl}`, options);
+    return createUrl(artifactUrl, options);
   }
   async getImage(id, params, controller, fetchMaxRes, traceContext) {
     // TODO add checkWebpSupport() back https://product-fabric.atlassian.net/browse/MPT-584
@@ -242,9 +246,10 @@ export class MediaStore {
     if (isWebpSupported) {
       headers.accept = 'image/webp,image/*,*/*;q=0.8';
     }
+    const imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
     const metadata = {
       method: 'GET',
-      endpoint: '/file/{fileId}/image'
+      endpoint: `/file/{fileId}/${imageEndpoint}`
     };
     const options = {
       ...metadata,
@@ -255,7 +260,7 @@ export class MediaStore {
       headers,
       traceContext
     };
-    return this.request(`/file/${id}/image`, options, controller).then(createMapResponseToBlob(metadata));
+    return this.request(`/file/${id}/${imageEndpoint}`, options, controller).then(createMapResponseToBlob(metadata));
   }
   async getItems(ids, collectionName, traceContext) {
     const descriptors = ids.map(id => ({

package/dist/es2019/models/artifacts.js

@@ -1,7 +1,4 @@
 export const getArtifactUrl = (artifacts, prop) => {
-  const artifact = artifacts[prop];
-  if (!artifact || !artifact.url) {
-    return undefined;
-  }
-  return artifact.url;
+  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);
 };

package/dist/es2019/utils/request/helpers.js

@@ -47,7 +47,7 @@ export function createUrl(url, {
   params,
   auth
 }) {
-  const parsedUrl = new URL(url);
+  const parsedUrl = new URL(url, auth === null || auth === void 0 ? void 0 : auth.baseUrl);
   const authParams = auth && mapAuthToQueryParameters(auth) || {};
   const paramsToAppend = {
     ...params,

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

@@ -12,6 +12,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';
 var MEDIA_API_REGION = 'media-api-region';
 var MEDIA_API_ENVIRONMENT = 'media-api-environment';
 var extendImageParams = function extendImageParams(params) {
@@ -283,7 +284,8 @@ export var MediaStore = /*#__PURE__*/function () {
         params: extendImageParams(params),
         auth: auth
       };
-      return createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/image"), options);
+      var imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
+      return createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options);
     }
   }, {
     key: "getFileBinary",
@@ -291,6 +293,7 @@ export var MediaStore = /*#__PURE__*/function () {
       var _getFileBinary = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(id, collectionName) {
         var maxAge,
           headers,
+          binaryEndpoint,
           metadata,
           options,
           _args5 = arguments;
@@ -299,9 +302,10 @@ 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';
               metadata = {
                 method: 'GET',
-                endpoint: '/file/{fileId}/binary'
+                endpoint: "/file/{fileId}/".concat(binaryEndpoint)
               };
               options = _objectSpread(_objectSpread({}, metadata), {}, {
                 authContext: {
@@ -312,8 +316,8 @@ export var MediaStore = /*#__PURE__*/function () {
                   'max-age': "".concat(maxAge)
                 }
               });
-              return _context5.abrupt("return", this.request("/file/".concat(id, "/binary"), options).then(createMapResponseToBlob(metadata)));
-            case 5:
+              return _context5.abrupt("return", this.request("/file/".concat(id, "/").concat(binaryEndpoint), options).then(createMapResponseToBlob(metadata)));
+            case 6:
             case "end":
               return _context5.stop();
           }
@@ -331,6 +335,7 @@ export var MediaStore = /*#__PURE__*/function () {
         var maxAge,
           auth,
           options,
+          binaryEndpoint,
           _args6 = arguments;
         return _regeneratorRuntime.wrap(function _callee6$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
@@ -350,8 +355,9 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context6.abrupt("return", createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/binary"), options));
-            case 6:
+              binaryEndpoint = getBooleanFF('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":
               return _context6.stop();
           }
@@ -377,12 +383,22 @@ export var MediaStore = /*#__PURE__*/function () {
               }
               throw new Error("artifact ".concat(artifactName, " not found"));
             case 3:
-              _context7.next = 5;
+              if (artifactUrl.includes('media-cdn')) {
+                _context7.next = 9;
+                break;
+              }
+              _context7.next = 6;
               return this.resolveAuth({
                 collectionName: collectionName
               });
-            case 5:
-              auth = _context7.sent;
+            case 6:
+              _context7.t0 = _context7.sent;
+              _context7.next = 10;
+              break;
+            case 9:
+              _context7.t0 = undefined;
+            case 10:
+              auth = _context7.t0;
               options = {
                 params: {
                   collection: collectionName,
@@ -390,8 +406,8 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context7.abrupt("return", createUrl("".concat(auth.baseUrl).concat(artifactUrl), options));
-            case 8:
+              return _context7.abrupt("return", createUrl(artifactUrl, options));
+            case 13:
             case "end":
               return _context7.stop();
           }
@@ -406,7 +422,7 @@ export var MediaStore = /*#__PURE__*/function () {
     key: "getImage",
     value: function () {
       var _getImage = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(id, params, controller, fetchMaxRes, traceContext) {
-        var isWebpSupported, headers, metadata, options;
+        var isWebpSupported, headers, imageEndpoint, metadata, options;
         return _regeneratorRuntime.wrap(function _callee8$(_context8) {
           while (1) switch (_context8.prev = _context8.next) {
             case 0:
@@ -416,9 +432,10 @@ export var MediaStore = /*#__PURE__*/function () {
               if (isWebpSupported) {
                 headers.accept = 'image/webp,image/*,*/*;q=0.8';
               }
+              imageEndpoint = getBooleanFF('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
               metadata = {
                 method: 'GET',
-                endpoint: '/file/{fileId}/image'
+                endpoint: "/file/{fileId}/".concat(imageEndpoint)
               };
               options = _objectSpread(_objectSpread({}, metadata), {}, {
                 authContext: {
@@ -428,8 +445,8 @@ export var MediaStore = /*#__PURE__*/function () {
                 headers: headers,
                 traceContext: traceContext
               });
-              return _context8.abrupt("return", this.request("/file/".concat(id, "/image"), options, controller).then(createMapResponseToBlob(metadata)));
-            case 6:
+              return _context8.abrupt("return", this.request("/file/".concat(id, "/").concat(imageEndpoint), options, controller).then(createMapResponseToBlob(metadata)));
+            case 7:
             case "end":
               return _context8.stop();
           }

package/dist/esm/models/artifacts.js

@@ -1,7 +1,4 @@
 export var getArtifactUrl = function getArtifactUrl(artifacts, prop) {
-  var artifact = artifacts[prop];
-  if (!artifact || !artifact.url) {
-    return undefined;
-  }
-  return artifact.url;
+  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);
 };

package/dist/esm/utils/request/helpers.js

@@ -53,7 +53,7 @@ export function mapAuthToRequestHeaders(auth) {
 export function createUrl(url, _ref2) {
   var params = _ref2.params,
     auth = _ref2.auth;
-  var parsedUrl = new URL(url);
+  var parsedUrl = new URL(url, auth === null || auth === void 0 ? void 0 : auth.baseUrl);
   var authParams = auth && mapAuthToQueryParameters(auth) || {};
   var paramsToAppend = _objectSpread(_objectSpread({}, params), authParams);
   Object.entries(paramsToAppend).filter(function (_ref3) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-client",
-  "version": "27.0.1",
+  "version": "27.2.0",
   "description": "Media API Web Client Library",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -58,7 +58,7 @@
   },
   "devDependencies": {
     "@atlaskit/media-core": "^34.2.0",
-    "@atlaskit/media-state": "^1.0.0",
+    "@atlaskit/media-state": "^1.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tokens": "^1.49.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -88,6 +88,9 @@
   "platform-feature-flags": {
     "platform.media-svg-rendering": {
       "type": "boolean"
+    },
+    "platform.media-cdn-delivery": {
+      "type": "boolean"
     }
   }
 }