@moises.ai/design-system 4.15.1 → 4.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.15.1",
+  "version": "4.15.2",
   "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,256 @@
+import { useState, useCallback, useEffect, useRef } 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,
+}) {
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [isReady, setIsReady] = useState(false)
+  const [isSafari, setIsSafari] = useState(false)
+
+  const waveSurferRef = 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])
+
+  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) => {
+      setIsPlaying(true)
+      onPlayStateChange?.(true)
+
+      if (wavegroup) {
+        if (wavegroup.state.active && wavegroup.state.active !== ws) {
+          const currentTime = wavegroup.state.active.getCurrentTime()
+          wavegroup.state.active.pause()
+          ws.setTime(currentTime)
+        }
+
+        wavegroup.setter((prev) => ({
+          ...prev,
+          isPlaying: true,
+          lastPlayed: ws,
+          active: ws,
+        }))
+      }
+    },
+    [onPlayStateChange, wavegroup],
+  )
+
+  const onPause = useCallback(() => {
+    setIsPlaying(false)
+    onPlayStateChange?.(false)
+
+    if (wavegroup) {
+      wavegroup.setter((prev) => ({
+        ...prev,
+        isPlaying: false,
+      }))
+    }
+  }, [onPlayStateChange, wavegroup])
+
+  const onSeeking = useCallback(
+    (ws) => {
+      if (!wavegroup) return
+
+      wavegroup.setter((prev) => ({
+        ...prev,
+        active: ws,
+      }))
+    },
+    [wavegroup],
+  )
+
+  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
+    }
+
+    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])
+
+  const handleCardClick = useCallback(() => {
+    if (showSkeleton) return
+    onSelect?.()
+  }, [showSkeleton, onSelect])
+
+  return (
+    <div
+      className={classNames(
+        styles.previewCard,
+        selected && styles.selected,
+        isPlaying && styles.playing,
+        showSkeleton && styles.skeleton,
+        className,
+      )}
+      onClick={handleCardClick}
+      role="button"
+      tabIndex={showSkeleton ? -1 : 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}
+            onSeeking={onSeeking}
+            onPlay={onPlay}
+            onPause={onPause}
+            onFinish={onFinish}
+            backend={isSafari ? 'WebAudio' : 'MediaElement'}
+          />
+        )}
+        {showSkeleton && (
+          <span className={styles.skeletonWaveform} aria-hidden="true">
+            <span className={styles.skeletonMask} />
+          </span>
+        )}
+      </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,257 @@
+@keyframes skeleton_animate_mask {
+  0% {
+    mask-position: 200% 50%;
+  }
+  100% {
+    mask-position: -100% 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;
+}
+
+.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.02) 61.19%
+  );
+  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;
+}
+
+.leftButton:disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.skeleton .leftButton,
+.skeleton .actions {
+  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;
+}
+
+.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;
+  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;
+}
+
+.actions :global(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.previewCard:hover .actions,
+.previewCard:has(.leftButton:hover) .actions,
+.selected .actions {
+  opacity: 1;
+}

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

@@ -0,0 +1,112 @@
+import React, { useMemo, useState } from 'react'
+import { Flex, Text } from '@radix-ui/themes'
+import { PreviewCard } from './PreviewCard'
+import { MoreButton } from '../MoreButton/MoreButton'
+
+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',
+}
+
+const PREVIEW_ITEMS = [
+  { id: 'zuri', label: 'Zuri', audio: SAMPLE_AUDIO.zuri },
+  { id: 'amy', label: 'Amy', audio: SAMPLE_AUDIO.amy },
+  { id: 'rosa', label: 'Rosa', audio: SAMPLE_AUDIO.rosa },
+  { id: 'aisha', label: 'Aisha', audio: SAMPLE_AUDIO.aisha },
+]
+
+export default {
+  title: 'Components/PreviewCard',
+  component: PreviewCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Preview card for tone previews with waveform, play/pause, selection, and continuous audio across multiple cards via \`wavegroup\`.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Flex direction="column" gap="2" width="344px">
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    audio: SAMPLE_AUDIO.zuri,
+  },
+}
+
+export const Selected = {
+  args: {
+    audio: SAMPLE_AUDIO.amy,
+    selected: true,
+  },
+}
+
+export const Loading = {
+  args: {
+    audio: SAMPLE_AUDIO.rosa,
+    loading: true,
+  },
+}
+
+export const WithActions = {
+  args: {
+    audio: SAMPLE_AUDIO.zuri,
+    selected: true,
+    actions: <MoreButton aria-label="More options" />,
+  },
+}
+
+function PreviewCardGroupStory() {
+  const [selectedId, setSelectedId] = useState('zuri')
+  const [wavegroupState, setWavegroupState] = useState({
+    lastPlayed: null,
+    active: null,
+    isPlaying: false,
+    id: 'preview-card-group',
+  })
+
+  const wavegroup = useMemo(
+    () => ({
+      state: wavegroupState,
+      setter: setWavegroupState,
+    }),
+    [wavegroupState],
+  )
+
+  return (
+    <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.
+      </Text>
+      {PREVIEW_ITEMS.map((item) => (
+        <PreviewCard
+          key={item.id}
+          audio={item.audio}
+          selected={selectedId === item.id}
+          wavegroup={wavegroup}
+          onSelect={() => setSelectedId(item.id)}
+          actions={<MoreButton aria-label={`More options for ${item.label}`} />}
+        />
+      ))}
+    </Flex>
+  )
+}
+
+export const Group = {
+  render: () => <PreviewCardGroupStory />,
+  parameters: {
+    layout: 'padded',
+  },
+}

package/src/index.jsx

@@ -148,6 +148,7 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
+export { PreviewCard } from './components/PreviewCard/PreviewCard'
 export { SpecialDialog } from './components/SpecialDialog/SpecialDialog'
 
 export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'