Volume Knob

'use client'

import { useRef, useState } from 'react'
import './volume-knob.css'

export interface VolumeKnobProps {
  value?: number
  defaultValue?: number
  onValueChange?: (v: number) => void
  label?: string
  /** Number of tick marks around the dial. */
  ticks?: number
  color?: string
  fill?: 'dark' | 'light'
  className?: string
}

const SWEEP = 270
const START = -135

/** A rotary dial: drag up/down or around it, or use arrow, Page and Home/End keys. role="slider". */
export function VolumeKnob({ value, defaultValue = 64, onValueChange, label = 'Volume', ticks = 28, color = '#a3e635', fill = 'dark', className }: VolumeKnobProps) {
  const [inner, setInner] = useState(defaultValue)
  const v = value ?? inner
  const drag = useRef<{ y: number; v: number } | null>(null)
  const set = (n: number) => {
    const c = Math.round(Math.min(100, Math.max(0, n)))
    if (value === undefined) setInner(c)
    onValueChange?.(c)
  }
  const angle = START + (v / 100) * SWEEP
  return (
    <div className={['sd-vk', className].filter(Boolean).join(' ')} data-fill={fill} style={{ '--vk-c': color } as React.CSSProperties}>
      <div
        className="sd-vk__dial"
        role="slider"
        tabIndex={0}
        aria-label={label}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={v}
        aria-valuetext={`${v}%`}
        onKeyDown={(e) => {
          const m: Record<string, number> = { ArrowUp: v + 1, ArrowRight: v + 1, ArrowDown: v - 1, ArrowLeft: v - 1, PageUp: v + 10, PageDown: v - 10, Home: 0, End: 100 }
          if (e.key in m) (e.preventDefault(), set(m[e.key]))
        }}
        onPointerDown={(e) => {
          drag.current = { y: e.clientY, v }
          e.currentTarget.setPointerCapture(e.pointerId)
        }}
        onPointerMove={(e) => drag.current && set(drag.current.v + (drag.current.y - e.clientY) * 0.6)}
        onPointerUp={() => (drag.current = null)}
      >
        <svg viewBox="0 0 200 200" aria-hidden className="sd-vk__ticks">
          {Array.from({ length: ticks }, (_, i) => {
            const a = ((START + (i / (ticks - 1)) * SWEEP - 90) * Math.PI) / 180
            const on = i / (ticks - 1) <= v / 100
            return <line key={i} x1={100 + Math.cos(a) * 84} y1={100 + Math.sin(a) * 84} x2={100 + Math.cos(a) * 94} y2={100 + Math.sin(a) * 94} data-on={on || undefined} />
          })}
        </svg>
        <div className="sd-vk__knob" style={{ transform: `rotate(${angle}deg)` }}>
          <span className="sd-vk__dot" />
        </div>
        <span className="sd-vk__val">{v}</span>
      </div>
      <span className="sd-vk__label">{label}</span>
    </div>
  )
}

.sd-vk { --fg: #fafafa; --mute: #8e8e8e; --tick: rgb(255 255 255 / 0.14); --knob: #262626; --knob-line: rgb(255 255 255 / 0.1);
  display: grid; justify-items: center; gap: 6px; color: var(--fg); font-feature-settings: 'tnum'; }
.sd-vk[data-fill='light'] { --fg: #111; --mute: #6f6f6f; --tick: rgb(0 0 0 / 0.12); --knob: #f4f4f4; --knob-line: rgb(0 0 0 / 0.08); }
.sd-vk__dial { position: relative; width: 168px; height: 168px; display: grid; place-items: center; cursor: ns-resize; touch-action: none; border-radius: 999px; outline: none; }
.sd-vk__dial:focus-visible { box-shadow: 0 0 0 2px var(--fg); }
.sd-vk__ticks { position: absolute; inset: 0; }
.sd-vk__ticks line { stroke: var(--tick); stroke-width: 4; stroke-linecap: round; transition: stroke 200ms; }
.sd-vk__ticks line[data-on] { stroke: var(--vk-c); }
.sd-vk__knob { position: absolute; width: 104px; height: 104px; border-radius: 999px; background: var(--knob); box-shadow: inset 0 0 0 1px var(--knob-line), 0 14px 30px -10px rgb(0 0 0 / 0.7), inset 0 2px 1px rgb(255 255 255 / 0.08);
  transition: transform 260ms cubic-bezier(0.2, 1.3, 0.3, 1); }
.sd-vk__dot { position: absolute; left: 50%; top: 10px; width: 8px; height: 8px; margin-left: -4px; border-radius: 99px; background: var(--vk-c); box-shadow: 0 0 10px var(--vk-c); }
.sd-vk__val { position: relative; font-size: 30px; font-weight: 600; letter-spacing: -0.04em; pointer-events: none; }
.sd-vk__label { font-size: 13px; color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .sd-vk * { transition: none !important; } }