NowPlaying

Tarjeta de «suena ahora» con carátula, título, artista y una línea fina de progreso.

Cuándo usarlo

Props. title, artist, cover (URL de imagen; si falta, icono de volumen), progress (de 0 a 1), paused, width (360 por defecto), labels.

Cuándo usarla. En una esquina del overlay mientras suena música. Título y artista se recortan con puntos suspensivos en una sola línea. La barra de progreso mide 3px, pegada al borde inferior, y no se anima por su cuenta: avanza cuando le llega un valor nuevo.

Evita. Ecualizadores o notas que bailan: el sistema no anima por decorar. Poner música sin licencia para directo: la tarjeta no lo arregla.

Ampliaciones sobre la guía. labels sustituye "Suena ahora", "En pausa" y el nombre de la barra ("Progreso de la canción").

Accesibilidad. La carátula es decorativa (alt=""): el título ya dice qué suena. La barra es un progressbar con nombre.

Ejemplos

Suena ahoraCuatro paredes y un techoLos Vecinos del Quinto

En pausaSilencio incómodoBanda sin nombre

Suena ahoraUna canción con un título bastante más largo de lo razonable para esta tarjetaArtista con nombre igual de largo que la canción

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—
`artist`	`ReactNode`	—
`cover`	`string`	—	URL de la carátula; sin ella, icono de volumen.
`progress`	`number`	—	De 0 a 1. Sin él no hay barra. Avanza cuando llega un valor nuevo: no se anima por su cuenta.
`paused`	`boolean`	—
`width`	`string \| number`	`360`
`labels`	`Partial<NowPlayingLabels>`	—	Sustituye los textos (ampliación sobre la guía).
`className`	`string`	—

Código

import { NowPlaying } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<NowPlaying title="Cuatro paredes y un techo" artist="Los Vecinos del Quinto" progress={0.42} />
		</>
	);
}

---
import { NowPlaying } from "@jotis-me/react";
---

<NowPlaying title="Cuatro paredes y un techo" artist="Los Vecinos del Quinto" progress={0.42} />