50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T947a,"use client"; /** * @author: @dorianbaffier * @description: Now Playing - music card with a spinning, scrubbable disc * @version: 2.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { cva, type VariantProps } from "class-variance-authority"; import { Pause, Play, SkipBack, SkipForward } from "lucide-react"; import React from "react"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Glass primitives, kept for existing installs; the glass is now opt-in. */ /* -------------------------------------------------------------------------- */ const GLASS_SHADOW_LIGHT = "shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)]"; const GLASS_SHADOW_DARK = "dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]"; const GLASS_SHADOW = `${GLASS_SHADOW_LIGHT} ${GLASS_SHADOW_DARK}`; const DEFAULT_GLASS_FILTER_SCALE = 30; const BUTTON_GLASS_FILTER_SCALE = 70; interface GlassFilterProps { id: string; scale?: number; } const GlassFilter = React.memo( ({ id, scale = DEFAULT_GLASS_FILTER_SCALE }: GlassFilterProps) => ( ) ); GlassFilter.displayName = "GlassFilter"; // Press feedback is colour only: no hover or press scale. const liquidButtonVariants = cva( "relative transition-colors duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", { variants: { liquidVariant: { default: "", none: "", }, }, defaultVariants: { liquidVariant: "default", }, } ); // No `asChild`: the glass layers are extra children, which Slot rejects. export type LiquidButtonProps = Omit< React.ComponentProps, "asChild" > & VariantProps & { /** Adds the inset glass shadow and SVG refraction (Chromium only). */ glassEffect?: boolean; }; function LiquidButton({ className, liquidVariant = "default", glassEffect = false, children, ...props }: LiquidButtonProps) { const filterId = React.useId(); return ( <> {glassEffect && ( )} ); } const liquidGlassCardVariants = cva("relative overflow-hidden", { variants: { glassSize: { sm: "p-4", default: "p-6", lg: "p-8", }, }, defaultVariants: { glassSize: "default", }, }); export type LiquidGlassCardProps = React.HTMLAttributes & VariantProps & { /** Adds the inset glass shadow and SVG refraction (Chromium only). */ glassEffect?: boolean; }; function LiquidGlassCard({ className, glassSize, glassEffect = false, children, ...props }: LiquidGlassCardProps) { const filterId = React.useId(); return ( {glassEffect && ( <>

{/* backdrop-filter: url() only renders in Chromium. */}

)}

{children}

); } /* -------------------------------------------------------------------------- */ /* Now Playing */ /* -------------------------------------------------------------------------- */ export interface NowPlayingTrack { title: string; artist: string; /** Length in seconds. */ duration: number; /** Which built-in label design is printed on the disc (0, 1 or 2). */ artwork?: number; } const DEFAULT_TRACKS: NowPlayingTrack[] = [ { title: "Low Tide", artist: "Pale Harbor", duration: 192, artwork: 0 }, { title: "Static Bloom", artist: "Juniper Wire", duration: 167, artwork: 1 }, { title: "Night Signal", artist: "The Quiet Hours", duration: 245, artwork: 2, }, ]; // 33⅓ rpm is 200°/s, one turn every 1.8s. const CRUISE = 200; const CRUISE_MS = 1800; // Fastest a flick may spin the disc (6 turns/s). const MAX_OMEGA = 2160; // Time constants (s) for the speed relaxing toward its target: back to // cruise after a flick, up to speed on play, down to a stop on pause. const COAST_TAU = 0.45; const SPIN_UP_TAU = 0.22; const SPIN_DOWN_TAU = 0.2; const SETTLE_EPSILON = 2; // Pointer movement this close to the centre gives wild angle jumps. const DEAD_ZONE = 10; const VELOCITY_WINDOW_MS = 80; // A release this long after the last move is a release from rest. const STALE_MOVE_MS = 60; // A finger resting on the disc reads as zero speed within ~50ms. const HOLD_SETTLE_S = 0.05; // Level bars: resting height, the fall to rest on pause, and the attack. const BAR_COUNT = 5; const BAR_REST = 0.14; const BAR_DECAY_S = 0.3; const BAR_ATTACK_S = 0.08; // Scrubber: how far (px) the rail may stretch past either end. const RUBBER_MAX = 18; const SEEK_STEP = 5; const RESTART_THRESHOLD = 3; const MAX_DT = 0.05; const ROLL_MS = 220; const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; const RUBBER_RETURN = "transform 450ms cubic-bezier(0.34, 1.4, 0.64, 1)"; // Shipped with the component so it needs nothing in globals.css. const ROLL_KEYFRAMES = `@keyframes now-playing-in-up{from{transform:translateY(90%);opacity:0}to{transform:none;opacity:1}} @keyframes now-playing-out-up{from{transform:none;opacity:1}to{transform:translateY(-90%);opacity:0}} @keyframes now-playing-in-down{from{transform:translateY(-90%);opacity:0}to{transform:none;opacity:1}} @keyframes now-playing-out-down{from{transform:none;opacity:1}to{transform:translateY(90%);opacity:0}} @media (prefers-reduced-motion:reduce){.now-playing-roll{animation:none!important}.now-playing-roll-prev{display:none}}`; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function damp(distance: number, max: number) { return max * (1 - Math.exp(-distance / max)); } function formatTime(seconds: number) { const s = Math.max(0, Math.floor(seconds)); return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, "0")}`; } // Deterministic 1D value noise. The meter is a function of track time, so // scrubbing back over a passage replays the same levels. function hash(n: number) { const s = Math.sin(n * 127.1) * 43_758.5453; return s - Math.floor(s); } function noise(x: number) { const i = Math.floor(x); const f = x - i; const u = f * f * (3 - 2 * f); return hash(i) * (1 - u) + hash(i + 1) * u; } function barLevel(index: number, t: number) { return ( 0.6 * noise(t * 4.3 + index * 17.3) + 0.4 * noise(t * 9.1 + index * 31.7 + 100) ); } // Up to cruise speed the disc maps 1:1 to the track like a real record; // faster spins accelerate, so a hard flick can cross most of a song. function scrubGain(speed: number) { const excess = Math.max(0, Math.abs(speed) - CRUISE) / CRUISE; return 1 + 1.5 * excess ** 1.5; } /** Seconds of track per second, at a disc speed in deg/s. */ function trackRate(omega: number) { return (omega / CRUISE) * scrubGain(omega); } function rotate(angle: number) { return `rotate(${Math.round((angle % 360) * 100) / 100}deg)`; } interface Engine { angle: number; omega: number; time: number; duration: number; playing: boolean; held: boolean; barDrag: boolean; /** The one pointer driving the disc or the bar; others are ignored. */ pointerId: number | null; visible: boolean; reduced: boolean; /** Meter envelope, 0 (rest) to 1 (full). */ env: number; /** Disc speed measured from the pointer while held (deg/s). */ scrubOmega: number; pointerAngle: number; center: { x: number; y: number }; lastMoveAt: number; samples: { t: number; a: number }[]; cruise: Animation | null; cruiseAngle: number; } function createEngine(duration: number, playing: boolean): Engine { return { angle: 0, omega: playing ? CRUISE : 0, time: 0, duration, playing, held: false, barDrag: false, pointerId: null, visible: true, reduced: false, env: 0, scrubOmega: 0, pointerAngle: 0, center: { x: 0, y: 0 }, lastMoveAt: 0, samples: [], cruise: null, cruiseAngle: 0, }; } function readAngle(e: Engine) { if (e.cruise && e.cruise.currentTime !== null) { return e.cruiseAngle + (Number(e.cruise.currentTime) / CRUISE_MS) * 360; } return e.angle; } function stopCruise(e: Engine, disc: HTMLElement | null) { if (!e.cruise) { return; } e.angle = readAngle(e); // Pin the angle inline before cancelling so the disc doesn't flash back. if (disc) { disc.style.transform = rotate(e.angle); } e.cruise.cancel(); e.cruise = null; } // Steady 33⅓ runs as a WAAPI animation on the compositor, so the disc keeps // turning smoothly even when the main thread is busy. function startCruise(e: Engine, disc: HTMLElement | null) { if (e.cruise || e.reduced || !disc || typeof disc.animate !== "function") { return; } e.angle %= 360; e.cruiseAngle = e.angle; e.cruise = disc.animate( [ { transform: `rotate(${e.angle}deg)` }, { transform: `rotate(${e.angle + 360}deg)` }, ], { duration: CRUISE_MS, iterations: Number.POSITIVE_INFINITY } ); if (!e.visible) { e.cruise.pause(); } } // Free disc: the speed relaxes toward cruise (playing) or zero (paused) and // the track follows however far the disc turned. function integrateDisc(e: Engine, dt: number, disc: HTMLElement | null) { const target = e.playing ? CRUISE : 0; if (e.reduced) { e.omega = target; e.time += e.playing ? dt : 0; return; } if (e.cruise) { e.omega = CRUISE; e.time += dt; return; } let tau = SPIN_UP_TAU; if (Math.abs(e.omega) > Math.abs(target)) { tau = e.playing ? COAST_TAU : SPIN_DOWN_TAU; } e.omega = target + (e.omega - target) * Math.exp(-dt / tau); if (Math.abs(e.omega - target) < SETTLE_EPSILON) { e.omega = target; } e.angle += e.omega * dt; e.time += trackRate(e.omega) * dt; if (e.playing && e.omega === CRUISE) { startCruise(e, disc); } } function meterTarget(e: Engine) { if (e.held) { return clamp(Math.abs(e.scrubOmega) / CRUISE, 0, 1); } return clamp(Math.abs(e.omega) / CRUISE, 0, 1); } function updateMeter(e: Engine, dt: number, bars: (HTMLElement | null)[]) { const target = meterTarget(e); if (e.reduced) { e.env = e.playing ? 1 : 0; } else if (target > e.env) { e.env = Math.min(target, e.env + dt / BAR_ATTACK_S); } else { // A linear fall: a full meter takes 300ms to come to rest. e.env = Math.max(target, e.env - dt / BAR_DECAY_S); } // Reduced motion shows one still frame of the meter. const t = e.reduced ? 0.37 : e.time; for (const [i, bar] of bars.entries()) { if (bar) { const level = BAR_REST + (1 - BAR_REST) * barLevel(i, t) * e.env; bar.style.transform = `scaleY(${level.toFixed(3)})`; } } } function rpmLabel(e: Engine) { if (e.held) { return `${Math.round(e.scrubOmega / 6)} rpm`; } if (e.omega === CRUISE) { return "33⅓ rpm"; } return `${Math.round(e.omega / 6)} rpm`; } function paint( e: Engine, disc: HTMLElement | null, fill: HTMLElement | null, rpm: HTMLElement | null ) { if (disc && !e.cruise) { disc.style.transform = rotate(e.angle); } if (fill) { const p = e.duration > 0 ? clamp(e.time / e.duration, 0, 1) : 0; fill.style.transform = `scaleX(${p.toFixed(4)})`; } const label = rpmLabel(e); if (rpm && rpm.textContent !== label) { rpm.textContent = label; } } /* ------------------------------ Rolling time ------------------------------ */ interface RollDigitProps { value: string; direction: 1 | -1; } function RollDigit({ value, direction }: RollDigitProps) { const [state, setState] = React.useState<{ current: string; previous: string | null; count: number; direction: 1 | -1; }>({ current: value, previous: null, count: 0, direction }); // Derived during render: the old digit rolls out as the new one rolls in. if (state.current !== value) { setState({ current: value, previous: state.current, count: state.count + 1, direction, }); } const up = state.direction > 0; const timing = `${ROLL_MS}ms ${EASE_OUT} both`; return ( {state.previous !== null && ( {state.previous} )} 0 ? { animation: `${up ? "now-playing-in-up" : "now-playing-in-down"} ${timing}`, } : undefined } > {state.current} ); } interface RollingTimeProps { seconds: number; direction: 1 | -1; } function RollingTime({ seconds, direction }: RollingTimeProps) { // Slots are counted from the right so the seconds keep their identity // when the minutes gain a digit. const chars = formatTime(seconds).split("").reverse(); return ( ); } /* --------------------------------- Artwork -------------------------------- */ const INK = "fill-zinc-900"; const ACCENT = "fill-(--now-playing-accent)"; const DOT_GRID = Array.from({ length: 25 }, (_, i) => ({ x: 26 + (i % 5) * 12, y: 26 + Math.floor(i / 5) * 12, lit: i === 8, })); // Printed labels: flat zinc plus the accent, deliberately lopsided so the // rotation reads at a glance. function LabelArt({ variant }: { variant: number }) { if (variant === 1) { return ( ); } if (variant === 2) { return ( {DOT_GRID.map((dot) => ( ))} ); } return ( ); } const GROOVES = [28, 31, 34, 37, 40, 43, 46]; function Disc({ artwork }: { artwork: number }) { const clipId = React.useId(); return ( ); } function Tonearm({ down }: { down: boolean }) { return ( ); } /* ------------------------------- Now Playing ------------------------------ */ export interface NowPlayingProps { tracks?: NowPlayingTrack[]; /** Index of the track loaded first. */ defaultTrack?: number; /** Start playing on mount. */ autoPlay?: boolean; /** The one accent colour: meter, progress and label art. */ accent?: string; /** Wraps the card in the glass shadow and SVG refraction (Chromium only). */ glassEffect?: boolean; onTrackChange?: (index: number) => void; className?: string; } const ICON_BUTTON = "inline-flex size-10 items-center justify-center rounded-full text-zinc-600 transition-colors duration-150 hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 active:bg-zinc-200 dark:text-zinc-400 dark:active:bg-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"; const FRAME = "@container/now-playing w-full max-w-sm rounded-3xl border border-zinc-200 p-5 shadow-sm dark:border-zinc-800"; export function NowPlaying({ tracks = DEFAULT_TRACKS, defaultTrack = 0, autoPlay = true, accent = "#f97316", glassEffect = false, onTrackChange, className, }: NowPlayingProps) { const list = tracks.length > 0 ? tracks : DEFAULT_TRACKS; const [trackIndex, setTrackIndex] = React.useState(() => clamp(defaultTrack, 0, list.length - 1) ); const track = list[trackIndex] ?? DEFAULT_TRACKS[0]; const [playing, setPlaying] = React.useState(autoPlay); const [clock, setClock] = React.useState<{ s: number; dir: 1 | -1 }>({ s: 0, dir: 1, }); const engineRef = React.useRef(null); if (engineRef.current === null) { engineRef.current = createEngine(track.duration, autoPlay); } const rootRef = React.useRef(null); const discRef = React.useRef(null); const fillRef = React.useRef(null); const railRef = React.useRef(null); const rpmRef = React.useRef(null); const barRefs = React.useRef<(HTMLSpanElement | null)[]>([]); const wakeRef = React.useRef<() => void>(() => undefined); const clockRef = React.useRef(0); // Read through refs so the loop is set up once and never restarted. const listRef = React.useRef(list); listRef.current = list; const trackIndexRef = React.useRef(trackIndex); trackIndexRef.current = trackIndex; const onTrackChangeRef = React.useRef(onTrackChange); onTrackChangeRef.current = onTrackChange; const loadTrack = React.useCallback((index: number) => { const all = listRef.current; const nextIndex = ((index % all.length) + all.length) % all.length; const e = engineRef.current; if (e) { e.time = 0; e.duration = all[nextIndex]?.duration ?? 1; } trackIndexRef.current = nextIndex; setTrackIndex(nextIndex); onTrackChangeRef.current?.(nextIndex); wakeRef.current(); }, []); // One rAF loop drives the clock, the meter and the disc whenever it is // off cruise. It sleeps once everything rests, and while off screen. React.useEffect(() => { const e = engineRef.current; if (!e) { return; } let raf = 0; let last = 0; const render = () => { paint(e, discRef.current, fillRef.current, rpmRef.current); const s = Math.floor(e.time); if (s !== clockRef.current) { const dir = s > clockRef.current ? 1 : -1; clockRef.current = s; setClock({ s, dir }); } }; const handleEnds = () => { if (e.time >= e.duration) { if (e.playing && !e.held && !e.barDrag) { loadTrack(trackIndexRef.current + 1); return; } e.time = e.duration; } if (e.time < 0) { e.time = 0; } }; const isAwake = () => e.playing || e.held || e.barDrag || e.omega !== 0 || e.env > 0; const tick = (now: number) => { const dt = last ? Math.min((now - last) / 1000, MAX_DT) : 0; last = now; if (e.held) { e.scrubOmega *= Math.exp(-dt / HOLD_SETTLE_S); } else if (!e.barDrag) { integrateDisc(e, dt, discRef.current); } handleEnds(); updateMeter(e, dt, barRefs.current); render(); if (isAwake() && e.visible) { raf = requestAnimationFrame(tick); } else { raf = 0; last = 0; } }; const wake = () => { render(); if (raf === 0 && e.visible) { last = 0; raf = requestAnimationFrame(tick); } }; wakeRef.current = wake; let inView = true; const sync = () => { e.visible = inView && !document.hidden; if (e.visible) { e.cruise?.play(); wake(); } else { e.cruise?.pause(); cancelAnimationFrame(raf); raf = 0; } }; const observer = new IntersectionObserver(([entry]) => { inView = entry?.isIntersecting ?? true; sync(); }); if (rootRef.current) { observer.observe(rootRef.current); } document.addEventListener("visibilitychange", sync); const media = window.matchMedia("(prefers-reduced-motion: reduce)"); const syncMotion = () => { e.reduced = media.matches; if (e.reduced) { stopCruise(e, discRef.current); } wake(); }; syncMotion(); media.addEventListener("change", syncMotion); return () => { cancelAnimationFrame(raf); observer.disconnect(); document.removeEventListener("visibilitychange", sync); media.removeEventListener("change", syncMotion); e.cruise?.cancel(); e.cruise = null; }; }, [loadTrack]); const togglePlay = () => { const e = engineRef.current; if (!e) { return; } const nextPlaying = !e.playing; if (nextPlaying && e.time >= e.duration) { e.time = 0; } e.playing = nextPlaying; if (!nextPlaying) { // Hand the disc back to the loop so it can spin down. stopCruise(e, discRef.current); } setPlaying(nextPlaying); wakeRef.current(); }; const previous = () => { const e = engineRef.current; if (e && e.time > RESTART_THRESHOLD) { e.time = 0; wakeRef.current(); return; } loadTrack(trackIndexRef.current - 1); }; const next = () => loadTrack(trackIndexRef.current + 1); /* ---------------------------- Disc scrubbing ---------------------------- */ const pointerAngle = (e: Engine, clientX: number, clientY: number) => { const dx = clientX - e.center.x; const dy = clientY - e.center.y; return { angle: (Math.atan2(dy, dx) * 180) / Math.PI, distance: Math.hypot(dx, dy), }; }; const onDiscDown = (event: React.PointerEvent) => { const e = engineRef.current; if (!e || event.button !== 0 || e.pointerId !== null) { return; } e.pointerId = event.pointerId; event.currentTarget.setPointerCapture(event.pointerId); const rect = event.currentTarget.getBoundingClientRect(); e.center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }; // A finger on the record stops it dead, cruise animation included. stopCruise(e, discRef.current); e.held = true; e.omega = 0; e.scrubOmega = 0; e.pointerAngle = pointerAngle(e, event.clientX, event.clientY).angle; e.lastMoveAt = performance.now(); e.samples = [{ t: e.lastMoveAt, a: e.angle }]; wakeRef.current(); }; const onDiscMove = (event: React.PointerEvent) => { const e = engineRef.current; if (!e?.held || e.pointerId !== event.pointerId) { return; } const { angle, distance } = pointerAngle(e, event.clientX, event.clientY); if (distance < DEAD_ZONE) { e.pointerAngle = angle; return; } // Unwrap across the ±180° seam. let delta = angle - e.pointerAngle; delta -= Math.round(delta / 360) * 360; e.pointerAngle = angle; const now = performance.now(); const dt = Math.max(now - e.lastMoveAt, 1) / 1000; e.lastMoveAt = now; const instant = clamp(delta / dt, -MAX_OMEGA, MAX_OMEGA); e.scrubOmega += (instant - e.scrubOmega) * 0.35; // Track time follows the angle; faster turns cover more of the song. e.angle += delta; e.time = clamp( e.time + (delta / CRUISE) * scrubGain(e.scrubOmega), 0, e.duration ); e.samples.push({ t: now, a: e.angle }); while ( e.samples.length > 2 && now - (e.samples[0]?.t ?? now) > VELOCITY_WINDOW_MS ) { e.samples.shift(); } if (discRef.current) { discRef.current.style.transform = rotate(e.angle); } }; const onDiscUp = (event: React.PointerEvent) => { const e = engineRef.current; if (!e?.held || e.pointerId !== event.pointerId) { return; } e.pointerId = null; if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } e.held = false; const now = performance.now(); const first = e.samples[0]; let velocity = 0; if (first && now - e.lastMoveAt < STALE_MOVE_MS && now > first.t) { velocity = ((e.angle - first.a) / (now - first.t)) * 1000; } // It keeps the spin you gave it, then eases back to cruise. e.omega = e.reduced ? 0 : clamp(velocity, -MAX_OMEGA, MAX_OMEGA); e.scrubOmega = 0; wakeRef.current(); }; /* ----------------------------- Scrubber bar ----------------------------- */ const seekFromPointer = (clientX: number) => { const e = engineRef.current; const rail = railRef.current; if (!(e && rail?.parentElement)) { return; } // The rail stretches, so measure its parent, which never moves. const rect = rail.parentElement.getBoundingClientRect(); const x = clientX - rect.left; e.time = clamp(x / rect.width, 0, 1) * e.duration; // Past either end the rail stretches toward the pointer and thins, // giving less the further you pull. let over = 0; if (x < 0) { over = -damp(-x, RUBBER_MAX); } else if (x > rect.width) { over = damp(x - rect.width, RUBBER_MAX); } const stretch = 1 + Math.abs(over) / rect.width; const thin = 1 - (0.35 * Math.abs(over)) / RUBBER_MAX; rail.style.transition = "none"; rail.style.transformOrigin = over < 0 ? "right center" : "left center"; rail.style.transform = over === 0 ? "" : `scale(${stretch.toFixed(4)}, ${thin.toFixed(3)})`; wakeRef.current(); }; const onBarDown = (event: React.PointerEvent) => { const e = engineRef.current; if (!e || event.button !== 0 || e.pointerId !== null) { return; } e.pointerId = event.pointerId; event.currentTarget.setPointerCapture(event.pointerId); e.barDrag = true; seekFromPointer(event.clientX); }; const onBarMove = (event: React.PointerEvent) => { const e = engineRef.current; if (e?.barDrag && e.pointerId === event.pointerId) { seekFromPointer(event.clientX); } }; const onBarUp = (event: React.PointerEvent) => { const e = engineRef.current; if (!e?.barDrag || e.pointerId !== event.pointerId) { return; } e.pointerId = null; e.barDrag = false; const rail = railRef.current; if (rail) { rail.style.transition = RUBBER_RETURN; rail.style.transform = ""; } wakeRef.current(); }; const onBarKey = (event: React.KeyboardEvent) => { const e = engineRef.current; if (!e) { return; } const targets: Record = { ArrowRight: e.time + SEEK_STEP, ArrowUp: e.time + SEEK_STEP, ArrowLeft: e.time - SEEK_STEP, ArrowDown: e.time - SEEK_STEP, Home: 0, End: e.duration - 1, }; const target = targets[event.key]; if (target === undefined) { return; } event.preventDefault(); e.time = clamp(target, 0, e.duration); wakeRef.current(); }; const body = ( <>

{track.title}

{track.artist}

{autoPlay ? "33⅓ rpm" : "0 rpm"}

{formatTime(track.duration)}

); const style = { "--now-playing-accent": accent } as React.CSSProperties; if (glassEffect) { return (

{body}

); } return (

{body}

); } export { LiquidButton, LiquidGlassCard, NowPlaying as NotificationCenter }; export default NowPlaying; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@kokonutui","registryDependencies":["card","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"/components/kokonutui/liquid-glass-card.tsx","content":"$52","type":"registry:component","target":"components/kokonutui/liquid-glass-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]