@moises.ai/design-system 4.18.5 → 4.18.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.18.5",
+  "version": "4.18.7",
   "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,11 +7,13 @@ import { UserIcon } from '../../../icons'
 import { Button } from '../../Button/Button'
 import styles from './ProjectTrackVoice.module.css'
 
+const DEBOUNCE_MS = 3000
+
 const ProjectTrackVoice = ({
   ...props
 }) => {
-  const { onClickTrack } = useContext(ProjectsListContext)
-  const { projectId, id, title, cover, transfers, audioUrl, onChangeTransfer, loading: _loading } = props
+  const { onClickTrack, onChangeTransfer, projects, labels = {} } = useContext(ProjectsListContext)
+  const { projectId, id, title, cover, transfers, audioUrl, loading: _loading } = props
 
   const hasTransfers = useMemo(() => transfers && transfers.length > 0, [transfers])
 
@@ -20,30 +22,42 @@ const ProjectTrackVoice = ({
   const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
 
   const [loading, setLoading] = useState(_loading)
+  const debounceRef = useRef(null)
 
   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)
-    onChangeTransfer?.(projectId, {
-      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()
@@ -99,16 +113,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">
-              Process
+              {labels.process || 'Process'}
             </Button>
           </Flex>
-        ) : loading ? (
-          <Flex align="center" justify="center" p="2">
-            <Spinner />
-          </Flex>
         ) : (
           <NumberPicker
             min={min}

package/src/components/ProjectsList/ProjectsList.jsx

@@ -11,6 +11,7 @@ export const ProjectsList = ({
   onClickTrack,
   onInsertAllTracks,
   onProjectClick,
+  onChangeTransfer,
   labels = {}
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
@@ -22,8 +23,10 @@ export const ProjectsList = ({
         onClickTrack,
         onInsertAllTracks,
         onProjectClick,
+        onChangeTransfer,
         openedItem,
         setOpenedItem,
+        labels,
       }}
     >
       <Flex direction="column" width="100%">

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

@@ -222,8 +222,8 @@ export const WithTrackVoice = {
     onInsertAllTracks: (tracks) => {
       console.log('insert-all-tracks', tracks)
     },
-    onChangeTransfer: (projectId, track) => {
-      console.log('change-transfer', projectId, track)
+    onChangeTransfer: (project, track) => {
+      console.log('change-transfer', project, track)
     },
   },
   render: (args) => {
@@ -234,6 +234,7 @@ export const WithTrackVoice = {
           onClickTrack={args.onClickTrack}
           onInsertAllTracks={args.onInsertAllTracks}
           onProjectClick={args.onProjectClick}
+          onChangeTransfer={args.onChangeTransfer}
         >
           {({ projectId, tracks }) =>
             tracks.map((track) => (
@@ -241,7 +242,6 @@ export const WithTrackVoice = {
                 projectId={projectId}
                 key={track.id}
                 {...track}
-                onChangeTransfer={args.onChangeTransfer}
               />
             ))
           }
@@ -286,8 +286,8 @@ export const WithTrackVoiceStates = {
     onInsertAllTracks: (tracks) => {
       console.log('insert-all-tracks', tracks)
     },
-    onChangeTransfer: (projectId, track) => {
-      console.log('change-transfer', projectId, track)
+    onChangeTransfer: (project, track) => {
+      console.log('change-transfer', project, track)
     },
   },
   render: (args) => {
@@ -298,6 +298,7 @@ export const WithTrackVoiceStates = {
           onClickTrack={args.onClickTrack}
           onInsertAllTracks={args.onInsertAllTracks}
           onProjectClick={args.onProjectClick}
+          onChangeTransfer={args.onChangeTransfer}
         >
           {({ projectId, tracks }) =>
             tracks.map((track) => (
@@ -305,7 +306,6 @@ export const WithTrackVoiceStates = {
                 projectId={projectId}
                 key={track.id}
                 {...track}
-                onChangeTransfer={args.onChangeTransfer}
               />
             ))
           }

package/src/components/ProjectsList/context.js

@@ -5,6 +5,8 @@ export const ProjectsListContext = createContext({
   onClickTrack: null,
   onInsertAllTracks: null,
   onProjectClick: null,
+  onChangeTransfer: null,
   openedItem: null,
   setOpenedItem: () => { },
+  labels: {},
 })