@moises.ai/design-system 4.15.10 → 4.15.11

package/package.json

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

package/src/components/PreviewCard/PreviewCard.jsx

@@ -37,6 +37,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
   const waveSurferRef = useRef(null)
   const skipTimeSyncRef = useRef(false)
   const pendingSeekTimeRef = useRef(null)
+  const pendingPlayHandoffRef = useRef(null)
 
   const showSkeleton = loading || !isReady
 
@@ -50,48 +51,92 @@ export const PreviewCard = forwardRef(function PreviewCard(
     waveSurferRef.current?.pause()
   }, [])
 
+  const resetHiddenProgress = useCallback(
+    (ws) => {
+      if (!hiddenProgress) return
+
+      ws?.setOptions({ progressColor: waveColor })
+    },
+    [hiddenProgress, waveColor],
+  )
+
+  const handoffFromPreviousActive = useCallback(
+    (
+      currentWave,
+      { seekTime, syncTime = false, skipPauseFor = null } = {},
+    ) => {
+      const previousActive = wavegroup?.state?.active
+      const isHandoff = previousActive && previousActive !== currentWave
+
+      if (!isHandoff) {
+        if (typeof seekTime === 'number') {
+          currentWave?.setTime(seekTime)
+        }
+
+        return {
+          isHandoff: false,
+          previousActive: null,
+          previousWasPlaying: false,
+          wasPlaying: Boolean(wavegroup?.state?.isPlaying),
+        }
+      }
+
+      const previousTime = previousActive.getCurrentTime?.()
+      const previousWasPlaying = Boolean(previousActive?.isPlaying?.())
+      const wasPlaying =
+        previousWasPlaying || Boolean(wavegroup?.state?.isPlaying)
+
+      if (previousActive !== skipPauseFor) {
+        previousActive.pause()
+        resetHiddenProgress(previousActive)
+      }
+
+      if (typeof seekTime === 'number') {
+        currentWave.setTime(seekTime)
+      } else if (syncTime && typeof previousTime === 'number') {
+        currentWave.setTime(previousTime)
+      }
+
+      return {
+        isHandoff: true,
+        previousActive,
+        previousWasPlaying,
+        wasPlaying,
+      }
+    },
+    [resetHiddenProgress, wavegroup],
+  )
+
   const play = useCallback(() => {
-    if (!waveSurferRef.current) return
+    const currentWave = waveSurferRef.current
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current
-    ) {
-      wavegroup.state.active.pause()
-    }
+    if (!currentWave) return
 
     if (!isSafari) {
-      waveSurferRef.current.setOptions({ progressColor })
+      currentWave.setOptions({ progressColor })
     }
-    waveSurferRef.current.play()
-  }, [isSafari, progressColor, wavegroup])
+    currentWave.play()
+  }, [isSafari, progressColor])
 
   const startPlay = useCallback(() => {
-    if (showSkeleton || !waveSurferRef.current) return
+    const currentWave = waveSurferRef.current
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current
-    ) {
-      wavegroup.state.active.pause()
+    if (showSkeleton || !currentWave) return
 
-      wavegroup.setter((prev) => ({
-        ...prev,
-        isPlaying: false,
-        active: null,
-      }))
-    }
+    const previousActive = wavegroup?.state?.active
+    const isHandoff = previousActive && previousActive !== currentWave
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current &&
-      wavegroup.state.active.getCurrentTime
-    ) {
-      waveSurferRef.current.setTime(wavegroup.state.active.getCurrentTime())
+    if (isHandoff) {
+      const handoff = handoffFromPreviousActive(currentWave, {
+        syncTime: true,
+      })
+      pendingPlayHandoffRef.current = handoff.previousActive
+    } else {
+      pendingPlayHandoffRef.current = null
     }
 
     play()
-  }, [showSkeleton, play, wavegroup])
+  }, [showSkeleton, play, handoffFromPreviousActive, wavegroup])
 
   useImperativeHandle(
     ref,
@@ -120,6 +165,8 @@ export const PreviewCard = forwardRef(function PreviewCard(
   const onPlay = useCallback(
     (ws) => {
       const isSeekHandoff = skipTimeSyncRef.current
+      const pendingPlayHandoff = pendingPlayHandoffRef.current
+      const pendingSeekTime = pendingSeekTimeRef.current
 
       setIsPlaying(true)
       onPlayStateChange?.(true)
@@ -128,21 +175,15 @@ export const PreviewCard = forwardRef(function PreviewCard(
       }
 
       if (wavegroup) {
-        const previousActive = wavegroup.state.active
-
-        if (previousActive && previousActive !== ws) {
-          const currentTime = previousActive.getCurrentTime()
-          previousActive.pause()
-
-          if (!skipTimeSyncRef.current) {
-            ws.setTime(currentTime)
-          } else if (pendingSeekTimeRef.current != null) {
-            ws.setTime(pendingSeekTimeRef.current)
-            pendingSeekTimeRef.current = null
-          }
-        }
+        handoffFromPreviousActive(ws, {
+          seekTime: isSeekHandoff ? pendingSeekTime : undefined,
+          syncTime: !isSeekHandoff && !pendingPlayHandoff,
+          skipPauseFor: pendingPlayHandoff,
+        })
 
         skipTimeSyncRef.current = false
+        pendingSeekTimeRef.current = null
+        pendingPlayHandoffRef.current = null
 
         wavegroup.setter((prev) => ({
           ...prev,
@@ -152,7 +193,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         }))
       }
     },
-    [onPlayStateChange, onSelect, wavegroup],
+    [handoffFromPreviousActive, onPlayStateChange, onSelect, wavegroup],
   )
 
   const onPause = useCallback(() => {
@@ -161,29 +202,40 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
     if (wavegroup) {
       if (wavegroup.state.active !== waveSurferRef.current) {
-        if (hiddenProgress) {
-          waveSurferRef.current?.setOptions({ progressColor: waveColor })
-        }
-        return
+        resetHiddenProgress(waveSurferRef.current)
       }
 
-      wavegroup.setter((prev) => ({
-        ...prev,
-        isPlaying: false,
-      }))
+      wavegroup.setter((prev) => {
+        if (prev.active !== waveSurferRef.current) {
+          return prev
+        }
+
+        return {
+          ...prev,
+          isPlaying: false,
+        }
+      })
     }
-  }, [onPlayStateChange, wavegroup, hiddenProgress, waveColor])
+  }, [onPlayStateChange, wavegroup, resetHiddenProgress])
 
   const onSeeking = useCallback(
     (ws) => {
       if (!wavegroup) return
 
+      const previousActive = wavegroup.state.active
+      const isHandoff = previousActive && previousActive !== ws
+
+      if (isHandoff) {
+        resetHiddenProgress(previousActive)
+        return
+      }
+
       wavegroup.setter((prev) => ({
         ...prev,
         active: ws,
       }))
     },
-    [wavegroup],
+    [resetHiddenProgress, wavegroup],
   )
 
   const handleInteraction = useCallback(
@@ -208,20 +260,15 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
       const seekTime =
         typeof newTime === 'number' ? newTime : (ws.getCurrentTime?.() ?? 0)
-      const previousWasPlaying = Boolean(previousActive?.isPlaying?.())
-      const wasPlaying = previousWasPlaying || wavegroup.state.isPlaying
+
+      const handoff = handoffFromPreviousActive(ws, {
+        seekTime,
+      })
 
       pendingSeekTimeRef.current = seekTime
       skipTimeSyncRef.current = true
 
-      wavegroup.state.active = ws
-      wavegroup.state.lastPlayed = ws
-      wavegroup.state.isPlaying = wasPlaying
-
-      ws.setTime(seekTime)
-      previousActive.pause()
-
-      if (!previousWasPlaying) {
+      if (!handoff.previousWasPlaying) {
         previousActive.emit?.('pause')
       }
 
@@ -229,7 +276,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         ws.setOptions({ progressColor })
       }
 
-      if (wasPlaying) {
+      if (handoff.wasPlaying) {
         ws.play()
       }
 
@@ -237,10 +284,17 @@ export const PreviewCard = forwardRef(function PreviewCard(
         ...prev,
         active: ws,
         lastPlayed: ws,
-        isPlaying: wasPlaying,
+        isPlaying: handoff.wasPlaying,
       }))
     },
-    [wavegroup, isSafari, progressColor, showSkeleton, onSelect],
+    [
+      wavegroup,
+      isSafari,
+      progressColor,
+      handoffFromPreviousActive,
+      showSkeleton,
+      onSelect,
+    ],
   )
 
   const onFinish = useCallback(() => {

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

@@ -89,7 +89,7 @@ function PreviewCardGroupStory() {
     <Flex direction="column" gap="3" width="344px">
       <Text size="1" color="gray">
         Click the card (outside waveform/play) to select. Play on another card
-        continues from the same position.
+        continues from the same position with hidden progress and auto-repeat.
       </Text>
       {PREVIEW_ITEMS.map((item) => (
         <PreviewCard
@@ -98,6 +98,7 @@ function PreviewCardGroupStory() {
           selected={selectedId === item.id}
           wavegroup={wavegroup}
           hiddenProgress={true}
+          autoRepeat={true}
           onSelect={() => setSelectedId(item.id)}
           actions={<MoreButton aria-label={`More options for ${item.label}`} />}
         />