Medio incorporado.

<figure class="ui-sample ui-embed" data-embed="media"><div class="ui-embed__frame ui-embed__frame--wide ui-media-demo" role="group" aria-label="Reproductor de archivo audiovisual"><button class="btn btn--primary" type="button" aria-label="Reproducir archivo">Reproducir</button><div><strong>Registro de Santiago</strong><span>01:42 · subtítulos disponibles</span></div><progress value="16" max="100">16%</progress></div><figcaption><span>Fuente: Archivo Círculo de Santiago</span><a href="#transcripcion">Leer transcripción</a></figcaption></figure>

<figure class="ui-sample ui-embed border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed="media"><div class="ui-embed__frame ui-embed__frame--wide ui-media-demo" role="group" aria-label="Reproductor de archivo audiovisual"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Reproducir archivo">Reproducir</button><div><strong>Registro de Santiago</strong><span>01:42 · subtítulos disponibles</span></div><progress value="16" max="100">16%</progress></div><figcaption class="text-sm text-slate-600"><span>Fuente: Archivo Círculo de Santiago</span><a class="underline underline-offset-4" href="#transcripcion">Leer transcripción</a></figcaption></figure>

import type { MouseEventHandler } from "react";

export interface MediaEmbedProps {
  /** Nombre accesible del reproductor (`aria-label` del grupo). */
  label?: string;
  /** Texto visible del botón de reproducción. */
  playLabel?: string;
  /** Nombre accesible del botón de reproducción, más explícito que el texto visible. */
  playAriaLabel?: string;
  onPlay?: MouseEventHandler<HTMLButtonElement>;
  /** Título del audio o video. */
  title?: string;
  /** Tiempo transcurrido de la reproducción, en texto («01:42»); avanza junto con `value`. Vacío se omite. */
  time?: string;
  /** Dato secundario tras el tiempo, separado por « · »: subtítulos, idioma o calidad; vacío se omite. */
  detail?: string;
  /** Avance de la reproducción, en la misma unidad que `max`. */
  value?: number;
  /** Valor que corresponde al final de la reproducción. */
  max?: number;
  /** Texto legible del avance, como respaldo de `<progress>`; por defecto, el porcentaje redondeado (`16%`). */
  valueText?: string;
  /** Origen del archivo, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  /** Texto del enlace del pie, como la transcripción; sin él o sin `href` no se muestra. */
  linkLabel?: string;
  /** Destino del enlace del pie. */
  href?: string;
  className?: string;
}

/**
 * Reproductor de audio o video incorporado con título, tiempo, barra de avance, fuente y enlace a la transcripción; se usa para publicar una grabación dentro de una página.
 *
 * La barra usa el elemento nativo `<progress>`; el enlace a la transcripción da acceso al contenido sin reproducirlo.
 *
 * @example <MediaEmbed title="Registro de Santiago" time="02:18" value={38} onPlay={reproducir} href="/archivo/registro/transcripcion" />
 * @example <MediaEmbed title="Entrevista a vecinos" detail="sin subtítulos" source="Fuente: Archivo municipal" linkLabel="" />
 */
export function MediaEmbed({
  label = "Reproductor de archivo audiovisual",
  playLabel = "Reproducir",
  playAriaLabel = "Reproducir archivo",
  onPlay,
  title = "Registro de Santiago",
  time = "01:42",
  detail = "subtítulos disponibles",
  value = 16,
  max = 100,
  valueText,
  source = "Fuente: Archivo Círculo de Santiago",
  linkLabel = "Leer transcripción",
  href = "#transcripcion",
  className,
}: MediaEmbedProps) {
  const porcentaje = max > 0 ? Math.round(Math.min(Math.max(value / max, 0), 1) * 100) : 0;
  const avance = valueText || `${porcentaje}%`;
  const datos = [time, detail].filter(Boolean).join(" · ");
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="media">
      <div className="ui-embed__frame ui-embed__frame--wide ui-media-demo" role="group" aria-label={label || undefined}>
        <button className="btn btn--primary" type="button" aria-label={playAriaLabel || undefined} onClick={onPlay}>{playLabel}</button>
        {title || datos ? (
          <div>
            {title ? <strong>{title}</strong> : null}
            {datos ? <span>{datos}</span> : null}
          </div>
        ) : null}
        <progress value={value} max={max}>{avance}</progress>
      </div>
      {source || enlace ? (
        <figcaption>
          {source ? <span>{source}</span> : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}