feat: Support Social emote (#144)

* chore: Update @dcl/schemas package

* feat: Parse socialEmote param from url

* feat: Add logic to handle emoteDataADR287 property

* feat: Duplicate avatar when Armature_Other is present in the socialEmote prop

* feat: Use loop and animations specified in socialEmote prop

* feat: Load selectedSound when specified

* docs: Update README

* chore: Update @dcl/schemas package

* feat: Define getSocialEmoteanimations methods in the controller

* feat: Apply color to Avatar Other

* fix: Top level async

* chore: Update @dcl/schemas package

* fix: Use types from @dcl/schemas

* chore: Upgrade @dcl/schemas package

* chore: Upgrade package @dcl/schemas

* feat: Use types from @dcl/schemas

* docs: Update README

* chore: Upgrade @dcl/schemas package

* refactor: Use options from schemas

* refactor: Improve conditions readability

Author: cyaiox

README.md

@@ -14,6 +14,14 @@ This webapp renders an interactive 3D preview of a wearable or an avatar. It can
 - `eyes`: a color to be used by the eyes tint, it must be in hex.
 - `bodyShape`: which body shape to use, possible values are `urn:decentraland:off-chain:base-avatars:BaseMale` or `urn:decentraland:off-chain:base-avatars:BaseFemale`.
 - `emote`: the emote that the avatar will play. Default value is `idle`, other possible values are: `clap`, `dab`, `dance`, `fashion`, `fashion-2`, `fashion-3`,`fashion-4`, `love`, `money`, `fist-pump` and `head-explode`.
+- `socialEmote`: when specified, duplicates the avatar and plays different animations on each avatar to create a social interaction scenario. The structure should be a JSON object with the following properties:
+  - `title` (required): a string describing the social emote (e.g., `"High Five"`)
+  - `loop` (required): a boolean indicating if the animation should loop (e.g., `true`)
+  - `audio` (optional): a string URL for audio to play with the animation
+  - `Armature` (optional): animation for the main avatar (e.g., `{"animation": "HighFive_Start"}`)
+  - `Armature_Prop` (optional): animation for props/objects (e.g., `{"animation": "HighFive_Prop_Start"}`)
+  - `Armature_Other` (optional): animation for the duplicated avatar using AvatarOther\_ nodes (e.g., `{"animation": "HighFive_Other_Start"}`)
+  - Example: `{"title": "High Five", "loop": true, "Armature": {"animation": "HighFive_Start"}, "Armature_Other": {"animation": "HighFive_Other_Start"}}`
 - `zoom`: the level of zoom, it must be a number between 1 and 100.
 - `zoomScale`: a multiplier for the zoom level. By default is `1` but it can be increased to get extra zoom.
 - `camera`: which camera type to use, either `interactive` or `static`. By default it uses the `interactive` one.
@@ -146,7 +154,7 @@ const promises = new Map<string, IFuture<any>>()
 function sendRequest<T>(
   namespace: 'scene' | 'emote',
   method: 'getScreenshot' | 'getMetrics' | 'getLength' | 'isPlaying' | 'goTo' | 'play' | 'pause' | 'stop',
-  params: any[]
+  params: any[],
 ) {
   // create promise
   const promise = future<T>()

package-lock.json

@@ -9,7 +9,7 @@
     "@babylonjs/inspector": "^4.2.2",
     "@babylonjs/loaders": "^4.2.2",
     "@babylonjs/materials": "^4.2.2",
-    "@dcl/schemas": "^18.1.0",
+    "@dcl/schemas": "^20.1.1",
     "@dcl/ui-env": "^1.5.1",
     "classnames": "^2.3.1",
     "decentraland-ui": "^6.17.1",

package.json

@@ -1,5 +1,5 @@
 {
   "NFT_SERVER_URL": "https://nft-api.decentraland.zone",
-  "PEER_URL": "https://peer.decentraland.zone",
+  "PEER_URL": "https://peer-ap1.decentraland.zone",
   "NETWORK": "amoy"
 }

src/config/env/dev.json

@@ -1,18 +1,19 @@
 import { useMemo, useRef, useEffect, useState } from 'react'
-import { BodyShape, PreviewCamera, PreviewEmote, PreviewOptions, PreviewProjection, PreviewType } from '@dcl/schemas'
+import {
+  BodyShape,
+  PreviewCamera,
+  PreviewEmote,
+  PreviewOptions,
+  PreviewProjection,
+  PreviewType,
+  PreviewUnityMode,
+} from '@dcl/schemas'
+import { SocialEmoteAnimation } from '@dcl/schemas/dist/dapps/preview/social-emote-animation'
 import { parseZoom } from '../lib/zoom'
 import { useOverrides } from './useOverrides'
 
-export enum UnityPreviewMode {
-  PROFILE = 'profile',
-  MARKETPLACE = 'marketplace',
-  AUTHENTICATION = 'authentication',
-  BUILDER = 'builder',
-  CONFIGURATOR = 'configurator',
-}
-
 export interface OptionsWithSource {
-  options: PreviewOptions & { mode: UnityPreviewMode | null; disableLoader: boolean }
+  options: PreviewOptions
   overrideSources: Record<string, boolean>
 }
 
@@ -29,7 +30,7 @@ export const useOptions = (): OptionsWithSource => {
     }
   })
 
-  const options = useMemo<PreviewOptions & { mode: UnityPreviewMode | null; disableLoader: boolean }>(() => {
+  const options = useMemo<PreviewOptions>(() => {
     const autoRotateSpeedParam = searchParams.get('autoRotateSpeed') as string | null
     const offsetXParam = searchParams.get('offsetX') as string | null
     const offsetYParam = searchParams.get('offsetY') as string | null
@@ -55,7 +56,7 @@ export const useOptions = (): OptionsWithSource => {
     }
     const centerBoundingBox = searchParams.get('centerBoundingBox') !== 'false'
 
-    const options: PreviewOptions & { mode: UnityPreviewMode | null; disableLoader: boolean } = {
+    const options: PreviewOptions = {
       contractAddress: searchParams.get('contract')!,
       tokenId: searchParams.get('token'),
       itemId: searchParams.get('item'),
@@ -104,9 +105,18 @@ export const useOptions = (): OptionsWithSource => {
       lockAlpha: lockAlpha === 'true',
       lockBeta: lockBeta === 'true',
       lockRadius: lockRadius === 'true',
-      mode: searchParams.get('mode') as UnityPreviewMode | null,
+      unityMode: searchParams.get('mode') as PreviewUnityMode | null,
       disableLoader: searchParams.has('disableLoader'),
       username: searchParams.get('username'),
+      socialEmote: (() => {
+        const socialEmoteParam = searchParams.get('socialEmote')
+        if (!socialEmoteParam) return null
+        try {
+          return JSON.parse(socialEmoteParam) as SocialEmoteAnimation
+        } catch {
+          return null
+        }
+      })(),
     }
 
     return options

src/hooks/useOptions.ts

@@ -9,19 +9,20 @@ import {
   EmoteDefinition,
   PreviewType,
   Avatar,
+  PreviewUnityMode,
 } from '@dcl/schemas'
 import { config } from '../config'
 import { colorToHex, formatHex } from '../lib/color'
 import { fetchItemFromContract, fetchProfile, fetchProfileEntity, sanitizeProfile } from '../lib/config'
-import { UnityPreviewMode, useOptions } from './useOptions'
+import { useOptions } from './useOptions'
 import { isWearable } from '../lib/wearable'
 import { isTexture } from '../lib/representation'
 import { getWearableRepresentationOrDefault } from '../lib/representation'
 import { getRandomDefaultProfile } from '../lib/profile'
 
 export interface UnityPreviewConfig {
   background: Background
-  mode: UnityPreviewMode | null
+  mode: PreviewUnityMode | null
   type: PreviewType
   base64: string | null
   bodyShape: BodyShape | null
@@ -59,7 +60,7 @@ type QueryParams = {
   eyeColor: string
   hairColor: string
   skinColor: string
-  mode: UnityPreviewMode | string
+  mode: PreviewUnityMode | string
   camera: PreviewCamera
   projection: PreviewProjection
   emote: string
@@ -198,7 +199,7 @@ export function useUnityConfig(): [UnityPreviewConfig | null, boolean, string |
         })
 
         // Get camera settings
-        const mode = options.mode || null
+        const mode = options.unityMode || null
         const camera =
           options.camera && Object.values(PreviewCamera).includes(options.camera as PreviewCamera)
             ? (options.camera as PreviewCamera)
@@ -248,7 +249,7 @@ export function useUnityConfig(): [UnityPreviewConfig | null, boolean, string |
             const base64s = toQueryArray(options.base64s)
 
             // For configurator mode, only add mode parameter
-            if (mode === 'configurator') {
+            if (mode === PreviewUnityMode.CONFIG) {
               const queryParams: Partial<QueryParams> = {
                 mode: toQueryValue(mode || ''),
               }