fix: Thumbnail image too big (#1578)

* fix: Thumbnail image too big

* chore: Change size of assets' thumbnails

Co-authored-by: Juan Cazala <juan@decentraland.org>

src/components/AssetImporter/AssetImporter.tsx

@@ -267,7 +267,9 @@ export default class AssetImporter<T extends MixedAssetPack = RawAssetPack> exte
           let mappings = rawMappingsToObjectURL(outFile.asset.contents)
           const { image, info } = await getModelData(mappings[outFile.asset.model], {
             mappings,
-            thumbnailType: outFile.asset.category === GROUND_CATEGORY ? ThumbnailType.TOP : ThumbnailType.DEFAULT
+            thumbnailType: outFile.asset.category === GROUND_CATEGORY ? ThumbnailType.TOP : ThumbnailType.DEFAULT,
+            width: 256,
+            height: 256
           })
           revokeMappingsObjectURL(mappings)
 

src/components/AssetsEditor/SingleAssetEditor/SingleAssetEditor.tsx

@@ -79,7 +79,9 @@ export default class SingleAssetEditor<T extends RawAsset | Asset> extends React
 
     const { image } = await getModelData(mappings[asset.model], {
       mappings,
-      thumbnailType: ground ? ThumbnailType.TOP : ThumbnailType.DEFAULT
+      thumbnailType: ground ? ThumbnailType.TOP : ThumbnailType.DEFAULT,
+      width: 256,
+      height: 256
     })
     revokeMappingsObjectURL(mappings)
 

src/components/Modals/CreateItemModal/CreateItemModal.tsx

@@ -462,8 +462,8 @@ export default class CreateItemModal extends React.PureComponent<Props, State> {
     } else {
       const url = URL.createObjectURL(contents[model])
       const { image, info } = await getModelData(url, {
-        width: 256,
-        height: 256,
+        width: 512,
+        height: 512,
         extension: getExtension(model) || undefined,
         engine: EngineType.BABYLON
       })
@@ -495,6 +495,8 @@ export default class CreateItemModal extends React.PureComponent<Props, State> {
       } else {
         const url = URL.createObjectURL(contents![model!])
         const { image } = await getModelData(url, {
+          width: 512,
+          height: 512,
           thumbnailType: getThumbnailType(category),
           extension: (model && getExtension(model)) || undefined,
           engine: EngineType.BABYLON

src/lib/getScreenshot.ts

@@ -139,15 +139,9 @@ export async function getScreenshot(url: string, options: Partial<Options> = {})
   const center = parent.getBoundingInfo().boundingBox.center.multiply(scale)
   parent.position.subtractInPlace(center)
 
-  // render
-  const imageFuture = future<string>()
-  const imageResolver = (data: string) => imageFuture.resolve(data)
-  Tools.CreateScreenshotUsingRenderTarget(engine, camera, 1024, imageResolver, undefined, undefined, true)
-  const image = await imageFuture
-
   // remove dom element
   document.body.removeChild(canvas)
 
-  // return image
-  return image
+  // render
+  return Tools.CreateScreenshotUsingRenderTargetAsync(engine, camera, { width, height }, undefined, undefined, true)
 }

src/modules/item/utils.ts

@@ -26,6 +26,7 @@ import {
   InitializeItem
 } from './types'
 import { sortByCreatedAt } from 'lib/sort'
+import { NO_CACHE_HEADERS } from 'lib/headers'
 
 export const MAX_FILE_SIZE = 2097152 // 2MB
 export const MAX_NFTS_PER_MINT = 50
@@ -58,7 +59,7 @@ export function getBodyShapeType(item: Item): BodyShapeType {
   } else if (hasFemale) {
     return BodyShapeType.FEMALE
   } else {
-    throw new Error(`Couldn\'t find a valid representantion: ${JSON.stringify(item.data.representations, null, 2)}`)
+    throw new Error(`Couldn\'t find a valid representation: ${JSON.stringify(item.data.representations, null, 2)}`)
   }
 }
 
@@ -153,7 +154,7 @@ export function toItemObject(items: Item[]) {
 
 export async function generateImage(item: Item, width = 256, height = 256) {
   // fetch thumbnail
-  const response = await fetch(getContentsStorageUrl(item.contents[item.thumbnail]))
+  const response = await fetch(getContentsStorageUrl(item.contents[item.thumbnail]), { headers: NO_CACHE_HEADERS })
   if (!response.ok) throw new Error(`Error generating the image: ${response.statusText}`)
 
   const thumbnail = await response.blob()