@atlaskit/media-client 27.6.1 → 28.0.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/media-client
 
+## 28.0.1
+
+### Patch Changes
+
+- [#147039](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147039)
+  [`f29b4d6055c5e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f29b4d6055c5e) -
+  fix media cdn errors caused by excessive media token length
+
+## 28.0.0
+
+### Major Changes
+
+- [#139803](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139803)
+  [`573e2dccbc940`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/573e2dccbc940) -
+  BREAKING CHANGE: Attribute `preview` in File State is now set unnconditionally in the file state.
+  No longer when it's supported by the broswer. If your application relies on this attribute, check
+  the file mimetype to ensure that you are using it properly. This change was released in `v27.0.0`
+  behind a feature flag. Now, it is a permanent change.
+
 ## 27.6.1
 
 ### Patch Changes

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

@@ -47,7 +47,6 @@ var _shouldFetchRemoteFileStates = require("../../utils/shouldFetchRemoteFileSta
 var _polling = require("../../utils/polling");
 var _detectEmptyFile = require("../../utils/detectEmptyFile");
 var _mediaState = require("@atlaskit/media-state");
-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 FileFetcherImpl = exports.FileFetcherImpl = /*#__PURE__*/function () {
@@ -152,12 +151,10 @@ var FileFetcherImpl = exports.FileFetcherImpl = /*#__PURE__*/function () {
       if (content instanceof Blob) {
         size = content.size;
         mimeType = content.type;
-        if ((0, _mediaTypeUtils.isMimeTypeSupportedByBrowser)(content.type) || (0, _platformFeatureFlags.fg)('platform.media-svg-rendering')) {
-          preview = {
-            value: content,
-            origin: 'local'
-          };
-        }
+        preview = {
+          value: content,
+          origin: 'local'
+        };
       }
       var mediaType = (0, _getMediaTypeFromUploadableFile.getMediaTypeFromUploadableFile)(file);
       return {

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

@@ -294,7 +294,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
         auth: auth
       };
       var imageEndpoint = !(0, _isFedRamp.isFedRamp)() && (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
-      return (0, _mediaCdn.mapToMediaCdnUrl)((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), auth.token);
     }
   }, {
     key: "getFileBinary",
@@ -366,7 +366,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 auth: auth
               };
               binaryEndpoint = !(0, _isFedRamp.isFedRamp)() && (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
-              return _context6.abrupt("return", (0, _mediaCdn.mapToMediaCdnUrl)((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), auth.token));
             case 7:
             case "end":
               return _context6.stop();
@@ -406,7 +406,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context7.abrupt("return", (0, _helpers.createUrl)(artifactUrl, options));
+              return _context7.abrupt("return", (0, _helpers.createUrl)((0, _mediaCdn.mapToMediaCdnUrl)(artifactUrl, auth.token), options));
             case 8:
             case "end":
               return _context7.stop();
@@ -627,7 +627,7 @@ var MediaStore = exports.MediaStore = /*#__PURE__*/function () {
               }) : undefined;
               url = "".concat(auth.baseUrl).concat(path);
               if (useMediaCdn) {
-                url = (0, _mediaCdn.mapToMediaCdnUrl)(url);
+                url = (0, _mediaCdn.mapToMediaCdnUrl)(url, auth.token);
               }
               _context12.next = 13;
               return (0, _request3.request)(url, {

package/dist/cjs/models/artifacts.js

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

@@ -11,9 +11,19 @@ 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) {
+
+// Cloudfront has a hard limit of 8,192 bytes
+// https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html
+// Assuming other parts of the URL make up a max of ~1000 (in reality it's lower), the token can be ~7000
+var MEDIA_TOKEN_LENGTH_LIMIT = 7000;
+function mapToMediaCdnUrl(url, token) {
+  var _token$length;
+  var tokenLength = (_token$length = token === null || token === void 0 ? void 0 : token.length) !== null && _token$length !== void 0 ? _token$length : 0;
+  if ((0, _isFedRamp.isFedRamp)() || tokenLength > MEDIA_TOKEN_LENGTH_LIMIT) {
+    return url;
+  }
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  if (!(0, _isFedRamp.isFedRamp)() && (0, _platformFeatureFlags.fg)('platform.media-cdn-delivery') && (0, _platformFeatureFlags.fg)('platform.media-cdn-single-host')) {
+  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];

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

@@ -19,12 +19,11 @@ import { convertBase64ToBlob } from '../../utils/convertBase64ToBlob';
 import { toPromise, fromObservable } from '../../utils/mediaSubscribable';
 import { getDimensionsFromBlob } from '../../utils/getDimensionsFromBlob';
 import { createMediaSubject } from '../../utils/createMediaSubject';
-import { isMimeTypeSupportedByBrowser, getMediaTypeFromMimeType } from '@atlaskit/media-common/mediaTypeUtils';
+import { getMediaTypeFromMimeType } from '@atlaskit/media-common/mediaTypeUtils';
 import { shouldFetchRemoteFileStates } from '../../utils/shouldFetchRemoteFileStates';
 import { PollingFunction } from '../../utils/polling';
 import { isEmptyFile } from '../../utils/detectEmptyFile';
 import { mediaStore } from '@atlaskit/media-state';
-import { fg } from '@atlaskit/platform-feature-flags';
 export { isFileFetcherError, FileFetcherError } from './error';
 export class FileFetcherImpl {
   constructor(mediaApi, store = mediaStore) {
@@ -105,12 +104,10 @@ export class FileFetcherImpl {
       if (content instanceof Blob) {
         size = content.size;
         mimeType = content.type;
-        if (isMimeTypeSupportedByBrowser(content.type) || fg('platform.media-svg-rendering')) {
-          preview = {
-            value: content,
-            origin: 'local'
-          };
-        }
+        preview = {
+          value: content,
+          origin: 'local'
+        };
       }
       const mediaType = getMediaTypeFromUploadableFile(file);
       return {

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

@@ -189,7 +189,7 @@ export class MediaStore {
       auth
     };
     const imageEndpoint = !isFedRamp() && fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
-    return mapToMediaCdnUrl(createUrl(`${auth.baseUrl}/file/${id}/${imageEndpoint}`, options));
+    return mapToMediaCdnUrl(createUrl(`${auth.baseUrl}/file/${id}/${imageEndpoint}`, options), auth.token);
   }
   async getFileBinary(id, collectionName, maxAge = FILE_CACHE_MAX_AGE) {
     const headers = {};
@@ -224,7 +224,7 @@ export class MediaStore {
       auth
     };
     const binaryEndpoint = !isFedRamp() && fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
-    return mapToMediaCdnUrl(createUrl(`${auth.baseUrl}/file/${id}/${binaryEndpoint}`, options));
+    return mapToMediaCdnUrl(createUrl(`${auth.baseUrl}/file/${id}/${binaryEndpoint}`, options), auth.token);
   }
   async getArtifactURL(artifacts, artifactName, collectionName) {
     const artifactUrl = getArtifactUrl(artifacts, artifactName);
@@ -241,7 +241,7 @@ export class MediaStore {
       },
       auth
     };
-    return createUrl(artifactUrl, options);
+    return createUrl(mapToMediaCdnUrl(artifactUrl, auth.token), options);
   }
   async getImage(id, params, controller, fetchMaxRes, traceContext) {
     // TODO add checkWebpSupport() back https://product-fabric.atlassian.net/browse/MPT-584
@@ -365,7 +365,7 @@ export class MediaStore {
     } : undefined;
     let url = `${auth.baseUrl}${path}`;
     if (useMediaCdn) {
-      url = mapToMediaCdnUrl(url);
+      url = mapToMediaCdnUrl(url, auth.token);
     }
     const response = await request(url, {
       method,

package/dist/es2019/models/artifacts.js

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

@@ -4,9 +4,19 @@ 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) {
+
+// Cloudfront has a hard limit of 8,192 bytes
+// https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html
+// Assuming other parts of the URL make up a max of ~1000 (in reality it's lower), the token can be ~7000
+const MEDIA_TOKEN_LENGTH_LIMIT = 7000;
+export function mapToMediaCdnUrl(url, token) {
+  var _token$length;
+  const tokenLength = (_token$length = token === null || token === void 0 ? void 0 : token.length) !== null && _token$length !== void 0 ? _token$length : 0;
+  if (isFedRamp() || tokenLength > MEDIA_TOKEN_LENGTH_LIMIT) {
+    return url;
+  }
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  if (!isFedRamp() && fg('platform.media-cdn-delivery') && fg('platform.media-cdn-single-host')) {
+  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];

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

@@ -25,12 +25,11 @@ import { convertBase64ToBlob } from '../../utils/convertBase64ToBlob';
 import { toPromise, fromObservable } from '../../utils/mediaSubscribable';
 import { getDimensionsFromBlob } from '../../utils/getDimensionsFromBlob';
 import { createMediaSubject } from '../../utils/createMediaSubject';
-import { isMimeTypeSupportedByBrowser, getMediaTypeFromMimeType } from '@atlaskit/media-common/mediaTypeUtils';
+import { getMediaTypeFromMimeType } from '@atlaskit/media-common/mediaTypeUtils';
 import { shouldFetchRemoteFileStates } from '../../utils/shouldFetchRemoteFileStates';
 import { PollingFunction } from '../../utils/polling';
 import { isEmptyFile } from '../../utils/detectEmptyFile';
 import { mediaStore } from '@atlaskit/media-state';
-import { fg } from '@atlaskit/platform-feature-flags';
 export { isFileFetcherError, FileFetcherError } from './error';
 export var FileFetcherImpl = /*#__PURE__*/function () {
   function FileFetcherImpl(mediaApi) {
@@ -134,12 +133,10 @@ export var FileFetcherImpl = /*#__PURE__*/function () {
       if (content instanceof Blob) {
         size = content.size;
         mimeType = content.type;
-        if (isMimeTypeSupportedByBrowser(content.type) || fg('platform.media-svg-rendering')) {
-          preview = {
-            value: content,
-            origin: 'local'
-          };
-        }
+        preview = {
+          value: content,
+          origin: 'local'
+        };
       }
       var mediaType = getMediaTypeFromUploadableFile(file);
       return {

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

@@ -288,7 +288,7 @@ export var MediaStore = /*#__PURE__*/function () {
         auth: auth
       };
       var imageEndpoint = !isFedRamp() && fg('platform.media-cdn-delivery') ? 'image/cdn' : 'image';
-      return mapToMediaCdnUrl(createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options));
+      return mapToMediaCdnUrl(createUrl("".concat(auth.baseUrl, "/file/").concat(id, "/").concat(imageEndpoint), options), auth.token);
     }
   }, {
     key: "getFileBinary",
@@ -360,7 +360,7 @@ export var MediaStore = /*#__PURE__*/function () {
                 auth: auth
               };
               binaryEndpoint = !isFedRamp() && fg('platform.media-cdn-delivery') ? 'binary/cdn' : 'binary';
-              return _context6.abrupt("return", mapToMediaCdnUrl(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), auth.token));
             case 7:
             case "end":
               return _context6.stop();
@@ -400,7 +400,7 @@ export var MediaStore = /*#__PURE__*/function () {
                 },
                 auth: auth
               };
-              return _context7.abrupt("return", createUrl(artifactUrl, options));
+              return _context7.abrupt("return", createUrl(mapToMediaCdnUrl(artifactUrl, auth.token), options));
             case 8:
             case "end":
               return _context7.stop();
@@ -621,7 +621,7 @@ export var MediaStore = /*#__PURE__*/function () {
               }) : undefined;
               url = "".concat(auth.baseUrl).concat(path);
               if (useMediaCdn) {
-                url = mapToMediaCdnUrl(url);
+                url = mapToMediaCdnUrl(url, auth.token);
               }
               _context12.next = 13;
               return _request(url, {

package/dist/esm/models/artifacts.js

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

@@ -4,9 +4,19 @@ 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) {
+
+// Cloudfront has a hard limit of 8,192 bytes
+// https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-limits.html
+// Assuming other parts of the URL make up a max of ~1000 (in reality it's lower), the token can be ~7000
+var MEDIA_TOKEN_LENGTH_LIMIT = 7000;
+export function mapToMediaCdnUrl(url, token) {
+  var _token$length;
+  var tokenLength = (_token$length = token === null || token === void 0 ? void 0 : token.length) !== null && _token$length !== void 0 ? _token$length : 0;
+  if (isFedRamp() || tokenLength > MEDIA_TOKEN_LENGTH_LIMIT) {
+    return url;
+  }
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  if (!isFedRamp() && fg('platform.media-cdn-delivery') && fg('platform.media-cdn-single-host')) {
+  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];

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

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

package/dist/types-ts4.5/utils/mediaCdn.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-client",
-	"version": "27.6.1",
+	"version": "28.0.1",
 	"description": "Media API Web Client Library",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/chunkinator": "^6.1.0",
-		"@atlaskit/media-common": "^11.4.0",
+		"@atlaskit/media-common": "^11.5.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"dataloader": "^2.1.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-state": "^1.1.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^2.0.0",
 		"@atlassian/feature-flags-test-utils": "0.2.3",
 		"@emotion/react": "^11.7.1",
 		"@types/deep-equal": "^1.0.1",
@@ -81,9 +81,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform.media-svg-rendering": {
-			"type": "boolean"
-		},
 		"platform.media-cdn-delivery": {
 			"type": "boolean"
 		},