@atlaskit/media-file-preview 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-file-preview
 
+## 0.14.1
+
+### Patch Changes
+
+- [`a0a262f68a1ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0a262f68a1ec) -
+  Fixed the issue with SSR previews not refeching higher resolution images when the SSR preview is
+  less wide then the hydration dimensions
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/cjs/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isBigger = exports.createRequestDimensions = void 0;
+exports.isWider = exports.isBigger = exports.createRequestDimensions = void 0;
 exports.useCurrentValueRef = useCurrentValueRef;
 var _react = require("react");
 /**
@@ -25,6 +25,14 @@ var isBigger = exports.isBigger = function isBigger(current, next) {
     return false;
   }
 };
+var isWider = exports.isWider = function isWider(current, next) {
+  if (current === undefined && next !== undefined) {
+    return true;
+  }
+  var currentWidth = (current === null || current === void 0 ? void 0 : current.width) || 0;
+  var nextWidth = (next === null || next === void 0 ? void 0 : next.width) || 0;
+  return currentWidth < nextWidth;
+};
 
 /** Verifies if the current screen is retina display */
 function isRetina() {

package/dist/cjs/useFilePreview.js

@@ -269,7 +269,8 @@ var useFilePreview = exports.useFilePreview = function useFilePreview(_ref) {
     // 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, 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')) {
+      // If the preview is not wider than the requested dimensions, we can skip the refetch
+      if (preview && (0, _getPreview.isSSRPreview)(preview) && !(0, _helpers.isWider)(preview.dimensions, dimensions) && (0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
         return;
       }
       setIsLoading(true);
@@ -286,7 +287,7 @@ 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]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus, dimensions]);
 
   //----------------------------------------------------------------
   // RETURN

package/dist/es2019/helpers.js

@@ -20,6 +20,14 @@ export const isBigger = (current, next) => {
     return false;
   }
 };
+export const isWider = (current, next) => {
+  if (current === undefined && next !== undefined) {
+    return true;
+  }
+  const currentWidth = (current === null || current === void 0 ? void 0 : current.width) || 0;
+  const nextWidth = (next === null || next === void 0 ? void 0 : next.width) || 0;
+  return currentWidth < nextWidth;
+};
 
 /** Verifies if the current screen is retina display */
 function isRetina() {

package/dist/es2019/useFilePreview.js

@@ -8,7 +8,7 @@ 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 { generateScriptProps, getSSRData } from './globalScope';
-import { createRequestDimensions, isBigger, useCurrentValueRef } from './helpers';
+import { createRequestDimensions, isBigger, isWider, useCurrentValueRef } from './helpers';
 // invisible gif for SSR preview to show the underlying spinner until the src is replaced by
 // the actual image src in the inline script
 const DEFAULT_SSR_PREVIEW = {
@@ -240,7 +240,8 @@ export const useFilePreview = ({
     // 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, 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')) {
+      // If the preview is not wider than the requested dimensions, we can skip the refetch
+      if (preview && isSSRPreview(preview) && !isWider(preview.dimensions, dimensions) && fg('media-perf-uplift-mutation-fix')) {
         return;
       }
       setIsLoading(true);
@@ -257,7 +258,7 @@ export const useFilePreview = ({
         setIsLoading(false);
       });
     }
-  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus, dimensions]);
 
   //----------------------------------------------------------------
   // RETURN

package/dist/esm/helpers.js

@@ -18,6 +18,14 @@ export var isBigger = function isBigger(current, next) {
     return false;
   }
 };
+export var isWider = function isWider(current, next) {
+  if (current === undefined && next !== undefined) {
+    return true;
+  }
+  var currentWidth = (current === null || current === void 0 ? void 0 : current.width) || 0;
+  var nextWidth = (next === null || next === void 0 ? void 0 : next.width) || 0;
+  return currentWidth < nextWidth;
+};
 
 /** Verifies if the current screen is retina display */
 function isRetina() {

package/dist/esm/useFilePreview.js

@@ -12,7 +12,7 @@ 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 { generateScriptProps, getSSRData } from './globalScope';
-import { createRequestDimensions, isBigger, useCurrentValueRef } from './helpers';
+import { createRequestDimensions, isBigger, isWider, useCurrentValueRef } from './helpers';
 // invisible gif for SSR preview to show the underlying spinner until the src is replaced by
 // the actual image src in the inline script
 var DEFAULT_SSR_PREVIEW = {
@@ -262,7 +262,8 @@ export var useFilePreview = function useFilePreview(_ref) {
     // 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, 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')) {
+      // If the preview is not wider than the requested dimensions, we can skip the refetch
+      if (preview && isSSRPreview(preview) && !isWider(preview.dimensions, dimensions) && fg('media-perf-uplift-mutation-fix')) {
         return;
       }
       setIsLoading(true);
@@ -279,7 +280,7 @@ export var useFilePreview = function useFilePreview(_ref) {
         setIsLoading(false);
       });
     }
-  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus]);
+  }, [error, nonCriticalError, getAndCacheRemotePreviewRef, identifier.id, resizeMode, isBannedLocalPreview, mediaBlobUrlAttrsRef, preview, requestDimensions, skipRemote, isBackendPreviewReady, localBinary, mediaType, mimeType, upfrontPreviewStatus, dimensions]);
 
   //----------------------------------------------------------------
   // RETURN

package/dist/types/helpers.d.ts

@@ -5,6 +5,7 @@ import { type MediaFilePreviewDimensions } from './types';
  * If a single dimension is undefined, returns false
  */
 export declare const isBigger: (current?: MediaFilePreviewDimensions, next?: MediaFilePreviewDimensions) => boolean;
+export declare const isWider: (current?: MediaFilePreviewDimensions, next?: MediaFilePreviewDimensions) => boolean;
 export declare const createRequestDimensions: (dimensions: Partial<MediaFilePreviewDimensions>) => Partial<MediaFilePreviewDimensions> | undefined;
 /** Stores the provided value in a ref object to avoid "component rerenders" when the value is used as a hook dependency */
 export declare function useCurrentValueRef<T>(value: T): MutableRefObject<T>;

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

@@ -5,6 +5,7 @@ import { type MediaFilePreviewDimensions } from './types';
  * If a single dimension is undefined, returns false
  */
 export declare const isBigger: (current?: MediaFilePreviewDimensions, next?: MediaFilePreviewDimensions) => boolean;
+export declare const isWider: (current?: MediaFilePreviewDimensions, next?: MediaFilePreviewDimensions) => boolean;
 export declare const createRequestDimensions: (dimensions: Partial<MediaFilePreviewDimensions>) => Partial<MediaFilePreviewDimensions> | undefined;
 /** Stores the provided value in a ref object to avoid "component rerenders" when the value is used as a hook dependency */
 export declare function useCurrentValueRef<T>(value: T): MutableRefObject<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-file-preview",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"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",
@@ -35,7 +35,7 @@
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/react-ufo": "^4.14.0",
+		"@atlaskit/react-ufo": "^4.15.0",
 		"@babel/runtime": "^7.0.0",
 		"eventemitter2": "^4.1.0",
 		"lru_map": "^0.4.1"