@moises.ai/design-system 4.15.1 → 4.15.3

package/package.json

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

package/src/components/PreviewCard/PreviewCard.jsx

@@ -0,0 +1,353 @@
+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 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
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
+    }
+  }, [])
+
+  const pause = useCallback(() => {
+    waveSurferRef.current?.pause()
+  }, [])
+
+  const play = useCallback(() => {
+    if (!waveSurferRef.current) return
+
+    if (
+      wavegroup?.state?.active &&
+      wavegroup.state.active !== waveSurferRef.current
+    ) {
+      wavegroup.state.active.pause()
+    }
+
+    if (!isSafari) {
+      waveSurferRef.current.setOptions({ progressColor })
+    }
+    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)
+      setIsReady(false)
+    }
+  }, [audio])
+
+  const onReady = useCallback((ws) => {
+    waveSurferRef.current = ws
+    setIsReady(true)
+    setIsPlaying(false)
+  }, [])
+
+  const onPlay = useCallback(
+    (ws) => {
+      const isSeekHandoff = skipTimeSyncRef.current
+
+      setIsPlaying(true)
+      onPlayStateChange?.(true)
+      if (!isSeekHandoff) {
+        onSelect?.()
+      }
+
+      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
+          }
+        }
+
+        skipTimeSyncRef.current = false
+
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: true,
+          lastPlayed: ws,
+          active: ws,
+        }))
+      }
+    },
+    [onPlayStateChange, onSelect, wavegroup],
+  )
+
+  const onPause = useCallback(() => {
+    setIsPlaying(false)
+    onPlayStateChange?.(false)
+
+    if (wavegroup) {
+      if (wavegroup.state.active !== waveSurferRef.current) {
+        return
+      }
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        isPlaying: false,
+      }))
+    }
+  }, [onPlayStateChange, wavegroup])
+
+  const onSeeking = useCallback(
+    (ws) => {
+      if (!wavegroup) return
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        active: ws,
+      }))
+    },
+    [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()
+    } else {
+      setIsPlaying(false)
+      onPlayStateChange?.(false)
+
+      if (wavegroup) {
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: false,
+          active: null,
+        }))
+      }
+    }
+  }, [autoRepeat, onPlayStateChange, wavegroup])
+
+  const handleTogglePlay = useCallback(() => {
+    if (showSkeleton || !waveSurferRef.current) return
+
+    if (waveSurferRef.current.isPlaying()) {
+      pause()
+      return
+    }
+
+    startPlay()
+  }, [showSkeleton, pause, startPlay])
+
+  const handleCardClick = useCallback(() => {
+    if (showSkeleton) return
+    onSelect?.()
+  }, [showSkeleton, onSelect])
+
+  return (
+    <div
+      id={id}
+      className={classNames(
+        styles.previewCard,
+        selected && styles.selected,
+        isPlaying && styles.playing,
+        showSkeleton && styles.skeleton,
+        className,
+      )}
+      onClick={handleCardClick}
+      role="option"
+      aria-selected={selected}
+      tabIndex={showSkeleton ? -1 : (tabIndexProp ?? 0)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          handleCardClick()
+        }
+      }}
+    >
+      <button
+        type="button"
+        className={classNames(styles.leftButton, isPlaying && styles.isPlaying)}
+        onClick={(e) => {
+          e.stopPropagation()
+          handleTogglePlay()
+        }}
+        disabled={showSkeleton}
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+      >
+        <span className={styles.equalizer} aria-hidden="true">
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+          <span className={styles.equalizerBar} />
+        </span>
+        <PauseIcon
+          width={18}
+          height={18}
+          className={styles.pauseOnHover}
+          aria-hidden="true"
+        />
+        <PlayIcon
+          width={18}
+          height={18}
+          className={styles.playIcon}
+          aria-hidden="true"
+        />
+      </button>
+
+      <div
+        className={styles.waveformContainer}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {audio && (
+          <WavesurferPlayer
+            url={audio}
+            waveColor={waveColor}
+            progressColor={progressColor}
+            normalize
+            barWidth={2}
+            barHeight={6}
+            cursorWidth={0}
+            height={40}
+            onReady={onReady}
+            onInteraction={handleInteraction}
+            onSeeking={onSeeking}
+            onPlay={onPlay}
+            onPause={onPause}
+            onFinish={onFinish}
+            backend={isSafari ? 'WebAudio' : 'MediaElement'}
+          />
+        )}
+      </div>
+
+      {actions && (
+        <div className={styles.actions} onClick={(e) => e.stopPropagation()}>
+          {actions}
+        </div>
+      )}
+    </div>
+  )
+})
+
+PreviewCard.displayName = 'PreviewCard'

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

@@ -0,0 +1,263 @@
+@keyframes skeletonShimmer {
+  0% {
+    background-position: 200% 50%;
+  }
+  99.999% {
+    background-position: -200% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+@keyframes equalizerBar1 {
+  0%,
+  100% {
+    height: 17px;
+  }
+  50% {
+    height: 7px;
+  }
+}
+
+@keyframes equalizerBar2 {
+  0%,
+  100% {
+    height: 5px;
+  }
+  50% {
+    height: 17px;
+  }
+}
+
+@keyframes equalizerBar3 {
+  0%,
+  100% {
+    height: 21px;
+  }
+  50% {
+    height: 9px;
+  }
+}
+
+@keyframes equalizerBar4 {
+  0%,
+  100% {
+    height: 17px;
+  }
+  50% {
+    height: 5px;
+  }
+}
+
+@keyframes equalizerBar5 {
+  0%,
+  100% {
+    height: 7px;
+  }
+  50% {
+    height: 17px;
+  }
+}
+
+.previewCard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  max-width: 344px;
+  padding: 4px;
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-4);
+  background: transparent;
+  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),
+.previewCard:has(.leftButton:hover):not(.selected):not(.skeleton) {
+  background-color: var(--neutral-alpha-2);
+}
+
+.selected {
+  background-color: var(--neutral-alpha-2);
+  border: 2px solid var(--colors-accent-accent-10);
+  padding: 3px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--neutral-alpha-3) 0%,
+    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;
+}
+
+.leftButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: var(--neutral-alpha-3);
+  color: var(--neutral-alpha-11);
+  cursor: pointer;
+  outline: none;
+}
+
+.leftButton:focus,
+.leftButton:focus-visible {
+  outline: none;
+}
+
+.leftButton:disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.skeleton .leftButton,
+.skeleton .actions,
+.skeleton .waveformContainer {
+  opacity: 0;
+}
+
+.equalizer {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  gap: 1.8px;
+  width: 19px;
+  height: 21px;
+}
+
+.equalizerBar {
+  display: block;
+  width: 2px;
+  border-radius: 4.8px;
+  background: var(--neutral-alpha-11);
+  flex-shrink: 0;
+}
+
+.equalizerBar:nth-child(1) {
+  height: 17px;
+  animation: equalizerBar1 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(2) {
+  height: 5px;
+  animation: equalizerBar2 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(3) {
+  height: 21px;
+  animation: equalizerBar3 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(4) {
+  height: 17px;
+  animation: equalizerBar4 0.8s ease-in-out infinite;
+}
+
+.equalizerBar:nth-child(5) {
+  height: 7px;
+  animation: equalizerBar5 0.8s ease-in-out infinite;
+}
+
+.pauseOnHover {
+  display: none;
+}
+
+.playIcon {
+  display: flex;
+}
+
+.leftButton.isPlaying .equalizer {
+  display: flex;
+}
+
+.leftButton.isPlaying .playIcon {
+  display: none !important;
+}
+
+.previewCard.playing:has(.leftButton:hover) .equalizer {
+  display: none;
+}
+
+.previewCard.playing:has(.leftButton:hover) .pauseOnHover {
+  display: flex;
+}
+
+.waveformContainer {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 40px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.waveformContainer :global(wave) {
+  display: block;
+}
+
+.skeleton .waveformContainer :global(wave) {
+  visibility: hidden;
+}
+
+.actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  opacity: 0.4;
+  transition: opacity 0.2s ease;
+}
+
+.actions :global(button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  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) {
+  width: 16px;
+  height: 16px;
+}
+
+.previewCard:hover .actions,
+.previewCard:has(.leftButton:hover) .actions,
+.selected .actions {
+  opacity: 1;
+}