Botón play/pausa con anillo de progreso

"use client";

import { useEffect, useState, type CSSProperties } from "react";

/** Botón de reproducir/pausar con transformación de forma y anillo de progreso: el triángulo se divide en dos barras sin cortes. Reproducción simulada. React + TypeScript, sin dependencias. */
export type PlayPausaProps = {
  /** Duración simulada en segundos. */
  duration?: number;
  defaultPlaying?: boolean;
  onChange?: (playing: boolean) => void;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcmpp-root { box-sizing: border-box; display: inline-grid; justify-items: center; gap: 10px; color: #111; font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.gcmpp-root *, .gcmpp-root *::before, .gcmpp-root *::after { box-sizing: border-box; }
.gcmpp-root :focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .gcmpp-root * { transition-duration: .01ms !important; } }
.gcmpp-btn { position: relative; display: grid; place-items: center; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; background: #111; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.gcmpp-btn:hover { transform: scale(1.05); }
.gcmpp-btn:active { transform: scale(.94); }
.gcmpp-ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); transform: rotate(-90deg); pointer-events: none; }
.gcmpp-ring circle { fill: none; stroke-width: 3; }
.gcmpp-ring .t { stroke: #e3e3e0; }
.gcmpp-ring .v { stroke: #111; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.gcmpp-icon { width: 34px; height: 34px; overflow: visible; }
.gcmpp-icon path { transition: d .35s cubic-bezier(.65, 0, .35, 1); fill: currentColor; }
.gcmpp-time { font-variant-numeric: tabular-nums; color: #6a6a66; }`;

const PLAY_A = "M8 5 L13.5 8.5 L13.5 15.5 L8 19 Z";
const PLAY_B = "M13.5 8.5 L19 12 L19 12 L13.5 15.5 Z";
const PAUSE_A = "M7 5 L10.5 5 L10.5 19 L7 19 Z";
const PAUSE_B = "M13.5 5 L17 5 L17 19 L13.5 19 Z";
const fmt = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;

export function PlayPausa({ duration = 90, defaultPlaying = false, onChange, className = "", style }: PlayPausaProps) {
  const [playing, setPlaying] = useState(defaultPlaying);
  const [t, setT] = useState(0);
  useEffect(() => {
    if (!playing) return;
    const id = window.setInterval(() => setT((value) => (value + 1 >= duration ? 0 : value + 1)), 1000);
    return () => window.clearInterval(id);
  }, [playing, duration]);
  const C = 2 * Math.PI * 49;
  return (
    <span className={`gcmpp-root ${className}`} style={style}>
      <style>{CSS}</style>
      <button className="gcmpp-btn" type="button" aria-label={playing ? "Pausar" : "Reproducir"} aria-pressed={playing} onClick={() => { setPlaying(!playing); onChange?.(!playing); }}>
        <svg className="gcmpp-ring" viewBox="0 0 106 106" aria-hidden="true">
          <circle className="t" cx="53" cy="53" r="49" />
          <circle className="v" cx="53" cy="53" r="49" strokeDasharray={C} strokeDashoffset={C * (1 - t / duration)} />
        </svg>
        <svg className="gcmpp-icon" viewBox="0 0 24 24" aria-hidden="true">
          <path d={playing ? PAUSE_A : PLAY_A} style={{ d: `path("${playing ? PAUSE_A : PLAY_A}")` } as CSSProperties} />
          <path d={playing ? PAUSE_B : PLAY_B} style={{ d: `path("${playing ? PAUSE_B : PLAY_B}")` } as CSSProperties} />
        </svg>
      </button>
      <span className="gcmpp-time" aria-live="off">
        {fmt(t)} / {fmt(duration)}
      </span>
    </span>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/play-pausa

import { PlayPausa } from "./play-pausa";

export default function Ejemplo() {
  return <PlayPausa defaultPlaying />;
}