@atlaskit/media-file-preview 0.17.2 → 1.0.0

package/AGENTS.md

@@ -0,0 +1,59 @@
+# media-file-preview — Agent Guide
+
+> **Parent guide:** Always read [`../AGENTS.md`](../AGENTS.md) before working in this package — it
+> contains workspace-wide rules covering platform guidelines, changeset workflow, accessibility
+> standards, and the knowledge index protocol that applies to every Media package.
+
+## Package identity
+
+| Field    | Value                                                                                                                                      |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| NPM name | `@atlaskit/media-file-preview`                                                                                                             |
+| Path     | `media-file-preview/`                                                                                                                      |
+| Owner    | Media Exif                                                                                                                                 |
+| Purpose  | React hooks for fetching and rendering media file previews — `useFilePreview` for general previews and `useMediaImage` for image rendering |
+
+## Knowledge index
+
+> Read, search, edit, investigate, and validate the repository knowledge index at
+> `.agents/knowledge-index/`. ALWAYS use this skill before making ANY repo change, or when exploring
+> the codebase. The knowledge index is the canonical starting point for every coding task in this
+> repo, trigger this skill aggressively whenever the user mentions architecture, conventions,
+> packages, modules, services, build, coding, writing code, APIs, feature flags, testing, or
+> anything similar. Also trigger when "is the knowledge index up to date?" / "update the knowledge
+> index" / "what does the knowledge index say about Y?" — even if they don't say the words
+> "knowledge index". Also use it (via the `validate` subcommand) to detect drift between the
+> codebase and the docs after any code change. Use the `generate` subcommand to bootstrap the index
+> in a new repository.
+
+**Entry point:** `.agents/knowledge-index/INDEX.md` **Unit doc:**
+`.agents/knowledge-index/domains/media/units/atlaskit-media-file-preview.md` **CLI:**
+`python3 .agents/skills/knowledge-index/scripts/kg.py {find,read,edit,investigate,validate,init,explore,generate} …`
+**Refresh protocol:** never silently bump `Last verified` — always re-read the listed `Sources`
+first, edit, then `kg.py edit <path> --message "<reason>"`.
+
+## Key source files
+
+- `src/index.ts` — public API entry point
+- `src/useFilePreview.tsx` — primary hook for file preview state
+- `src/useMediaImage.tsx` — hook for image blob URL resolution
+- `src/getPreview/` — preview resolution strategies per media type
+- `src/globalScope/` — browser globals abstraction (for SSR safety)
+- `src/types.ts` — shared type definitions
+- `src/errors.ts` — error types and predicates
+- `src/analytics.ts` — analytics event helpers
+
+## Public API (key exports)
+
+`useFilePreview`, `UseFilePreviewParams`, `useMediaImage`, `UseMediaImageParams`,
+`MediaFilePreview`, `isMediaFilePreviewError`, `MediaFilePreviewErrorPrimaryReason`
+
+## Development notes
+
+- React Compiler is enabled for this package
+- Peer dependencies: `react`, `react-dom`
+- 5 feature flags registered (see `package.json` → `platform-feature-flags`)
+- Includes SSR-safe preview behaviour
+- Export subpaths: `.`, `./errors`, `./types`, `./use-file-preview`, `./use-media-image`
+- All new behaviour changes must be behind a feature gate (`fg()` from
+  `@atlaskit/platform-feature-flags`)

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @atlaskit/media-file-preview
 
+## 1.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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