@shival99/z-ui 2.3.9 → 2.3.11

package/fesm2022/shival99-z-ui-components-z-media-player.mjs

@@ -1,9 +1,10 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, output, viewChild, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ElementRef, NgZone, input, output, viewChild, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { DomSanitizer } from '@angular/platform-browser';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
@@ -11,10 +12,26 @@ import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
 import { zMergeClasses } from '@shival99/z-ui/utils';
 import { cva } from 'class-variance-authority';
 
+/** Matches youtube.com/watch, youtu.be, youtube.com/embed and /shorts links, capturing the 11-char video id. */
+const YOUTUBE_URL_PATTERN = /(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/;
+/** Every control group renders by default; pass `zControls` to opt specific groups out. */
+const DEFAULT_MEDIA_PLAYER_CONTROLS = {
+    play: true,
+    volume: true,
+    skip: true,
+    time: true,
+    timeline: true,
+    subtitles: true,
+    settings: true,
+    pip: true,
+    theater: true,
+    fullscreen: true,
+};
+
 const zMediaPlayerVariants = cva('relative overflow-hidden bg-black select-none transition-all duration-300 w-full flex flex-col justify-center items-center group/player outline-none', {
     variants: {
         zLayout: {
-            default: 'aspect-video rounded-md shadow-md max-w-5xl mx-auto',
+            default: 'aspect-video rounded-sm shadow-sm border border-border max-w-5xl mx-auto',
             theater: 'w-full aspect-[21/9] max-w-full',
             fullscreen: 'fixed inset-0 w-screen h-screen z-[9999] rounded-none max-w-full aspect-none',
         },
@@ -26,6 +43,8 @@ const zMediaPlayerVariants = cva('relative overflow-hidden bg-black select-none
 
 class ZMediaPlayerComponent {
     _elementRef = inject((ElementRef));
+    _ngZone = inject(NgZone);
+    _sanitizer = inject(DomSanitizer);
     // Inputs
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
@@ -45,7 +64,15 @@ class ZMediaPlayerComponent {
     ...(ngDevMode ? [{ debugName: "zVolume" }] : /* istanbul ignore next */ []));
     zSubtitles = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zSubtitles" }] : /* istanbul ignore next */ []));
+    /** URL to a WebVTT storyboard file powering the YouTube-style timeline hover preview. */
+    zThumbnailsVtt = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zThumbnailsVtt" }] : /* istanbul ignore next */ []));
+    /** Toggles which control bar groups render. Unset groups default to visible. */
+    zControls = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zControls" }] : /* istanbul ignore next */ []));
     // Outputs
+    zLoaded = output();
+    zError = output();
     zPlay = output();
     zTimeUpdate = output();
     zVolumeChange = output();
@@ -58,6 +85,8 @@ class ZMediaPlayerComponent {
     ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
     timelineContainer = viewChild('timelineContainer', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "timelineContainer" }] : /* istanbul ignore next */ []));
+    _settingsPopover = viewChild(ZPopoverDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_settingsPopover" }] : /* istanbul ignore next */ []));
     // Component Signals trạng thái trình phát
     isPlaying = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
@@ -73,12 +102,20 @@ class ZMediaPlayerComponent {
     ...(ngDevMode ? [{ debugName: "playbackSpeed" }] : /* istanbul ignore next */ []));
     activeSourceSrc = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeSourceSrc" }] : /* istanbul ignore next */ []));
+    _activeQualitySourceLabel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_activeQualitySourceLabel" }] : /* istanbul ignore next */ []));
     showControls = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showControls" }] : /* istanbul ignore next */ []));
+    isPointerOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPointerOver" }] : /* istanbul ignore next */ []));
     isBuffering = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isBuffering" }] : /* istanbul ignore next */ []));
     captionsEnabled = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "captionsEnabled" }] : /* istanbul ignore next */ []));
+    subtitleText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitleText" }] : /* istanbul ignore next */ []));
+    hasSubtitles = computed(() => this.zSubtitles().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSubtitles" }] : /* istanbul ignore next */ []));
     isTheaterMode = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isTheaterMode" }] : /* istanbul ignore next */ []));
     isFullscreen = signal(false, /* @ts-ignore */
@@ -94,21 +131,21 @@ class ZMediaPlayerComponent {
     // Tiến trình đệm và phát
     bufferedProgress = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bufferedProgress" }] : /* istanbul ignore next */ []));
-    progress = computed(() => {
-        const dur = this.duration();
-        if (dur === 0) {
-            return 0;
-        }
-        return (this.currentTime() / dur) * 100;
-    }, /* @ts-ignore */
+    progress = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
     // Trạng thái visual hiển thị
     playPauseFlash = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "playPauseFlash" }] : /* istanbul ignore next */ []));
     hoverTimeLabel = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hoverTimeLabel" }] : /* istanbul ignore next */ []));
+    hoverTime = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverTime" }] : /* istanbul ignore next */ []));
     hoverX = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hoverX" }] : /* istanbul ignore next */ []));
+    // Storyboard thumbnails cho preview khi hover timeline (kiểu YouTube)
+    _thumbnailCues = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_thumbnailCues" }] : /* istanbul ignore next */ []));
+    _positionedSubtitleTracks = new WeakSet();
     // Lớp phủ tua nhanh nhảy số cộng dồn kiểu YouTube
     skipOverlayDirection = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "skipOverlayDirection" }] : /* istanbul ignore next */ []));
@@ -129,9 +166,10 @@ class ZMediaPlayerComponent {
         }
         const video = this.videoElement()?.nativeElement;
         if (video) {
+            const supportsPresentationMode = video.webkitSupportsPresentationMode;
             const hasWebkit = 'webkitSupportsPresentationMode' in video &&
-                typeof video.webkitSupportsPresentationMode === 'function' &&
-                video.webkitSupportsPresentationMode('picture-in-picture');
+                typeof supportsPresentationMode === 'function' &&
+                supportsPresentationMode.call(video, 'picture-in-picture');
             return !!hasWebkit;
         }
         const hasWebkitProto = typeof HTMLVideoElement !== 'undefined' &&
@@ -154,7 +192,11 @@ class ZMediaPlayerComponent {
     _controlsTimeout = null;
     _flashTimeout = null;
     _skipOverlayTimeout = null;
-    _clickTimeout = null;
+    _bufferAnimationFrame = null;
+    _playbackAnimationFrame = null;
+    _mouseMoveCleanup = null;
+    _lastMouseMoveAt = 0;
+    _bufferedTarget = 0;
     _accumulatedSkip = 0;
     // Cập nhật CVA class dựa trên các trạng thái giao diện
     zClasses = computed(() => {
@@ -173,24 +215,62 @@ class ZMediaPlayerComponent {
     ...(ngDevMode ? [{ debugName: "currentTimeLabel" }] : /* istanbul ignore next */ []));
     durationLabel = computed(() => this._formatTime(this.duration()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "durationLabel" }] : /* istanbul ignore next */ []));
+    controls = computed(() => ({
+        ...DEFAULT_MEDIA_PLAYER_CONTROLS,
+        ...this.zControls(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
     effectiveSrc = computed(() => this.activeSourceSrc() ?? this.zSrc(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectiveSrc" }] : /* istanbul ignore next */ []));
     qualitySources = computed(() => this.zSources().filter(source => !!source.src), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "qualitySources" }] : /* istanbul ignore next */ []));
-    activeQualityLabel = computed(() => {
-        const activeSrc = this.effectiveSrc();
-        return this.qualitySources().find(source => source.src === activeSrc)?.label ?? 'Auto';
-    }, /* @ts-ignore */
+    activeQualityLabel = computed(() => this._activeQualitySourceLabel() ?? this.qualitySources()[0]?.label ?? 'Auto', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeQualityLabel" }] : /* istanbul ignore next */ []));
+    // Nhận diện link YouTube để nhúng iframe gốc thay vì thẻ <video>
+    youtubeVideoId = computed(() => YOUTUBE_URL_PATTERN.exec(this.effectiveSrc())?.[1] ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "youtubeVideoId" }] : /* istanbul ignore next */ []));
+    isYouTube = computed(() => this.youtubeVideoId() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isYouTube" }] : /* istanbul ignore next */ []));
+    youtubeEmbedUrl = computed(() => {
+        const id = this.youtubeVideoId();
+        if (!id) {
+            return null;
+        }
+        const params = new URLSearchParams({
+            autoplay: this.zAutoplay() ? '1' : '0',
+            mute: this.zMuted() ? '1' : '0',
+            loop: this.zLoop() ? '1' : '0',
+            playsinline: '1',
+            rel: '0',
+            modestbranding: '1',
+        });
+        if (this.zLoop()) {
+            params.set('playlist', id);
+        }
+        return this._sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube-nocookie.com/embed/${id}?${params.toString()}`);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "youtubeEmbedUrl" }] : /* istanbul ignore next */ []));
+    // Cue storyboard đang khớp với thời điểm đang hover trên timeline
+    hoverThumbnailCue = computed(() => {
+        const time = this.hoverTime();
+        const cues = this._thumbnailCues();
+        if (time === null || cues.length === 0) {
+            return null;
+        }
+        return cues.find(cue => time >= cue.start && time < cue.end) ?? cues[cues.length - 1];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverThumbnailCue" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const fallbackSrc = this.zSrc();
             const sources = this.qualitySources();
-            const currentSrc = this.activeSourceSrc();
-            if (currentSrc && (currentSrc === fallbackSrc || sources.some(source => source.src === currentSrc))) {
+            const currentLabel = this._activeQualitySourceLabel();
+            if (currentLabel && sources.some(source => source.label === currentLabel)) {
                 return;
             }
-            this.activeSourceSrc.set(sources[0]?.src ?? fallbackSrc);
+            const defaultSource = sources[0] ?? null;
+            this.activeSourceSrc.set(defaultSource?.src ?? fallbackSrc);
+            this._activeQualitySourceLabel.set(defaultSource?.label ?? null);
         });
         effect(() => {
             const src = this.effectiveSrc();
@@ -202,11 +282,47 @@ class ZMediaPlayerComponent {
                 video.load();
             }
         });
+        effect(() => {
+            const vttUrl = this.zThumbnailsVtt();
+            if (!vttUrl) {
+                this._thumbnailCues.set([]);
+                return;
+            }
+            void this._loadThumbnailVtt(vttUrl);
+        });
+        effect(() => {
+            this.showControls();
+            this.isFullscreen();
+            const video = this.videoElement()?.nativeElement;
+            if (!video || !this.captionsEnabled()) {
+                return;
+            }
+            let i = 0;
+            while (i < video.textTracks.length) {
+                this._positionSubtitleCues(video.textTracks[i]);
+                i++;
+            }
+        });
         afterNextRender(() => {
             this._initializeVideoState();
+            this._ngZone.runOutsideAngular(() => {
+                const host = this._elementRef.nativeElement;
+                const onMouseMove = () => {
+                    this.isPointerOver.set(true);
+                    const now = performance.now();
+                    if (this.showControls() && now - this._lastMouseMoveAt < 200) {
+                        return;
+                    }
+                    this._lastMouseMoveAt = now;
+                    this._resetControlsTimer();
+                };
+                host.addEventListener('mousemove', onMouseMove, { passive: true });
+                this._mouseMoveCleanup = () => host.removeEventListener('mousemove', onMouseMove);
+            });
         });
     }
     ngOnDestroy() {
+        this._mouseMoveCleanup?.();
         if (this._controlsTimeout) {
             clearTimeout(this._controlsTimeout);
         }
@@ -216,8 +332,11 @@ class ZMediaPlayerComponent {
         if (this._skipOverlayTimeout) {
             clearTimeout(this._skipOverlayTimeout);
         }
-        if (this._clickTimeout) {
-            clearTimeout(this._clickTimeout);
+        if (this._bufferAnimationFrame !== null) {
+            cancelAnimationFrame(this._bufferAnimationFrame);
+        }
+        if (this._playbackAnimationFrame !== null) {
+            cancelAnimationFrame(this._playbackAnimationFrame);
         }
     }
     // Khởi tạo trạng thái âm lượng và tắt tiếng khi bắt đầu render
@@ -299,7 +418,18 @@ class ZMediaPlayerComponent {
     onSettingsHidden() {
         this.showSettings.set(false);
         this.closeSettingsPanel();
-        this.onMouseMove();
+        if (this._controlsTimeout) {
+            clearTimeout(this._controlsTimeout);
+            this._controlsTimeout = null;
+        }
+        if (!this.isPointerOver()) {
+            this.showControls.set(false);
+            return;
+        }
+        this._controlsTimeout = setTimeout(() => {
+            this.showControls.set(false);
+            this._controlsTimeout = null;
+        }, 1000);
     }
     toggleInlineSettings() {
         const nextVisible = !this.showSettings();
@@ -310,7 +440,13 @@ class ZMediaPlayerComponent {
         this.onMouseMove();
     }
     setQualitySource(source) {
+        if (source.label === this.activeQualityLabel()) {
+            this.closeSettingsPanel();
+            return;
+        }
         if (source.src === this.effectiveSrc()) {
+            this._activeQualitySourceLabel.set(source.label);
+            this.zQualityChange.emit(source);
             this.closeSettingsPanel();
             return;
         }
@@ -334,7 +470,8 @@ class ZMediaPlayerComponent {
             video.addEventListener('loadeddata', restorePosition, { once: true });
         }
         this.activeSourceSrc.set(source.src);
-        this.bufferedProgress.set(0);
+        this._activeQualitySourceLabel.set(source.label);
+        this._setBufferedTarget(0);
         this.zQualityChange.emit(source);
         this.closeSettingsPanel();
     }
@@ -346,6 +483,7 @@ class ZMediaPlayerComponent {
         }
         video.currentTime = time;
         this.currentTime.set(time);
+        this._syncPlaybackProgress(time);
     }
     // Bật/tắt chế độ rạp phim (Theater Mode)
     toggleTheaterMode() {
@@ -401,6 +539,9 @@ class ZMediaPlayerComponent {
                 webkitVideo.webkitSupportsPresentationMode('picture-in-picture')) {
                 const currentMode = webkitVideo.webkitPresentationMode;
                 const targetMode = currentMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture';
+                if (typeof webkitVideo.webkitSetPresentationMode !== 'function') {
+                    return;
+                }
                 webkitVideo.webkitSetPresentationMode(targetMode);
                 const isPiP = targetMode === 'picture-in-picture';
                 this.isMiniplayer.set(isPiP);
@@ -439,14 +580,71 @@ class ZMediaPlayerComponent {
         this.captionsEnabled.set(targetState);
         let i = 0;
         while (i < tracks.length) {
-            tracks[i].mode = targetState ? 'showing' : 'disabled';
+            const track = tracks[i];
+            track.mode = targetState ? 'showing' : 'disabled';
+            if (targetState) {
+                this._positionSubtitleCues(track);
+            }
             i++;
         }
+        if (!targetState) {
+            this.subtitleText.set('');
+            return;
+        }
+        this._updateSubtitleText(tracks);
+    }
+    _positionSubtitleCues(track) {
+        if (!this._positionedSubtitleTracks.has(track) && typeof track.addEventListener === 'function') {
+            track.addEventListener('cuechange', () => {
+                this._positionSubtitleCues(track);
+                this._updateSubtitleText(this.videoElement()?.nativeElement.textTracks);
+            });
+            this._positionedSubtitleTracks.add(track);
+        }
+        const cues = track.activeCues;
+        if (!cues) {
+            return;
+        }
+        let i = 0;
+        while (i < cues.length) {
+            const cue = cues[i];
+            if (typeof VTTCue !== 'undefined' && cue instanceof VTTCue) {
+                cue.line = 0;
+            }
+            i++;
+        }
+    }
+    _updateSubtitleText(tracks) {
+        if (!tracks) {
+            this.subtitleText.set('');
+            return;
+        }
+        let i = 0;
+        while (i < tracks.length) {
+            const cues = tracks[i].activeCues;
+            if (cues && cues.length > 0) {
+                const cue = cues[0];
+                if ('text' in cue && typeof cue.text === 'string') {
+                    this.subtitleText.set(cue.text);
+                    return;
+                }
+            }
+            i++;
+        }
+        this.subtitleText.set('');
     }
     // Cập nhật trạng thái khi video phát/dừng
     onPlayStateChange(playing) {
         this.isPlaying.set(playing);
         this.zPlay.emit(playing);
+        if (!playing) {
+            const video = this.videoElement()?.nativeElement;
+            this._stopPlaybackProgressLoop();
+            this._syncPlaybackProgress(video?.currentTime ?? this.currentTime());
+            this._resetControlsTimer();
+            return;
+        }
+        this._startPlaybackProgressLoop();
         this._resetControlsTimer();
     }
     // Cập nhật mốc thời gian phát
@@ -457,6 +655,7 @@ class ZMediaPlayerComponent {
         }
         this.currentTime.set(video.currentTime);
         this.zTimeUpdate.emit(video.currentTime);
+        this._syncPlaybackProgress(video.currentTime);
         this.updateBufferedProgress();
     }
     onDurationChange() {
@@ -465,9 +664,24 @@ class ZMediaPlayerComponent {
             return;
         }
         this.duration.set(video.duration);
+        this._syncPlaybackProgress(video.currentTime);
+        this.updateBufferedProgress();
+    }
+    onLoadedData() {
+        if (this.zSubtitles().some(subtitle => subtitle.default)) {
+            this.captionsEnabled.set(true);
+        }
+        this.zLoaded.emit();
+    }
+    onVideoError() {
+        const video = this.videoElement()?.nativeElement;
+        this.zError.emit(video?.error ? new Error(video.error.message || 'Media playback error') : null);
     }
     onSeeking(seeking) {
         this.isBuffering.set(seeking);
+        if (!seeking) {
+            this.updateBufferedProgress();
+        }
     }
     updateBufferedProgress() {
         const video = this.videoElement()?.nativeElement;
@@ -475,7 +689,56 @@ class ZMediaPlayerComponent {
             return;
         }
         const end = video.buffered.end(video.buffered.length - 1);
-        this.bufferedProgress.set((end / this.duration()) * 100);
+        this._setBufferedTarget((end / this.duration()) * 100);
+    }
+    _setBufferedTarget(target) {
+        this._bufferedTarget = Math.min(100, Math.max(0, target));
+        if (typeof requestAnimationFrame === 'undefined' || this._bufferAnimationFrame !== null) {
+            return;
+        }
+        const animate = () => {
+            const current = this.bufferedProgress();
+            const distance = this._bufferedTarget - current;
+            if (Math.abs(distance) < 0.1) {
+                this.bufferedProgress.set(this._bufferedTarget);
+                this._bufferAnimationFrame = null;
+                return;
+            }
+            this.bufferedProgress.set(current + distance * 0.08);
+            this._bufferAnimationFrame = requestAnimationFrame(animate);
+        };
+        this._bufferAnimationFrame = requestAnimationFrame(animate);
+    }
+    _startPlaybackProgressLoop() {
+        if (typeof requestAnimationFrame === 'undefined' || this._playbackAnimationFrame !== null) {
+            return;
+        }
+        const animate = () => {
+            const video = this.videoElement()?.nativeElement;
+            if (!video || video.paused || video.ended) {
+                this._playbackAnimationFrame = null;
+                this._syncPlaybackProgress(video?.currentTime ?? this.currentTime());
+                return;
+            }
+            this._syncPlaybackProgress(video.currentTime);
+            this._playbackAnimationFrame = requestAnimationFrame(animate);
+        };
+        this._playbackAnimationFrame = requestAnimationFrame(animate);
+    }
+    _stopPlaybackProgressLoop() {
+        if (this._playbackAnimationFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this._playbackAnimationFrame);
+        this._playbackAnimationFrame = null;
+    }
+    _syncPlaybackProgress(time) {
+        const dur = this.duration();
+        if (!Number.isFinite(dur) || dur <= 0 || !Number.isFinite(time)) {
+            this.progress.set(0);
+            return;
+        }
+        this.progress.set(Math.min(100, Math.max(0, (time / dur) * 100)));
     }
     // Bắt đầu kéo thanh timeline phát
     onTimelineDragStart(event) {
@@ -504,11 +767,66 @@ class ZMediaPlayerComponent {
         this.hoverX.set(offsetX);
         const ratio = Math.max(0, Math.min(1, offsetX / rect.width));
         const hoverTime = ratio * this.duration();
+        this.hoverTime.set(hoverTime);
         this.hoverTimeLabel.set(this._formatTime(hoverTime));
     }
     onTimelineHoverEnd() {
+        this.hoverTime.set(null);
         this.hoverTimeLabel.set(null);
     }
+    // Tải và phân tích file WebVTT storyboard cho preview ảnh nhỏ khi hover timeline
+    async _loadThumbnailVtt(vttUrl) {
+        try {
+            const response = await fetch(vttUrl);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch thumbnails VTT: ${response.status}`);
+            }
+            const text = await response.text();
+            // `response.url` is always absolute (resolves relative input against the document, follows redirects),
+            // unlike `vttUrl` which callers may pass as a root-relative path.
+            this._thumbnailCues.set(this._parseThumbnailVtt(text, response.url));
+        }
+        catch (err) {
+            console.warn('Unable to load media player thumbnails VTT: ', err);
+            this._thumbnailCues.set([]);
+        }
+    }
+    // Phân tích nội dung VTT thành danh sách cue { start, end, src, x, y, w, h }
+    _parseThumbnailVtt(text, baseUrl) {
+        const timeRangePattern = /(\d{2}:\d{2}:\d{2}[.,]\d{3})\s*-->\s*(\d{2}:\d{2}:\d{2}[.,]\d{3})/;
+        const lines = text.split(/\r?\n/);
+        const cues = [];
+        for (let i = 0; i < lines.length; i++) {
+            const match = timeRangePattern.exec(lines[i]);
+            if (!match) {
+                continue;
+            }
+            const imageLine = lines[i + 1]?.trim();
+            if (!imageLine) {
+                continue;
+            }
+            const [imageRef, xywhRef] = imageLine.split('#xywh=');
+            const xywh = xywhRef?.split(',').map(Number);
+            if (!imageRef || !xywh || xywh.length !== 4 || xywh.some(Number.isNaN)) {
+                continue;
+            }
+            cues.push({
+                start: this._parseVttTimestamp(match[1]),
+                end: this._parseVttTimestamp(match[2]),
+                src: new URL(imageRef, baseUrl).href,
+                x: xywh[0],
+                y: xywh[1],
+                w: xywh[2],
+                h: xywh[3],
+            });
+        }
+        return cues;
+    }
+    _parseVttTimestamp(value) {
+        const [hours, minutes, secondsAndMs] = value.split(':');
+        const [seconds, milliseconds] = secondsAndMs.split(/[.,]/);
+        return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds) + Number(milliseconds) / 1000;
+    }
     _updateTimeFromCoords(event) {
         const container = this.timelineContainer()?.nativeElement;
         if (!container) {
@@ -536,8 +854,13 @@ class ZMediaPlayerComponent {
         this._resetControlsTimer();
     }
     onMouseLeave() {
+        this.isPointerOver.set(false);
         const video = this.videoElement()?.nativeElement;
         if (video && !video.paused && !this.isDragging() && !this.showSettings()) {
+            if (this._controlsTimeout) {
+                clearTimeout(this._controlsTimeout);
+                this._controlsTimeout = null;
+            }
             this.showControls.set(false);
         }
     }
@@ -550,37 +873,18 @@ class ZMediaPlayerComponent {
         if (video && !video.paused && !this.showSettings() && !this.isDragging()) {
             this._controlsTimeout = setTimeout(() => {
                 this.showControls.set(false);
-            }, 3000);
-        }
-    }
-    // Xử lý sự kiện click phân biệt Single-click và Double-click
-    onVideoClick(event) {
-        if (this._clickTimeout) {
-            clearTimeout(this._clickTimeout);
-            this._clickTimeout = null;
-            this._handleVideoDoubleClick(event);
-            return;
+            }, 1000);
         }
-        this._clickTimeout = setTimeout(() => {
-            this._clickTimeout = null;
-            this.togglePlay();
-        }, 250);
     }
-    _handleVideoDoubleClick(event) {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        const rect = video.getBoundingClientRect();
-        const clickX = event.clientX - rect.left;
-        const isLeftHalf = clickX < rect.width / 2;
-        if (isLeftHalf) {
-            this.seekTo(Math.max(0, video.currentTime - 10));
-            this._triggerSkipOverlay(10, 'left');
+    // Click mặt video chỉ điều khiển play/pause; tua dùng các nút skip riêng để tránh click nhanh bị hiểu nhầm.
+    onVideoClick() {
+        // Nếu menu cài đặt đang mở, click vào video chỉ đóng menu, không toggle play/pause
+        if (this.showSettings()) {
+            this._settingsPopover()?.hide();
+            this.onSettingsHidden();
             return;
         }
-        this.seekTo(Math.min(this.duration(), video.currentTime + 10));
-        this._triggerSkipOverlay(10, 'right');
+        this.togglePlay();
     }
     // Kích hoạt overlay tua nhanh cộng dồn
     triggerSkip(seconds, direction) {
@@ -688,7 +992,7 @@ class ZMediaPlayerComponent {
         return `${minutes}:${formattedSeconds}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZMediaPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZMediaPlayerComponent, isStandalone: true, selector: "z-media-player", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSrc: { classPropertyName: "zSrc", publicName: "zSrc", isSignal: true, isRequired: true, transformFunction: null }, zSources: { classPropertyName: "zSources", publicName: "zSources", isSignal: true, isRequired: false, transformFunction: null }, zPoster: { classPropertyName: "zPoster", publicName: "zPoster", isSignal: true, isRequired: false, transformFunction: null }, zAutoplay: { classPropertyName: "zAutoplay", publicName: "zAutoplay", isSignal: true, isRequired: false, transformFunction: null }, zLoop: { classPropertyName: "zLoop", publicName: "zLoop", isSignal: true, isRequired: false, transformFunction: null }, zMuted: { classPropertyName: "zMuted", publicName: "zMuted", isSignal: true, isRequired: false, transformFunction: null }, zVolume: { classPropertyName: "zVolume", publicName: "zVolume", isSignal: true, isRequired: false, transformFunction: null }, zSubtitles: { classPropertyName: "zSubtitles", publicName: "zSubtitles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zPlay: "zPlay", zTimeUpdate: "zTimeUpdate", zVolumeChange: "zVolumeChange", zFullscreenChange: "zFullscreenChange", zTheaterModeChange: "zTheaterModeChange", zMiniplayerChange: "zMiniplayerChange", zQualityChange: "zQualityChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousemove": "onMouseMove()", "mouseleave": "onMouseLeave()", "document:fullscreenchange": "onFullscreenStateChange()" }, properties: { "class": "zClasses()", "attr.tabindex": "0" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoElement"], descendants: true, isSignal: true }, { propertyName: "timelineContainer", first: true, predicate: ["timelineContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Th\u1EBB video ch\u00EDnh ph\u00E1t ngu\u1ED3n zSrc -->\n<video\n  #videoElement\n  class=\"h-full w-full cursor-pointer object-contain\"\n  [src]=\"effectiveSrc()\"\n  [poster]=\"zPoster()\"\n  [loop]=\"zLoop()\"\n  [autoplay]=\"zAutoplay()\"\n  playsinline\n  webkit-playsinline\n  (click)=\"onVideoClick($event)\"\n  (play)=\"onPlayStateChange(true)\"\n  (pause)=\"onPlayStateChange(false)\"\n  (timeupdate)=\"onTimeUpdate()\"\n  (durationchange)=\"onDurationChange()\"\n  (seeking)=\"onSeeking(true)\"\n  (seeked)=\"onSeeking(false)\"\n  (waiting)=\"onSeeking(true)\"\n  (playing)=\"onSeeking(false)\"\n  (enterpictureinpicture)=\"onEnterPiP()\"\n  (leavepictureinpicture)=\"onLeavePiP()\"\n  (webkitpresentationmodechanged)=\"onWebkitPresentationModeChanged()\">\n  @for (sub of zSubtitles(); track sub.src) {\n    <track\n      [src]=\"sub.src\"\n      kind=\"subtitles\"\n      [srclang]=\"sub.srclang\"\n      [label]=\"sub.label\"\n      [default]=\"sub.default || false\" />\n  }\n</video>\n\n<!-- L\u1EDBp ph\u1EE7 v\u00F2ng xoay loading khi video \u0111ang buffer -->\n@if (isBuffering()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[10] flex items-center justify-center bg-black/20\">\n    <div class=\"size-14 animate-spin rounded-full border-4 border-white/20 border-t-red-600\"></div>\n  </div>\n}\n\n<!-- Hi\u1EC7u \u1EE9ng nh\u1EA5p nh\u00E1y Play/Pause l\u1EDBn gi\u1EEFa m\u00E0n h\u00ECnh t\u01B0\u01A1ng t\u1EF1 YouTube -->\n@if (playPauseFlash()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[11] flex items-center justify-center\">\n    <div\n      class=\"z-flash-animation flex size-14 items-center justify-center rounded-full bg-black/60 text-white sm:size-20\">\n      <z-icon\n        [zType]=\"playPauseFlash() === 'play' ? 'lucidePlay' : 'lucidePause'\"\n        zSize=\"24\"\n        [zStrokeWidth]=\"2\"\n        [class.translate-x-[2px]]=\"playPauseFlash() === 'play'\" />\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Tr\u00E1i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'left') {\n  <div class=\"z-double-tap-ripple-left\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-number\">- {{ skipOverlayValue() }}</span>\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-left\">\n        <z-icon zType=\"lucideChevronsLeft\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Ph\u1EA3i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'right') {\n  <div class=\"z-double-tap-ripple-right\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-right\">\n        <z-icon zType=\"lucideChevronsRight\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n      <span class=\"z-skip-overlay-number\">+ {{ skipOverlayValue() }}</span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 ch\u1EE9a thanh \u0111i\u1EC1u khi\u1EC3n (Bottom controls panel) -->\n<div\n  class=\"pointer-events-none absolute inset-x-0 bottom-0 z-[12] flex flex-col bg-gradient-to-t from-black/85 via-black/40 to-transparent p-3 pt-12 transition-opacity duration-300 select-none\"\n  [class.opacity-0]=\"!showControls()\"\n  [class.invisible]=\"!showControls()\">\n  <!-- Thanh Timeline (Progress Bar) t\u00F9y ch\u1EC9nh ki\u1EC3u YouTube -->\n  <div\n    #timelineContainer\n    id=\"z_media_player_timeline\"\n    class=\"group/timeline pointer-events-auto relative mb-3 flex h-1 w-full cursor-pointer items-center transition-all hover:h-1.5\"\n    (mousedown)=\"onTimelineDragStart($event)\"\n    (mousemove)=\"onTimelineHover($event)\"\n    (mouseleave)=\"onTimelineHoverEnd()\">\n    <!-- Thanh n\u1EC1n x\u00E1m c\u1EE7a thanh timeline -->\n    <div\n      class=\"absolute inset-x-0 h-1 overflow-hidden rounded-full bg-white/25 transition-all group-hover/timeline:h-1.5\">\n      <!-- Ti\u1EBFn tr\u00ECnh t\u1EA3i buffer c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\" [style.width.%]=\"bufferedProgress()\"></div>\n      <!-- Ti\u1EBFn tr\u00ECnh ph\u00E1t hi\u1EC7n t\u1EA1i c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-red-600\" [style.width.%]=\"progress()\"></div>\n    </div>\n\n    <!-- \u0110\u1EA7u k\u00E9o timeline (Thumb) \u0111\u1ECF ch\u1EC9 hi\u1EC3n th\u1ECB khi hover ho\u1EB7c k\u00E9o -->\n    <div\n      class=\"bg-red-650 pointer-events-none absolute size-3.5 -translate-x-1/2 scale-0 transform rounded-full opacity-0 transition-opacity duration-150 group-hover/timeline:scale-100 group-hover/timeline:opacity-100\"\n      [style.left.%]=\"progress()\"></div>\n\n    <!-- Tooltip hi\u1EC3n th\u1ECB m\u1ED1c th\u1EDDi gian khi hover -->\n    @if (hoverTimeLabel()) {\n      <div\n        class=\"pointer-events-none absolute bottom-4 z-[20] -translate-x-1/2 rounded-xs bg-zinc-950/70 px-2 py-1 font-mono text-[11px] leading-none whitespace-nowrap text-zinc-100 shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)] backdrop-blur-2xl\"\n        [style.left.px]=\"hoverX()\">\n        {{ hoverTimeLabel() }}\n      </div>\n    }\n  </div>\n\n  <!-- H\u00E0ng ch\u1EE9a c\u00E1c n\u00FAt b\u1EA5m \u0111i\u1EC1u khi\u1EC3n ch\u1EE9c n\u0103ng -->\n  <div class=\"pointer-events-auto flex items-center justify-between text-sm text-white\">\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn tr\u00E1i -->\n    <div class=\"flex items-center gap-2\">\n      <!-- N\u00FAt Ph\u00E1t / T\u1EA1m d\u1EEBng -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_play_btn\"\n        class=\"mr-1 flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n        (click)=\"togglePlay()\">\n        <z-icon [zType]=\"isPlaying() ? 'lucidePause' : 'lucidePlay'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt Tua l\u00F9i 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_rewind_5_btn\"\n        class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua l\u00F9i 5 gi\u00E2y (Arrow Left)\"\n        (click)=\"triggerSkip(5, 'left')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCcw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- N\u00FAt Tua ti\u1EBFn 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_forward_5_btn\"\n        class=\"mr-1 hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua ti\u1EBFn 5 gi\u00E2y (Arrow Right)\"\n        (click)=\"triggerSkip(5, 'right')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- T\u1ED5 h\u1EE3p n\u00FAt Mute v\u00E0 Slider \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang -->\n      <div class=\"group/volume hidden items-center gap-1.5 sm:flex\">\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mute_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"(isMuted() ? 'i18n_z_ui_media_player_unmute' : 'i18n_z_ui_media_player_mute') | translate\"\n          (click)=\"toggleMute()\">\n          <z-icon\n            [zType]=\"isMuted() ? 'lucideVolumeX' : volume() < 0.5 ? 'lucideVolume1' : 'lucideVolume2'\"\n            zSize=\"20\"\n            [zStrokeWidth]=\"2\" />\n        </button>\n        <!-- Thanh tr\u01B0\u1EE3t \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang m\u1EDF r\u1ED9ng khi hover -->\n        <input\n          type=\"range\"\n          id=\"z_media_player_volume_slider\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          [ngModel]=\"volume()\"\n          (ngModelChange)=\"onVolumeChange($event)\"\n          class=\"accent-red-650 h-1 w-0 cursor-pointer rounded-lg bg-white/20 opacity-0 transition-all duration-200 outline-none group-hover/volume:w-16 group-hover/volume:opacity-100 focus-visible:w-16 focus-visible:opacity-100\" />\n      </div>\n\n      <!-- Hi\u1EC3n th\u1ECB th\u1EDDi gian ph\u00E1t (currentTime / duration) -->\n      <div class=\"pl-1 font-mono text-xs text-white/90 select-none\">\n        <span>{{ currentTimeLabel() }}</span>\n        <span class=\"mx-1 text-white/40\">/</span>\n        <span class=\"text-white/60\">{{ durationLabel() }}</span>\n      </div>\n    </div>\n\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn ph\u1EA3i -->\n    <div class=\"flex items-center gap-1.5\">\n      <!-- N\u00FAt m\u1EDF tr\u00ECnh \u0111\u01A1n C\u00E0i \u0111\u1EB7t b\u1EB1ng ZPopoverDirective -->\n      @if (isFullscreen()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          (click)=\"toggleInlineSettings()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      } @else {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          z-popover\n          [zPopoverContent]=\"speedMenuTemplate\"\n          zPosition=\"top-right\"\n          zTrigger=\"click\"\n          [zOffset]=\"6\"\n          zClass=\"z-media-player-popover\"\n          (zShow)=\"showSettings.set(true); onMouseMove()\"\n          (zHide)=\"onSettingsHidden()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt Miniplayer (Picture-in-Picture) - \u1EA8n ho\u1EB7c disable n\u1EBFu browser ko h\u1ED7 tr\u1EE3 -->\n      @if (isPiPSupported()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mini_btn\"\n          class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n          [title]=\"'i18n_z_ui_media_player_miniplayer' | translate\"\n          (click)=\"toggleMiniplayer()\">\n          <z-icon zType=\"lucideTv\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 r\u1EA1p chi\u1EBFu phim (Theater Mode) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        id=\"z_media_player_theater_btn\"\n        class=\"flex hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none md:flex\"\n        [title]=\"\n          (isTheaterMode() ? 'i18n_z_ui_media_player_default_mode' : 'i18n_z_ui_media_player_theater_mode') | translate\n        \"\n        (click)=\"toggleTheaterMode()\">\n        <z-icon\n          [zType]=\"isTheaterMode() ? 'lucideSquare' : 'lucideRectangleHorizontal'\"\n          zSize=\"20\"\n          [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 to\u00E0n m\u00E0n h\u00ECnh (Fullscreen) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_full_btn\"\n        class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"\n          (isFullscreen() ? 'i18n_z_ui_media_player_exit_fullscreen' : 'i18n_z_ui_media_player_fullscreen') | translate\n        \"\n        (click)=\"toggleFullscreen()\">\n        <z-icon [zType]=\"isFullscreen() ? 'lucideMinimize' : 'lucideMaximize'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (isFullscreen() && showSettings()) {\n  <div class=\"z-media-player-popover z-media-player-inline-settings\">\n    <ng-container [ngTemplateOutlet]=\"speedMenuTemplate\" />\n  </div>\n}\n\n<!-- Template c\u1EA5u h\u00ECnh Popover c\u00E0i \u0111\u1EB7t s\u1EED d\u1EE5ng ng-template -->\n<ng-template #speedMenuTemplate>\n  <div\n    class=\"z-media-player-settings flex w-44 flex-col px-1 py-[4px] text-zinc-200\"\n    [class.z-main-panel]=\"settingsPanel() === 'main'\"\n    [class.z-sub-panel]=\"settingsPanel() !== 'main'\">\n    @if (settingsPanel() === 'main') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        @if (qualitySources().length > 1) {\n          <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('quality')\">\n            <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ 'i18n_z_ui_media_player_quality' | translate }}\n            </span>\n            <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ activeQualityLabel() }}</span>\n              <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n            </span>\n          </button>\n        }\n        <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('speed')\">\n          <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n            {{ 'i18n_z_ui_media_player_speed' | translate }}\n          </span>\n          <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">\n              {{ playbackSpeed() === 1 ? ('i18n_z_ui_media_player_normal' | translate) : playbackSpeed() + 'x' }}\n            </span>\n            <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (settingsPanel() === 'quality') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_quality' | translate }}</span>\n        </button>\n        @for (source of qualitySources(); track source.src) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_quality_btn_' + source.label\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"effectiveSrc() === source.src\"\n            (click)=\"setQualitySource(source)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ source.label }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (settingsPanel() === 'speed') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_speed' | translate }}</span>\n        </button>\n        @for (speed of playbackSpeeds; track speed.value) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_speed_btn_' + speed.value\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"playbackSpeed() === speed.value\"\n            (click)=\"setPlaybackSpeed(speed.value)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ speed.label | translate }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["z-media-player{display:block;width:100%;outline:none}z-media-player:focus,z-media-player:focus-visible{outline:none}z-media-player video::cue{background-color:#080808d9;color:#fff;font-family:inherit;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.9);padding:4px 8px;border-radius:4px}z-media-player .z-flash-animation{animation:zUiFlashIcon .72s cubic-bezier(.2,.85,.25,1) forwards;will-change:opacity,transform,filter}z-media-player .z-flash-animation z-icon{width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center}z-media-player .z-flash-animation z-icon ng-icon,z-media-player .z-flash-animation z-icon svg{width:100%!important;height:100%!important}@media(min-width:640px){z-media-player .z-flash-animation z-icon{width:32px!important;height:32px!important}}@keyframes zUiFlashIcon{0%{filter:blur(2px);opacity:0;transform:scale(.72)}18%{filter:blur(0);opacity:.95;transform:scale(1)}58%{opacity:.9;transform:scale(1.04)}to{filter:blur(0);opacity:0;transform:scale(1.18)}}z-media-player .animate-fade-in{animation:zUiFadeIn .2s cubic-bezier(.16,1,.3,1)}@keyframes zUiFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}z-media-player .z-double-tap-ripple-left,z-media-player .z-double-tap-ripple-right{position:absolute;top:0;bottom:0;width:35%;display:flex;align-items:center;z-index:11;pointer-events:none}z-media-player .z-double-tap-ripple-left:before,z-media-player .z-double-tap-ripple-right:before{position:absolute;inset:0;content:\"\";opacity:0;animation-duration:.72s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,1,.5,1)}z-media-player .z-double-tap-ripple-left{left:0;justify-content:flex-start;padding-left:5%}z-media-player .z-double-tap-ripple-left:before{background:radial-gradient(circle at 0% 50%,#ffffff21,#fff0 70%);border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;animation-name:zUiDoubleTapRippleLeft;transform-origin:left center}z-media-player .z-double-tap-ripple-left.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleLeftAlt}z-media-player .z-double-tap-ripple-right{right:0;justify-content:flex-end;padding-right:5%}z-media-player .z-double-tap-ripple-right:before{background:radial-gradient(circle at 100% 50%,#ffffff21,#fff0 70%);border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;animation-name:zUiDoubleTapRippleRight;transform-origin:right center}z-media-player .z-double-tap-ripple-right.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleRightAlt}z-media-player .z-skip-overlay-content{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;color:#fff;font-family:inherit;font-size:18px;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.75);-webkit-user-select:none;user-select:none}z-media-player .z-skip-overlay-number{min-width:42px;animation:zUiSkipNumberBump .22s cubic-bezier(.2,.85,.25,1) forwards;text-align:center;transform-origin:center}z-media-player .z-skip-pulse-alt .z-skip-overlay-number{animation-name:zUiSkipNumberBumpAlt}z-media-player .z-skip-overlay-arrows{display:inline-flex;align-items:center;color:#fffffff2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}@keyframes zUiDoubleTapRippleLeft{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleLeftAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleRight{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}@keyframes zUiDoubleTapRippleRightAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}z-media-player .z-chevron-slide-left{animation:zUiChevronSlideLeft .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-chevron-slide-right{animation:zUiChevronSlideRight .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-skip-pulse-alt .z-chevron-slide-left{animation-name:zUiChevronSlideLeftAlt}z-media-player .z-skip-pulse-alt .z-chevron-slide-right{animation-name:zUiChevronSlideRightAlt}@keyframes zUiSkipNumberBump{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiSkipNumberBumpAlt{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiChevronSlideLeft{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRight{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes zUiChevronSlideLeftAlt{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRightAlt{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}z-media-player #z_media_player_volume_slider{-webkit-appearance:none;appearance:none;background:transparent}z-media-player #z_media_player_volume_slider::-webkit-slider-runnable-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:10px;width:10px;border-radius:9999px;margin-top:-3.5px;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-webkit-slider-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}z-media-player #z_media_player_volume_slider::-moz-range-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-moz-range-thumb{background:#fff;height:10px;width:10px;border-radius:9999px;border:none;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-moz-range-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-moz-range-thumb{transform:scale(1.3)}.z-media-player-popover{backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;background-color:#0f0f0f99!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 15px 30px -10px #000c!important;border-radius:8px!important;padding:0!important;transform-origin:bottom right}.z-media-player-popover[data-state=open]{animation:zUiMediaSettingsPopoverIn .16s cubic-bezier(.2,.85,.25,1) forwards}.z-media-player-popover[data-state=closed]{animation:zUiMediaSettingsPopoverOut .16s cubic-bezier(.4,0,.2,1) forwards!important}.z-media-player-popover .bg-popover{background-color:transparent!important;color:#e4e4e7!important}.z-media-player-popover .z-media-player-settings{overflow:hidden;transform-origin:bottom right;animation:zUiMediaSettingsPanelIn .16s cubic-bezier(.2,.85,.25,1)}.z-media-player-popover .z-media-player-settings-panel{gap:4px;transform-origin:top right;animation:zUiMediaSettingsPanelIn .14s cubic-bezier(.2,.85,.25,1);will-change:opacity,transform}.z-media-player-popover .z-media-player-settings.z-main-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromLeft}.z-media-player-popover .z-media-player-settings.z-sub-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromRight}.z-media-player-popover .z-media-player-settings-item,.z-media-player-popover .z-media-player-settings-back{position:relative;display:flex;width:100%;min-width:0;height:32px;min-height:32px;cursor:pointer;align-items:center;border:0;border-radius:4px;background-color:transparent;padding:0 8px;color:#e4e4e7;font-size:12px;font-weight:500;line-height:1;outline:none;transition:background-color .12s ease,color .12s ease}.z-media-player-popover .z-media-player-settings-item{justify-content:space-between;gap:12px;text-align:left}.z-media-player-popover .z-media-player-settings-item:before{position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:9999px;background-color:#fff;content:\"\";opacity:0;transform:scaleY(.5);transition:opacity .12s ease,transform .12s ease}.z-media-player-popover .z-media-player-settings-item.z-active{background-color:#ffffff14;color:#fff;font-weight:600}.z-media-player-popover .z-media-player-settings-item.z-active:before{opacity:1;transform:scaleY(1)}.z-media-player-popover .z-media-player-settings-back{justify-content:flex-start;gap:8px;color:#f4f4f5;font-weight:600}.z-media-player-popover .z-media-player-settings-item:hover,.z-media-player-popover .z-media-player-settings-back:hover,.z-media-player-popover .z-media-player-settings-item:focus-visible,.z-media-player-popover .z-media-player-settings-back:focus-visible{background-color:#ffffff1a}.z-media-player-inline-settings{position:absolute;right:12px;bottom:64px;z-index:30}@keyframes zUiMediaSettingsPopoverIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes zUiMediaSettingsPopoverOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(4px) scale(.96)}}@keyframes zUiMediaSettingsPanelIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes zUiMediaSettingsPanelFromRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes zUiMediaSettingsPanelFromLeft{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZMediaPlayerComponent, isStandalone: true, selector: "z-media-player", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSrc: { classPropertyName: "zSrc", publicName: "zSrc", isSignal: true, isRequired: true, transformFunction: null }, zSources: { classPropertyName: "zSources", publicName: "zSources", isSignal: true, isRequired: false, transformFunction: null }, zPoster: { classPropertyName: "zPoster", publicName: "zPoster", isSignal: true, isRequired: false, transformFunction: null }, zAutoplay: { classPropertyName: "zAutoplay", publicName: "zAutoplay", isSignal: true, isRequired: false, transformFunction: null }, zLoop: { classPropertyName: "zLoop", publicName: "zLoop", isSignal: true, isRequired: false, transformFunction: null }, zMuted: { classPropertyName: "zMuted", publicName: "zMuted", isSignal: true, isRequired: false, transformFunction: null }, zVolume: { classPropertyName: "zVolume", publicName: "zVolume", isSignal: true, isRequired: false, transformFunction: null }, zSubtitles: { classPropertyName: "zSubtitles", publicName: "zSubtitles", isSignal: true, isRequired: false, transformFunction: null }, zThumbnailsVtt: { classPropertyName: "zThumbnailsVtt", publicName: "zThumbnailsVtt", isSignal: true, isRequired: false, transformFunction: null }, zControls: { classPropertyName: "zControls", publicName: "zControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zLoaded: "zLoaded", zError: "zError", zPlay: "zPlay", zTimeUpdate: "zTimeUpdate", zVolumeChange: "zVolumeChange", zFullscreenChange: "zFullscreenChange", zTheaterModeChange: "zTheaterModeChange", zMiniplayerChange: "zMiniplayerChange", zQualityChange: "zQualityChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mouseleave": "onMouseLeave()", "document:fullscreenchange": "onFullscreenStateChange()" }, properties: { "class": "zClasses()", "attr.tabindex": "0" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoElement"], descendants: true, isSignal: true }, { propertyName: "timelineContainer", first: true, predicate: ["timelineContainer"], descendants: true, isSignal: true }, { propertyName: "_settingsPopover", first: true, predicate: ZPopoverDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isYouTube()) {\n  <!-- Nh\u00FAng iframe YouTube g\u1ED1c, d\u00F9ng control m\u1EB7c \u0111\u1ECBnh c\u1EE7a YouTube -->\n  <iframe\n    class=\"h-full w-full\"\n    [src]=\"youtubeEmbedUrl()\"\n    title=\"YouTube video player\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen></iframe>\n} @else {\n  <!-- Th\u1EBB video ch\u00EDnh ph\u00E1t ngu\u1ED3n zSrc -->\n  <video\n    #videoElement\n    class=\"h-full w-full cursor-pointer object-cover\"\n    [src]=\"effectiveSrc()\"\n    [poster]=\"zPoster()\"\n    [loop]=\"zLoop()\"\n    [autoplay]=\"zAutoplay()\"\n    playsinline\n    webkit-playsinline\n    (click)=\"onVideoClick()\"\n    (play)=\"onPlayStateChange(true)\"\n    (pause)=\"onPlayStateChange(false)\"\n    (loadeddata)=\"onLoadedData()\"\n    (error)=\"onVideoError()\"\n    (timeupdate)=\"onTimeUpdate()\"\n    (durationchange)=\"onDurationChange()\"\n    (seeking)=\"onSeeking(true)\"\n    (seeked)=\"onSeeking(false)\"\n    (waiting)=\"onSeeking(true)\"\n    (playing)=\"onSeeking(false)\"\n    (enterpictureinpicture)=\"onEnterPiP()\"\n    (leavepictureinpicture)=\"onLeavePiP()\"\n    (webkitpresentationmodechanged)=\"onWebkitPresentationModeChanged()\">\n    @for (sub of zSubtitles(); track sub.src) {\n      <track\n        [src]=\"sub.src\"\n        kind=\"subtitles\"\n        [srclang]=\"sub.srclang\"\n        [label]=\"sub.label\"\n        [default]=\"sub.default || false\" />\n    }\n  </video>\n\n  @if (subtitleText()) {\n    <div\n      class=\"pointer-events-none absolute inset-x-3 z-[11] mx-auto w-fit max-w-[calc(100%-1.5rem)] rounded-sm bg-black/80 px-4 py-2 text-center text-base leading-6 whitespace-pre-line text-white shadow-sm transition-[bottom] duration-200 ease-out sm:text-lg sm:leading-7\"\n      [class.bottom-16]=\"showControls()\"\n      [class.bottom-2]=\"!showControls()\">\n      {{ subtitleText() }}\n    </div>\n  }\n\n  <!-- V\u00F2ng tr\u00F2n loading gi\u1EEFa m\u00E0n h\u00ECnh khi video \u0111ang buffer -->\n  @if (isBuffering()) {\n    <div class=\"pointer-events-none absolute inset-0 z-[13] flex items-center justify-center\">\n      <span class=\"z-media-player-loading-pulse\"></span>\n    </div>\n  }\n\n  <!-- Hi\u1EC7u \u1EE9ng nh\u1EA5p nh\u00E1y Play/Pause l\u1EDBn gi\u1EEFa m\u00E0n h\u00ECnh t\u01B0\u01A1ng t\u1EF1 YouTube -->\n  <div class=\"pointer-events-none absolute inset-0 z-[11] flex items-center justify-center\">\n    <div\n      class=\"z-flash-animation flex size-10 scale-75 items-center justify-center rounded-full bg-black/60 text-white opacity-0\"\n      [class.z-flash-active]=\"!!playPauseFlash()\">\n      @if (playPauseFlash(); as flashType) {\n        <z-icon\n          [zType]=\"flashType === 'play' ? 'tablerPlayerPlayFill' : 'tablerPlayerPauseFill'\"\n          zSize=\"28\"\n          [zStrokeWidth]=\"2\"\n          [class.translate-x-[2px]]=\"flashType === 'play'\" />\n      }\n    </div>\n  </div>\n\n  <!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Tr\u00E1i (YouTube style) -->\n  @if (skipOverlayValue() > 0 && skipOverlayDirection() === 'left') {\n    <div class=\"z-double-tap-ripple-left\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n      <div class=\"z-skip-overlay-content\">\n        <span class=\"z-skip-overlay-number\">- {{ skipOverlayValue() }}</span>\n        <span class=\"z-skip-overlay-arrows z-chevron-slide-left\">\n          <z-icon zType=\"tablerChevronsLeft\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n        </span>\n      </div>\n    </div>\n  }\n\n  <!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Ph\u1EA3i (YouTube style) -->\n  @if (skipOverlayValue() > 0 && skipOverlayDirection() === 'right') {\n    <div class=\"z-double-tap-ripple-right\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n      <div class=\"z-skip-overlay-content\">\n        <span class=\"z-skip-overlay-arrows z-chevron-slide-right\">\n          <z-icon zType=\"tablerChevronsRight\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n        </span>\n        <span class=\"z-skip-overlay-number\">+ {{ skipOverlayValue() }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- L\u1EDBp ph\u1EE7 gradient ph\u1EE7 s\u00E1t to\u00E0n b\u1ED9 m\u00E9p d\u01B0\u1EDBi video -->\n  <div\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-[10] h-28 bg-gradient-to-t from-black/55 via-black/25 to-transparent transition-opacity duration-200 ease-out\"\n    [class.opacity-0]=\"!showControls()\"></div>\n\n  <!-- Thanh \u0111i\u1EC1u khi\u1EC3n d\u1EA1ng rounded-sm n\u1ED5i ph\u00EDa tr\u00EAn \u0111\u00E1y video -->\n  <div\n    class=\"z-media-player-controls absolute inset-x-2 bottom-2 z-[12] transition-opacity duration-200 ease-out select-none sm:inset-x-3 sm:bottom-3\"\n    [class.opacity-0]=\"!showControls()\"\n    [class.pointer-events-auto]=\"showControls()\"\n    [class.pointer-events-none]=\"!showControls()\">\n    <div class=\"z-media-player-controls-surface relative z-[1] rounded-sm px-2 py-1.5 text-sm text-white\">\n      <div class=\"flex items-center gap-1.5 sm:gap-2\">\n        <!-- N\u00FAt Ph\u00E1t / T\u1EA1m d\u1EEBng -->\n        @if (controls().play) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_play_btn\"\n            class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n            [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n            (click)=\"togglePlay()\">\n            <z-icon\n              [zType]=\"isPlaying() ? 'tablerPlayerPauseFill' : 'tablerPlayerPlayFill'\"\n              zSize=\"18\"\n              [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- N\u00FAt Tua l\u00F9i / Tua ti\u1EBFn 5 gi\u00E2y -->\n        @if (controls().skip) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_rewind_5_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 sm:flex\"\n            title=\"Tua l\u00F9i 5 gi\u00E2y (Arrow Left)\"\n            (click)=\"triggerSkip(5, 'left')\">\n            <z-icon zType=\"tablerRewindBackward5\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_forward_5_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 sm:flex\"\n            title=\"Tua ti\u1EBFn 5 gi\u00E2y (Arrow Right)\"\n            (click)=\"triggerSkip(5, 'right')\">\n            <z-icon zType=\"tablerRewindForward5\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- T\u1ED5 h\u1EE3p n\u00FAt Mute v\u00E0 Slider \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang -->\n        @if (controls().volume) {\n          <div class=\"group/volume hidden shrink-0 items-center sm:flex\">\n            <button\n              z-button\n              zType=\"ghost\"\n              zSize=\"sm\"\n              zShape=\"default\"\n              [zWave]=\"false\"\n              type=\"button\"\n              id=\"z_media_player_mute_btn\"\n              class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n              [title]=\"(isMuted() ? 'i18n_z_ui_media_player_unmute' : 'i18n_z_ui_media_player_mute') | translate\"\n              (click)=\"toggleMute()\">\n              <z-icon\n                [zType]=\"isMuted() ? 'tablerVolumeOff' : volume() < 0.5 ? 'tablerVolume2' : 'tablerVolume'\"\n                zSize=\"18\"\n                [zStrokeWidth]=\"2\" />\n            </button>\n            <!-- Thanh tr\u01B0\u1EE3t \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang m\u1EDF r\u1ED9ng khi hover -->\n            <input\n              type=\"range\"\n              id=\"z_media_player_volume_slider\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              [ngModel]=\"volume()\"\n              (ngModelChange)=\"onVolumeChange($event)\"\n              class=\"accent-primary h-1 w-0 cursor-pointer rounded-lg bg-white/20 opacity-0 transition-all duration-200 outline-none group-hover/volume:w-16 group-hover/volume:opacity-100 focus-visible:w-16 focus-visible:opacity-100\" />\n          </div>\n        }\n\n        <!-- Th\u1EDDi gian ph\u00E1t: g\u1ED9p chung \"\u0111\u00E3 ph\u00E1t / t\u1ED5ng th\u1EDDi l\u01B0\u1EE3ng\" th\u00E0nh m\u1ED9t nh\u00F3m duy nh\u1EA5t -->\n        @if (controls().time) {\n          <span class=\"shrink-0 rounded-full bg-black/30 px-2 py-0.5 font-mono text-xs whitespace-nowrap text-white/90\">\n            {{ currentTimeLabel() }}\n            <span class=\"text-white/50\">/</span>\n            {{ durationLabel() }}\n          </span>\n        }\n\n        <!-- Thanh Timeline (Progress Bar) t\u00F9y ch\u1EC9nh ki\u1EC3u YouTube, n\u1EB1m chung h\u00E0ng v\u1EDBi c\u00E1c n\u00FAt -->\n        @if (controls().timeline) {\n          <div\n            #timelineContainer\n            id=\"z_media_player_timeline\"\n            class=\"group/timeline relative flex h-1 min-w-0 flex-1 cursor-pointer items-center\"\n            (mousedown)=\"onTimelineDragStart($event)\"\n            (mousemove)=\"onTimelineHover($event)\"\n            (mouseleave)=\"onTimelineHoverEnd()\">\n            <!-- Thanh n\u1EC1n x\u00E1m c\u1EE7a thanh timeline -->\n            <div\n              class=\"absolute inset-x-0 h-1 overflow-hidden rounded-full bg-white/25 transition-all group-hover/timeline:h-1.5\">\n              <!-- Ti\u1EBFn tr\u00ECnh t\u1EA3i buffer c\u1EE7a video -->\n              <div\n                class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\"\n                [style.width.%]=\"bufferedProgress()\"></div>\n              <!-- Ti\u1EBFn tr\u00ECnh ph\u00E1t hi\u1EC7n t\u1EA1i c\u1EE7a video -->\n              <div class=\"bg-primary absolute top-0 left-0 h-full rounded-full\" [style.width.%]=\"progress()\"></div>\n            </div>\n\n            <!-- \u0110\u1EA7u k\u00E9o timeline (Thumb) \u0111\u1ECF ch\u1EC9 hi\u1EC3n th\u1ECB khi hover ho\u1EB7c k\u00E9o -->\n            <div\n              class=\"bg-primary pointer-events-none absolute size-3.5 -translate-x-1/2 scale-0 transform rounded-full opacity-0 transition-opacity duration-150 group-hover/timeline:scale-100 group-hover/timeline:opacity-100\"\n              [style.left.%]=\"progress()\"></div>\n\n            <!-- Preview \u1EA3nh nh\u1ECF storyboard khi hover timeline (ki\u1EC3u YouTube) -->\n            @if (hoverThumbnailCue(); as cue) {\n              <div\n                class=\"pointer-events-none absolute z-[20] -translate-x-1/2 overflow-hidden rounded-md border-0 bg-black shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)]\"\n                [style.left.px]=\"hoverX()\"\n                [style.bottom.px]=\"24\"\n                [style.width.px]=\"cue.w\"\n                [style.height.px]=\"cue.h\">\n                <div\n                  class=\"bg-no-repeat\"\n                  [style.width.px]=\"cue.w\"\n                  [style.height.px]=\"cue.h\"\n                  [style.background-image]=\"'url(' + cue.src + ')'\"\n                  [style.background-position]=\"'-' + cue.x + 'px -' + cue.y + 'px'\"></div>\n              </div>\n            }\n\n            <!-- Tooltip hi\u1EC3n th\u1ECB m\u1ED1c th\u1EDDi gian khi hover -->\n            @if (hoverTimeLabel()) {\n              <div\n                class=\"pointer-events-none absolute bottom-4 z-[20] -translate-x-1/2 rounded-xs bg-zinc-950/70 px-2 py-1 font-mono text-[11px] leading-none whitespace-nowrap text-zinc-100 shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)] backdrop-blur-2xl\"\n                [style.left.px]=\"hoverX()\">\n                {{ hoverTimeLabel() }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- N\u00FAt m\u1EDF tr\u00ECnh \u0111\u01A1n C\u00E0i \u0111\u1EB7t b\u1EB1ng ZPopoverDirective -->\n        @if (controls().settings) {\n          @if (isFullscreen()) {\n            <div class=\"relative shrink-0\">\n              <button\n                z-button\n                zType=\"ghost\"\n                zSize=\"sm\"\n                zShape=\"default\"\n                [zWave]=\"false\"\n                type=\"button\"\n                id=\"z_media_player_settings_btn\"\n                class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:outline-none active:scale-90\"\n                [class.bg-white/15]=\"showSettings()\"\n                [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n                (click)=\"toggleInlineSettings()\">\n                <z-icon zType=\"tablerSettings\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n              </button>\n              <!-- Popover c\u00E0i \u0111\u1EB7t neo tr\u1EF1c ti\u1EBFp v\u00E0o n\u00FAt, v\u00EC overlay CDK kh\u00F4ng hi\u1EC3n th\u1ECB \u0111\u01B0\u1EE3c trong ch\u1EBF \u0111\u1ED9 Fullscreen g\u1ED1c -->\n              @if (showSettings()) {\n                <div class=\"z-media-player-popover absolute bottom-full left-1/2 mb-2 -translate-x-1/2\">\n                  <ng-container [ngTemplateOutlet]=\"speedMenuTemplate\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <button\n              z-button\n              zType=\"ghost\"\n              zSize=\"sm\"\n              zShape=\"default\"\n              [zWave]=\"false\"\n              type=\"button\"\n              id=\"z_media_player_settings_btn\"\n              class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:outline-none active:scale-90 aria-expanded:!bg-white/15 aria-expanded:!text-white\"\n              [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n              z-popover\n              [zPopoverContent]=\"speedMenuTemplate\"\n              zPosition=\"top\"\n              zTrigger=\"click\"\n              [zOffset]=\"9\"\n              zClass=\"z-media-player-popover\"\n              (zShow)=\"showSettings.set(true); onMouseMove()\"\n              (zHide)=\"onSettingsHidden()\">\n              <z-icon zType=\"tablerSettings\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n            </button>\n          }\n        }\n\n        <!-- N\u00FAt b\u1EADt/t\u1EAFt ph\u1EE5 \u0111\u1EC1 (CC) -->\n        @if (controls().subtitles && hasSubtitles()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_subtitles_btn\"\n            class=\"flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n            [class.bg-white!]=\"captionsEnabled()\"\n            [class.text-black!]=\"captionsEnabled()\"\n            [attr.aria-pressed]=\"captionsEnabled()\"\n            [title]=\"'i18n_z_ui_media_player_subtitles' | translate\"\n            (click)=\"toggleSubtitles()\">\n            <span class=\"text-[11px] leading-none font-bold tracking-[-0.04em]\">CC</span>\n          </button>\n        }\n\n        <!-- N\u00FAt Miniplayer (Picture-in-Picture) - \u1EA8n ho\u1EB7c disable n\u1EBFu browser ko h\u1ED7 tr\u1EE3 -->\n        @if (controls().pip && isPiPSupported()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_mini_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 sm:flex\"\n            [title]=\"'i18n_z_ui_media_player_miniplayer' | translate\"\n            (click)=\"toggleMiniplayer()\">\n            <z-icon zType=\"tablerPictureInPicture\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 r\u1EA1p chi\u1EBFu phim (Theater Mode) -->\n        @if (controls().theater) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            id=\"z_media_player_theater_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 md:flex\"\n            [title]=\"\n              (isTheaterMode() ? 'i18n_z_ui_media_player_default_mode' : 'i18n_z_ui_media_player_theater_mode')\n                | translate\n            \"\n            (click)=\"toggleTheaterMode()\">\n            <z-icon [zType]=\"isTheaterMode() ? 'tablerSquare' : 'tablerRectangle'\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 to\u00E0n m\u00E0n h\u00ECnh (Fullscreen) -->\n        @if (controls().fullscreen) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_full_btn\"\n            class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n            [title]=\"\n              (isFullscreen() ? 'i18n_z_ui_media_player_exit_fullscreen' : 'i18n_z_ui_media_player_fullscreen')\n                | translate\n            \"\n            (click)=\"toggleFullscreen()\">\n            <z-icon [zType]=\"isFullscreen() ? 'tablerMinimize' : 'tablerMaximize'\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- Template c\u1EA5u h\u00ECnh Popover c\u00E0i \u0111\u1EB7t s\u1EED d\u1EE5ng ng-template -->\n  <ng-template #speedMenuTemplate>\n    <div\n      class=\"z-media-player-settings flex w-max max-w-48 min-w-28 flex-col px-1 py-[4px] text-zinc-200\"\n      [class.z-main-panel]=\"settingsPanel() === 'main'\"\n      [class.z-sub-panel]=\"settingsPanel() !== 'main'\">\n      @if (settingsPanel() === 'main') {\n        <div class=\"z-media-player-settings-panel flex flex-col\">\n          @if (qualitySources().length > 1) {\n            <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('quality')\">\n              <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n                {{ 'i18n_z_ui_media_player_quality' | translate }}\n              </span>\n              <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n                <span class=\"min-w-0 truncate whitespace-nowrap\">{{ activeQualityLabel() }}</span>\n                <z-icon zType=\"tablerChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n              </span>\n            </button>\n          }\n          <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('speed')\">\n            <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ 'i18n_z_ui_media_player_speed' | translate }}\n            </span>\n            <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">\n                {{ playbackSpeed() === 1 ? ('i18n_z_ui_media_player_normal' | translate) : playbackSpeed() + 'x' }}\n              </span>\n              <z-icon zType=\"tablerChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n            </span>\n          </button>\n        </div>\n      }\n\n      @if (settingsPanel() === 'quality') {\n        <div class=\"z-media-player-settings-panel flex flex-col\">\n          <button\n            type=\"button\"\n            [title]=\"'i18n_z_ui_media_player_back' | translate\"\n            class=\"z-media-player-settings-back\"\n            (click)=\"closeSettingsPanel()\">\n            <z-icon zType=\"tablerChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_quality' | translate }}</span>\n          </button>\n          @for (source of qualitySources(); track source.label) {\n            <button\n              type=\"button\"\n              [id]=\"'z_media_player_quality_btn_' + source.label\"\n              class=\"z-media-player-settings-item\"\n              [class.z-active]=\"activeQualityLabel() === source.label\"\n              (click)=\"setQualitySource(source)\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ source.label }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      @if (settingsPanel() === 'speed') {\n        <div class=\"z-media-player-settings-panel flex flex-col\">\n          <button\n            type=\"button\"\n            [title]=\"'i18n_z_ui_media_player_back' | translate\"\n            class=\"z-media-player-settings-back\"\n            (click)=\"closeSettingsPanel()\">\n            <z-icon zType=\"tablerChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_speed' | translate }}</span>\n          </button>\n          @for (speed of playbackSpeeds; track speed.value) {\n            <button\n              type=\"button\"\n              [id]=\"'z_media_player_speed_btn_' + speed.value\"\n              class=\"z-media-player-settings-item\"\n              [class.z-active]=\"playbackSpeed() === speed.value\"\n              (click)=\"setPlaybackSpeed(speed.value)\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ speed.label | translate }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n", styles: ["z-media-player{display:block;width:100%;container-type:inline-size;outline:none}z-media-player:focus,z-media-player:focus-visible{outline:none}z-media-player .z-media-player-controls-surface{position:relative;background-color:#0000008c;box-shadow:0 0 0 1px #0000001a,0 1px 3px #00000026,0 1px 2px -1px #00000026}z-media-player .z-media-player-controls-surface:after{position:absolute;inset:0;z-index:10;border-radius:inherit;box-shadow:inset 0 1px #ffffff1a,inset 0 0 0 1px #ffffff0d;content:\"\";pointer-events:none}z-media-player video::cue{visibility:hidden;background-color:#080808d9;color:#fff;font-family:inherit;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.9);padding:4px 8px;border-radius:4px}z-media-player .z-media-player-loading-pulse{position:relative;width:64px;height:64px}z-media-player .z-media-player-loading-pulse:before,z-media-player .z-media-player-loading-pulse:after{position:absolute;inset:0;border-radius:9999px;background-color:#0000008c;content:\"\";animation:zUiMediaPlayerLoadingBreathe 2.2s ease-in-out infinite;will-change:transform}z-media-player .z-media-player-loading-pulse:after{inset:14px;background-color:#000000b3;animation-delay:-1.1s}@keyframes zUiMediaPlayerLoadingBreathe{0%,to{transform:scale(.82)}50%{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){z-media-player .z-media-player-loading-pulse:before,z-media-player .z-media-player-loading-pulse:after{animation:none;transform:scale(1)}}z-media-player .z-flash-animation{will-change:opacity,transform}z-media-player .z-flash-animation z-icon{width:20px!important;height:20px!important;display:inline-flex!important;align-items:center;justify-content:center}z-media-player .z-flash-animation z-icon ng-icon,z-media-player .z-flash-animation z-icon svg{width:100%!important;height:100%!important}@container (min-width: 480px){z-media-player .z-flash-animation{width:64px;height:64px}z-media-player .z-flash-animation z-icon{width:32px!important;height:32px!important}}@container (min-width: 800px){z-media-player .z-flash-animation{width:96px;height:96px}z-media-player .z-flash-animation z-icon{width:48px!important;height:48px!important}}z-media-player:fullscreen .z-flash-animation{width:112px;height:112px}z-media-player:fullscreen .z-flash-animation z-icon{width:56px!important;height:56px!important}z-media-player .z-flash-animation.z-flash-active{animation:zUiFlashIcon .5s ease-out forwards}@keyframes zUiFlashIcon{0%{opacity:0;transform:scale(.76)}18%{opacity:.95}to{opacity:0;transform:scale(1.18)}}@media(prefers-reduced-motion:reduce){z-media-player .z-flash-animation{animation-duration:.2s}}z-media-player .animate-fade-in{animation:zUiFadeIn .2s cubic-bezier(.16,1,.3,1)}@keyframes zUiFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}z-media-player .z-double-tap-ripple-left,z-media-player .z-double-tap-ripple-right{position:absolute;top:0;bottom:0;width:35%;display:flex;align-items:center;z-index:11;pointer-events:none}z-media-player .z-double-tap-ripple-left:before,z-media-player .z-double-tap-ripple-right:before{position:absolute;inset:0;content:\"\";opacity:0;animation-duration:.72s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,1,.5,1)}z-media-player .z-double-tap-ripple-left{left:0;justify-content:flex-start;padding-left:5%}z-media-player .z-double-tap-ripple-left:before{background:radial-gradient(circle at 0% 50%,#ffffff21,#fff0 70%);border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;animation-name:zUiDoubleTapRippleLeft;transform-origin:left center}z-media-player .z-double-tap-ripple-left.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleLeftAlt}z-media-player .z-double-tap-ripple-right{right:0;justify-content:flex-end;padding-right:5%}z-media-player .z-double-tap-ripple-right:before{background:radial-gradient(circle at 100% 50%,#ffffff21,#fff0 70%);border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;animation-name:zUiDoubleTapRippleRight;transform-origin:right center}z-media-player .z-double-tap-ripple-right.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleRightAlt}z-media-player .z-skip-overlay-content{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;color:#fff;font-family:inherit;font-size:18px;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.75);-webkit-user-select:none;user-select:none}z-media-player .z-skip-overlay-number{min-width:42px;animation:zUiSkipNumberBump .22s cubic-bezier(.2,.85,.25,1) forwards;text-align:center;transform-origin:center}z-media-player .z-skip-pulse-alt .z-skip-overlay-number{animation-name:zUiSkipNumberBumpAlt}z-media-player .z-skip-overlay-arrows{display:inline-flex;align-items:center;color:#fffffff2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}@keyframes zUiDoubleTapRippleLeft{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleLeftAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleRight{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}@keyframes zUiDoubleTapRippleRightAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}z-media-player .z-chevron-slide-left{animation:zUiChevronSlideLeft .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-chevron-slide-right{animation:zUiChevronSlideRight .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-skip-pulse-alt .z-chevron-slide-left{animation-name:zUiChevronSlideLeftAlt}z-media-player .z-skip-pulse-alt .z-chevron-slide-right{animation-name:zUiChevronSlideRightAlt}@keyframes zUiSkipNumberBump{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiSkipNumberBumpAlt{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiChevronSlideLeft{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRight{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes zUiChevronSlideLeftAlt{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRightAlt{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}z-media-player #z_media_player_volume_slider{-webkit-appearance:none;appearance:none;background:transparent}z-media-player #z_media_player_volume_slider::-webkit-slider-runnable-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:10px;width:10px;border-radius:9999px;margin-top:-3.5px;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-webkit-slider-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}z-media-player #z_media_player_volume_slider::-moz-range-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-moz-range-thumb{background:#fff;height:10px;width:10px;border-radius:9999px;border:none;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-moz-range-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-moz-range-thumb{transform:scale(1.3)}.z-media-player-popover{background-color:#0000008c!important;border:none!important;box-shadow:0 0 0 1px #0000001a,0 1px 3px #00000026,0 1px 2px -1px #00000026!important;border-radius:8px!important;padding:0!important;transform-origin:bottom center}.z-media-player-popover:after{position:absolute;inset:0;z-index:10;border-radius:inherit;box-shadow:inset 0 1px #ffffff1a,inset 0 0 0 1px #ffffff0d;content:\"\";pointer-events:none}.z-media-player-popover[data-state=open]{animation:zUiMediaSettingsPopoverIn .16s cubic-bezier(.2,.85,.25,1) forwards}.z-media-player-popover[data-state=closed]{animation:zUiMediaSettingsPopoverOut .16s cubic-bezier(.4,0,.2,1) forwards!important}.z-media-player-popover .bg-popover{background-color:transparent!important;color:#e4e4e7!important}.z-media-player-popover .z-media-player-settings{overflow:hidden;transform-origin:bottom right;animation:zUiMediaSettingsPanelIn .16s cubic-bezier(.2,.85,.25,1)}.z-media-player-popover .z-media-player-settings-panel{gap:4px;transform-origin:top right;animation:zUiMediaSettingsPanelIn .14s cubic-bezier(.2,.85,.25,1);will-change:opacity,transform}.z-media-player-popover .z-media-player-settings.z-main-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromLeft}.z-media-player-popover .z-media-player-settings.z-sub-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromRight}.z-media-player-popover .z-media-player-settings-item,.z-media-player-popover .z-media-player-settings-back{position:relative;display:flex;width:100%;min-width:0;height:32px;min-height:32px;cursor:pointer;align-items:center;border:0;border-radius:4px;background-color:transparent;padding:0 8px;color:#e4e4e7;font-size:12px;font-weight:500;line-height:1;outline:none;transition:background-color .12s ease,color .12s ease}.z-media-player-popover .z-media-player-settings-item{justify-content:space-between;gap:12px;text-align:left}.z-media-player-popover .z-media-player-settings-item:before{position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:9999px;background-color:#fff;content:\"\";opacity:0;transform:scaleY(.5);transition:opacity .12s ease,transform .12s ease}.z-media-player-popover .z-media-player-settings-item.z-active{background-color:#ffffff14;color:#fff;font-weight:600}.z-media-player-popover .z-media-player-settings-item.z-active:before{opacity:1;transform:scaleY(1)}.z-media-player-popover .z-media-player-settings-back{justify-content:flex-start;gap:8px;color:#f4f4f5;font-weight:600}.z-media-player-popover .z-media-player-settings-item:hover,.z-media-player-popover .z-media-player-settings-back:hover,.z-media-player-popover .z-media-player-settings-item:focus-visible,.z-media-player-popover .z-media-player-settings-back:focus-visible{background-color:#ffffff1a}@keyframes zUiMediaSettingsPopoverIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes zUiMediaSettingsPopoverOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(4px) scale(.96)}}@keyframes zUiMediaSettingsPanelIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes zUiMediaSettingsPanelFromRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes zUiMediaSettingsPanelFromLeft{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZMediaPlayerComponent, decorators: [{
             type: Component,
@@ -696,11 +1000,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                         '[class]': 'zClasses()',
                         '[attr.tabindex]': '0',
                         '(keydown)': 'onKeyDown($event)',
-                        '(mousemove)': 'onMouseMove()',
                         '(mouseleave)': 'onMouseLeave()',
                         '(document:fullscreenchange)': 'onFullscreenStateChange()',
-                    }, template: "<!-- Th\u1EBB video ch\u00EDnh ph\u00E1t ngu\u1ED3n zSrc -->\n<video\n  #videoElement\n  class=\"h-full w-full cursor-pointer object-contain\"\n  [src]=\"effectiveSrc()\"\n  [poster]=\"zPoster()\"\n  [loop]=\"zLoop()\"\n  [autoplay]=\"zAutoplay()\"\n  playsinline\n  webkit-playsinline\n  (click)=\"onVideoClick($event)\"\n  (play)=\"onPlayStateChange(true)\"\n  (pause)=\"onPlayStateChange(false)\"\n  (timeupdate)=\"onTimeUpdate()\"\n  (durationchange)=\"onDurationChange()\"\n  (seeking)=\"onSeeking(true)\"\n  (seeked)=\"onSeeking(false)\"\n  (waiting)=\"onSeeking(true)\"\n  (playing)=\"onSeeking(false)\"\n  (enterpictureinpicture)=\"onEnterPiP()\"\n  (leavepictureinpicture)=\"onLeavePiP()\"\n  (webkitpresentationmodechanged)=\"onWebkitPresentationModeChanged()\">\n  @for (sub of zSubtitles(); track sub.src) {\n    <track\n      [src]=\"sub.src\"\n      kind=\"subtitles\"\n      [srclang]=\"sub.srclang\"\n      [label]=\"sub.label\"\n      [default]=\"sub.default || false\" />\n  }\n</video>\n\n<!-- L\u1EDBp ph\u1EE7 v\u00F2ng xoay loading khi video \u0111ang buffer -->\n@if (isBuffering()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[10] flex items-center justify-center bg-black/20\">\n    <div class=\"size-14 animate-spin rounded-full border-4 border-white/20 border-t-red-600\"></div>\n  </div>\n}\n\n<!-- Hi\u1EC7u \u1EE9ng nh\u1EA5p nh\u00E1y Play/Pause l\u1EDBn gi\u1EEFa m\u00E0n h\u00ECnh t\u01B0\u01A1ng t\u1EF1 YouTube -->\n@if (playPauseFlash()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[11] flex items-center justify-center\">\n    <div\n      class=\"z-flash-animation flex size-14 items-center justify-center rounded-full bg-black/60 text-white sm:size-20\">\n      <z-icon\n        [zType]=\"playPauseFlash() === 'play' ? 'lucidePlay' : 'lucidePause'\"\n        zSize=\"24\"\n        [zStrokeWidth]=\"2\"\n        [class.translate-x-[2px]]=\"playPauseFlash() === 'play'\" />\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Tr\u00E1i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'left') {\n  <div class=\"z-double-tap-ripple-left\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-number\">- {{ skipOverlayValue() }}</span>\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-left\">\n        <z-icon zType=\"lucideChevronsLeft\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Ph\u1EA3i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'right') {\n  <div class=\"z-double-tap-ripple-right\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-right\">\n        <z-icon zType=\"lucideChevronsRight\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n      <span class=\"z-skip-overlay-number\">+ {{ skipOverlayValue() }}</span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 ch\u1EE9a thanh \u0111i\u1EC1u khi\u1EC3n (Bottom controls panel) -->\n<div\n  class=\"pointer-events-none absolute inset-x-0 bottom-0 z-[12] flex flex-col bg-gradient-to-t from-black/85 via-black/40 to-transparent p-3 pt-12 transition-opacity duration-300 select-none\"\n  [class.opacity-0]=\"!showControls()\"\n  [class.invisible]=\"!showControls()\">\n  <!-- Thanh Timeline (Progress Bar) t\u00F9y ch\u1EC9nh ki\u1EC3u YouTube -->\n  <div\n    #timelineContainer\n    id=\"z_media_player_timeline\"\n    class=\"group/timeline pointer-events-auto relative mb-3 flex h-1 w-full cursor-pointer items-center transition-all hover:h-1.5\"\n    (mousedown)=\"onTimelineDragStart($event)\"\n    (mousemove)=\"onTimelineHover($event)\"\n    (mouseleave)=\"onTimelineHoverEnd()\">\n    <!-- Thanh n\u1EC1n x\u00E1m c\u1EE7a thanh timeline -->\n    <div\n      class=\"absolute inset-x-0 h-1 overflow-hidden rounded-full bg-white/25 transition-all group-hover/timeline:h-1.5\">\n      <!-- Ti\u1EBFn tr\u00ECnh t\u1EA3i buffer c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\" [style.width.%]=\"bufferedProgress()\"></div>\n      <!-- Ti\u1EBFn tr\u00ECnh ph\u00E1t hi\u1EC7n t\u1EA1i c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-red-600\" [style.width.%]=\"progress()\"></div>\n    </div>\n\n    <!-- \u0110\u1EA7u k\u00E9o timeline (Thumb) \u0111\u1ECF ch\u1EC9 hi\u1EC3n th\u1ECB khi hover ho\u1EB7c k\u00E9o -->\n    <div\n      class=\"bg-red-650 pointer-events-none absolute size-3.5 -translate-x-1/2 scale-0 transform rounded-full opacity-0 transition-opacity duration-150 group-hover/timeline:scale-100 group-hover/timeline:opacity-100\"\n      [style.left.%]=\"progress()\"></div>\n\n    <!-- Tooltip hi\u1EC3n th\u1ECB m\u1ED1c th\u1EDDi gian khi hover -->\n    @if (hoverTimeLabel()) {\n      <div\n        class=\"pointer-events-none absolute bottom-4 z-[20] -translate-x-1/2 rounded-xs bg-zinc-950/70 px-2 py-1 font-mono text-[11px] leading-none whitespace-nowrap text-zinc-100 shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)] backdrop-blur-2xl\"\n        [style.left.px]=\"hoverX()\">\n        {{ hoverTimeLabel() }}\n      </div>\n    }\n  </div>\n\n  <!-- H\u00E0ng ch\u1EE9a c\u00E1c n\u00FAt b\u1EA5m \u0111i\u1EC1u khi\u1EC3n ch\u1EE9c n\u0103ng -->\n  <div class=\"pointer-events-auto flex items-center justify-between text-sm text-white\">\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn tr\u00E1i -->\n    <div class=\"flex items-center gap-2\">\n      <!-- N\u00FAt Ph\u00E1t / T\u1EA1m d\u1EEBng -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_play_btn\"\n        class=\"mr-1 flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n        (click)=\"togglePlay()\">\n        <z-icon [zType]=\"isPlaying() ? 'lucidePause' : 'lucidePlay'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt Tua l\u00F9i 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_rewind_5_btn\"\n        class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua l\u00F9i 5 gi\u00E2y (Arrow Left)\"\n        (click)=\"triggerSkip(5, 'left')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCcw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- N\u00FAt Tua ti\u1EBFn 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_forward_5_btn\"\n        class=\"mr-1 hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua ti\u1EBFn 5 gi\u00E2y (Arrow Right)\"\n        (click)=\"triggerSkip(5, 'right')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- T\u1ED5 h\u1EE3p n\u00FAt Mute v\u00E0 Slider \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang -->\n      <div class=\"group/volume hidden items-center gap-1.5 sm:flex\">\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mute_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"(isMuted() ? 'i18n_z_ui_media_player_unmute' : 'i18n_z_ui_media_player_mute') | translate\"\n          (click)=\"toggleMute()\">\n          <z-icon\n            [zType]=\"isMuted() ? 'lucideVolumeX' : volume() < 0.5 ? 'lucideVolume1' : 'lucideVolume2'\"\n            zSize=\"20\"\n            [zStrokeWidth]=\"2\" />\n        </button>\n        <!-- Thanh tr\u01B0\u1EE3t \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang m\u1EDF r\u1ED9ng khi hover -->\n        <input\n          type=\"range\"\n          id=\"z_media_player_volume_slider\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          [ngModel]=\"volume()\"\n          (ngModelChange)=\"onVolumeChange($event)\"\n          class=\"accent-red-650 h-1 w-0 cursor-pointer rounded-lg bg-white/20 opacity-0 transition-all duration-200 outline-none group-hover/volume:w-16 group-hover/volume:opacity-100 focus-visible:w-16 focus-visible:opacity-100\" />\n      </div>\n\n      <!-- Hi\u1EC3n th\u1ECB th\u1EDDi gian ph\u00E1t (currentTime / duration) -->\n      <div class=\"pl-1 font-mono text-xs text-white/90 select-none\">\n        <span>{{ currentTimeLabel() }}</span>\n        <span class=\"mx-1 text-white/40\">/</span>\n        <span class=\"text-white/60\">{{ durationLabel() }}</span>\n      </div>\n    </div>\n\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn ph\u1EA3i -->\n    <div class=\"flex items-center gap-1.5\">\n      <!-- N\u00FAt m\u1EDF tr\u00ECnh \u0111\u01A1n C\u00E0i \u0111\u1EB7t b\u1EB1ng ZPopoverDirective -->\n      @if (isFullscreen()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          (click)=\"toggleInlineSettings()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      } @else {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          z-popover\n          [zPopoverContent]=\"speedMenuTemplate\"\n          zPosition=\"top-right\"\n          zTrigger=\"click\"\n          [zOffset]=\"6\"\n          zClass=\"z-media-player-popover\"\n          (zShow)=\"showSettings.set(true); onMouseMove()\"\n          (zHide)=\"onSettingsHidden()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt Miniplayer (Picture-in-Picture) - \u1EA8n ho\u1EB7c disable n\u1EBFu browser ko h\u1ED7 tr\u1EE3 -->\n      @if (isPiPSupported()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mini_btn\"\n          class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n          [title]=\"'i18n_z_ui_media_player_miniplayer' | translate\"\n          (click)=\"toggleMiniplayer()\">\n          <z-icon zType=\"lucideTv\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 r\u1EA1p chi\u1EBFu phim (Theater Mode) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        id=\"z_media_player_theater_btn\"\n        class=\"flex hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none md:flex\"\n        [title]=\"\n          (isTheaterMode() ? 'i18n_z_ui_media_player_default_mode' : 'i18n_z_ui_media_player_theater_mode') | translate\n        \"\n        (click)=\"toggleTheaterMode()\">\n        <z-icon\n          [zType]=\"isTheaterMode() ? 'lucideSquare' : 'lucideRectangleHorizontal'\"\n          zSize=\"20\"\n          [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 to\u00E0n m\u00E0n h\u00ECnh (Fullscreen) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_full_btn\"\n        class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"\n          (isFullscreen() ? 'i18n_z_ui_media_player_exit_fullscreen' : 'i18n_z_ui_media_player_fullscreen') | translate\n        \"\n        (click)=\"toggleFullscreen()\">\n        <z-icon [zType]=\"isFullscreen() ? 'lucideMinimize' : 'lucideMaximize'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (isFullscreen() && showSettings()) {\n  <div class=\"z-media-player-popover z-media-player-inline-settings\">\n    <ng-container [ngTemplateOutlet]=\"speedMenuTemplate\" />\n  </div>\n}\n\n<!-- Template c\u1EA5u h\u00ECnh Popover c\u00E0i \u0111\u1EB7t s\u1EED d\u1EE5ng ng-template -->\n<ng-template #speedMenuTemplate>\n  <div\n    class=\"z-media-player-settings flex w-44 flex-col px-1 py-[4px] text-zinc-200\"\n    [class.z-main-panel]=\"settingsPanel() === 'main'\"\n    [class.z-sub-panel]=\"settingsPanel() !== 'main'\">\n    @if (settingsPanel() === 'main') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        @if (qualitySources().length > 1) {\n          <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('quality')\">\n            <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ 'i18n_z_ui_media_player_quality' | translate }}\n            </span>\n            <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ activeQualityLabel() }}</span>\n              <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n            </span>\n          </button>\n        }\n        <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('speed')\">\n          <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n            {{ 'i18n_z_ui_media_player_speed' | translate }}\n          </span>\n          <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">\n              {{ playbackSpeed() === 1 ? ('i18n_z_ui_media_player_normal' | translate) : playbackSpeed() + 'x' }}\n            </span>\n            <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (settingsPanel() === 'quality') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_quality' | translate }}</span>\n        </button>\n        @for (source of qualitySources(); track source.src) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_quality_btn_' + source.label\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"effectiveSrc() === source.src\"\n            (click)=\"setQualitySource(source)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ source.label }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (settingsPanel() === 'speed') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_speed' | translate }}</span>\n        </button>\n        @for (speed of playbackSpeeds; track speed.value) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_speed_btn_' + speed.value\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"playbackSpeed() === speed.value\"\n            (click)=\"setPlaybackSpeed(speed.value)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ speed.label | translate }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["z-media-player{display:block;width:100%;outline:none}z-media-player:focus,z-media-player:focus-visible{outline:none}z-media-player video::cue{background-color:#080808d9;color:#fff;font-family:inherit;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.9);padding:4px 8px;border-radius:4px}z-media-player .z-flash-animation{animation:zUiFlashIcon .72s cubic-bezier(.2,.85,.25,1) forwards;will-change:opacity,transform,filter}z-media-player .z-flash-animation z-icon{width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center}z-media-player .z-flash-animation z-icon ng-icon,z-media-player .z-flash-animation z-icon svg{width:100%!important;height:100%!important}@media(min-width:640px){z-media-player .z-flash-animation z-icon{width:32px!important;height:32px!important}}@keyframes zUiFlashIcon{0%{filter:blur(2px);opacity:0;transform:scale(.72)}18%{filter:blur(0);opacity:.95;transform:scale(1)}58%{opacity:.9;transform:scale(1.04)}to{filter:blur(0);opacity:0;transform:scale(1.18)}}z-media-player .animate-fade-in{animation:zUiFadeIn .2s cubic-bezier(.16,1,.3,1)}@keyframes zUiFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}z-media-player .z-double-tap-ripple-left,z-media-player .z-double-tap-ripple-right{position:absolute;top:0;bottom:0;width:35%;display:flex;align-items:center;z-index:11;pointer-events:none}z-media-player .z-double-tap-ripple-left:before,z-media-player .z-double-tap-ripple-right:before{position:absolute;inset:0;content:\"\";opacity:0;animation-duration:.72s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,1,.5,1)}z-media-player .z-double-tap-ripple-left{left:0;justify-content:flex-start;padding-left:5%}z-media-player .z-double-tap-ripple-left:before{background:radial-gradient(circle at 0% 50%,#ffffff21,#fff0 70%);border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;animation-name:zUiDoubleTapRippleLeft;transform-origin:left center}z-media-player .z-double-tap-ripple-left.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleLeftAlt}z-media-player .z-double-tap-ripple-right{right:0;justify-content:flex-end;padding-right:5%}z-media-player .z-double-tap-ripple-right:before{background:radial-gradient(circle at 100% 50%,#ffffff21,#fff0 70%);border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;animation-name:zUiDoubleTapRippleRight;transform-origin:right center}z-media-player .z-double-tap-ripple-right.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleRightAlt}z-media-player .z-skip-overlay-content{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;color:#fff;font-family:inherit;font-size:18px;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.75);-webkit-user-select:none;user-select:none}z-media-player .z-skip-overlay-number{min-width:42px;animation:zUiSkipNumberBump .22s cubic-bezier(.2,.85,.25,1) forwards;text-align:center;transform-origin:center}z-media-player .z-skip-pulse-alt .z-skip-overlay-number{animation-name:zUiSkipNumberBumpAlt}z-media-player .z-skip-overlay-arrows{display:inline-flex;align-items:center;color:#fffffff2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}@keyframes zUiDoubleTapRippleLeft{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleLeftAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleRight{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}@keyframes zUiDoubleTapRippleRightAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}z-media-player .z-chevron-slide-left{animation:zUiChevronSlideLeft .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-chevron-slide-right{animation:zUiChevronSlideRight .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-skip-pulse-alt .z-chevron-slide-left{animation-name:zUiChevronSlideLeftAlt}z-media-player .z-skip-pulse-alt .z-chevron-slide-right{animation-name:zUiChevronSlideRightAlt}@keyframes zUiSkipNumberBump{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiSkipNumberBumpAlt{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiChevronSlideLeft{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRight{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes zUiChevronSlideLeftAlt{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRightAlt{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}z-media-player #z_media_player_volume_slider{-webkit-appearance:none;appearance:none;background:transparent}z-media-player #z_media_player_volume_slider::-webkit-slider-runnable-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:10px;width:10px;border-radius:9999px;margin-top:-3.5px;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-webkit-slider-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}z-media-player #z_media_player_volume_slider::-moz-range-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-moz-range-thumb{background:#fff;height:10px;width:10px;border-radius:9999px;border:none;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-moz-range-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-moz-range-thumb{transform:scale(1.3)}.z-media-player-popover{backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;background-color:#0f0f0f99!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 15px 30px -10px #000c!important;border-radius:8px!important;padding:0!important;transform-origin:bottom right}.z-media-player-popover[data-state=open]{animation:zUiMediaSettingsPopoverIn .16s cubic-bezier(.2,.85,.25,1) forwards}.z-media-player-popover[data-state=closed]{animation:zUiMediaSettingsPopoverOut .16s cubic-bezier(.4,0,.2,1) forwards!important}.z-media-player-popover .bg-popover{background-color:transparent!important;color:#e4e4e7!important}.z-media-player-popover .z-media-player-settings{overflow:hidden;transform-origin:bottom right;animation:zUiMediaSettingsPanelIn .16s cubic-bezier(.2,.85,.25,1)}.z-media-player-popover .z-media-player-settings-panel{gap:4px;transform-origin:top right;animation:zUiMediaSettingsPanelIn .14s cubic-bezier(.2,.85,.25,1);will-change:opacity,transform}.z-media-player-popover .z-media-player-settings.z-main-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromLeft}.z-media-player-popover .z-media-player-settings.z-sub-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromRight}.z-media-player-popover .z-media-player-settings-item,.z-media-player-popover .z-media-player-settings-back{position:relative;display:flex;width:100%;min-width:0;height:32px;min-height:32px;cursor:pointer;align-items:center;border:0;border-radius:4px;background-color:transparent;padding:0 8px;color:#e4e4e7;font-size:12px;font-weight:500;line-height:1;outline:none;transition:background-color .12s ease,color .12s ease}.z-media-player-popover .z-media-player-settings-item{justify-content:space-between;gap:12px;text-align:left}.z-media-player-popover .z-media-player-settings-item:before{position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:9999px;background-color:#fff;content:\"\";opacity:0;transform:scaleY(.5);transition:opacity .12s ease,transform .12s ease}.z-media-player-popover .z-media-player-settings-item.z-active{background-color:#ffffff14;color:#fff;font-weight:600}.z-media-player-popover .z-media-player-settings-item.z-active:before{opacity:1;transform:scaleY(1)}.z-media-player-popover .z-media-player-settings-back{justify-content:flex-start;gap:8px;color:#f4f4f5;font-weight:600}.z-media-player-popover .z-media-player-settings-item:hover,.z-media-player-popover .z-media-player-settings-back:hover,.z-media-player-popover .z-media-player-settings-item:focus-visible,.z-media-player-popover .z-media-player-settings-back:focus-visible{background-color:#ffffff1a}.z-media-player-inline-settings{position:absolute;right:12px;bottom:64px;z-index:30}@keyframes zUiMediaSettingsPopoverIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes zUiMediaSettingsPopoverOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(4px) scale(.96)}}@keyframes zUiMediaSettingsPanelIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes zUiMediaSettingsPanelFromRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes zUiMediaSettingsPanelFromLeft{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSrc", required: true }] }], zSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSources", required: false }] }], zPoster: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPoster", required: false }] }], zAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoplay", required: false }] }], zLoop: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoop", required: false }] }], zMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMuted", required: false }] }], zVolume: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVolume", required: false }] }], zSubtitles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSubtitles", required: false }] }], zPlay: [{ type: i0.Output, args: ["zPlay"] }], zTimeUpdate: [{ type: i0.Output, args: ["zTimeUpdate"] }], zVolumeChange: [{ type: i0.Output, args: ["zVolumeChange"] }], zFullscreenChange: [{ type: i0.Output, args: ["zFullscreenChange"] }], zTheaterModeChange: [{ type: i0.Output, args: ["zTheaterModeChange"] }], zMiniplayerChange: [{ type: i0.Output, args: ["zMiniplayerChange"] }], zQualityChange: [{ type: i0.Output, args: ["zQualityChange"] }], videoElement: [{ type: i0.ViewChild, args: ['videoElement', { isSignal: true }] }], timelineContainer: [{ type: i0.ViewChild, args: ['timelineContainer', { isSignal: true }] }] } });
+                    }, template: "@if (isYouTube()) {\n  <!-- Nh\u00FAng iframe YouTube g\u1ED1c, d\u00F9ng control m\u1EB7c \u0111\u1ECBnh c\u1EE7a YouTube -->\n  <iframe\n    class=\"h-full w-full\"\n    [src]=\"youtubeEmbedUrl()\"\n    title=\"YouTube video player\"\n    frameborder=\"0\"\n    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n    allowfullscreen></iframe>\n} @else {\n  <!-- Th\u1EBB video ch\u00EDnh ph\u00E1t ngu\u1ED3n zSrc -->\n  <video\n    #videoElement\n    class=\"h-full w-full cursor-pointer object-cover\"\n    [src]=\"effectiveSrc()\"\n    [poster]=\"zPoster()\"\n    [loop]=\"zLoop()\"\n    [autoplay]=\"zAutoplay()\"\n    playsinline\n    webkit-playsinline\n    (click)=\"onVideoClick()\"\n    (play)=\"onPlayStateChange(true)\"\n    (pause)=\"onPlayStateChange(false)\"\n    (loadeddata)=\"onLoadedData()\"\n    (error)=\"onVideoError()\"\n    (timeupdate)=\"onTimeUpdate()\"\n    (durationchange)=\"onDurationChange()\"\n    (seeking)=\"onSeeking(true)\"\n    (seeked)=\"onSeeking(false)\"\n    (waiting)=\"onSeeking(true)\"\n    (playing)=\"onSeeking(false)\"\n    (enterpictureinpicture)=\"onEnterPiP()\"\n    (leavepictureinpicture)=\"onLeavePiP()\"\n    (webkitpresentationmodechanged)=\"onWebkitPresentationModeChanged()\">\n    @for (sub of zSubtitles(); track sub.src) {\n      <track\n        [src]=\"sub.src\"\n        kind=\"subtitles\"\n        [srclang]=\"sub.srclang\"\n        [label]=\"sub.label\"\n        [default]=\"sub.default || false\" />\n    }\n  </video>\n\n  @if (subtitleText()) {\n    <div\n      class=\"pointer-events-none absolute inset-x-3 z-[11] mx-auto w-fit max-w-[calc(100%-1.5rem)] rounded-sm bg-black/80 px-4 py-2 text-center text-base leading-6 whitespace-pre-line text-white shadow-sm transition-[bottom] duration-200 ease-out sm:text-lg sm:leading-7\"\n      [class.bottom-16]=\"showControls()\"\n      [class.bottom-2]=\"!showControls()\">\n      {{ subtitleText() }}\n    </div>\n  }\n\n  <!-- V\u00F2ng tr\u00F2n loading gi\u1EEFa m\u00E0n h\u00ECnh khi video \u0111ang buffer -->\n  @if (isBuffering()) {\n    <div class=\"pointer-events-none absolute inset-0 z-[13] flex items-center justify-center\">\n      <span class=\"z-media-player-loading-pulse\"></span>\n    </div>\n  }\n\n  <!-- Hi\u1EC7u \u1EE9ng nh\u1EA5p nh\u00E1y Play/Pause l\u1EDBn gi\u1EEFa m\u00E0n h\u00ECnh t\u01B0\u01A1ng t\u1EF1 YouTube -->\n  <div class=\"pointer-events-none absolute inset-0 z-[11] flex items-center justify-center\">\n    <div\n      class=\"z-flash-animation flex size-10 scale-75 items-center justify-center rounded-full bg-black/60 text-white opacity-0\"\n      [class.z-flash-active]=\"!!playPauseFlash()\">\n      @if (playPauseFlash(); as flashType) {\n        <z-icon\n          [zType]=\"flashType === 'play' ? 'tablerPlayerPlayFill' : 'tablerPlayerPauseFill'\"\n          zSize=\"28\"\n          [zStrokeWidth]=\"2\"\n          [class.translate-x-[2px]]=\"flashType === 'play'\" />\n      }\n    </div>\n  </div>\n\n  <!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Tr\u00E1i (YouTube style) -->\n  @if (skipOverlayValue() > 0 && skipOverlayDirection() === 'left') {\n    <div class=\"z-double-tap-ripple-left\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n      <div class=\"z-skip-overlay-content\">\n        <span class=\"z-skip-overlay-number\">- {{ skipOverlayValue() }}</span>\n        <span class=\"z-skip-overlay-arrows z-chevron-slide-left\">\n          <z-icon zType=\"tablerChevronsLeft\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n        </span>\n      </div>\n    </div>\n  }\n\n  <!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Ph\u1EA3i (YouTube style) -->\n  @if (skipOverlayValue() > 0 && skipOverlayDirection() === 'right') {\n    <div class=\"z-double-tap-ripple-right\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n      <div class=\"z-skip-overlay-content\">\n        <span class=\"z-skip-overlay-arrows z-chevron-slide-right\">\n          <z-icon zType=\"tablerChevronsRight\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n        </span>\n        <span class=\"z-skip-overlay-number\">+ {{ skipOverlayValue() }}</span>\n      </div>\n    </div>\n  }\n\n  <!-- L\u1EDBp ph\u1EE7 gradient ph\u1EE7 s\u00E1t to\u00E0n b\u1ED9 m\u00E9p d\u01B0\u1EDBi video -->\n  <div\n    class=\"pointer-events-none absolute inset-x-0 bottom-0 z-[10] h-28 bg-gradient-to-t from-black/55 via-black/25 to-transparent transition-opacity duration-200 ease-out\"\n    [class.opacity-0]=\"!showControls()\"></div>\n\n  <!-- Thanh \u0111i\u1EC1u khi\u1EC3n d\u1EA1ng rounded-sm n\u1ED5i ph\u00EDa tr\u00EAn \u0111\u00E1y video -->\n  <div\n    class=\"z-media-player-controls absolute inset-x-2 bottom-2 z-[12] transition-opacity duration-200 ease-out select-none sm:inset-x-3 sm:bottom-3\"\n    [class.opacity-0]=\"!showControls()\"\n    [class.pointer-events-auto]=\"showControls()\"\n    [class.pointer-events-none]=\"!showControls()\">\n    <div class=\"z-media-player-controls-surface relative z-[1] rounded-sm px-2 py-1.5 text-sm text-white\">\n      <div class=\"flex items-center gap-1.5 sm:gap-2\">\n        <!-- N\u00FAt Ph\u00E1t / T\u1EA1m d\u1EEBng -->\n        @if (controls().play) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_play_btn\"\n            class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n            [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n            (click)=\"togglePlay()\">\n            <z-icon\n              [zType]=\"isPlaying() ? 'tablerPlayerPauseFill' : 'tablerPlayerPlayFill'\"\n              zSize=\"18\"\n              [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- N\u00FAt Tua l\u00F9i / Tua ti\u1EBFn 5 gi\u00E2y -->\n        @if (controls().skip) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_rewind_5_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 sm:flex\"\n            title=\"Tua l\u00F9i 5 gi\u00E2y (Arrow Left)\"\n            (click)=\"triggerSkip(5, 'left')\">\n            <z-icon zType=\"tablerRewindBackward5\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_forward_5_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 sm:flex\"\n            title=\"Tua ti\u1EBFn 5 gi\u00E2y (Arrow Right)\"\n            (click)=\"triggerSkip(5, 'right')\">\n            <z-icon zType=\"tablerRewindForward5\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- T\u1ED5 h\u1EE3p n\u00FAt Mute v\u00E0 Slider \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang -->\n        @if (controls().volume) {\n          <div class=\"group/volume hidden shrink-0 items-center sm:flex\">\n            <button\n              z-button\n              zType=\"ghost\"\n              zSize=\"sm\"\n              zShape=\"default\"\n              [zWave]=\"false\"\n              type=\"button\"\n              id=\"z_media_player_mute_btn\"\n              class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n              [title]=\"(isMuted() ? 'i18n_z_ui_media_player_unmute' : 'i18n_z_ui_media_player_mute') | translate\"\n              (click)=\"toggleMute()\">\n              <z-icon\n                [zType]=\"isMuted() ? 'tablerVolumeOff' : volume() < 0.5 ? 'tablerVolume2' : 'tablerVolume'\"\n                zSize=\"18\"\n                [zStrokeWidth]=\"2\" />\n            </button>\n            <!-- Thanh tr\u01B0\u1EE3t \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang m\u1EDF r\u1ED9ng khi hover -->\n            <input\n              type=\"range\"\n              id=\"z_media_player_volume_slider\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              [ngModel]=\"volume()\"\n              (ngModelChange)=\"onVolumeChange($event)\"\n              class=\"accent-primary h-1 w-0 cursor-pointer rounded-lg bg-white/20 opacity-0 transition-all duration-200 outline-none group-hover/volume:w-16 group-hover/volume:opacity-100 focus-visible:w-16 focus-visible:opacity-100\" />\n          </div>\n        }\n\n        <!-- Th\u1EDDi gian ph\u00E1t: g\u1ED9p chung \"\u0111\u00E3 ph\u00E1t / t\u1ED5ng th\u1EDDi l\u01B0\u1EE3ng\" th\u00E0nh m\u1ED9t nh\u00F3m duy nh\u1EA5t -->\n        @if (controls().time) {\n          <span class=\"shrink-0 rounded-full bg-black/30 px-2 py-0.5 font-mono text-xs whitespace-nowrap text-white/90\">\n            {{ currentTimeLabel() }}\n            <span class=\"text-white/50\">/</span>\n            {{ durationLabel() }}\n          </span>\n        }\n\n        <!-- Thanh Timeline (Progress Bar) t\u00F9y ch\u1EC9nh ki\u1EC3u YouTube, n\u1EB1m chung h\u00E0ng v\u1EDBi c\u00E1c n\u00FAt -->\n        @if (controls().timeline) {\n          <div\n            #timelineContainer\n            id=\"z_media_player_timeline\"\n            class=\"group/timeline relative flex h-1 min-w-0 flex-1 cursor-pointer items-center\"\n            (mousedown)=\"onTimelineDragStart($event)\"\n            (mousemove)=\"onTimelineHover($event)\"\n            (mouseleave)=\"onTimelineHoverEnd()\">\n            <!-- Thanh n\u1EC1n x\u00E1m c\u1EE7a thanh timeline -->\n            <div\n              class=\"absolute inset-x-0 h-1 overflow-hidden rounded-full bg-white/25 transition-all group-hover/timeline:h-1.5\">\n              <!-- Ti\u1EBFn tr\u00ECnh t\u1EA3i buffer c\u1EE7a video -->\n              <div\n                class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\"\n                [style.width.%]=\"bufferedProgress()\"></div>\n              <!-- Ti\u1EBFn tr\u00ECnh ph\u00E1t hi\u1EC7n t\u1EA1i c\u1EE7a video -->\n              <div class=\"bg-primary absolute top-0 left-0 h-full rounded-full\" [style.width.%]=\"progress()\"></div>\n            </div>\n\n            <!-- \u0110\u1EA7u k\u00E9o timeline (Thumb) \u0111\u1ECF ch\u1EC9 hi\u1EC3n th\u1ECB khi hover ho\u1EB7c k\u00E9o -->\n            <div\n              class=\"bg-primary pointer-events-none absolute size-3.5 -translate-x-1/2 scale-0 transform rounded-full opacity-0 transition-opacity duration-150 group-hover/timeline:scale-100 group-hover/timeline:opacity-100\"\n              [style.left.%]=\"progress()\"></div>\n\n            <!-- Preview \u1EA3nh nh\u1ECF storyboard khi hover timeline (ki\u1EC3u YouTube) -->\n            @if (hoverThumbnailCue(); as cue) {\n              <div\n                class=\"pointer-events-none absolute z-[20] -translate-x-1/2 overflow-hidden rounded-md border-0 bg-black shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)]\"\n                [style.left.px]=\"hoverX()\"\n                [style.bottom.px]=\"24\"\n                [style.width.px]=\"cue.w\"\n                [style.height.px]=\"cue.h\">\n                <div\n                  class=\"bg-no-repeat\"\n                  [style.width.px]=\"cue.w\"\n                  [style.height.px]=\"cue.h\"\n                  [style.background-image]=\"'url(' + cue.src + ')'\"\n                  [style.background-position]=\"'-' + cue.x + 'px -' + cue.y + 'px'\"></div>\n              </div>\n            }\n\n            <!-- Tooltip hi\u1EC3n th\u1ECB m\u1ED1c th\u1EDDi gian khi hover -->\n            @if (hoverTimeLabel()) {\n              <div\n                class=\"pointer-events-none absolute bottom-4 z-[20] -translate-x-1/2 rounded-xs bg-zinc-950/70 px-2 py-1 font-mono text-[11px] leading-none whitespace-nowrap text-zinc-100 shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)] backdrop-blur-2xl\"\n                [style.left.px]=\"hoverX()\">\n                {{ hoverTimeLabel() }}\n              </div>\n            }\n          </div>\n        }\n\n        <!-- N\u00FAt m\u1EDF tr\u00ECnh \u0111\u01A1n C\u00E0i \u0111\u1EB7t b\u1EB1ng ZPopoverDirective -->\n        @if (controls().settings) {\n          @if (isFullscreen()) {\n            <div class=\"relative shrink-0\">\n              <button\n                z-button\n                zType=\"ghost\"\n                zSize=\"sm\"\n                zShape=\"default\"\n                [zWave]=\"false\"\n                type=\"button\"\n                id=\"z_media_player_settings_btn\"\n                class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:outline-none active:scale-90\"\n                [class.bg-white/15]=\"showSettings()\"\n                [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n                (click)=\"toggleInlineSettings()\">\n                <z-icon zType=\"tablerSettings\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n              </button>\n              <!-- Popover c\u00E0i \u0111\u1EB7t neo tr\u1EF1c ti\u1EBFp v\u00E0o n\u00FAt, v\u00EC overlay CDK kh\u00F4ng hi\u1EC3n th\u1ECB \u0111\u01B0\u1EE3c trong ch\u1EBF \u0111\u1ED9 Fullscreen g\u1ED1c -->\n              @if (showSettings()) {\n                <div class=\"z-media-player-popover absolute bottom-full left-1/2 mb-2 -translate-x-1/2\">\n                  <ng-container [ngTemplateOutlet]=\"speedMenuTemplate\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <button\n              z-button\n              zType=\"ghost\"\n              zSize=\"sm\"\n              zShape=\"default\"\n              [zWave]=\"false\"\n              type=\"button\"\n              id=\"z_media_player_settings_btn\"\n              class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:outline-none active:scale-90 aria-expanded:!bg-white/15 aria-expanded:!text-white\"\n              [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n              z-popover\n              [zPopoverContent]=\"speedMenuTemplate\"\n              zPosition=\"top\"\n              zTrigger=\"click\"\n              [zOffset]=\"9\"\n              zClass=\"z-media-player-popover\"\n              (zShow)=\"showSettings.set(true); onMouseMove()\"\n              (zHide)=\"onSettingsHidden()\">\n              <z-icon zType=\"tablerSettings\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n            </button>\n          }\n        }\n\n        <!-- N\u00FAt b\u1EADt/t\u1EAFt ph\u1EE5 \u0111\u1EC1 (CC) -->\n        @if (controls().subtitles && hasSubtitles()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"xs\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_subtitles_btn\"\n            class=\"flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n            [class.bg-white!]=\"captionsEnabled()\"\n            [class.text-black!]=\"captionsEnabled()\"\n            [attr.aria-pressed]=\"captionsEnabled()\"\n            [title]=\"'i18n_z_ui_media_player_subtitles' | translate\"\n            (click)=\"toggleSubtitles()\">\n            <span class=\"text-[11px] leading-none font-bold tracking-[-0.04em]\">CC</span>\n          </button>\n        }\n\n        <!-- N\u00FAt Miniplayer (Picture-in-Picture) - \u1EA8n ho\u1EB7c disable n\u1EBFu browser ko h\u1ED7 tr\u1EE3 -->\n        @if (controls().pip && isPiPSupported()) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_mini_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 sm:flex\"\n            [title]=\"'i18n_z_ui_media_player_miniplayer' | translate\"\n            (click)=\"toggleMiniplayer()\">\n            <z-icon zType=\"tablerPictureInPicture\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 r\u1EA1p chi\u1EBFu phim (Theater Mode) -->\n        @if (controls().theater) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            id=\"z_media_player_theater_btn\"\n            class=\"hidden size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90 md:flex\"\n            [title]=\"\n              (isTheaterMode() ? 'i18n_z_ui_media_player_default_mode' : 'i18n_z_ui_media_player_theater_mode')\n                | translate\n            \"\n            (click)=\"toggleTheaterMode()\">\n            <z-icon [zType]=\"isTheaterMode() ? 'tablerSquare' : 'tablerRectangle'\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n\n        <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 to\u00E0n m\u00E0n h\u00ECnh (Fullscreen) -->\n        @if (controls().fullscreen) {\n          <button\n            z-button\n            zType=\"ghost\"\n            zSize=\"sm\"\n            zShape=\"default\"\n            [zWave]=\"false\"\n            type=\"button\"\n            id=\"z_media_player_full_btn\"\n            class=\"flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm border-0 border-none bg-transparent p-0 text-white shadow-none transition-[background-color,color,transform] outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none active:scale-90\"\n            [title]=\"\n              (isFullscreen() ? 'i18n_z_ui_media_player_exit_fullscreen' : 'i18n_z_ui_media_player_fullscreen')\n                | translate\n            \"\n            (click)=\"toggleFullscreen()\">\n            <z-icon [zType]=\"isFullscreen() ? 'tablerMinimize' : 'tablerMaximize'\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n\n  <!-- Template c\u1EA5u h\u00ECnh Popover c\u00E0i \u0111\u1EB7t s\u1EED d\u1EE5ng ng-template -->\n  <ng-template #speedMenuTemplate>\n    <div\n      class=\"z-media-player-settings flex w-max max-w-48 min-w-28 flex-col px-1 py-[4px] text-zinc-200\"\n      [class.z-main-panel]=\"settingsPanel() === 'main'\"\n      [class.z-sub-panel]=\"settingsPanel() !== 'main'\">\n      @if (settingsPanel() === 'main') {\n        <div class=\"z-media-player-settings-panel flex flex-col\">\n          @if (qualitySources().length > 1) {\n            <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('quality')\">\n              <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n                {{ 'i18n_z_ui_media_player_quality' | translate }}\n              </span>\n              <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n                <span class=\"min-w-0 truncate whitespace-nowrap\">{{ activeQualityLabel() }}</span>\n                <z-icon zType=\"tablerChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n              </span>\n            </button>\n          }\n          <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('speed')\">\n            <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ 'i18n_z_ui_media_player_speed' | translate }}\n            </span>\n            <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">\n                {{ playbackSpeed() === 1 ? ('i18n_z_ui_media_player_normal' | translate) : playbackSpeed() + 'x' }}\n              </span>\n              <z-icon zType=\"tablerChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n            </span>\n          </button>\n        </div>\n      }\n\n      @if (settingsPanel() === 'quality') {\n        <div class=\"z-media-player-settings-panel flex flex-col\">\n          <button\n            type=\"button\"\n            [title]=\"'i18n_z_ui_media_player_back' | translate\"\n            class=\"z-media-player-settings-back\"\n            (click)=\"closeSettingsPanel()\">\n            <z-icon zType=\"tablerChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_quality' | translate }}</span>\n          </button>\n          @for (source of qualitySources(); track source.label) {\n            <button\n              type=\"button\"\n              [id]=\"'z_media_player_quality_btn_' + source.label\"\n              class=\"z-media-player-settings-item\"\n              [class.z-active]=\"activeQualityLabel() === source.label\"\n              (click)=\"setQualitySource(source)\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ source.label }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      @if (settingsPanel() === 'speed') {\n        <div class=\"z-media-player-settings-panel flex flex-col\">\n          <button\n            type=\"button\"\n            [title]=\"'i18n_z_ui_media_player_back' | translate\"\n            class=\"z-media-player-settings-back\"\n            (click)=\"closeSettingsPanel()\">\n            <z-icon zType=\"tablerChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_speed' | translate }}</span>\n          </button>\n          @for (speed of playbackSpeeds; track speed.value) {\n            <button\n              type=\"button\"\n              [id]=\"'z_media_player_speed_btn_' + speed.value\"\n              class=\"z-media-player-settings-item\"\n              [class.z-active]=\"playbackSpeed() === speed.value\"\n              (click)=\"setPlaybackSpeed(speed.value)\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ speed.label | translate }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n}\n", styles: ["z-media-player{display:block;width:100%;container-type:inline-size;outline:none}z-media-player:focus,z-media-player:focus-visible{outline:none}z-media-player .z-media-player-controls-surface{position:relative;background-color:#0000008c;box-shadow:0 0 0 1px #0000001a,0 1px 3px #00000026,0 1px 2px -1px #00000026}z-media-player .z-media-player-controls-surface:after{position:absolute;inset:0;z-index:10;border-radius:inherit;box-shadow:inset 0 1px #ffffff1a,inset 0 0 0 1px #ffffff0d;content:\"\";pointer-events:none}z-media-player video::cue{visibility:hidden;background-color:#080808d9;color:#fff;font-family:inherit;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.9);padding:4px 8px;border-radius:4px}z-media-player .z-media-player-loading-pulse{position:relative;width:64px;height:64px}z-media-player .z-media-player-loading-pulse:before,z-media-player .z-media-player-loading-pulse:after{position:absolute;inset:0;border-radius:9999px;background-color:#0000008c;content:\"\";animation:zUiMediaPlayerLoadingBreathe 2.2s ease-in-out infinite;will-change:transform}z-media-player .z-media-player-loading-pulse:after{inset:14px;background-color:#000000b3;animation-delay:-1.1s}@keyframes zUiMediaPlayerLoadingBreathe{0%,to{transform:scale(.82)}50%{transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){z-media-player .z-media-player-loading-pulse:before,z-media-player .z-media-player-loading-pulse:after{animation:none;transform:scale(1)}}z-media-player .z-flash-animation{will-change:opacity,transform}z-media-player .z-flash-animation z-icon{width:20px!important;height:20px!important;display:inline-flex!important;align-items:center;justify-content:center}z-media-player .z-flash-animation z-icon ng-icon,z-media-player .z-flash-animation z-icon svg{width:100%!important;height:100%!important}@container (min-width: 480px){z-media-player .z-flash-animation{width:64px;height:64px}z-media-player .z-flash-animation z-icon{width:32px!important;height:32px!important}}@container (min-width: 800px){z-media-player .z-flash-animation{width:96px;height:96px}z-media-player .z-flash-animation z-icon{width:48px!important;height:48px!important}}z-media-player:fullscreen .z-flash-animation{width:112px;height:112px}z-media-player:fullscreen .z-flash-animation z-icon{width:56px!important;height:56px!important}z-media-player .z-flash-animation.z-flash-active{animation:zUiFlashIcon .5s ease-out forwards}@keyframes zUiFlashIcon{0%{opacity:0;transform:scale(.76)}18%{opacity:.95}to{opacity:0;transform:scale(1.18)}}@media(prefers-reduced-motion:reduce){z-media-player .z-flash-animation{animation-duration:.2s}}z-media-player .animate-fade-in{animation:zUiFadeIn .2s cubic-bezier(.16,1,.3,1)}@keyframes zUiFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}z-media-player .z-double-tap-ripple-left,z-media-player .z-double-tap-ripple-right{position:absolute;top:0;bottom:0;width:35%;display:flex;align-items:center;z-index:11;pointer-events:none}z-media-player .z-double-tap-ripple-left:before,z-media-player .z-double-tap-ripple-right:before{position:absolute;inset:0;content:\"\";opacity:0;animation-duration:.72s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,1,.5,1)}z-media-player .z-double-tap-ripple-left{left:0;justify-content:flex-start;padding-left:5%}z-media-player .z-double-tap-ripple-left:before{background:radial-gradient(circle at 0% 50%,#ffffff21,#fff0 70%);border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;animation-name:zUiDoubleTapRippleLeft;transform-origin:left center}z-media-player .z-double-tap-ripple-left.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleLeftAlt}z-media-player .z-double-tap-ripple-right{right:0;justify-content:flex-end;padding-right:5%}z-media-player .z-double-tap-ripple-right:before{background:radial-gradient(circle at 100% 50%,#ffffff21,#fff0 70%);border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;animation-name:zUiDoubleTapRippleRight;transform-origin:right center}z-media-player .z-double-tap-ripple-right.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleRightAlt}z-media-player .z-skip-overlay-content{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;color:#fff;font-family:inherit;font-size:18px;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.75);-webkit-user-select:none;user-select:none}z-media-player .z-skip-overlay-number{min-width:42px;animation:zUiSkipNumberBump .22s cubic-bezier(.2,.85,.25,1) forwards;text-align:center;transform-origin:center}z-media-player .z-skip-pulse-alt .z-skip-overlay-number{animation-name:zUiSkipNumberBumpAlt}z-media-player .z-skip-overlay-arrows{display:inline-flex;align-items:center;color:#fffffff2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}@keyframes zUiDoubleTapRippleLeft{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleLeftAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleRight{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}@keyframes zUiDoubleTapRippleRightAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}z-media-player .z-chevron-slide-left{animation:zUiChevronSlideLeft .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-chevron-slide-right{animation:zUiChevronSlideRight .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-skip-pulse-alt .z-chevron-slide-left{animation-name:zUiChevronSlideLeftAlt}z-media-player .z-skip-pulse-alt .z-chevron-slide-right{animation-name:zUiChevronSlideRightAlt}@keyframes zUiSkipNumberBump{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiSkipNumberBumpAlt{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiChevronSlideLeft{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRight{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes zUiChevronSlideLeftAlt{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRightAlt{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}z-media-player #z_media_player_volume_slider{-webkit-appearance:none;appearance:none;background:transparent}z-media-player #z_media_player_volume_slider::-webkit-slider-runnable-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:10px;width:10px;border-radius:9999px;margin-top:-3.5px;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-webkit-slider-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}z-media-player #z_media_player_volume_slider::-moz-range-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-moz-range-thumb{background:#fff;height:10px;width:10px;border-radius:9999px;border:none;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-moz-range-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-moz-range-thumb{transform:scale(1.3)}.z-media-player-popover{background-color:#0000008c!important;border:none!important;box-shadow:0 0 0 1px #0000001a,0 1px 3px #00000026,0 1px 2px -1px #00000026!important;border-radius:8px!important;padding:0!important;transform-origin:bottom center}.z-media-player-popover:after{position:absolute;inset:0;z-index:10;border-radius:inherit;box-shadow:inset 0 1px #ffffff1a,inset 0 0 0 1px #ffffff0d;content:\"\";pointer-events:none}.z-media-player-popover[data-state=open]{animation:zUiMediaSettingsPopoverIn .16s cubic-bezier(.2,.85,.25,1) forwards}.z-media-player-popover[data-state=closed]{animation:zUiMediaSettingsPopoverOut .16s cubic-bezier(.4,0,.2,1) forwards!important}.z-media-player-popover .bg-popover{background-color:transparent!important;color:#e4e4e7!important}.z-media-player-popover .z-media-player-settings{overflow:hidden;transform-origin:bottom right;animation:zUiMediaSettingsPanelIn .16s cubic-bezier(.2,.85,.25,1)}.z-media-player-popover .z-media-player-settings-panel{gap:4px;transform-origin:top right;animation:zUiMediaSettingsPanelIn .14s cubic-bezier(.2,.85,.25,1);will-change:opacity,transform}.z-media-player-popover .z-media-player-settings.z-main-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromLeft}.z-media-player-popover .z-media-player-settings.z-sub-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromRight}.z-media-player-popover .z-media-player-settings-item,.z-media-player-popover .z-media-player-settings-back{position:relative;display:flex;width:100%;min-width:0;height:32px;min-height:32px;cursor:pointer;align-items:center;border:0;border-radius:4px;background-color:transparent;padding:0 8px;color:#e4e4e7;font-size:12px;font-weight:500;line-height:1;outline:none;transition:background-color .12s ease,color .12s ease}.z-media-player-popover .z-media-player-settings-item{justify-content:space-between;gap:12px;text-align:left}.z-media-player-popover .z-media-player-settings-item:before{position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:9999px;background-color:#fff;content:\"\";opacity:0;transform:scaleY(.5);transition:opacity .12s ease,transform .12s ease}.z-media-player-popover .z-media-player-settings-item.z-active{background-color:#ffffff14;color:#fff;font-weight:600}.z-media-player-popover .z-media-player-settings-item.z-active:before{opacity:1;transform:scaleY(1)}.z-media-player-popover .z-media-player-settings-back{justify-content:flex-start;gap:8px;color:#f4f4f5;font-weight:600}.z-media-player-popover .z-media-player-settings-item:hover,.z-media-player-popover .z-media-player-settings-back:hover,.z-media-player-popover .z-media-player-settings-item:focus-visible,.z-media-player-popover .z-media-player-settings-back:focus-visible{background-color:#ffffff1a}@keyframes zUiMediaSettingsPopoverIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes zUiMediaSettingsPopoverOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(4px) scale(.96)}}@keyframes zUiMediaSettingsPanelIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes zUiMediaSettingsPanelFromRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes zUiMediaSettingsPanelFromLeft{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSrc", required: true }] }], zSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSources", required: false }] }], zPoster: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPoster", required: false }] }], zAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoplay", required: false }] }], zLoop: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoop", required: false }] }], zMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMuted", required: false }] }], zVolume: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVolume", required: false }] }], zSubtitles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSubtitles", required: false }] }], zThumbnailsVtt: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThumbnailsVtt", required: false }] }], zControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "zControls", required: false }] }], zLoaded: [{ type: i0.Output, args: ["zLoaded"] }], zError: [{ type: i0.Output, args: ["zError"] }], zPlay: [{ type: i0.Output, args: ["zPlay"] }], zTimeUpdate: [{ type: i0.Output, args: ["zTimeUpdate"] }], zVolumeChange: [{ type: i0.Output, args: ["zVolumeChange"] }], zFullscreenChange: [{ type: i0.Output, args: ["zFullscreenChange"] }], zTheaterModeChange: [{ type: i0.Output, args: ["zTheaterModeChange"] }], zMiniplayerChange: [{ type: i0.Output, args: ["zMiniplayerChange"] }], zQualityChange: [{ type: i0.Output, args: ["zQualityChange"] }], videoElement: [{ type: i0.ViewChild, args: ['videoElement', { isSignal: true }] }], timelineContainer: [{ type: i0.ViewChild, args: ['timelineContainer', { isSignal: true }] }], _settingsPopover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ZPopoverDirective), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.