@atlaskit/media-file-preview 0.16.2 → 0.16.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/media-file-preview
 
+## 0.16.4
+
+### Patch Changes
+
+- [`be94d5f05b8ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be94d5f05b8ae) -
+  Fix media image blob cache to only evict blobs when they are no longer referenced
+- Updated dependencies
+
+## 0.16.3
+
+### Patch Changes
+
+- [`fa50dabb4be8f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa50dabb4be8f) -
+  Retrieve clientId synchronously during Media SSR blob URL construction.
+- Updated dependencies
+
 ## 0.16.2
 
 ### Patch Changes

package/dist/cjs/getPreview/cache.js

@@ -34,6 +34,14 @@ var CardPreviewCacheImpl = exports.CardPreviewCacheImpl = /*#__PURE__*/(0, _crea
   (0, _defineProperty2.default)(this, "clear", function () {
     _this.previewCache.clear();
   });
+  (0, _defineProperty2.default)(this, "acquire", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
+    _this.previewCache.acquire(cacheKey);
+  });
+  (0, _defineProperty2.default)(this, "release", function (id, mode) {
+    var cacheKey = getCacheKey(id, mode);
+    _this.previewCache.release(cacheKey);
+  });
   this.previewCache = previewCache;
 });
 var mediaFilePreviewCache = exports.mediaFilePreviewCache = new CardPreviewCacheImpl((0, _objectURLCache.createObjectURLCache)());

package/dist/cjs/getPreview/getPreview.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isSSRPreview = exports.isSSRDataPreview = exports.isSSRClientPreview = exports.isRemotePreview = exports.isLocalPreview = exports.getSSRPreview = exports.getAndCacheRemotePreview = exports.getAndCacheLocalPreview = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mediaClient = require("@atlaskit/media-client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _errors = require("../errors");
 var _cache = require("./cache");
 var _helpers = require("./helpers");
@@ -41,15 +43,41 @@ var getDataUri = function getDataUri(mediaClient, id, params, mediaBlobUrlAttrs)
   var rawDataURI = mediaClient.getImageUrlSync(id, params);
   return mediaBlobUrlAttrs ? (0, _mediaClient.addFileAttrsToUrl)(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
 };
+
+/**
+ * Merges a clientId into mediaBlobUrlAttrs for cross-client copy support.
+ * Returns the original attrs unchanged if clientId is not available or the feature flag is off.
+ */
+var mergeClientIdIntoAttrs = function mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, collectionName) {
+  if (!clientId) {
+    return mediaBlobUrlAttrs;
+  }
+  if (mediaBlobUrlAttrs) {
+    return _objectSpread(_objectSpread({}, mediaBlobUrlAttrs), {}, {
+      clientId: clientId
+    });
+  }
+
+  // Construct minimal attrs when none provided
+  return {
+    id: id,
+    clientId: clientId,
+    contextId: collectionName || '',
+    collection: collectionName
+  };
+};
 var getSSRPreview = exports.getSSRPreview = function getSSRPreview(ssr, mediaClient, id, params, mediaBlobUrlAttrs) {
   try {
-    var dataURI = getDataUri(mediaClient, id, params, mediaBlobUrlAttrs);
+    // 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 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
-      }), mediaBlobUrlAttrs);
+      }), attrsWithClientId);
       // We want to embed some meta context into dataURI for Copy/Paste to work.
       srcSet += ", ".concat(doubleDataURI, " 2x");
     }
@@ -83,49 +111,100 @@ var isSSRPreview = exports.isSSRPreview = function isSSRPreview(preview) {
   var ssrClientSources = ['ssr-client', 'ssr-server', 'ssr-data'];
   return ssrClientSources.includes(preview.source);
 };
-var getAndCacheRemotePreview = exports.getAndCacheRemotePreview = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) {
-    var remotePreview;
+
+/**
+ * Resolves clientId (sync first, async fallback) and enriches mediaBlobUrlAttrs
+ * 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) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
-          return (0, _helpers.getRemotePreview)(mediaClient, id, params, traceContext);
+          if ((0, _platformFeatureFlags.fg)('platform_media_cross_client_copy_with_auth')) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", mediaBlobUrlAttrs);
         case 2:
-          remotePreview = _context.sent;
-          return _context.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
-            dimensions: dimensions
-          }), mediaBlobUrlAttrs));
-        case 4:
+          // Try sync first, then async fallback
+          clientId = mediaClient.getClientIdSync();
+          if (clientId) {
+            _context.next = 12;
+            break;
+          }
+          _context.prev = 4;
+          _context.next = 7;
+          return mediaClient.getClientId(collectionName);
+        case 7:
+          clientId = _context.sent;
+          _context.next = 12;
+          break;
+        case 10:
+          _context.prev = 10;
+          _context.t0 = _context["catch"](4);
+        case 12:
+          return _context.abrupt("return", mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, collectionName));
+        case 13:
         case "end":
           return _context.stop();
       }
-    }, _callee);
+    }, _callee, null, [[4, 10]]);
   }));
-  return function getAndCacheRemotePreview(_x, _x2, _x3, _x4, _x5, _x6) {
+  return function enrichAttrsWithClientId(_x, _x2, _x3, _x4) {
     return _ref.apply(this, arguments);
   };
 }();
-var getAndCacheLocalPreview = exports.getAndCacheLocalPreview = /*#__PURE__*/function () {
-  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, filePreview, dimensions, mode, mediaBlobUrlAttrs) {
-    var localPreview;
+var getAndCacheRemotePreview = exports.getAndCacheRemotePreview = /*#__PURE__*/function () {
+  var _ref2 = (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) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
           _context2.next = 2;
-          return (0, _helpers.getLocalPreview)(filePreview);
+          return Promise.all([(0, _helpers.getRemotePreview)(mediaClient, id, params, traceContext), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, params.collection)]);
         case 2:
-          localPreview = _context2.sent;
-          return _context2.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+          _yield$Promise$all = _context2.sent;
+          _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
+          remotePreview = _yield$Promise$all2[0];
+          enrichedAttrs = _yield$Promise$all2[1];
+          return _context2.abrupt("return", extendAndCachePreview(id, params.mode, _objectSpread(_objectSpread({}, remotePreview), {}, {
             dimensions: dimensions
-          }), mediaBlobUrlAttrs));
-        case 4:
+          }), enrichedAttrs));
+        case 7:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   }));
-  return function getAndCacheLocalPreview(_x7, _x8, _x9, _x0, _x1) {
+  return function getAndCacheRemotePreview(_x5, _x6, _x7, _x8, _x9, _x0) {
     return _ref2.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 _yield$Promise$all3, _yield$Promise$all4, localPreview, enrichedAttrs;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.next = 2;
+          return Promise.all([(0, _helpers.getLocalPreview)(filePreview), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, collectionName)]);
+        case 2:
+          _yield$Promise$all3 = _context3.sent;
+          _yield$Promise$all4 = (0, _slicedToArray2.default)(_yield$Promise$all3, 2);
+          localPreview = _yield$Promise$all4[0];
+          enrichedAttrs = _yield$Promise$all4[1];
+          return _context3.abrupt("return", extendAndCachePreview(id, mode, _objectSpread(_objectSpread({}, localPreview), {}, {
+            dimensions: dimensions
+          }), enrichedAttrs));
+        case 7:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function getAndCacheLocalPreview(_x1, _x10, _x11, _x12, _x13, _x14, _x15) {
+    return _ref3.apply(this, arguments);
+  };
 }();

package/dist/cjs/getPreview/objectURLCache.js

@@ -5,52 +5,103 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createObjectURLCache = exports.PREVIEW_CACHE_LRU_SIZE = exports.ObjectURLCache = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _eventemitter = require("eventemitter2");
 var _lru_map = require("lru_map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 var PREVIEW_CACHE_LRU_SIZE = exports.PREVIEW_CACHE_LRU_SIZE = 50;
-var ExtendedLRUCache = /*#__PURE__*/function (_LRUMap) {
-  function ExtendedLRUCache(limit) {
+/**
+ * LRU cache that checks whether the oldest entry should be evicted
+ * this means that the cache can grow past the softLimit if `shouldEvict` returns false.
+ *
+ * When `platform_media_safe_blob_url_eviction` is ON the oldest
+ * entry is kept if `shouldEvict` returns false.
+ * When the flag is OFF the oldest entry is always evicted.
+ */
+var EvictionLRUCache = /*#__PURE__*/function (_LRUMap) {
+  function EvictionLRUCache(softLimit, options) {
     var _this;
-    (0, _classCallCheck2.default)(this, ExtendedLRUCache);
-    _this = _callSuper(this, ExtendedLRUCache, [limit]);
-    _this.eventEmitter = new _eventemitter.EventEmitter2();
+    (0, _classCallCheck2.default)(this, EvictionLRUCache);
+    _this = _callSuper(this, EvictionLRUCache, [softLimit]);
+    _this.shouldEvict = options === null || options === void 0 ? void 0 : options.shouldEvict;
+    _this.onEvict = options === null || options === void 0 ? void 0 : options.onEvict;
     return _this;
   }
-  (0, _inherits2.default)(ExtendedLRUCache, _LRUMap);
-  return (0, _createClass2.default)(ExtendedLRUCache, [{
+  (0, _inherits2.default)(EvictionLRUCache, _LRUMap);
+  return (0, _createClass2.default)(EvictionLRUCache, [{
     key: "shift",
     value: function shift() {
-      var entry = _superPropGet(ExtendedLRUCache, "shift", this, 3)([]);
-      this.eventEmitter.emit('shift', entry);
+      if ((0, _platformFeatureFlags.fg)('platform_media_safe_blob_url_eviction')) {
+        var oldest = this.oldest;
+        if (oldest && this.shouldEvict && !this.shouldEvict([oldest.key, oldest.value])) {
+          return undefined;
+        }
+      }
+      var entry = _superPropGet(EvictionLRUCache, "shift", this, 3)([]);
+      if (entry && this.onEvict) {
+        this.onEvict(entry);
+      }
       return entry;
     }
-  }, {
-    key: "on",
-    value: function on(event, callback) {
-      this.eventEmitter.on(event, callback);
-    }
   }]);
 }(_lru_map.LRUMap);
 var ObjectURLCache = exports.ObjectURLCache = /*#__PURE__*/function () {
   function ObjectURLCache(size) {
+    var _this2 = this;
     (0, _classCallCheck2.default)(this, ObjectURLCache);
-    this.cache = new ExtendedLRUCache(size);
-    this.cache.on('shift', function (entry) {
-      if (entry && entry[1].dataURI) {
-        URL.revokeObjectURL(entry[1].dataURI);
+    (0, _defineProperty2.default)(this, "activeRefs", new Map());
+    this.cache = new EvictionLRUCache(size, {
+      shouldEvict: function shouldEvict(entry) {
+        return !_this2.isInUse(entry[0]);
+      },
+      onEvict: function onEvict(entry) {
+        if (entry[1].dataURI) {
+          var dataURI = (0, _platformFeatureFlags.fg)('platform_media_safe_blob_url_eviction') ? entry[1].dataURI.split('#')[0] : entry[1].dataURI;
+          if (dataURI) {
+            URL.revokeObjectURL(dataURI);
+          }
+        }
       }
     });
   }
+
+  /**
+   * Marks a cache key as actively in use by a consumer.
+   * Multiple consumers can acquire the same key; eviction is
+   * blocked until all consumers have released it.
+   */
   return (0, _createClass2.default)(ObjectURLCache, [{
+    key: "acquire",
+    value: function acquire(key) {
+      var _this$activeRefs$get;
+      this.activeRefs.set(key, ((_this$activeRefs$get = this.activeRefs.get(key)) !== null && _this$activeRefs$get !== void 0 ? _this$activeRefs$get : 0) + 1);
+    }
+  }, {
+    key: "release",
+    value: function release(key) {
+      var _this$activeRefs$get2;
+      var count = (_this$activeRefs$get2 = this.activeRefs.get(key)) !== null && _this$activeRefs$get2 !== void 0 ? _this$activeRefs$get2 : 0;
+      if (count <= 1) {
+        this.activeRefs.delete(key);
+      } else {
+        this.activeRefs.set(key, count - 1);
+      }
+    }
+  }, {
+    key: "isInUse",
+    value: function isInUse(key) {
+      var _this$activeRefs$get3;
+      return ((_this$activeRefs$get3 = this.activeRefs.get(key)) !== null && _this$activeRefs$get3 !== void 0 ? _this$activeRefs$get3 : 0) > 0;
+    }
+  }, {
     key: "has",
     value: function has(key) {
       return !!this.cache.find(key);
@@ -69,7 +120,9 @@ var ObjectURLCache = exports.ObjectURLCache = /*#__PURE__*/function () {
     key: "remove",
     value: function remove(key) {
       var removed = this.cache.delete(key);
-      removed && URL.revokeObjectURL(removed.dataURI);
+      this.activeRefs.delete(key);
+      var dataURI = (0, _platformFeatureFlags.fg)('platform_media_safe_blob_url_eviction') ? removed === null || removed === void 0 ? void 0 : removed.dataURI.split('#')[0] : removed === null || removed === void 0 ? void 0 : removed.dataURI;
+      dataURI && URL.revokeObjectURL(dataURI);
     }
   }, {
     key: "clear",

package/dist/cjs/useFilePreview.js

@@ -53,54 +53,20 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     setStatus = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    clientId = _useState4[0],
-    setClientId = _useState4[1];
-
-  // Fetch clientId on mount for cross-client copy
-  (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.fg)('platform_media_cross_client_copy_with_auth')) {
-      mediaClient.getClientId(identifier.collectionName).then(setClientId).catch(function () {
-        // ClientId is optional, silently fail
-      });
-    }
-  }, [mediaClient, identifier.collectionName]);
-
-  // Merge clientId into mediaBlobUrlAttrs for embedding in blob URLs
-  // If mediaBlobUrlAttrs is not provided, construct minimal attrs from identifier
-  var mediaBlobUrlAttrsWithClientId = (0, _react.useMemo)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_media_cross_client_copy_with_auth') || !clientId) {
-      return mediaBlobUrlAttrs;
-    }
-    if (mediaBlobUrlAttrs) {
-      return _objectSpread(_objectSpread({}, mediaBlobUrlAttrs), {}, {
-        clientId: clientId
-      });
-    }
-
-    // Construct minimal attrs when none provided (e.g., MediaImage)
-    return {
-      id: identifier.id,
-      clientId: clientId,
-      contextId: identifier.collectionName || '',
-      collection: identifier.collectionName
-    };
-  }, [mediaBlobUrlAttrs, clientId, identifier.id, identifier.collectionName]);
+    error = _useState4[0],
+    setError = _useState4[1];
   var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
-  var _useState7 = (0, _react.useState)(),
+    nonCriticalError = _useState6[0],
+    setNonCriticalError = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    nonCriticalError = _useState8[0],
-    setNonCriticalError = _useState8[1];
-  var _useState9 = (0, _react.useState)(false),
+    isBannedLocalPreview = _useState8[0],
+    setIsBannedLocalPreview = _useState8[1];
+  var _useState9 = (0, _react.useState)('not-resolved'),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
-    isBannedLocalPreview = _useState0[0],
-    setIsBannedLocalPreview = _useState0[1];
-  var _useState1 = (0, _react.useState)('not-resolved'),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    upfrontPreviewStatus = _useState10[0],
-    setUpfrontPreviewStatus = _useState10[1];
+    upfrontPreviewStatus = _useState0[0],
+    setUpfrontPreviewStatus = _useState0[1];
   var ssrReliabilityRef = (0, _react.useRef)({
     server: {
       status: 'unknown'
@@ -110,10 +76,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     }
   });
   var ufoContext = (0, _interactionContext.useInteractionContext)();
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    isLoading = _useState12[0],
-    setIsLoading = _useState12[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    isLoading = _useState10[0],
+    setIsLoading = _useState10[1];
   (0, _react.useLayoutEffect)(function () {
     if (isLoading && (0, _platformFeatureFlags.fg)('platform_close_image_blindspot_2')) {
       return ufoContext === null || ufoContext === void 0 ? void 0 : ufoContext.hold('img-loading');
@@ -156,7 +122,7 @@ 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, mediaBlobUrlAttrsWithClientId);
+            return (0, _getPreview.getSSRPreview)(ssr, mediaClient, identifier.id, imageURLParams, mediaBlobUrlAttrs);
           } catch (e) {
             ssrReliabilityRef.current = _objectSpread(_objectSpread({}, ssrReliabilityRef.current), {}, (0, _defineProperty2.default)({}, ssr, _objectSpread({
               status: 'fail'
@@ -178,10 +144,10 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       }
     }
   };
-  var _useState13 = (0, _react.useState)(previewInitializer),
-    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    preview = _useState14[0],
-    setPreview = _useState14[1];
+  var _useState11 = (0, _react.useState)(previewInitializer),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    preview = _useState12[0],
+    setPreview = _useState12[1];
 
   //----------------------------------------------------------------
   // FILE STATE
@@ -248,29 +214,11 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     }
   }, [preview, identifier, resizeMode]);
 
-  //----------------------------------------------------------------
-  // Update preview with clientId when it becomes available
-  //----------------------------------------------------------------
-  var previewUpdatedWithClientIdRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    // Only update if we have a preview, clientId is available, URL doesn't already have clientId, and feature flag is enabled.
-    // Also skip if we've already updated this preview (prevents re-render loops)
-    if (preview && clientId && mediaBlobUrlAttrsWithClientId && !preview.dataURI.includes('clientId=') && previewUpdatedWithClientIdRef.current !== identifier.id && (0, _platformFeatureFlags.fg)('platform_media_cross_client_copy_with_auth')) {
-      // Mark this preview as updated
-      previewUpdatedWithClientIdRef.current = identifier.id;
-      var baseUrl = preview.dataURI.split('#')[0]; // Remove any existing hash
-      var updatedDataURI = (0, _mediaClient.addFileAttrsToUrl)(baseUrl, mediaBlobUrlAttrsWithClientId);
-      setPreview(_objectSpread(_objectSpread({}, preview), {}, {
-        dataURI: updatedDataURI
-      }));
-    }
-  }, [clientId, mediaBlobUrlAttrsWithClientId, preview, identifier.id]);
-
   //----------------------------------------------------------------
   // Preview Fetch Helper
   //----------------------------------------------------------------
   var getAndCacheRemotePreviewRef = (0, _helpers.useCurrentValueRef)(function () {
-    return (0, _getPreview.getAndCacheRemotePreview)(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrsWithClientId, traceContext);
+    return (0, _getPreview.getAndCacheRemotePreview)(mediaClient, identifier.id, requestDimensions || {}, imageURLParams, mediaBlobUrlAttrs, traceContext);
   });
 
   //----------------------------------------------------------------
@@ -305,7 +253,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
   // Cache, Local & Remote Preview
   //----------------------------------------------------------------
 
-  var mediaBlobUrlAttrsRef = (0, _helpers.useCurrentValueRef)(mediaBlobUrlAttrsWithClientId);
+  var mediaBlobUrlAttrsRef = (0, _helpers.useCurrentValueRef)(mediaBlobUrlAttrs);
   (0, _react.useEffect)(function () {
     var cachedPreview = _getPreview.mediaFilePreviewCache.get(identifier.id, resizeMode);
 
@@ -319,7 +267,7 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
       // For example, SVGs are mime type NOT supported by browser but media type supported by Media Card (image)
       // Then, local Preview NOT available
       setIsLoading(true);
-      (0, _getPreview.getAndCacheLocalPreview)(identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current).then(setPreview).catch(function (e) {
+      (0, _getPreview.getAndCacheLocalPreview)(mediaClient, identifier.id, localBinary, requestDimensions || {}, resizeMode, mediaBlobUrlAttrsRef.current, identifier.collectionName).then(setPreview).catch(function (e) {
         setIsBannedLocalPreview(true);
         // CXP-2723 TODO: We might have to wrap this error in MediaCardError
         setNonCriticalError(e);
@@ -350,7 +298,19 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
         setIsLoading(false);
       });
     }
-  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus, dimensions]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, identifier.collectionName, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, mediaClient, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus, dimensions]);
+
+  //----------------------------------------------------------------
+  // Cache ref tracking — prevent blob URL eviction while mounted
+  //----------------------------------------------------------------
+  (0, _react.useEffect)(function () {
+    if (preview) {
+      _getPreview.mediaFilePreviewCache.acquire(identifier.id, resizeMode);
+      return function () {
+        _getPreview.mediaFilePreviewCache.release(identifier.id, resizeMode);
+      };
+    }
+  }, [preview, identifier.id, resizeMode]);
 
   //----------------------------------------------------------------
   // RETURN
@@ -467,7 +427,6 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     onImageError: onImageError,
     onImageLoad: onImageLoad,
     getSsrScriptProps: getSsrScriptProps,
-    copyNodeRef: copyNodeRef,
-    clientId: clientId
+    copyNodeRef: copyNodeRef
   };
 };

package/dist/es2019/getPreview/cache.js

@@ -25,6 +25,14 @@ export class CardPreviewCacheImpl {
     _defineProperty(this, "clear", () => {
       this.previewCache.clear();
     });
+    _defineProperty(this, "acquire", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
+      this.previewCache.acquire(cacheKey);
+    });
+    _defineProperty(this, "release", (id, mode) => {
+      const cacheKey = getCacheKey(id, mode);
+      this.previewCache.release(cacheKey);
+    });
     this.previewCache = previewCache;
   }
 }

package/dist/es2019/getPreview/getPreview.js

@@ -1,4 +1,5 @@
 import { addFileAttrsToUrl } from '@atlaskit/media-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SsrPreviewError } from '../errors';
 import { mediaFilePreviewCache } from './cache';
 import { getLocalPreview, getRemotePreview } from './helpers';
@@ -31,16 +32,43 @@ const getDataUri = (mediaClient, id, params, mediaBlobUrlAttrs) => {
   const rawDataURI = mediaClient.getImageUrlSync(id, params);
   return mediaBlobUrlAttrs ? addFileAttrsToUrl(rawDataURI, mediaBlobUrlAttrs) : rawDataURI;
 };
+
+/**
+ * Merges a clientId into mediaBlobUrlAttrs for cross-client copy support.
+ * Returns the original attrs unchanged if clientId is not available or the feature flag is off.
+ */
+const mergeClientIdIntoAttrs = (clientId, id, mediaBlobUrlAttrs, collectionName) => {
+  if (!clientId) {
+    return mediaBlobUrlAttrs;
+  }
+  if (mediaBlobUrlAttrs) {
+    return {
+      ...mediaBlobUrlAttrs,
+      clientId
+    };
+  }
+
+  // Construct minimal attrs when none provided
+  return {
+    id,
+    clientId,
+    contextId: collectionName || '',
+    collection: collectionName
+  };
+};
 export const getSSRPreview = (ssr, mediaClient, id, params, mediaBlobUrlAttrs) => {
   try {
-    const dataURI = getDataUri(mediaClient, id, params, mediaBlobUrlAttrs);
+    // 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);
     let srcSet = `${dataURI} 1x`;
     if (params.width) {
       const doubleDataURI = getDataUri(mediaClient, id, {
         ...params,
         width: params.width * 2,
         height: params.height && params.height * 2
-      }, mediaBlobUrlAttrs);
+      }, attrsWithClientId);
       // We want to embed some meta context into dataURI for Copy/Paste to work.
       srcSet += `, ${doubleDataURI} 2x`;
     }
@@ -70,17 +98,38 @@ export const isSSRPreview = preview => {
   const ssrClientSources = ['ssr-client', 'ssr-server', 'ssr-data'];
   return ssrClientSources.includes(preview.source);
 };
+
+/**
+ * Resolves clientId (sync first, async fallback) and enriches mediaBlobUrlAttrs
+ * with it for cross-client copy support.
+ */
+const enrichAttrsWithClientId = async (mediaClient, id, mediaBlobUrlAttrs, collectionName) => {
+  if (!fg('platform_media_cross_client_copy_with_auth')) {
+    return mediaBlobUrlAttrs;
+  }
+
+  // Try sync first, then async fallback
+  let clientId = mediaClient.getClientIdSync();
+  if (!clientId) {
+    try {
+      clientId = await mediaClient.getClientId(collectionName);
+    } catch {
+      // clientId is optional, silently fail
+    }
+  }
+  return mergeClientIdIntoAttrs(clientId, id, mediaBlobUrlAttrs, collectionName);
+};
 export const getAndCacheRemotePreview = async (mediaClient, id, dimensions, params, mediaBlobUrlAttrs, traceContext) => {
-  const remotePreview = await getRemotePreview(mediaClient, id, params, traceContext);
+  const [remotePreview, enrichedAttrs] = await Promise.all([getRemotePreview(mediaClient, id, params, traceContext), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, params.collection)]);
   return extendAndCachePreview(id, params.mode, {
     ...remotePreview,
     dimensions
-  }, mediaBlobUrlAttrs);
+  }, enrichedAttrs);
 };
-export const getAndCacheLocalPreview = async (id, filePreview, dimensions, mode, mediaBlobUrlAttrs) => {
-  const localPreview = await getLocalPreview(filePreview);
+export const getAndCacheLocalPreview = async (mediaClient, id, filePreview, dimensions, mode, mediaBlobUrlAttrs, collectionName) => {
+  const [localPreview, enrichedAttrs] = await Promise.all([getLocalPreview(filePreview), enrichAttrsWithClientId(mediaClient, id, mediaBlobUrlAttrs, collectionName)]);
   return extendAndCachePreview(id, mode, {
     ...localPreview,
     dimensions
-  }, mediaBlobUrlAttrs);
+  }, enrichedAttrs);
 };