add initial modal for import asset

Author: nicoecheza

packages/@dcl/inspector/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

packages/@dcl/inspector/src/components/FileInput/FileInput.tsx

@@ -16,7 +16,7 @@ export interface InputRef {
 }
 
 export const FileInput = React.forwardRef<InputRef, React.PropsWithChildren<PropTypes>>((props, parentRef) => {
-  const { onDrop } = props
+  const { disabled, onDrop } = props
   const acceptExtensions = Object.values(props.accept ?? []).flat()
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -27,7 +27,7 @@ export const FileInput = React.forwardRef<InputRef, React.PropsWithChildren<Prop
         if (onDrop) onDrop(item.files)
       },
       canDrop(item: { files: File[] }) {
-        return item.files.every((file) => !!acceptExtensions.find((ext) => file.name.endsWith(ext)))
+        return !disabled && item.files.every((file) => !!acceptExtensions.find((ext) => file.name.endsWith(ext)))
       },
       collect: (monitor) => ({
         isHover: monitor.canDrop() && monitor.isOver()
@@ -60,7 +60,7 @@ export const FileInput = React.forwardRef<InputRef, React.PropsWithChildren<Prop
   return (
     <div ref={drop}>
       <input
-        disabled={props.disabled}
+        disabled={disabled}
         ref={inputRef}
         accept={parseAccept(props.accept)}
         type="file"

packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx

@@ -16,12 +16,14 @@ import { TextField } from '../ui/TextField'
 import { Block } from '../Block'
 import { Button } from '../Button'
 import { AssetPreview } from '../AssetPreview'
+import { Modal } from '../Modal'
+import { Input } from '../Input'
+import { InputRef } from '../FileInput/FileInput'
 
-import { processAssets } from './utils'
+import { formatFileName, processAssets, getAssetSize, getAssetResources } from './utils'
 import { Asset } from './types'
 
 import './ImportAsset.css'
-import { InputRef } from '../FileInput/FileInput'
 
 const ACCEPTED_FILE_TYPES = {
   'model/gltf-binary': ['.gltf', '.glb', '.bin'],
@@ -48,6 +50,7 @@ const ImportAsset = React.forwardRef<InputRef, React.PropsWithChildren<PropTypes
   const uploadFile = useAppSelector(selectUploadFile)
 
   const [files, setFiles] = useState<Asset[]>([])
+  const [screenshots, setScreenshots] = useState<Map<string, string>>(new Map())
   const [isHover, setIsHover] = useState(false)
   const { basePath, assets } = catalog ?? { basePath: '', assets: [] }
 
@@ -68,10 +71,20 @@ const ImportAsset = React.forwardRef<InputRef, React.PropsWithChildren<PropTypes
     setIsHover(isHover)
   }, [])
 
-  function removeAsset(asset: Asset) {
+  const removeAsset = useCallback((asset: Asset) => {
     // e.stopPropagation()
     setFiles(files.filter((file) => file.name !== asset.name))
-  }
+  }, [])
+
+  const handleCloseModal = useCallback(() => {
+    setFiles([])
+    setScreenshots(new Map())
+  }, [])
+
+  const handleScreenshot = useCallback((file: Asset) => (thumbnail: string) => {
+    const map = screenshots.set(formatFileName(file), thumbnail)
+    setScreenshots(new Map(map))
+  }, [])
 
   return (
     <div className={cx("ImportAsset", { ImportAssetHover: isHover })}>
@@ -83,7 +96,47 @@ const ImportAsset = React.forwardRef<InputRef, React.PropsWithChildren<PropTypes
             </div>
             <span className="text">Drop {ACCEPTED_FILE_TYPES_STR} files</span>
           </>
-        ) : children}
+        ) : (
+          <>
+            {files.map(($, i) => {
+              const resources = getAssetResources($)
+              return (
+                <div key={i} style={{ display: 'none' }}>
+                  <AssetPreview value={$.blob} resources={resources} onScreenshot={handleScreenshot($)} />
+                </div>
+              )
+            })}
+            {children}
+          </>
+        )}
+        <Modal
+          isOpen={!!files.length}
+          onRequestClose={handleCloseModal}
+          className="ImportAssetModal"
+          overlayClassName="ImportAssetModalOverlay"
+        >
+          <h2>Import Assets</h2>
+          <div className="slider">
+            {files.length > 1 && <span className="counter">{files.length}</span>}
+            <div className="content">
+              {files.length > 1 && <span className="left"></span>}
+              <div className="slides">
+                {files.map(($, i) => {
+                  const name = formatFileName($)
+                  return (
+                    <div className="asset" key={i}>
+                      <img className="thumbnail" src={screenshots.get(name)} />
+                      <Input value={name} />
+                      <span className="size">{getAssetSize($)}</span>
+                    </div>
+                  )
+                })}
+              </div>
+              {files.length > 1 && <span className="right"></span>}
+            </div>
+          </div>
+          <Button type="danger" size="big">IMPORT ALL</Button>
+        </Modal>
       </FileInput>
     </div>
   )

packages/@dcl/inspector/src/components/ImportAsset/types.ts

@@ -26,3 +26,8 @@ export type BabylonValidationIssue = {
   message: string
   pointer: string
 }
+
+export const isGltfAsset = (asset: Asset): asset is GltfAsset => {
+  const _asset = asset as any
+  return _asset.buffers && _asset.images
+}

packages/@dcl/inspector/src/components/ImportAsset/utils.ts

@@ -1,6 +1,6 @@
 import { GLTFValidation } from '@babylonjs/loaders'
 
-import { FileAsset, GltfAsset, BabylonValidationIssue, ValidationError, Asset, Uri, GltfFile } from './types'
+import { FileAsset, GltfAsset, BabylonValidationIssue, ValidationError, Asset, Uri, GltfFile, isGltfAsset } from './types'
 
 const sampleIndex = (list: any[]) => Math.floor(Math.random() * list.length)
 
@@ -148,7 +148,7 @@ function extractFileInfo(fileName: string): [string, string] {
   return match ? [match[1], match[2]?.toLowerCase() || ""] : [fileName, ""]
 }
 
-function formatFileName(file: FileAsset): string {
+export function formatFileName(file: FileAsset): string {
   return `${file.name}.${file.extension}`
 }
 
@@ -225,3 +225,28 @@ export async function processAssets(files: File[]): Promise<Asset[]> {
   const processedFiles = await Promise.all(files.map(processFile))
   return processGltfAssets(processedFiles)
 }
+
+export function normalizeBytes(bytes: number): string {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+  let value = bytes;
+  let unitIndex = 0;
+
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+
+  const roundedValue = Math.round(value * 100) / 100;
+  return `${roundedValue} ${units[unitIndex]}`;
+}
+
+export function getAssetSize(asset: Asset): string {
+  const resources = getAssetResources(asset)
+  const sumSize = resources.reduce((size, resource) => size + resource.size, asset.blob.size)
+  return normalizeBytes(sumSize)
+}
+
+export function getAssetResources(asset: Asset): File[] {
+  if (!isGltfAsset(asset)) return []
+  return [...asset.buffers, ...asset.images].map(($) => $.blob)
+}