Fix asset store preview (#4729)

Do not show in changelog

Author: AlexandreSi

newIDE/app/src/AssetStore/AssetDetails.js

@@ -40,6 +40,7 @@ import {
   getUserPublicProfilesByIds,
   type UserPublicProfile,
 } from '../Utils/GDevelopServices/User';
+import { getPixelatedImageRendering } from '../Utils/CssHelpers';
 
 const FIXED_HEIGHT = 250;
 const FIXED_WIDTH = 300;
@@ -64,6 +65,10 @@ const styles = {
     maxHeight: '100%',
     verticalAlign: 'middle',
     pointerEvents: 'none',
+    // Compromise between having a preview of the asset slightly more zoomed
+    // compared to the search results and a not too zoomed image for small
+    // smooth assets that could give a sense of bad quality.
+    flex: 0.6,
   },
   arrowContainer: {
     padding: 6,
@@ -153,6 +158,15 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
       },
     }));
 
+    const getImagePreviewStyle = (assetShortHeader: Asset) => {
+      return {
+        ...styles.previewImage,
+        imageRendering: isPixelArt(assetShortHeader)
+          ? getPixelatedImageRendering()
+          : undefined,
+      };
+    };
+
     const loadAsset = React.useCallback(
       () => {
         (async () => {
@@ -293,7 +307,7 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
                     </Text>
                     {!!assetAuthors &&
                       assetAuthors.map(author => (
-                        <Text size="body">
+                        <Text size="body" key={author.name}>
                           <Link
                             key={author.name}
                             href={author.website}
@@ -310,7 +324,7 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
                         const username =
                           userPublicProfile.username || 'GDevelop user';
                         return (
-                          <Text size="body">
+                          <Text size="body" key={userPublicProfile.id}>
                             <Link
                               key={userPublicProfile.id}
                               href="#"
@@ -391,13 +405,13 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
                     <div style={styles.previewBackground}>
                       {isAssetPrivate ? (
                         <AuthorizedAssetImage
-                          style={styles.previewImage}
+                          style={getImagePreviewStyle(asset)}
                           url={asset.previewImageUrls[0]}
                           alt={asset.name}
                         />
                       ) : (
                         <CorsAwareImage
-                          style={styles.previewImage}
+                          style={getImagePreviewStyle(asset)}
                           src={asset.previewImageUrls[0]}
                           alt={asset.name}
                         />

newIDE/app/src/ResourcesEditor/ResourcePropertiesEditor/index.js

@@ -21,7 +21,7 @@ const styles = {
     padding: 8,
     overflowY: 'scroll',
     overflowX: 'hidden',
-    flex: 2,
+    flex: 1,
   },
 };
 

newIDE/app/src/ResourcesList/ResourcePreview/ImagePreview.js

@@ -29,7 +29,7 @@ import {
 const gd: libGDevelop = global.gd;
 
 const MARGIN = 50;
-const SPRITE_MARGIN_RATIO = 1.3;
+const SPRITE_MARGIN_RATIO = 1.5;
 
 const styles = {
   previewImagePixelated: {
@@ -167,10 +167,14 @@ const ImagePreview = ({
   // the zoom factor to the image.
   React.useEffect(
     () => {
-      if (hasZoomBeenAdaptedToImageRef.current) return;
+      if (hasZoomBeenAdaptedToImageRef.current || initialZoom) {
+        // Do not adapt zoom to image if a zoom as been provided in the props
+        // or if the zoom has already been adapted.
+        return;
+      }
       hasZoomBeenAdaptedToImageRef.current = adaptZoomFactorToImage();
     },
-    [adaptZoomFactorToImage]
+    [adaptZoomFactorToImage, initialZoom]
   );
 
   const handleImageLoaded = (e: any) => {