@moises.ai/design-system 4.18.8 → 4.18.11

package/package.json

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

package/src/components/ProjectsList/ProjectItem/ProjectItem.jsx

@@ -53,7 +53,8 @@ const ProjectItem = ({
 
   const handleInsertAllTracks = useCallback((e) => {
     e.stopPropagation()
-    onInsertAllTracks?.(allTracks)
+    const tracksFiltered = allTracks.filter((track) => !track.loading && track.transfers.length > 0)
+    onInsertAllTracks?.(tracksFiltered)
   }, [onInsertAllTracks, allTracks])
 
   return (
@@ -100,7 +101,7 @@ const ProjectItem = ({
 
       {openedItem === id && (
         <Flex direction="column">
-          {allTracks.length === 0 && !loading && (
+          {type !== 'voice' && allTracks.length === 0 && !loading && (
             <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
               <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
               <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>{labels.noTracks || 'This file has no tracks'}</Text>

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,32 +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)
-
-  useEffect(() => {
-    if (hasTransfers && !transfers.some((transfer) => parseInt(transfer.pitchShift) === pitchShiftSelected)) {
-      setLoading(true)
-    } else {
-      setLoading(false)
-    }
-  }, [pitchShiftSelected, transfers, hasTransfers])
+  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 !== null) {
+      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
@@ -52,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()
@@ -74,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])
 
@@ -121,26 +104,34 @@ const ProjectTrackVoice = ({
           </Text>
         </Flex>
 
-        {loading && (
+        {(hasTransfers || audioUrl) && 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">
+        {!hasTransfers && !audioUrl ? (
+          <Flex align="center" justify="center" pr="2" pr="0">
+            <Button
+              variant="soft"
+              color="gray"
+              size="1"
+              disabled={loading}
+              loading={loading}
+              onClick={handleClickTrack}
+              style={{ minWidth: '63px' }}
+            >
               {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

@@ -261,6 +261,13 @@ export const WithTrackVoiceStates = {
       "duration": 30.72,
       "type": "voice",
       "tracks": [
+        {
+          "id": "q8pzli0h38ptcxq09h2al-0",
+          "title": "Ana",
+          "type": "voice",
+          "cover": "https://picsum.photos/101/101",
+          "transfers": [],
+        },
         {
           "id": "q8pzli0h38ptcx211133q09h2al-0",
           "title": "Joyce",
@@ -268,11 +275,15 @@ export const WithTrackVoiceStates = {
           "loading": true,
         },
         {
-          "id": "q8pzli0h38ptcxq09h2al-0",
-          "title": "Ana",
+          "id": "q8pzli0h38ptcx211133q09h2al-0",
+          "title": "Carlos",
           "type": "voice",
-          "cover": "https://picsum.photos/101/101",
-          "transfers": [],
+          "loading": true,
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "12",
+            "audioUrl": null
+          }],
         },
         {
           "id": "q8pzli0h38ptcxq09h2al3-0",
@@ -288,6 +299,21 @@ export const WithTrackVoiceStates = {
             "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"
           }],
+        },
+        {
+          "id": "q8pzli0h38ptcxq09h2al3-0",
+          "title": "Claudia",
+          "type": "voice",
+          "cover": "https://picsum.photos/105/105",
+          "transfers": [{
+            "id": "q8pzli0h38ptcxq09h1122al",
+            "pitchShift": "1",
+            "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": "2",
+            "audioUrl": null
+          }],
         }
       ]
     }],