@moises.ai/design-system 4.15.2 → 4.15.4

package/package.json

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

package/src/components/PreviewCard/PreviewCard.jsx

@@ -1,27 +1,41 @@
-import { useState, useCallback, useEffect, useRef } from 'react'
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react'
 import WavesurferPlayer from '@wavesurfer/react'
 import classNames from 'classnames'
 import { PlayIcon, PauseIcon } from '../../icons'
 import styles from './PreviewCard.module.css'
 
-export function PreviewCard({
-  audio,
-  selected = false,
-  loading = false,
-  wavegroup,
-  onSelect,
-  onPlayStateChange,
-  actions,
-  autoRepeat = false,
-  waveColor = 'rgba(90, 97, 105, 1)',
-  progressColor = 'rgba(255, 255, 255, 1)',
-  className,
-}) {
+export const PreviewCard = forwardRef(function PreviewCard(
+  {
+    audio,
+    selected = false,
+    loading = false,
+    wavegroup,
+    onSelect,
+    onPlayStateChange,
+    actions,
+    autoRepeat = false,
+    waveColor = 'rgba(90, 97, 105, 1)',
+    progressColor = 'rgba(255, 255, 255, 1)',
+    className,
+    id,
+    tabIndex: tabIndexProp,
+  },
+  ref,
+) {
   const [isPlaying, setIsPlaying] = useState(false)
   const [isReady, setIsReady] = useState(false)
   const [isSafari, setIsSafari] = useState(false)
 
   const waveSurferRef = useRef(null)
+  const skipTimeSyncRef = useRef(false)
+  const pendingSeekTimeRef = useRef(null)
 
   const showSkeleton = loading || !isReady
 
@@ -51,6 +65,44 @@ export function PreviewCard({
     waveSurferRef.current.play()
   }, [isSafari, progressColor, wavegroup])
 
+  const startPlay = useCallback(() => {
+    if (showSkeleton || !waveSurferRef.current) return
+
+    if (
+      wavegroup?.state?.active &&
+      wavegroup.state.active !== waveSurferRef.current
+    ) {
+      wavegroup.state.active.pause()
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        isPlaying: false,
+        active: null,
+      }))
+    }
+
+    if (
+      wavegroup?.state?.active &&
+      wavegroup.state.active !== waveSurferRef.current &&
+      wavegroup.state.active.getCurrentTime
+    ) {
+      waveSurferRef.current.setTime(wavegroup.state.active.getCurrentTime())
+    }
+
+    play()
+  }, [showSkeleton, play, wavegroup])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      play: startPlay,
+      pause,
+      isReady: () => isReady,
+      isPlaying: () => Boolean(waveSurferRef.current?.isPlaying()),
+    }),
+    [startPlay, pause, isReady],
+  )
+
   useEffect(() => {
     if (waveSurferRef.current && audio) {
       waveSurferRef.current.load(audio)
@@ -66,16 +118,31 @@ export function PreviewCard({
 
   const onPlay = useCallback(
     (ws) => {
+      const isSeekHandoff = skipTimeSyncRef.current
+
       setIsPlaying(true)
       onPlayStateChange?.(true)
+      if (!isSeekHandoff) {
+        onSelect?.()
+      }
 
       if (wavegroup) {
-        if (wavegroup.state.active && wavegroup.state.active !== ws) {
-          const currentTime = wavegroup.state.active.getCurrentTime()
-          wavegroup.state.active.pause()
-          ws.setTime(currentTime)
+        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
+          }
         }
 
+        skipTimeSyncRef.current = false
+
         wavegroup.setter((prev) => ({
           ...prev,
           isPlaying: true,
@@ -84,7 +151,7 @@ export function PreviewCard({
         }))
       }
     },
-    [onPlayStateChange, wavegroup],
+    [onPlayStateChange, onSelect, wavegroup],
   )
 
   const onPause = useCallback(() => {
@@ -92,6 +159,10 @@ export function PreviewCard({
     onPlayStateChange?.(false)
 
     if (wavegroup) {
+      if (wavegroup.state.active !== waveSurferRef.current) {
+        return
+      }
+
       wavegroup.setter((prev) => ({
         ...prev,
         isPlaying: false,
@@ -111,6 +182,55 @@ export function PreviewCard({
     [wavegroup],
   )
 
+  const handleInteraction = useCallback(
+    (ws, newTime) => {
+      if (!wavegroup) return
+
+      const previousActive = wavegroup.state.active
+      const isHandoff = previousActive && previousActive !== ws
+
+      if (!isHandoff) {
+        wavegroup.setter((prev) => ({
+          ...prev,
+          active: ws,
+          lastPlayed: ws,
+        }))
+        return
+      }
+
+      const seekTime =
+        typeof newTime === 'number' ? newTime : (ws.getCurrentTime?.() ?? 0)
+      const wasPlaying =
+        Boolean(previousActive?.isPlaying?.()) || wavegroup.state.isPlaying
+
+      pendingSeekTimeRef.current = seekTime
+      skipTimeSyncRef.current = true
+
+      wavegroup.state.active = ws
+      wavegroup.state.lastPlayed = ws
+      wavegroup.state.isPlaying = wasPlaying
+
+      ws.setTime(seekTime)
+      previousActive.pause()
+
+      if (!isSafari) {
+        ws.setOptions({ progressColor })
+      }
+
+      if (wasPlaying) {
+        ws.play()
+      }
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        active: ws,
+        lastPlayed: ws,
+        isPlaying: wasPlaying,
+      }))
+    },
+    [wavegroup, isSafari, progressColor],
+  )
+
   const onFinish = useCallback(() => {
     if (autoRepeat) {
       waveSurferRef.current?.play()
@@ -136,29 +256,8 @@ export function PreviewCard({
       return
     }
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current
-    ) {
-      wavegroup.state.active.pause()
-
-      wavegroup.setter((prev) => ({
-        ...prev,
-        isPlaying: false,
-        active: null,
-      }))
-    }
-
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current &&
-      wavegroup.state.active.getCurrentTime
-    ) {
-      waveSurferRef.current.setTime(wavegroup.state.active.getCurrentTime())
-    }
-
-    play()
-  }, [showSkeleton, pause, play, wavegroup])
+    startPlay()
+  }, [showSkeleton, pause, startPlay])
 
   const handleCardClick = useCallback(() => {
     if (showSkeleton) return
@@ -167,6 +266,7 @@ export function PreviewCard({
 
   return (
     <div
+      id={id}
       className={classNames(
         styles.previewCard,
         selected && styles.selected,
@@ -175,8 +275,9 @@ export function PreviewCard({
         className,
       )}
       onClick={handleCardClick}
-      role="button"
-      tabIndex={showSkeleton ? -1 : 0}
+      role="option"
+      aria-selected={selected}
+      tabIndex={showSkeleton ? -1 : (tabIndexProp ?? 0)}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault()
@@ -230,6 +331,7 @@ export function PreviewCard({
             cursorWidth={0}
             height={40}
             onReady={onReady}
+            onInteraction={handleInteraction}
             onSeeking={onSeeking}
             onPlay={onPlay}
             onPause={onPause}
@@ -237,11 +339,6 @@ export function PreviewCard({
             backend={isSafari ? 'WebAudio' : 'MediaElement'}
           />
         )}
-        {showSkeleton && (
-          <span className={styles.skeletonWaveform} aria-hidden="true">
-            <span className={styles.skeletonMask} />
-          </span>
-        )}
       </div>
 
       {actions && (
@@ -251,6 +348,6 @@ export function PreviewCard({
       )}
     </div>
   )
-}
+})
 
 PreviewCard.displayName = 'PreviewCard'

package/src/components/PreviewCard/PreviewCard.module.css

@@ -1,9 +1,12 @@
-@keyframes skeleton_animate_mask {
+@keyframes skeletonShimmer {
   0% {
-    mask-position: 200% 50%;
+    background-position: 200% 50%;
+  }
+  99.999% {
+    background-position: -200% 50%;
   }
   100% {
-    mask-position: -100% 50%;
+    background-position: 200% 50%;
   }
 }
 
@@ -62,7 +65,6 @@
   align-items: center;
   gap: 12px;
   width: 100%;
-  max-width: 344px;
   padding: 4px;
   border-radius: 8px;
   border: 1px solid var(--neutral-alpha-4);
@@ -70,6 +72,12 @@
   cursor: pointer;
   box-sizing: border-box;
   transition: background-color 0.2s ease, border-color 0.2s ease;
+  outline: none;
+}
+
+.previewCard:focus,
+.previewCard:focus-visible {
+  outline: none;
 }
 
 .previewCard:hover:not(.selected):not(.skeleton):not(.playing),
@@ -87,8 +95,12 @@
   background: linear-gradient(
     90deg,
     var(--neutral-alpha-3) 0%,
-    rgba(221, 235, 236, 0.02) 61.19%
+    rgba(221, 235, 236, 0.14) 35%,
+    rgba(221, 235, 236, 0.02) 70%,
+    var(--neutral-alpha-3) 100%
   );
+  background-size: 200% 100%;
+  animation: skeletonShimmer 2.5s linear infinite;
   pointer-events: none;
   border-color: transparent;
 }
@@ -106,6 +118,12 @@
   background: var(--neutral-alpha-3);
   color: var(--neutral-alpha-11);
   cursor: pointer;
+  outline: none;
+}
+
+.leftButton:focus,
+.leftButton:focus-visible {
+  outline: none;
 }
 
 .leftButton:disabled {
@@ -114,7 +132,8 @@
 }
 
 .skeleton .leftButton,
-.skeleton .actions {
+.skeleton .actions,
+.skeleton .waveformContainer {
   opacity: 0;
 }
 
@@ -201,26 +220,6 @@
   visibility: hidden;
 }
 
-.skeletonWaveform {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  border-radius: 4px;
-}
-
-.skeletonMask {
-  width: 100%;
-  height: 100%;
-  display: block;
-  background-repeat: repeat-x;
-  background-position: 30px center;
-  mask-image: radial-gradient(circle, blue 50%, rgba(255, 255, 0, 0.5) 50%);
-  mask-size: 400% 400%;
-  animation: skeleton_animate_mask 3s linear infinite;
-  -webkit-animation: skeleton_animate_mask 3s linear infinite;
-  background-image: url('/waveform.svg');
-}
-
 .actions {
   display: flex;
   flex-shrink: 0;
@@ -243,6 +242,12 @@
   min-height: 24px !important;
   padding: 0 !important;
   border-radius: 4px;
+  outline: none;
+}
+
+.actions :global(button:focus),
+.actions :global(button:focus-visible) {
+  outline: none;
 }
 
 .actions :global(svg) {