@moises.ai/design-system 3.11.2 → 3.11.3

package/package.json

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

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -0,0 +1,205 @@
+import { memo, useCallback, useRef, useState } from 'react'
+import styles from './InputLevelMeter.module.css'
+
+const SEGMENT_MIN = 5
+const SEGMENT_RANGE = 25
+const UNITY_GAIN_POS = 0.667
+const MAX_BOOST_DB = 6
+
+function linearToMeterLevel(linear) {
+  const peakDb = 20 * Math.log10(Math.max(linear, 1e-6))
+  return Math.max(0, Math.min(30, (peakDb + 60) / 2))
+}
+
+function clampLevel(level) {
+  if (!Number.isFinite(level)) return 0
+  return Math.max(0, Math.min(30, level))
+}
+
+function clampPeakDb(peakDb) {
+  if (!Number.isFinite(peakDb)) return Number.NEGATIVE_INFINITY
+  return Math.max(-96, peakDb)
+}
+
+function getNormalizedLevel(level) {
+  return Math.max(
+    0,
+    Math.min(100, ((clampLevel(level) - SEGMENT_MIN) / SEGMENT_RANGE) * 100),
+  )
+}
+
+function getPeakHoldColor(peakPct) {
+  if (peakPct >= 88) return 'rgba(254, 78, 84, 0.89)'
+  if (peakPct >= 69) return 'rgb(255, 197, 61)'
+  return '#00dae8'
+}
+
+function gainToFaderPosition(gain) {
+  if (gain <= 0) return 0
+  const db = 20 * Math.log10(gain)
+  if (db <= -96) return 0
+  if (db <= 0) return ((db + 96) / 96) * UNITY_GAIN_POS
+  return (
+    UNITY_GAIN_POS +
+    (Math.min(db, MAX_BOOST_DB) / MAX_BOOST_DB) * (1 - UNITY_GAIN_POS)
+  )
+}
+
+function faderPositionToGain(pos) {
+  if (pos <= 0) return 0
+  let db
+  if (pos <= UNITY_GAIN_POS) {
+    db = (pos / UNITY_GAIN_POS) * 96 - 96
+  } else {
+    db = ((pos - UNITY_GAIN_POS) / (1 - UNITY_GAIN_POS)) * MAX_BOOST_DB
+  }
+  return 10 ** (db / 20)
+}
+
+function MeterRow({ level }) {
+  const pct = getNormalizedLevel(level)
+  return (
+    <div className={styles.barRow}>
+      <div className={styles.barTrack} />
+      <div
+        className={styles.barFill}
+        style={{
+          width: `${pct}%`,
+          backgroundSize: pct > 0 ? `${10000 / pct}% 100%` : '100% 100%',
+        }}
+      />
+    </div>
+  )
+}
+
+export const InputLevelMeter = memo(function InputLevelMeter({
+  linear = [0, 0],
+  volume = 1,
+  onVolumeChange,
+  showHandler = true,
+  showMeter = true,
+}) {
+  const [linearL, linearR] = linear
+  const leftLevel = clampLevel(linearToMeterLevel(linearL ?? 0))
+  const rightLevel = clampLevel(linearToMeterLevel(linearR ?? 0))
+
+  const [isPressed, setIsPressed] = useState(false)
+  const isPressedRef = useRef(false)
+  const meterRef = useRef(null)
+  const peakHoldRef = useRef(0)
+
+  const faderPercent = Math.max(
+    0,
+    Math.min(100, gainToFaderPosition(volume) * 100),
+  )
+
+  const leftNormalized = getNormalizedLevel(leftLevel)
+  const rightNormalized = getNormalizedLevel(rightLevel)
+  const currentPeakPct = Math.max(leftNormalized, rightNormalized)
+
+  if (currentPeakPct > peakHoldRef.current) {
+    peakHoldRef.current = currentPeakPct
+  }
+  if (currentPeakPct <= 0) {
+    peakHoldRef.current = 0
+  }
+
+  const peakHoldPct = peakHoldRef.current
+  const peakHoldColor = getPeakHoldColor(peakHoldPct)
+  const showPeakHold = peakHoldPct > 0
+
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!onVolumeChange) return
+      e.currentTarget.setPointerCapture(e.pointerId)
+      isPressedRef.current = true
+      setIsPressed(true)
+      const rect = meterRef.current?.getBoundingClientRect()
+      if (rect) {
+        const pos = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        )
+        onVolumeChange([faderPositionToGain(pos)])
+      }
+    },
+    [onVolumeChange],
+  )
+
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isPressedRef.current || !onVolumeChange) return
+      const rect = meterRef.current?.getBoundingClientRect()
+      if (rect) {
+        const pos = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width),
+        )
+        onVolumeChange([faderPositionToGain(pos)])
+      }
+    },
+    [onVolumeChange],
+  )
+
+  const handlePointerUp = useCallback(() => {
+    isPressedRef.current = false
+    setIsPressed(false)
+  }, [])
+
+  const meterClassName = [styles.bars, isPressed ? styles.pressed : '']
+    .filter(Boolean)
+    .join(' ')
+
+  const hasHandler = onVolumeChange && showHandler
+
+  return (
+    <div
+      className={styles.container}
+      onMouseLeave={() => {
+        if (!isPressed) setIsPressed(false)
+      }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      <div ref={meterRef} className={meterClassName}>
+        <MeterRow level={leftLevel} />
+        <MeterRow level={rightLevel} />
+
+        {hasHandler && (
+          <div
+            className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
+            style={{ left: `${faderPercent}%` }}
+          />
+        )}
+
+        {showPeakHold && (
+          <>
+            <div
+              className={styles.peakDotTop}
+              style={{
+                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+                background: peakHoldColor,
+              }}
+            />
+            <div
+              className={styles.peakDotBottom}
+              style={{
+                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+                background: peakHoldColor,
+              }}
+            />
+          </>
+        )}
+      </div>
+
+      {showMeter && (
+        <div
+          className={`${styles.zeroDbDot} ${isPressed ? styles.pressed : ''}`}
+        />
+      )}
+    </div>
+  )
+})
+
+InputLevelMeter.displayName = 'InputLevelMeter'

package/src/components/InputLevelMeter/InputLevelMeter.module.css

@@ -0,0 +1,111 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.bars {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 3px;
+  width: 100%;
+  background: rgba(216, 244, 246, 0.04);
+  transition: background-color 0.1s ease;
+}
+
+.bars.pressed {
+  background: rgba(221, 234, 248, 0.08);
+}
+
+.barRow {
+  display: inline-grid;
+  grid-template-rows: max-content;
+  place-items: start;
+  width: 100%;
+  position: relative;
+  line-height: 0;
+}
+
+.barTrack {
+  grid-column: 1;
+  grid-row: 1;
+  height: 3px;
+  width: 100%;
+  border-radius: 9999px;
+}
+
+.barFill {
+  grid-column: 1;
+  grid-row: 1;
+  height: 3px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    270deg,
+    rgba(254, 78, 84, 0.894) 12%,
+    rgb(255, 197, 61) 12%,
+    rgb(255, 197, 61) 31%,
+    rgb(0, 218, 232) 31%
+  );
+  will-change: width;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 19px;
+  border-radius: 9999px;
+  background: #edeef0;
+  cursor: ew-resize;
+  z-index: 2;
+  touch-action: none;
+}
+
+.thumb.pressed {
+  background: white;
+}
+
+.peakDot {
+  position: absolute;
+  width: 1px;
+  height: 3px;
+  border-radius: 9999px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.peakDotTop {
+  composes: peakDot;
+  top: calc(50% - 2px);
+  transform: translate(-50%, -50%);
+}
+
+.peakDotBottom {
+  composes: peakDot;
+  top: calc(50% + 2px);
+  transform: translate(-50%, -50%);
+}
+
+.zeroDbDot {
+  position: absolute;
+  left: 66.7%;
+  top: 12px;
+  width: 2px;
+  height: 2px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.zeroDbDot.pressed {
+  width: 3px;
+  height: 3px;
+}

package/src/components/InputLevelMeter/InputLevelMeter.stories.jsx

@@ -0,0 +1,27 @@
+import { InputLevelMeter } from './InputLevelMeter'
+import { useSimulatedInputLevel } from './useSimulatedInputLevel'
+
+export default {
+  title: 'Components/InputLevelMeter',
+  component: InputLevelMeter,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d', width: '200px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+function AnimatedMeter() {
+  const linear = useSimulatedInputLevel()
+  return <InputLevelMeter linear={linear} />
+}
+
+export const Default = {
+  render: () => <AnimatedMeter />,
+}

package/src/components/InputLevelMeter/useSimulatedInputLevel.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useSimulatedInputLevel() {
+  const [linear, setLinear] = useState([0.5, 0.5])
+  const targetRef = useRef([0.5, 0.5])
+  const currentRef = useRef([0.5, 0.5])
+  const frameRef = useRef(null)
+  const tickRef = useRef(0)
+
+  useEffect(() => {
+    function animate() {
+      tickRef.current++
+
+      if (tickRef.current % 20 === 0) {
+        targetRef.current = [Math.random(), Math.random()]
+      }
+
+      currentRef.current = currentRef.current.map((cur, i) => {
+        const target = targetRef.current[i]
+        const speed = cur > target ? 0.15 : 0.08
+        return cur + (target - cur) * speed
+      })
+
+      setLinear([...currentRef.current])
+      frameRef.current = requestAnimationFrame(animate)
+    }
+
+    frameRef.current = requestAnimationFrame(animate)
+    return () => cancelAnimationFrame(frameRef.current)
+  }, [])
+
+  return linear
+}

package/src/components/TrackHeader/RecordSettingsPopover.jsx

@@ -1,8 +1,8 @@
 import { Flex, Text } from '@radix-ui/themes'
 import { Popover } from 'radix-ui'
 import { useCallback, useState } from 'react'
+import { InputLevelMeter } from '../InputLevelMeter/InputLevelMeter'
 import { Select } from '../Select/Select'
-import { Slider } from '../Slider/Slider'
 import styles from './RecordSettingsPopover.module.css'
 
 export function RecordSettingsPopover({
@@ -18,11 +18,14 @@ export function RecordSettingsPopover({
 }) {
   const [opened, setOpened] = useState(false)
 
-  const handleOpenChange = useCallback((open) => {
-    if (!open || !isRecord) {
-      setOpened(open)
-    }
-  }, [])
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (!open || !isRecord) {
+        setOpened(open)
+      }
+    },
+    [open, isRecord],
+  )
 
   const handleContextMenu = useCallback(() => {
     e.preventDefault()
@@ -69,11 +72,7 @@ export function RecordSettingsPopover({
             </Text>
 
             {opened && (
-              <Slider
-                value={inputLevel}
-                max={30}
-                style={{ paddingTop: '8px', paddingBottom: '8px' }}
-              />
+              <InputLevelMeter linear={inputLevel} showHandler={false} />
             )}
           </Flex>
         </Flex>

package/src/components/TrackHeader/TrackHeader.jsx

@@ -9,8 +9,8 @@ import {
   Box,
   DropdownMenu,
   Flex,
-  HorizontalVolume,
   IconButton,
+  InputLevelMeter,
   PanControl,
   Text,
   Tooltip,
@@ -32,14 +32,13 @@ export const TrackHeader = memo(
     menuOptions,
     showPan = true,
     showVolumeControls = true,
-    isGrouped = false,
     height = 81,
     compact = false,
     isActive = false,
     instrumentOptions,
     deviceOptions,
     channelOptions,
-    inputLevel,
+    inputLevel: inputLevel,
 
     // State
     volume,
@@ -213,9 +212,10 @@ export const TrackHeader = memo(
             <div {...DND_PROTECTION} className={styles.trackControls}>
               {!compact && showVolumeControls && (
                 <>
-                  <HorizontalVolume
+                  <InputLevelMeter
+                    linear={inputLevel}
                     volume={volume}
-                    onChangeValue={onVolumeChange}
+                    onVolumeChange={onVolumeChange}
                   />
                   {showPan && (
                     <PanControl

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { BassIcon, DrumsIcon, ElectricGuitarIcon, KeysIcon } from '../../icons'
+import { useSimulatedInputLevel } from '../InputLevelMeter/useSimulatedInputLevel'
 import { TrackHeader } from './TrackHeader'
 export default {
   title: 'Components/TrackHeader',
@@ -130,7 +131,33 @@ export const Default = {
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
-  render: (args) => <TrackHeader {...args} />,
+  render: (args) => {
+    const inputLevel = useSimulatedInputLevel()
+    const [isRecord, setIsRecord] = useState(false)
+    const [isMuted, setIsMuted] = useState(args.isMuted)
+    const [isSolo, setIsSolo] = useState(args.isSolo)
+
+    return (
+      <TrackHeader
+        {...args}
+        deviceOptions={[
+          { value: 'mic', label: 'Built-in Microphone' },
+          { value: 'interface', label: 'Audio Interface' },
+        ]}
+        channelOptions={[
+          { value: '1', label: 'Channel 1' },
+          { value: '2', label: 'Channel 2' },
+        ]}
+        isRecord={isRecord}
+        onRecordChange={() => setIsRecord((v) => !v)}
+        isMuted={isMuted}
+        onMutedChange={() => setIsMuted((v) => !v)}
+        isSolo={isSolo}
+        onSoloChange={() => setIsSolo((v) => !v)}
+        inputLevel={inputLevel}
+      />
+    )
+  },
 }
 
 export const Group = {

package/src/index.jsx

@@ -87,6 +87,7 @@ export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
+export { EmptyState } from './components/EmptyState/EmptyState'
 export {
   Extension,
   useExtension,
@@ -100,6 +101,7 @@ export { GroupButtons } from './components/GroupButtons/GroupButtons'
 export { HeaderPanel } from './components/HeaderPanel/HeaderPanel'
 export { HorizontalVolume } from './components/HorizontalVolume/HorizontalVolume'
 export { IconButton } from './components/IconButton/IconButton'
+export { InputLevelMeter } from './components/InputLevelMeter/InputLevelMeter'
 export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
 export { Knob } from './components/Knob/Knob'
 export { ListCards } from './components/ListCards/ListCards'
@@ -132,15 +134,16 @@ export { Text } from './components/Text/Text'
 export { TextArea } from './components/TextArea/TextArea'
 export { TextField } from './components/TextField/TextField'
 export { Theme } from './components/theme/Theme'
-export { ToastProvider, useToast } from './components/ToastProvider/ToastProvider'
 export { ThumbnailPicker } from './components/ThumbnailPicker/ThumbnailPicker'
+export {
+  ToastProvider,
+  useToast,
+} from './components/ToastProvider/ToastProvider'
 export { Tooltip } from './components/Tooltip/Tooltip'
 export { TooltipWithInfoIcon } from './components/TooltipWithInfoIcon/TooltipWithInfoIcon'
 export { TrackControlButton } from './components/TrackControlButton'
+export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'
 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 { EmptyState } from './components/EmptyState/EmptyState'
-export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'