@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-media-player.mjs

@@ -0,0 +1,821 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, ElementRef, input, numberAttribute, booleanAttribute, output, contentChild, viewChild, signal, computed, DestroyRef, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
+import { pictureInPicture2, captions, volumeX, volume2, pause } from '@caribeng/ui/icons';
+
+/** Velocidades por defecto. */
+const CB_MEDIA_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+/** "1:05" o "1:02:05" (con `total` de una hora o más, siempre con horas). */
+function formatTime(seconds, total = seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        seconds = 0;
+    const s = Math.floor(seconds % 60);
+    const m = Math.floor((seconds / 60) % 60);
+    const h = Math.floor(seconds / 3600);
+    const pad = (n) => String(n).padStart(2, '0');
+    return h > 0 || total >= 3600 ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+}
+/** Tiempo para lectores de pantalla: "1 minuto 5 segundos". */
+function spokenTime(seconds, units) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        seconds = 0;
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds / 60) % 60);
+    const s = Math.floor(seconds % 60);
+    const parts = [];
+    if (h)
+        parts.push(`${h} ${units.hours}`);
+    if (m)
+        parts.push(`${m} ${units.minutes}`);
+    if (s || !parts.length)
+        parts.push(`${s} ${units.seconds}`);
+    return parts.join(' ');
+}
+/**
+ * Atajo para una tecla (como en YouTube): Espacio / K reproduce o pausa, ← → 5 s, J / L 10 s,
+ * ↑ ↓ volumen, M silencio, F pantalla completa, C subtítulos, Inicio / Fin y 0–9 saltan al
+ * 0–90 %. Devuelve null si la tecla no es un atajo o viene con Ctrl, Alt o ⌘.
+ */
+function shortcutFor(event) {
+    if (event.ctrlKey || event.altKey || event.metaKey)
+        return null;
+    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+    switch (key) {
+        case ' ':
+        case 'k':
+            return { action: 'toggle' };
+        case 'ArrowLeft':
+            return { action: 'seekBy', seconds: -5 };
+        case 'ArrowRight':
+            return { action: 'seekBy', seconds: 5 };
+        case 'j':
+            return { action: 'seekBy', seconds: -10 };
+        case 'l':
+            return { action: 'seekBy', seconds: 10 };
+        case 'ArrowUp':
+            return { action: 'volumeBy', delta: 0.1 };
+        case 'ArrowDown':
+            return { action: 'volumeBy', delta: -0.1 };
+        case 'm':
+            return { action: 'mute' };
+        case 'f':
+            return { action: 'fullscreen' };
+        case 'c':
+            return { action: 'captions' };
+        case 'Home':
+            return { action: 'seekTo', fraction: 0 };
+        case 'End':
+            return { action: 'seekTo', fraction: 1 };
+        default:
+            return /^[0-9]$/.test(key) ? { action: 'seekTo', fraction: Number(key) / 10 } : null;
+    }
+}
+
+/** Transcripción del medio (`<div cbMediaTranscript>…</div>`), en un desplegable bajo los controles. */
+class CbMediaTranscript {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMediaTranscript, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: CbMediaTranscript, isStandalone: true, selector: "[cbMediaTranscript]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMediaTranscript, decorators: [{
+            type: Directive,
+            args: [{ selector: '[cbMediaTranscript]' }]
+        }] });
+let nextUid = 0;
+/**
+ * Reproductor de audio y vídeo de CaribeNG con controles propios y accesibles: reproducir,
+ * avanzar y retroceder, barra de progreso y volumen (sliders con su valor hablado), silencio,
+ * velocidad, subtítulos (WebVTT), imagen en imagen, pantalla completa, atajos de teclado como
+ * los de YouTube y transcripción desplegable. Los controles no se ocultan solos.
+ *
+ * @example
+ * ```html
+ * <cb-media-player src="/video/bienvenida.mp4" poster="/video/poster.jpg" [tracks]="subtitulos" heading="Bienvenida" />
+ * <cb-media-player kind="audio" src="/audio/podcast.mp3" heading="Episodio 12">
+ *   <div cbMediaTranscript>…</div>
+ * </cb-media-player>
+ * ```
+ */
+class CbMediaPlayer {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.host = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.hintId = `cb-media-${++nextUid}-hint`;
+        /** Archivo a reproducir (o `sources` con varios formatos). */
+        this.src = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+        this.sources = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sources" }] : /* istanbul ignore next */ []));
+        this.kind = input('video', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.poster = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "poster" }] : /* istanbul ignore next */ []));
+        /** Título: nombre del reproductor y, en audio, se muestra encima de los controles (no `title`, que daría un tooltip). */
+        this.heading = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+        /** Texto secundario en audio (autor, programa…). */
+        this.subtitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /** Subtítulos y descripciones (WebVTT). */
+        this.tracks = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tracks" }] : /* istanbul ignore next */ []));
+        this.rates = input(CB_MEDIA_RATES, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rates" }] : /* istanbul ignore next */ []));
+        /** Segundos de los botones de retroceder y avanzar (0 los oculta). */
+        this.skipSeconds = input(10, { ...(ngDevMode ? { debugName: "skipSeconds" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.loop = input(false, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Empieza silenciado. */
+        this.startMuted = input(false, { ...(ngDevMode ? { debugName: "startMuted" } : /* istanbul ignore next */ {}), alias: 'muted', transform: booleanAttribute });
+        this.preload = input('metadata', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
+        /** `anonymous` para subtítulos o medios de otro dominio con CORS. */
+        this.crossorigin = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "crossorigin" }] : /* istanbul ignore next */ []));
+        this.errorMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.played = output();
+        this.paused = output();
+        this.ended = output();
+        /** Segundo actual, mientras se reproduce. */
+        this.timeUpdate = output();
+        this.mediaError = output();
+        this.transcript = contentChild(CbMediaTranscript, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transcript" }] : /* istanbul ignore next */ []));
+        this.mediaRef = viewChild('media', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mediaRef" }] : /* istanbul ignore next */ []));
+        this.playing = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "playing" }] : /* istanbul ignore next */ []));
+        this.started = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "started" }] : /* istanbul ignore next */ []));
+        this.waiting = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "waiting" }] : /* istanbul ignore next */ []));
+        this.current = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+        this.duration = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+        this.volume = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "volume" }] : /* istanbul ignore next */ []));
+        this.muted = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "muted" }] : /* istanbul ignore next */ []));
+        this.rate = signal(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rate" }] : /* istanbul ignore next */ []));
+        this.activeTrack = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTrack" }] : /* istanbul ignore next */ []));
+        this.fullscreen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullscreen" }] : /* istanbul ignore next */ []));
+        this.pip = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pip" }] : /* istanbul ignore next */ []));
+        this.error = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.pipSupported = typeof document !== 'undefined' && 'pictureInPictureEnabled' in document && !!document.pictureInPictureEnabled;
+        this.sourceList = computed(() => (this.sources().length ? this.sources() : this.src() ? [{ src: this.src() }] : []), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sourceList" }] : /* istanbul ignore next */ []));
+        this.label = computed(() => {
+            const kind = this.kind() === 'audio' ? this.t().mediaAudio : this.t().mediaVideo;
+            return this.ariaLabel() || (this.heading() ? `${kind}: ${this.heading()}` : kind);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.progress = computed(() => (this.duration() ? (this.current() / this.duration()) * 100 : 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        this.seekText = computed(() => cbFormat(this.t().mediaTimeOf, this.spoken(this.current()), this.spoken(this.duration())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "seekText" }] : /* istanbul ignore next */ []));
+        this.announceFlip = false;
+        const registry = inject(CbIconRegistry);
+        for (const [name, body] of Object.entries({ pause, 'volume-2': volume2, 'volume-x': volumeX, captions, 'picture-in-picture-2': pictureInPicture2 })) {
+            if (!registry.has(name))
+                registry.register({ [name]: body });
+        }
+        // Los eventos del medio se enlazan en la plantilla: así están desde que se crea el elemento
+        // (con el medio en caché, loadedmetadata puede llegar antes que un afterNextRender).
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const media = this.mediaRef()?.nativeElement;
+            if (media)
+                this.syncFromMedia(media);
+            const onFullscreen = () => this.fullscreen.set(this.document.fullscreenElement === this.host.nativeElement);
+            this.document.addEventListener('fullscreenchange', onFullscreen);
+            destroyRef.onDestroy(() => this.document.removeEventListener('fullscreenchange', onFullscreen));
+        });
+    }
+    // --- API pública ---
+    play() {
+        const media = this.media();
+        if (!media)
+            return Promise.resolve();
+        return media.play().catch(() => undefined);
+    }
+    pause() {
+        this.media()?.pause();
+    }
+    toggle() {
+        if (this.media()?.paused ?? true)
+            void this.play();
+        else
+            this.pause();
+    }
+    /** Salta al segundo indicado. */
+    seekTo(seconds) {
+        const media = this.media();
+        if (!media)
+            return;
+        const max = Number.isFinite(media.duration) ? media.duration : this.duration();
+        media.currentTime = Math.min(Math.max(0, seconds), max || 0);
+        this.current.set(media.currentTime);
+    }
+    seekBy(seconds) {
+        this.seekTo((this.media()?.currentTime ?? this.current()) + seconds);
+    }
+    // --- Plantilla ---
+    percent(v) {
+        return Math.round(v * 100);
+    }
+    timeText(seconds) {
+        return formatTime(seconds, this.duration());
+    }
+    rateText(r) {
+        return `${new Intl.NumberFormat(this.t().intlLocale).format(r)}×`;
+    }
+    spoken(seconds) {
+        const t = this.t();
+        return spokenTime(seconds, { hours: t.mediaHours, minutes: t.mediaMinutes, seconds: t.mediaSeconds });
+    }
+    // --- Eventos ---
+    onSeekInput(event) {
+        this.seekTo(+event.target.value);
+    }
+    /** En la barra de progreso, las flechas saltan 5 s y Re Pág / Av Pág 10 s (el paso nativo sería casi nulo). */
+    onSeekKeydown(event) {
+        const steps = { ArrowLeft: -5, ArrowDown: -5, ArrowRight: 5, ArrowUp: 5, PageDown: -10, PageUp: 10 };
+        if (event.key in steps) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.seekBy(steps[event.key]);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.seekTo(event.key === 'Home' ? 0 : this.duration());
+        }
+    }
+    onVolumeInput(event) {
+        const media = this.media();
+        if (!media)
+            return;
+        media.volume = +event.target.value;
+        media.muted = media.volume === 0;
+    }
+    toggleMute() {
+        const media = this.media();
+        if (!media)
+            return;
+        media.muted = !media.muted;
+        // Quitar el silencio con el volumen a cero no se oiría: se devuelve a un nivel audible.
+        if (!media.muted && media.volume === 0)
+            media.volume = 0.5;
+    }
+    setRate(rate) {
+        const media = this.media();
+        if (media)
+            media.playbackRate = rate;
+        this.rate.set(rate);
+        this.announce(cbFormat(this.t().mediaSpeedSet, this.rateText(rate)));
+    }
+    toggleCaptions() {
+        if (this.activeTrack() >= 0) {
+            this.setTrack(-1);
+        }
+        else {
+            const preferred = this.tracks().findIndex((tr) => tr.default);
+            this.setTrack(preferred >= 0 ? preferred : 0);
+        }
+    }
+    setTrack(index) {
+        const media = this.media();
+        if (media) {
+            Array.from(media.textTracks ?? []).forEach((track, i) => (track.mode = i === index ? 'showing' : 'disabled'));
+        }
+        this.activeTrack.set(index);
+        this.announce(index >= 0 ? cbFormat(this.t().mediaCaptionsOn, this.tracks()[index]?.label ?? '') : this.t().mediaCaptionsOff);
+    }
+    async toggleFullscreen() {
+        if (this.kind() !== 'video')
+            return;
+        try {
+            if (this.document.fullscreenElement)
+                await this.document.exitFullscreen();
+            else
+                await this.host.nativeElement.requestFullscreen?.();
+        }
+        catch {
+            // El navegador lo rechazó (p. ej. sin gesto del usuario): no hay nada que hacer.
+        }
+    }
+    async togglePip() {
+        const media = this.media();
+        if (!media)
+            return;
+        try {
+            if (this.document.pictureInPictureElement)
+                await this.document.exitPictureInPicture();
+            else
+                await media.requestPictureInPicture();
+        }
+        catch {
+            // Sin soporte o rechazado.
+        }
+    }
+    /** Atajos con el foco en el reproductor, salvo las teclas que ya usa el control enfocado. */
+    onKeydown(event) {
+        const target = event.target;
+        if (target.tagName === 'SELECT' || target.closest('summary, .cb-mp__transcript-body'))
+            return;
+        const shortcut = shortcutFor(event);
+        if (!shortcut)
+            return;
+        const isRange = target instanceof HTMLInputElement && target.type === 'range';
+        const isButton = target.tagName === 'BUTTON';
+        // Un slider usa sus flechas e Inicio / Fin; un botón, Espacio.
+        if (isRange && (shortcut.action === 'seekBy' || shortcut.action === 'volumeBy' || shortcut.action === 'seekTo') && !/^[0-9]$/.test(event.key))
+            return;
+        if (isButton && event.key === ' ')
+            return;
+        event.preventDefault();
+        this.run(shortcut);
+    }
+    // --- Eventos del medio ---
+    onPlay() {
+        this.playing.set(true);
+        this.started.set(true);
+        this.played.emit();
+    }
+    onPause() {
+        this.playing.set(false);
+        this.paused.emit();
+    }
+    onEnded(event) {
+        this.playing.set(false);
+        this.sync(event);
+        this.ended.emit();
+    }
+    onTime(event) {
+        const media = event.target;
+        this.current.set(media.currentTime);
+        this.timeUpdate.emit(media.currentTime);
+    }
+    sync(event) {
+        this.syncFromMedia(event.target);
+    }
+    onError(event) {
+        const media = event.target;
+        this.error.set(true);
+        this.waiting.set(false);
+        this.mediaError.emit(media.error);
+    }
+    // --- Internos ---
+    run(shortcut) {
+        switch (shortcut.action) {
+            case 'toggle':
+                return this.toggle();
+            case 'mute':
+                return this.toggleMute();
+            case 'fullscreen':
+                void this.toggleFullscreen();
+                return;
+            case 'captions':
+                if (this.tracks().length)
+                    this.toggleCaptions();
+                return;
+            case 'seekBy':
+                return this.seekBy(shortcut.seconds);
+            case 'seekTo':
+                return this.seekTo(shortcut.fraction * this.duration());
+            case 'volumeBy': {
+                const media = this.media();
+                if (!media)
+                    return;
+                media.muted = false;
+                media.volume = Math.min(1, Math.max(0, Math.round((media.volume + shortcut.delta) * 100) / 100));
+                this.announce(cbFormat(this.t().mediaVolumeSet, this.percent(media.volume)));
+            }
+        }
+    }
+    media() {
+        return this.mediaRef()?.nativeElement;
+    }
+    syncFromMedia(media) {
+        this.duration.set(Number.isFinite(media.duration) ? media.duration : 0);
+        this.current.set(media.currentTime);
+        this.volume.set(media.volume);
+        this.muted.set(media.muted);
+        this.rate.set(media.playbackRate || 1);
+        const showing = Array.from(media.textTracks ?? []).findIndex((tr) => tr.mode === 'showing');
+        if (showing >= 0)
+            this.activeTrack.set(showing);
+    }
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    announce(text) {
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMediaPlayer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbMediaPlayer, isStandalone: true, selector: "cb-media-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, sources: { classPropertyName: "sources", publicName: "sources", isSignal: true, isRequired: false, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, tracks: { classPropertyName: "tracks", publicName: "tracks", isSignal: true, isRequired: false, transformFunction: null }, rates: { classPropertyName: "rates", publicName: "rates", isSignal: true, isRequired: false, transformFunction: null }, skipSeconds: { classPropertyName: "skipSeconds", publicName: "skipSeconds", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, startMuted: { classPropertyName: "startMuted", publicName: "muted", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, crossorigin: { classPropertyName: "crossorigin", publicName: "crossorigin", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { played: "played", paused: "paused", ended: "ended", timeUpdate: "timeUpdate", mediaError: "mediaError" }, host: { properties: { "class.cb-media-player--audio": "kind() === \"audio\"", "class.cb-media-player--fullscreen": "fullscreen()" }, classAttribute: "cb-media-player" }, queries: [{ propertyName: "transcript", first: true, predicate: CbMediaTranscript, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "mediaRef", first: true, predicate: ["media"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-mp" role="group" [attr.aria-label]="label()" [attr.aria-describedby]="hintId" (keydown)="onKeydown($event)">
+      @if (kind() === 'video') {
+        <div class="cb-mp__screen" (click)="toggle()" (dblclick)="toggleFullscreen()">
+          <video
+            #media
+            class="cb-mp__media"
+            [attr.poster]="poster() || null"
+            [attr.crossorigin]="crossorigin() || null"
+            [preload]="preload()"
+            [loop]="loop()"
+            [muted]="startMuted()"
+            playsinline
+            (play)="onPlay()"
+            (pause)="onPause()"
+            (ended)="onEnded($event)"
+            (timeupdate)="onTime($event)"
+            (loadedmetadata)="sync($event)"
+            (durationchange)="sync($event)"
+            (volumechange)="sync($event)"
+            (ratechange)="sync($event)"
+            (waiting)="waiting.set(true)"
+            (playing)="waiting.set(false)"
+            (canplay)="waiting.set(false)"
+            (error)="onError($event)"
+            (enterpictureinpicture)="pip.set(true)"
+            (leavepictureinpicture)="pip.set(false)"
+          >
+            @for (s of sourceList(); track s.src) {
+              <source [src]="s.src" [attr.type]="s.type || null" />
+            }
+            @for (tr of tracks(); track tr.src) {
+              <track [src]="tr.src" [attr.kind]="tr.kind || 'subtitles'" [attr.srclang]="tr.srclang" [attr.label]="tr.label" [default]="!!tr.default" />
+            }
+          </video>
+          @if (!playing() && !started()) {
+            <span class="cb-mp__big-play" aria-hidden="true"><cb-icon name="play" [size]="34" /></span>
+          }
+          @if (waiting()) {
+            <span class="cb-mp__busy" aria-hidden="true"><cb-icon name="loader-circle" [size]="36" /></span>
+          }
+        </div>
+      } @else {
+        <audio
+          #media
+          [attr.crossorigin]="crossorigin() || null"
+          [preload]="preload()"
+          [loop]="loop()"
+          [muted]="startMuted()"
+          (play)="onPlay()"
+          (pause)="onPause()"
+          (ended)="onEnded($event)"
+          (timeupdate)="onTime($event)"
+          (loadedmetadata)="sync($event)"
+          (durationchange)="sync($event)"
+          (volumechange)="sync($event)"
+          (ratechange)="sync($event)"
+          (waiting)="waiting.set(true)"
+          (playing)="waiting.set(false)"
+          (canplay)="waiting.set(false)"
+          (error)="onError($event)"
+        >
+          @for (s of sourceList(); track s.src) {
+            <source [src]="s.src" [attr.type]="s.type || null" />
+          }
+          @for (tr of tracks(); track tr.src) {
+            <track [src]="tr.src" [attr.kind]="tr.kind || 'subtitles'" [attr.srclang]="tr.srclang" [attr.label]="tr.label" [default]="!!tr.default" />
+          }
+        </audio>
+        @if (heading() || subtitle()) {
+          <div class="cb-mp__info">
+            @if (heading()) {
+              <span class="cb-mp__title">{{ heading() }}</span>
+            }
+            @if (subtitle()) {
+              <span class="cb-mp__subtitle">{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      }
+
+      @if (error()) {
+        <p class="cb-mp__error" role="alert">{{ errorMessage() ?? t().mediaError }}</p>
+      }
+
+      <div class="cb-mp__controls" role="group" [attr.aria-label]="t().mediaControls">
+        <div class="cb-mp__seek-row">
+          <span class="cb-mp__time" aria-hidden="true">{{ timeText(current()) }}</span>
+          <input
+            type="range"
+            class="cb-mp__range cb-mp__seek"
+            min="0"
+            [max]="duration() || 0"
+            step="any"
+            [value]="current()"
+            [style.--cb-mp-fill]="progress() + '%'"
+            [attr.aria-label]="t().mediaSeek"
+            [attr.aria-valuetext]="seekText()"
+            [disabled]="!duration()"
+            (input)="onSeekInput($event)"
+            (keydown)="onSeekKeydown($event)"
+          />
+          <span class="cb-mp__time" aria-hidden="true">{{ timeText(duration()) }}</span>
+        </div>
+
+        <div class="cb-mp__buttons">
+          <button type="button" class="cb-mp__btn cb-mp__btn--main" [attr.aria-label]="playing() ? t().mediaPause : t().mediaPlay" [attr.title]="playing() ? t().mediaPause : t().mediaPlay" (click)="toggle()">
+            <cb-icon [name]="playing() ? 'pause' : 'play'" [size]="20" aria-hidden="true" />
+          </button>
+          @if (skipSeconds() > 0) {
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="fmt(t().mediaBack, skipSeconds())" [attr.title]="fmt(t().mediaBack, skipSeconds())" (click)="seekBy(-skipSeconds())">
+              <cb-icon name="rotate-ccw" [size]="18" aria-hidden="true" />
+            </button>
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="fmt(t().mediaForward, skipSeconds())" [attr.title]="fmt(t().mediaForward, skipSeconds())" (click)="seekBy(skipSeconds())">
+              <cb-icon name="rotate-cw" [size]="18" aria-hidden="true" />
+            </button>
+          }
+
+          <span class="cb-mp__volume">
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="t().mediaMute" [attr.title]="t().mediaMute" [attr.aria-pressed]="muted()" (click)="toggleMute()">
+              <cb-icon [name]="muted() || volume() === 0 ? 'volume-x' : 'volume-2'" [size]="18" aria-hidden="true" />
+            </button>
+            <input
+              type="range"
+              class="cb-mp__range cb-mp__vol"
+              min="0"
+              max="1"
+              step="0.05"
+              [value]="muted() ? 0 : volume()"
+              [style.--cb-mp-fill]="(muted() ? 0 : volume() * 100) + '%'"
+              [attr.aria-label]="t().mediaVolume"
+              [attr.aria-valuetext]="(muted() ? 0 : percent(volume())) + ' %'"
+              (input)="onVolumeInput($event)"
+            />
+          </span>
+
+          <span class="cb-mp__spacer"></span>
+
+          <select class="cb-mp__select" [attr.aria-label]="t().mediaSpeed" [attr.title]="t().mediaSpeed" [value]="rate()" (change)="setRate(+$any($event.target).value)">
+            @for (r of rates(); track r) {
+              <option [value]="r" [selected]="r === rate()">{{ rateText(r) }}</option>
+            }
+          </select>
+
+          @if (tracks().length) {
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="t().mediaCaptions" [attr.title]="t().mediaCaptions" [attr.aria-pressed]="activeTrack() >= 0" (click)="toggleCaptions()">
+              <cb-icon name="captions" [size]="18" aria-hidden="true" />
+            </button>
+            @if (tracks().length > 1) {
+              <select class="cb-mp__select" [attr.aria-label]="t().mediaCaptionsLanguage" (change)="setTrack(+$any($event.target).value)">
+                <option value="-1" [selected]="activeTrack() < 0">{{ t().mediaCaptionsNone }}</option>
+                @for (tr of tracks(); track tr.src; let i = $index) {
+                  <option [value]="i" [selected]="activeTrack() === i">{{ tr.label }}</option>
+                }
+              </select>
+            }
+          }
+
+          @if (kind() === 'video') {
+            @if (pipSupported) {
+              <button type="button" class="cb-mp__btn" [attr.aria-label]="t().mediaPip" [attr.title]="t().mediaPip" [attr.aria-pressed]="pip()" (click)="togglePip()">
+                <cb-icon name="picture-in-picture-2" [size]="18" aria-hidden="true" />
+              </button>
+            }
+            <button
+              type="button"
+              class="cb-mp__btn"
+              [attr.aria-label]="fullscreen() ? t().mediaExitFullscreen : t().mediaFullscreen"
+              [attr.title]="fullscreen() ? t().mediaExitFullscreen : t().mediaFullscreen"
+              (click)="toggleFullscreen()"
+            >
+              <cb-icon [name]="fullscreen() ? 'minimize-2' : 'maximize-2'" [size]="18" aria-hidden="true" />
+            </button>
+          }
+        </div>
+      </div>
+
+      @if (transcript()) {
+        <details class="cb-mp__transcript">
+          <summary>{{ t().mediaTranscript }}</summary>
+          <div class="cb-mp__transcript-body"><ng-content select="[cbMediaTranscript]" /></div>
+        </details>
+      }
+
+      <span class="cb-mp__sr" [id]="hintId">{{ t().mediaShortcuts }}</span>
+      <span class="cb-mp__sr" aria-live="polite">{{ announcement() }}</span>
+    </div>
+  `, isInline: true, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-mp{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 8px);background:var(--cb-color-surface-raised, var(--cb-color-surface))}:host(.cb-media-player--fullscreen) .cb-mp{height:100%;border:0;border-radius:0;background:#000}.cb-mp__screen{position:relative;display:flex;align-items:center;justify-content:center;background:#000;cursor:pointer}:host(.cb-media-player--fullscreen) .cb-mp__screen{flex:1;min-height:0}.cb-mp__media{display:block;width:100%;max-height:100%}.cb-mp__big-play{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:50%;background:#0000008c;color:#fff;pointer-events:none}.cb-mp__busy{position:absolute;color:#fff;animation:cb-mp-spin 1s linear infinite;pointer-events:none}@keyframes cb-mp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-mp__busy{animation-duration:3s}}.cb-mp__info{display:flex;flex-direction:column;gap:.125rem;padding:.875rem 1rem 0}.cb-mp__title{font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-mp__subtitle{color:var(--cb-color-text-muted)}.cb-mp__error{margin:0;padding:.5rem 1rem;color:var(--cb-color-danger)}.cb-mp__controls{display:flex;flex-direction:column;gap:.25rem;padding:.5rem .75rem .625rem}:host(.cb-media-player--fullscreen) .cb-mp__controls{background:#111827;color:#fff}.cb-mp__seek-row{display:flex;align-items:center;gap:.625rem}.cb-mp__time{min-width:2.75rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums;text-align:center}:host(.cb-media-player--fullscreen) .cb-mp__time{color:#d1d5db}.cb-mp__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}.cb-mp__spacer{flex:1}.cb-mp__volume{display:inline-flex;align-items:center;gap:.25rem}.cb-mp__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:inherit;cursor:pointer}.cb-mp__btn:hover{background:var(--cb-color-surface-hover)}:host(.cb-media-player--fullscreen) .cb-mp__btn:hover{background:#ffffff1f}.cb-mp__btn--main{background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-mp__btn--main:hover{background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-mp__btn[aria-pressed=true]{color:var(--cb-color-primary)}.cb-mp__select{height:2rem;padding:0 .375rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 6px);background:var(--cb-color-surface-raised, transparent);color:inherit;font:inherit;font-size:var(--cb-text-xs, .75rem)}.cb-mp__range{--cb-mp-fill: 0%;height:1.5rem;margin:0;background:transparent;cursor:pointer;appearance:none}.cb-mp__seek{flex:1;min-width:0}.cb-mp__vol{width:5.5rem}.cb-mp__range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--cb-color-primary) var(--cb-mp-fill),var(--cb-color-border-strong, #cbd5e1) var(--cb-mp-fill))}.cb-mp__range::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--cb-color-primary) var(--cb-mp-fill),var(--cb-color-border-strong, #cbd5e1) var(--cb-mp-fill))}.cb-mp__range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--cb-color-primary);appearance:none}.cb-mp__range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--cb-color-primary)}.cb-mp__range:disabled{cursor:default;opacity:.5}.cb-mp__btn:focus-visible,.cb-mp__select:focus-visible,.cb-mp__range:focus-visible,.cb-mp__transcript summary:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-mp__transcript{border-top:1px solid var(--cb-color-border)}.cb-mp__transcript summary{padding:.625rem 1rem;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-mp__transcript-body{max-height:16rem;overflow-y:auto;padding:0 1rem .875rem;color:var(--cb-color-text-muted);line-height:1.6}.cb-mp__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbMediaPlayer, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-media-player', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [CbIcon], host: {
+                        class: 'cb-media-player',
+                        '[class.cb-media-player--audio]': 'kind() === "audio"',
+                        '[class.cb-media-player--fullscreen]': 'fullscreen()',
+                    }, template: `
+    <div class="cb-mp" role="group" [attr.aria-label]="label()" [attr.aria-describedby]="hintId" (keydown)="onKeydown($event)">
+      @if (kind() === 'video') {
+        <div class="cb-mp__screen" (click)="toggle()" (dblclick)="toggleFullscreen()">
+          <video
+            #media
+            class="cb-mp__media"
+            [attr.poster]="poster() || null"
+            [attr.crossorigin]="crossorigin() || null"
+            [preload]="preload()"
+            [loop]="loop()"
+            [muted]="startMuted()"
+            playsinline
+            (play)="onPlay()"
+            (pause)="onPause()"
+            (ended)="onEnded($event)"
+            (timeupdate)="onTime($event)"
+            (loadedmetadata)="sync($event)"
+            (durationchange)="sync($event)"
+            (volumechange)="sync($event)"
+            (ratechange)="sync($event)"
+            (waiting)="waiting.set(true)"
+            (playing)="waiting.set(false)"
+            (canplay)="waiting.set(false)"
+            (error)="onError($event)"
+            (enterpictureinpicture)="pip.set(true)"
+            (leavepictureinpicture)="pip.set(false)"
+          >
+            @for (s of sourceList(); track s.src) {
+              <source [src]="s.src" [attr.type]="s.type || null" />
+            }
+            @for (tr of tracks(); track tr.src) {
+              <track [src]="tr.src" [attr.kind]="tr.kind || 'subtitles'" [attr.srclang]="tr.srclang" [attr.label]="tr.label" [default]="!!tr.default" />
+            }
+          </video>
+          @if (!playing() && !started()) {
+            <span class="cb-mp__big-play" aria-hidden="true"><cb-icon name="play" [size]="34" /></span>
+          }
+          @if (waiting()) {
+            <span class="cb-mp__busy" aria-hidden="true"><cb-icon name="loader-circle" [size]="36" /></span>
+          }
+        </div>
+      } @else {
+        <audio
+          #media
+          [attr.crossorigin]="crossorigin() || null"
+          [preload]="preload()"
+          [loop]="loop()"
+          [muted]="startMuted()"
+          (play)="onPlay()"
+          (pause)="onPause()"
+          (ended)="onEnded($event)"
+          (timeupdate)="onTime($event)"
+          (loadedmetadata)="sync($event)"
+          (durationchange)="sync($event)"
+          (volumechange)="sync($event)"
+          (ratechange)="sync($event)"
+          (waiting)="waiting.set(true)"
+          (playing)="waiting.set(false)"
+          (canplay)="waiting.set(false)"
+          (error)="onError($event)"
+        >
+          @for (s of sourceList(); track s.src) {
+            <source [src]="s.src" [attr.type]="s.type || null" />
+          }
+          @for (tr of tracks(); track tr.src) {
+            <track [src]="tr.src" [attr.kind]="tr.kind || 'subtitles'" [attr.srclang]="tr.srclang" [attr.label]="tr.label" [default]="!!tr.default" />
+          }
+        </audio>
+        @if (heading() || subtitle()) {
+          <div class="cb-mp__info">
+            @if (heading()) {
+              <span class="cb-mp__title">{{ heading() }}</span>
+            }
+            @if (subtitle()) {
+              <span class="cb-mp__subtitle">{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      }
+
+      @if (error()) {
+        <p class="cb-mp__error" role="alert">{{ errorMessage() ?? t().mediaError }}</p>
+      }
+
+      <div class="cb-mp__controls" role="group" [attr.aria-label]="t().mediaControls">
+        <div class="cb-mp__seek-row">
+          <span class="cb-mp__time" aria-hidden="true">{{ timeText(current()) }}</span>
+          <input
+            type="range"
+            class="cb-mp__range cb-mp__seek"
+            min="0"
+            [max]="duration() || 0"
+            step="any"
+            [value]="current()"
+            [style.--cb-mp-fill]="progress() + '%'"
+            [attr.aria-label]="t().mediaSeek"
+            [attr.aria-valuetext]="seekText()"
+            [disabled]="!duration()"
+            (input)="onSeekInput($event)"
+            (keydown)="onSeekKeydown($event)"
+          />
+          <span class="cb-mp__time" aria-hidden="true">{{ timeText(duration()) }}</span>
+        </div>
+
+        <div class="cb-mp__buttons">
+          <button type="button" class="cb-mp__btn cb-mp__btn--main" [attr.aria-label]="playing() ? t().mediaPause : t().mediaPlay" [attr.title]="playing() ? t().mediaPause : t().mediaPlay" (click)="toggle()">
+            <cb-icon [name]="playing() ? 'pause' : 'play'" [size]="20" aria-hidden="true" />
+          </button>
+          @if (skipSeconds() > 0) {
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="fmt(t().mediaBack, skipSeconds())" [attr.title]="fmt(t().mediaBack, skipSeconds())" (click)="seekBy(-skipSeconds())">
+              <cb-icon name="rotate-ccw" [size]="18" aria-hidden="true" />
+            </button>
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="fmt(t().mediaForward, skipSeconds())" [attr.title]="fmt(t().mediaForward, skipSeconds())" (click)="seekBy(skipSeconds())">
+              <cb-icon name="rotate-cw" [size]="18" aria-hidden="true" />
+            </button>
+          }
+
+          <span class="cb-mp__volume">
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="t().mediaMute" [attr.title]="t().mediaMute" [attr.aria-pressed]="muted()" (click)="toggleMute()">
+              <cb-icon [name]="muted() || volume() === 0 ? 'volume-x' : 'volume-2'" [size]="18" aria-hidden="true" />
+            </button>
+            <input
+              type="range"
+              class="cb-mp__range cb-mp__vol"
+              min="0"
+              max="1"
+              step="0.05"
+              [value]="muted() ? 0 : volume()"
+              [style.--cb-mp-fill]="(muted() ? 0 : volume() * 100) + '%'"
+              [attr.aria-label]="t().mediaVolume"
+              [attr.aria-valuetext]="(muted() ? 0 : percent(volume())) + ' %'"
+              (input)="onVolumeInput($event)"
+            />
+          </span>
+
+          <span class="cb-mp__spacer"></span>
+
+          <select class="cb-mp__select" [attr.aria-label]="t().mediaSpeed" [attr.title]="t().mediaSpeed" [value]="rate()" (change)="setRate(+$any($event.target).value)">
+            @for (r of rates(); track r) {
+              <option [value]="r" [selected]="r === rate()">{{ rateText(r) }}</option>
+            }
+          </select>
+
+          @if (tracks().length) {
+            <button type="button" class="cb-mp__btn" [attr.aria-label]="t().mediaCaptions" [attr.title]="t().mediaCaptions" [attr.aria-pressed]="activeTrack() >= 0" (click)="toggleCaptions()">
+              <cb-icon name="captions" [size]="18" aria-hidden="true" />
+            </button>
+            @if (tracks().length > 1) {
+              <select class="cb-mp__select" [attr.aria-label]="t().mediaCaptionsLanguage" (change)="setTrack(+$any($event.target).value)">
+                <option value="-1" [selected]="activeTrack() < 0">{{ t().mediaCaptionsNone }}</option>
+                @for (tr of tracks(); track tr.src; let i = $index) {
+                  <option [value]="i" [selected]="activeTrack() === i">{{ tr.label }}</option>
+                }
+              </select>
+            }
+          }
+
+          @if (kind() === 'video') {
+            @if (pipSupported) {
+              <button type="button" class="cb-mp__btn" [attr.aria-label]="t().mediaPip" [attr.title]="t().mediaPip" [attr.aria-pressed]="pip()" (click)="togglePip()">
+                <cb-icon name="picture-in-picture-2" [size]="18" aria-hidden="true" />
+              </button>
+            }
+            <button
+              type="button"
+              class="cb-mp__btn"
+              [attr.aria-label]="fullscreen() ? t().mediaExitFullscreen : t().mediaFullscreen"
+              [attr.title]="fullscreen() ? t().mediaExitFullscreen : t().mediaFullscreen"
+              (click)="toggleFullscreen()"
+            >
+              <cb-icon [name]="fullscreen() ? 'minimize-2' : 'maximize-2'" [size]="18" aria-hidden="true" />
+            </button>
+          }
+        </div>
+      </div>
+
+      @if (transcript()) {
+        <details class="cb-mp__transcript">
+          <summary>{{ t().mediaTranscript }}</summary>
+          <div class="cb-mp__transcript-body"><ng-content select="[cbMediaTranscript]" /></div>
+        </details>
+      }
+
+      <span class="cb-mp__sr" [id]="hintId">{{ t().mediaShortcuts }}</span>
+      <span class="cb-mp__sr" aria-live="polite">{{ announcement() }}</span>
+    </div>
+  `, styles: [":host{display:block;color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-mp{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 8px);background:var(--cb-color-surface-raised, var(--cb-color-surface))}:host(.cb-media-player--fullscreen) .cb-mp{height:100%;border:0;border-radius:0;background:#000}.cb-mp__screen{position:relative;display:flex;align-items:center;justify-content:center;background:#000;cursor:pointer}:host(.cb-media-player--fullscreen) .cb-mp__screen{flex:1;min-height:0}.cb-mp__media{display:block;width:100%;max-height:100%}.cb-mp__big-play{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:50%;background:#0000008c;color:#fff;pointer-events:none}.cb-mp__busy{position:absolute;color:#fff;animation:cb-mp-spin 1s linear infinite;pointer-events:none}@keyframes cb-mp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.cb-mp__busy{animation-duration:3s}}.cb-mp__info{display:flex;flex-direction:column;gap:.125rem;padding:.875rem 1rem 0}.cb-mp__title{font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-mp__subtitle{color:var(--cb-color-text-muted)}.cb-mp__error{margin:0;padding:.5rem 1rem;color:var(--cb-color-danger)}.cb-mp__controls{display:flex;flex-direction:column;gap:.25rem;padding:.5rem .75rem .625rem}:host(.cb-media-player--fullscreen) .cb-mp__controls{background:#111827;color:#fff}.cb-mp__seek-row{display:flex;align-items:center;gap:.625rem}.cb-mp__time{min-width:2.75rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-variant-numeric:tabular-nums;text-align:center}:host(.cb-media-player--fullscreen) .cb-mp__time{color:#d1d5db}.cb-mp__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}.cb-mp__spacer{flex:1}.cb-mp__volume{display:inline-flex;align-items:center;gap:.25rem}.cb-mp__btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:inherit;cursor:pointer}.cb-mp__btn:hover{background:var(--cb-color-surface-hover)}:host(.cb-media-player--fullscreen) .cb-mp__btn:hover{background:#ffffff1f}.cb-mp__btn--main{background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-mp__btn--main:hover{background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-mp__btn[aria-pressed=true]{color:var(--cb-color-primary)}.cb-mp__select{height:2rem;padding:0 .375rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md, 6px);background:var(--cb-color-surface-raised, transparent);color:inherit;font:inherit;font-size:var(--cb-text-xs, .75rem)}.cb-mp__range{--cb-mp-fill: 0%;height:1.5rem;margin:0;background:transparent;cursor:pointer;appearance:none}.cb-mp__seek{flex:1;min-width:0}.cb-mp__vol{width:5.5rem}.cb-mp__range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--cb-color-primary) var(--cb-mp-fill),var(--cb-color-border-strong, #cbd5e1) var(--cb-mp-fill))}.cb-mp__range::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--cb-color-primary) var(--cb-mp-fill),var(--cb-color-border-strong, #cbd5e1) var(--cb-mp-fill))}.cb-mp__range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--cb-color-primary);appearance:none}.cb-mp__range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--cb-color-primary)}.cb-mp__range:disabled{cursor:default;opacity:.5}.cb-mp__btn:focus-visible,.cb-mp__select:focus-visible,.cb-mp__range:focus-visible,.cb-mp__transcript summary:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-mp__transcript{border-top:1px solid var(--cb-color-border)}.cb-mp__transcript summary{padding:.625rem 1rem;font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-mp__transcript-body{max-height:16rem;overflow-y:auto;padding:0 1rem .875rem;color:var(--cb-color-text-muted);line-height:1.6}.cb-mp__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], sources: [{ type: i0.Input, args: [{ isSignal: true, alias: "sources", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], tracks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tracks", required: false }] }], rates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rates", required: false }] }], skipSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipSeconds", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], startMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "muted", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], crossorigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossorigin", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], played: [{ type: i0.Output, args: ["played"] }], paused: [{ type: i0.Output, args: ["paused"] }], ended: [{ type: i0.Output, args: ["ended"] }], timeUpdate: [{ type: i0.Output, args: ["timeUpdate"] }], mediaError: [{ type: i0.Output, args: ["mediaError"] }], transcript: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CbMediaTranscript), { isSignal: true }] }], mediaRef: [{ type: i0.ViewChild, args: ['media', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/media-player
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CB_MEDIA_RATES, CbMediaPlayer, CbMediaTranscript, formatTime as cbFormatMediaTime };