@moises.ai/design-system 4.16.9 → 4.16.11

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

@@ -1,519 +0,0 @@
-import { useState } from 'react'
-import { Flex } from '@radix-ui/themes'
-import { Text } from '../../index'
-import { PlayerBar } from './PlayerBar'
-import { PlayerMasterVolume } from '../PlayerMasterVolume/PlayerMasterVolume'
-import { PlayerTempoPitch } from '../PlayerTempoPitch/PlayerTempoPitch'
-import { PlayerSmartMetronome } from '../PlayerSmartMetronome/PlayerSmartMetronome'
-
-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 [volume, setVolume] = useState(args.volume ?? 1)
-  const [tempo, setTempo] = useState(args.tempo ?? 120)
-  const [pitch, setPitch] = useState(args.pitch ?? 'C#')
-  const [tuning, setTuning] = useState(args.tuning ?? 440)
-  const [subDivision, setSubDivision] = useState(args.subDivision ?? '1x')
-  const [metronomeVolume, setMetronomeVolume] = useState(args.metronomeVolume ?? 50)
-  const [countIn, setCountIn] = useState(args.countIn ?? 'off')
-  const [panValue, setPanValue] = useState(args.panValue ?? 0)
-  const [stems, setStems] = useState(
-    args.stems ?? [
-      { name: 'Vocals', volume: 80 },
-      { name: 'Drums', volume: 65 },
-      { name: 'Bass', volume: 70 },
-      { name: 'Others', volume: 55 },
-    ],
-  )
-
-  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}
-      tempo={tempo}
-      pitch={pitch}
-      volumeContent={
-        <PlayerMasterVolume
-          volume={volume}
-          stems={stems}
-          onVolumeChange={([value]) => {
-            setVolume(value)
-            args.onVolumeChange?.([value])
-          }}
-          onStemVolumeChange={(name, value) => {
-            setStems((prev) =>
-              prev.map((stem) =>
-                stem.name === name ? { ...stem, volume: value } : stem,
-              ),
-            )
-            args.onStemVolumeChange?.(name, value)
-          }}
-        />
-      }
-      tempoPitchContent={
-        <PlayerTempoPitch
-          tempo={tempo}
-          pitch={pitch}
-          tuning={tuning}
-          onTempoChange={(value) => {
-            setTempo(value)
-            args.onTempoChange?.(value)
-          }}
-          onPitchChange={(value) => {
-            setPitch(value)
-            args.onPitchChange?.(value)
-          }}
-          onTuningChange={(value) => {
-            setTuning(value)
-            args.onTuningChange?.(value)
-          }}
-          onRefresh={() => {
-            setTempo(120)
-            setPitch('C#')
-            setTuning(440)
-            args.onTempoPitchRefresh?.()
-          }}
-        />
-      }
-      metronomeContent={
-        <PlayerSmartMetronome
-          subDivision={subDivision}
-          volume={metronomeVolume}
-          countIn={countIn}
-          panValue={panValue}
-          onSubDivisionChange={(value) => {
-            setSubDivision(value)
-            args.onSubDivisionChange?.(value)
-          }}
-          onVolumeChange={(value) => {
-            setMetronomeVolume(value)
-            args.onMetronomeVolumeChange?.(value)
-          }}
-          onCountInChange={(value) => {
-            setCountIn(value)
-            args.onCountInChange?.(value)
-          }}
-          onPanChange={(value) => {
-            setPanValue(value)
-            args.onPanChange?.(value)
-          }}
-          onRefresh={() => {
-            setSubDivision('1x')
-            setMetronomeVolume(50)
-            setCountIn('off')
-            setPanValue(0)
-            args.onMetronomeRefresh?.()
-          }}
-        />
-      }
-      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: 'number',
-    },
-    pitch: {
-      description: 'Pitch value shown in the tempo/pitch dropdown trigger.',
-      table: { type: { summary: 'string' } },
-      control: 'text',
-    },
-    tuning: {
-      description: 'Reference tuning in Hz for PlayerTempoPitch.',
-      table: { type: { summary: 'number' }, defaultValue: { summary: 440 } },
-      control: 'select',
-      options: [440, 442, 444, 446],
-    },
-    volume: {
-      description: 'Master gain passed to PlayerMasterVolume.',
-      table: { type: { summary: 'number' }, defaultValue: { summary: 1 } },
-      control: { type: 'range', min: 0, max: 2, step: 0.01 },
-    },
-    subDivision: {
-      description: 'Metronome sub-division for PlayerSmartMetronome.',
-      table: { type: { summary: "'0.5x' | '1x' | '2x'" }, defaultValue: { summary: '1x' } },
-      control: 'select',
-      options: ['0.5x', '1x', '2x'],
-    },
-    metronomeVolume: {
-      description: 'Metronome volume percentage (0–100).',
-      table: { type: { summary: 'number' }, defaultValue: { summary: 50 } },
-      control: { type: 'range', min: 0, max: 100, step: 1 },
-    },
-    countIn: {
-      description: 'Metronome count-in setting.',
-      table: { type: { summary: "'off' | '1 bar' | '2 bars'" }, defaultValue: { summary: 'off' } },
-      control: 'select',
-      options: ['off', '1 bar', '2 bars'],
-    },
-    panValue: {
-      description: 'Metronome pan position.',
-      table: { type: { summary: 'number' }, defaultValue: { summary: 0 } },
-      control: { type: 'range', min: -1, max: 1, step: 0.01 },
-    },
-    stems: {
-      description: 'Stem rows for PlayerMasterVolume.',
-      table: { type: { summary: '{ name: string, volume: number }[]' } },
-      control: false,
-    },
-    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,
-    },
-    volumeContent: {
-      description: 'Content rendered inside the volume popover.',
-      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,
-    },
-    onVolumeChange: {
-      description: 'Called with `[gain]` when the master fader moves.',
-      table: { type: { summary: '([gain: number]) => void' } },
-      action: 'volume changed',
-    },
-    onStemVolumeChange: {
-      description: 'Called when a stem slider changes.',
-      table: { type: { summary: '(name: string, value: number) => void' } },
-      action: 'stem volume changed',
-    },
-    onTempoChange: {
-      description: 'Called when tempo changes in PlayerTempoPitch.',
-      table: { type: { summary: '(tempo: number | "") => void' } },
-      action: 'tempo changed',
-    },
-    onPitchChange: {
-      description: 'Called when pitch changes in PlayerTempoPitch.',
-      table: { type: { summary: '(pitch: string) => void' } },
-      action: 'pitch changed',
-    },
-    onTuningChange: {
-      description: 'Called when tuning changes in PlayerTempoPitch.',
-      table: { type: { summary: '(tuning: number) => void' } },
-      action: 'tuning changed',
-    },
-    onTempoPitchRefresh: {
-      description: 'Called when PlayerTempoPitch refresh is clicked.',
-      table: { type: { summary: '() => void' } },
-      action: 'tempo/pitch refreshed',
-    },
-    onSubDivisionChange: {
-      description: 'Called when metronome sub-division changes.',
-      table: { type: { summary: '(value: string) => void' } },
-      action: 'sub-division changed',
-    },
-    onMetronomeVolumeChange: {
-      description: 'Called when metronome volume changes.',
-      table: { type: { summary: '(value: number) => void' } },
-      action: 'metronome volume changed',
-    },
-    onCountInChange: {
-      description: 'Called when metronome count-in changes.',
-      table: { type: { summary: '(value: string) => void' } },
-      action: 'count-in changed',
-    },
-    onPanChange: {
-      description: 'Called when metronome pan changes.',
-      table: { type: { summary: '(value: number) => void' } },
-      action: 'pan changed',
-    },
-    onMetronomeRefresh: {
-      description: 'Called when PlayerSmartMetronome refresh is clicked.',
-      table: { type: { summary: '() => void' } },
-      action: 'metronome refreshed',
-    },
-    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>,
-  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/PlayerMasterVolume/PlayerMasterVolume.jsx

@@ -1,54 +0,0 @@
-import styles from './PlayerMasterVolume.module.css'
-import classNames from 'classnames'
-import { Text, Flex, InputLevelMeter, Button, Separator, SliderLibrary } from '../../index'
-import { ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons'
-import { useState } from 'react'
-
-export const PlayerMasterVolume = ({
-  onVolumeChange,
-  onStemVolumeChange,
-  volume = 1,
-  stems,
-
-}) => {
-  const [stemsOpen, setStemsOpen] = useState(false)
-
-  return (
-    <Flex className={styles.PlayerMasterVolume} direction="column">
-      <Flex direction="column" gap="4">
-        <Text size="3" weight="medium" className={styles.white}>
-          Master Volume
-        </Text>
-        <Flex gap="4" align="center">
-          <InputLevelMeter
-            linear={[0, 0]}
-            volume={volume}
-            onVolumeChange={onVolumeChange}
-          />
-          <Button variant="soft" size="1">−∞dB</Button>
-        </Flex>
-        {stems?.length > 0 && <Separator size='4' />}
-      </Flex>
-      {stems?.length > 0 && (
-        <>
-          <Flex width='100%' justify='between' mt="2" as="button" align="center" onClick={() => setStemsOpen(!stemsOpen)} className={styles.accordionButton}>
-            <Text size="2" className={styles.neutralAlpha11}>Stems</Text>
-            {stemsOpen ? <ChevronUpIcon className={styles.neutralAlpha9} width={16} height={16} /> : <ChevronDownIcon className={styles.neutralAlpha9} width={16} height={16} />}
-          </Flex>
-          {stemsOpen && (
-            <Flex direction="column" gap="3" className={styles.accordionContent}>
-              {stems.map((stem) => (
-                <Flex width='100%' gap="3" key={stem.name}>
-                  <Text size="2" className={classNames(styles.neutralAlpha11, styles.flex1)}>{stem.name}</Text>
-                  <SliderLibrary value={stem.volume} onValueChange={(value) => onStemVolumeChange?.(stem.name, value)} className={styles.flex2} />
-                </Flex>
-              ))}
-            </Flex>
-          )}
-        </>
-      )}
-    </Flex>
-  )
-}
-
-PlayerMasterVolume.displayName = 'PlayerMasterVolume'

package/src/components/PlayerMasterVolume/PlayerMasterVolume.module.css

@@ -1,31 +0,0 @@
-.PlayerMasterVolume {
-  min-width: 286px;
-}
-
-.neutralAlpha11 {
-  color: var(--neutral-alpha-11);
-}
-
-.accordionButton {
-  padding: 6px 0;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.neutralAlpha9 {
-  color: var(--neutral-alpha-9);
-}
-
-.accordionContent {
-  padding: 12px 0 0 0;
-}
-
-.flex1 {
-  flex: 1;
-}
-
-.flex2 {
-  flex: 2;
-}