feat: support blobs that are ADR74 emotes (#2314)

* feat: support blobs that are ADR74 emotes

* chore: bump decentraland-ui

* chore: remove any

* chore: remove unused WearableWithBlobs type

* fix: check if type is emote and use right helper to generate blob

* chore: remove main image file since emotes can't be images

Co-authored-by: Juanma Hidalgo <juanma06@gmail.com>

Author: cazala

package-lock.json

@@ -9,7 +9,7 @@
     "@dcl/content-hash-tree": "^1.1.3",
     "@dcl/crypto": "^3.0.1",
     "@dcl/hashing": "^1.1.0",
-    "@dcl/schemas": "^5.13.0",
+    "@dcl/schemas": "^5.17.1",
     "@dcl/ui-env": "^1.2.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^11.0.0",
@@ -31,7 +31,7 @@
     "decentraland-ecs": "file:ecs/decentraland-ecs-6.6.1-20201020183014.commit-bdc29ef-hotfix.tgz",
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^1.37.0",
-    "decentraland-ui": "^3.49.0",
+    "decentraland-ui": "^3.52.0",
     "ethers": "^5.6.8",
     "file-saver": "^2.0.1",
     "graphql": "^15.8.0",

package.json

@@ -53,7 +53,7 @@ import {
 } from 'modules/item/utils'
 import ImportStep from './ImportStep/ImportStep'
 import EditThumbnailStep from './EditThumbnailStep/EditThumbnailStep'
-import { getThumbnailType, toWearableWithBlobs } from './utils'
+import { getThumbnailType, toEmoteWithBlobs, toWearableWithBlobs } from './utils'
 import EditPriceAndBeneficiaryModal from '../EditPriceAndBeneficiaryModal'
 import {
   Props,
@@ -603,7 +603,7 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
   renderWearablePreview = () => {
     const { type, contents } = this.state
     const isEmote = type === ItemType.EMOTE
-    const blob = contents ? toWearableWithBlobs({ contents, isEmote }) : undefined
+    const blob = contents ? (isEmote ? toEmoteWithBlobs({ contents }) : toWearableWithBlobs({ contents })) : undefined
     if (!blob) {
       return null
     }
@@ -945,7 +945,7 @@ export default class CreateSingleItemModal extends React.PureComponent<Props, St
     return (
       <EditThumbnailStep
         isLoading={!!isLoading}
-        blob={contents ? toWearableWithBlobs({ contents, isEmote: true }) : undefined}
+        blob={contents ? toEmoteWithBlobs({ contents }) : undefined}
         title={this.renderModalTitle()}
         onBack={() => this.setState({ view: CreateItemView.DETAILS })}
         onSave={this.handleOnScreenshotTaken}

src/components/Modals/CreateSingleItemModal/CreateSingleItemModal.tsx

@@ -1,4 +1,4 @@
-import { IPreviewController, WearableWithBlobs } from '@dcl/schemas'
+import { EmoteWithBlobs, IPreviewController } from '@dcl/schemas'
 import { Item } from 'modules/item/types'
 import React from 'react'
 
@@ -18,7 +18,7 @@ export enum ControlOptionAction {
 export type Props = {
   title: string
   isLoading: boolean
-  blob?: WearableWithBlobs
+  blob?: EmoteWithBlobs
   base64s?: string[]
   wearablePreviewComponent?: React.ReactNode
   wearablePreviewController?: IPreviewController
@@ -31,7 +31,7 @@ export type State = {
   hasBeenUpdated: boolean
   playingIntervalId?: NodeJS.Timer
   previewController?: IPreviewController
-  blob?: WearableWithBlobs
+  blob?: EmoteWithBlobs
   zoom: number
   offsetY?: number
 }

src/components/Modals/CreateSingleItemModal/EditThumbnailStep/EditThumbnailStep.types.ts

@@ -1,4 +1,4 @@
-import { BodyShape, WearableCategory, WearableWithBlobs } from '@dcl/schemas'
+import { BodyShape, EmoteCategory, EmoteWithBlobs, WearableCategory, WearableWithBlobs } from '@dcl/schemas'
 import { ThumbnailType } from 'lib/getModelData'
 import { isImageFile, isModelFile } from 'modules/item/utils'
 
@@ -18,15 +18,7 @@ export const getThumbnailType = (category: WearableCategory) => {
   }
 }
 
-export function toWearableWithBlobs({
-  contents,
-  file,
-  isEmote = false
-}: {
-  contents?: Record<string, Blob>
-  file?: File
-  isEmote: boolean
-}): WearableWithBlobs {
+export function toWearableWithBlobs({ contents, file }: { contents?: Record<string, Blob>; file?: File }): WearableWithBlobs {
   const mainGLBFile = contents && Object.keys(contents).find(content => isModelFile(content))
   const mainPNGFile = contents && Object.keys(contents).find(content => isImageFile(content))
   const mainFile = mainGLBFile || mainPNGFile
@@ -63,7 +55,42 @@ export function toWearableWithBlobs({
           overrideReplaces: []
         }
       ]
-    },
-    ...(isEmote ? { emoteDataV0: { loop: false } } : {})
+    }
+  }
+}
+
+export function toEmoteWithBlobs({ contents, file }: { contents?: Record<string, Blob>; file?: File }): EmoteWithBlobs {
+  const mainFile = contents && Object.keys(contents).find(content => isModelFile(content))
+  if (contents && !mainFile) {
+    throw Error('Not valid main content')
+  }
+  return {
+    id: 'some-id',
+    name: '',
+    description: '',
+    image: '',
+    thumbnail: '',
+    i18n: [],
+    emoteDataADR74: {
+      category: EmoteCategory.DANCE,
+      tags: [],
+      representations: [
+        {
+          bodyShapes: [BodyShape.MALE, BodyShape.FEMALE],
+          mainFile: mainFile || 'model.glb',
+          contents: contents
+            ? Object.entries(contents).map(([key, value]) => ({ key, blob: value }))
+            : file
+            ? [
+                {
+                  key: 'model.glb',
+                  blob: file
+                }
+              ]
+            : []
+        }
+      ],
+      loop: false
+    }
   }
 }

src/components/Modals/CreateSingleItemModal/utils.ts

@@ -5,7 +5,7 @@ import { toBase64 } from 'modules/editor/utils'
 import ImportStep from 'components/Modals/CreateSingleItemModal/ImportStep/ImportStep'
 import EditThumbnailStep from 'components/Modals/CreateSingleItemModal/EditThumbnailStep/EditThumbnailStep'
 import { AcceptedFileProps, CreateItemView } from 'components/Modals/CreateSingleItemModal/CreateSingleItemModal.types'
-import { toWearableWithBlobs } from 'components/Modals/CreateSingleItemModal/utils'
+import { toEmoteWithBlobs } from 'components/Modals/CreateSingleItemModal/utils'
 import { Props, State } from './EditThumbnailModal.types'
 import './EditThumbnailModal.css'
 
@@ -61,7 +61,7 @@ export default class EditThumbnailModal extends React.PureComponent<Props, State
 
     let wearablePreviewProp
     if (file) {
-      wearablePreviewProp = { blob: toWearableWithBlobs({ file, isEmote: true }) }
+      wearablePreviewProp = { blob: toEmoteWithBlobs({ file }) }
     } else if (item) {
       wearablePreviewProp = { base64s: [toBase64(item)] }
     }