"use client"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useId, useRef, useState, type PointerEvent as ReactPointerEvent, } from "react"; const MIN_ANGLE = -135; const MAX_ANGLE = 135; const ANGLE_SPAN = MAX_ANGLE - MIN_ANGLE; const START_VALUE = 48; const SEGMENTS = 24; const FA_DIGITS = "۰۱۲۳۴۵۶۷۸۹"; function toFaDigits(value: string | number) { return String(value).replace(/\d/g, (d) => FA_DIGITS[Number(d)] ?? d); } function clamp(n: number, min: number, max: number) { return Math.min(max, Math.max(min, n)); } function valueToAngle(value: number) { return MIN_ANGLE + (clamp(value, 0, 100) / 100) * ANGLE_SPAN; } function angleToValue(angle: number) { return clamp(Math.round(((angle - MIN_ANGLE) / ANGLE_SPAN) * 100), 0, 100); } function pointerAngle(clientX: number, clientY: number, rect: DOMRect): number { const cx = rect.left + rect.width / 2; const cy = rect.top + rect.height / 2; const rad = Math.atan2(clientY - cy, clientX - cx); let deg = (rad * 180) / Math.PI + 90; if (deg > 180) deg -= 360; if (deg < -180) deg += 360; return clamp(deg, MIN_ANGLE, MAX_ANGLE); } function polar(cx: number, cy: number, r: number, deg: number) { const rad = ((deg - 90) * Math.PI) / 180; return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }; } function arcPath(r: number, from: number, to: number) { const a = polar(100, 100, r, from); const b = polar(100, 100, r, to); const large = to - from > 180 ? 1 : 0; return `M ${a.x} ${a.y} A ${r} ${r} 0 ${large} 1 ${b.x} ${b.y}`; } function LightRing({ value, uid }: { value: number; uid: string }) { const lit = Math.round((value / 100) * SEGMENTS); const r = 86; const slot = ANGLE_SPAN / SEGMENTS; /** Equal LED block size (viewBox units). */ const ledW = 4.2; const ledH = 8; const ledX = 100 - ledW / 2; const ledY = 100 - r - ledH / 2; return ( ); } function KnurledKnob({ angle, active, reduceMotion, }: { angle: number; active: boolean; reduceMotion: boolean; }) { return ( {/* side thickness */}

{/* knurl lines */} {/* face disc */}

{/* pointer blade */}

{/* center jewel */}

); } export function DialVolumeControl() { const uid = useId().replace(/:/g, ""); const reduceMotion = useReducedMotion() ?? false; const dialRef = useRef(null); const dragging = useRef(false); const [value, setValue] = useState(START_VALUE); const [active, setActive] = useState(false); const angle = valueToAngle(value); const bulge = 0.25 + (value / 100) * 0.85; const setFromPointer = useCallback((clientX: number, clientY: number) => { const el = dialRef.current; if (!el) return; setValue(angleToValue(pointerAngle(clientX, clientY, el.getBoundingClientRect()))); }, []); const onPointerDown = useCallback( (e: ReactPointerEvent) => { e.currentTarget.setPointerCapture(e.pointerId); dragging.current = true; setActive(true); setFromPointer(e.clientX, e.clientY); }, [setFromPointer] ); const onPointerMove = useCallback( (e: ReactPointerEvent) => { if (!dragging.current) return; setFromPointer(e.clientX, e.clientY); }, [setFromPointer] ); const onPointerUp = useCallback((e: ReactPointerEvent) => { dragging.current = false; setActive(false); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch { /* already released */ } }, []); const nudge = useCallback((delta: number) => { setValue((v) => clamp(v + delta, 0, 100)); }, []); useEffect(() => { return () => { dragging.current = false; }; }, []); return (

{/* chassis plate */}

{/* brushed metal lines */}

{/* header row */}

کانال اصلی

ولوم

{/* analog readout window */}

سطح

{toFaDigits(value)} ٪

{/* recessed well */}

{/* light bulge behind the ring */}

{ if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); nudge(-e.shiftKey ? 10 : 2); } else if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); nudge(e.shiftKey ? 10 : 2); } else if (e.key === "Home") { e.preventDefault(); setValue(0); } else if (e.key === "End") { e.preventDefault(); setValue(100); } }} > {/* 0 at -135° (left) · 100 at +135° (right); RTL start=right */} کم زیاد

بچرخان · کلیدهای جهت هم کار می‌کنند

); } export default function DialVolume() { return (

); }