Glass Player

/**
 * VibeBox Motion · Glass Player
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { Glass, GlassGlyphIcon } from "@/lib/vibebox/glass";

export type GlassPlayerProps = {
  title?: string;
  artist?: string;
  /** Album art: an image URL. Without it the art is a gradient from the spectrum tokens. */
  art?: string;
  /** Alt text for the art. */
  artAlt?: string;
  /** Track length in seconds. */
  duration?: number;
  /** Starts playing (the progress runs; no audio is played, you wire that). */
  playing?: boolean;
  onPlayingChange?: (playing: boolean) => void;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

const time = (seconds: number) => `${Math.floor(seconds / 60)}:${String(Math.floor(seconds % 60)).padStart(2, "0")}`;

/**
 * A now-playing card. The progress runs on a timer while playing and rides one `scaleX`; the audio
 * itself is yours to wire to `onPlayingChange`. Art is an image or a gradient from the tokens.
 */
export function GlassPlayer({ title = "Midnight Reverie", artist = "Luna Park", art, artAlt = "", duration = 214, playing, onPlayingChange, tone, className }: GlassPlayerProps) {
  const [own, setOwn] = useState(false);
  const [elapsed, setElapsed] = useState(62);
  const on = playing ?? own;

  useEffect(() => {
    if (!on) return;
    const id = window.setInterval(() => setElapsed((value) => (value + 0.5 >= duration ? 0 : value + 0.5)), 500);
    return () => window.clearInterval(id);
  }, [on, duration]);

  const toggle = () => {
    setOwn(!on);
    onPlayingChange?.(!on);
  };
  const step = (delta: number) => setElapsed((value) => Math.min(duration, Math.max(0, value + delta)));

  return (
    <Glass as="section" data-vb="glass-player" aria-label="Now playing" tone={tone} className={cn("w-full max-w-[22rem] p-4", className)}>
      <div className="flex items-center gap-3.5">
        <div className="relative size-[4.5rem] flex-none overflow-hidden rounded-lg border border-white/25 shadow-[0_12px_24px_-12px_rgb(0_0_0/0.6)]">
          {art ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={art} alt={artAlt} className="size-full object-cover" />
          ) : (
            <span aria-hidden="true" className="absolute inset-0 bg-[radial-gradient(circle_at_30%_25%,var(--spectrum-3),transparent_62%),radial-gradient(circle_at_75%_80%,var(--spectrum-5),transparent_60%),linear-gradient(135deg,var(--spectrum-1),var(--spectrum-6))]" />
          )}
        </div>
        <div className="min-w-0">
          <p className="truncate text-[1rem] leading-tight font-semibold">{title}</p>
          <p className="mt-0.5 truncate text-[0.84rem] opacity-70">{artist}</p>
        </div>
      </div>
      <div className="mt-4">
        <div role="progressbar" aria-label="Track progress" aria-valuemin={0} aria-valuemax={duration} aria-valuenow={Math.round(elapsed)} className="h-1 overflow-hidden rounded-full bg-white/20">
          <span className="block h-full origin-left rounded-full bg-white/90 transition-transform duration-500 ease-linear motion-reduce:transition-none" style={{ transform: `scaleX(${elapsed / duration})` }} />
        </div>
        <div className="mt-1.5 flex justify-between font-mono text-[0.68rem] opacity-65">
          <span>{time(elapsed)}</span>
          <span>-{time(duration - elapsed)}</span>
        </div>
      </div>
      <div className="mt-2 flex items-center justify-center gap-3">
        <button type="button" aria-label="Back 15 seconds" onClick={() => step(-15)} className="grid size-10 place-items-center rounded-full transition-colors hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-ring">
          <GlassGlyphIcon name="prev" />
        </button>
        <button
          type="button"
          aria-label={on ? "Pause" : "Play"}
          aria-pressed={on}
          onClick={toggle}
          className="grid size-12 place-items-center rounded-full border border-white/35 bg-gradient-to-b from-white/45 to-white/15 shadow-[inset_0_1px_0_rgb(255_255_255/0.6)] transition-transform active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
        >
          <GlassGlyphIcon name={on ? "pause" : "play"} className="size-6" />
        </button>
        <button type="button" aria-label="Forward 15 seconds" onClick={() => step(15)} className="grid size-10 place-items-center rounded-full transition-colors hover:bg-white/15 focus-visible:outline-2 focus-visible:outline-ring">
          <GlassGlyphIcon name="next" />
        </button>
      </div>
    </Glass>
  );
}

/**
 * VibeBox Motion · Glass Player
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-player.client";