fix: Play emotes when selecting them in the LeftPanel

package.json

@@ -43,7 +43,7 @@
     "decentraland-experiments": "^1.0.2",
     "decentraland-transactions": "^2.24.1",
     "decentraland-ui": "^6.24.0",
-    "decentraland-ui2": "^0.44.1",
+    "decentraland-ui2": "^0.45.2",
     "ethers": "^5.6.8",
     "fast-equals": "^5.3.0",
     "file-saver": "^2.0.1",

src/components/ItemEditorPage/CenterPanel/CenterPanel.css

@@ -144,30 +144,31 @@
 }
 
 .CenterPanel .emote-controls {
-  padding: 4px;
+  padding: 0;
   background: #242129;
   position: relative;
 }
 
-.CenterPanel .emote-controls .ui.button.sound-control {
-  margin: 0 15px;
-}
-
-.CenterPanel .EmoteControls {
-  padding: 0;
-}
-
-.CenterPanel .EmoteControls .frame-control {
-  margin: 4px;
-  margin-left: 0;
+/* Emote Controls Styles */
+.CenterPanel .emote-controls .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
+.CenterPanel .emote-controls .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
+  color: white;
+  background-color: unset;
 }
 
-.CenterPanel .EmoteControls .ui.button.play-control {
+/* Play Control Button */
+.CenterPanel .emote-controls .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:nth-child(1) {
   width: 65px;
   height: 51px;
   border-radius: 0;
 }
 
+/* Sound Control Button */
+.CenterPanel .emote-controls .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:nth-child(4) {
+  margin: 0 5px;
+  width: 45px;
+}
+
 .CenterPanel .EmoteControls .ui.button.play-control:hover {
   transform: none;
 }

src/components/ItemEditorPage/CenterPanel/CenterPanel.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import type { Wearable } from 'decentraland-ecs'
 import { BodyShape, PreviewEmote, WearableCategory } from '@dcl/schemas'
-import { Dropdown, DropdownProps, Popup, Icon, Loader, Center, EmoteControls, DropdownItemProps, Button } from 'decentraland-ui'
-import { AnimationControls, WearablePreview, ZoomControls } from 'decentraland-ui2'
+import { Dropdown, DropdownProps, Popup, Icon, Loader, Center, DropdownItemProps, Button } from 'decentraland-ui'
+import { AnimationControls, WearablePreview, EmoteControls, ZoomControls } from 'decentraland-ui2'
 import { SocialEmoteAnimation } from '@dcl/schemas/dist/dapps/preview/social-emote-animation'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -25,7 +25,8 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
     showSceneBoundaries: false,
     isShowingAvatarAttributes: false,
     isLoading: false,
-    socialEmote: undefined
+    socialEmote: undefined,
+    hasBeenUpdatedWearablePreview: false
   }
 
   analytics = getAnalytics()
@@ -67,6 +68,12 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
     onSetWearablePreviewController(null)
   }
 
+  componentDidUpdate(_prevProps: Props, prevState: State) {
+    if (prevState.socialEmote !== this.state.socialEmote) {
+      this.setState({ hasBeenUpdatedWearablePreview: false })
+    }
+  }
+
   handleToggleShowingAvatarAttributes = () => {
     this.setState({ isShowingAvatarAttributes: !this.state.isShowingAvatarAttributes })
   }
@@ -246,7 +253,7 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
       isImportFilesModalOpen,
       wearableController
     } = this.props
-    const { isShowingAvatarAttributes, showSceneBoundaries, isLoading, socialEmote } = this.state
+    const { isShowingAvatarAttributes, showSceneBoundaries, isLoading, socialEmote, hasBeenUpdatedWearablePreview } = this.state
     const isRenderingAnEmote = visibleItems.some(isEmote) && selectedItem?.type === ItemType.EMOTE
     const zoom = emote === PreviewEmote.JUMP ? 1 : undefined
     let _socialEmote = undefined
@@ -279,26 +286,22 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
           wheelZoom={1.5}
           wheelStart={100}
           dev={isDevelopment}
-          onUpdate={() => this.setState({ isLoading: true })}
+          onUpdate={() => this.setState({ isLoading: true, hasBeenUpdatedWearablePreview: true })}
           onLoad={this.handleWearablePreviewLoad}
           disableDefaultEmotes={isRenderingAnEmote}
           showSceneBoundaries={showSceneBoundaries}
           socialEmote={socialEmote || _socialEmote}
         />
-        {isRenderingAnEmote && !isLoading && wearableController ? (
-          <ZoomControls
-            className="zoom-controls"
-            wearablePreviewId="wearable-editor"
-            wearablePreviewController={wearableController as any}
-          />
+        {isRenderingAnEmote && hasBeenUpdatedWearablePreview && wearableController ? (
+          <ZoomControls className="zoom-controls" wearablePreviewId="wearable-editor" wearablePreviewController={wearableController} />
         ) : null}
         {isLoading && (
           <Center>
             <Loader active />
           </Center>
         )}
         <div className="footer">
-          {isRenderingAnEmote && !isLoading && wearableController ? (
+          {isRenderingAnEmote && !isLoading && hasBeenUpdatedWearablePreview && wearableController ? (
             <div className="emote-controls-container">
               <EmoteControls
                 className="emote-controls"
@@ -312,7 +315,7 @@ export default class CenterPanel extends React.PureComponent<Props, State> {
               <Icon name="user" />
             </div>
             {isRenderingAnEmote ? (
-              !isLoading && wearableController ? (
+              hasBeenUpdatedWearablePreview && wearableController ? (
                 <AnimationControls
                   className="animation-controls"
                   wearablePreviewId="wearable-editor"

src/components/ItemEditorPage/CenterPanel/CenterPanel.types.ts

@@ -53,4 +53,5 @@ export type State = {
   showSceneBoundaries: boolean
   isLoading: boolean
   socialEmote?: SocialEmoteAnimation
+  hasBeenUpdatedWearablePreview: boolean
 }

src/components/ItemEditorPage/LeftPanel/LeftPanel.container.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
+import { PreviewEmote } from '@dcl/schemas'
 import { RootState } from 'modules/common/types'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { isConnected, getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
@@ -21,7 +22,7 @@ import {
 } from 'modules/item/selectors'
 import { fetchCollectionsRequest } from 'modules/collection/actions'
 import { getAuthorizedCollections, getPaginationData as getCollectionsPaginationData } from 'modules/collection/selectors'
-import { setItems } from 'modules/editor/actions'
+import { setEmote, setItems } from 'modules/editor/actions'
 import { fetchItemsRequest, fetchOrphanItemRequest, FETCH_ITEMS_REQUEST, FETCH_ORPHAN_ITEM_REQUEST } from 'modules/item/actions'
 import { LeftPanelContainerProps } from './LeftPanel.types'
 import LeftPanel from './LeftPanel'
@@ -80,6 +81,7 @@ const LeftPanelContainer: React.FC<LeftPanelContainerProps> = props => {
     address => dispatch(fetchOrphanItemRequest(address)),
     [dispatch]
   )
+  const onResetEmoteToIdle = useCallback(() => dispatch(setEmote(PreviewEmote.IDLE)), [dispatch])
 
   return (
     <LeftPanel
@@ -105,6 +107,7 @@ const LeftPanelContainer: React.FC<LeftPanelContainerProps> = props => {
       onFetchCollections={onFetchCollections}
       onFetchOrphanItems={onFetchOrphanItems}
       onFetchOrphanItem={onFetchOrphanItem}
+      onResetEmoteToIdle={onResetEmoteToIdle}
     />
   )
 }