@atlaskit/media-file-preview 0.17.2 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-file-preview
 
+## 0.18.0
+
+### Minor Changes
+
+- [`a68f551856a81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a68f551856a81) -
+  Add initialFileState param to useFilePreview to support SSR-seeded file state for immediate
+  preview rendering.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.17.2
 
 ### Patch Changes

package/dist/cjs/getPreview/getPreview.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isRemotePreview = exports.isLocalPreview = exports.getSSRPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = void 0;
+exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isRemotePreview = exports.isLocalPreview = exports.getSSRPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = exports.extractCdnSigningParams = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaClient = require("@atlaskit/media-client");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -39,9 +39,62 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
     dataURI: dataURI
   });
 };
-var getDataUri = function getDataUri(mediaClient, id, params, mediaBlobUrlAttrs) {
+
+/**
+ * Allowlist of CDN signing query-param names that we propagate from a
+ * pre-signed `previewCdnUrl` onto the URL produced by `getImageUrlSync`.
+ * These are the standard CloudFront signed-URL params; if the upstream
+ * adds a new one, this list needs updating.
+ */
+var SIGNING_PARAM_NAMES = ['token', 'Policy', 'Key-Pair-Id', 'Signature', 'Expires'];
+
+/**
+ * Pull the CDN-signing query params (token / Policy / Key-Pair-Id / Signature
+ * / Expires) out of a pre-signed CDN URL so they can be overlaid on a URL
+ * built independently by `getImageUrlSync` (which constructs path, image
+ * params, pathBased routing, wmv, etc.). Image-shape params from the cdn URL
+ * itself (width/height/mode/...) are intentionally NOT extracted — those come
+ * from `imageURLParams` via `getImageUrlSync`.
+ *
+ * Returns `{}` on parse failure so we degrade rather than throw.
+ */
+var extractCdnSigningParams = exports.extractCdnSigningParams = function extractCdnSigningParams(cdnUrl) {
+  try {
+    var url = new URL(cdnUrl);
+    var out = {};
+    for (var _i = 0, _SIGNING_PARAM_NAMES = SIGNING_PARAM_NAMES; _i < _SIGNING_PARAM_NAMES.length; _i++) {
+      var name = _SIGNING_PARAM_NAMES[_i];
+      var value = url.searchParams.get(name);
+      if (value !== null) {
+        out[name] = value;
+      }
+    }
+    return out;
+  } catch (_unused) {
+    return {};
+  }
+};
+var applyCdnSigningParams = function applyCdnSigningParams(url, cdnSigningParams) {
+  if (!cdnSigningParams || Object.keys(cdnSigningParams).length === 0) {
+    return url;
+  }
+  try {
+    var parsed = new URL(url);
+    Object.entries(cdnSigningParams).forEach(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      parsed.searchParams.set(key, value);
+    });
+    return parsed.toString();
+  } catch (_unused2) {
+    return url;
+  }
+};
+var getDataUri = function getDataUri(mediaClient, id, params, mediaBlobUrlAttrs, cdnSigningParams) {
   var rawDataURI = mediaClient.getImageUrlSync(id, params);
-  return mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+  var signedDataURI = applyCdnSigningParams(rawDataURI, cdnSigningParams);
+  return mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(signedDataURI, mediaBlobUrlAttrs) : signedDataURI;
 };
 
 /**
@@ -66,18 +119,18 @@ var mergeClientIdIntoAttrs = function mergeClientIdIntoAttrs(clientId, id, media
     collection: collectionName
   };
 };
-var getSSRPreview = exports.getSSRPreview = function getSSRPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
+var getSSRPreview = exports.getSSRPreview = function getSSRPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs, cdnSigningParams) {
   try {
     // Synchronously extract clientId from initialAuth and merge into blob URL attrs
     var clientId = (0, _platformFeatureFlags.fg)('platform_media_cross_client_copy_with_auth') ? mediaClient.getClientIdSync() : undefined;
     var attrsWithClientId = mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, params.collection);
-    var dataURI = getDataUri(mediaClient, id, params, attrsWithClientId);
+    var dataURI = getDataUri(mediaClient, id, params, attrsWithClientId, cdnSigningParams);
     var srcSet = "".concat(dataURI, " 1x");
     if (params.width) {
       var doubleDataURI = getDataUri(mediaClient, id, _objectSpread(_objectSpread({}, params), {}, {
         width: params.width * 2,
         height: params.height && params.height * 2
-      }), attrsWithClientId);
+      }), attrsWithClientId, cdnSigningParams);
       // We want to embed some meta context into dataURI for Copy/Paste to work.
       srcSet += ", ".concat(doubleDataURI, " 2x");
     }
@@ -117,54 +170,54 @@ var isSSRPreview = exports.isSSRPreview = function isSSRPreview(preview) {
  * with it for cross-client copy support.
  */
 var enrichAttrsWithClientId = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, id, mediaBlobUrlAttrs, collectionName) {
-    var clientId;
-    return _regenerator.default.wrap(function _callee$(_context) {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, id, mediaBlobUrlAttrs, collectionName) {
+    var clientId, _t;
+    return _regenerator.default.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           if ((0, _platformFeatureFlags.fg)('platform_media_cross_client_copy_with_auth')) {
-            _context.next = 2;
+            _context.next = 1;
             break;
           }
           return _context.abrupt("return", mediaBlobUrlAttrs);
-        case 2:
+        case 1:
           // Try sync first, then async fallback
           clientId = mediaClient.getClientIdSync();
           if (clientId) {
-            _context.next = 12;
+            _context.next = 5;
             break;
           }
-          _context.prev = 4;
-          _context.next = 7;
+          _context.prev = 2;
+          _context.next = 3;
           return mediaClient.getClientId(collectionName);
-        case 7:
+        case 3:
           clientId = _context.sent;
-          _context.next = 12;
+          _context.next = 5;
           break;
-        case 10:
-          _context.prev = 10;
-          _context.t0 = _context["catch"](4);
-        case 12:
+        case 4:
+          _context.prev = 4;
+          _t = _context["catch"](2);
+        case 5:
           return _context.abrupt("return", mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, collectionName));
-        case 13:
+        case 6:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[4, 10]]);
+    }, _callee, null, [[2, 4]]);
   }));
   return function enrichAttrsWithClientId(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
+    return _ref3.apply(this, arguments);
   };
 }();
 var getAndCacheRemotePreview = exports.getAndCacheRemotePreview = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
     var _yield$Promise$all, _yield$Promise$all2, remotePreview, enrichedAttrs;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
+    return _regenerator.default.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
+          _context2.next = 1;
           return Promise.all([(0, _helpers.getRemotePreview)(mediaClient, id, params, traceContext), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, params.collection)]);
-        case 2:
+        case 1:
           _yield$Promise$all = _context2.sent;
           _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
           remotePreview = _yield$Promise$all2[0];
@@ -172,25 +225,25 @@ var getAndCacheRemotePreview = exports.getAndCacheRemotePreview = /*#__PURE__*/f
           return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
             dimensions: dimensions
           }), enrichedAttrs));
-        case 7:
+        case 2:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   }));
   return function getAndCacheRemotePreview(_x5, _x6, _x7, _x8, _x9, _x0) {
-    return _ref2.apply(this, arguments);
+    return _ref4.apply(this, arguments);
   };
 }();
 var getAndCacheLocalPreview = exports.getAndCacheLocalPreview = /*#__PURE__*/function () {
-  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mediaClient, id, filePreview, dimensions, mode, mediaBlobUrlAttrs, collectionName) {
+  var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mediaClient, id, filePreview, dimensions, mode, mediaBlobUrlAttrs, collectionName) {
     var _yield$Promise$all3, _yield$Promise$all4, localPreview, enrichedAttrs;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
+    return _regenerator.default.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context3.next = 2;
+          _context3.next = 1;
           return Promise.all([(0, _helpers.getLocalPreview)(filePreview), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, collectionName)]);
-        case 2:
+        case 1:
           _yield$Promise$all3 = _context3.sent;
           _yield$Promise$all4 = (0, _slicedToArray2.default)(_yield$Promise$all3, 2);
           localPreview = _yield$Promise$all4[0];
@@ -198,13 +251,13 @@ var getAndCacheLocalPreview = exports.getAndCacheLocalPreview = /*#__PURE__*/fun
           return _context3.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
             dimensions: dimensions
           }), enrichedAttrs));
-        case 7:
+        case 2:
         case "end":
           return _context3.stop();
       }
     }, _callee3);
   }));
   return function getAndCacheLocalPreview(_x1, _x10, _x11, _x12, _x13, _x14, _x15) {
-    return _ref3.apply(this, arguments);
+    return _ref5.apply(this, arguments);
   };
 }();

package/dist/cjs/getPreview/helpers.js

@@ -20,14 +20,14 @@ var isSupportedLocalPreview = exports.isSupportedLocalPreview = function isSuppo
 };
 var getImageLocalPreview = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(value) {
-    var orientation, dataURI;
-    return _regenerator.default.wrap(function _callee$(_context) {
+    var orientation, dataURI, _t;
+    return _regenerator.default.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
-          _context.next = 3;
+          _context.next = 1;
           return (0, _mediaUi.getOrientation)(value);
-        case 3:
+        case 1:
           orientation = _context.sent;
           dataURI = URL.createObjectURL(value);
           return _context.abrupt("return", {
@@ -35,15 +35,15 @@ var getImageLocalPreview = /*#__PURE__*/function () {
             orientation: orientation,
             source: 'local'
           });
-        case 8:
-          _context.prev = 8;
-          _context.t0 = _context["catch"](0);
-          throw new _errors.LocalPreviewError('local-preview-image', _context.t0 instanceof Error ? _context.t0 : undefined);
-        case 11:
+        case 2:
+          _context.prev = 2;
+          _t = _context["catch"](0);
+          throw new _errors.LocalPreviewError('local-preview-image', _t instanceof Error ? _t : undefined);
+        case 3:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 8]]);
+    }, _callee, null, [[0, 2]]);
   }));
   return function getImageLocalPreview(_x) {
     return _ref.apply(this, arguments);
@@ -51,29 +51,29 @@ var getImageLocalPreview = /*#__PURE__*/function () {
 }();
 var getVideoLocalPreview = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(value) {
-    var dataURI;
-    return _regenerator.default.wrap(function _callee2$(_context2) {
+    var dataURI, _t2;
+    return _regenerator.default.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _context2.prev = 0;
-          _context2.next = 3;
+          _context2.next = 1;
           return (0, _videoSnapshot.takeSnapshot)(value);
-        case 3:
+        case 1:
           dataURI = _context2.sent;
           return _context2.abrupt("return", {
             dataURI: dataURI,
             orientation: 1,
             source: 'local'
           });
-        case 7:
-          _context2.prev = 7;
-          _context2.t0 = _context2["catch"](0);
-          throw new _errors.LocalPreviewError('local-preview-video', _context2.t0 instanceof Error ? _context2.t0 : undefined);
-        case 10:
+        case 2:
+          _context2.prev = 2;
+          _t2 = _context2["catch"](0);
+          throw new _errors.LocalPreviewError('local-preview-video', _t2 instanceof Error ? _t2 : undefined);
+        case 3:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[0, 7]]);
+    }, _callee2, null, [[0, 2]]);
   }));
   return function getVideoLocalPreview(_x2) {
     return _ref2.apply(this, arguments);
@@ -81,25 +81,25 @@ var getVideoLocalPreview = /*#__PURE__*/function () {
 }();
 var getLocalPreview = exports.getLocalPreview = /*#__PURE__*/function () {
   var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(filePreview) {
-    var value, resolvedFilePreview, _value, type, mediaType;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
+    var value, resolvedFilePreview, _value, type, mediaType, _t3, _t4;
+    return _regenerator.default.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _context3.prev = 0;
-          _context3.next = 3;
+          _context3.next = 1;
           return filePreview;
-        case 3:
+        case 1:
           resolvedFilePreview = _context3.sent;
           value = resolvedFilePreview.value;
-          _context3.next = 10;
+          _context3.next = 3;
           break;
-        case 7:
-          _context3.prev = 7;
-          _context3.t0 = _context3["catch"](0);
-          throw new _errors.LocalPreviewError('local-preview-rejected', _context3.t0 instanceof Error ? _context3.t0 : undefined);
-        case 10:
+        case 2:
+          _context3.prev = 2;
+          _t3 = _context3["catch"](0);
+          throw new _errors.LocalPreviewError('local-preview-rejected', _t3 instanceof Error ? _t3 : undefined);
+        case 3:
           if (!(typeof value === 'string')) {
-            _context3.next = 14;
+            _context3.next = 4;
             break;
           }
           return _context3.abrupt("return", {
@@ -107,29 +107,29 @@ var getLocalPreview = exports.getLocalPreview = /*#__PURE__*/function () {
             orientation: 1,
             source: 'local'
           });
-        case 14:
+        case 4:
           if (!(value instanceof Blob)) {
-            _context3.next = 23;
+            _context3.next = 8;
             break;
           }
           _value = value, type = _value.type;
           mediaType = (0, _mediaCommon.getMediaTypeFromMimeType)(type);
-          _context3.t1 = mediaType;
-          _context3.next = _context3.t1 === 'image' ? 20 : _context3.t1 === 'video' ? 21 : 22;
+          _t4 = mediaType;
+          _context3.next = _t4 === 'image' ? 5 : _t4 === 'video' ? 6 : 7;
           break;
-        case 20:
+        case 5:
           return _context3.abrupt("return", getImageLocalPreview(value));
-        case 21:
+        case 6:
           return _context3.abrupt("return", getVideoLocalPreview(value));
-        case 22:
+        case 7:
           throw new _errors.LocalPreviewError('local-preview-unsupported');
-        case 23:
+        case 8:
           throw new _errors.LocalPreviewError('local-preview-unsupported');
-        case 24:
+        case 9:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[0, 7]]);
+    }, _callee3, null, [[0, 2]]);
   }));
   return function getLocalPreview(_x3) {
     return _ref3.apply(this, arguments);
@@ -137,29 +137,29 @@ var getLocalPreview = exports.getLocalPreview = /*#__PURE__*/function () {
 }();
 var getRemotePreview = exports.getRemotePreview = /*#__PURE__*/function () {
   var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(mediaClient, id, params, traceContext) {
-    var blob;
-    return _regenerator.default.wrap(function _callee4$(_context4) {
+    var blob, _t5;
+    return _regenerator.default.wrap(function (_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           _context4.prev = 0;
-          _context4.next = 3;
+          _context4.next = 1;
           return mediaClient.getImage(id, params, undefined, undefined, traceContext);
-        case 3:
+        case 1:
           blob = _context4.sent;
           return _context4.abrupt("return", {
             dataURI: URL.createObjectURL(blob),
             orientation: 1,
             source: 'remote'
           });
-        case 7:
-          _context4.prev = 7;
-          _context4.t0 = _context4["catch"](0);
-          throw new _errors.RemotePreviewError('remote-preview-fetch', _context4.t0 instanceof Error ? _context4.t0 : undefined);
-        case 10:
+        case 2:
+          _context4.prev = 2;
+          _t5 = _context4["catch"](0);
+          throw new _errors.RemotePreviewError('remote-preview-fetch', _t5 instanceof Error ? _t5 : undefined);
+        case 3:
         case "end":
           return _context4.stop();
       }
-    }, _callee4, null, [[0, 7]]);
+    }, _callee4, null, [[0, 2]]);
   }));
   return function getRemotePreview(_x4, _x5, _x6, _x7) {
     return _ref4.apply(this, arguments);

package/dist/cjs/getPreview/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "extractCdnSigningParams", {
+  enumerable: true,
+  get: function get() {
+    return _getPreview.extractCdnSigningParams;
+  }
+});
 Object.defineProperty(exports, "getAndCacheLocalPreview", {
   enumerable: true,
   get: function get() {

package/dist/cjs/getPreview/videoSnapshot.js

@@ -9,7 +9,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var takeSnapshot = exports.takeSnapshot = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(blob) {
-    return _regenerator.default.wrap(function _callee$(_context) {
+    return _regenerator.default.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           return _context.abrupt("return", new Promise(function (resolve, reject) {

package/dist/cjs/useFilePreview.js

@@ -45,7 +45,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
     upscale = _ref.upscale,
     maxAge = _ref.maxAge,
-    source = _ref.source;
+    source = _ref.source,
+    initialFileState = _ref.initialFileState;
   var mediaClient = (0, _mediaClientReact.useMediaClient)();
   var _useState = (0, _react.useState)('loading'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -122,7 +123,15 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         // where no SSR occurred, so we should skip SSR preview generation entirely.
         if (ssr === 'server' || ssrData) {
           try {
-            return (0, _getPreview.getSSRPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+            // When the relay/SSR-seed path provided a pre-signed CDN URL,
+            // overlay its CDN-signing query params on the URL produced by
+            // getImageUrlSync. This makes the SSR-rendered HTML use the
+            // cdn-signed URL directly (no auth-token -> cdn-signed swap on
+            // hydration) and the 'ssr-data' rehydration path inherits it
+            // automatically via globalScope.
+            var seededCdnUrl = initialFileState && initialFileState.status !== 'error' ? initialFileState.previewCdnUrl : undefined;
+            var cdnSigningParams = seededCdnUrl && (0, _platformFeatureFlags.fg)('platform_media_ssr_data_seed') ? (0, _getPreview.extractCdnSigningParams)(seededCdnUrl) : undefined;
+            return (0, _getPreview.getSSRPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs, cdnSigningParams);
           } catch (e) {
             ssrReliabilityRef.current = _objectSpread(_objectSpread({}, ssrReliabilityRef.current), {}, (0, _defineProperty2.default)({}, ssr, _objectSpread({
               status: 'fail'
@@ -154,6 +163,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------
 
   var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
+      initialFileState: initialFileState,
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey

package/dist/es2019/getPreview/getPreview.js

@@ -28,9 +28,58 @@ const extendAndCachePreview = (id, mode, preview, mediaBlobUrlAttrs) => {
     dataURI
   };
 };
-const getDataUri = (mediaClient, id, params, mediaBlobUrlAttrs) => {
+
+/**
+ * Allowlist of CDN signing query-param names that we propagate from a
+ * pre-signed `previewCdnUrl` onto the URL produced by `getImageUrlSync`.
+ * These are the standard CloudFront signed-URL params; if the upstream
+ * adds a new one, this list needs updating.
+ */
+const SIGNING_PARAM_NAMES = ['token', 'Policy', 'Key-Pair-Id', 'Signature', 'Expires'];
+
+/**
+ * Pull the CDN-signing query params (token / Policy / Key-Pair-Id / Signature
+ * / Expires) out of a pre-signed CDN URL so they can be overlaid on a URL
+ * built independently by `getImageUrlSync` (which constructs path, image
+ * params, pathBased routing, wmv, etc.). Image-shape params from the cdn URL
+ * itself (width/height/mode/...) are intentionally NOT extracted — those come
+ * from `imageURLParams` via `getImageUrlSync`.
+ *
+ * Returns `{}` on parse failure so we degrade rather than throw.
+ */
+export const extractCdnSigningParams = cdnUrl => {
+  try {
+    const url = new URL(cdnUrl);
+    const out = {};
+    for (const name of SIGNING_PARAM_NAMES) {
+      const value = url.searchParams.get(name);
+      if (value !== null) {
+        out[name] = value;
+      }
+    }
+    return out;
+  } catch {
+    return {};
+  }
+};
+const applyCdnSigningParams = (url, cdnSigningParams) => {
+  if (!cdnSigningParams || Object.keys(cdnSigningParams).length === 0) {
+    return url;
+  }
+  try {
+    const parsed = new URL(url);
+    Object.entries(cdnSigningParams).forEach(([key, value]) => {
+      parsed.searchParams.set(key, value);
+    });
+    return parsed.toString();
+  } catch {
+    return url;
+  }
+};
+const getDataUri = (mediaClient, id, params, mediaBlobUrlAttrs, cdnSigningParams) => {
   const rawDataURI = mediaClient.getImageUrlSync(id, params);
-  return mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+  const signedDataURI = applyCdnSigningParams(rawDataURI, cdnSigningParams);
+  return mediaBlobUrlAttrs ? addFileAttrsToUrl(signedDataURI, mediaBlobUrlAttrs) : signedDataURI;
 };
 
 /**
@@ -56,19 +105,19 @@ const mergeClientIdIntoAttrs = (clientId, id, mediaBlobUrlAttrs, collectionName)
     collection: collectionName
   };
 };
-export const getSSRPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
+export const getSSRPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs, cdnSigningParams) => {
   try {
     // Synchronously extract clientId from initialAuth and merge into blob URL attrs
     const clientId = fg('platform_media_cross_client_copy_with_auth') ? mediaClient.getClientIdSync() : undefined;
     const attrsWithClientId = mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, params.collection);
-    const dataURI = getDataUri(mediaClient, id, params, attrsWithClientId);
+    const dataURI = getDataUri(mediaClient, id, params, attrsWithClientId, cdnSigningParams);
     let srcSet = `${dataURI} 1x`;
     if (params.width) {
       const doubleDataURI = getDataUri(mediaClient, id, {
         ...params,
         width: params.width * 2,
         height: params.height && params.height * 2
-      }, attrsWithClientId);
+      }, attrsWithClientId, cdnSigningParams);
       // We want to embed some meta context into dataURI for Copy/Paste to work.
       srcSet += `, ${doubleDataURI} 2x`;
     }

package/dist/es2019/getPreview/index.js

@@ -1,3 +1,3 @@
 export { mediaFilePreviewCache } from './cache';
-export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview } from './getPreview';
+export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, extractCdnSigningParams } from './getPreview';
 export { isSupportedLocalPreview } from './helpers';

package/dist/es2019/useFilePreview.js

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
 import { createFailedSSRObject, extractErrorInfo } from './analytics';
 import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
-import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
+import { extractCdnSigningParams, getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { createRequestDimensions, isBigger, isWider, useCurrentValueRef } from './helpers';
 // invisible gif for SSR preview to show the underlying spinner until the src is replaced by
@@ -32,7 +32,8 @@ export const useFilePreview = ({
   allowAnimated = true,
   upscale,
   maxAge,
-  source
+  source,
+  initialFileState
 }) => {
   const mediaClient = useMediaClient();
   const [status, setStatus] = useState('loading');
@@ -93,7 +94,15 @@ export const useFilePreview = ({
         // where no SSR occurred, so we should skip SSR preview generation entirely.
         if (ssr === 'server' || ssrData) {
           try {
-            return getSSRPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+            // When the relay/SSR-seed path provided a pre-signed CDN URL,
+            // overlay its CDN-signing query params on the URL produced by
+            // getImageUrlSync. This makes the SSR-rendered HTML use the
+            // cdn-signed URL directly (no auth-token -> cdn-signed swap on
+            // hydration) and the 'ssr-data' rehydration path inherits it
+            // automatically via globalScope.
+            const seededCdnUrl = initialFileState && initialFileState.status !== 'error' ? initialFileState.previewCdnUrl : undefined;
+            const cdnSigningParams = seededCdnUrl && fg('platform_media_ssr_data_seed') ? extractCdnSigningParams(seededCdnUrl) : undefined;
+            return getSSRPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs, cdnSigningParams);
           } catch (e) {
             ssrReliabilityRef.current = {
               ...ssrReliabilityRef.current,
@@ -130,6 +139,7 @@ export const useFilePreview = ({
   const {
     fileState
   } = useFileState(identifier.id, {
+    initialFileState,
     skipRemote,
     collectionName: identifier.collectionName,
     occurrenceKey: identifier.occurrenceKey

package/dist/esm/getPreview/getPreview.js

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; }
@@ -32,9 +32,62 @@ var extendAndCachePreview = function extendAndCachePreview(id, mode, preview, me
     dataURI: dataURI
   });
 };
-var getDataUri = function getDataUri(mediaClient, id, params, mediaBlobUrlAttrs) {
+
+/**
+ * Allowlist of CDN signing query-param names that we propagate from a
+ * pre-signed `previewCdnUrl` onto the URL produced by `getImageUrlSync`.
+ * These are the standard CloudFront signed-URL params; if the upstream
+ * adds a new one, this list needs updating.
+ */
+var SIGNING_PARAM_NAMES = ['token', 'Policy', 'Key-Pair-Id', 'Signature', 'Expires'];
+
+/**
+ * Pull the CDN-signing query params (token / Policy / Key-Pair-Id / Signature
+ * / Expires) out of a pre-signed CDN URL so they can be overlaid on a URL
+ * built independently by `getImageUrlSync` (which constructs path, image
+ * params, pathBased routing, wmv, etc.). Image-shape params from the cdn URL
+ * itself (width/height/mode/...) are intentionally NOT extracted — those come
+ * from `imageURLParams` via `getImageUrlSync`.
+ *
+ * Returns `{}` on parse failure so we degrade rather than throw.
+ */
+export var extractCdnSigningParams = function extractCdnSigningParams(cdnUrl) {
+  try {
+    var url = new URL(cdnUrl);
+    var out = {};
+    for (var _i = 0, _SIGNING_PARAM_NAMES = SIGNING_PARAM_NAMES; _i < _SIGNING_PARAM_NAMES.length; _i++) {
+      var name = _SIGNING_PARAM_NAMES[_i];
+      var value = url.searchParams.get(name);
+      if (value !== null) {
+        out[name] = value;
+      }
+    }
+    return out;
+  } catch (_unused) {
+    return {};
+  }
+};
+var applyCdnSigningParams = function applyCdnSigningParams(url, cdnSigningParams) {
+  if (!cdnSigningParams || Object.keys(cdnSigningParams).length === 0) {
+    return url;
+  }
+  try {
+    var parsed = new URL(url);
+    Object.entries(cdnSigningParams).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      parsed.searchParams.set(key, value);
+    });
+    return parsed.toString();
+  } catch (_unused2) {
+    return url;
+  }
+};
+var getDataUri = function getDataUri(mediaClient, id, params, mediaBlobUrlAttrs, cdnSigningParams) {
   var rawDataURI = mediaClient.getImageUrlSync(id, params);
-  return mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
+  var signedDataURI = applyCdnSigningParams(rawDataURI, cdnSigningParams);
+  return mediaBlobUrlAttrs ? addFileAttrsToUrl(signedDataURI, mediaBlobUrlAttrs) : signedDataURI;
 };
 
 /**
@@ -59,18 +112,18 @@ var mergeClientIdIntoAttrs = function mergeClientIdIntoAttrs(clientId, id, media
     collection: collectionName
   };
 };
-export var getSSRPreview = function getSSRPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
+export var getSSRPreview = function getSSRPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs, cdnSigningParams) {
   try {
     // Synchronously extract clientId from initialAuth and merge into blob URL attrs
     var clientId = fg('platform_media_cross_client_copy_with_auth') ? mediaClient.getClientIdSync() : undefined;
     var attrsWithClientId = mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, params.collection);
-    var dataURI = getDataUri(mediaClient, id, params, attrsWithClientId);
+    var dataURI = getDataUri(mediaClient, id, params, attrsWithClientId, cdnSigningParams);
     var srcSet = "".concat(dataURI, " 1x");
     if (params.width) {
       var doubleDataURI = getDataUri(mediaClient, id, _objectSpread(_objectSpread({}, params), {}, {
         width: params.width * 2,
         height: params.height && params.height * 2
-      }), attrsWithClientId);
+      }), attrsWithClientId, cdnSigningParams);
       // We want to embed some meta context into dataURI for Copy/Paste to work.
       srcSet += ", ".concat(doubleDataURI, " 2x");
     }
@@ -110,54 +163,54 @@ export var isSSRPreview = function isSSRPreview(preview) {
  * with it for cross-client copy support.
  */
 var enrichAttrsWithClientId = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaClient, id, mediaBlobUrlAttrs, collectionName) {
-    var clientId;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaClient, id, mediaBlobUrlAttrs, collectionName) {
+    var clientId, _t;
+    return _regeneratorRuntime.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           if (fg('platform_media_cross_client_copy_with_auth')) {
-            _context.next = 2;
+            _context.next = 1;
             break;
           }
           return _context.abrupt("return", mediaBlobUrlAttrs);
-        case 2:
+        case 1:
           // Try sync first, then async fallback
           clientId = mediaClient.getClientIdSync();
           if (clientId) {
-            _context.next = 12;
+            _context.next = 5;
             break;
           }
-          _context.prev = 4;
-          _context.next = 7;
+          _context.prev = 2;
+          _context.next = 3;
           return mediaClient.getClientId(collectionName);
-        case 7:
+        case 3:
           clientId = _context.sent;
-          _context.next = 12;
+          _context.next = 5;
           break;
-        case 10:
-          _context.prev = 10;
-          _context.t0 = _context["catch"](4);
-        case 12:
+        case 4:
+          _context.prev = 4;
+          _t = _context["catch"](2);
+        case 5:
           return _context.abrupt("return", mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, collectionName));
-        case 13:
+        case 6:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[4, 10]]);
+    }, _callee, null, [[2, 4]]);
   }));
   return function enrichAttrsWithClientId(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
+    return _ref3.apply(this, arguments);
   };
 }();
 export var getAndCacheRemotePreview = /*#__PURE__*/function () {
-  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
     var _yield$Promise$all, _yield$Promise$all2, remotePreview, enrichedAttrs;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regeneratorRuntime.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          _context2.next = 2;
+          _context2.next = 1;
           return Promise.all([getRemotePreview(mediaClient, id, params, traceContext), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, params.collection)]);
-        case 2:
+        case 1:
           _yield$Promise$all = _context2.sent;
           _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
           remotePreview = _yield$Promise$all2[0];
@@ -165,25 +218,25 @@ export var getAndCacheRemotePreview = /*#__PURE__*/function () {
           return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
             dimensions: dimensions
           }), enrichedAttrs));
-        case 7:
+        case 2:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   }));
   return function getAndCacheRemotePreview(_x5, _x6, _x7, _x8, _x9, _x0) {
-    return _ref2.apply(this, arguments);
+    return _ref4.apply(this, arguments);
   };
 }();
 export var getAndCacheLocalPreview = /*#__PURE__*/function () {
-  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(mediaClient, id, filePreview, dimensions, mode, mediaBlobUrlAttrs, collectionName) {
+  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(mediaClient, id, filePreview, dimensions, mode, mediaBlobUrlAttrs, collectionName) {
     var _yield$Promise$all3, _yield$Promise$all4, localPreview, enrichedAttrs;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+    return _regeneratorRuntime.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          _context3.next = 2;
+          _context3.next = 1;
           return Promise.all([getLocalPreview(filePreview), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, collectionName)]);
-        case 2:
+        case 1:
           _yield$Promise$all3 = _context3.sent;
           _yield$Promise$all4 = _slicedToArray(_yield$Promise$all3, 2);
           localPreview = _yield$Promise$all4[0];
@@ -191,13 +244,13 @@ export var getAndCacheLocalPreview = /*#__PURE__*/function () {
           return _context3.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
             dimensions: dimensions
           }), enrichedAttrs));
-        case 7:
+        case 2:
         case "end":
           return _context3.stop();
       }
     }, _callee3);
   }));
   return function getAndCacheLocalPreview(_x1, _x10, _x11, _x12, _x13, _x14, _x15) {
-    return _ref3.apply(this, arguments);
+    return _ref5.apply(this, arguments);
   };
 }();

package/dist/esm/getPreview/helpers.js

@@ -14,14 +14,14 @@ export var isSupportedLocalPreview = function isSupportedLocalPreview(mediaType)
 };
 var getImageLocalPreview = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
-    var orientation, dataURI;
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
+    var orientation, dataURI, _t;
+    return _regeneratorRuntime.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
-          _context.next = 3;
+          _context.next = 1;
           return getOrientation(value);
-        case 3:
+        case 1:
           orientation = _context.sent;
           dataURI = URL.createObjectURL(value);
           return _context.abrupt("return", {
@@ -29,15 +29,15 @@ var getImageLocalPreview = /*#__PURE__*/function () {
             orientation: orientation,
             source: 'local'
           });
-        case 8:
-          _context.prev = 8;
-          _context.t0 = _context["catch"](0);
-          throw new LocalPreviewError('local-preview-image', _context.t0 instanceof Error ? _context.t0 : undefined);
-        case 11:
+        case 2:
+          _context.prev = 2;
+          _t = _context["catch"](0);
+          throw new LocalPreviewError('local-preview-image', _t instanceof Error ? _t : undefined);
+        case 3:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 8]]);
+    }, _callee, null, [[0, 2]]);
   }));
   return function getImageLocalPreview(_x) {
     return _ref.apply(this, arguments);
@@ -45,29 +45,29 @@ var getImageLocalPreview = /*#__PURE__*/function () {
 }();
 var getVideoLocalPreview = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
-    var dataURI;
-    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    var dataURI, _t2;
+    return _regeneratorRuntime.wrap(function (_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _context2.prev = 0;
-          _context2.next = 3;
+          _context2.next = 1;
           return takeSnapshot(value);
-        case 3:
+        case 1:
           dataURI = _context2.sent;
           return _context2.abrupt("return", {
             dataURI: dataURI,
             orientation: 1,
             source: 'local'
           });
-        case 7:
-          _context2.prev = 7;
-          _context2.t0 = _context2["catch"](0);
-          throw new LocalPreviewError('local-preview-video', _context2.t0 instanceof Error ? _context2.t0 : undefined);
-        case 10:
+        case 2:
+          _context2.prev = 2;
+          _t2 = _context2["catch"](0);
+          throw new LocalPreviewError('local-preview-video', _t2 instanceof Error ? _t2 : undefined);
+        case 3:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[0, 7]]);
+    }, _callee2, null, [[0, 2]]);
   }));
   return function getVideoLocalPreview(_x2) {
     return _ref2.apply(this, arguments);
@@ -75,25 +75,25 @@ var getVideoLocalPreview = /*#__PURE__*/function () {
 }();
 export var getLocalPreview = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(filePreview) {
-    var value, resolvedFilePreview, _value, type, mediaType;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+    var value, resolvedFilePreview, _value, type, mediaType, _t3, _t4;
+    return _regeneratorRuntime.wrap(function (_context3) {
       while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _context3.prev = 0;
-          _context3.next = 3;
+          _context3.next = 1;
           return filePreview;
-        case 3:
+        case 1:
           resolvedFilePreview = _context3.sent;
           value = resolvedFilePreview.value;
-          _context3.next = 10;
+          _context3.next = 3;
           break;
-        case 7:
-          _context3.prev = 7;
-          _context3.t0 = _context3["catch"](0);
-          throw new LocalPreviewError('local-preview-rejected', _context3.t0 instanceof Error ? _context3.t0 : undefined);
-        case 10:
+        case 2:
+          _context3.prev = 2;
+          _t3 = _context3["catch"](0);
+          throw new LocalPreviewError('local-preview-rejected', _t3 instanceof Error ? _t3 : undefined);
+        case 3:
           if (!(typeof value === 'string')) {
-            _context3.next = 14;
+            _context3.next = 4;
             break;
           }
           return _context3.abrupt("return", {
@@ -101,29 +101,29 @@ export var getLocalPreview = /*#__PURE__*/function () {
             orientation: 1,
             source: 'local'
           });
-        case 14:
+        case 4:
           if (!(value instanceof Blob)) {
-            _context3.next = 23;
+            _context3.next = 8;
             break;
           }
           _value = value, type = _value.type;
           mediaType = getMediaTypeFromMimeType(type);
-          _context3.t1 = mediaType;
-          _context3.next = _context3.t1 === 'image' ? 20 : _context3.t1 === 'video' ? 21 : 22;
+          _t4 = mediaType;
+          _context3.next = _t4 === 'image' ? 5 : _t4 === 'video' ? 6 : 7;
           break;
-        case 20:
+        case 5:
           return _context3.abrupt("return", getImageLocalPreview(value));
-        case 21:
+        case 6:
           return _context3.abrupt("return", getVideoLocalPreview(value));
-        case 22:
+        case 7:
           throw new LocalPreviewError('local-preview-unsupported');
-        case 23:
+        case 8:
           throw new LocalPreviewError('local-preview-unsupported');
-        case 24:
+        case 9:
         case "end":
           return _context3.stop();
       }
-    }, _callee3, null, [[0, 7]]);
+    }, _callee3, null, [[0, 2]]);
   }));
   return function getLocalPreview(_x3) {
     return _ref3.apply(this, arguments);
@@ -131,29 +131,29 @@ export var getLocalPreview = /*#__PURE__*/function () {
 }();
 export var getRemotePreview = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(mediaClient, id, params, traceContext) {
-    var blob;
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+    var blob, _t5;
+    return _regeneratorRuntime.wrap(function (_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           _context4.prev = 0;
-          _context4.next = 3;
+          _context4.next = 1;
           return mediaClient.getImage(id, params, undefined, undefined, traceContext);
-        case 3:
+        case 1:
           blob = _context4.sent;
           return _context4.abrupt("return", {
             dataURI: URL.createObjectURL(blob),
             orientation: 1,
             source: 'remote'
           });
-        case 7:
-          _context4.prev = 7;
-          _context4.t0 = _context4["catch"](0);
-          throw new RemotePreviewError('remote-preview-fetch', _context4.t0 instanceof Error ? _context4.t0 : undefined);
-        case 10:
+        case 2:
+          _context4.prev = 2;
+          _t5 = _context4["catch"](0);
+          throw new RemotePreviewError('remote-preview-fetch', _t5 instanceof Error ? _t5 : undefined);
+        case 3:
         case "end":
           return _context4.stop();
       }
-    }, _callee4, null, [[0, 7]]);
+    }, _callee4, null, [[0, 2]]);
   }));
   return function getRemotePreview(_x4, _x5, _x6, _x7) {
     return _ref4.apply(this, arguments);

package/dist/esm/getPreview/index.js

@@ -1,3 +1,3 @@
 export { mediaFilePreviewCache } from './cache';
-export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview } from './getPreview';
+export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, extractCdnSigningParams } from './getPreview';
 export { isSupportedLocalPreview } from './helpers';

package/dist/esm/getPreview/videoSnapshot.js

@@ -2,7 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 export var takeSnapshot = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(blob) {
-    return _regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regeneratorRuntime.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           return _context.abrupt("return", new Promise(function (resolve, reject) {

package/dist/esm/useFilePreview.js

@@ -10,7 +10,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { useInteractionContext } from '@atlaskit/react-ufo/interaction-context';
 import { createFailedSSRObject, extractErrorInfo } from './analytics';
 import { ensureMediaFilePreviewError, ImageLoadError, MediaFilePreviewError } from './errors';
-import { getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
+import { extractCdnSigningParams, getAndCacheLocalPreview, getAndCacheRemotePreview, getSSRPreview, isLocalPreview, isRemotePreview, isSSRClientPreview, isSSRDataPreview, isSSRPreview, isSupportedLocalPreview, mediaFilePreviewCache } from './getPreview';
 import { generateScriptProps, getSSRData } from './globalScope';
 import { createRequestDimensions, isBigger, isWider, useCurrentValueRef } from './helpers';
 // invisible gif for SSR preview to show the underlying spinner until the src is replaced by
@@ -38,7 +38,8 @@ export var useFilePreview = function useFilePreview(_ref) {
     allowAnimated = _ref$allowAnimated === void 0 ? true : _ref$allowAnimated,
     upscale = _ref.upscale,
     maxAge = _ref.maxAge,
-    source = _ref.source;
+    source = _ref.source,
+    initialFileState = _ref.initialFileState;
   var mediaClient = useMediaClient();
   var _useState = useState('loading'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -115,7 +116,15 @@ export var useFilePreview = function useFilePreview(_ref) {
         // where no SSR occurred, so we should skip SSR preview generation entirely.
         if (ssr === 'server' || ssrData) {
           try {
-            return getSSRPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
+            // When the relay/SSR-seed path provided a pre-signed CDN URL,
+            // overlay its CDN-signing query params on the URL produced by
+            // getImageUrlSync. This makes the SSR-rendered HTML use the
+            // cdn-signed URL directly (no auth-token -> cdn-signed swap on
+            // hydration) and the 'ssr-data' rehydration path inherits it
+            // automatically via globalScope.
+            var seededCdnUrl = initialFileState && initialFileState.status !== 'error' ? initialFileState.previewCdnUrl : undefined;
+            var cdnSigningParams = seededCdnUrl && fg('platform_media_ssr_data_seed') ? extractCdnSigningParams(seededCdnUrl) : undefined;
+            return getSSRPreview(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs, cdnSigningParams);
           } catch (e) {
             ssrReliabilityRef.current = _objectSpread(_objectSpread({}, ssrReliabilityRef.current), {}, _defineProperty({}, ssr, _objectSpread({
               status: 'fail'
@@ -147,6 +156,7 @@ export var useFilePreview = function useFilePreview(_ref) {
   //----------------------------------------------------------------
 
   var _useFileState = useFileState(identifier.id, {
+      initialFileState: initialFileState,
       skipRemote: skipRemote,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey

package/dist/types/getPreview/getPreview.d.ts

@@ -1,7 +1,18 @@
 import { type FilePreview, type MediaBlobUrlAttrs, type MediaClient, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
 import { type MediaFilePreview, type MediaFilePreviewDimensions } from '../types';
-export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => MediaFilePreview;
+/**
+ * Pull the CDN-signing query params (token / Policy / Key-Pair-Id / Signature
+ * / Expires) out of a pre-signed CDN URL so they can be overlaid on a URL
+ * built independently by `getImageUrlSync` (which constructs path, image
+ * params, pathBased routing, wmv, etc.). Image-shape params from the cdn URL
+ * itself (width/height/mode/...) are intentionally NOT extracted — those come
+ * from `imageURLParams` via `getImageUrlSync`.
+ *
+ * Returns `{}` on parse failure so we degrade rather than throw.
+ */
+export declare const extractCdnSigningParams: (cdnUrl: string) => Record<string, string>;
+export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, cdnSigningParams?: Record<string, string>) => MediaFilePreview;
 export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
 export declare const isRemotePreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;

package/dist/types/getPreview/index.d.ts

@@ -1,3 +1,3 @@
 export { mediaFilePreviewCache } from './cache';
-export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, } from './getPreview';
+export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, extractCdnSigningParams, } from './getPreview';
 export { isSupportedLocalPreview } from './helpers';

package/dist/types/useFilePreview.d.ts

@@ -1,5 +1,5 @@
 import { type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES, type ScriptHTMLAttributes } from 'react';
-import { type FileIdentifier, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { type FileIdentifier, type FileState, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
 import { type SSRStatus } from './analytics';
 import { MediaFilePreviewError } from './errors';
@@ -30,8 +30,10 @@ export interface UseFilePreviewParams {
     readonly maxAge?: number;
     /** Defines the source component */
     readonly source?: string;
+    /** Initial file state to be used for the preview. */
+    readonly initialFileState?: FileState;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, useSrcSet, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, useSrcSet, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, initialFileState, }: UseFilePreviewParams) => {
     preview: MediaFilePreview | undefined;
     status: MediaFilePreviewStatus;
     error: MediaFilePreviewError | undefined;

package/dist/types-ts4.5/getPreview/getPreview.d.ts

@@ -1,7 +1,18 @@
 import { type FilePreview, type MediaBlobUrlAttrs, type MediaClient, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
 import { type MediaFilePreview, type MediaFilePreviewDimensions } from '../types';
-export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs) => MediaFilePreview;
+/**
+ * Pull the CDN-signing query params (token / Policy / Key-Pair-Id / Signature
+ * / Expires) out of a pre-signed CDN URL so they can be overlaid on a URL
+ * built independently by `getImageUrlSync` (which constructs path, image
+ * params, pathBased routing, wmv, etc.). Image-shape params from the cdn URL
+ * itself (width/height/mode/...) are intentionally NOT extracted — those come
+ * from `imageURLParams` via `getImageUrlSync`.
+ *
+ * Returns `{}` on parse failure so we degrade rather than throw.
+ */
+export declare const extractCdnSigningParams: (cdnUrl: string) => Record<string, string>;
+export declare const getSSRPreview: (ssr: SSR, mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs, cdnSigningParams?: Record<string, string>) => MediaFilePreview;
 export declare const isLocalPreview: (preview: MediaFilePreview) => boolean;
 export declare const isRemotePreview: (preview: MediaFilePreview) => boolean;
 export declare const isSSRClientPreview: (preview: MediaFilePreview) => boolean;

package/dist/types-ts4.5/getPreview/index.d.ts

@@ -1,3 +1,3 @@
 export { mediaFilePreviewCache } from './cache';
-export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, } from './getPreview';
+export { getSSRPreview, isLocalPreview, isRemotePreview, isSSRPreview, isSSRClientPreview, isSSRDataPreview, getAndCacheRemotePreview, getAndCacheLocalPreview, extractCdnSigningParams, } from './getPreview';
 export { isSupportedLocalPreview } from './helpers';

package/dist/types-ts4.5/useFilePreview.d.ts

@@ -1,5 +1,5 @@
 import { type DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES, type ScriptHTMLAttributes } from 'react';
-import { type FileIdentifier, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
+import { type FileIdentifier, type FileState, type MediaBlobUrlAttrs, type MediaStoreGetFileImageParams } from '@atlaskit/media-client';
 import { type MediaTraceContext, type SSR } from '@atlaskit/media-common';
 import { type SSRStatus } from './analytics';
 import { MediaFilePreviewError } from './errors';
@@ -30,8 +30,10 @@ export interface UseFilePreviewParams {
     readonly maxAge?: number;
     /** Defines the source component */
     readonly source?: string;
+    /** Initial file state to be used for the preview. */
+    readonly initialFileState?: FileState;
 }
-export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, useSrcSet, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, }: UseFilePreviewParams) => {
+export declare const useFilePreview: ({ resizeMode, identifier, ssr, dimensions, useSrcSet, traceContext, skipRemote, mediaBlobUrlAttrs, allowAnimated, upscale, maxAge, source, initialFileState, }: UseFilePreviewParams) => {
     preview: MediaFilePreview | undefined;
     status: MediaFilePreviewStatus;
     error: MediaFilePreviewError | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-file-preview",
-	"version": "0.17.2",
+	"version": "0.18.0",
 	"description": "A React Hook to fetch and render file previews. It's overloaded with fancy features like SSR, lazy loading, memory cache and local preview.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,11 +38,11 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/media-client": "^36.3.0",
-		"@atlaskit/media-client-react": "^5.1.0",
+		"@atlaskit/media-client-react": "^5.2.0",
 		"@atlaskit/media-common": "^13.3.0",
-		"@atlaskit/media-ui": "^29.2.0",
+		"@atlaskit/media-ui": "^29.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/react-ufo": "^6.0.0",
+		"@atlaskit/react-ufo": "^6.5.0",
 		"@babel/runtime": "^7.0.0",
 		"lru_map": "^0.4.1"
 	},
@@ -53,14 +53,16 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/media-state": "^2.1.0",
+		"@atlaskit/media-state": "^2.2.0",
 		"@atlaskit/media-test-data": "^3.3.0",
 		"@atlaskit/section-message": "^8.13.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
+		"@atlassian/testing-library": "^0.6.0",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"wait-for-expect": "^1.2.0"
 	},
@@ -114,6 +116,9 @@
 		},
 		"platform_media_safe_blob_url_eviction": {
 			"type": "boolean"
+		},
+		"platform_media_ssr_data_seed": {
+			"type": "boolean"
 		}
 	}
 }