@moises.ai/design-system 4.18.7 → 4.18.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.18.7",
+  "version": "4.18.10",
   "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, useRef, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ArrowLeftIcon } from '../../../icons'
 import { ProjectsListContext } from '../context'
 import { NumberPicker } from '../../NumberPicker/NumberPicker'
@@ -7,11 +7,7 @@ import { UserIcon } from '../../../icons'
 import { Button } from '../../Button/Button'
 import styles from './ProjectTrackVoice.module.css'
 
-const DEBOUNCE_MS = 3000
-
-const ProjectTrackVoice = ({
-  ...props
-}) => {
+const ProjectTrackVoice = ({ ...props }) => {
   const { onClickTrack, onChangeTransfer, projects, labels = {} } = useContext(ProjectsListContext)
   const { projectId, id, title, cover, transfers, audioUrl, loading: _loading } = props
 
@@ -19,24 +15,29 @@ const ProjectTrackVoice = ({
 
   const max = 24
   const min = -24
-  const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
-
-  const [loading, setLoading] = useState(_loading)
-  const debounceRef = useRef(null)
+  const [pitchShiftSelected, setpitchShiftSelected] = useState(null)
 
   useEffect(() => {
-    setLoading(_loading)
-
-    if (!_loading && hasTransfers) {
+    if (hasTransfers && pitchShiftSelected === null) {
       setpitchShiftSelected(parseInt(transfers?.[0]?.pitchShift ?? 0))
     }
-  }, [_loading, hasTransfers, transfers])
+  }, [hasTransfers, pitchShiftSelected])
+
+  const loading = useMemo(() => {
+    if (
+      (!hasTransfers && _loading) ||
+      (hasTransfers && pitchShiftSelected === null)
+    ) {
+      return true
+    }
 
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
+    if (pitchShiftSelected) {
+      const currentTransfer = transfers.find((transfer) => parseInt(transfer.pitchShift) === pitchShiftSelected)
+      return currentTransfer?.loading === true || !currentTransfer?.audioUrl
     }
-  }, [])
+
+    return false
+  }, [_loading, hasTransfers, pitchShiftSelected, transfers])
 
   const getAudioUrl = useCallback((pitchShift) => {
     return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
@@ -44,20 +45,16 @@ const ProjectTrackVoice = ({
 
   const handleChangeTransfer = useCallback((value) => {
     setpitchShiftSelected(value)
-
-    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 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])
 
   const handleClickTrack = useCallback((e) => {
     e.stopPropagation()
@@ -66,18 +63,12 @@ const ProjectTrackVoice = ({
       return
     }
 
-    const processTrack = (!hasTransfers && !audioUrl)
-
-    if (processTrack) {
-      setLoading(true)
-    }
-
     onClickTrack?.({
       ...props,
       id,
       title,
       audioUrl: hasTransfers || audioUrl ? getAudioUrl(pitchShiftSelected) : null,
-      processTrack,
+      processTrack: !hasTransfers && !audioUrl,
     })
   }, [onClickTrack, props, id, title, getAudioUrl, pitchShiftSelected, hasTransfers, loading, audioUrl])
 
@@ -120,19 +111,19 @@ const ProjectTrackVoice = ({
         )}
 
         {!hasTransfers && !audioUrl && !loading ? (
-          <Flex align="center" justify="center" p="2">
+          <Flex align="center" justify="center" pr="2">
             <Button variant="soft" color="gray" size="1">
               {labels.process || 'Process'}
             </Button>
           </Flex>
-        ) : (
+        ) : hasTransfers ? (
           <NumberPicker
             min={min}
             max={max}
             value={pitchShiftSelected}
             onChange={handleChangeTransfer}
           />
-        )}
+        ) : null}
       </Flex>
     </Flex>
   )

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"
+          }],
         }
       ]
     }],