@moises.ai/design-system 4.18.2 → 4.18.3

package/package.json

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

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

@@ -1,16 +1,17 @@
-import { Flex, Text } from '@radix-ui/themes'
-import { useCallback, useContext, useMemo, useState } from 'react'
+import { Flex, Text, Spinner } from '@radix-ui/themes'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ArrowLeftIcon } from '../../../icons'
 import { ProjectsListContext } from '../context'
 import { NumberPicker } from '../../NumberPicker/NumberPicker'
 import { UserIcon } from '../../../icons'
+import { Button } from '../../Button/Button'
 import styles from './ProjectTrackVoice.module.css'
 
 const ProjectTrackVoice = ({
   ...props
 }) => {
   const { onClickTrack } = useContext(ProjectsListContext)
-  const { projectId, id, title, cover, transfers, audioUrl, onChangeTransfer } = props
+  const { projectId, id, title, cover, transfers, audioUrl, onChangeTransfer, loading: _loading } = props
 
   const hasTransfers = useMemo(() => transfers && transfers.length > 0, [transfers])
 
@@ -18,6 +19,12 @@ const ProjectTrackVoice = ({
   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)
+
+  useEffect(() => {
+    setLoading(_loading)
+  }, [_loading])
+
   const getAudioUrl = useCallback((pitchShift) => {
     return hasTransfers ? transfers?.find((transfer) => parseInt(transfer.pitchShift) === pitchShift)?.audioUrl : audioUrl
   }, [hasTransfers, transfers, audioUrl])
@@ -33,20 +40,32 @@ const ProjectTrackVoice = ({
 
   const handleClickTrack = useCallback((e) => {
     e.stopPropagation()
+
+    if (loading) {
+      return
+    }
+
+    const processTrack = (!hasTransfers && !audioUrl)
+
+    if (processTrack) {
+      setLoading(true)
+    }
+
     onClickTrack?.({
       ...props,
       id,
       title,
-      audioUrl: getAudioUrl(pitchShiftSelected),
+      audioUrl: hasTransfers || audioUrl ? getAudioUrl(pitchShiftSelected) : null,
+      processTrack,
     })
-  }, [onClickTrack, props, id, title, getAudioUrl, pitchShiftSelected])
+  }, [onClickTrack, props, id, title, getAudioUrl, pitchShiftSelected, hasTransfers, loading, audioUrl])
 
   return (
     <Flex direction="column" gap="1">
       <Flex
         direction="row"
         gap="3"
-        className={styles.itemTrack}
+        className={`${styles.itemTrack} ${(!hasTransfers && !audioUrl) || loading ? styles.disabledHover : ''}`}
         onClick={handleClickTrack}
       >
         <div className={styles.cover}>
@@ -73,12 +92,24 @@ const ProjectTrackVoice = ({
           </Text>
         </Flex>
 
-        <NumberPicker
-          min={min}
-          max={max}
-          value={pitchShiftSelected}
-          onChange={handleChangeTransfer}
-        />
+        {!hasTransfers && !audioUrl && !loading ? (
+          <Flex align="center" justify="center" p="2">
+            <Button variant="soft" color="gray" size="1">
+              Process
+            </Button>
+          </Flex>
+        ) : loading ? (
+          <Flex align="center" justify="center" p="2">
+            <Spinner />
+          </Flex>
+        ) : (
+          <NumberPicker
+            min={min}
+            max={max}
+            value={pitchShiftSelected}
+            onChange={handleChangeTransfer}
+          />
+        )}
       </Flex>
     </Flex>
   )

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.module.css

@@ -1,13 +1,17 @@
 .itemTrack {
-  cursor: pointer;
   border-radius: var(--radius-3);
   overflow: hidden;
+  cursor: default;
+
+  &:not(.disabledHover) {
+    cursor: pointer;
+  }
 
   .iconArrowLeft {
     display: none;
   }
 
-  &:hover {
+  &:not(.disabledHover):hover {
     background: var(--neutral-alpha-2);
     box-shadow: 0 24px 24px -16px rgba(0, 0, 0, 0.40);
 

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

@@ -250,3 +250,67 @@ export const WithTrackVoice = {
     )
   },
 }
+
+export const WithTrackVoiceStates = {
+  args: {
+    projects: [{
+      "id": "3842c898-9e0c-41e8-8927-7d9f1111111167c50bc6",
+      "title": "vocals - Billie Bossa Nova",
+      "artist": "Billie Bossa Nova",
+      "cover": null,
+      "duration": 30.72,
+      "type": "voice",
+      "tracks": [
+        {
+          "id": "q8pzli0h38ptcx21q09h2al-0",
+          "title": "Joyce",
+          "type": "voice",
+          "loading": true,
+        },
+        {
+          "id": "q8pzli0h38ptcxq09h2al-0",
+          "title": "Ana",
+          "type": "voice",
+          "cover": "https://picsum.photos/101/101",
+          "transfers": [],
+        }
+      ]
+    }],
+    onProjectClick: (project, opened) => {
+      console.log('project', project)
+      console.log('opened', opened)
+    },
+    onClickTrack: (track) => {
+      console.log('track', track)
+    },
+    onInsertAllTracks: (tracks) => {
+      console.log('insert-all-tracks', tracks)
+    },
+    onChangeTransfer: (projectId, track) => {
+      console.log('change-transfer', projectId, track)
+    },
+  },
+  render: (args) => {
+    return (
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+        >
+          {({ projectId, tracks }) =>
+            tracks.map((track) => (
+              <ProjectsList.TrackVoice
+                projectId={projectId}
+                key={track.id}
+                {...track}
+                onChangeTransfer={args.onChangeTransfer}
+              />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
+    )
+  },
+}