fix: Load smart item asset path (#1062)

* fix: Load smart items path

* fix: Add a small retry when fetching the models to avoid race conditions

* fix: Linter

Author: cyaiox

packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts

@@ -152,7 +152,7 @@ export class SceneContext {
     return null
   }
 
-  async getFile(src: string): Promise<Uint8Array | null> {
+  async getFile(src: string, retryCount = 3): Promise<Uint8Array | null> {
     if (!src) return null
     try {
       // TODO: how we handle this with redux ?
@@ -161,6 +161,12 @@ export class SceneContext {
       const response = await dataLayer.getAssetData({ path: src })
       return response.data
     } catch (err) {
+      if (retryCount > 0) {
+        // Wait for 500ms before retrying
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        console.log(`Retrying fetch for ${src}, attempts remaining: ${retryCount - 1}`)
+        return this.getFile(src, retryCount - 1)
+      }
       console.error('Error fetching file ' + src, err)
       return null
     }

packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/nft.ts

@@ -3,12 +3,12 @@ import { PBNftShape, ComponentType } from '@dcl/ecs'
 
 import type { ComponentOperation } from '../component-operations'
 import { updateGltfForEntity } from './gltf-container'
-import { withAssetDir } from '../../../data-layer/host/fs-utils'
+import { withAssetPacksDir } from '../../../data-layer/host/fs-utils'
 
 export const putNftShapeComponent: ComponentOperation = (entity, component) => {
   if (component.componentType === ComponentType.LastWriteWinElementSet) {
     const newValue = component.getOrNull(entity.entityId) as PBNftShape | null
-    const gltfValue = newValue ? { src: withAssetDir('builder/nft/nft.glb') } : null
+    const gltfValue = newValue ? { src: withAssetPacksDir('nft/nft.glb') } : null
     updateGltfForEntity(entity, gltfValue)
     entity
       .onGltfContainerLoaded()

packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/video-player.ts

@@ -3,12 +3,12 @@ import { PBVideoPlayer, ComponentType } from '@dcl/ecs'
 
 import type { ComponentOperation } from '../component-operations'
 import { updateGltfForEntity } from './gltf-container'
-import { withAssetDir } from '../../../data-layer/host/fs-utils'
+import { withAssetPacksDir } from '../../../data-layer/host/fs-utils'
 
 export const putVideoPlayerComponent: ComponentOperation = (entity, component) => {
   if (component.componentType === ComponentType.LastWriteWinElementSet) {
     const newValue = component.getOrNull(entity.entityId) as PBVideoPlayer | null
-    const gltfValue = newValue ? { src: withAssetDir('builder/video_player/video_player.glb') } : null
+    const gltfValue = newValue ? { src: withAssetPacksDir('video_player/video_player.glb') } : null
     updateGltfForEntity(entity, gltfValue)
     const scaleMult = 1.55
     entity

packages/@dcl/inspector/src/lib/data-layer/host/fs-utils.ts

@@ -31,7 +31,8 @@ export const DIRECTORY = {
   ASSETS: 'assets',
   SCENE: 'scene',
   THUMBNAILS: 'thumbnails',
-  CUSTOM: 'custom'
+  CUSTOM: 'custom',
+  ASSET_PACKS: 'asset-packs'
 }
 
 export const EXTENSIONS = [
@@ -51,6 +52,10 @@ export function withAssetDir(filePath: string = '') {
   return filePath ? `${DIRECTORY.ASSETS}/${filePath}` : DIRECTORY.ASSETS
 }
 
+export function withAssetPacksDir(filePath: string) {
+  return withAssetDir(`${DIRECTORY.ASSET_PACKS}/${filePath}`)
+}
+
 export function isFileInAssetDir(filePath: string = '') {
   return filePath.startsWith(DIRECTORY.ASSETS)
 }