@memberjunction/ng-media-player 0.0.1 → 5.44.0

package/dist/lib/media-player/media-player.component.js

@@ -0,0 +1,1545 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, inject, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { computeActiveCueIndex } from './cue-utils';
+import { nextPlaybackState } from './playback-state';
+import { resolveTranscriptToggleVisible, resolveTranscriptVisible, } from './transcript-layout';
+import { DEFAULT_WAVEFORM_BARS, downsamplePeaks } from './waveform-utils';
+import * as i0 from "@angular/core";
+const _c0 = ["primaryMedia"];
+function MJMediaPlayerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 4);
+    i0.ɵɵdomElement(1, "i", 5);
+    i0.ɵɵdomElementStart(2, "span", 6);
+    i0.ɵɵtext(3, "No media to play.");
+    i0.ɵɵdomElementEnd()();
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 9);
+    i0.ɵɵdomElement(1, "i", 33);
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3, "This media could not be played.");
+    i0.ɵɵdomElementEnd()();
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 34);
+    i0.ɵɵdomElement(1, "span", 35);
+    i0.ɵɵdomElementStart(2, "span", 36);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-media-busy--static", ctx_r1.PrefersReducedMotion);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.BusyLabel);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "audio", 41, 1);
+    i0.ɵɵdomListener("loadstart", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_loadstart_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaLoadStart($event.target)); })("loadedmetadata", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_loadedmetadata_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaLoadedMetadata($event.target)); })("canplay", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_canplay_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaCanPlay($event.target)); })("canplaythrough", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_canplaythrough_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaCanPlay($event.target)); })("waiting", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_waiting_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaWaiting($event.target)); })("seeking", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_seeking_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaSeeking($event.target)); })("seeked", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_seeked_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaSeeked($event.target)); })("playing", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_playing_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaPlaying($event.target)); })("stalled", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_stalled_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaStalled($event.target)); })("suspend", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_suspend_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaSuspend($event.target)); })("emptied", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_emptied_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaEmptied($event.target)); })("timeupdate", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_timeupdate_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaTimeUpdate($event.target)); })("durationchange", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_durationchange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaDurationChange($event.target)); })("play", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_play_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaPlay($event.target)); })("pause", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_pause_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaPause($event.target)); })("ended", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_ended_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaEnded($event.target)); })("error", function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template_audio_error_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaError($event.target)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const track_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵdomProperty("src", track_r4.Url);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Conditional_0_Template, 2, 1, "audio", 40);
+} if (rf & 2) {
+    const ɵ$index_33_r5 = ctx.$index;
+    i0.ɵɵconditional(ɵ$index_33_r5 === 0 ? 0 : -1);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "span", 45);
+} if (rf & 2) {
+    const p_r8 = ctx.$implicit;
+    const ɵ$index_40_r9 = ctx.$index;
+    const ɵ$count_40_r10 = ctx.$count;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵstyleProp("height", 2 + p_r8 * 98, "%");
+    i0.ɵɵclassProp("mj-media-waveform__bar--played", (ɵ$index_40_r9 + 1) / ɵ$count_40_r10 <= ctx_r1.WaveformPlayedFraction);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 42, 2);
+    i0.ɵɵdomListener("pointerdown", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r6); const waveTrack_r7 = i0.ɵɵreference(1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerDown($event, waveTrack_r7)); })("pointermove", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template_div_pointermove_0_listener($event) { i0.ɵɵrestoreView(_r6); const waveTrack_r7 = i0.ɵɵreference(1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerMove($event, waveTrack_r7)); })("pointerup", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template_div_pointerup_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerUp($event)); })("pointercancel", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template_div_pointercancel_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerUp($event)); })("keydown", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnScrubKeyDown($event)); });
+    i0.ɵɵrepeaterCreate(2, MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_For_3_Template, 1, 4, "span", 43, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵdomElement(4, "div", 44);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-media-waveform--static", ctx_r1.PrefersReducedMotion);
+    i0.ɵɵattribute("aria-valuemin", 0)("aria-valuemax", ctx_r1.DurationMs)("aria-valuenow", ctx_r1.CurrentTimeMs)("aria-valuetext", ctx_r1.FormatTime(ctx_r1.CurrentTimeMs) + " of " + ctx_r1.FormatTime(ctx_r1.DurationMs));
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.WaveformPeaks);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("left", ctx_r1.ScrubPercent, "%");
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 46, 2);
+    i0.ɵɵdomListener("pointerdown", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r11); const waveTrack_r12 = i0.ɵɵreference(1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerDown($event, waveTrack_r12)); })("pointermove", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template_div_pointermove_0_listener($event) { i0.ɵɵrestoreView(_r11); const waveTrack_r12 = i0.ɵɵreference(1); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerMove($event, waveTrack_r12)); })("pointerup", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template_div_pointerup_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerUp($event)); })("pointercancel", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template_div_pointercancel_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnWaveformPointerUp($event)); })("keydown", function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnScrubKeyDown($event)); });
+    i0.ɵɵdomElementStart(2, "div", 47);
+    i0.ɵɵdomElement(3, "div", 48);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵattribute("aria-valuemin", 0)("aria-valuemax", ctx_r1.DurationMs)("aria-valuenow", ctx_r1.CurrentTimeMs)("aria-valuetext", ctx_r1.FormatTime(ctx_r1.CurrentTimeMs) + " of " + ctx_r1.FormatTime(ctx_r1.DurationMs));
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("width", ctx_r1.ScrubPercent, "%");
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 39);
+    i0.ɵɵdomElement(1, "i", 49);
+    i0.ɵɵdomElementEnd();
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MJMediaPlayerComponent_Conditional_2_Conditional_4_For_1_Template, 1, 1, null, null, i0.ɵɵcomponentInstance().TrackById, true);
+    i0.ɵɵconditionalCreate(2, MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_2_Template, 5, 8, "div", 37)(3, MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_3_Template, 4, 6, "div", 38)(4, MJMediaPlayerComponent_Conditional_2_Conditional_4_Conditional_4_Template, 2, 0, "div", 39);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.AudioTracks);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowWaveform && ctx_r1.ShowWaveformBars ? 2 : ctx_r1.ShowWaveform ? 3 : 4);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 52);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const track_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(track_r13.Label);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "video", 55, 1);
+    i0.ɵɵdomListener("loadstart", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_loadstart_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaLoadStart($event.target)); })("loadedmetadata", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_loadedmetadata_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaLoadedMetadata($event.target)); })("canplay", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_canplay_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaCanPlay($event.target)); })("canplaythrough", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_canplaythrough_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaCanPlay($event.target)); })("waiting", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_waiting_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaWaiting($event.target)); })("seeking", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_seeking_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaSeeking($event.target)); })("seeked", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_seeked_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaSeeked($event.target)); })("playing", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_playing_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaPlaying($event.target)); })("stalled", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_stalled_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaStalled($event.target)); })("suspend", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_suspend_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaSuspend($event.target)); })("emptied", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_emptied_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaEmptied($event.target)); })("timeupdate", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_timeupdate_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaTimeUpdate($event.target)); })("durationchange", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_durationchange_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaDurationChange($event.target)); })("play", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_play_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaPlay($event.target)); })("pause", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_pause_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaPause($event.target)); })("ended", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_ended_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaEnded($event.target)); })("error", function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template_video_error_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnMediaError($event.target)); });
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const track_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵdomProperty("src", track_r13.Url, i0.ɵɵsanitizeUrl)("poster", track_r13.PosterUrl || null);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "video", 54);
+} if (rf & 2) {
+    const track_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵdomProperty("src", track_r13.Url, i0.ɵɵsanitizeUrl)("poster", track_r13.PosterUrl || null);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 51);
+    i0.ɵɵconditionalCreate(1, MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_1_Template, 2, 1, "span", 52);
+    i0.ɵɵconditionalCreate(2, MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_2_Template, 2, 2, "video", 53)(3, MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Conditional_3_Template, 1, 2, "video", 54);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const track_r13 = ctx.$implicit;
+    const ɵ$index_60_r15 = ctx.$index;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(track_r13.Label ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ɵ$index_60_r15 === 0 ? 2 : 3);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 50);
+    i0.ɵɵrepeaterCreate(1, MJMediaPlayerComponent_Conditional_2_Conditional_5_For_2_Template, 4, 2, "div", 51, i0.ɵɵcomponentInstance().TrackById, true);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-media-video-grid--multi", ctx_r1.IsMultiVideo);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.VideoTracks);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "span", 14);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 56);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SkipBackward()); });
+    i0.ɵɵdomElement(1, "i", 57);
+    i0.ɵɵdomElementStart(2, "span", 58);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("title", i0.ɵɵinterpolate1("Skip back ", ctx_r1.SkipSeconds, "s"));
+    i0.ɵɵattribute("aria-label", "Skip back " + ctx_r1.SkipSeconds + " seconds");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.SkipSeconds);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 56);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SkipForward()); });
+    i0.ɵɵdomElement(1, "i", 59);
+    i0.ɵɵdomElementStart(2, "span", 58);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("title", i0.ɵɵinterpolate1("Skip forward ", ctx_r1.SkipSeconds, "s"));
+    i0.ɵɵattribute("aria-label", "Skip forward " + ctx_r1.SkipSeconds + " seconds");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.SkipSeconds);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 29)(1, "button", 56);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_28_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleMute()); });
+    i0.ɵɵdomElement(2, "i", 27);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "input", 60);
+    i0.ɵɵdomListener("input", function MJMediaPlayerComponent_Conditional_2_Conditional_28_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnVolumeInput($event)); });
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("title", ctx_r1.Muted ? "Unmute" : "Mute");
+    i0.ɵɵattribute("aria-label", ctx_r1.Muted ? "Unmute" : "Mute");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-volume-xmark", ctx_r1.Muted || ctx_r1.Volume === 0)("fa-volume-low", !ctx_r1.Muted && ctx_r1.Volume > 0 && ctx_r1.Volume <= 0.5)("fa-volume-high", !ctx_r1.Muted && ctx_r1.Volume > 0.5);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("value", ctx_r1.Muted ? 0 : ctx_r1.Volume);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_29_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "li", 63)(1, "button", 64);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_29_Conditional_3_For_2_Template_button_click_1_listener() { const rate_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.SetPlaybackRate(rate_r22)); });
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const rate_r22 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-media-rate__item--active", rate_r22 === ctx_r1.PlaybackRate);
+    i0.ɵɵattribute("aria-checked", rate_r22 === ctx_r1.PlaybackRate);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", rate_r22, "\u00D7 ");
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_29_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "ul", 62);
+    i0.ɵɵrepeaterCreate(1, MJMediaPlayerComponent_Conditional_2_Conditional_29_Conditional_3_For_2_Template, 3, 4, "li", 63, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.PlaybackRates);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 30)(1, "button", 61);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_29_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleRateMenu()); });
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(3, MJMediaPlayerComponent_Conditional_2_Conditional_29_Conditional_3_Template, 3, 0, "ul", 62);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-expanded", ctx_r1.RateMenuOpen);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.PlaybackRate, "\u00D7 ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.RateMenuOpen ? 3 : -1);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 56);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_30_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleTranscript()); });
+    i0.ɵɵdomElement(1, "i", 65);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mj-media-btn--active", ctx_r1.TranscriptVisible);
+    i0.ɵɵdomProperty("title", ctx_r1.TranscriptVisible ? "Hide transcript" : "Show transcript");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.TranscriptVisible)("aria-label", ctx_r1.TranscriptVisible ? "Hide transcript" : "Show transcript");
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 56);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleFullscreen()); });
+    i0.ɵɵdomElement(1, "i", 27);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵdomProperty("title", ctx_r1.IsFullscreen ? "Exit fullscreen" : "Enter fullscreen");
+    i0.ɵɵattribute("aria-label", ctx_r1.IsFullscreen ? "Exit fullscreen" : "Enter fullscreen");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-compress", ctx_r1.IsFullscreen)("fa-expand", !ctx_r1.IsFullscreen);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_32_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 72);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const cue_r27 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("color", ctx_r1.SpeakerColor(cue_r27.SpeakerLabel));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", cue_r27.SpeakerLabel, " ");
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_32_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 67);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Conditional_32_For_2_Template_button_click_0_listener() { const ɵ$index_162_r26 = i0.ɵɵrestoreView(_r25).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCueClicked(ɵ$index_162_r26)); })("keydown", function MJMediaPlayerComponent_Conditional_2_Conditional_32_For_2_Template_button_keydown_0_listener($event) { const ɵ$index_162_r26 = i0.ɵɵrestoreView(_r25).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnCueKeyDown($event, ɵ$index_162_r26)); });
+    i0.ɵɵdomElementStart(1, "span", 68);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 69);
+    i0.ɵɵconditionalCreate(4, MJMediaPlayerComponent_Conditional_2_Conditional_32_For_2_Conditional_4_Template, 2, 3, "span", 70);
+    i0.ɵɵdomElementStart(5, "span", 71);
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const cue_r27 = ctx.$implicit;
+    const ɵ$index_162_r26 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("mj-media-cue--active", ɵ$index_162_r26 === ctx_r1.ActiveCueIndex);
+    i0.ɵɵattribute("aria-current", ɵ$index_162_r26 === ctx_r1.ActiveCueIndex ? "true" : null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatTime(cue_r27.StartMs));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(cue_r27.SpeakerLabel ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(cue_r27.Text);
+} }
+function MJMediaPlayerComponent_Conditional_2_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 32);
+    i0.ɵɵrepeaterCreate(1, MJMediaPlayerComponent_Conditional_2_Conditional_32_For_2_Template, 7, 6, "button", 66, i0.ɵɵcomponentInstance().CueTrackById, true);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.Transcript);
+} }
+function MJMediaPlayerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 7)(1, "div", 8);
+    i0.ɵɵconditionalCreate(2, MJMediaPlayerComponent_Conditional_2_Conditional_2_Template, 4, 0, "div", 9);
+    i0.ɵɵconditionalCreate(3, MJMediaPlayerComponent_Conditional_2_Conditional_3_Template, 4, 3, "div", 10);
+    i0.ɵɵconditionalCreate(4, MJMediaPlayerComponent_Conditional_2_Conditional_4_Template, 5, 1)(5, MJMediaPlayerComponent_Conditional_2_Conditional_5_Template, 3, 2, "div", 11);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 12)(7, "div", 13);
+    i0.ɵɵconditionalCreate(8, MJMediaPlayerComponent_Conditional_2_Conditional_8_Template, 1, 0, "span", 14);
+    i0.ɵɵdomElementStart(9, "span", 15);
+    i0.ɵɵtext(10);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(11, "div", 16)(12, "span", 17);
+    i0.ɵɵtext(13);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(14, "div", 18, 0);
+    i0.ɵɵdomListener("pointerdown", function MJMediaPlayerComponent_Conditional_2_Template_div_pointerdown_14_listener($event) { i0.ɵɵrestoreView(_r1); const scrubTrack_r16 = i0.ɵɵreference(15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubPointerDown($event, scrubTrack_r16)); })("pointermove", function MJMediaPlayerComponent_Conditional_2_Template_div_pointermove_14_listener($event) { i0.ɵɵrestoreView(_r1); const scrubTrack_r16 = i0.ɵɵreference(15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubPointerMove($event, scrubTrack_r16)); })("pointerup", function MJMediaPlayerComponent_Conditional_2_Template_div_pointerup_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubPointerUp($event)); })("pointercancel", function MJMediaPlayerComponent_Conditional_2_Template_div_pointercancel_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubPointerUp($event)); })("keydown", function MJMediaPlayerComponent_Conditional_2_Template_div_keydown_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnScrubKeyDown($event)); });
+    i0.ɵɵdomElementStart(16, "div", 19);
+    i0.ɵɵdomElement(17, "div", 20);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElement(18, "div", 21);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(19, "span", 22);
+    i0.ɵɵtext(20);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(21, "div", 23)(22, "div", 24);
+    i0.ɵɵconditionalCreate(23, MJMediaPlayerComponent_Conditional_2_Conditional_23_Template, 4, 4, "button", 25);
+    i0.ɵɵdomElementStart(24, "button", 26);
+    i0.ɵɵdomListener("click", function MJMediaPlayerComponent_Conditional_2_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.TogglePlay()); });
+    i0.ɵɵdomElement(25, "i", 27);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(26, MJMediaPlayerComponent_Conditional_2_Conditional_26_Template, 4, 4, "button", 25);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(27, "div", 28);
+    i0.ɵɵconditionalCreate(28, MJMediaPlayerComponent_Conditional_2_Conditional_28_Template, 4, 9, "div", 29);
+    i0.ɵɵconditionalCreate(29, MJMediaPlayerComponent_Conditional_2_Conditional_29_Template, 4, 3, "div", 30);
+    i0.ɵɵconditionalCreate(30, MJMediaPlayerComponent_Conditional_2_Conditional_30_Template, 2, 5, "button", 31);
+    i0.ɵɵconditionalCreate(31, MJMediaPlayerComponent_Conditional_2_Conditional_31_Template, 2, 6, "button", 25);
+    i0.ɵɵdomElementEnd()()()();
+    i0.ɵɵconditionalCreate(32, MJMediaPlayerComponent_Conditional_2_Conditional_32_Template, 3, 0, "div", 32);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.HasError ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowBusyIndicator && !ctx_r1.HasError ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsAudioOnly ? 4 : 5);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("mj-media-status--busy", ctx_r1.ShowBusyIndicator);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowBusyIndicator ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.StatusLabel);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatTime(ctx_r1.CurrentTimeMs));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-valuemin", 0)("aria-valuemax", ctx_r1.DurationMs)("aria-valuenow", ctx_r1.CurrentTimeMs)("aria-valuetext", ctx_r1.FormatTime(ctx_r1.CurrentTimeMs) + " of " + ctx_r1.FormatTime(ctx_r1.DurationMs));
+    i0.ɵɵadvance(3);
+    i0.ɵɵstyleProp("width", ctx_r1.ScrubPercent, "%");
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", ctx_r1.ScrubPercent, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatTime(ctx_r1.DurationMs));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.ShowSkipControls ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("title", ctx_r1.IsPlaying ? "Pause" : "Play");
+    i0.ɵɵattribute("aria-label", ctx_r1.IsPlaying ? "Pause" : "Play");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-pause", ctx_r1.IsPlaying)("fa-play", !ctx_r1.IsPlaying);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowSkipControls ? 26 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowVolume ? 28 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowSpeedControl ? 29 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowTranscriptToggleButton ? 30 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowFullscreen && ctx_r1.VideoTracks.length > 0 ? 31 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowTranscriptPanel ? 32 : -1);
+} }
+/**
+ * Delay (ms) before the *buffering* spinner is shown, to avoid flicker on instant seeks
+ * that resolve immediately. The *loading* indicator shows with no delay. If a buffering
+ * state clears before this elapses, the spinner never appears.
+ */
+const BUFFERING_INDICATOR_DELAY_MS = 200;
+/**
+ * `mj-media-player` — a generic, framework-agnostic media player.
+ *
+ * Renders one or many audio/video tracks with a custom transport bar (play/pause,
+ * click-and-drag scrubber, skip ±N, playback-rate menu, volume + mute, fullscreen),
+ * a **real** audio waveform (decoded client-side, or supplied precomputed via
+ * `MediaTrack.Peaks`) that doubles as the scrubber, and an optional time-synced
+ * transcript panel whose cues are clickable and auto-highlight as playback advances.
+ *
+ * This component has ZERO MemberJunction-core dependencies — it is pure Angular and
+ * is safe to reuse in any application. The MJStorage binding lives in the separate
+ * `mj-storage-media-player` wrapper.
+ */
+export class MJMediaPlayerComponent {
+    cdr = inject(ChangeDetectorRef);
+    host = inject((ElementRef));
+    constructor() {
+        this._prefersReducedMotion = this.detectReducedMotion();
+    }
+    // ---------------------------------------------------------------------------
+    // Inputs
+    // ---------------------------------------------------------------------------
+    /** The track(s) to play. One audio track → transport bar; many videos → grid. */
+    set Tracks(value) {
+        this._tracks = value ?? [];
+        this._activeMediaEl = null;
+        this.resetPlaybackState();
+        this.ensureWaveforms();
+        this.cdr.markForCheck();
+    }
+    get Tracks() {
+        return this._tracks;
+    }
+    _tracks = [];
+    /** Optional transcript cues. When set (and `ShowTranscript`), a transcript panel renders. */
+    set Transcript(value) {
+        this._transcript = value;
+        this._activeCueIndex = -1;
+        // A newly-supplied transcript defaults to visible (the user can hide it via the toggle).
+        this._transcriptUserVisible = true;
+        this.cdr.markForCheck();
+    }
+    get Transcript() {
+        return this._transcript;
+    }
+    _transcript = null;
+    /** Begin playback automatically once media is ready. */
+    Autoplay = false;
+    /** Start playback at this position (ms) once metadata loads. */
+    StartAtMs = null;
+    /** Whether the transcript panel is shown (when a transcript is provided). */
+    ShowTranscript = true;
+    /** Whether the transcript show/hide toggle button renders in the transport bar. */
+    ShowTranscriptToggle = true;
+    /** Whether the playback-rate menu is shown. */
+    ShowSpeedControl = true;
+    /** Whether the ±skip buttons are shown. */
+    ShowSkipControls = true;
+    /** Whether the volume slider + mute are shown. */
+    ShowVolume = true;
+    /**
+     * Whether the real audio waveform (which doubles as the scrubber) is shown for
+     * audio-only tracks. On by default. When a track supplies {@link MediaTrack.Peaks}
+     * those are rendered directly; otherwise the player decodes the track URL client-side
+     * to extract real peaks, falling back to a plain progress bar if decoding fails.
+     */
+    ShowWaveform = true;
+    /** Number of bars the waveform renders / downsamples to. */
+    WaveformBarCount = DEFAULT_WAVEFORM_BARS;
+    /** Whether the fullscreen button is shown for video. */
+    ShowFullscreen = true;
+    /** Number of seconds the skip buttons jump. */
+    SkipSeconds = 30;
+    /** The playback rates offered in the rate menu. */
+    PlaybackRates = [0.5, 1, 1.25, 1.5, 2];
+    /** The initial playback rate. */
+    InitialRate = 1;
+    /** The initial volume (0..1). */
+    InitialVolume = 1;
+    /**
+     * Where the transcript panel sits relative to the media. Defaults to `'bottom'`
+     * (full width below the player, filling remaining height) which reads better than
+     * the narrower side layout; consumers can opt into `'side'`.
+     */
+    TranscriptPosition = 'bottom';
+    // ---------------------------------------------------------------------------
+    // Outputs — Before* are cancelable (set event.Cancel = true to abort)
+    // ---------------------------------------------------------------------------
+    BeforePlay = new EventEmitter();
+    AfterPlay = new EventEmitter();
+    BeforePause = new EventEmitter();
+    AfterPause = new EventEmitter();
+    BeforeSeek = new EventEmitter();
+    AfterSeek = new EventEmitter();
+    BeforeRateChange = new EventEmitter();
+    AfterRateChange = new EventEmitter();
+    CueActivated = new EventEmitter();
+    CueClicked = new EventEmitter();
+    TimeUpdate = new EventEmitter();
+    DurationChange = new EventEmitter();
+    Ended = new EventEmitter();
+    /** Emits whenever the primary element's {@link MediaPlaybackState} transitions. */
+    StateChanged = new EventEmitter();
+    /** Emits the new visibility (`true` = shown) whenever the transcript is toggled. */
+    TranscriptVisibilityChanged = new EventEmitter();
+    // ---------------------------------------------------------------------------
+    // View references
+    // ---------------------------------------------------------------------------
+    /** The primary media element (the single audio/video, or the first video in a grid). */
+    primaryMedia;
+    // ---------------------------------------------------------------------------
+    // Internal state
+    // ---------------------------------------------------------------------------
+    _currentTimeMs = 0;
+    _durationMs = 0;
+    _isPlaying = false;
+    _playbackRate = 1;
+    _volume = 1;
+    _muted = false;
+    _activeCueIndex = -1;
+    _isFullscreen = false;
+    _isScrubbing = false;
+    _hasError = false;
+    _rateMenuOpen = false;
+    /** Media elements we've already nudged to resolve a real (finite) duration. */
+    _durationForced = new WeakSet();
+    /** True while a force-duration nudge is in flight — suppresses the transient time/position jump. */
+    _suppressTimeUpdate = false;
+    _activeMediaEl = null;
+    _rateInitialized = false;
+    /** Runtime (toggle-driven) transcript visibility. Reset to `true` when a transcript is set. */
+    _transcriptUserVisible = true;
+    /** The high-level playback lifecycle state of the primary element. */
+    _mediaState = 'idle';
+    /**
+     * Whether the buffering spinner is currently visible. Distinct from `_mediaState ===
+     * 'buffering'`: the state flips immediately, but the *visible* spinner is debounced by
+     * {@link BUFFERING_INDICATOR_DELAY_MS} so instant seeks don't flash it.
+     */
+    _bufferingVisible = false;
+    /** Pending timer that promotes a `buffering` state to a visible spinner after the delay. */
+    _bufferingTimer = null;
+    /** Per-track computed/supplied waveform peaks (0..1), keyed by track Id. */
+    _peaksByTrackId = new Map();
+    /** Track Ids whose client-side decode failed (→ fall back to a plain progress bar). */
+    _waveformFailedTrackIds = new Set();
+    /** Track Ids currently being decoded (avoid duplicate in-flight decodes). */
+    _waveformPendingTrackIds = new Set();
+    /** Lazily-created AudioContext used only for client-side peak extraction. */
+    _audioCtx = null;
+    /** Whether the user prefers reduced motion (suppresses the bar draw-in animation). */
+    _prefersReducedMotion = false;
+    // ---------------------------------------------------------------------------
+    // Public getters (imperative read API + template bindings)
+    // ---------------------------------------------------------------------------
+    get CurrentTimeMs() {
+        return this._currentTimeMs;
+    }
+    get DurationMs() {
+        return this._durationMs;
+    }
+    get IsPlaying() {
+        return this._isPlaying;
+    }
+    get PlaybackRate() {
+        return this._playbackRate;
+    }
+    get ActiveCueIndex() {
+        return this._activeCueIndex;
+    }
+    // Template-only convenience getters
+    get Muted() {
+        return this._muted;
+    }
+    get Volume() {
+        return this._volume;
+    }
+    get IsFullscreen() {
+        return this._isFullscreen;
+    }
+    get RateMenuOpen() {
+        return this._rateMenuOpen;
+    }
+    get HasError() {
+        return this._hasError;
+    }
+    /** The current high-level playback lifecycle state of the primary element. */
+    get MediaState() {
+        return this._mediaState;
+    }
+    /** True during the initial source load (shows the "Loading…" stage indicator). */
+    get IsLoading() {
+        return this._mediaState === 'loading';
+    }
+    /**
+     * True while buffering — but reflects the *debounced* visible flag, so an instant seek
+     * that resolves within {@link BUFFERING_INDICATOR_DELAY_MS} never shows the spinner.
+     */
+    get IsBuffering() {
+        return this._bufferingVisible;
+    }
+    /** Whether the stage should show ANY busy indicator (loading or visible buffering). */
+    get ShowBusyIndicator() {
+        return this.IsLoading || this.IsBuffering;
+    }
+    /** The label shown alongside the busy spinner. */
+    get BusyLabel() {
+        return this.IsLoading ? 'Loading…' : 'Buffering…';
+    }
+    /** A short, screen-reader-friendly status phrase reflecting the current state. */
+    get StatusLabel() {
+        switch (this._mediaState) {
+            case 'loading':
+                return 'Loading';
+            case 'buffering':
+                return 'Buffering';
+            case 'playing':
+                return 'Playing';
+            case 'paused':
+                return 'Paused';
+            case 'ready':
+                return 'Ready';
+            case 'ended':
+                return 'Ended';
+            case 'error':
+                return 'Error';
+            default:
+                return 'Idle';
+        }
+    }
+    get HasTracks() {
+        return this._tracks.length > 0;
+    }
+    /** Whether a transcript (one or more cues) is available, regardless of visibility. */
+    get HasTranscript() {
+        return !!this._transcript && this._transcript.length > 0;
+    }
+    /**
+     * Whether the transcript panel should render right now — requires a transcript,
+     * the `ShowTranscript` master switch, AND the runtime toggle to be visible.
+     */
+    get ShowTranscriptPanel() {
+        return resolveTranscriptVisible(this.HasTranscript, this.ShowTranscript, this._transcriptUserVisible);
+    }
+    /** The current runtime visibility of the transcript (toggle-driven). */
+    get TranscriptVisible() {
+        return this._transcriptUserVisible;
+    }
+    /** Whether the transcript show/hide toggle button should render in the transport. */
+    get ShowTranscriptToggleButton() {
+        return resolveTranscriptToggleVisible(this.HasTranscript, this.ShowTranscript, this.ShowTranscriptToggle);
+    }
+    get ScrubFraction() {
+        return this._durationMs > 0 ? this._currentTimeMs / this._durationMs : 0;
+    }
+    get ScrubPercent() {
+        return Math.min(100, Math.max(0, this.ScrubFraction * 100));
+    }
+    get PrefersReducedMotion() {
+        return this._prefersReducedMotion;
+    }
+    /** The active audio track that drives the waveform (the first audio track, if any). */
+    get WaveformTrack() {
+        return this.IsAudioOnly ? this.AudioTracks[0] ?? null : null;
+    }
+    /**
+     * True when the waveform should render as bars — i.e. it's enabled, the active track
+     * is audio, and we have peaks (supplied or successfully decoded) for it. When false
+     * (decode pending/failed, no track), the template shows a plain progress bar instead.
+     */
+    get ShowWaveformBars() {
+        const track = this.WaveformTrack;
+        if (!this.ShowWaveform || !track) {
+            return false;
+        }
+        return this.peaksForTrack(track) !== null;
+    }
+    /**
+     * The normalized `0..1` peaks for the active audio track, or `null` when none are
+     * available yet (still decoding) or decoding failed. Reading this lazily kicks off
+     * client-side extraction when needed — re-renders/seeks never re-decode (cached by Id).
+     */
+    get WaveformPeaks() {
+        const track = this.WaveformTrack;
+        if (!this.ShowWaveform || !track) {
+            return null;
+        }
+        return this.peaksForTrack(track);
+    }
+    /** The played/unplayed split point for the waveform, as a `0..1` fraction. */
+    get WaveformPlayedFraction() {
+        return this.ScrubFraction;
+    }
+    /** The single audio track when this is an audio-only player (drives waveform). */
+    get AudioTracks() {
+        return this._tracks.filter((t) => t.Kind === 'audio');
+    }
+    get VideoTracks() {
+        return this._tracks.filter((t) => t.Kind === 'video');
+    }
+    /** True when the layout is a single audio track with no video. */
+    get IsAudioOnly() {
+        return this.VideoTracks.length === 0 && this.AudioTracks.length > 0;
+    }
+    get IsMultiVideo() {
+        return this.VideoTracks.length > 1;
+    }
+    // ---------------------------------------------------------------------------
+    // Imperative control API
+    // ---------------------------------------------------------------------------
+    /** Begin playback. Honors {@link BeforePlay}. */
+    Play() {
+        const el = this.resolveMediaElement();
+        if (!el) {
+            return;
+        }
+        const evt = { Cancel: false };
+        this.BeforePlay.emit(evt);
+        if (evt.Cancel) {
+            return;
+        }
+        void el.play().catch(() => {
+            /* autoplay/user-gesture rejections are non-fatal */
+        });
+    }
+    /** Pause playback. Honors {@link BeforePause}. */
+    Pause() {
+        const el = this.resolveMediaElement();
+        if (!el) {
+            return;
+        }
+        const evt = { Cancel: false };
+        this.BeforePause.emit(evt);
+        if (evt.Cancel) {
+            return;
+        }
+        el.pause();
+    }
+    /** Toggle play/pause. */
+    TogglePlay() {
+        if (this._isPlaying) {
+            this.Pause();
+        }
+        else {
+            this.Play();
+        }
+    }
+    /** Seek to an absolute position in milliseconds. Honors {@link BeforeSeek}. */
+    SeekToMs(ms) {
+        const el = this.resolveMediaElement();
+        if (!el) {
+            return;
+        }
+        const target = this.clampMs(ms);
+        const evt = { Cancel: false, FromMs: this._currentTimeMs, ToMs: target };
+        this.BeforeSeek.emit(evt);
+        if (evt.Cancel) {
+            return;
+        }
+        el.currentTime = target / 1000;
+        this._currentTimeMs = target;
+        this.AfterSeek.emit(target);
+        this.refreshActiveCue();
+        this.cdr.markForCheck();
+    }
+    /** Skip forward by {@link SkipSeconds}. */
+    SkipForward() {
+        this.SeekToMs(this._currentTimeMs + this.SkipSeconds * 1000);
+    }
+    /** Skip backward by {@link SkipSeconds}. */
+    SkipBackward() {
+        this.SeekToMs(this._currentTimeMs - this.SkipSeconds * 1000);
+    }
+    /** Set the playback rate. Honors {@link BeforeRateChange}. */
+    SetPlaybackRate(rate) {
+        const evt = { Cancel: false, FromRate: this._playbackRate, ToRate: rate };
+        this.BeforeRateChange.emit(evt);
+        if (evt.Cancel) {
+            return;
+        }
+        this._playbackRate = rate;
+        this.applyToAllMedia((el) => (el.playbackRate = rate));
+        this._rateMenuOpen = false;
+        this.AfterRateChange.emit(rate);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Seek to the cue at `index`. If currently playing, playback continues from the
+     * cue's start; if paused, the timeline is repositioned without starting playback.
+     */
+    SeekToCue(index) {
+        const cues = this._transcript;
+        if (!cues || index < 0 || index >= cues.length) {
+            return;
+        }
+        const wasPlaying = this._isPlaying;
+        this.SeekToMs(cues[index].StartMs);
+        if (wasPlaying) {
+            // keep playing — currentTime change above does not pause; ensure we're playing
+            this.Play();
+        }
+        // when paused, we leave it paused (timeline repositioned only)
+    }
+    /** Set the volume (0..1). Unmutes if volume > 0. */
+    SetVolume(v) {
+        this._volume = Math.min(1, Math.max(0, v));
+        this._muted = this._volume === 0;
+        this.applyToAllMedia((el) => {
+            el.volume = this._volume;
+            el.muted = this._muted;
+        });
+        this.cdr.markForCheck();
+    }
+    /** Toggle mute. */
+    ToggleMute() {
+        this._muted = !this._muted;
+        this.applyToAllMedia((el) => (el.muted = this._muted));
+        this.cdr.markForCheck();
+    }
+    /** Request fullscreen for the player surface (video). */
+    EnterFullscreen() {
+        const target = this.host.nativeElement.querySelector('.mj-media-stage');
+        if (target?.requestFullscreen) {
+            void target.requestFullscreen().catch(() => undefined);
+        }
+    }
+    /** Exit fullscreen. */
+    ExitFullscreen() {
+        if (document.fullscreenElement && document.exitFullscreen) {
+            void document.exitFullscreen().catch(() => undefined);
+        }
+    }
+    /** Toggle fullscreen. */
+    ToggleFullscreen() {
+        if (this._isFullscreen) {
+            this.ExitFullscreen();
+        }
+        else {
+            this.EnterFullscreen();
+        }
+    }
+    /**
+     * Show/hide the transcript panel (pure component state — nothing is persisted).
+     * Emits {@link TranscriptVisibilityChanged} with the new visibility.
+     */
+    ToggleTranscript() {
+        this._transcriptUserVisible = !this._transcriptUserVisible;
+        this.TranscriptVisibilityChanged.emit(this._transcriptUserVisible);
+        this.cdr.markForCheck();
+    }
+    // ---------------------------------------------------------------------------
+    // Media element event handlers (bound in template)
+    // ---------------------------------------------------------------------------
+    /** Initial source fetch began — drives the "Loading…" indicator. */
+    OnMediaLoadStart(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('loadstart', el);
+    }
+    /** Wire-up when a media element fires its first event — caches the primary element & applies initial state. */
+    OnMediaLoadedMetadata(el) {
+        this._hasError = false;
+        if (!this._activeMediaEl) {
+            this._activeMediaEl = el;
+        }
+        this.initializeMediaElement(el);
+        const dur = el.duration;
+        if (isFinite(dur) && dur > 0) {
+            this._durationMs = Math.round(dur * 1000);
+            this.DurationChange.emit(this._durationMs);
+        }
+        else {
+            // MediaRecorder/streamed webm files often carry no duration in their header, so the
+            // element reports `Infinity` — which makes fraction-based seeking compute 0 (every
+            // timeline click snaps to the start). Nudge the element once to resolve a real duration;
+            // this also builds its internal seek index. The resulting `durationchange` is handled in
+            // OnMediaDurationChange.
+            this.forceDurationResolution(el);
+        }
+        if (this.StartAtMs != null && el === this._activeMediaEl) {
+            el.currentTime = this.clampMs(this.StartAtMs) / 1000;
+        }
+        if (this.Autoplay && el === this._activeMediaEl) {
+            this.Play();
+        }
+        this.applyMediaEvent('loadedmetadata', el);
+        this.cdr.markForCheck();
+    }
+    /** Enough data buffered to begin playback — clears loading/buffering. */
+    OnMediaCanPlay(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('canplay', el);
+    }
+    /** Ran out of buffered data mid-playback — enters buffering. */
+    OnMediaWaiting(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('waiting', el);
+    }
+    /** Seek began (skip / scrub into un-buffered territory) — show buffering during the seek. */
+    OnMediaSeeking(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('seeking', el);
+    }
+    /** Seek completed — clears buffering once the element has playable data. */
+    OnMediaSeeked(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('seeked', el);
+    }
+    /** Element is actively playing — clears loading + buffering. */
+    OnMediaPlaying(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('playing', el);
+    }
+    /** Conservative buffering signals — only buffer when actively trying to play. */
+    OnMediaStalled(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('stalled', el);
+    }
+    OnMediaSuspend(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('suspend', el);
+    }
+    /** Track switch / source cleared — resets the lifecycle. */
+    OnMediaEmptied(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this.applyMediaEvent('emptied', el);
+    }
+    OnMediaTimeUpdate(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        if (this._suppressTimeUpdate) {
+            // Ignore the transient end-seek the duration nudge produces.
+            return;
+        }
+        this._currentTimeMs = Math.round(el.currentTime * 1000);
+        this.TimeUpdate.emit(this._currentTimeMs);
+        this.refreshActiveCue();
+        this.cdr.markForCheck();
+    }
+    OnMediaDurationChange(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        if (isFinite(el.duration)) {
+            this._durationMs = Math.round(el.duration * 1000);
+            this.DurationChange.emit(this._durationMs);
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Forces a header-less media element (e.g. a MediaRecorder webm that reports `Infinity`
+     * duration) to resolve a real, finite duration by briefly seeking far past the end. The browser
+     * clamps to the true end, fires `durationchange` with the real value (picked up by
+     * {@link OnMediaDurationChange}) and builds its seek index — after which fraction-based seeking
+     * works. We then restore the prior position and suppress the transient time jump. Runs at most
+     * once per element.
+     */
+    forceDurationResolution(el) {
+        if (this._durationForced.has(el)) {
+            return;
+        }
+        this._durationForced.add(el);
+        const restoreSeconds = el.currentTime || 0;
+        this._suppressTimeUpdate = true;
+        const onResolved = () => {
+            if (!isFinite(el.duration)) {
+                return; // not the real value yet — wait for the next durationchange
+            }
+            el.removeEventListener('durationchange', onResolved);
+            this._suppressTimeUpdate = false;
+            try {
+                el.currentTime = restoreSeconds;
+            }
+            catch {
+                /* best effort — restoring position is non-critical */
+            }
+        };
+        el.addEventListener('durationchange', onResolved);
+        try {
+            el.currentTime = 1e101;
+        }
+        catch {
+            el.removeEventListener('durationchange', onResolved);
+            this._suppressTimeUpdate = false;
+        }
+    }
+    OnMediaPlay(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this._isPlaying = true;
+        this.applyMediaEvent('play', el);
+        this.AfterPlay.emit();
+        this.cdr.markForCheck();
+    }
+    OnMediaPause(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this._isPlaying = false;
+        this.applyMediaEvent('pause', el);
+        this.AfterPause.emit();
+        this.cdr.markForCheck();
+    }
+    OnMediaEnded(el) {
+        if (el !== this.resolveMediaElement()) {
+            return;
+        }
+        this._isPlaying = false;
+        this.applyMediaEvent('ended', el);
+        this.Ended.emit();
+        this.cdr.markForCheck();
+    }
+    OnMediaError(el) {
+        this._hasError = true;
+        this.applyMediaEvent('error', el ?? this.resolveMediaElement());
+        this.cdr.markForCheck();
+    }
+    // ---------------------------------------------------------------------------
+    // Playback state machine (driven by the pure reducer + buffering debounce)
+    // ---------------------------------------------------------------------------
+    /**
+     * Runs the pure {@link nextPlaybackState} reducer for a native media event, commits the
+     * resulting state, manages the debounced buffering spinner, and emits {@link StateChanged}
+     * on transitions. The single funnel for all media-event → state changes.
+     */
+    applyMediaEvent(event, el) {
+        const ctx = {
+            IsPlaying: this._isPlaying,
+            ReadyState: el?.readyState ?? 0,
+            Ended: el?.ended ?? false,
+        };
+        const next = nextPlaybackState(event, this._mediaState, ctx);
+        this.setMediaState(next);
+    }
+    /** Commits a new state, syncs the buffering spinner, and emits on change. */
+    setMediaState(next) {
+        this.syncBufferingIndicator(next);
+        if (next !== this._mediaState) {
+            this._mediaState = next;
+            this.StateChanged.emit(next);
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Keeps the visible buffering spinner in sync with the target state. `loading` shows
+     * immediately (no debounce); `buffering` is debounced so instant seeks don't flash it;
+     * any non-busy state clears the spinner and cancels a pending show.
+     */
+    syncBufferingIndicator(next) {
+        if (next === 'buffering') {
+            if (this._bufferingVisible || this._bufferingTimer) {
+                return; // already shown or scheduled
+            }
+            this._bufferingTimer = setTimeout(() => {
+                this._bufferingTimer = null;
+                if (this._mediaState === 'buffering') {
+                    this._bufferingVisible = true;
+                    this.cdr.markForCheck();
+                }
+            }, BUFFERING_INDICATOR_DELAY_MS);
+            return;
+        }
+        // Any non-buffering target clears the pending/visible buffering spinner.
+        this.clearBufferingTimer();
+        if (this._bufferingVisible) {
+            this._bufferingVisible = false;
+        }
+    }
+    clearBufferingTimer() {
+        if (this._bufferingTimer) {
+            clearTimeout(this._bufferingTimer);
+            this._bufferingTimer = null;
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Scrubber (click + drag) — pointer-based
+    // ---------------------------------------------------------------------------
+    OnScrubPointerDown(event, trackEl) {
+        event.preventDefault();
+        this._isScrubbing = true;
+        event.target.setPointerCapture?.(event.pointerId);
+        this.applyScrubFromPointer(event, trackEl);
+    }
+    OnScrubPointerMove(event, trackEl) {
+        if (!this._isScrubbing) {
+            return;
+        }
+        this.applyScrubFromPointer(event, trackEl);
+    }
+    OnScrubPointerUp(event) {
+        if (!this._isScrubbing) {
+            return;
+        }
+        this._isScrubbing = false;
+        event.target.releasePointerCapture?.(event.pointerId);
+    }
+    // The waveform IS a scrubber: reuse the exact same pointer/keyboard seek logic.
+    OnWaveformPointerDown(event, trackEl) {
+        this.OnScrubPointerDown(event, trackEl);
+    }
+    OnWaveformPointerMove(event, trackEl) {
+        this.OnScrubPointerMove(event, trackEl);
+    }
+    OnWaveformPointerUp(event) {
+        this.OnScrubPointerUp(event);
+    }
+    /** Keyboard support for the scrubber (role="slider"). */
+    OnScrubKeyDown(event) {
+        let handled = true;
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.SeekToMs(this._currentTimeMs - 5000);
+                break;
+            case 'ArrowRight':
+                this.SeekToMs(this._currentTimeMs + 5000);
+                break;
+            case 'Home':
+                this.SeekToMs(0);
+                break;
+            case 'End':
+                this.SeekToMs(this._durationMs);
+                break;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Transcript cue interaction
+    // ---------------------------------------------------------------------------
+    OnCueClicked(index) {
+        const cues = this._transcript;
+        if (!cues || index < 0 || index >= cues.length) {
+            return;
+        }
+        this.CueClicked.emit({ Cue: cues[index], Index: index });
+        this.SeekToCue(index);
+    }
+    OnCueKeyDown(event, index) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.OnCueClicked(index);
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // Rate menu
+    // ---------------------------------------------------------------------------
+    ToggleRateMenu() {
+        this._rateMenuOpen = !this._rateMenuOpen;
+        this.cdr.markForCheck();
+    }
+    // ---------------------------------------------------------------------------
+    // Volume slider input
+    // ---------------------------------------------------------------------------
+    OnVolumeInput(event) {
+        const value = parseFloat(event.target.value);
+        this.SetVolume(value);
+    }
+    // ---------------------------------------------------------------------------
+    // Keyboard shortcuts (host-level, when the player has focus)
+    // ---------------------------------------------------------------------------
+    OnHostKeyDown(event) {
+        // ignore typing in form controls (e.g. the volume range / scrubber handle has its own handler)
+        const target = event.target;
+        if (target?.tagName === 'INPUT' || target?.getAttribute('role') === 'slider') {
+            return;
+        }
+        switch (event.key) {
+            case ' ':
+                event.preventDefault();
+                this.TogglePlay();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.SeekToMs(this._currentTimeMs - 5000);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.SeekToMs(this._currentTimeMs + 5000);
+                break;
+            case 'j':
+            case 'J':
+                event.preventDefault();
+                this.SeekToMs(this._currentTimeMs - 10000);
+                break;
+            case 'l':
+            case 'L':
+                event.preventDefault();
+                this.SeekToMs(this._currentTimeMs + 10000);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.SetVolume(this._volume + 0.05);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.SetVolume(this._volume - 0.05);
+                break;
+            case 'm':
+            case 'M':
+                event.preventDefault();
+                this.ToggleMute();
+                break;
+            case 'f':
+            case 'F':
+                if (this.ShowFullscreen && this.VideoTracks.length > 0) {
+                    event.preventDefault();
+                    this.ToggleFullscreen();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    OnFullscreenChange() {
+        this._isFullscreen = !!document.fullscreenElement;
+        this.cdr.markForCheck();
+    }
+    // ---------------------------------------------------------------------------
+    // Formatting helpers (template)
+    // ---------------------------------------------------------------------------
+    /** Formats a millisecond value as `mm:ss` (or `h:mm:ss` for long media). */
+    FormatTime(ms) {
+        if (!isFinite(ms) || ms < 0) {
+            ms = 0;
+        }
+        const totalSeconds = Math.floor(ms / 1000);
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+        const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes);
+        const ss = String(seconds).padStart(2, '0');
+        return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}`;
+    }
+    /** Stable color for a speaker label (deterministic hue from the label string). */
+    SpeakerColor(label) {
+        if (!label) {
+            return 'var(--mj-text-secondary)';
+        }
+        let hash = 0;
+        for (let i = 0; i < label.length; i++) {
+            hash = (hash * 31 + label.charCodeAt(i)) & 0xffffffff;
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 55%, 45%)`;
+    }
+    TrackById(_index, track) {
+        return track.Id;
+    }
+    CueTrackById(_index, cue) {
+        return cue.Id;
+    }
+    // ---------------------------------------------------------------------------
+    // Internal helpers
+    // ---------------------------------------------------------------------------
+    /**
+     * The element that owns the master timeline. In a single audio track or a single
+     * video, that's the primary element. For one-video-plus-audio, the video carries
+     * playback (audio track is muted/secondary). For multi-video, the first video leads.
+     */
+    resolveMediaElement() {
+        if (this._activeMediaEl) {
+            return this._activeMediaEl;
+        }
+        return this.primaryMedia?.nativeElement ?? null;
+    }
+    initializeMediaElement(el) {
+        if (!this._rateInitialized) {
+            this._playbackRate = this.InitialRate;
+            this._volume = this.InitialVolume;
+            this._rateInitialized = true;
+        }
+        el.playbackRate = this._playbackRate;
+        el.volume = this._volume;
+        el.muted = this._muted;
+    }
+    applyToAllMedia(fn) {
+        const els = this.host.nativeElement.querySelectorAll('audio, video');
+        els.forEach((el) => fn(el));
+    }
+    applyScrubFromPointer(event, trackEl) {
+        const rect = trackEl.getBoundingClientRect();
+        if (rect.width <= 0) {
+            return;
+        }
+        const fraction = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+        this.SeekToMs(fraction * this._durationMs);
+    }
+    refreshActiveCue() {
+        const newIndex = computeActiveCueIndex(this._currentTimeMs, this._transcript);
+        if (newIndex !== this._activeCueIndex) {
+            this._activeCueIndex = newIndex;
+            if (newIndex >= 0 && this._transcript) {
+                this.CueActivated.emit({ Cue: this._transcript[newIndex], Index: newIndex });
+            }
+        }
+    }
+    clampMs(ms) {
+        if (ms < 0) {
+            return 0;
+        }
+        if (this._durationMs > 0 && ms > this._durationMs) {
+            return this._durationMs;
+        }
+        return ms;
+    }
+    resetPlaybackState() {
+        this._currentTimeMs = 0;
+        this._durationMs = 0;
+        this._isPlaying = false;
+        this._activeCueIndex = -1;
+        this._hasError = false;
+        this._rateInitialized = false;
+        this.clearBufferingTimer();
+        this._bufferingVisible = false;
+        this.setMediaState(this._tracks.length > 0 ? 'loading' : 'idle');
+    }
+    // ---------------------------------------------------------------------------
+    // Waveform peak extraction (client-side, best-effort, cached per track Id)
+    // ---------------------------------------------------------------------------
+    /**
+     * Resolves peaks for a track: supplied {@link MediaTrack.Peaks} win (rendered as-is,
+     * no decode); otherwise returns any cached/decoded peaks, kicking off a best-effort
+     * client-side decode on first miss. Returns `null` while decoding or after a failure.
+     */
+    peaksForTrack(track) {
+        if (track.Peaks && track.Peaks.length > 0) {
+            return track.Peaks;
+        }
+        const cached = this._peaksByTrackId.get(track.Id);
+        if (cached) {
+            return cached;
+        }
+        if (this._waveformFailedTrackIds.has(track.Id)) {
+            return null;
+        }
+        void this.extractPeaks(track);
+        return null;
+    }
+    /** Kicks off client-side extraction for every audio track that still needs it. */
+    ensureWaveforms() {
+        if (!this.ShowWaveform) {
+            return;
+        }
+        const track = this.IsAudioOnly ? this.AudioTracks[0] : null;
+        if (track) {
+            // Reading via peaksForTrack triggers a decode when needed (and is cache-safe).
+            this.peaksForTrack(track);
+        }
+    }
+    /**
+     * Best-effort: fetch → arrayBuffer → decodeAudioData → downsample channel 0 → cache.
+     * Never throws into the view; on any failure marks the track as failed so the template
+     * falls back to a plain progress bar (not the old synthetic bars).
+     */
+    async extractPeaks(track) {
+        if (this._waveformPendingTrackIds.has(track.Id)) {
+            return;
+        }
+        this._waveformPendingTrackIds.add(track.Id);
+        try {
+            const ctx = this.resolveAudioContext();
+            if (!ctx) {
+                this.markWaveformFailed(track.Id);
+                return;
+            }
+            const response = await fetch(track.Url);
+            if (!response.ok) {
+                this.markWaveformFailed(track.Id);
+                return;
+            }
+            const arrayBuffer = await response.arrayBuffer();
+            const audioBuffer = await ctx.decodeAudioData(arrayBuffer.slice(0));
+            const channel = audioBuffer.getChannelData(0);
+            const peaks = downsamplePeaks(channel, this.WaveformBarCount, 'max-abs');
+            this._peaksByTrackId.set(track.Id, peaks);
+            this.cdr.markForCheck();
+        }
+        catch {
+            // CORS, unsupported codec, decode error → graceful fallback (no throw).
+            this.markWaveformFailed(track.Id);
+        }
+        finally {
+            this._waveformPendingTrackIds.delete(track.Id);
+        }
+    }
+    markWaveformFailed(trackId) {
+        this._waveformFailedTrackIds.add(trackId);
+        this.cdr.markForCheck();
+    }
+    /** Lazily creates a single AudioContext used only for offline peak extraction. */
+    resolveAudioContext() {
+        if (this._audioCtx) {
+            return this._audioCtx;
+        }
+        const Ctor = typeof window !== 'undefined'
+            ? window.AudioContext ?? window.webkitAudioContext
+            : undefined;
+        if (!Ctor) {
+            return null;
+        }
+        try {
+            this._audioCtx = new Ctor();
+            return this._audioCtx;
+        }
+        catch {
+            return null;
+        }
+    }
+    detectReducedMotion() {
+        try {
+            return typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        }
+        catch {
+            return false;
+        }
+    }
+    ngOnDestroy() {
+        this.clearBufferingTimer();
+        // object URLs are owned by the wrapper that created them; close our decode context.
+        if (this._audioCtx) {
+            void this._audioCtx.close().catch(() => undefined);
+            this._audioCtx = null;
+        }
+    }
+    static ɵfac = function MJMediaPlayerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJMediaPlayerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJMediaPlayerComponent, selectors: [["mj-media-player"]], viewQuery: function MJMediaPlayerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.primaryMedia = _t.first);
+        } }, hostBindings: function MJMediaPlayerComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function MJMediaPlayerComponent_keydown_HostBindingHandler($event) { return ctx.OnHostKeyDown($event); })("fullscreenchange", function MJMediaPlayerComponent_fullscreenchange_HostBindingHandler() { return ctx.OnFullscreenChange(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Tracks: "Tracks", Transcript: "Transcript", Autoplay: "Autoplay", StartAtMs: "StartAtMs", ShowTranscript: "ShowTranscript", ShowTranscriptToggle: "ShowTranscriptToggle", ShowSpeedControl: "ShowSpeedControl", ShowSkipControls: "ShowSkipControls", ShowVolume: "ShowVolume", ShowWaveform: "ShowWaveform", WaveformBarCount: "WaveformBarCount", ShowFullscreen: "ShowFullscreen", SkipSeconds: "SkipSeconds", PlaybackRates: "PlaybackRates", InitialRate: "InitialRate", InitialVolume: "InitialVolume", TranscriptPosition: "TranscriptPosition" }, outputs: { BeforePlay: "BeforePlay", AfterPlay: "AfterPlay", BeforePause: "BeforePause", AfterPause: "AfterPause", BeforeSeek: "BeforeSeek", AfterSeek: "AfterSeek", BeforeRateChange: "BeforeRateChange", AfterRateChange: "AfterRateChange", CueActivated: "CueActivated", CueClicked: "CueClicked", TimeUpdate: "TimeUpdate", DurationChange: "DurationChange", Ended: "Ended", StateChanged: "StateChanged", TranscriptVisibilityChanged: "TranscriptVisibilityChanged" }, decls: 3, vars: 9, consts: [["scrubTrack", ""], ["primaryMedia", ""], ["waveTrack", ""], ["tabindex", "0", "role", "group", "aria-label", "Media player", 1, "mj-media-player"], ["role", "status", 1, "mj-media-empty"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-play", "mj-media-empty__icon"], [1, "mj-media-empty__text"], [1, "mj-media-main"], [1, "mj-media-stage"], ["role", "alert", 1, "mj-media-error"], ["role", "status", "aria-hidden", "true", 1, "mj-media-busy", 3, "mj-media-busy--static"], [1, "mj-media-video-grid", 3, "mj-media-video-grid--multi"], [1, "mj-media-transport"], ["role", "status", "aria-live", "polite", 1, "mj-media-status"], ["aria-hidden", "true", 1, "mj-media-status__dot"], [1, "mj-media-status__text"], [1, "mj-media-scrubber-row"], [1, "mj-media-time"], ["role", "slider", "tabindex", "0", "aria-label", "Seek", 1, "mj-media-scrubber", 3, "pointerdown", "pointermove", "pointerup", "pointercancel", "keydown"], [1, "mj-media-scrubber__rail"], [1, "mj-media-scrubber__fill"], [1, "mj-media-scrubber__handle"], [1, "mj-media-time", "mj-media-time--total"], [1, "mj-media-controls"], [1, "mj-media-controls__left"], ["type", "button", 1, "mj-media-btn", 3, "title"], ["type", "button", 1, "mj-media-btn", "mj-media-btn--primary", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid"], [1, "mj-media-controls__right"], [1, "mj-media-volume"], [1, "mj-media-rate"], ["type", "button", 1, "mj-media-btn", 3, "mj-media-btn--active", "title"], ["role", "list", "aria-label", "Transcript", 1, "mj-media-transcript"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["role", "status", "aria-hidden", "true", 1, "mj-media-busy"], [1, "mj-media-busy__spinner"], [1, "mj-media-busy__label"], ["role", "slider", "tabindex", "0", "aria-label", "Seek", 1, "mj-media-waveform", 3, "mj-media-waveform--static"], ["role", "slider", "tabindex", "0", "aria-label", "Seek", 1, "mj-media-waveform-fallback"], ["aria-hidden", "true", 1, "mj-media-audio-art"], ["preload", "metadata", 1, "mj-media-audio", 3, "src"], ["preload", "metadata", 1, "mj-media-audio", 3, "loadstart", "loadedmetadata", "canplay", "canplaythrough", "waiting", "seeking", "seeked", "playing", "stalled", "suspend", "emptied", "timeupdate", "durationchange", "play", "pause", "ended", "error", "src"], ["role", "slider", "tabindex", "0", "aria-label", "Seek", 1, "mj-media-waveform", 3, "pointerdown", "pointermove", "pointerup", "pointercancel", "keydown"], [1, "mj-media-waveform__bar", 3, "mj-media-waveform__bar--played", "height"], [1, "mj-media-waveform__progress"], [1, "mj-media-waveform__bar"], ["role", "slider", "tabindex", "0", "aria-label", "Seek", 1, "mj-media-waveform-fallback", 3, "pointerdown", "pointermove", "pointerup", "pointercancel", "keydown"], [1, "mj-media-waveform-fallback__rail"], [1, "mj-media-waveform-fallback__fill"], [1, "fa-solid", "fa-music"], [1, "mj-media-video-grid"], [1, "mj-media-video-cell"], [1, "mj-media-video-cell__label"], ["playsinline", "", "preload", "metadata", 1, "mj-media-video", 3, "src", "poster"], ["playsinline", "", "preload", "metadata", "muted", "", 1, "mj-media-video", 3, "src", "poster"], ["playsinline", "", "preload", "metadata", 1, "mj-media-video", 3, "loadstart", "loadedmetadata", "canplay", "canplaythrough", "waiting", "seeking", "seeked", "playing", "stalled", "suspend", "emptied", "timeupdate", "durationchange", "play", "pause", "ended", "error", "src", "poster"], ["type", "button", 1, "mj-media-btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-left"], [1, "mj-media-btn__skip-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-rotate-right"], ["type", "range", "min", "0", "max", "1", "step", "0.05", "aria-label", "Volume", 1, "mj-media-volume__slider", 3, "input", "value"], ["type", "button", "aria-haspopup", "true", "aria-label", "Playback speed", "title", "Playback speed", 1, "mj-media-btn", "mj-media-rate__toggle", 3, "click"], ["role", "menu", 1, "mj-media-rate__menu"], ["role", "none"], ["type", "button", "role", "menuitemradio", 1, "mj-media-rate__item", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", "role", "listitem", 1, "mj-media-cue", 3, "mj-media-cue--active"], ["type", "button", "role", "listitem", 1, "mj-media-cue", 3, "click", "keydown"], [1, "mj-media-cue__time"], [1, "mj-media-cue__body"], [1, "mj-media-cue__speaker", 3, "color"], [1, "mj-media-cue__text"], [1, "mj-media-cue__speaker"]], template: function MJMediaPlayerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 3);
+            i0.ɵɵconditionalCreate(1, MJMediaPlayerComponent_Conditional_1_Template, 4, 0, "div", 4)(2, MJMediaPlayerComponent_Conditional_2_Template, 33, 30);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵclassProp("mj-media-player--bottom-transcript", ctx.TranscriptPosition === "bottom")("mj-media-player--has-transcript", ctx.ShowTranscriptPanel)("mj-media-player--audio", ctx.IsAudioOnly)("mj-media-player--video", ctx.VideoTracks.length > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.HasTracks ? 1 : 2);
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  color: var(--mj-text-primary);\n}\n\n.mj-media-player[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  gap: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  overflow: hidden;\n  outline: none;\n}\n\n.mj-media-player[_ngcontent-%COMP%]:focus-visible {\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n\n\n.mj-media-player--has-transcript[_ngcontent-%COMP%]:not(.mj-media-player--bottom-transcript) {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.mj-media-main[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n\n\n\n\n\n.mj-media-player--audio.mj-media-player--bottom-transcript[_ngcontent-%COMP%]   .mj-media-main[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n\n\n\n.mj-media-empty[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  color: var(--mj-text-muted);\n}\n\n.mj-media-empty__icon[_ngcontent-%COMP%] {\n  font-size: 2rem;\n}\n\n.mj-media-error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n}\n\n\n\n\n.mj-media-stage[_ngcontent-%COMP%] {\n  position: relative;\n  background: var(--mj-bg-surface-sunken);\n  min-height: 80px;\n}\n\n\n\n.mj-media-player--video[_ngcontent-%COMP%]   .mj-media-stage[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n.mj-media-audio[_ngcontent-%COMP%] {\n  display: none;\n}\n\n.mj-media-audio-art[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n  font-size: 2.5rem;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.mj-media-waveform[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  width: 100%;\n  box-sizing: border-box;\n  height: 96px;\n  padding: 0.75rem 1rem;\n  overflow: hidden;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.mj-media-waveform[_ngcontent-%COMP%]:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform__bar[_ngcontent-%COMP%] {\n  \n\n\n\n\n\n\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 2px;\n  align-self: center;\n  background: var(--mj-border-strong);\n  border-radius: 1px;\n  pointer-events: none;\n  transform-origin: center;\n  transition: background-color 0.1s ease, transform 0.18s ease;\n}\n\n.mj-media-waveform__bar--played[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n\n\n\n.mj-media-waveform__progress[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0.5rem;\n  bottom: 0.5rem;\n  width: 2px;\n  margin-left: -1px;\n  background: var(--mj-brand-primary);\n  opacity: 0.85;\n  pointer-events: none;\n}\n\n\n\n.mj-media-waveform-fallback[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 96px;\n  padding: 0 1rem;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.mj-media-waveform-fallback[_ngcontent-%COMP%]:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform-fallback__rail[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1 1 auto;\n  height: 5px;\n  background: var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 999px);\n  overflow: hidden;\n}\n\n.mj-media-waveform-fallback__fill[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0 auto 0 0;\n  background: var(--mj-brand-primary);\n}\n\n\n\n.mj-media-video-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 4px;\n  flex: 1 1 auto;\n  min-height: 0;\n  width: 100%;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.mj-media-video-grid--multi[_ngcontent-%COMP%] {\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n}\n\n.mj-media-video-cell[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  min-height: 0;\n}\n\n.mj-media-video-cell__label[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.5rem;\n  z-index: 1;\n  padding: 0.125rem 0.5rem;\n  font-size: 0.75rem;\n  border-radius: var(--mj-radius-sm, 4px);\n  color: var(--mj-text-inverse);\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.mj-media-video[_ngcontent-%COMP%] {\n  width: 100%;\n  height: auto;\n  display: block;\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n.mj-media-video-grid[_ngcontent-%COMP%]:not(.mj-media-video-grid--multi)   .mj-media-video[_ngcontent-%COMP%] {\n  height: 100%;\n  min-height: 0;\n  object-fit: contain;\n}\n\n\n\n\n.mj-media-busy[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n  pointer-events: none;\n  color: var(--mj-text-inverse);\n  background: color-mix(in srgb, var(--mj-bg-overlay) 55%, transparent);\n}\n\n.mj-media-busy__spinner[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: 3px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  border-top-color: var(--mj-text-inverse);\n  animation: _ngcontent-%COMP%_mj-media-spin 0.8s linear infinite;\n}\n\n.mj-media-busy__label[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n\n.mj-media-busy--static[_ngcontent-%COMP%]   .mj-media-busy__spinner[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.4s ease-in-out infinite;\n  border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-busy-pulse {\n  0%,\n  100% {\n    opacity: 0.45;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n\n\n\n.mj-media-status[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  align-self: flex-start;\n  min-height: 1rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n}\n\n.mj-media-status--busy[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.mj-media-status__dot[_ngcontent-%COMP%] {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.2s ease-in-out infinite;\n}\n\n\n\n\n.mj-media-transport[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.625rem 0.75rem 0.75rem;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.mj-media-scrubber-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n\n.mj-media-time[_ngcontent-%COMP%] {\n  font-variant-numeric: tabular-nums;\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n  min-width: 3.25rem;\n}\n\n.mj-media-time--total[_ngcontent-%COMP%] {\n  text-align: right;\n}\n\n.mj-media-scrubber[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1 1 auto;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.mj-media-scrubber[_ngcontent-%COMP%]:focus-visible {\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-full, 999px);\n}\n\n.mj-media-scrubber__rail[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1 1 auto;\n  height: 5px;\n  background: var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 999px);\n  overflow: hidden;\n}\n\n.mj-media-scrubber__fill[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0 auto 0 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-media-scrubber__handle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  width: 13px;\n  height: 13px;\n  margin-left: -6.5px;\n  transform: translateY(-50%);\n  background: var(--mj-brand-primary);\n  border: 2px solid var(--mj-bg-surface);\n  border-radius: 50%;\n  pointer-events: none;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mj-media-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n.mj-media-controls__left[_ngcontent-%COMP%], \n.mj-media-controls__right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n\n\n.mj-media-btn[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  min-width: 32px;\n  height: 32px;\n  padding: 0 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--mj-radius-sm, 4px);\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease;\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:active {\n  background: var(--mj-bg-surface-active);\n}\n\n.mj-media-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  min-width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.mj-media-btn--primary[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary-active);\n}\n\n\n\n.mj-media-btn--active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.mj-media-btn--active[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n.mj-media-btn__skip-label[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n  font-variant-numeric: tabular-nums;\n}\n\n\n\n.mj-media-volume[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.mj-media-volume__slider[_ngcontent-%COMP%] {\n  width: 80px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.mj-media-volume__slider[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-full, 999px);\n}\n\n\n\n.mj-media-rate[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.mj-media-rate__toggle[_ngcontent-%COMP%] {\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.mj-media-rate__menu[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  right: 0;\n  z-index: 10;\n  margin: 0;\n  padding: 0.25rem;\n  list-style: none;\n  min-width: 4rem;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  text-align: left;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.8125rem;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-radius: var(--mj-radius-sm, 4px);\n  cursor: pointer;\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-rate__item[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-rate__item--active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n\n\n\n.mj-media-transcript[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-subtle);\n  max-height: 480px;\n  width: 340px;\n  flex: 0 0 auto;\n  padding: 0.5rem;\n}\n\n\n\n\n\n\n\n.mj-media-player--bottom-transcript[_ngcontent-%COMP%]   .mj-media-transcript[_ngcontent-%COMP%] {\n  width: auto;\n  border-left: none;\n  border-top: 1px solid var(--mj-border-subtle);\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: none;\n}\n\n.mj-media-cue[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.625rem;\n  align-items: flex-start;\n  width: 100%;\n  text-align: left;\n  padding: 0.5rem 0.625rem;\n  background: transparent;\n  border: none;\n  border-left: 3px solid transparent;\n  border-radius: var(--mj-radius-sm, 4px);\n  cursor: pointer;\n  color: var(--mj-text-primary);\n  font: inherit;\n  transition: background-color 0.12s ease;\n}\n\n.mj-media-cue[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-cue[_ngcontent-%COMP%]:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-cue--active[_ngcontent-%COMP%] {\n  border-left-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-media-cue__time[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  font-variant-numeric: tabular-nums;\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n  padding-top: 0.125rem;\n}\n\n.mj-media-cue__body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n.mj-media-cue__speaker[_ngcontent-%COMP%] {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.mj-media-cue__text[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n\n\n\n\n\n.mj-media-waveform[_ngcontent-%COMP%]:not(.mj-media-waveform--static)   .mj-media-waveform__bar[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_mj-media-bar-in 0.25s ease both;\n}\n\n@keyframes _ngcontent-%COMP%_mj-media-bar-in {\n  from {\n    transform: scaleY(0.15);\n    opacity: 0.4;\n  }\n  to {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mj-media-btn[_ngcontent-%COMP%], \n   .mj-media-cue[_ngcontent-%COMP%], \n   .mj-media-waveform__bar[_ngcontent-%COMP%], \n   .mj-media-scrubber__fill[_ngcontent-%COMP%] {\n    transition: none;\n    animation: none;\n  }\n\n  \n\n  .mj-media-busy__spinner[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_mj-media-busy-pulse 1.4s ease-in-out infinite;\n    border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  }\n\n  .mj-media-status__dot[_ngcontent-%COMP%] {\n    animation: none;\n  }\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJMediaPlayerComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-media-player', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"mj-media-player\"\n  [class.mj-media-player--bottom-transcript]=\"TranscriptPosition === 'bottom'\"\n  [class.mj-media-player--has-transcript]=\"ShowTranscriptPanel\"\n  [class.mj-media-player--audio]=\"IsAudioOnly\"\n  [class.mj-media-player--video]=\"VideoTracks.length > 0\"\n  tabindex=\"0\"\n  role=\"group\"\n  aria-label=\"Media player\"\n>\n  @if (!HasTracks) {\n    <!-- Empty / no-track state -->\n    <div class=\"mj-media-empty\" role=\"status\">\n      <i class=\"fa-solid fa-circle-play mj-media-empty__icon\" aria-hidden=\"true\"></i>\n      <span class=\"mj-media-empty__text\">No media to play.</span>\n    </div>\n  } @else {\n    <div class=\"mj-media-main\">\n      <!-- Media stage -->\n      <div class=\"mj-media-stage\">\n        @if (HasError) {\n          <div class=\"mj-media-error\" role=\"alert\">\n            <i class=\"fa-solid fa-triangle-exclamation\" aria-hidden=\"true\"></i>\n            <span>This media could not be played.</span>\n          </div>\n        }\n\n        <!-- Loading / buffering overlay (primary element only). -->\n        @if (ShowBusyIndicator && !HasError) {\n          <div\n            class=\"mj-media-busy\"\n            [class.mj-media-busy--static]=\"PrefersReducedMotion\"\n            role=\"status\"\n            aria-hidden=\"true\"\n          >\n            <span class=\"mj-media-busy__spinner\"></span>\n            <span class=\"mj-media-busy__label\">{{ BusyLabel }}</span>\n          </div>\n        }\n\n        @if (IsAudioOnly) {\n          <!-- Single audio track: hidden <audio> + optional waveform -->\n          @for (track of AudioTracks; track TrackById($index, track); let first = $first) {\n            @if (first) {\n              <audio\n                #primaryMedia\n                class=\"mj-media-audio\"\n                [src]=\"track.Url\"\n                preload=\"metadata\"\n                (loadstart)=\"OnMediaLoadStart($any($event.target))\"\n                (loadedmetadata)=\"OnMediaLoadedMetadata($any($event.target))\"\n                (canplay)=\"OnMediaCanPlay($any($event.target))\"\n                (canplaythrough)=\"OnMediaCanPlay($any($event.target))\"\n                (waiting)=\"OnMediaWaiting($any($event.target))\"\n                (seeking)=\"OnMediaSeeking($any($event.target))\"\n                (seeked)=\"OnMediaSeeked($any($event.target))\"\n                (playing)=\"OnMediaPlaying($any($event.target))\"\n                (stalled)=\"OnMediaStalled($any($event.target))\"\n                (suspend)=\"OnMediaSuspend($any($event.target))\"\n                (emptied)=\"OnMediaEmptied($any($event.target))\"\n                (timeupdate)=\"OnMediaTimeUpdate($any($event.target))\"\n                (durationchange)=\"OnMediaDurationChange($any($event.target))\"\n                (play)=\"OnMediaPlay($any($event.target))\"\n                (pause)=\"OnMediaPause($any($event.target))\"\n                (ended)=\"OnMediaEnded($any($event.target))\"\n                (error)=\"OnMediaError($any($event.target))\"\n              ></audio>\n            }\n          }\n          @if (ShowWaveform && ShowWaveformBars) {\n            <!-- Real audio waveform \u2014 doubles as the scrubber (click/drag to seek). -->\n            <div\n              #waveTrack\n              class=\"mj-media-waveform\"\n              [class.mj-media-waveform--static]=\"PrefersReducedMotion\"\n              role=\"slider\"\n              tabindex=\"0\"\n              aria-label=\"Seek\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"DurationMs\"\n              [attr.aria-valuenow]=\"CurrentTimeMs\"\n              [attr.aria-valuetext]=\"FormatTime(CurrentTimeMs) + ' of ' + FormatTime(DurationMs)\"\n              (pointerdown)=\"OnWaveformPointerDown($event, waveTrack)\"\n              (pointermove)=\"OnWaveformPointerMove($event, waveTrack)\"\n              (pointerup)=\"OnWaveformPointerUp($event)\"\n              (pointercancel)=\"OnWaveformPointerUp($event)\"\n              (keydown)=\"OnScrubKeyDown($event)\"\n            >\n              @for (p of WaveformPeaks; track $index; let i = $index; let count = $count) {\n                <span\n                  class=\"mj-media-waveform__bar\"\n                  [class.mj-media-waveform__bar--played]=\"(i + 1) / count <= WaveformPlayedFraction\"\n                  [style.height.%]=\"2 + p * 98\"\n                ></span>\n              }\n              <div class=\"mj-media-waveform__progress\" [style.left.%]=\"ScrubPercent\"></div>\n            </div>\n          } @else if (ShowWaveform) {\n            <!-- Decode pending or failed (CORS/codec/etc) \u2192 plain progress bar fallback. -->\n            <div\n              #waveTrack\n              class=\"mj-media-waveform-fallback\"\n              role=\"slider\"\n              tabindex=\"0\"\n              aria-label=\"Seek\"\n              [attr.aria-valuemin]=\"0\"\n              [attr.aria-valuemax]=\"DurationMs\"\n              [attr.aria-valuenow]=\"CurrentTimeMs\"\n              [attr.aria-valuetext]=\"FormatTime(CurrentTimeMs) + ' of ' + FormatTime(DurationMs)\"\n              (pointerdown)=\"OnWaveformPointerDown($event, waveTrack)\"\n              (pointermove)=\"OnWaveformPointerMove($event, waveTrack)\"\n              (pointerup)=\"OnWaveformPointerUp($event)\"\n              (pointercancel)=\"OnWaveformPointerUp($event)\"\n              (keydown)=\"OnScrubKeyDown($event)\"\n            >\n              <div class=\"mj-media-waveform-fallback__rail\">\n                <div class=\"mj-media-waveform-fallback__fill\" [style.width.%]=\"ScrubPercent\"></div>\n              </div>\n            </div>\n          } @else {\n            <div class=\"mj-media-audio-art\" aria-hidden=\"true\">\n              <i class=\"fa-solid fa-music\"></i>\n            </div>\n          }\n        } @else {\n          <!-- Video: single, or responsive grid for multiple -->\n          <div\n            class=\"mj-media-video-grid\"\n            [class.mj-media-video-grid--multi]=\"IsMultiVideo\"\n          >\n            @for (track of VideoTracks; track TrackById($index, track); let i = $index) {\n              <div class=\"mj-media-video-cell\">\n                @if (track.Label) {\n                  <span class=\"mj-media-video-cell__label\">{{ track.Label }}</span>\n                }\n                @if (i === 0) {\n                  <video\n                    #primaryMedia\n                    class=\"mj-media-video\"\n                    [src]=\"track.Url\"\n                    [poster]=\"track.PosterUrl || null\"\n                    playsinline\n                    preload=\"metadata\"\n                    (loadstart)=\"OnMediaLoadStart($any($event.target))\"\n                    (loadedmetadata)=\"OnMediaLoadedMetadata($any($event.target))\"\n                    (canplay)=\"OnMediaCanPlay($any($event.target))\"\n                    (canplaythrough)=\"OnMediaCanPlay($any($event.target))\"\n                    (waiting)=\"OnMediaWaiting($any($event.target))\"\n                    (seeking)=\"OnMediaSeeking($any($event.target))\"\n                    (seeked)=\"OnMediaSeeked($any($event.target))\"\n                    (playing)=\"OnMediaPlaying($any($event.target))\"\n                    (stalled)=\"OnMediaStalled($any($event.target))\"\n                    (suspend)=\"OnMediaSuspend($any($event.target))\"\n                    (emptied)=\"OnMediaEmptied($any($event.target))\"\n                    (timeupdate)=\"OnMediaTimeUpdate($any($event.target))\"\n                    (durationchange)=\"OnMediaDurationChange($any($event.target))\"\n                    (play)=\"OnMediaPlay($any($event.target))\"\n                    (pause)=\"OnMediaPause($any($event.target))\"\n                    (ended)=\"OnMediaEnded($any($event.target))\"\n                    (error)=\"OnMediaError($any($event.target))\"\n                  ></video>\n                } @else {\n                  <!-- Secondary videos follow the leader's timeline; no own controls -->\n                  <video\n                    class=\"mj-media-video\"\n                    [src]=\"track.Url\"\n                    [poster]=\"track.PosterUrl || null\"\n                    playsinline\n                    preload=\"metadata\"\n                    muted\n                  ></video>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Transport bar -->\n      <div class=\"mj-media-transport\">\n        <!-- Screen-reader + visible playback status (announced on transitions). -->\n        <div\n          class=\"mj-media-status\"\n          [class.mj-media-status--busy]=\"ShowBusyIndicator\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          @if (ShowBusyIndicator) {\n            <span class=\"mj-media-status__dot\" aria-hidden=\"true\"></span>\n          }\n          <span class=\"mj-media-status__text\">{{ StatusLabel }}</span>\n        </div>\n\n        <!-- Scrubber -->\n        <div class=\"mj-media-scrubber-row\">\n          <span class=\"mj-media-time\">{{ FormatTime(CurrentTimeMs) }}</span>\n          <div\n            #scrubTrack\n            class=\"mj-media-scrubber\"\n            role=\"slider\"\n            tabindex=\"0\"\n            aria-label=\"Seek\"\n            [attr.aria-valuemin]=\"0\"\n            [attr.aria-valuemax]=\"DurationMs\"\n            [attr.aria-valuenow]=\"CurrentTimeMs\"\n            [attr.aria-valuetext]=\"FormatTime(CurrentTimeMs) + ' of ' + FormatTime(DurationMs)\"\n            (pointerdown)=\"OnScrubPointerDown($event, scrubTrack)\"\n            (pointermove)=\"OnScrubPointerMove($event, scrubTrack)\"\n            (pointerup)=\"OnScrubPointerUp($event)\"\n            (pointercancel)=\"OnScrubPointerUp($event)\"\n            (keydown)=\"OnScrubKeyDown($event)\"\n          >\n            <div class=\"mj-media-scrubber__rail\">\n              <div class=\"mj-media-scrubber__fill\" [style.width.%]=\"ScrubPercent\"></div>\n            </div>\n            <div class=\"mj-media-scrubber__handle\" [style.left.%]=\"ScrubPercent\"></div>\n          </div>\n          <span class=\"mj-media-time mj-media-time--total\">{{ FormatTime(DurationMs) }}</span>\n        </div>\n\n        <!-- Controls -->\n        <div class=\"mj-media-controls\">\n          <div class=\"mj-media-controls__left\">\n            @if (ShowSkipControls) {\n              <button\n                type=\"button\"\n                class=\"mj-media-btn\"\n                [attr.aria-label]=\"'Skip back ' + SkipSeconds + ' seconds'\"\n                title=\"Skip back {{ SkipSeconds }}s\"\n                (click)=\"SkipBackward()\"\n              >\n                <i class=\"fa-solid fa-rotate-left\" aria-hidden=\"true\"></i>\n                <span class=\"mj-media-btn__skip-label\">{{ SkipSeconds }}</span>\n              </button>\n            }\n\n            <button\n              type=\"button\"\n              class=\"mj-media-btn mj-media-btn--primary\"\n              [attr.aria-label]=\"IsPlaying ? 'Pause' : 'Play'\"\n              [title]=\"IsPlaying ? 'Pause' : 'Play'\"\n              (click)=\"TogglePlay()\"\n            >\n              <i class=\"fa-solid\" [class.fa-pause]=\"IsPlaying\" [class.fa-play]=\"!IsPlaying\" aria-hidden=\"true\"></i>\n            </button>\n\n            @if (ShowSkipControls) {\n              <button\n                type=\"button\"\n                class=\"mj-media-btn\"\n                [attr.aria-label]=\"'Skip forward ' + SkipSeconds + ' seconds'\"\n                title=\"Skip forward {{ SkipSeconds }}s\"\n                (click)=\"SkipForward()\"\n              >\n                <i class=\"fa-solid fa-rotate-right\" aria-hidden=\"true\"></i>\n                <span class=\"mj-media-btn__skip-label\">{{ SkipSeconds }}</span>\n              </button>\n            }\n          </div>\n\n          <div class=\"mj-media-controls__right\">\n            @if (ShowVolume) {\n              <div class=\"mj-media-volume\">\n                <button\n                  type=\"button\"\n                  class=\"mj-media-btn\"\n                  [attr.aria-label]=\"Muted ? 'Unmute' : 'Mute'\"\n                  [title]=\"Muted ? 'Unmute' : 'Mute'\"\n                  (click)=\"ToggleMute()\"\n                >\n                  <i\n                    class=\"fa-solid\"\n                    [class.fa-volume-xmark]=\"Muted || Volume === 0\"\n                    [class.fa-volume-low]=\"!Muted && Volume > 0 && Volume <= 0.5\"\n                    [class.fa-volume-high]=\"!Muted && Volume > 0.5\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n                <input\n                  type=\"range\"\n                  class=\"mj-media-volume__slider\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.05\"\n                  [value]=\"Muted ? 0 : Volume\"\n                  aria-label=\"Volume\"\n                  (input)=\"OnVolumeInput($event)\"\n                />\n              </div>\n            }\n\n            @if (ShowSpeedControl) {\n              <div class=\"mj-media-rate\">\n                <button\n                  type=\"button\"\n                  class=\"mj-media-btn mj-media-rate__toggle\"\n                  aria-haspopup=\"true\"\n                  [attr.aria-expanded]=\"RateMenuOpen\"\n                  aria-label=\"Playback speed\"\n                  title=\"Playback speed\"\n                  (click)=\"ToggleRateMenu()\"\n                >\n                  {{ PlaybackRate }}&times;\n                </button>\n                @if (RateMenuOpen) {\n                  <ul class=\"mj-media-rate__menu\" role=\"menu\">\n                    @for (rate of PlaybackRates; track rate) {\n                      <li role=\"none\">\n                        <button\n                          type=\"button\"\n                          role=\"menuitemradio\"\n                          [attr.aria-checked]=\"rate === PlaybackRate\"\n                          class=\"mj-media-rate__item\"\n                          [class.mj-media-rate__item--active]=\"rate === PlaybackRate\"\n                          (click)=\"SetPlaybackRate(rate)\"\n                        >\n                          {{ rate }}&times;\n                        </button>\n                      </li>\n                    }\n                  </ul>\n                }\n              </div>\n            }\n\n            @if (ShowTranscriptToggleButton) {\n              <button\n                type=\"button\"\n                class=\"mj-media-btn\"\n                [class.mj-media-btn--active]=\"TranscriptVisible\"\n                [attr.aria-pressed]=\"TranscriptVisible\"\n                [attr.aria-label]=\"TranscriptVisible ? 'Hide transcript' : 'Show transcript'\"\n                [title]=\"TranscriptVisible ? 'Hide transcript' : 'Show transcript'\"\n                (click)=\"ToggleTranscript()\"\n              >\n                <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n              </button>\n            }\n\n            @if (ShowFullscreen && VideoTracks.length > 0) {\n              <button\n                type=\"button\"\n                class=\"mj-media-btn\"\n                [attr.aria-label]=\"IsFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'\"\n                [title]=\"IsFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'\"\n                (click)=\"ToggleFullscreen()\"\n              >\n                <i\n                  class=\"fa-solid\"\n                  [class.fa-compress]=\"IsFullscreen\"\n                  [class.fa-expand]=\"!IsFullscreen\"\n                  aria-hidden=\"true\"\n                ></i>\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Transcript panel -->\n    @if (ShowTranscriptPanel) {\n      <div class=\"mj-media-transcript\" role=\"list\" aria-label=\"Transcript\">\n        @for (cue of Transcript; track CueTrackById($index, cue); let i = $index) {\n          <button\n            type=\"button\"\n            role=\"listitem\"\n            class=\"mj-media-cue\"\n            [class.mj-media-cue--active]=\"i === ActiveCueIndex\"\n            [attr.aria-current]=\"i === ActiveCueIndex ? 'true' : null\"\n            (click)=\"OnCueClicked(i)\"\n            (keydown)=\"OnCueKeyDown($event, i)\"\n          >\n            <span class=\"mj-media-cue__time\">{{ FormatTime(cue.StartMs) }}</span>\n            <span class=\"mj-media-cue__body\">\n              @if (cue.SpeakerLabel) {\n                <span class=\"mj-media-cue__speaker\" [style.color]=\"SpeakerColor(cue.SpeakerLabel)\">\n                  {{ cue.SpeakerLabel }}\n                </span>\n              }\n              <span class=\"mj-media-cue__text\">{{ cue.Text }}</span>\n            </span>\n          </button>\n        }\n      </div>\n    }\n  }\n</div>\n", styles: [":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  color: var(--mj-text-primary);\n}\n\n.mj-media-player {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  gap: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  overflow: hidden;\n  outline: none;\n}\n\n.mj-media-player:focus-visible {\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n/* When transcript sits to the side, lay out main + transcript horizontally. */\n.mj-media-player--has-transcript:not(.mj-media-player--bottom-transcript) {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.mj-media-main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/*\n * Audio layouts keep the stage + transport compact at the top so the transcript can\n * grow to fill the remaining height. Video layouts let the main area grow to fill space.\n */\n.mj-media-player--audio.mj-media-player--bottom-transcript .mj-media-main {\n  flex: 0 0 auto;\n}\n\n/* ---------------------------------------------------------------- Empty / error */\n\n.mj-media-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 2.5rem 1rem;\n  color: var(--mj-text-muted);\n}\n\n.mj-media-empty__icon {\n  font-size: 2rem;\n}\n\n.mj-media-error {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  color: var(--mj-status-error-text);\n  background: var(--mj-status-error-bg);\n}\n\n/* ---------------------------------------------------------------- Stage */\n\n.mj-media-stage {\n  position: relative;\n  background: var(--mj-bg-surface-sunken);\n  min-height: 80px;\n}\n\n/* Video stages grow to fill the available height of the player. */\n.mj-media-player--video .mj-media-stage {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n.mj-media-audio {\n  display: none;\n}\n\n.mj-media-audio-art {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n  font-size: 2.5rem;\n  color: var(--mj-text-disabled);\n}\n\n/* Real audio waveform \u2014 doubles as the scrubber */\n.mj-media-waveform {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 1px;\n  width: 100%;\n  box-sizing: border-box;\n  height: 96px;\n  padding: 0.75rem 1rem;\n  overflow: hidden;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.mj-media-waveform:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform__bar {\n  /*\n   * flex: 1 1 0 + min-width: 0 makes every bar share the row equally and compress to\n   * fit \u2014 N bars always span exactly the container width with no horizontal overflow,\n   * however narrow the widget gets. (A non-zero flex-basis or min-width would let the\n   * bars sum past 100% and spill.)\n   */\n  flex: 1 1 0;\n  min-width: 0;\n  min-height: 2px;\n  align-self: center;\n  background: var(--mj-border-strong);\n  border-radius: 1px;\n  pointer-events: none;\n  transform-origin: center;\n  transition: background-color 0.1s ease, transform 0.18s ease;\n}\n\n.mj-media-waveform__bar--played {\n  background: var(--mj-brand-primary);\n}\n\n/* Hover/seek position indicator. */\n.mj-media-waveform__progress {\n  position: absolute;\n  top: 0.5rem;\n  bottom: 0.5rem;\n  width: 2px;\n  margin-left: -1px;\n  background: var(--mj-brand-primary);\n  opacity: 0.85;\n  pointer-events: none;\n}\n\n/* Plain progress-bar fallback when decoding is pending or failed (no synthetic bars). */\n.mj-media-waveform-fallback {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 96px;\n  padding: 0 1rem;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.mj-media-waveform-fallback:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-sm, 4px);\n}\n\n.mj-media-waveform-fallback__rail {\n  position: relative;\n  flex: 1 1 auto;\n  height: 5px;\n  background: var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 999px);\n  overflow: hidden;\n}\n\n.mj-media-waveform-fallback__fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  background: var(--mj-brand-primary);\n}\n\n/* Video grid */\n.mj-media-video-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 4px;\n  flex: 1 1 auto;\n  min-height: 0;\n  width: 100%;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.mj-media-video-grid--multi {\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n}\n\n.mj-media-video-cell {\n  position: relative;\n  display: flex;\n  min-height: 0;\n}\n\n.mj-media-video-cell__label {\n  position: absolute;\n  top: 0.5rem;\n  left: 0.5rem;\n  z-index: 1;\n  padding: 0.125rem 0.5rem;\n  font-size: 0.75rem;\n  border-radius: var(--mj-radius-sm, 4px);\n  color: var(--mj-text-inverse);\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.mj-media-video {\n  width: 100%;\n  height: auto;\n  display: block;\n  background: var(--mj-bg-surface-sunken);\n}\n\n/*\n * A single video fills the available stage height, letterboxed (object-fit: contain)\n * so it never crops or stretches. Multi-video cells keep their natural height-by-width.\n */\n.mj-media-video-grid:not(.mj-media-video-grid--multi) .mj-media-video {\n  height: 100%;\n  min-height: 0;\n  object-fit: contain;\n}\n\n/* ---------------------------------------------------------------- Busy overlay (loading / buffering) */\n\n.mj-media-busy {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.625rem;\n  pointer-events: none;\n  color: var(--mj-text-inverse);\n  background: color-mix(in srgb, var(--mj-bg-overlay) 55%, transparent);\n}\n\n.mj-media-busy__spinner {\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  border: 3px solid color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  border-top-color: var(--mj-text-inverse);\n  animation: mj-media-spin 0.8s linear infinite;\n}\n\n.mj-media-busy__label {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n}\n\n@keyframes mj-media-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Reduced motion: no spin \u2014 a gentle opacity pulse (or static if pulse also suppressed). */\n.mj-media-busy--static .mj-media-busy__spinner {\n  animation: mj-media-busy-pulse 1.4s ease-in-out infinite;\n  border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n}\n\n@keyframes mj-media-busy-pulse {\n  0%,\n  100% {\n    opacity: 0.45;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n\n/* ---------------------------------------------------------------- Status chip */\n\n.mj-media-status {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  align-self: flex-start;\n  min-height: 1rem;\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--mj-text-muted);\n}\n\n.mj-media-status--busy {\n  color: var(--mj-brand-primary);\n}\n\n.mj-media-status__dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  animation: mj-media-busy-pulse 1.2s ease-in-out infinite;\n}\n\n/* ---------------------------------------------------------------- Transport */\n\n.mj-media-transport {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.625rem 0.75rem 0.75rem;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.mj-media-scrubber-row {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n\n.mj-media-time {\n  font-variant-numeric: tabular-nums;\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\n  min-width: 3.25rem;\n}\n\n.mj-media-time--total {\n  text-align: right;\n}\n\n.mj-media-scrubber {\n  position: relative;\n  flex: 1 1 auto;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.mj-media-scrubber:focus-visible {\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-full, 999px);\n}\n\n.mj-media-scrubber__rail {\n  position: relative;\n  flex: 1 1 auto;\n  height: 5px;\n  background: var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 999px);\n  overflow: hidden;\n}\n\n.mj-media-scrubber__fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  background: var(--mj-brand-primary);\n}\n\n.mj-media-scrubber__handle {\n  position: absolute;\n  top: 50%;\n  width: 13px;\n  height: 13px;\n  margin-left: -6.5px;\n  transform: translateY(-50%);\n  background: var(--mj-brand-primary);\n  border: 2px solid var(--mj-bg-surface);\n  border-radius: 50%;\n  pointer-events: none;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n.mj-media-controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n.mj-media-controls__left,\n.mj-media-controls__right {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n\n/* Buttons (component-local \u2014 not the mjButton directive, this is a generic widget) */\n.mj-media-btn {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  min-width: 32px;\n  height: 32px;\n  padding: 0 0.5rem;\n  font-size: 0.875rem;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--mj-radius-sm, 4px);\n  cursor: pointer;\n  transition: background-color 0.12s ease, color 0.12s ease;\n}\n\n.mj-media-btn:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-btn:active {\n  background: var(--mj-bg-surface-active);\n}\n\n.mj-media-btn:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-btn--primary {\n  color: var(--mj-text-inverse);\n  background: var(--mj-brand-primary);\n  min-width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.mj-media-btn--primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.mj-media-btn--primary:active {\n  background: var(--mj-brand-primary-active);\n}\n\n/* Active/pressed toggle state (e.g. transcript visible) \u2014 tinted to read as \"on\". */\n.mj-media-btn--active {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.mj-media-btn--active:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n}\n\n.mj-media-btn__skip-label {\n  font-size: 0.625rem;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Volume */\n.mj-media-volume {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.mj-media-volume__slider {\n  width: 80px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.mj-media-volume__slider:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n  border-radius: var(--mj-radius-full, 999px);\n}\n\n/* Rate menu */\n.mj-media-rate {\n  position: relative;\n}\n\n.mj-media-rate__toggle {\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.mj-media-rate__menu {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  right: 0;\n  z-index: 10;\n  margin: 0;\n  padding: 0.25rem;\n  list-style: none;\n  min-width: 4rem;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n}\n\n.mj-media-rate__item {\n  display: block;\n  width: 100%;\n  text-align: left;\n  padding: 0.375rem 0.625rem;\n  font-size: 0.8125rem;\n  color: var(--mj-text-primary);\n  background: transparent;\n  border: none;\n  border-radius: var(--mj-radius-sm, 4px);\n  cursor: pointer;\n}\n\n.mj-media-rate__item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-rate__item:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-rate__item--active {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* ---------------------------------------------------------------- Transcript */\n\n.mj-media-transcript {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  overflow-y: auto;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-subtle);\n  max-height: 480px;\n  width: 340px;\n  flex: 0 0 auto;\n  padding: 0.5rem;\n}\n\n/*\n * Bottom transcript: full width, below the player, growing to fill the remaining\n * height of the container (min-height: 0 lets it shrink so its own overflow-y scrolls\n * internally instead of pushing the player taller). No fixed max-height \u2192 no dead space.\n */\n.mj-media-player--bottom-transcript .mj-media-transcript {\n  width: auto;\n  border-left: none;\n  border-top: 1px solid var(--mj-border-subtle);\n  flex: 1 1 auto;\n  min-height: 0;\n  max-height: none;\n}\n\n.mj-media-cue {\n  display: flex;\n  gap: 0.625rem;\n  align-items: flex-start;\n  width: 100%;\n  text-align: left;\n  padding: 0.5rem 0.625rem;\n  background: transparent;\n  border: none;\n  border-left: 3px solid transparent;\n  border-radius: var(--mj-radius-sm, 4px);\n  cursor: pointer;\n  color: var(--mj-text-primary);\n  font: inherit;\n  transition: background-color 0.12s ease;\n}\n\n.mj-media-cue:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.mj-media-cue:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--mj-border-focus);\n}\n\n.mj-media-cue--active {\n  border-left-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.mj-media-cue__time {\n  flex: 0 0 auto;\n  font-variant-numeric: tabular-nums;\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n  padding-top: 0.125rem;\n}\n\n.mj-media-cue__body {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  min-width: 0;\n}\n\n.mj-media-cue__speaker {\n  font-size: 0.6875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n\n.mj-media-cue__text {\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n/* ---------------------------------------------------------------- Motion */\n\n/* Subtle draw-in for the waveform bars (skipped under reduced-motion). */\n.mj-media-waveform:not(.mj-media-waveform--static) .mj-media-waveform__bar {\n  animation: mj-media-bar-in 0.25s ease both;\n}\n\n@keyframes mj-media-bar-in {\n  from {\n    transform: scaleY(0.15);\n    opacity: 0.4;\n  }\n  to {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mj-media-btn,\n  .mj-media-cue,\n  .mj-media-waveform__bar,\n  .mj-media-scrubber__fill {\n    transition: none;\n    animation: none;\n  }\n\n  /* Spinner stops spinning; falls back to a gentle opacity pulse for affordance. */\n  .mj-media-busy__spinner {\n    animation: mj-media-busy-pulse 1.4s ease-in-out infinite;\n    border-top-color: color-mix(in srgb, var(--mj-text-inverse) 35%, transparent);\n  }\n\n  .mj-media-status__dot {\n    animation: none;\n  }\n}\n"] }]
+    }], () => [], { Tracks: [{
+            type: Input
+        }], Transcript: [{
+            type: Input
+        }], Autoplay: [{
+            type: Input
+        }], StartAtMs: [{
+            type: Input
+        }], ShowTranscript: [{
+            type: Input
+        }], ShowTranscriptToggle: [{
+            type: Input
+        }], ShowSpeedControl: [{
+            type: Input
+        }], ShowSkipControls: [{
+            type: Input
+        }], ShowVolume: [{
+            type: Input
+        }], ShowWaveform: [{
+            type: Input
+        }], WaveformBarCount: [{
+            type: Input
+        }], ShowFullscreen: [{
+            type: Input
+        }], SkipSeconds: [{
+            type: Input
+        }], PlaybackRates: [{
+            type: Input
+        }], InitialRate: [{
+            type: Input
+        }], InitialVolume: [{
+            type: Input
+        }], TranscriptPosition: [{
+            type: Input
+        }], BeforePlay: [{
+            type: Output
+        }], AfterPlay: [{
+            type: Output
+        }], BeforePause: [{
+            type: Output
+        }], AfterPause: [{
+            type: Output
+        }], BeforeSeek: [{
+            type: Output
+        }], AfterSeek: [{
+            type: Output
+        }], BeforeRateChange: [{
+            type: Output
+        }], AfterRateChange: [{
+            type: Output
+        }], CueActivated: [{
+            type: Output
+        }], CueClicked: [{
+            type: Output
+        }], TimeUpdate: [{
+            type: Output
+        }], DurationChange: [{
+            type: Output
+        }], Ended: [{
+            type: Output
+        }], StateChanged: [{
+            type: Output
+        }], TranscriptVisibilityChanged: [{
+            type: Output
+        }], primaryMedia: [{
+            type: ViewChild,
+            args: ['primaryMedia']
+        }], OnHostKeyDown: [{
+            type: HostListener,
+            args: ['keydown', ['$event']]
+        }], OnFullscreenChange: [{
+            type: HostListener,
+            args: ['document:fullscreenchange']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJMediaPlayerComponent, { className: "MJMediaPlayerComponent", filePath: "src/lib/media-player/media-player.component.ts", lineNumber: 61 }); })();
+//# sourceMappingURL=media-player.component.js.map