@atlaskit/media-file-preview 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-file-preview
 
+## 0.14.0
+
+### Minor Changes
+
+- [`0fca09ae4fa6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fca09ae4fa6d) -
+  Removing the blob URL conversion and fixing the unnecessary dual fetching of images when VC fixes
+  are active
+
 ## 0.13.0
 
 ### Minor Changes

package/dist/cjs/globalScope/globalScope.js

@@ -1,6 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,10 +7,7 @@ exports.getKey = exports.generateScriptProps = exports.GLOBAL_MEDIA_NAMESPACE =
 exports.getMediaCardSSR = getMediaCardSSR;
 exports.getMediaGlobalScope = getMediaGlobalScope;
 exports.storeDataURI = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _printScript = require("./printScript");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // ----- WARNING -----
 // This is a very sensitive fraction of code.
 // Any changes to this file must be tested directly in product before merging.
@@ -65,34 +61,23 @@ var storeDataURI = exports.storeDataURI = function storeDataURI(key, paramDataUR
     if (img && srcSet) {
       img.srcset = srcSet;
     }
+    var loadPromise = new Promise(function (resolve, reject) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      img === null || img === void 0 || img.addEventListener('load', function () {
+        resolve(void 0);
+      });
 
-    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-    img === null || img === void 0 || img.addEventListener('load', function () {
-      if (img.currentSrc.startsWith('blob:')) {
-        return;
-      }
-      fetch(img.currentSrc).then(function (res) {
-        return res.blob();
-      }).then(function (blob) {
-        return URL.createObjectURL(blob);
-      }).then(function (blobUrl) {
-        img.src = blobUrl;
-        img.srcset = '';
-        mediaCardSsr[key] = _objectSpread(_objectSpread({}, mediaCardSsr[key]), {}, {
-          dataURI: blobUrl,
-          srcSet: ''
-        });
-      }).catch(function (err) {
-        mediaCardSsr[key] = _objectSpread(_objectSpread({}, mediaCardSsr[key]), {}, {
-          error: err
-        });
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      img === null || img === void 0 || img.addEventListener('error', function () {
+        reject(new Error('Failed to load image'));
       });
     });
     mediaCardSsr[key] = isPreviousImageLarger ? prevData : {
       dataURI: dataURI,
       dimensions: dimensions,
       error: error,
-      srcSet: srcSet
+      srcSet: srcSet,
+      loadPromise: loadPromise
     };
   } else {
     mediaCardSsr[key] = {

package/dist/cjs/useFilePreview.js

@@ -184,6 +184,25 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     }
   }, [preview, status, fileState, isBackendPreviewReady, fileStateErrorMessage, upfrontPreviewStatus]);
 
+  //----------------------------------------------------------------
+  // SSR Loading
+  //----------------------------------------------------------------
+
+  (0, _react.useEffect)(function () {
+    var _getSSRData;
+    if (!(0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
+      return;
+    }
+    var loadPromise = (_getSSRData = (0, _globalScope.getSSRData)(identifier, resizeMode)) === null || _getSSRData === void 0 ? void 0 : _getSSRData.loadPromise;
+    if (preview && (0, _getPreview.isSSRDataPreview)(preview) && loadPromise) {
+      loadPromise.then(function () {
+        setStatus('complete');
+      }).catch(function () {
+        setPreview(undefined);
+      });
+    }
+  }, [preview, identifier, resizeMode]);
+
   //----------------------------------------------------------------
   // Preview Fetch Helper
   //----------------------------------------------------------------
@@ -249,8 +268,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     else if (!error && !nonCriticalError && (!preview || (0, _helpers.isBigger)(preview.dimensions, requestDimensions) ||
     // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
     (0, _getPreview.isSSRPreview)(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
-      // If the preview is SSR and it's a blob URL, we can skip the refetch
-      if (preview && (0, _getPreview.isSSRPreview)(preview) && preview.dataURI.startsWith('blob:') && (0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
+      // If the preview is SSR, we can skip the refetch as it will be handled by the global scope promise
+      if (preview && (0, _getPreview.isSSRPreview)(preview) && (0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
         return;
       }
       setIsLoading(true);

package/dist/es2019/globalScope/globalScope.js

@@ -45,32 +45,23 @@ export const storeDataURI = (key, paramDataURI, paramMode, paramSrcSet, dimensio
     if (img && srcSet) {
       img.srcset = srcSet;
     }
+    const loadPromise = new Promise((resolve, reject) => {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      img === null || img === void 0 ? void 0 : img.addEventListener('load', () => {
+        resolve(void 0);
+      });
 
-    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-    img === null || img === void 0 ? void 0 : img.addEventListener('load', () => {
-      if (img.currentSrc.startsWith('blob:')) {
-        return;
-      }
-      fetch(img.currentSrc).then(res => res.blob()).then(blob => URL.createObjectURL(blob)).then(blobUrl => {
-        img.src = blobUrl;
-        img.srcset = '';
-        mediaCardSsr[key] = {
-          ...mediaCardSsr[key],
-          dataURI: blobUrl,
-          srcSet: ''
-        };
-      }).catch(err => {
-        mediaCardSsr[key] = {
-          ...mediaCardSsr[key],
-          error: err
-        };
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      img === null || img === void 0 ? void 0 : img.addEventListener('error', () => {
+        reject(new Error('Failed to load image'));
       });
     });
     mediaCardSsr[key] = isPreviousImageLarger ? prevData : {
       dataURI,
       dimensions,
       error,
-      srcSet
+      srcSet,
+      loadPromise
     };
   } else {
     mediaCardSsr[key] = {

package/dist/es2019/useFilePreview.js

@@ -153,6 +153,25 @@ export const useFilePreview = ({
     }
   }, [preview, status, fileState, isBackendPreviewReady, fileStateErrorMessage, upfrontPreviewStatus]);
 
+  //----------------------------------------------------------------
+  // SSR Loading
+  //----------------------------------------------------------------
+
+  useEffect(() => {
+    var _getSSRData;
+    if (!fg('media-perf-uplift-mutation-fix')) {
+      return;
+    }
+    const loadPromise = (_getSSRData = getSSRData(identifier, resizeMode)) === null || _getSSRData === void 0 ? void 0 : _getSSRData.loadPromise;
+    if (preview && isSSRDataPreview(preview) && loadPromise) {
+      loadPromise.then(() => {
+        setStatus('complete');
+      }).catch(() => {
+        setPreview(undefined);
+      });
+    }
+  }, [preview, identifier, resizeMode]);
+
   //----------------------------------------------------------------
   // Preview Fetch Helper
   //----------------------------------------------------------------
@@ -220,8 +239,8 @@ export const useFilePreview = ({
     else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
     // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
     isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
-      // If the preview is SSR and it's a blob URL, we can skip the refetch
-      if (preview && isSSRPreview(preview) && preview.dataURI.startsWith('blob:') && fg('media-perf-uplift-mutation-fix')) {
+      // If the preview is SSR, we can skip the refetch as it will be handled by the global scope promise
+      if (preview && isSSRPreview(preview) && fg('media-perf-uplift-mutation-fix')) {
         return;
       }
       setIsLoading(true);

package/dist/esm/globalScope/globalScope.js

@@ -1,6 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { printFunctionCall, printScript } from './printScript';
 // ----- WARNING -----
 // This is a very sensitive fraction of code.
@@ -55,34 +52,23 @@ export var storeDataURI = function storeDataURI(key, paramDataURI, paramMode, pa
     if (img && srcSet) {
       img.srcset = srcSet;
     }
+    var loadPromise = new Promise(function (resolve, reject) {
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      img === null || img === void 0 || img.addEventListener('load', function () {
+        resolve(void 0);
+      });
 
-    // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-    img === null || img === void 0 || img.addEventListener('load', function () {
-      if (img.currentSrc.startsWith('blob:')) {
-        return;
-      }
-      fetch(img.currentSrc).then(function (res) {
-        return res.blob();
-      }).then(function (blob) {
-        return URL.createObjectURL(blob);
-      }).then(function (blobUrl) {
-        img.src = blobUrl;
-        img.srcset = '';
-        mediaCardSsr[key] = _objectSpread(_objectSpread({}, mediaCardSsr[key]), {}, {
-          dataURI: blobUrl,
-          srcSet: ''
-        });
-      }).catch(function (err) {
-        mediaCardSsr[key] = _objectSpread(_objectSpread({}, mediaCardSsr[key]), {}, {
-          error: err
-        });
+      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+      img === null || img === void 0 || img.addEventListener('error', function () {
+        reject(new Error('Failed to load image'));
       });
     });
     mediaCardSsr[key] = isPreviousImageLarger ? prevData : {
       dataURI: dataURI,
       dimensions: dimensions,
       error: error,
-      srcSet: srcSet
+      srcSet: srcSet,
+      loadPromise: loadPromise
     };
   } else {
     mediaCardSsr[key] = {

package/dist/esm/useFilePreview.js

@@ -177,6 +177,25 @@ export var useFilePreview = function useFilePreview(_ref) {
     }
   }, [preview, status, fileState, isBackendPreviewReady, fileStateErrorMessage, upfrontPreviewStatus]);
 
+  //----------------------------------------------------------------
+  // SSR Loading
+  //----------------------------------------------------------------
+
+  useEffect(function () {
+    var _getSSRData;
+    if (!fg('media-perf-uplift-mutation-fix')) {
+      return;
+    }
+    var loadPromise = (_getSSRData = getSSRData(identifier, resizeMode)) === null || _getSSRData === void 0 ? void 0 : _getSSRData.loadPromise;
+    if (preview && isSSRDataPreview(preview) && loadPromise) {
+      loadPromise.then(function () {
+        setStatus('complete');
+      }).catch(function () {
+        setPreview(undefined);
+      });
+    }
+  }, [preview, identifier, resizeMode]);
+
   //----------------------------------------------------------------
   // Preview Fetch Helper
   //----------------------------------------------------------------
@@ -242,8 +261,8 @@ export var useFilePreview = function useFilePreview(_ref) {
     else if (!error && !nonCriticalError && (!preview || isBigger(preview.dimensions, requestDimensions) ||
     // We always refetch SSR preview to be able to browser-cache a version without the token in the query parameters
     isSSRPreview(preview)) && !skipRemote && upfrontPreviewStatus === 'resolved' && isBackendPreviewReady) {
-      // If the preview is SSR and it's a blob URL, we can skip the refetch
-      if (preview && isSSRPreview(preview) && preview.dataURI.startsWith('blob:') && fg('media-perf-uplift-mutation-fix')) {
+      // If the preview is SSR, we can skip the refetch as it will be handled by the global scope promise
+      if (preview && isSSRPreview(preview) && fg('media-perf-uplift-mutation-fix')) {
         return;
       }
       setIsLoading(true);

package/dist/types/globalScope/types.d.ts

@@ -6,5 +6,6 @@ export type MediaCardSsrData = {
     error?: MediaFilePreviewErrorInfo;
     mode?: string;
     srcSet?: string;
+    loadPromise?: Promise<void>;
 };
 export type MediaCardSsr = Record<string, MediaCardSsrData>;

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

@@ -6,5 +6,6 @@ export type MediaCardSsrData = {
     error?: MediaFilePreviewErrorInfo;
     mode?: string;
     srcSet?: string;
+    loadPromise?: Promise<void>;
 };
 export type MediaCardSsr = Record<string, MediaCardSsrData>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-file-preview",
-	"version": "0.13.0",
+	"version": "0.14.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",
@@ -51,6 +51,7 @@
 		"@atlaskit/media-test-data": "^3.2.0",
 		"@atlaskit/section-message": "^8.9.0",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"react-dom": "^18.2.0",