@moises.ai/design-system 4.16.2 → 4.16.3

package/src/components/PlayerBar/PlayerBar.stories.jsx

@@ -0,0 +1,334 @@
+import { useState } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { Text } from '../../index'
+import { PlayerBar } from './PlayerBar'
+
+const SAMPLE_AUDIO =
+  'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a'
+
+const SAMPLE_COVER =
+  'https://storage.googleapis.com/moises-api-assets/voice/ana-avatar.jpg'
+
+function StatefulPlayerBar(args) {
+  const [isPlaying, setIsPlaying] = useState(args.isPlaying)
+  const [currentTime, setCurrentTime] = useState(args.currentTime)
+  const [chords, setChords] = useState(args.chordsEnabled ?? false)
+  const [loop, setLoop] = useState(args.loopEnabled ?? false)
+  const [lyrics, setLyrics] = useState(args.lyricsEnabled ?? false)
+  const [metronome, setMetronome] = useState(args.metronomeEnabled ?? false)
+  const [expanded, setExpanded] = useState(args.expanded ?? false)
+
+  const seekBy = (delta) => {
+    setCurrentTime((time) =>
+      Math.min(Math.max(time + delta, 0), args.duration ?? 0),
+    )
+  }
+
+  return (
+    <PlayerBar
+      {...args}
+      cover={args.cover ?? SAMPLE_COVER}
+      isPlaying={isPlaying}
+      currentTime={currentTime}
+      audio={args.audio ?? SAMPLE_AUDIO}
+      chordsEnabled={chords}
+      loopEnabled={loop}
+      lyricsEnabled={lyrics}
+      metronomeEnabled={metronome}
+      expanded={expanded}
+      onPlayPause={() => setIsPlaying((value) => !value)}
+      onSeek={setCurrentTime}
+      onSeekBackward={() => seekBy(-10)}
+      onSeekForward={() => seekBy(10)}
+      onChordsToggle={() => setChords((value) => !value)}
+      onLoopToggle={() => setLoop((value) => !value)}
+      onLyricsToggle={() => setLyrics((value) => !value)}
+      onMetronomeToggle={() => setMetronome((value) => !value)}
+      onExpandToggle={() => setExpanded((value) => !value)}
+    />
+  )
+}
+
+export default {
+  title: 'New Mixer/PlayerBar',
+  component: PlayerBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Bottom player surface for New Mixer playback. It combines track metadata, transport controls, a seekable timeline, volume popover, and optional action controls.
+
+Use it as a controlled component: pass playback state through props and update it from \`onPlayPause\`, \`onSeek\`, \`onSeekBackward\`, \`onSeekForward\`, and related callbacks.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Flex
+        width="1200px"
+        maxWidth="1200px"
+        direction="column"
+        style={{ background: 'var(--neutral-12)', boxSizing: 'border-box' }}
+      >
+        <Flex
+          width="100%"
+          height="240px"
+          align="center"
+          justify="center"
+          style={{ background: 'var(--neutral-10)', color: 'var(--neutral-1)' }}
+        >
+          Content above the player
+        </Flex>
+        <Story />
+      </Flex>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      description: 'Primary track title displayed on the left side.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    subtitle: {
+      description: 'Secondary track metadata, such as artist or project name.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    cover: {
+      description: 'Track cover image URL. Falls back to a music note placeholder when omitted.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    color: {
+      description: 'Background color variant for the player surface.',
+      table: {
+        type: { summary: "'gray' | 'dark'" },
+        defaultValue: { summary: 'gray' },
+      },
+      control: 'select',
+      options: ['gray', 'dark'],
+    },
+    showSlider: {
+      description: 'Shows or hides the timeline slider above the player controls.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+      control: 'boolean',
+    },
+    isPlaying: {
+      description: 'Controls whether the play button renders play or pause.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      control: 'boolean',
+    },
+    currentTime: {
+      description: 'Current playback time in seconds.',
+      table: { type: { summary: 'number' } },
+      control: 'number',
+    },
+    duration: {
+      description: 'Total playback duration in seconds.',
+      table: { type: { summary: 'number' } },
+      control: 'number',
+    },
+    audio: {
+      description: 'Audio URL used by the timeline slider waveform while seeking.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    tempo: {
+      description: 'Tempo value shown in the tempo/pitch dropdown trigger.',
+      table: { type: { summary: 'number | string' } },
+      control: 'text',
+    },
+    pitch: {
+      description: 'Pitch value shown in the tempo/pitch dropdown trigger.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    loopEnabled: {
+      description: 'Whether the loop control is active.',
+      table: { type: { summary: 'boolean' } },
+      control: 'boolean',
+    },
+    lyricsEnabled: {
+      description: 'Whether the lyrics control is active.',
+      table: { type: { summary: 'boolean' } },
+      control: 'boolean',
+    },
+    chordsEnabled: {
+      description: 'Whether the chords detection control is active.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+      control: 'boolean',
+    },
+    metronomeEnabled: {
+      description: 'Whether the metronome control is active.',
+      table: { type: { summary: 'boolean' } },
+      control: 'boolean',
+    },
+    expanded: {
+      description: 'Whether the expand control is in the expanded state.',
+      table: { type: { summary: 'boolean' } },
+      control: 'boolean',
+    },
+    menuOptions: {
+      description: 'Options passed to the track menu dropdown.',
+      table: { type: { summary: 'DropdownMenuOption[]' } },
+      control: false,
+    },
+    versionTrigger: {
+      description: 'Trigger node for the version dropdown.',
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
+    versionContent: {
+      description: 'Content rendered inside the version dropdown.',
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
+    tempoPitchContent: {
+      description: 'Content rendered inside the tempo/pitch dropdown.',
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
+    metronomeContent: {
+      description: 'Content rendered inside the metronome dropdown.',
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
+    volumeContent: {
+      description: 'Content rendered inside the volume popover.',
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
+    onPlayPause: {
+      description: 'Called when the main play/pause button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'play/pause clicked',
+    },
+    onSeekBackward: {
+      description: 'Called when the rewind button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'seek backward clicked',
+    },
+    onSeekForward: {
+      description: 'Called when the forward button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'seek forward clicked',
+    },
+    onSeek: {
+      description: 'Called with the next playback time in seconds.',
+      table: { type: { summary: '(time: number) => void' } },
+      action: 'seek changed',
+    },
+    onVolumeClick: {
+      description: 'Called when the volume button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'volume clicked',
+    },
+    onLoopToggle: {
+      description: 'Called when the loop button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'loop toggled',
+    },
+    onLyricsToggle: {
+      description: 'Called when the lyrics button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'lyrics toggled',
+    },
+    onChordsToggle: {
+      description: 'Called when the chords detection button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'chords toggled',
+    },
+    onMetronomeToggle: {
+      description: 'Called when the metronome trigger is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'metronome toggled',
+    },
+    onVideoClick: {
+      description: 'Called when the video button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'video clicked',
+    },
+    onShareClick: {
+      description: 'Called when the share button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'share clicked',
+    },
+    onExpandToggle: {
+      description: 'Called when the expand button is clicked.',
+      table: { type: { summary: 'function' } },
+      action: 'expand toggled',
+    },
+    className: {
+      description: 'Optional class name applied to the root element.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+  },
+}
+
+const defaultArgs = {
+  title: 'Pull Me Closer',
+  subtitle: 'Nina Tensor',
+  isPlaying: false,
+  currentTime: 82,
+  duration: 215,
+  tempo: 120,
+  pitch: 'C#',
+  menuOptions: [
+    {
+      type: 'item',
+      key: 'play',
+      label: 'Play',
+    },
+  ],
+  versionTrigger: <Text>v6</Text>,
+  versionContent: <Text>Version 6</Text>,
+  tempoPitchContent: <Text>120 bpm / 4/4</Text>,
+  metronomeContent: <Text>Metronome</Text>,
+  volumeContent: <Text>Volume</Text>,
+  onVolumeClick: () => { },
+  onVideoClick: () => { },
+  onShareClick: () => { },
+}
+
+export const Default = {
+  args: defaultArgs,
+  render: (args) => <StatefulPlayerBar {...args} />,
+}
+
+export const Playing = {
+  args: {
+    ...defaultArgs,
+    isPlaying: true,
+    currentTime: 146,
+  },
+  render: (args) => <StatefulPlayerBar {...args} />,
+}
+
+export const Dark = {
+  args: {
+    ...defaultArgs,
+    color: 'dark',
+  },
+  render: (args) => <StatefulPlayerBar {...args} />,
+}
+
+export const WithoutSlider = {
+  args: {
+    ...defaultArgs,
+    showSlider: false,
+  },
+  render: (args) => <StatefulPlayerBar {...args} />,
+}

package/src/components/PlayerSlider/PlayerSlider.jsx

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { Slider } from 'radix-ui'
+import { PlayerSliderWaveform } from './PlayerSliderWaveform'
+import styles from './PlayerSlider.module.css'
+import classNames from 'classnames'
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max)
+
+const getProgress = ({ currentTime, duration }) => {
+  if (!Number.isFinite(duration) || duration <= 0) return 0
+  if (!Number.isFinite(currentTime)) return 0
+
+  return clamp((currentTime / duration) * 100, 0, 100)
+}
+
+export const PlayerSlider = ({
+  currentTime = 0,
+  duration = 0,
+  audio,
+  onSeek,
+  className,
+}) => {
+  const [isInteracting, setIsInteracting] = useState(false)
+  const progressValue = getProgress({ currentTime, duration })
+
+  const handleSeek = ([value]) => {
+    onSeek((value / 100) * duration)
+  }
+
+  const handleInteractionStart = () => {
+    setIsInteracting(true)
+  }
+
+  const handleInteractionEnd = () => {
+    setIsInteracting(false)
+  }
+
+  return (
+    <div
+      className={classNames(styles.playerSlider, className)}
+      data-interacting={isInteracting ? 'true' : undefined}
+    >
+      <Slider.Root
+        className={styles.sliderRoot}
+        data-interacting={isInteracting ? 'true' : undefined}
+        min={0}
+        max={100}
+        step={0.1}
+        value={[progressValue]}
+        onValueChange={handleSeek}
+        onValueCommit={handleInteractionEnd}
+        onPointerDown={handleInteractionStart}
+        onPointerUp={handleInteractionEnd}
+        onPointerCancel={handleInteractionEnd}
+        onBlur={handleInteractionEnd}
+        aria-label="Playback position"
+      >
+        {audio && (
+          <div className={styles.waveformPreview} aria-hidden="true">
+            <PlayerSliderWaveform
+              audio={audio}
+              currentTime={currentTime}
+              duration={duration}
+              progress={progressValue}
+            />
+          </div>
+        )}
+        <Slider.Track className={styles.sliderTrack}>
+          <Slider.Range className={styles.sliderRange} />
+        </Slider.Track>
+        <Slider.Thumb
+          className={styles.sliderThumb}
+          onPointerUp={(e) => e.currentTarget.blur()}
+        />
+      </Slider.Root>
+    </div>
+  )
+}
+
+PlayerSlider.displayName = 'PlayerSlider'

package/src/components/PlayerSlider/PlayerSlider.module.css

@@ -0,0 +1,173 @@
+.playerSlider {
+  position: relative;
+  width: 100%;
+  height: 0;
+  overflow: visible;
+}
+
+.playerSlider[data-interacting='true']::before,
+.playerSlider:has(.sliderRoot:focus-within)::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 94px;
+  background: linear-gradient(180deg, rgba(15, 15, 17, 0.00) 0%, rgba(15, 15, 17, 0.95) 80.29%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.withoutTime {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.disabled {
+  opacity: 0.56;
+}
+
+.time {
+  color: var(--neutral-alpha-10);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.sliderRoot {
+  position: absolute;
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 16px;
+  touch-action: none;
+  user-select: none;
+  bottom: -7px;
+  z-index: 12;
+
+  &:hover {
+    .sliderTrack {
+      height: 4px;
+      border-radius: 9999px;
+    }
+  }
+}
+
+.sliderTrack {
+  position: relative;
+  /* z-index: 1; */
+  flex: 1;
+  height: 2px;
+  overflow: visible;
+  border-radius: 0px;
+  background: var(--neutral-5);
+}
+
+.bufferedRange {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  max-width: 100%;
+  border-radius: inherit;
+  background: var(--neutral-alpha-6);
+  pointer-events: none;
+}
+
+.sliderRange {
+  position: absolute;
+  height: 100%;
+  /* border-radius: inherit; */
+  background: var(--aqua-8);
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
+.sliderThumb {
+  position: relative;
+  display: block;
+  z-index: 10;
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--neutral-alpha-5);
+  border-radius: 9999px;
+  background: var(--white);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.waveformPreview {
+  position: absolute;
+  z-index: -1;
+  right: 0;
+  bottom: 8px;
+  left: 0;
+  height: 28px;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(4px);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.waveformPreview>div {
+  width: 100%;
+  height: 56px;
+}
+
+.sliderRoot[data-interacting='true'] .waveformPreview {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.sliderRoot:hover .sliderThumb,
+.sliderRoot:focus-within .sliderThumb {
+  opacity: 1;
+}
+
+.sliderRoot:not([data-disabled]),
+.sliderRoot:not([data-disabled]) .sliderTrack {
+  cursor: pointer;
+}
+
+.sliderThumb:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
+.sliderRoot[data-disabled] {
+  cursor: default;
+}
+
+.sliderRoot[data-disabled] .sliderRange {
+  background: var(--neutral-alpha-6);
+}
+
+.sliderRoot[data-disabled] .bufferedRange {
+  background: var(--neutral-alpha-4);
+}
+
+.sliderRoot[data-disabled] .sliderThumb {
+  cursor: default;
+}
+
+.sliderRoot[data-interacting='true'] .waveformPreview,
+.sliderRoot:focus-within .waveformPreview {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (max-width: 480px) {
+  .playerSlider {
+    grid-template-columns: 36px minmax(0, 1fr) 36px;
+    gap: 8px;
+  }
+}
+
+.sliderThumb:focus {
+  outline: none;
+}

package/src/components/PlayerSlider/PlayerSlider.stories.jsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { PlayerSlider } from './PlayerSlider'
+
+const SAMPLE_AUDIO =
+  'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a'
+
+function StatefulPlayerSlider(args) {
+  const [currentTime, setCurrentTime] = useState(args.currentTime)
+
+  return (
+    <PlayerSlider
+      {...args}
+      currentTime={currentTime}
+      onSeek={setCurrentTime}
+    />
+  )
+}
+
+export default {
+  title: 'New Mixer/PlayerSlider',
+  component: PlayerSlider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Seekable playback slider for New Mixer. Pass \`currentTime\` and \`duration\`, then update \`currentTime\` from \`onSeek\`. Progress is derived automatically from those values.
+
+When \`audio\` is provided, a waveform appears while the user presses or drags the thumb.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Flex
+        align="end"
+        justify="center"
+        width="640px"
+        maxWidth="100%"
+        p="6"
+        style={{ background: 'var(--neutral-8)', boxSizing: 'border-box' }}
+      >
+        <Flex width="100%">
+          <Story />
+        </Flex>
+      </Flex>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    currentTime: {
+      description: 'Current playback time in seconds.',
+      table: { type: { summary: 'number' } },
+      control: 'number',
+    },
+    duration: {
+      description: 'Total playback duration in seconds.',
+      table: { type: { summary: 'number' } },
+      control: 'number',
+    },
+    audio: {
+      description:
+        'Audio URL used to render the waveform while interacting with the slider.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    className: {
+      description: 'Optional class name applied to the root element.',
+      table: { type: { summary: 'string' } },
+      control: 'text',
+    },
+    onSeek: {
+      description: 'Called with the next playback time in seconds.',
+      table: { type: { summary: '(time: number) => void' } },
+      action: 'seek changed',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    currentTime: 82,
+    duration: 215,
+    audio: SAMPLE_AUDIO,
+  },
+  render: (args) => <StatefulPlayerSlider {...args} />,
+}
+
+export const WithoutWaveform = {
+  args: {
+    currentTime: 82,
+    duration: 215,
+  },
+  render: (args) => <StatefulPlayerSlider {...args} />,
+}