@moises.ai/design-system 4.18.6 → 4.18.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.18.6",
+  "version": "4.18.8",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.jsx

@@ -1,5 +1,5 @@
 import { Flex, Text, Spinner } from '@radix-ui/themes'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { ArrowLeftIcon } from '../../../icons'
 import { ProjectsListContext } from '../context'
 import { NumberPicker } from '../../NumberPicker/NumberPicker'
@@ -7,6 +7,8 @@ import { UserIcon } from '../../../icons'
 import { Button } from '../../Button/Button'
 import styles from './ProjectTrackVoice.module.css'
 
+const DEBOUNCE_MS = 3000
+
 const ProjectTrackVoice = ({
   ...props
 }) => {
@@ -20,31 +22,50 @@ const ProjectTrackVoice = ({
   const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
 
   const [loading, setLoading] = useState(_loading)
+  const debounceRef = useRef(null)
+
+  useEffect(() => {
+    if (hasTransfers && !transfers.some((transfer) => parseInt(transfer.pitchShift) === pitchShiftSelected)) {
+      setLoading(true)
+    } else {
+      setLoading(false)
+    }
+  }, [pitchShiftSelected, transfers, hasTransfers])
 
   useEffect(() => {
     setLoading(_loading)
 
-    if (!loading && hasTransfers) {
+    if (!_loading && hasTransfers) {
       setpitchShiftSelected(parseInt(transfers?.[0]?.pitchShift ?? 0))
     }
   }, [_loading, hasTransfers, transfers])
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+    }
+  }, [])
+
   const getAudioUrl = useCallback((pitchShift) => {
     return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
   }, [hasTransfers, transfers, audioUrl])
 
   const handleChangeTransfer = useCallback((value) => {
     setpitchShiftSelected(value)
-    const newAudioUrl = getAudioUrl(value)
-    const project = projects.find((project) => project.id === projectId)
-    onChangeTransfer?.(project, {
-      id,
-      title,
-      audioUrl: newAudioUrl,
-      processTrack: !newAudioUrl,
-      pitchShift: value,
-    })
-  }, [onChangeTransfer, projectId, id, title, transfers])
+
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => {
+      const newAudioUrl = getAudioUrl(value)
+      const project = projects.find((project) => project.id === projectId)
+      onChangeTransfer?.(project, {
+        id,
+        title,
+        audioUrl: newAudioUrl,
+        processTrack: !newAudioUrl,
+        pitchShift: value,
+      })
+    }, DEBOUNCE_MS)
+  }, [onChangeTransfer, projectId, id, title, getAudioUrl, projects])
 
   const handleClickTrack = useCallback((e) => {
     e.stopPropagation()
@@ -100,16 +121,18 @@ const ProjectTrackVoice = ({
           </Text>
         </Flex>
 
+        {loading && (
+          <Flex align="center" justify="center" pl="2">
+            <Spinner />
+          </Flex>
+        )}
+
         {!hasTransfers && !audioUrl && !loading ? (
           <Flex align="center" justify="center" p="2">
             <Button variant="soft" color="gray" size="1">
               {labels.process || 'Process'}
             </Button>
           </Flex>
-        ) : loading ? (
-          <Flex align="center" justify="center" p="2">
-            <Spinner />
-          </Flex>
         ) : (
           <NumberPicker
             min={min}

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -262,7 +262,7 @@ export const WithTrackVoiceStates = {
       "type": "voice",
       "tracks": [
         {
-          "id": "q8pzli0h38ptcx21q09h2al-0",
+          "id": "q8pzli0h38ptcx211133q09h2al-0",
           "title": "Joyce",
           "type": "voice",
           "loading": true,
@@ -273,6 +273,21 @@ export const WithTrackVoiceStates = {
           "type": "voice",
           "cover": "https://picsum.photos/101/101",
           "transfers": [],
+        },
+        {
+          "id": "q8pzli0h38ptcxq09h2al3-0",
+          "title": "Derek",
+          "type": "voice",
+          "cover": "https://picsum.photos/103/103",
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "12",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0b926e1f-52ce-4581-9f76-09545eed1c61/vocals.m4"
+          }, {
+            "id": "q8pzli0h38ptcxq03339h2al2",
+            "pitchShift": "13",
+            "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks-us-east1/operations/VOICETRANSFER_A/0a6c2a03-320e-49f2-9ea6-a5ad7bbb6141/vocals.m4a"
+          }],
         }
       ]
     }],