@moises.ai/design-system 4.18.4 → 4.18.6

package/package.json

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

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

@@ -10,14 +10,14 @@ import styles from './ProjectTrackVoice.module.css'
 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])
 
+  const max = 24
+  const min = -24
   const [pitchShiftSelected, setpitchShiftSelected] = useState(hasTransfers ? parseInt(transfers?.[0]?.pitchShift ?? 0) : 0)
-  const min = useMemo(() => hasTransfers ? Math.min(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
-  const max = useMemo(() => hasTransfers ? Math.max(...transfers?.map((transfer) => parseInt(transfer.pitchShift))) : 0, [transfers])
 
   const [loading, setLoading] = useState(_loading)
 
@@ -35,10 +35,14 @@ const ProjectTrackVoice = ({
 
   const handleChangeTransfer = useCallback((value) => {
     setpitchShiftSelected(value)
-    onChangeTransfer?.(projectId, {
+    const newAudioUrl = getAudioUrl(value)
+    const project = projects.find((project) => project.id === projectId)
+    onChangeTransfer?.(project, {
       id,
       title,
-      audioUrl: getAudioUrl(value),
+      audioUrl: newAudioUrl,
+      processTrack: !newAudioUrl,
+      pitchShift: value,
     })
   }, [onChangeTransfer, projectId, id, title, transfers])
 
@@ -99,7 +103,7 @@ const ProjectTrackVoice = ({
         {!hasTransfers && !audioUrl && !loading ? (
           <Flex align="center" justify="center" p="2">
             <Button variant="soft" color="gray" size="1">
-              Process
+              {labels.process || 'Process'}
             </Button>
           </Flex>
         ) : loading ? (

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: {},
 })