@moises.ai/design-system 4.15.7 → 4.15.9

package/package.json

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

package/src/components/PreviewCard/PreviewCard.jsx

@@ -23,6 +23,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
     autoRepeat = false,
     waveColor = 'rgba(90, 97, 105, 1)',
     progressColor = 'rgba(255, 255, 255, 1)',
+    hiddenProgress = false,
     className,
     id,
     tabIndex: tabIndexProp,
@@ -160,6 +161,9 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
     if (wavegroup) {
       if (wavegroup.state.active !== waveSurferRef.current) {
+        if (hiddenProgress) {
+          waveSurferRef.current?.setOptions({ progressColor: waveColor })
+        }
         return
       }
 
@@ -168,7 +172,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         isPlaying: false,
       }))
     }
-  }, [onPlayStateChange, wavegroup])
+  }, [onPlayStateChange, wavegroup, hiddenProgress, waveColor])
 
   const onSeeking = useCallback(
     (ws) => {
@@ -204,8 +208,8 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
       const seekTime =
         typeof newTime === 'number' ? newTime : (ws.getCurrentTime?.() ?? 0)
-      const wasPlaying =
-        Boolean(previousActive?.isPlaying?.()) || wavegroup.state.isPlaying
+      const previousWasPlaying = Boolean(previousActive?.isPlaying?.())
+      const wasPlaying = previousWasPlaying || wavegroup.state.isPlaying
 
       pendingSeekTimeRef.current = seekTime
       skipTimeSyncRef.current = true
@@ -217,6 +221,10 @@ export const PreviewCard = forwardRef(function PreviewCard(
       ws.setTime(seekTime)
       previousActive.pause()
 
+      if (!previousWasPlaying) {
+        previousActive.emit?.('pause')
+      }
+
       if (!isSafari) {
         ws.setOptions({ progressColor })
       }

package/src/components/PreviewCard/PreviewCard.stories.jsx

@@ -7,7 +7,8 @@ const SAMPLE_AUDIO = {
   zuri: 'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a',
   amy: 'https://storage.googleapis.com/moises-api-assets/voice/demo_amy.m4a',
   rosa: 'https://storage.googleapis.com/moises-api-assets/voice/demo_rosa.m4a',
-  aisha: 'https://storage.googleapis.com/moises-api-assets/voice/demo_aisha.m4a',
+  aisha:
+    'https://storage.googleapis.com/moises-api-assets/voice/demo_aisha.m4a',
 }
 
 const PREVIEW_ITEMS = [
@@ -96,6 +97,7 @@ function PreviewCardGroupStory() {
           audio={item.audio}
           selected={selectedId === item.id}
           wavegroup={wavegroup}
+          hiddenProgress={true}
           onSelect={() => setSelectedId(item.id)}
           actions={<MoreButton aria-label={`More options for ${item.label}`} />}
         />