@moises.ai/design-system 4.16.6 → 4.16.7

package/package.json

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

package/src/colors/custom-styles.css

@@ -155,6 +155,7 @@
 
   /* Error */
   --error-alpha-5: rgba(255, 32, 71, 0.34);
+  --error-alpha-10: #EC5D5E;
   --error-alpha-11: #FF9592;
   --error-alpha-12: #FFD1D9;
 

package/src/components/PlayerBar/PlayerBar.jsx

@@ -20,7 +20,6 @@ import { Text, Flex, IconButton, DropdownMenu, DropdownButton, Separator, Popove
 import styles from './PlayerBar.module.css'
 import { PlayerSlider } from '../PlayerSlider/PlayerSlider'
 
-
 const formatTime = (time) => {
   const totalSeconds = Math.floor(time)
   const minutes = Math.floor(totalSeconds / 60)
@@ -140,16 +139,18 @@ export const PlayerBar = ({
 
         <Flex className={styles.flex1} direction="column" gap="0" align="center">
           <Flex align="center" gap="3">
-            <Popover.Root>
-              <Popover.Trigger>
-                <IconButton variant="ghost" size="2" onClick={onVolumeClick}>
-                  <Volume2Icon width={16} height={16} />
-                </IconButton>
-              </Popover.Trigger>
-              <Popover.Content>
-                {volumeContent}
-              </Popover.Content>
-            </Popover.Root>
+            {volumeContent && (
+              <Popover.Root>
+                <Popover.Trigger>
+                  <IconButton variant="ghost" size="2" onClick={onVolumeClick}>
+                    <Volume2Icon width={16} height={16} />
+                  </IconButton>
+                </Popover.Trigger>
+                <Popover.Content>
+                  {volumeContent}
+                </Popover.Content>
+              </Popover.Root>
+            )}
             <Flex gap='0' >
               <IconButton variant="ghost" size="4" onClick={onSeekBackward} className={styles.controlsIconButton}>
                 <RewindBarFillIcon width={30} height={30} />

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

@@ -2,6 +2,9 @@ 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'
@@ -17,6 +20,22 @@ function StatefulPlayerBar(args) {
   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) =>
@@ -36,6 +55,82 @@ function StatefulPlayerBar(args) {
       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)}
@@ -145,13 +240,51 @@ Use it as a controlled component: pass playback state through props and update i
     tempo: {
       description: 'Tempo value shown in the tempo/pitch dropdown trigger.',
       table: { type: { summary: 'number | string' } },
-      control: 'text',
+      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' } },
@@ -195,6 +328,11 @@ Use it as a controlled component: pass playback state through props and update i
       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' } },
@@ -205,10 +343,60 @@ Use it as a controlled component: pass playback state through props and update i
       table: { type: { summary: 'ReactNode' } },
       control: false,
     },
-    volumeContent: {
-      description: 'Content rendered inside the volume popover.',
-      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.',
@@ -295,9 +483,6 @@ const defaultArgs = {
   ],
   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: () => { },

package/src/components/PlayerMasterVolume/PlayerMasterVolume.jsx

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,31 @@
+.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;
+}

package/src/components/PlayerMasterVolume/PlayerMasterVolume.stories.jsx

@@ -0,0 +1,182 @@
+import { useCallback, useEffect, useState } from 'react'
+import { PlayerMasterVolume } from './PlayerMasterVolume'
+
+const DEFAULT_STEMS = [
+  { name: 'Vocals', volume: 80 },
+  { name: 'Drums', volume: 65 },
+  { name: 'Bass', volume: 70 },
+  { name: 'Others', volume: 55 },
+]
+
+function StatefulPlayerMasterVolume({
+  initialVolume = 1,
+  initialStems = DEFAULT_STEMS,
+  onVolumeChange,
+  onStemVolumeChange,
+}) {
+  const [volume, setVolume] = useState(initialVolume)
+  const [stems, setStems] = useState(initialStems)
+
+  useEffect(() => {
+    setVolume(initialVolume)
+  }, [initialVolume])
+
+  useEffect(() => {
+    setStems(initialStems)
+  }, [initialStems])
+
+  const handleVolumeChange = useCallback(
+    ([value]) => {
+      setVolume(value)
+      onVolumeChange?.([value])
+    },
+    [onVolumeChange],
+  )
+
+  const handleStemVolumeChange = useCallback(
+    (name, value) => {
+      setStems((prev) =>
+        prev.map((stem) =>
+          stem.name === name ? { ...stem, volume: value } : stem,
+        ),
+      )
+      onStemVolumeChange?.(name, value)
+    },
+    [onStemVolumeChange],
+  )
+
+  return (
+    <PlayerMasterVolume
+      volume={volume}
+      stems={stems}
+      onVolumeChange={handleVolumeChange}
+      onStemVolumeChange={handleStemVolumeChange}
+    />
+  )
+}
+
+export default {
+  title: 'New Mixer/PlayerMasterVolume',
+  component: PlayerMasterVolume,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Master volume popover for New Mixer. Pass \`volume\` and update it from \`onVolumeChange\` (receives a gain array from \`InputLevelMeter\`). Stem sliders are controlled via \`stems\` and \`onStemVolumeChange\`.
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: 286,
+          padding: 16,
+          background: '#1d1d1d',
+          borderRadius: 8,
+          boxSizing: 'border-box',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    volume: {
+      description: 'Master gain passed to InputLevelMeter (0 = mute, 1 = unity).',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 1 } },
+      control: { type: 'range', min: 0, max: 2, step: 0.01 },
+    },
+    stems: {
+      description: 'Stem rows rendered when the accordion is open.',
+      table: { type: { summary: '{ name: string, volume: number }[]' } },
+      control: false,
+    },
+    onVolumeChange: {
+      description: 'Called with `[gain]` when the master fader moves.',
+      table: { type: { summary: '([gain: number]) => void' } },
+      action: 'volume changed',
+    },
+    onStemVolumeChange: {
+      description: 'Called with stem name and slider value (0–100).',
+      table: { type: { summary: '(name: string, value: number) => void' } },
+      action: 'stem volume changed',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    volume: 1,
+    initialStems: DEFAULT_STEMS,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      initialStems={args.initialStems}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const VolumeAtZero = {
+  args: {
+    volume: 0,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const VolumeBoosted = {
+  args: {
+    volume: 1.5,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const CustomStems = {
+  args: {
+    volume: 1,
+    initialStems: [
+      { name: 'Vocals', volume: 100 },
+      { name: 'Guitar', volume: 40 },
+      { name: 'Keys', volume: 60 },
+    ],
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      initialStems={args.initialStems}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}
+
+export const Playground = {
+  args: {
+    volume: 1,
+  },
+  render: (args) => (
+    <StatefulPlayerMasterVolume
+      initialVolume={args.volume}
+      onVolumeChange={args.onVolumeChange}
+      onStemVolumeChange={args.onStemVolumeChange}
+    />
+  ),
+}

package/src/components/PlayerSmartMetronome/PlayerSmartMetronome.jsx

@@ -0,0 +1,79 @@
+import styles from './PlayerSmartMetronome.module.css'
+import { Flex, Text, SliderLibrary, Separator, IconButton, PanControl } from '../../index'
+import { RefreshBackIcon } from '../../icons'
+import { SegmentedField } from './SegmentedField'
+
+export const PlayerSmartMetronome = ({
+  subDivision = '1x',
+  volume = 50,
+  countIn = 'off',
+  panValue = 0,
+  onSubDivisionChange,
+  onVolumeChange,
+  onCountInChange,
+  onRefresh,
+  onPanChange,
+}) => {
+  return (
+    <Flex className={styles.PlayerSmartMetronome} direction="column" gap="4">
+      <Flex align="center" gap="2" justify="between">
+        <Text size="3" weight="medium" className={styles.white}>
+          Smart Metronome
+        </Text>
+
+        <IconButton variant="ghost" size="1" onClick={onRefresh}>
+          <RefreshBackIcon width={16} height={16} />
+        </IconButton>
+      </Flex>
+
+      <SegmentedField
+        label="Sub-division"
+        items={[
+          { value: '0.5x', label: '0.5x' },
+          { value: '1x', label: '1x' },
+          { value: '2x', label: '2x' },
+        ]}
+        value={subDivision}
+        onChange={onSubDivisionChange}
+      />
+      <Flex gap="3" align="end" justify="between">
+        <Flex className={styles.flex1} direction="column" gap="1">
+          <Flex width="100%" justify="between" align="center">
+            <Text size="2" className={styles.neutral12}>
+              Metronome volume
+            </Text>
+
+            <Text size="2" className={styles.neutralAlpha9}>
+              {volume}%
+            </Text>
+          </Flex>
+          <SliderLibrary
+            value={volume}
+            onValueChange={onVolumeChange}
+            formatValue={(v) => `${v}%`}
+            aria-label="Volume"
+          />
+        </Flex>
+
+        <PanControl value={panValue} onChange={onPanChange} />
+      </Flex>
+
+      <Flex justify="center" width="100%">
+        <Separator size="1" className={styles.neutralAlpha4} />
+      </Flex>
+
+      <SegmentedField
+        label="Count-in"
+        items={[
+          { value: 'off', label: 'Off' },
+          { value: '1 bar', label: '1 bar' },
+          { value: '2 bars', label: '2 bars' },
+        ]}
+        value={countIn}
+        onChange={onCountInChange}
+      />
+    </Flex>
+  )
+}
+
+PlayerSmartMetronome.displayName = 'PlayerSmartMetronome'

package/src/components/PlayerSmartMetronome/PlayerSmartMetronome.module.css

@@ -0,0 +1,23 @@
+.PlayerSmartMetronome {
+  min-width: 258px;
+}
+
+.neutral12 {
+  color: var(--neutral-12);
+}
+
+.neutralAlpha4 {
+  color: var(--neutral-alpha-4);
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.neutralAlpha9 {
+  color: var(--neutral-alpha-9);
+}
+
+.white {
+  color: var(--white);
+}