@ngxsplayer/ngx-smart-player 0.0.1-next.0

package/fesm2022/ngxsplayer-ngx-smart-player.mjs

@@ -0,0 +1,1130 @@
+import { PlayerFacade, createSsaiManifestRewritePlugin } from '@ngxsp/core';
+export * from '@ngxsp/core';
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, makeEnvironmentProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+
+class SmartPlayerComponent {
+    config;
+    plugins = [];
+    ports;
+    engines;
+    debug = false;
+    /** Optional start time (seconds) used for "resume playback". */
+    startTimeSec = null;
+    canPrev = false;
+    canNext = false;
+    shuffleActive = false;
+    shuffleLabel = 'Shuffle: off';
+    repeatMode = 'off';
+    repeatLabel = 'Repeat: off';
+    hasPlaylistControls = false;
+    ended = new EventEmitter();
+    videoSize = new EventEmitter();
+    /** Emits playback position updates. */
+    progress = new EventEmitter();
+    prev = new EventEmitter();
+    next = new EventEmitter();
+    toggleShuffle = new EventEmitter();
+    cycleRepeat = new EventEmitter();
+    subtitles = new EventEmitter();
+    videoEl;
+    state = null;
+    duration = 0;
+    currentTime = 0;
+    volume = 1;
+    lastVolumeBeforeMute = 1;
+    playbackRate = 1;
+    bufferAheadSec = 0;
+    tracks = [];
+    openMenu = null;
+    controlsVisible = true;
+    playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    facade = new PlayerFacade();
+    sub = new Subscription();
+    hideControlsTimer = null;
+    get uiSkin() {
+        return (this.config?.ui?.skin ?? 'classic') === 'netflix' ? 'netflix' : 'classic';
+    }
+    get uiVisible() {
+        const kind = this.state?.kind;
+        return this.controlsVisible || this.openMenu !== null || kind === 'paused' || kind === 'loading' || kind === 'buffering' || kind === 'error';
+    }
+    get displayTitle() {
+        const ui = this.config?.ui;
+        const src = this.config?.source;
+        return (ui?.title ??
+            ui?.displayTitle ??
+            src?.title ??
+            src?.contentId ??
+            'Player');
+    }
+    get audioTracks() {
+        return this.tracks.filter((track) => track.kind === 'audio');
+    }
+    get textTracks() {
+        return this.tracks.filter((track) => track.kind === 'text');
+    }
+    get videoTracks() {
+        return this.tracks.filter((track) => track.kind === 'video');
+    }
+    get selectedAudioTrackId() {
+        return this.audioTracks.find((track) => track.active)?.id ?? null;
+    }
+    get selectedTextTrackId() {
+        return this.textTracks.find((track) => track.active)?.id ?? null;
+    }
+    get selectedVideoTrackId() {
+        return this.videoTracks.find((track) => track.active)?.id ?? null;
+    }
+    ngOnInit() {
+        const plugins = [...(this.plugins ?? [])];
+        // v1.11: SSAI (server-side stitched streams) – rewrite manifest URL if configured.
+        if (this.config?.ads?.enabled && this.config?.ads?.mode === 'ssai') {
+            plugins.push(createSsaiManifestRewritePlugin());
+        }
+        this.facade.attach(this.videoEl.nativeElement, plugins, this.config, this.ports, this.engines);
+        this.sub.add(this.facade.state$.subscribe((s) => {
+            this.state = s;
+            this.syncControlVisibility();
+        }));
+        this.sub.add(this.facade.time$.subscribe((t) => {
+            this.currentTime = t.currentTime;
+            this.duration = t.duration;
+            this.progress.emit({ currentTime: this.currentTime, duration: this.duration });
+        }));
+        this.sub.add(this.facade.bufferAheadSec$.subscribe((value) => {
+            this.bufferAheadSec = value;
+        }));
+        this.sub.add(this.facade.tracks$.subscribe((tracks) => {
+            this.tracks = tracks;
+        }));
+        this.facade.setVolume(this.volume);
+        this.facade.load(this.config)
+            .then(async () => {
+            const start = Number(this.startTimeSec ?? 0);
+            if (Number.isFinite(start) && start > 0.2) {
+                try {
+                    const safe = Math.max(0, Math.min(start, (this.duration || start + 1) - 0.3));
+                    await this.facade.seekTo(safe);
+                }
+                catch { /* ignore */ }
+            }
+            await this.facade.play().catch(() => { });
+        })
+            .catch(() => { });
+    }
+    ngOnDestroy() {
+        this.clearHideControlsTimer();
+        this.sub.unsubscribe();
+        this.facade.destroy();
+    }
+    tryPlay() {
+        void this.facade.play().catch(() => { });
+    }
+    get debugJson() {
+        try {
+            const d = this.facade.diagnostics?.() ?? {};
+            const tel = this.ports?.telemetry?.export?.();
+            return JSON.stringify({ ...d, telemetry: tel }, null, 2);
+        }
+        catch {
+            return '{}';
+        }
+    }
+    get autoplayBlocked() {
+        const s = this.state;
+        return s?.kind === 'error' && s?.error?.code === 'AUTOPLAY_BLOCKED';
+    }
+    async copyDebug() {
+        try {
+            await navigator.clipboard.writeText(this.debugJson);
+        }
+        catch {
+            // clipboard may be unavailable
+        }
+    }
+    downloadDebug() {
+        try {
+            const blob = new Blob([this.debugJson], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'ngxsp-diagnostics.json';
+            a.click();
+            setTimeout(() => URL.revokeObjectURL(url), 0);
+        }
+        catch {
+            // ignore
+        }
+    }
+    togglePlay() {
+        if (this.state?.kind === 'playing')
+            this.facade.pause();
+        else
+            this.facade.play();
+    }
+    seekRel(deltaSec) {
+        this.facade.seekTo(Math.max(0, this.currentTime + deltaSec));
+    }
+    onScrub(value) {
+        const v = Number(value);
+        if (Number.isFinite(v))
+            this.facade.seekTo(v);
+    }
+    onVolume(value) {
+        const v = Math.max(0, Math.min(1, Number(value)));
+        this.volume = Number.isFinite(v) ? v : this.volume;
+        if (this.volume > 0)
+            this.lastVolumeBeforeMute = this.volume;
+        this.facade.setVolume(this.volume);
+    }
+    toggleMute() {
+        if (this.volume <= 0.001) {
+            this.volume = Math.max(0.5, this.lastVolumeBeforeMute || 0.5);
+        }
+        else {
+            this.lastVolumeBeforeMute = this.volume;
+            this.volume = 0;
+        }
+        this.facade.setVolume(this.volume);
+        this.onInteraction();
+    }
+    async setPlaybackRate(rate) {
+        this.playbackRate = rate;
+        this.openMenu = null;
+        this.onInteraction();
+        await this.facade.setRate(rate);
+    }
+    reload() {
+        this.facade.reload().catch(() => void 0);
+    }
+    onLoadedMetadata() {
+        const v = this.videoEl?.nativeElement;
+        if (!v)
+            return;
+        const width = v.videoWidth || 0;
+        const height = v.videoHeight || 0;
+        if (width > 0 && height > 0) {
+            this.videoSize.emit({ width, height });
+        }
+    }
+    onEnded() {
+        // facade already emits 'ended' based on engine events; this output lets host apps chain playlists.
+        this.ended.emit();
+    }
+    toggleFullscreen() {
+        const host = this.videoEl.nativeElement.parentElement;
+        if (!host)
+            return;
+        const doc = document;
+        const el = host;
+        if (!doc.fullscreenElement && el.requestFullscreen) {
+            el.requestFullscreen().catch(() => void 0);
+        }
+        else if (doc.exitFullscreen) {
+            doc.exitFullscreen().catch(() => void 0);
+        }
+    }
+    toggleMenu(menu) {
+        this.openMenu = this.openMenu === menu ? null : menu;
+        this.onInteraction(this.openMenu !== null);
+    }
+    async selectTextTrack(trackId) {
+        this.openMenu = null;
+        this.onInteraction();
+        await this.facade.setTextTrack(trackId);
+    }
+    async selectAudioTrack(trackId) {
+        this.openMenu = null;
+        this.onInteraction();
+        await this.facade.setAudioTrack(trackId);
+    }
+    async selectVideoTrack(trackId) {
+        this.openMenu = null;
+        this.onInteraction();
+        await this.facade.setVideoTrack(trackId);
+    }
+    async togglePiP() {
+        const video = this.videoEl.nativeElement;
+        const doc = document;
+        try {
+            if (doc.pictureInPictureElement) {
+                await doc.exitPictureInPicture?.();
+            }
+            else {
+                await video.requestPictureInPicture?.();
+            }
+        }
+        catch {
+            // Ignore unsupported or blocked PiP transitions.
+        }
+        this.onInteraction();
+    }
+    isPiPSupported() {
+        const video = this.videoEl?.nativeElement;
+        const doc = document;
+        return !!doc.pictureInPictureEnabled && !video?.disablePictureInPicture;
+    }
+    pipLabel() {
+        const doc = document;
+        return doc.pictureInPictureElement ? 'Exit PiP' : 'PiP';
+    }
+    isPiPActive() {
+        const doc = document;
+        return !!doc.pictureInPictureElement;
+    }
+    captionsLabel() {
+        return this.selectedTextTrackId !== null ? 'Captions on' : 'Load subtitles';
+    }
+    volumeLabel() {
+        if (this.volume <= 0.001)
+            return 'Muted';
+        if (this.volume < 0.5)
+            return 'Vol';
+        return 'Volume';
+    }
+    volumeIcon() {
+        if (this.volume <= 0.001)
+            return '🔇';
+        if (this.volume < 0.5)
+            return '🔉';
+        return '🔊';
+    }
+    playbackRateLabel() {
+        return `${this.playbackRate}x`;
+    }
+    statusLabel() {
+        const kind = this.state?.kind;
+        if (kind === 'playing')
+            return this.playbackRate === 1 ? 'Playing' : `Playing ${this.playbackRate}x`;
+        if (kind === 'paused')
+            return 'Paused';
+        if (kind === 'buffering')
+            return 'Buffering';
+        if (kind === 'loading')
+            return 'Loading';
+        if (kind === 'ended')
+            return 'Ended';
+        if (kind === 'error')
+            return 'Error';
+        return 'Ready';
+    }
+    keyboardHintLabel() {
+        return 'Space play • Arrows seek • F fullscreen';
+    }
+    tracksButtonLabel() {
+        return this.textTracks.length || this.audioTracks.length ? 'Tracks' : 'Media';
+    }
+    trackLabel(track) {
+        return track.label || track.language || track.id;
+    }
+    qualityLabel(track) {
+        if (track.label)
+            return track.label;
+        const parts = [];
+        if (track.height)
+            parts.push(`${track.height}p`);
+        if (track.bandwidth)
+            parts.push(`${(track.bandwidth / 1_000_000).toFixed(1)} Mbps`);
+        return parts.join(' • ') || track.id;
+    }
+    bufferPercent() {
+        if (!this.duration || !Number.isFinite(this.duration) || this.duration <= 0)
+            return 0;
+        return Math.max(0, Math.min(100, (this.bufferAheadSec / this.duration) * 100));
+    }
+    fmtTime(sec) {
+        const s = Math.max(0, Math.floor(sec || 0));
+        const h = Math.floor(s / 3600);
+        const m = Math.floor((s % 3600) / 60);
+        const r = s % 60;
+        if (h > 0)
+            return `${h}:${String(m).padStart(2, '0')}:${String(r).padStart(2, '0')}`;
+        return `${m}:${String(r).padStart(2, '0')}`;
+    }
+    noop() { }
+    onInteraction(persist = false) {
+        this.controlsVisible = true;
+        this.clearHideControlsTimer();
+        if (!persist && this.state?.kind === 'playing' && this.openMenu === null) {
+            this.hideControlsTimer = setTimeout(() => {
+                this.controlsVisible = false;
+            }, 2200);
+        }
+    }
+    onPointerLeave() {
+        if (this.state?.kind === 'playing' && this.openMenu === null) {
+            this.clearHideControlsTimer();
+            this.controlsVisible = false;
+        }
+    }
+    onRootClick(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        if (target.closest('.ngxsp-menu, .ngxsp-nfx-chip, .ngxsp-btn, .ngxsp-debug, .ngxsp-nfx-side, .ngxsp-nfx-center, .ngxsp-range')) {
+            return;
+        }
+        this.openMenu = null;
+        this.onInteraction();
+    }
+    onEscape() {
+        if (this.openMenu !== null) {
+            this.openMenu = null;
+            this.onInteraction();
+        }
+    }
+    onKeydown(event) {
+        if (this.isInteractiveTarget(event.target))
+            return;
+        if (event.code === 'Space') {
+            event.preventDefault();
+            this.togglePlay();
+            this.onInteraction();
+            return;
+        }
+        if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            this.seekRel(-10);
+            this.onInteraction();
+            return;
+        }
+        if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            this.seekRel(10);
+            this.onInteraction();
+            return;
+        }
+        if (event.code === 'KeyF') {
+            event.preventDefault();
+            this.toggleFullscreen();
+            this.onInteraction();
+            return;
+        }
+        if (event.code === 'KeyM') {
+            event.preventDefault();
+            this.toggleMute();
+        }
+    }
+    syncControlVisibility() {
+        if (this.state?.kind === 'playing' && this.openMenu === null) {
+            this.onInteraction();
+            return;
+        }
+        this.clearHideControlsTimer();
+        this.controlsVisible = true;
+    }
+    clearHideControlsTimer() {
+        if (this.hideControlsTimer) {
+            clearTimeout(this.hideControlsTimer);
+            this.hideControlsTimer = null;
+        }
+    }
+    isInteractiveTarget(target) {
+        const el = target;
+        if (!el)
+            return false;
+        return !!el.closest('input, button, textarea, select, summary, [contenteditable="true"]');
+    }
+    errorTitle() {
+        const s = this.state;
+        const code = s?.error?.code ?? s?.error?.name ?? 'UNKNOWN';
+        if (code === 'ENGINE_MISSING')
+            return 'Playback engine missing';
+        if (code === 'AUTOPLAY_BLOCKED')
+            return 'Click to start playback';
+        if (code === 'NETWORK_HTTP')
+            return 'Network error';
+        if (code === 'DECODE_ERROR')
+            return 'Decode error';
+        if (code === 'SRC_NOT_SUPPORTED')
+            return 'Format not supported';
+        return 'Playback error';
+    }
+    errorHint() {
+        const s = this.state;
+        const code = s?.error?.code ?? s?.error?.name ?? 'UNKNOWN';
+        if (code === 'ENGINE_MISSING') {
+            return 'This source requires an additional engine. Install @ngxsp/engine-shaka and pass it via [engines].';
+        }
+        if (code === 'AUTOPLAY_BLOCKED')
+            return 'Your browser blocked autoplay. Press Play to start.';
+        if (code === 'NETWORK_HTTP')
+            return 'Check your connection or try again.';
+        return s?.error?.message ? String(s.error.message) : 'Unknown error';
+    }
+    async onRetry() {
+        try {
+            await this.facade.reload();
+        }
+        catch { }
+    }
+    async onUserPlay() {
+        try {
+            await this.facade.play();
+        }
+        catch { }
+    }
+    emitNext() {
+        this.next.emit();
+    }
+    emitPrev() {
+        this.prev.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SmartPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: SmartPlayerComponent, isStandalone: true, selector: "ngx-smart-player", inputs: { config: "config", plugins: "plugins", ports: "ports", engines: "engines", debug: "debug", startTimeSec: "startTimeSec", canPrev: "canPrev", canNext: "canNext", shuffleActive: "shuffleActive", shuffleLabel: "shuffleLabel", repeatMode: "repeatMode", repeatLabel: "repeatLabel", hasPlaylistControls: "hasPlaylistControls" }, outputs: { ended: "ended", videoSize: "videoSize", progress: "progress", prev: "prev", next: "next", toggleShuffle: "toggleShuffle", cycleRepeat: "cycleRepeat", subtitles: "subtitles" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "videoEl", first: true, predicate: ["video"], descendants: true, static: true }], ngImport: i0, template: `
+  <div class="ngxsp-root" [class.ngxsp-skin-netflix]="uiSkin==='netflix'" [class.ngxsp-ui-visible]="uiVisible" [attr.data-kind]="state?.kind">
+    <div class="ngxsp-video" (dblclick)="toggleFullscreen()" (mousemove)="onInteraction()" (mouseenter)="onInteraction()" (mouseleave)="onPointerLeave()" (focusin)="onInteraction()" (touchstart)="onInteraction(true)" (click)="onRootClick($event)">
+      <video #video playsinline (timeupdate)="noop()" (loadedmetadata)="onLoadedMetadata()" (ended)="onEnded()"></video>
+@if (state?.kind==='error') {
+<div class="ngxsp-overlay" role="alert">
+  <div class="ngxsp-overlay-card">
+    <div class="ngxsp-overlay-title">Playback error</div>
+    <div class="ngxsp-overlay-msg">
+          <div style="font-weight:600; margin-bottom:6px;">{{errorTitle()}}</div>
+          <div style="opacity:.85; font-size: 13px; line-height: 1.3;">{{errorHint()}}</div>
+          <div style="margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;">
+	            <button type="button" class="ngxsp-btn" (click)="reload()">Retry</button>
+              @if (autoplayBlocked) {
+	            <button type="button" class="ngxsp-btn" (click)="tryPlay()">Play</button>
+              }
+          </div>
+        </div>
+  </div>
+</div>
+}
+
+@if (debug) {
+<details class="ngxsp-debug" (click)="$event.stopPropagation()">
+  <summary>Debug</summary>
+	  <div style="display:flex; gap:8px; margin:8px 0; flex-wrap:wrap;">
+	    <button type="button" class="ngxsp-btn" (click)="copyDebug()">Copy JSON</button>
+	    <button type="button" class="ngxsp-btn" (click)="downloadDebug()">Download</button>
+	  </div>
+  <pre>{{debugJson}}</pre>
+</details>
+}
+
+      @if (uiSkin==='netflix') {
+        <div class="ngxsp-nfx-top">
+          <div class="ngxsp-nfx-titleWrap">
+            <div class="ngxsp-nfx-eyebrow">Now Playing</div>
+            <div class="ngxsp-nfx-title">{{displayTitle}}</div>
+          </div>
+          <div class="ngxsp-nfx-spacer"></div>
+          <div class="ngxsp-nfx-status">{{ statusLabel() }}</div>
+          <div class="ngxsp-nfx-topHint">Double-click for fullscreen</div>
+        </div>
+
+        <div class="ngxsp-nfx-centerDock">
+          @if (hasPlaylistControls) {
+          <button type="button" class="ngxsp-nfx-side" (click)="emitPrev()" [disabled]="!canPrev" aria-label="Previous item">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.53 12 18 18.47v-12L9.53 12Zm-1.53 6.25a.75.75 0 0 0 1.25-.56V6.31a.75.75 0 0 0-1.25-.56L1.06 11.44a.75.75 0 0 0 0 1.12L8 18.25Z"/></svg>
+          </button>
+          }
+          <button type="button" class="ngxsp-nfx-side ngxsp-nfx-side-wide" (click)="seekRel(-10)" aria-label="Seek backward 10 seconds">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H5m0 0v4m0-4 4.5 4.5A7 7 0 1 1 5 12"/></svg>
+            <span class="ngxsp-iconBadge">10</span>
+          </button>
+          <button type="button" class="ngxsp-nfx-center" (click)="togglePlay()" aria-label="Play/Pause">
+            @if (state?.kind==='playing') {
+            <svg class="ngxsp-icon ngxsp-icon-lg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.5 5.25A1.25 1.25 0 0 1 8.75 6.5v11A1.25 1.25 0 0 1 6.25 17.5v-11A1.25 1.25 0 0 1 7.5 5.25Zm8 0a1.25 1.25 0 0 1 1.25 1.25v11a1.25 1.25 0 1 1-2.5 0v-11A1.25 1.25 0 0 1 15.5 5.25Z"/></svg>
+            } @else {
+            <svg class="ngxsp-icon ngxsp-icon-lg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8.25 6.82c0-1.3 1.43-2.1 2.54-1.43l8.12 4.93a1.96 1.96 0 0 1 0 3.36l-8.12 4.93a1.67 1.67 0 0 1-2.54-1.43V6.82Z"/></svg>
+            }
+          </button>
+          <button type="button" class="ngxsp-nfx-side ngxsp-nfx-side-wide" (click)="seekRel(10)" aria-label="Seek forward 10 seconds">
+            <span class="ngxsp-iconBadge">10</span>
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 5h4m0 0v4m0-4-4.5 4.5A7 7 0 1 0 19 12"/></svg>
+          </button>
+          @if (hasPlaylistControls) {
+          <button type="button" class="ngxsp-nfx-side" (click)="emitNext()" [disabled]="!canNext" aria-label="Next item">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14.47 12 6 5.53v12L14.47 12ZM16 5.75a.75.75 0 0 0-1.25.56v11.38a.75.75 0 0 0 1.25.56l6.94-5.69a.75.75 0 0 0 0-1.12L16 5.75Z"/></svg>
+          </button>
+          }
+        </div>
+
+        <div class="ngxsp-controls ngxsp-nfx-bottom">
+          <div class="ngxsp-nfx-metaRow">
+            <div class="ngxsp-nfx-time">{{fmtTime(currentTime)}} / {{fmtTime(duration)}}</div>
+            <div class="ngxsp-nfx-volumeGroup">
+              <button type="button" class="ngxsp-nfx-chip ngxsp-nfx-chip-quiet" (click)="toggleMute()" [attr.title]="volumeLabel()" [attr.aria-label]="volumeLabel()">
+                @if (volume <= 0.001) {
+                <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm3.5 5.5 5 5m0-5-5 5"/></svg>
+                } @else if (volume < 0.5) {
+                <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95"/></svg>
+                } @else {
+                <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95m2.75-7.7a7.5 7.5 0 0 1 0 10.45"/></svg>
+                }
+              </button>
+              <input class="ngxsp-range ngxsp-nfx-volume" type="range"
+                min="0" max="1" step="0.01"
+                [value]="volume"
+                (input)="onVolume(($any($event.target).value))"
+                aria-label="Volume"
+              />
+            </div>
+            <div class="ngxsp-nfx-spacer"></div>
+            @if (hasPlaylistControls) {
+            <button type="button" class="ngxsp-nfx-chip" [class.accent]="shuffleActive" (click)="toggleShuffle.emit()" [attr.title]="shuffleLabel" [attr.aria-label]="shuffleLabel">
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 6h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 6-4.5 4.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 7h3.2c1 0 1.95.4 2.66 1.1l6.28 6.3A3.75 3.75 0 0 0 18.82 15H20"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 15h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 18-4.56-4.56"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 17h3.2c1 0 1.95-.4 2.66-1.1l1.54-1.54"/></svg>
+            </button>
+            <button type="button" class="ngxsp-nfx-chip" [class.accent]="repeatMode !== 'off'" (click)="cycleRepeat.emit()" [attr.title]="repeatLabel" [attr.aria-label]="repeatLabel">
+              @if (repeatMode === 'one') {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/>
+                <text x="16.8" y="17.6" fill="currentColor" stroke="none" font-size="7.5" font-weight="700" text-anchor="middle">1</text>
+              </svg>
+              } @else {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/></svg>
+              }
+            </button>
+            }
+            <button type="button" class="ngxsp-nfx-chip" (click)="toggleMenu('tracks')" [attr.title]="tracksButtonLabel()" [attr.aria-label]="tracksButtonLabel()">
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 6.75h16M4 12h16M4 17.25h16"/></svg>
+            </button>
+            <button type="button" class="ngxsp-nfx-chip" (click)="subtitles.emit()" [attr.title]="captionsLabel()" [attr.aria-label]="captionsLabel()">
+              @if (selectedTextTrackId !== null) {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/></svg>
+              } @else {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/><path stroke-linecap="round" stroke-width="1.8" d="M6 6l12 12"/></svg>
+              }
+            </button>
+            <button type="button" class="ngxsp-nfx-chip" (click)="toggleMenu('speed')" [attr.title]="playbackRateLabel()" [attr.aria-label]="playbackRateLabel()">
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5.25 5.82c0-1.3 1.43-2.1 2.54-1.43l5.71 3.47a1.96 1.96 0 0 1 0 3.36L7.79 14.7a1.67 1.67 0 0 1-2.54-1.43V5.82Zm8.5 0c0-1.3 1.43-2.1 2.54-1.43L22 7.86a1.96 1.96 0 0 1 0 3.36l-5.71 3.47a1.67 1.67 0 0 1-2.54-1.43V5.82Z"/></svg>
+            </button>
+            @if (isPiPSupported()) {
+            <button type="button" class="ngxsp-nfx-chip" (click)="togglePiP()" [attr.title]="pipLabel()" [attr.aria-label]="pipLabel()">
+              @if (isPiPActive()) {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" fill="currentColor" stroke="none"/></svg>
+              } @else {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" stroke-width="1.8"/></svg>
+              }
+            </button>
+            }
+          </div>
+
+          <input class="ngxsp-range ngxsp-nfx-range" type="range"
+            min="0" [max]="duration || 0" step="0.1"
+            [value]="currentTime"
+            (input)="onScrub(($any($event.target).value))"
+            aria-label="Seek"
+          />
+
+          <div class="ngxsp-nfx-metaRow">
+            <div class="ngxsp-nfx-spacer"></div>
+            <div class="ngxsp-nfx-label">{{ keyboardHintLabel() }}</div>
+          </div>
+
+          <div class="ngxsp-buffer" aria-hidden="true">
+            <div class="ngxsp-bufferFill" [style.width.%]="bufferPercent()"></div>
+          </div>
+
+          @if (openMenu === 'tracks') {
+          <div class="ngxsp-menu" (click)="$event.stopPropagation()">
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Captions</div>
+              <button type="button" class="ngxsp-menuItem" [class.active]="selectedTextTrackId === null" (click)="selectTextTrack(null)">Off</button>
+              @for (track of textTracks; track track.id) {
+              <button type="button" class="ngxsp-menuItem" [class.active]="selectedTextTrackId === track.id" (click)="selectTextTrack(track.id)">
+                {{ trackLabel(track) }}
+              </button>
+              }
+            </div>
+
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Audio</div>
+              @if (audioTracks.length) {
+                @for (track of audioTracks; track track.id) {
+                <button type="button" class="ngxsp-menuItem" [class.active]="selectedAudioTrackId === track.id" (click)="selectAudioTrack(track.id)">
+                  {{ trackLabel(track) }}
+                </button>
+                }
+              } @else {
+                <div class="ngxsp-menuHint">Single audio track</div>
+              }
+            </div>
+
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Quality</div>
+              <button type="button" class="ngxsp-menuItem" [class.active]="selectedVideoTrackId === null" (click)="selectVideoTrack(null)">Auto</button>
+              @if (videoTracks.length) {
+                @for (track of videoTracks; track track.id) {
+                <button type="button" class="ngxsp-menuItem" [class.active]="selectedVideoTrackId === track.id" (click)="selectVideoTrack(track.id)">
+                  {{ qualityLabel(track) }}
+                </button>
+                }
+              } @else {
+                <div class="ngxsp-menuHint">Single quality</div>
+              }
+            </div>
+          </div>
+          }
+
+          @if (openMenu === 'speed') {
+          <div class="ngxsp-menu ngxsp-menuCompact" (click)="$event.stopPropagation()">
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Playback speed</div>
+              @for (rate of playbackRates; track rate) {
+              <button type="button" class="ngxsp-menuItem" [class.active]="playbackRate === rate" (click)="setPlaybackRate(rate)">
+                {{ rate }}x
+              </button>
+              }
+            </div>
+          </div>
+          }
+        </div>
+      } @else {
+        <div class="ngxsp-controls">
+          <button type="button" class="ngxsp-btn" (click)="togglePlay()" aria-label="Play/Pause" title="Play/Pause">
+            @if (state?.kind==='playing') {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.5 5.25A1.25 1.25 0 0 1 8.75 6.5v11A1.25 1.25 0 0 1 6.25 17.5v-11A1.25 1.25 0 0 1 7.5 5.25Zm8 0a1.25 1.25 0 0 1 1.25 1.25v11a1.25 1.25 0 1 1-2.5 0v-11A1.25 1.25 0 0 1 15.5 5.25Z"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8.25 6.82c0-1.3 1.43-2.1 2.54-1.43l8.12 4.93a1.96 1.96 0 0 1 0 3.36l-8.12 4.93a1.67 1.67 0 0 1-2.54-1.43V6.82Z"/></svg>
+            }
+          </button>
+          <button type="button" class="ngxsp-btn" (click)="seekRel(-10)" aria-label="Seek backward 10 seconds" title="Seek backward 10 seconds">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H5m0 0v4m0-4 4.5 4.5A7 7 0 1 1 5 12"/></svg>
+            <span class="ngxsp-iconBadge">10</span>
+          </button>
+          <button type="button" class="ngxsp-btn" (click)="seekRel(10)" aria-label="Seek forward 10 seconds" title="Seek forward 10 seconds">
+            <span class="ngxsp-iconBadge">10</span>
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 5h4m0 0v4m0-4-4.5 4.5A7 7 0 1 0 19 12"/></svg>
+          </button>
+          @if (hasPlaylistControls) {
+          <button type="button" class="ngxsp-btn" (click)="emitPrev()" [disabled]="!canPrev" aria-label="Previous item" title="Previous item"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.53 12 18 18.47v-12L9.53 12Zm-1.53 6.25a.75.75 0 0 0 1.25-.56V6.31a.75.75 0 0 0-1.25-.56L1.06 11.44a.75.75 0 0 0 0 1.12L8 18.25Z"/></svg></button>
+          <button type="button" class="ngxsp-btn" (click)="emitNext()" [disabled]="!canNext" aria-label="Next item" title="Next item"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14.47 12 6 5.53v12L14.47 12ZM16 5.75a.75.75 0 0 0-1.25.56v11.38a.75.75 0 0 0 1.25.56l6.94-5.69a.75.75 0 0 0 0-1.12L16 5.75Z"/></svg></button>
+          <button type="button" class="ngxsp-btn" [class.accent]="shuffleActive" (click)="toggleShuffle.emit()" [attr.title]="shuffleLabel" [attr.aria-label]="shuffleLabel">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 6h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 6-4.5 4.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 7h3.2c1 0 1.95.4 2.66 1.1l6.28 6.3A3.75 3.75 0 0 0 18.82 15H20"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 15h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 18-4.56-4.56"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 17h3.2c1 0 1.95-.4 2.66-1.1l1.54-1.54"/></svg>
+          </button>
+          <button type="button" class="ngxsp-btn" [class.accent]="repeatMode !== 'off'" (click)="cycleRepeat.emit()" [attr.title]="repeatLabel" [attr.aria-label]="repeatLabel">
+            @if (repeatMode === 'one') {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/>
+              <text x="16.8" y="17.6" fill="currentColor" stroke="none" font-size="7.5" font-weight="700" text-anchor="middle">1</text>
+            </svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/></svg>
+            }
+          </button>
+          }
+          <button type="button" class="ngxsp-btn" (click)="toggleMenu('tracks')" [attr.title]="tracksButtonLabel()" [attr.aria-label]="tracksButtonLabel()"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 6.75h16M4 12h16M4 17.25h16"/></svg></button>
+          <button type="button" class="ngxsp-btn" (click)="subtitles.emit()" [attr.title]="captionsLabel()" [attr.aria-label]="captionsLabel()">
+            @if (selectedTextTrackId !== null) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/><path stroke-linecap="round" stroke-width="1.8" d="M6 6l12 12"/></svg>
+            }
+          </button>
+          <button type="button" class="ngxsp-btn" (click)="toggleMenu('speed')" [attr.title]="playbackRateLabel()" [attr.aria-label]="playbackRateLabel()"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5.25 5.82c0-1.3 1.43-2.1 2.54-1.43l5.71 3.47a1.96 1.96 0 0 1 0 3.36L7.79 14.7a1.67 1.67 0 0 1-2.54-1.43V5.82Zm8.5 0c0-1.3 1.43-2.1 2.54-1.43L22 7.86a1.96 1.96 0 0 1 0 3.36l-5.71 3.47a1.67 1.67 0 0 1-2.54-1.43V5.82Z"/></svg></button>
+          @if (isPiPSupported()) {
+          <button type="button" class="ngxsp-btn" (click)="togglePiP()" [attr.title]="pipLabel()" [attr.aria-label]="pipLabel()">
+            @if (isPiPActive()) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" fill="currentColor" stroke="none"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" stroke-width="1.8"/></svg>
+            }
+          </button>
+          }
+          <button type="button" class="ngxsp-btn" (click)="toggleMute()" [attr.title]="volumeLabel()" [attr.aria-label]="volumeLabel()">
+            @if (volume <= 0.001) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm3.5 5.5 5 5m0-5-5 5"/></svg>
+            } @else if (volume < 0.5) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95m2.75-7.7a7.5 7.5 0 0 1 0 10.45"/></svg>
+            }
+          </button>
+
+          <input class="ngxsp-range" type="range"
+            min="0" [max]="duration || 0" step="0.1"
+            [value]="currentTime"
+            (input)="onScrub(($any($event.target).value))"
+          />
+
+          <div class="ngxsp-time">{{fmtTime(currentTime)}} / {{fmtTime(duration)}}</div>
+
+          <input class="ngxsp-range" style="max-width:140px" type="range"
+            min="0" max="1" step="0.01"
+            [value]="volume"
+            (input)="onVolume(($any($event.target).value))"
+            aria-label="Volume"
+          />
+        </div>
+      }
+
+    </div>
+  </div>
+  `, isInline: true, styles: [".ngxsp-root{position:relative;width:100%;height:100%;background:#000;color:#fff;font-family:system-ui,sans-serif}.ngxsp-video{position:relative;width:100%;height:100%;isolation:isolate}.ngxsp-video video{width:100%;height:100%;display:block;background:#000;object-fit:contain}.ngxsp-controls{display:flex;gap:8px;align-items:center;padding:10px;flex-wrap:wrap}.ngxsp-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ngxsp-btn.accent{background:#563f1b80;border-color:#e8be763d;color:#f3d59c}.ngxsp-icon{width:18px;height:18px;display:block;flex:0 0 auto}.ngxsp-icon-lg{width:32px;height:32px}.ngxsp-iconBadge{font-size:11px;font-weight:800;line-height:1}.ngxsp-range{flex:1;min-width:160px}.ngxsp-time{opacity:.85;font-variant-numeric:tabular-nums}.ngxsp-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000000b3;padding:20px;text-align:center}.ngxsp-debug{position:absolute;top:12px;right:12px;z-index:6;margin:0;max-width:min(420px,calc(100% - 24px));opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}.ngxsp-root.ngxsp-ui-visible .ngxsp-debug,.ngxsp-debug[open]{opacity:1;transform:translateY(0)}.ngxsp-debug summary{cursor:pointer;list-style:none;background:#0a0a0ad1;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 12px;width:max-content;margin-left:auto}.ngxsp-debug[open]{background:#0a0a0aeb;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px;max-height:calc(100% - 24px);overflow:auto}.ngxsp-overlay-title{font-size:18px;font-weight:600}.ngxsp-overlay-msg{opacity:.9;max-width:720px}.ngxsp-skin-netflix .ngxsp-video{position:relative}.ngxsp-skin-netflix .ngxsp-video:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,#0000 32%,#00000038);opacity:.85;pointer-events:none;z-index:0}.ngxsp-skin-netflix .ngxsp-video:after{content:\"\";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(to top,#000000e6,#0000007a 38%,#0000);opacity:0;transition:opacity .18s ease;pointer-events:none}.ngxsp-skin-netflix.ngxsp-ui-visible .ngxsp-video:after{opacity:1}.ngxsp-nfx-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:12px;padding:18px 18px 22px;background:linear-gradient(to bottom,#000000c7,#0000);pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:3}.ngxsp-root.ngxsp-ui-visible .ngxsp-nfx-top{opacity:1}.ngxsp-nfx-titleWrap{display:flex;flex-direction:column;gap:3px}.ngxsp-nfx-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.62}.ngxsp-nfx-title{font-weight:700;letter-spacing:.01em;opacity:.98;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:18px}.ngxsp-nfx-topHint{font-size:12px;opacity:.6;padding-top:4px}.ngxsp-nfx-status{font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;opacity:.78}.ngxsp-nfx-spacer{flex:1}.ngxsp-nfx-centerDock{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:flex;align-items:center;gap:14px;z-index:4;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .18s ease,transform .18s ease}.ngxsp-root.ngxsp-ui-visible .ngxsp-nfx-centerDock{opacity:1;transform:translateY(0) scale(1)}.ngxsp-nfx-center{height:96px;width:96px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:#f8f8f81f;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 60px #00000059}.ngxsp-nfx-side{height:58px;min-width:58px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#0808086b;color:#fff;padding:0 18px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ngxsp-nfx-side-wide{min-width:78px}.ngxsp-nfx-bottom{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 14px 14px;background:linear-gradient(to top,#070707eb,#070707b3);border:1px solid rgba(255,255,255,.1);border-radius:20px;gap:10px;flex-direction:column;align-items:stretch;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:4;opacity:0;transform:translateY(12px);transition:opacity .18s ease,transform .18s ease;box-shadow:0 16px 50px #00000052}.ngxsp-root.ngxsp-ui-visible .ngxsp-nfx-bottom{opacity:1;transform:translateY(0)}.ngxsp-nfx-metaRow{display:flex;align-items:center;gap:10px;width:100%}.ngxsp-nfx-time{opacity:.92;font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.ngxsp-nfx-range{min-width:100%}.ngxsp-nfx-volumeGroup{display:inline-flex;align-items:center;gap:8px}.ngxsp-nfx-volume{max-width:0;min-width:0;opacity:0;transform:scaleX(.72);transform-origin:left center;pointer-events:none;transition:opacity .18s ease,transform .18s ease,max-width .18s ease}.ngxsp-nfx-volumeGroup:hover .ngxsp-nfx-volume,.ngxsp-nfx-volumeGroup:focus-within .ngxsp-nfx-volume{max-width:160px;min-width:96px;opacity:1;transform:scaleX(1);pointer-events:auto}.ngxsp-nfx-label{font-size:12px;opacity:.72}.ngxsp-nfx-chip{background:#ffffff14;border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ngxsp-nfx-chip.accent{background:#563f1b80;border-color:#e8be763d;color:#f3d59c}.ngxsp-nfx-chip-quiet{background:#ffffff0d}.ngxsp-nfx-center:hover,.ngxsp-nfx-side:hover,.ngxsp-nfx-chip:hover{border-color:#ffffff4d;background:#1818189e}.ngxsp-nfx-center:disabled,.ngxsp-nfx-side:disabled{opacity:.38;cursor:not-allowed}.ngxsp-range{appearance:none;height:4px;border-radius:999px;background:linear-gradient(to right,#fffffff2,#ffffff47);outline:none}.ngxsp-range::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff29}.ngxsp-range::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff29}.ngxsp-range::-moz-range-track{height:4px;border:none;border-radius:999px;background:#ffffff38}.ngxsp-buffer{height:4px;border-radius:999px;background:#ffffff14;overflow:hidden}.ngxsp-bufferFill{height:100%;border-radius:999px;background:linear-gradient(to right,#f5f5f547,#f5f5f5d1)}.ngxsp-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding-top:6px}.ngxsp-menuCompact{grid-template-columns:minmax(180px,240px)}.ngxsp-menuSection{display:flex;flex-direction:column;gap:6px}.ngxsp-menuTitle{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.58}.ngxsp-menuItem{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:12px;padding:9px 11px;text-align:left;cursor:pointer;font-size:12px}.ngxsp-menuItem.active{border-color:#e8be7647;background:#563f1b61;color:#f3d59c}.ngxsp-menuHint{font-size:12px;opacity:.62;padding:8px 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SmartPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-smart-player', standalone: true, imports: [CommonModule], template: `
+  <div class="ngxsp-root" [class.ngxsp-skin-netflix]="uiSkin==='netflix'" [class.ngxsp-ui-visible]="uiVisible" [attr.data-kind]="state?.kind">
+    <div class="ngxsp-video" (dblclick)="toggleFullscreen()" (mousemove)="onInteraction()" (mouseenter)="onInteraction()" (mouseleave)="onPointerLeave()" (focusin)="onInteraction()" (touchstart)="onInteraction(true)" (click)="onRootClick($event)">
+      <video #video playsinline (timeupdate)="noop()" (loadedmetadata)="onLoadedMetadata()" (ended)="onEnded()"></video>
+@if (state?.kind==='error') {
+<div class="ngxsp-overlay" role="alert">
+  <div class="ngxsp-overlay-card">
+    <div class="ngxsp-overlay-title">Playback error</div>
+    <div class="ngxsp-overlay-msg">
+          <div style="font-weight:600; margin-bottom:6px;">{{errorTitle()}}</div>
+          <div style="opacity:.85; font-size: 13px; line-height: 1.3;">{{errorHint()}}</div>
+          <div style="margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;">
+	            <button type="button" class="ngxsp-btn" (click)="reload()">Retry</button>
+              @if (autoplayBlocked) {
+	            <button type="button" class="ngxsp-btn" (click)="tryPlay()">Play</button>
+              }
+          </div>
+        </div>
+  </div>
+</div>
+}
+
+@if (debug) {
+<details class="ngxsp-debug" (click)="$event.stopPropagation()">
+  <summary>Debug</summary>
+	  <div style="display:flex; gap:8px; margin:8px 0; flex-wrap:wrap;">
+	    <button type="button" class="ngxsp-btn" (click)="copyDebug()">Copy JSON</button>
+	    <button type="button" class="ngxsp-btn" (click)="downloadDebug()">Download</button>
+	  </div>
+  <pre>{{debugJson}}</pre>
+</details>
+}
+
+      @if (uiSkin==='netflix') {
+        <div class="ngxsp-nfx-top">
+          <div class="ngxsp-nfx-titleWrap">
+            <div class="ngxsp-nfx-eyebrow">Now Playing</div>
+            <div class="ngxsp-nfx-title">{{displayTitle}}</div>
+          </div>
+          <div class="ngxsp-nfx-spacer"></div>
+          <div class="ngxsp-nfx-status">{{ statusLabel() }}</div>
+          <div class="ngxsp-nfx-topHint">Double-click for fullscreen</div>
+        </div>
+
+        <div class="ngxsp-nfx-centerDock">
+          @if (hasPlaylistControls) {
+          <button type="button" class="ngxsp-nfx-side" (click)="emitPrev()" [disabled]="!canPrev" aria-label="Previous item">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.53 12 18 18.47v-12L9.53 12Zm-1.53 6.25a.75.75 0 0 0 1.25-.56V6.31a.75.75 0 0 0-1.25-.56L1.06 11.44a.75.75 0 0 0 0 1.12L8 18.25Z"/></svg>
+          </button>
+          }
+          <button type="button" class="ngxsp-nfx-side ngxsp-nfx-side-wide" (click)="seekRel(-10)" aria-label="Seek backward 10 seconds">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H5m0 0v4m0-4 4.5 4.5A7 7 0 1 1 5 12"/></svg>
+            <span class="ngxsp-iconBadge">10</span>
+          </button>
+          <button type="button" class="ngxsp-nfx-center" (click)="togglePlay()" aria-label="Play/Pause">
+            @if (state?.kind==='playing') {
+            <svg class="ngxsp-icon ngxsp-icon-lg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.5 5.25A1.25 1.25 0 0 1 8.75 6.5v11A1.25 1.25 0 0 1 6.25 17.5v-11A1.25 1.25 0 0 1 7.5 5.25Zm8 0a1.25 1.25 0 0 1 1.25 1.25v11a1.25 1.25 0 1 1-2.5 0v-11A1.25 1.25 0 0 1 15.5 5.25Z"/></svg>
+            } @else {
+            <svg class="ngxsp-icon ngxsp-icon-lg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8.25 6.82c0-1.3 1.43-2.1 2.54-1.43l8.12 4.93a1.96 1.96 0 0 1 0 3.36l-8.12 4.93a1.67 1.67 0 0 1-2.54-1.43V6.82Z"/></svg>
+            }
+          </button>
+          <button type="button" class="ngxsp-nfx-side ngxsp-nfx-side-wide" (click)="seekRel(10)" aria-label="Seek forward 10 seconds">
+            <span class="ngxsp-iconBadge">10</span>
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 5h4m0 0v4m0-4-4.5 4.5A7 7 0 1 0 19 12"/></svg>
+          </button>
+          @if (hasPlaylistControls) {
+          <button type="button" class="ngxsp-nfx-side" (click)="emitNext()" [disabled]="!canNext" aria-label="Next item">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14.47 12 6 5.53v12L14.47 12ZM16 5.75a.75.75 0 0 0-1.25.56v11.38a.75.75 0 0 0 1.25.56l6.94-5.69a.75.75 0 0 0 0-1.12L16 5.75Z"/></svg>
+          </button>
+          }
+        </div>
+
+        <div class="ngxsp-controls ngxsp-nfx-bottom">
+          <div class="ngxsp-nfx-metaRow">
+            <div class="ngxsp-nfx-time">{{fmtTime(currentTime)}} / {{fmtTime(duration)}}</div>
+            <div class="ngxsp-nfx-volumeGroup">
+              <button type="button" class="ngxsp-nfx-chip ngxsp-nfx-chip-quiet" (click)="toggleMute()" [attr.title]="volumeLabel()" [attr.aria-label]="volumeLabel()">
+                @if (volume <= 0.001) {
+                <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm3.5 5.5 5 5m0-5-5 5"/></svg>
+                } @else if (volume < 0.5) {
+                <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95"/></svg>
+                } @else {
+                <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95m2.75-7.7a7.5 7.5 0 0 1 0 10.45"/></svg>
+                }
+              </button>
+              <input class="ngxsp-range ngxsp-nfx-volume" type="range"
+                min="0" max="1" step="0.01"
+                [value]="volume"
+                (input)="onVolume(($any($event.target).value))"
+                aria-label="Volume"
+              />
+            </div>
+            <div class="ngxsp-nfx-spacer"></div>
+            @if (hasPlaylistControls) {
+            <button type="button" class="ngxsp-nfx-chip" [class.accent]="shuffleActive" (click)="toggleShuffle.emit()" [attr.title]="shuffleLabel" [attr.aria-label]="shuffleLabel">
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 6h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 6-4.5 4.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 7h3.2c1 0 1.95.4 2.66 1.1l6.28 6.3A3.75 3.75 0 0 0 18.82 15H20"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 15h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 18-4.56-4.56"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 17h3.2c1 0 1.95-.4 2.66-1.1l1.54-1.54"/></svg>
+            </button>
+            <button type="button" class="ngxsp-nfx-chip" [class.accent]="repeatMode !== 'off'" (click)="cycleRepeat.emit()" [attr.title]="repeatLabel" [attr.aria-label]="repeatLabel">
+              @if (repeatMode === 'one') {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/>
+                <text x="16.8" y="17.6" fill="currentColor" stroke="none" font-size="7.5" font-weight="700" text-anchor="middle">1</text>
+              </svg>
+              } @else {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/></svg>
+              }
+            </button>
+            }
+            <button type="button" class="ngxsp-nfx-chip" (click)="toggleMenu('tracks')" [attr.title]="tracksButtonLabel()" [attr.aria-label]="tracksButtonLabel()">
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 6.75h16M4 12h16M4 17.25h16"/></svg>
+            </button>
+            <button type="button" class="ngxsp-nfx-chip" (click)="subtitles.emit()" [attr.title]="captionsLabel()" [attr.aria-label]="captionsLabel()">
+              @if (selectedTextTrackId !== null) {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/></svg>
+              } @else {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/><path stroke-linecap="round" stroke-width="1.8" d="M6 6l12 12"/></svg>
+              }
+            </button>
+            <button type="button" class="ngxsp-nfx-chip" (click)="toggleMenu('speed')" [attr.title]="playbackRateLabel()" [attr.aria-label]="playbackRateLabel()">
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5.25 5.82c0-1.3 1.43-2.1 2.54-1.43l5.71 3.47a1.96 1.96 0 0 1 0 3.36L7.79 14.7a1.67 1.67 0 0 1-2.54-1.43V5.82Zm8.5 0c0-1.3 1.43-2.1 2.54-1.43L22 7.86a1.96 1.96 0 0 1 0 3.36l-5.71 3.47a1.67 1.67 0 0 1-2.54-1.43V5.82Z"/></svg>
+            </button>
+            @if (isPiPSupported()) {
+            <button type="button" class="ngxsp-nfx-chip" (click)="togglePiP()" [attr.title]="pipLabel()" [attr.aria-label]="pipLabel()">
+              @if (isPiPActive()) {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" fill="currentColor" stroke="none"/></svg>
+              } @else {
+              <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" stroke-width="1.8"/></svg>
+              }
+            </button>
+            }
+          </div>
+
+          <input class="ngxsp-range ngxsp-nfx-range" type="range"
+            min="0" [max]="duration || 0" step="0.1"
+            [value]="currentTime"
+            (input)="onScrub(($any($event.target).value))"
+            aria-label="Seek"
+          />
+
+          <div class="ngxsp-nfx-metaRow">
+            <div class="ngxsp-nfx-spacer"></div>
+            <div class="ngxsp-nfx-label">{{ keyboardHintLabel() }}</div>
+          </div>
+
+          <div class="ngxsp-buffer" aria-hidden="true">
+            <div class="ngxsp-bufferFill" [style.width.%]="bufferPercent()"></div>
+          </div>
+
+          @if (openMenu === 'tracks') {
+          <div class="ngxsp-menu" (click)="$event.stopPropagation()">
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Captions</div>
+              <button type="button" class="ngxsp-menuItem" [class.active]="selectedTextTrackId === null" (click)="selectTextTrack(null)">Off</button>
+              @for (track of textTracks; track track.id) {
+              <button type="button" class="ngxsp-menuItem" [class.active]="selectedTextTrackId === track.id" (click)="selectTextTrack(track.id)">
+                {{ trackLabel(track) }}
+              </button>
+              }
+            </div>
+
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Audio</div>
+              @if (audioTracks.length) {
+                @for (track of audioTracks; track track.id) {
+                <button type="button" class="ngxsp-menuItem" [class.active]="selectedAudioTrackId === track.id" (click)="selectAudioTrack(track.id)">
+                  {{ trackLabel(track) }}
+                </button>
+                }
+              } @else {
+                <div class="ngxsp-menuHint">Single audio track</div>
+              }
+            </div>
+
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Quality</div>
+              <button type="button" class="ngxsp-menuItem" [class.active]="selectedVideoTrackId === null" (click)="selectVideoTrack(null)">Auto</button>
+              @if (videoTracks.length) {
+                @for (track of videoTracks; track track.id) {
+                <button type="button" class="ngxsp-menuItem" [class.active]="selectedVideoTrackId === track.id" (click)="selectVideoTrack(track.id)">
+                  {{ qualityLabel(track) }}
+                </button>
+                }
+              } @else {
+                <div class="ngxsp-menuHint">Single quality</div>
+              }
+            </div>
+          </div>
+          }
+
+          @if (openMenu === 'speed') {
+          <div class="ngxsp-menu ngxsp-menuCompact" (click)="$event.stopPropagation()">
+            <div class="ngxsp-menuSection">
+              <div class="ngxsp-menuTitle">Playback speed</div>
+              @for (rate of playbackRates; track rate) {
+              <button type="button" class="ngxsp-menuItem" [class.active]="playbackRate === rate" (click)="setPlaybackRate(rate)">
+                {{ rate }}x
+              </button>
+              }
+            </div>
+          </div>
+          }
+        </div>
+      } @else {
+        <div class="ngxsp-controls">
+          <button type="button" class="ngxsp-btn" (click)="togglePlay()" aria-label="Play/Pause" title="Play/Pause">
+            @if (state?.kind==='playing') {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7.5 5.25A1.25 1.25 0 0 1 8.75 6.5v11A1.25 1.25 0 0 1 6.25 17.5v-11A1.25 1.25 0 0 1 7.5 5.25Zm8 0a1.25 1.25 0 0 1 1.25 1.25v11a1.25 1.25 0 1 1-2.5 0v-11A1.25 1.25 0 0 1 15.5 5.25Z"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8.25 6.82c0-1.3 1.43-2.1 2.54-1.43l8.12 4.93a1.96 1.96 0 0 1 0 3.36l-8.12 4.93a1.67 1.67 0 0 1-2.54-1.43V6.82Z"/></svg>
+            }
+          </button>
+          <button type="button" class="ngxsp-btn" (click)="seekRel(-10)" aria-label="Seek backward 10 seconds" title="Seek backward 10 seconds">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 5H5m0 0v4m0-4 4.5 4.5A7 7 0 1 1 5 12"/></svg>
+            <span class="ngxsp-iconBadge">10</span>
+          </button>
+          <button type="button" class="ngxsp-btn" (click)="seekRel(10)" aria-label="Seek forward 10 seconds" title="Seek forward 10 seconds">
+            <span class="ngxsp-iconBadge">10</span>
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 5h4m0 0v4m0-4-4.5 4.5A7 7 0 1 0 19 12"/></svg>
+          </button>
+          @if (hasPlaylistControls) {
+          <button type="button" class="ngxsp-btn" (click)="emitPrev()" [disabled]="!canPrev" aria-label="Previous item" title="Previous item"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.53 12 18 18.47v-12L9.53 12Zm-1.53 6.25a.75.75 0 0 0 1.25-.56V6.31a.75.75 0 0 0-1.25-.56L1.06 11.44a.75.75 0 0 0 0 1.12L8 18.25Z"/></svg></button>
+          <button type="button" class="ngxsp-btn" (click)="emitNext()" [disabled]="!canNext" aria-label="Next item" title="Next item"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14.47 12 6 5.53v12L14.47 12ZM16 5.75a.75.75 0 0 0-1.25.56v11.38a.75.75 0 0 0 1.25.56l6.94-5.69a.75.75 0 0 0 0-1.12L16 5.75Z"/></svg></button>
+          <button type="button" class="ngxsp-btn" [class.accent]="shuffleActive" (click)="toggleShuffle.emit()" [attr.title]="shuffleLabel" [attr.aria-label]="shuffleLabel">
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 6h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 6-4.5 4.5"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 7h3.2c1 0 1.95.4 2.66 1.1l6.28 6.3A3.75 3.75 0 0 0 18.82 15H20"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 15h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m20 18-4.56-4.56"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 17h3.2c1 0 1.95-.4 2.66-1.1l1.54-1.54"/></svg>
+          </button>
+          <button type="button" class="ngxsp-btn" [class.accent]="repeatMode !== 'off'" (click)="cycleRepeat.emit()" [attr.title]="repeatLabel" [attr.aria-label]="repeatLabel">
+            @if (repeatMode === 'one') {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/>
+              <text x="16.8" y="17.6" fill="currentColor" stroke="none" font-size="7.5" font-weight="700" text-anchor="middle">1</text>
+            </svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 4h3v3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-2.8-2.8A4 4 0 0 0 14.37 3H8a4 4 0 0 0-4 4v1"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M7 20H4v-3"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m4 17 2.8 2.8A4 4 0 0 0 9.63 21H16a4 4 0 0 0 4-4v-1"/></svg>
+            }
+          </button>
+          }
+          <button type="button" class="ngxsp-btn" (click)="toggleMenu('tracks')" [attr.title]="tracksButtonLabel()" [attr.aria-label]="tracksButtonLabel()"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 6.75h16M4 12h16M4 17.25h16"/></svg></button>
+          <button type="button" class="ngxsp-btn" (click)="subtitles.emit()" [attr.title]="captionsLabel()" [attr.aria-label]="captionsLabel()">
+            @if (selectedTextTrackId !== null) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><path stroke-linecap="round" stroke-width="1.8" d="M8 11.25h2.5m2 0H14m2 0h.5M8 14.75h3.5m2 0H16"/><path stroke-linecap="round" stroke-width="1.8" d="M6 6l12 12"/></svg>
+            }
+          </button>
+          <button type="button" class="ngxsp-btn" (click)="toggleMenu('speed')" [attr.title]="playbackRateLabel()" [attr.aria-label]="playbackRateLabel()"><svg class="ngxsp-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5.25 5.82c0-1.3 1.43-2.1 2.54-1.43l5.71 3.47a1.96 1.96 0 0 1 0 3.36L7.79 14.7a1.67 1.67 0 0 1-2.54-1.43V5.82Zm8.5 0c0-1.3 1.43-2.1 2.54-1.43L22 7.86a1.96 1.96 0 0 1 0 3.36l-5.71 3.47a1.67 1.67 0 0 1-2.54-1.43V5.82Z"/></svg></button>
+          @if (isPiPSupported()) {
+          <button type="button" class="ngxsp-btn" (click)="togglePiP()" [attr.title]="pipLabel()" [attr.aria-label]="pipLabel()">
+            @if (isPiPActive()) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" fill="currentColor" stroke="none"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5" stroke-width="1.8"/><rect x="12.25" y="11.25" width="5.25" height="4.5" rx="1" stroke-width="1.8"/></svg>
+            }
+          </button>
+          }
+          <button type="button" class="ngxsp-btn" (click)="toggleMute()" [attr.title]="volumeLabel()" [attr.aria-label]="volumeLabel()">
+            @if (volume <= 0.001) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm3.5 5.5 5 5m0-5-5 5"/></svg>
+            } @else if (volume < 0.5) {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95"/></svg>
+            } @else {
+            <svg class="ngxsp-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M11 5 6.5 9H3.75v6h2.75L11 19V5Zm4.5 4.75a3.5 3.5 0 0 1 0 4.95m2.75-7.7a7.5 7.5 0 0 1 0 10.45"/></svg>
+            }
+          </button>
+
+          <input class="ngxsp-range" type="range"
+            min="0" [max]="duration || 0" step="0.1"
+            [value]="currentTime"
+            (input)="onScrub(($any($event.target).value))"
+          />
+
+          <div class="ngxsp-time">{{fmtTime(currentTime)}} / {{fmtTime(duration)}}</div>
+
+          <input class="ngxsp-range" style="max-width:140px" type="range"
+            min="0" max="1" step="0.01"
+            [value]="volume"
+            (input)="onVolume(($any($event.target).value))"
+            aria-label="Volume"
+          />
+        </div>
+      }
+
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ngxsp-root{position:relative;width:100%;height:100%;background:#000;color:#fff;font-family:system-ui,sans-serif}.ngxsp-video{position:relative;width:100%;height:100%;isolation:isolate}.ngxsp-video video{width:100%;height:100%;display:block;background:#000;object-fit:contain}.ngxsp-controls{display:flex;gap:8px;align-items:center;padding:10px;flex-wrap:wrap}.ngxsp-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ngxsp-btn.accent{background:#563f1b80;border-color:#e8be763d;color:#f3d59c}.ngxsp-icon{width:18px;height:18px;display:block;flex:0 0 auto}.ngxsp-icon-lg{width:32px;height:32px}.ngxsp-iconBadge{font-size:11px;font-weight:800;line-height:1}.ngxsp-range{flex:1;min-width:160px}.ngxsp-time{opacity:.85;font-variant-numeric:tabular-nums}.ngxsp-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000000b3;padding:20px;text-align:center}.ngxsp-debug{position:absolute;top:12px;right:12px;z-index:6;margin:0;max-width:min(420px,calc(100% - 24px));opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}.ngxsp-root.ngxsp-ui-visible .ngxsp-debug,.ngxsp-debug[open]{opacity:1;transform:translateY(0)}.ngxsp-debug summary{cursor:pointer;list-style:none;background:#0a0a0ad1;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 12px;width:max-content;margin-left:auto}.ngxsp-debug[open]{background:#0a0a0aeb;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px;max-height:calc(100% - 24px);overflow:auto}.ngxsp-overlay-title{font-size:18px;font-weight:600}.ngxsp-overlay-msg{opacity:.9;max-width:720px}.ngxsp-skin-netflix .ngxsp-video{position:relative}.ngxsp-skin-netflix .ngxsp-video:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,#0000 32%,#00000038);opacity:.85;pointer-events:none;z-index:0}.ngxsp-skin-netflix .ngxsp-video:after{content:\"\";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(to top,#000000e6,#0000007a 38%,#0000);opacity:0;transition:opacity .18s ease;pointer-events:none}.ngxsp-skin-netflix.ngxsp-ui-visible .ngxsp-video:after{opacity:1}.ngxsp-nfx-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:12px;padding:18px 18px 22px;background:linear-gradient(to bottom,#000000c7,#0000);pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:3}.ngxsp-root.ngxsp-ui-visible .ngxsp-nfx-top{opacity:1}.ngxsp-nfx-titleWrap{display:flex;flex-direction:column;gap:3px}.ngxsp-nfx-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.62}.ngxsp-nfx-title{font-weight:700;letter-spacing:.01em;opacity:.98;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6);font-size:18px}.ngxsp-nfx-topHint{font-size:12px;opacity:.6;padding-top:4px}.ngxsp-nfx-status{font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;opacity:.78}.ngxsp-nfx-spacer{flex:1}.ngxsp-nfx-centerDock{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:flex;align-items:center;gap:14px;z-index:4;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .18s ease,transform .18s ease}.ngxsp-root.ngxsp-ui-visible .ngxsp-nfx-centerDock{opacity:1;transform:translateY(0) scale(1)}.ngxsp-nfx-center{height:96px;width:96px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:#f8f8f81f;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 60px #00000059}.ngxsp-nfx-side{height:58px;min-width:58px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#0808086b;color:#fff;padding:0 18px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ngxsp-nfx-side-wide{min-width:78px}.ngxsp-nfx-bottom{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 14px 14px;background:linear-gradient(to top,#070707eb,#070707b3);border:1px solid rgba(255,255,255,.1);border-radius:20px;gap:10px;flex-direction:column;align-items:stretch;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:4;opacity:0;transform:translateY(12px);transition:opacity .18s ease,transform .18s ease;box-shadow:0 16px 50px #00000052}.ngxsp-root.ngxsp-ui-visible .ngxsp-nfx-bottom{opacity:1;transform:translateY(0)}.ngxsp-nfx-metaRow{display:flex;align-items:center;gap:10px;width:100%}.ngxsp-nfx-time{opacity:.92;font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.ngxsp-nfx-range{min-width:100%}.ngxsp-nfx-volumeGroup{display:inline-flex;align-items:center;gap:8px}.ngxsp-nfx-volume{max-width:0;min-width:0;opacity:0;transform:scaleX(.72);transform-origin:left center;pointer-events:none;transition:opacity .18s ease,transform .18s ease,max-width .18s ease}.ngxsp-nfx-volumeGroup:hover .ngxsp-nfx-volume,.ngxsp-nfx-volumeGroup:focus-within .ngxsp-nfx-volume{max-width:160px;min-width:96px;opacity:1;transform:scaleX(1);pointer-events:auto}.ngxsp-nfx-label{font-size:12px;opacity:.72}.ngxsp-nfx-chip{background:#ffffff14;border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.ngxsp-nfx-chip.accent{background:#563f1b80;border-color:#e8be763d;color:#f3d59c}.ngxsp-nfx-chip-quiet{background:#ffffff0d}.ngxsp-nfx-center:hover,.ngxsp-nfx-side:hover,.ngxsp-nfx-chip:hover{border-color:#ffffff4d;background:#1818189e}.ngxsp-nfx-center:disabled,.ngxsp-nfx-side:disabled{opacity:.38;cursor:not-allowed}.ngxsp-range{appearance:none;height:4px;border-radius:999px;background:linear-gradient(to right,#fffffff2,#ffffff47);outline:none}.ngxsp-range::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff29}.ngxsp-range::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #ffffff29}.ngxsp-range::-moz-range-track{height:4px;border:none;border-radius:999px;background:#ffffff38}.ngxsp-buffer{height:4px;border-radius:999px;background:#ffffff14;overflow:hidden}.ngxsp-bufferFill{height:100%;border-radius:999px;background:linear-gradient(to right,#f5f5f547,#f5f5f5d1)}.ngxsp-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding-top:6px}.ngxsp-menuCompact{grid-template-columns:minmax(180px,240px)}.ngxsp-menuSection{display:flex;flex-direction:column;gap:6px}.ngxsp-menuTitle{font-size:11px;text-transform:uppercase;letter-spacing:.14em;opacity:.58}.ngxsp-menuItem{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:12px;padding:9px 11px;text-align:left;cursor:pointer;font-size:12px}.ngxsp-menuItem.active{border-color:#e8be7647;background:#563f1b61;color:#f3d59c}.ngxsp-menuHint{font-size:12px;opacity:.62;padding:8px 2px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input,
+                args: [{ required: true }]
+            }], plugins: [{
+                type: Input
+            }], ports: [{
+                type: Input
+            }], engines: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], startTimeSec: [{
+                type: Input
+            }], canPrev: [{
+                type: Input
+            }], canNext: [{
+                type: Input
+            }], shuffleActive: [{
+                type: Input
+            }], shuffleLabel: [{
+                type: Input
+            }], repeatMode: [{
+                type: Input
+            }], repeatLabel: [{
+                type: Input
+            }], hasPlaylistControls: [{
+                type: Input
+            }], ended: [{
+                type: Output
+            }], videoSize: [{
+                type: Output
+            }], progress: [{
+                type: Output
+            }], prev: [{
+                type: Output
+            }], next: [{
+                type: Output
+            }], toggleShuffle: [{
+                type: Output
+            }], cycleRepeat: [{
+                type: Output
+            }], subtitles: [{
+                type: Output
+            }], videoEl: [{
+                type: ViewChild,
+                args: ['video', { static: true }]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+/**
+ * Register provider implementations for subtitles/metadata.
+ * You can call this in your app `bootstrapApplication()` providers array.
+ */
+function provideSmartPlayer(cfg) {
+    return makeEnvironmentProviders([
+        { provide: 'SMART_PLAYER_SUBTITLE_PROVIDERS', useValue: cfg.subtitleProviders ?? [] },
+        { provide: 'SMART_PLAYER_METADATA_PROVIDERS', useValue: cfg.metadataProviders ?? [] }
+    ]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SmartPlayerComponent, provideSmartPlayer };
+//# sourceMappingURL=ngxsplayer-ngx-smart-player.mjs.map