Merge pull request #112 from decentraland/fix/update-schemas

fix: Update schema

package.json

@@ -8,7 +8,7 @@
     "@babylonjs/inspector": "^4.2.2",
     "@babylonjs/loaders": "^4.2.2",
     "@babylonjs/materials": "^4.2.2",
-    "@dcl/schemas": "^9.14.0",
+    "@dcl/schemas": "^11.4.0",
     "@dcl/ui-env": "^1.2.0",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
@@ -71,4 +71,4 @@
     "printWidth": 120
   },
   "homepage": ""
-}
+}

src/components/Preview/Preview.tsx

@@ -30,6 +30,7 @@ const Preview: React.FC = () => {
   const showCanvas = is3D && !isLoading
 
   useEffect(() => {
+    let removeEmoteEvents: () => unknown = () => {}
     if (canvasRef.current && config) {
       let style: React.CSSProperties = { opacity: 1 } // fade in effect
 
@@ -57,7 +58,7 @@ const Preview: React.FC = () => {
             // set new controller as current one
             controller.current = newController
             // handle emote events and forward them as messages
-            handleEmoteEvents(controller.current)
+            removeEmoteEvents = handleEmoteEvents(controller.current)
           })
           .catch((error) => setPreviewError(error.message))
           .finally(() => {
@@ -66,6 +67,10 @@ const Preview: React.FC = () => {
           })
       }
     }
+
+    return () => {
+      removeEmoteEvents()
+    }
   }, [canvasRef.current, config]) // eslint-disable-line
 
   // send a mesasge to the parent window when loaded or error occurs

src/lib/emote-events.ts

@@ -2,18 +2,52 @@ import { IPreviewController, PreviewEmoteEventType, PreviewMessageType, sendMess
 import { EmoteEventPayload } from '@dcl/schemas/dist/dapps/preview/preview-emote-event-payload'
 import { getParent } from './parent'
 
-export function handleEmoteEvents(controller: IPreviewController) {
+export function handleEmoteEvents(controller: IPreviewController): () => void {
   // handle an emote event by forwarding it as a message
-  function handleEvent(type: PreviewEmoteEventType) {
-    controller.emote.events.on(type, (payload: EmoteEventPayload<PreviewEmoteEventType>) =>
-      sendMessage(getParent(), PreviewMessageType.EMOTE_EVENT, { type, payload })
-    )
+
+  const handleAnimationPlay = () => {
+    sendMessage(getParent(), PreviewMessageType.EMOTE_EVENT, {
+      type: PreviewEmoteEventType.ANIMATION_PLAY,
+      payload: undefined,
+    })
+  }
+
+  const handleAnimationPause = () => {
+    sendMessage(getParent(), PreviewMessageType.EMOTE_EVENT, {
+      type: PreviewEmoteEventType.ANIMATION_PAUSE,
+      payload: undefined,
+    })
   }
 
-  // handle all emote event types
-  handleEvent(PreviewEmoteEventType.ANIMATION_PLAY)
-  handleEvent(PreviewEmoteEventType.ANIMATION_PAUSE)
-  handleEvent(PreviewEmoteEventType.ANIMATION_LOOP)
-  handleEvent(PreviewEmoteEventType.ANIMATION_END)
-  handleEvent(PreviewEmoteEventType.ANIMATION_PLAYING)
+  const handleAnimationLoop = () => {
+    sendMessage(getParent(), PreviewMessageType.EMOTE_EVENT, {
+      type: PreviewEmoteEventType.ANIMATION_LOOP,
+      payload: undefined,
+    })
+  }
+
+  const handleAnimationEnd = () => {
+    sendMessage(getParent(), PreviewMessageType.EMOTE_EVENT, {
+      type: PreviewEmoteEventType.ANIMATION_END,
+      payload: undefined,
+    })
+  }
+
+  const handleAnimationPlaying = (payload: EmoteEventPayload<PreviewEmoteEventType>) => {
+    sendMessage(getParent(), PreviewMessageType.EMOTE_EVENT, { type: PreviewEmoteEventType.ANIMATION_PLAYING, payload })
+  }
+
+  controller.emote.events.on(PreviewEmoteEventType.ANIMATION_PLAY, handleAnimationPlay)
+  controller.emote.events.on(PreviewEmoteEventType.ANIMATION_PAUSE, handleAnimationPause)
+  controller.emote.events.on(PreviewEmoteEventType.ANIMATION_LOOP, handleAnimationLoop)
+  controller.emote.events.on(PreviewEmoteEventType.ANIMATION_END, handleAnimationEnd)
+  controller.emote.events.on(PreviewEmoteEventType.ANIMATION_PLAYING, handleAnimationPlaying)
+
+  return () => {
+    controller.emote.events.off(PreviewEmoteEventType.ANIMATION_PLAY, handleAnimationPlay)
+    controller.emote.events.off(PreviewEmoteEventType.ANIMATION_PAUSE, handleAnimationPause)
+    controller.emote.events.off(PreviewEmoteEventType.ANIMATION_LOOP, handleAnimationLoop)
+    controller.emote.events.off(PreviewEmoteEventType.ANIMATION_END, handleAnimationEnd)
+    controller.emote.events.off(PreviewEmoteEventType.ANIMATION_PLAYING, handleAnimationPlaying)
+  }
 }

src/lib/emote.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'events'
+import mitt from 'mitt'
 import { IEmoteController, WearableDefinition, EmoteDefinition } from '@dcl/schemas'
 
 export function isEmote(definition: WearableDefinition | EmoteDefinition | void): definition is EmoteDefinition {
@@ -40,6 +40,6 @@ export function createInvalidEmoteController(): IEmoteController {
     hasSound() {
       throw new InvalidEmoteError()
     },
-    events: new EventEmitter()
+    events: mitt(),
   }
 }