@shival99/z-ui 2.4.3 → 2.4.4

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

@@ -1,39 +1,197 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 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';
-import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+import { inject, input, output, viewChild, computed, signal, effect, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ZThemeService, ZTranslateService } from '@shival99/z-ui/services';
 import { zMergeClasses } from '@shival99/z-ui/utils';
 import { cva } from 'class-variance-authority';
+import 'vidstack/player';
+import 'vidstack/player/ui';
+import 'vidstack/player/layouts/default';
+import 'vidstack/player/layouts/plyr';
 
-/** 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 DEFAULT_MEDIA_PLAYER_CONFIG = {
+    autoPlay: false,
+    loop: false,
+    muted: false,
+    volume: 1,
+    playbackRate: 1,
+    subtitles: [],
+    thumbnailsVtt: '',
+    chaptersVtt: '',
+    playsInline: true,
 };
+/** Vietnamese translation of Vidstack's Default Layout UI words, applied when the app language is `vi`. */
+const MEDIA_PLAYER_VI_DEFAULT_TRANSLATIONS = {
+    Announcements: 'Thông báo',
+    Accessibility: 'Trợ năng',
+    AirPlay: 'AirPlay',
+    Audio: 'Âm thanh',
+    Auto: 'Tự động',
+    Boost: 'Tăng cường',
+    Captions: 'Phụ đề',
+    'Caption Styles': 'Kiểu phụ đề',
+    'Captions look like this': 'Phụ đề trông như thế này',
+    Chapters: 'Chương',
+    'Closed-Captions Off': 'Tắt phụ đề',
+    'Closed-Captions On': 'Bật phụ đề',
+    Connected: 'Đã kết nối',
+    Continue: 'Tiếp tục',
+    Connecting: 'Đang kết nối',
+    Default: 'Mặc định',
+    Disabled: 'Đã tắt',
+    Disconnected: 'Đã ngắt kết nối',
+    'Display Background': 'Nền hiển thị',
+    Download: 'Tải xuống',
+    'Enter Fullscreen': 'Vào toàn màn hình',
+    'Enter PiP': 'Vào chế độ nổi',
+    'Exit Fullscreen': 'Thoát toàn màn hình',
+    'Exit PiP': 'Thoát chế độ nổi',
+    Font: 'Phông chữ',
+    Family: 'Kiểu chữ',
+    Fullscreen: 'Toàn màn hình',
+    'Google Cast': 'Google Cast',
+    'Keyboard Animations': 'Hiệu ứng phím tắt',
+    LIVE: 'TRỰC TIẾP',
+    Loop: 'Lặp lại',
+    Mute: 'Tắt tiếng',
+    Normal: 'Bình thường',
+    Off: 'Tắt',
+    Pause: 'Tạm dừng',
+    Play: 'Phát',
+    Playback: 'Phát lại',
+    PiP: 'Nổi',
+    Quality: 'Chất lượng',
+    Replay: 'Phát lại',
+    Reset: 'Đặt lại',
+    'Seek Backward': 'Tua lùi',
+    'Seek Forward': 'Tua tới',
+    Seek: 'Tua',
+    Settings: 'Cài đặt',
+    'Skip To Live': 'Về trực tiếp',
+    Speed: 'Tốc độ',
+    Size: 'Kích thước',
+    Color: 'Màu sắc',
+    Opacity: 'Độ mờ',
+    Shadow: 'Đổ bóng',
+    Text: 'Văn bản',
+    'Text Background': 'Nền văn bản',
+    Track: 'Track',
+    Unmute: 'Bật tiếng',
+    Volume: 'Âm lượng',
+};
+/** Vietnamese translation of Vidstack's Plyr Layout UI words, applied when the app language is `vi`. */
+const MEDIA_PLAYER_VI_PLYR_TRANSLATIONS = {
+    Ad: 'Quảng cáo',
+    All: 'Tất cả',
+    AirPlay: 'AirPlay',
+    Audio: 'Âm thanh',
+    Auto: 'Tự động',
+    Buffered: 'Đã tải đệm',
+    Captions: 'Phụ đề',
+    'Current time': 'Thời gian hiện tại',
+    Default: 'Mặc định',
+    'Disable captions': 'Tắt phụ đề',
+    Disabled: 'Đã tắt',
+    Download: 'Tải xuống',
+    Duration: 'Thời lượng',
+    'Enable captions': 'Bật phụ đề',
+    Enabled: 'Đã bật',
+    End: 'Kết thúc',
+    'Enter Fullscreen': 'Vào toàn màn hình',
+    'Exit Fullscreen': 'Thoát toàn màn hình',
+    Forward: 'Tua tới',
+    'Go back to previous menu': 'Quay lại menu trước',
+    LIVE: 'TRỰC TIẾP',
+    Loop: 'Lặp lại',
+    Mute: 'Tắt tiếng',
+    Normal: 'Bình thường',
+    Pause: 'Tạm dừng',
+    'Enter PiP': 'Vào chế độ nổi',
+    'Exit PiP': 'Thoát chế độ nổi',
+    Play: 'Phát',
+    Played: 'Đã phát',
+    Quality: 'Chất lượng',
+    Reset: 'Đặt lại',
+    Restart: 'Phát lại từ đầu',
+    Rewind: 'Tua lùi',
+    Seek: 'Tua',
+    Settings: 'Cài đặt',
+    Speed: 'Tốc độ',
+    Start: 'Bắt đầu',
+    Unmute: 'Bật tiếng',
+    Volume: 'Âm lượng',
+};
+
+function mapSourceToProviderProps(source) {
+    switch (source.kind) {
+        case 'video':
+            return { src: source.src, type: 'video/mp4' };
+        case 'audio':
+            return { src: source.src, type: 'audio/mpeg' };
+        case 'hls':
+            return { src: source.src, type: 'application/x-mpegurl' };
+        case 'dash':
+            return { src: source.src, type: 'application/dash+xml' };
+        case 'youtube':
+            return { src: source.src, type: 'video/youtube' };
+        case 'vimeo':
+            return { src: source.src, type: 'video/vimeo' };
+    }
+}
+/**
+ * Vidstack's own thumbnail-storyboard loader only resolves relative sprite paths inside a VTT
+ * file against the VTT's own URL when that URL is itself absolute (`^https?:`); a root-relative
+ * path like `/assets/foo.vtt` makes it silently fall back to resolving against the current page
+ * URL instead, breaking the sprite image path. Resolving to an absolute URL up front avoids that.
+ */
+function resolveAbsoluteUrl(url) {
+    if (!url) {
+        return null;
+    }
+    try {
+        return new URL(url, document.baseURI).href;
+    }
+    catch {
+        return url;
+    }
+}
+/** Assigns non-`undefined` entries of `source` onto `target`, leaving its own defaults for omitted keys. */
+function assignDefinedProperties(target, source) {
+    for (const [key, value] of Object.entries(source)) {
+        if (value !== undefined) {
+            target[key] = value;
+        }
+    }
+}
+function buildStateChange(event, state, activeSourceLabel) {
+    const bufferedEnd = typeof state.bufferedEnd === 'number'
+        ? state.bufferedEnd
+        : state.buffered && state.buffered.length > 0
+            ? state.buffered.end(state.buffered.length - 1)
+            : 0;
+    const snapshot = {
+        paused: state.paused,
+        playing: state.playing,
+        ended: state.ended,
+        waiting: state.waiting,
+        currentTime: state.currentTime,
+        duration: state.duration,
+        volume: state.volume,
+        muted: state.muted,
+        playbackRate: state.playbackRate,
+        bufferedRatio: state.duration > 0 ? Math.min(1, bufferedEnd / state.duration) : 0,
+        fullscreen: state.fullscreen,
+        theaterMode: false,
+        pictureInPicture: state.pictureInPicture,
+        activeSourceLabel,
+        activeCaptionsLabel: state.textTrack?.label ?? null,
+    };
+    return { event, state: snapshot };
+}
 
 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-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',
         },
     },
     defaultVariants: {
@@ -41,978 +199,210 @@ const zMediaPlayerVariants = cva('relative overflow-hidden bg-black select-none
     },
 });
 
+/**
+ * Video, audio, HLS, DASH, YouTube, and Vimeo use Vidstack's Default or Plyr Layout skin
+ * (`zSkin`). `zConfig` mirrors Vidstack's own `<media-player>` props; `zDefaultLayoutConfig` /
+ * `zPlyrLayoutConfig` mirror the props of the currently active skin.
+ */
 class ZMediaPlayerComponent {
-    _elementRef = inject((ElementRef));
-    _ngZone = inject(NgZone);
-    _sanitizer = inject(DomSanitizer);
-    // Inputs
+    _themeService = inject(ZThemeService, { optional: true });
+    _translateService = inject(ZTranslateService, { optional: true });
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    zSrc = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zSrc" }] : /* istanbul ignore next */ []));
-    zSources = input([], /* @ts-ignore */
+    zSources = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zSources" }] : /* istanbul ignore next */ []));
-    zPoster = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zPoster" }] : /* istanbul ignore next */ []));
-    zAutoplay = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zAutoplay" }] : /* istanbul ignore next */ []));
-    zLoop = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zLoop" }] : /* istanbul ignore next */ []));
-    zMuted = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zMuted" }] : /* istanbul ignore next */ []));
-    zVolume = input(1.0, /* @ts-ignore */
-    ...(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();
+    zConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zConfig" }] : /* istanbul ignore next */ []));
+    zSkin = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSkin" }] : /* istanbul ignore next */ []));
+    zDefaultLayoutConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDefaultLayoutConfig" }] : /* istanbul ignore next */ []));
+    zPlyrLayoutConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPlyrLayoutConfig" }] : /* istanbul ignore next */ []));
+    zStateChange = output();
     zError = output();
-    zPlay = output();
-    zTimeUpdate = output();
-    zVolumeChange = output();
-    zFullscreenChange = output();
-    zTheaterModeChange = output();
-    zMiniplayerChange = output();
-    zQualityChange = output();
-    // Element Refs sử dụng signal viewChild thay vì decorator
-    videoElement = viewChild('videoElement', /* @ts-ignore */
-    ...(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 */ []));
-    currentTime = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
-    duration = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
-    volume = signal(1.0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "volume" }] : /* istanbul ignore next */ []));
-    isMuted = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMuted" }] : /* istanbul ignore next */ []));
-    playbackSpeed = signal(1.0, /* @ts-ignore */
-    ...(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 */
-    ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
-    isMiniplayer = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isMiniplayer" }] : /* istanbul ignore next */ []));
-    showSettings = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showSettings" }] : /* istanbul ignore next */ []));
-    settingsPanel = signal('main', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "settingsPanel" }] : /* istanbul ignore next */ []));
-    isDragging = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-    // Tiến trình đệm và phát
-    bufferedProgress = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bufferedProgress" }] : /* istanbul ignore next */ []));
-    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 */ []));
-    skipOverlayValue = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "skipOverlayValue" }] : /* istanbul ignore next */ []));
-    skipOverlayPulse = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "skipOverlayPulse" }] : /* istanbul ignore next */ []));
-    // Kiểm tra trình duyệt hỗ trợ Picture-in-Picture
-    isPiPSupported = computed(() => {
-        if (typeof document === 'undefined') {
-            return false;
-        }
-        const doc = document;
-        const hasPiP = doc.pictureInPictureEnabled;
-        const hasRequestPiP = typeof HTMLVideoElement !== 'undefined' && 'requestPictureInPicture' in HTMLVideoElement.prototype;
-        if (hasPiP && hasRequestPiP) {
-            return true;
-        }
-        const video = this.videoElement()?.nativeElement;
-        if (video) {
-            const supportsPresentationMode = video.webkitSupportsPresentationMode;
-            const hasWebkit = 'webkitSupportsPresentationMode' in video &&
-                typeof supportsPresentationMode === 'function' &&
-                supportsPresentationMode.call(video, 'picture-in-picture');
-            return !!hasWebkit;
-        }
-        const hasWebkitProto = typeof HTMLVideoElement !== 'undefined' &&
-            'webkitSupportsPresentationMode' in HTMLVideoElement.prototype &&
-            'webkitSetPresentationMode' in HTMLVideoElement.prototype;
-        return hasWebkitProto;
+    playerElement = viewChild('playerElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "playerElement" }] : /* istanbul ignore next */ []));
+    layoutElement = viewChild('layoutElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layoutElement" }] : /* istanbul ignore next */ []));
+    activeSource = computed(() => {
+        const sources = this.zSources();
+        return sources.find(source => source.default) ?? sources[0] ?? null;
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isPiPSupported" }] : /* istanbul ignore next */ []));
-    // Danh sách các tốc độ phát video
-    playbackSpeeds = [
-        { label: '0.25x', value: 0.25 },
-        { label: '0.5x', value: 0.5 },
-        { label: '0.75x', value: 0.75 },
-        { label: 'i18n_z_ui_media_player_normal', value: 1.0 },
-        { label: '1.25x', value: 1.25 },
-        { label: '1.5x', value: 1.5 },
-        { label: '2.0x', value: 2.0 },
-    ];
-    // Lưu trữ Timer ẩn thanh điều khiển và điều hướng
-    _controlsTimeout = null;
-    _flashTimeout = null;
-    _skipOverlayTimeout = 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(() => {
-        let layout = 'default';
-        if (this.isTheaterMode()) {
-            layout = 'theater';
-        }
-        if (this.isFullscreen()) {
-            layout = 'fullscreen';
-        }
-        return zMergeClasses(zMediaPlayerVariants({ zLayout: layout }), this.class());
+    ...(ngDevMode ? [{ debugName: "activeSource" }] : /* istanbul ignore next */ []));
+    isAudioSource = computed(() => this.activeSource()?.kind === 'audio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAudioSource" }] : /* istanbul ignore next */ []));
+    isPlyrSkin = computed(() => this.zSkin() === 'plyr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPlyrSkin" }] : /* istanbul ignore next */ []));
+    colorScheme = computed(() => {
+        if (!this._themeService) {
+            return 'system';
+        }
+        return this._themeService.isDark() ? 'dark' : 'light';
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zClasses" }] : /* istanbul ignore next */ []));
-    // Nhãn thời gian hiển thị computed signals
-    currentTimeLabel = computed(() => this._formatTime(this.currentTime()), /* @ts-ignore */
-    ...(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(() => 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()}`);
+    ...(ngDevMode ? [{ debugName: "colorScheme" }] : /* istanbul ignore next */ []));
+    _isVietnamese = computed(() => (this._translateService?.currentLang() ?? 'en') === 'vi', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isVietnamese" }] : /* istanbul ignore next */ []));
+    defaultLayoutTranslations = computed(() => {
+        const base = this._isVietnamese() ? MEDIA_PLAYER_VI_DEFAULT_TRANSLATIONS : null;
+        const override = this.zDefaultLayoutConfig().translations;
+        return base || override ? { ...base, ...override } : null;
     }, /* @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];
+    ...(ngDevMode ? [{ debugName: "defaultLayoutTranslations" }] : /* istanbul ignore next */ []));
+    plyrLayoutTranslations = computed(() => {
+        const base = this._isVietnamese() ? MEDIA_PLAYER_VI_PLYR_TRANSLATIONS : null;
+        const override = this.zPlyrLayoutConfig().translations;
+        return base || override ? { ...base, ...override } : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plyrLayoutTranslations" }] : /* istanbul ignore next */ []));
+    state = signal({
+        paused: true,
+        playing: false,
+        ended: false,
+        waiting: false,
+        currentTime: 0,
+        duration: 0,
+        volume: DEFAULT_MEDIA_PLAYER_CONFIG.volume ?? 1,
+        muted: DEFAULT_MEDIA_PLAYER_CONFIG.muted ?? false,
+        playbackRate: DEFAULT_MEDIA_PLAYER_CONFIG.playbackRate ?? 1,
+        bufferedRatio: 0,
+        fullscreen: false,
+        theaterMode: false,
+        pictureInPicture: false,
+        activeSourceLabel: null,
+        activeCaptionsLabel: null,
     }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoverThumbnailCue" }] : /* istanbul ignore next */ []));
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    zClasses = computed(() => zMergeClasses(zMediaPlayerVariants(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zClasses" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
-            const fallbackSrc = this.zSrc();
-            const sources = this.qualitySources();
-            const currentLabel = this._activeQualitySourceLabel();
-            if (currentLabel && sources.some(source => source.label === currentLabel)) {
+            const player = this.playerElement()?.nativeElement;
+            const sources = this.zSources();
+            const source = this.activeSource();
+            if (!player || !source || sources.length === 0) {
                 return;
             }
-            const defaultSource = sources[0] ?? null;
-            this.activeSourceSrc.set(defaultSource?.src ?? fallbackSrc);
-            this._activeQualitySourceLabel.set(defaultSource?.label ?? null);
-        });
-        effect(() => {
-            const src = this.effectiveSrc();
-            const video = this.videoElement()?.nativeElement;
-            if (video) {
-                if (video.src !== src) {
-                    video.src = src;
-                }
-                video.load();
-            }
+            const { subtitles: _subtitles, thumbnailsVtt: _thumbnailsVtt, chaptersVtt: _chaptersVtt, ...playerProps } = {
+                ...DEFAULT_MEDIA_PLAYER_CONFIG,
+                ...this.zConfig(),
+            };
+            const orderedSources = [...sources].sort((left, right) => Number(Boolean(right.default)) - Number(Boolean(left.default)));
+            const providerSources = orderedSources.map(mapSourceToProviderProps);
+            player.src = providerSources.length === 1 ? providerSources[0] : providerSources;
+            assignDefinedProperties(player, playerProps);
         });
         effect(() => {
-            const vttUrl = this.zThumbnailsVtt();
-            if (!vttUrl) {
-                this._thumbnailCues.set([]);
+            const layout = this.layoutElement()?.nativeElement;
+            if (!layout) {
                 return;
             }
-            void this._loadThumbnailVtt(vttUrl);
-        });
-        effect(() => {
-            this.showControls();
-            this.isFullscreen();
-            const video = this.videoElement()?.nativeElement;
-            if (!video || !this.captionsEnabled()) {
+            const thumbnails = resolveAbsoluteUrl(this.zConfig().thumbnailsVtt);
+            if (this.isPlyrSkin()) {
+                assignDefinedProperties(layout, {
+                    thumbnails,
+                    translations: this.plyrLayoutTranslations(),
+                    ...this.zPlyrLayoutConfig(),
+                });
                 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);
+            assignDefinedProperties(layout, {
+                thumbnails,
+                colorScheme: this.colorScheme(),
+                translations: this.defaultLayoutTranslations(),
+                ...this.zDefaultLayoutConfig(),
             });
         });
-    }
-    ngOnDestroy() {
-        this._mouseMoveCleanup?.();
-        if (this._controlsTimeout) {
-            clearTimeout(this._controlsTimeout);
-        }
-        if (this._flashTimeout) {
-            clearTimeout(this._flashTimeout);
-        }
-        if (this._skipOverlayTimeout) {
-            clearTimeout(this._skipOverlayTimeout);
-        }
-        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
-    _initializeVideoState() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        video.volume = this.zVolume();
-        this.volume.set(this.zVolume());
-        video.muted = this.zMuted();
-        this.isMuted.set(this.zMuted());
-        this._resetControlsTimer();
-    }
-    // Thay đổi trạng thái Phát / Tạm dừng
-    togglePlay() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        if (video.paused) {
-            video.play().catch(console.error);
-            this._triggerFlashIcon('play');
-            return;
-        }
-        video.pause();
-        this._triggerFlashIcon('pause');
-    }
-    // Kích hoạt flash icon giữa màn hình
-    _triggerFlashIcon(type) {
-        if (this._flashTimeout) {
-            clearTimeout(this._flashTimeout);
-        }
-        this.playPauseFlash.set(type);
-        this._flashTimeout = setTimeout(() => {
-            this.playPauseFlash.set(null);
-        }, 500);
-    }
-    // Bật / tắt tiếng (Mute)
-    toggleMute() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        const nextMuted = !video.muted;
-        video.muted = nextMuted;
-        this.isMuted.set(nextMuted);
-        this.zVolumeChange.emit(nextMuted ? 0 : this.volume());
-    }
-    // Điều chỉnh mức âm lượng từ slider
-    onVolumeChange(val) {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        video.volume = val;
-        this.volume.set(val);
-        const isSilent = val === 0;
-        video.muted = isSilent;
-        this.isMuted.set(isSilent);
-        this.zVolumeChange.emit(val);
-    }
-    // Đặt tốc độ phát video
-    setPlaybackSpeed(speed) {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        video.playbackRate = speed;
-        this.playbackSpeed.set(speed);
-        this.closeSettingsPanel();
-    }
-    openSettingsPanel(panel) {
-        this.settingsPanel.set(panel);
-    }
-    closeSettingsPanel() {
-        this.settingsPanel.set('main');
-    }
-    onSettingsHidden() {
-        this.showSettings.set(false);
-        this.closeSettingsPanel();
-        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();
-        this.showSettings.set(nextVisible);
-        if (!nextVisible) {
-            this.closeSettingsPanel();
-        }
-        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;
-        }
-        const video = this.videoElement()?.nativeElement;
-        const current = video?.currentTime ?? this.currentTime();
-        const shouldResume = !!video && !video.paused;
-        const playbackRate = video?.playbackRate ?? this.playbackSpeed();
-        if (video) {
-            let didResume = false;
-            const restorePosition = () => {
-                const safeTime = Number.isFinite(video.duration) ? Math.min(current, video.duration) : current;
-                video.playbackRate = playbackRate;
-                video.currentTime = safeTime;
-                this.currentTime.set(safeTime);
-                if (shouldResume && !didResume) {
-                    didResume = true;
-                    video.play().catch(console.error);
-                }
-            };
-            video.addEventListener('loadedmetadata', restorePosition, { once: true });
-            video.addEventListener('loadeddata', restorePosition, { once: true });
-        }
-        this.activeSourceSrc.set(source.src);
-        this._activeQualitySourceLabel.set(source.label);
-        this._setBufferedTarget(0);
-        this.zQualityChange.emit(source);
-        this.closeSettingsPanel();
-    }
-    // Tua đến mốc thời gian chỉ định
-    seekTo(time) {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        video.currentTime = time;
-        this.currentTime.set(time);
-        this._syncPlaybackProgress(time);
-    }
-    // Bật/tắt chế độ rạp phim (Theater Mode)
-    toggleTheaterMode() {
-        if (this.isFullscreen()) {
-            return;
-        }
-        const nextState = !this.isTheaterMode();
-        this.isTheaterMode.set(nextState);
-        this.zTheaterModeChange.emit(nextState);
-    }
-    // Bật/tắt chế độ toàn màn hình
-    toggleFullscreen() {
-        const wrapper = this._elementRef.nativeElement;
-        if (!wrapper) {
-            return;
-        }
-        if (document.fullscreenElement) {
-            document.exitFullscreen().catch(console.error);
-            return;
-        }
-        wrapper.requestFullscreen().catch(console.error);
-    }
-    // Lắng nghe sự kiện thay đổi fullscreen (liên kết qua host property của component)
-    onFullscreenStateChange() {
-        const isFull = !!document.fullscreenElement;
-        this.isFullscreen.set(isFull);
-        this.onSettingsHidden();
-        this.zFullscreenChange.emit(isFull);
-    }
-    // Trình phát thu nhỏ (Picture-in-Picture)
-    async toggleMiniplayer() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        try {
-            const doc = document;
-            if (doc.pictureInPictureEnabled && typeof video.requestPictureInPicture === 'function') {
-                if (doc.pictureInPictureElement) {
-                    await doc.exitPictureInPicture();
-                    this.isMiniplayer.set(false);
-                    this.zMiniplayerChange.emit(false);
-                    return;
-                }
-                await video.requestPictureInPicture();
-                this.isMiniplayer.set(true);
-                this.zMiniplayerChange.emit(true);
+        effect(onCleanup => {
+            const player = this.playerElement()?.nativeElement;
+            if (!player) {
                 return;
             }
-            const webkitVideo = video;
-            if ('webkitSupportsPresentationMode' in webkitVideo &&
-                typeof webkitVideo.webkitSupportsPresentationMode === 'function' &&
-                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);
-                this.zMiniplayerChange.emit(isPiP);
-            }
-        }
-        catch (err) {
-            console.warn('Picture-in-Picture API error: ', err);
-        }
-    }
-    onEnterPiP() {
-        this.isMiniplayer.set(true);
-        this.zMiniplayerChange.emit(true);
-    }
-    onLeavePiP() {
-        this.isMiniplayer.set(false);
-        this.zMiniplayerChange.emit(false);
-    }
-    onWebkitPresentationModeChanged() {
-        const video = this.videoElement()?.nativeElement;
-        if (video) {
-            const isPiP = video.webkitPresentationMode === 'picture-in-picture';
-            this.isMiniplayer.set(isPiP);
-            this.zMiniplayerChange.emit(isPiP);
-        }
-    }
-    // Bật/tắt hiển thị phụ đề (CC)
-    toggleSubtitles() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            return;
-        }
-        const tracks = video.textTracks;
-        const currentEnabled = this.captionsEnabled();
-        const targetState = !currentEnabled;
-        this.captionsEnabled.set(targetState);
-        let i = 0;
-        while (i < tracks.length) {
-            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);
+            const stateSubscription = player.subscribe(nextState => this._syncState(nextState));
+            const eventMap = {
+                'loaded-data': 'loaded',
+                play: 'play',
+                pause: 'pause',
+                ended: 'ended',
+                'time-update': 'time-update',
+                'volume-change': 'volume-change',
+                'rate-change': 'rate-change',
+                'fullscreen-change': 'fullscreen-change',
+                'picture-in-picture-change': 'pip-change',
+                'source-change': 'source-change',
+                'text-track-change': 'subtitle-change',
+                waiting: 'waiting',
+                'can-play': 'can-play',
+            };
+            const listeners = Object.entries(eventMap).map(([eventName, event]) => {
+                const listener = () => this._emitStateChange(event);
+                player.addEventListener(eventName, listener);
+                return () => player.removeEventListener(eventName, listener);
             });
-            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
-    onTimeUpdate() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video || this.isDragging()) {
-            return;
-        }
-        this.currentTime.set(video.currentTime);
-        this.zTimeUpdate.emit(video.currentTime);
-        this._syncPlaybackProgress(video.currentTime);
-        this.updateBufferedProgress();
-    }
-    onDurationChange() {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
-            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;
-        if (!video || video.buffered.length === 0 || this.duration() === 0) {
-            return;
-        }
-        const end = video.buffered.end(video.buffered.length - 1);
-        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) {
-        event.preventDefault();
-        this.isDragging.set(true);
-        this._updateTimeFromCoords(event);
-        const moveHandler = (moveEvent) => {
-            this._updateTimeFromCoords(moveEvent);
-        };
-        const upHandler = () => {
-            this.isDragging.set(false);
-            document.removeEventListener('mousemove', moveHandler);
-            document.removeEventListener('mouseup', upHandler);
-            this._resetControlsTimer();
-        };
-        document.addEventListener('mousemove', moveHandler);
-        document.addEventListener('mouseup', upHandler);
-    }
-    onTimelineHover(event) {
-        const container = this.timelineContainer()?.nativeElement;
-        if (!container) {
-            return;
-        }
-        const rect = container.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        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],
+            const onError = (event) => this._emitError(event);
+            const onProviderChange = (event) => this._configureStreamingProvider(event);
+            player.addEventListener('error', onError);
+            player.addEventListener('provider-change', onProviderChange);
+            onCleanup(() => {
+                stateSubscription();
+                listeners.forEach(cleanup => cleanup());
+                player.removeEventListener('error', onError);
+                player.removeEventListener('provider-change', onProviderChange);
             });
-        }
-        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) {
-            return;
-        }
-        const rect = container.getBoundingClientRect();
-        const offsetX = event.clientX - rect.left;
-        const { width } = rect;
-        let ratio = offsetX / width;
-        if (ratio < 0) {
-            ratio = 0;
-        }
-        if (ratio > 1) {
-            ratio = 1;
-        }
-        const targetTime = ratio * this.duration();
-        const video = this.videoElement()?.nativeElement;
-        if (video) {
-            video.currentTime = targetTime;
-            this.currentTime.set(targetTime);
-        }
-    }
-    // Tải lại bộ đếm thời gian ẩn controls
-    onMouseMove() {
-        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);
-        }
-    }
-    _resetControlsTimer() {
-        this.showControls.set(true);
-        if (this._controlsTimeout) {
-            clearTimeout(this._controlsTimeout);
-        }
-        const video = this.videoElement()?.nativeElement;
-        if (video && !video.paused && !this.showSettings() && !this.isDragging()) {
-            this._controlsTimeout = setTimeout(() => {
-                this.showControls.set(false);
-            }, 1000);
-        }
+        });
     }
-    // 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();
+    _syncState(nextState) {
+        const player = this.playerElement()?.nativeElement;
+        if (!player) {
             return;
         }
-        this.togglePlay();
+        const patch = nextState && typeof nextState === 'object' ? nextState : {};
+        const state = { ...player.state, ...patch };
+        this.state.set(buildStateChange('time-update', state, this.activeSource()?.label ?? null).state);
     }
-    // Kích hoạt overlay tua nhanh cộng dồn
-    triggerSkip(seconds, direction) {
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
+    _emitStateChange(event) {
+        const player = this.playerElement()?.nativeElement;
+        if (!player) {
             return;
         }
-        if (direction === 'left') {
-            this.seekTo(Math.max(0, video.currentTime - seconds));
-        }
-        if (direction === 'right') {
-            this.seekTo(Math.min(this.duration(), video.currentTime + seconds));
-        }
-        this._triggerSkipOverlay(seconds, direction);
+        const change = buildStateChange(event, player.state, this.activeSource()?.label ?? null);
+        this.state.set(change.state);
+        this.zStateChange.emit(change);
     }
-    _triggerSkipOverlay(seconds, direction) {
-        if (this._skipOverlayTimeout) {
-            clearTimeout(this._skipOverlayTimeout);
-        }
-        this._accumulatedSkip += Math.abs(seconds);
-        this.skipOverlayDirection.set(direction);
-        this.skipOverlayValue.set(this._accumulatedSkip);
-        this.skipOverlayPulse.update(value => value + 1);
-        this._skipOverlayTimeout = setTimeout(() => {
-            this.skipOverlayDirection.set(null);
-            this.skipOverlayValue.set(0);
-            this._accumulatedSkip = 0;
-        }, 800);
+    _emitError(event) {
+        const { detail } = event;
+        const error = detail && typeof detail === 'object' ? detail : {};
+        this.zError.emit({
+            message: typeof error['message'] === 'string' ? error['message'] : 'Media playback error',
+            code: typeof error['code'] === 'string' || typeof error['code'] === 'number' ? error['code'] : undefined,
+            source: 'provider',
+            raw: detail,
+        });
     }
-    // Bắt sự kiện phím tắt điều khiển
-    onKeyDown(event) {
-        const activeEl = document.activeElement;
-        if (activeEl &&
-            (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.hasAttribute('contenteditable'))) {
+    _configureStreamingProvider(event) {
+        const source = this.activeSource();
+        const { detail } = event;
+        if (!source || !detail || typeof detail !== 'object') {
             return;
         }
-        const video = this.videoElement()?.nativeElement;
-        if (!video) {
+        const provider = detail;
+        if (source.kind === 'hls') {
+            provider.library = () => import('hls.js');
             return;
         }
-        const key = event.key.toLowerCase();
-        switch (key) {
-            case ' ':
-                event.preventDefault();
-                this.togglePlay();
-                return;
-            case 'k':
-                this.togglePlay();
-                return;
-            case 'm':
-                this.toggleMute();
-                return;
-            case 'f':
-                this.toggleFullscreen();
-                return;
-            case 't':
-                this.toggleTheaterMode();
-                return;
-            case 'i':
-                void this.toggleMiniplayer();
-                return;
-            case 'arrowleft':
-                event.preventDefault();
-                this.triggerSkip(5, 'left');
-                return;
-            case 'j':
-                this.triggerSkip(10, 'left');
-                return;
-            case 'arrowright':
-                event.preventDefault();
-                this.triggerSkip(5, 'right');
-                return;
-            case 'l':
-                this.triggerSkip(10, 'right');
-                return;
-            case 'arrowup':
-                event.preventDefault();
-                this.onVolumeChange(Math.min(1.0, this.volume() + 0.05));
-                return;
-            case 'arrowdown':
-                event.preventDefault();
-                this.onVolumeChange(Math.max(0, this.volume() - 0.05));
-                return;
-            case '0':
-            case '1':
-            case '2':
-            case '3':
-            case '4':
-            case '5':
-            case '6':
-            case '7':
-            case '8':
-            case '9':
-                this.seekTo((Number(key) / 10) * this.duration());
-                return;
-        }
-    }
-    toggleSettings() {
-        this.showSettings.set(!this.showSettings());
-    }
-    // Định dạng hiển thị m:ss / h:mm:ss
-    _formatTime(time) {
-        if (Number.isNaN(time) || time === Infinity || time < 0) {
-            return '0:00';
-        }
-        const hours = Math.floor(time / 3600);
-        const minutes = Math.floor((time % 3600) / 60);
-        const seconds = Math.floor(time % 60);
-        const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
-        if (hours > 0) {
-            const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
-            return `${hours}:${formattedMinutes}:${formattedSeconds}`;
+        if (source.kind === 'dash') {
+            provider.library = () => import('dashjs');
         }
-        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 }, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZMediaPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZMediaPlayerComponent, isStandalone: true, selector: "z-media-player", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSources: { classPropertyName: "zSources", publicName: "zSources", isSignal: true, isRequired: true, transformFunction: null }, zConfig: { classPropertyName: "zConfig", publicName: "zConfig", isSignal: true, isRequired: false, transformFunction: null }, zSkin: { classPropertyName: "zSkin", publicName: "zSkin", isSignal: true, isRequired: false, transformFunction: null }, zDefaultLayoutConfig: { classPropertyName: "zDefaultLayoutConfig", publicName: "zDefaultLayoutConfig", isSignal: true, isRequired: false, transformFunction: null }, zPlyrLayoutConfig: { classPropertyName: "zPlyrLayoutConfig", publicName: "zPlyrLayoutConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zStateChange: "zStateChange", zError: "zError" }, host: { properties: { "class": "zClasses()" } }, viewQueries: [{ propertyName: "playerElement", first: true, predicate: ["playerElement"], descendants: true, isSignal: true }, { propertyName: "layoutElement", first: true, predicate: ["layoutElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<media-player #playerElement>\n  <media-provider>\n    @for (subtitle of zConfig().subtitles ?? []; track subtitle.src) {\n      <track\n        kind=\"subtitles\"\n        [label]=\"subtitle.label\"\n        [src]=\"subtitle.src\"\n        [srclang]=\"subtitle.srclang\"\n        [default]=\"subtitle.default ?? false\" />\n    }\n    @if (zConfig().chaptersVtt) {\n      <track kind=\"chapters\" [src]=\"zConfig().chaptersVtt!\" />\n    }\n  </media-provider>\n\n  @if (isPlyrSkin()) {\n    <media-plyr-layout #layoutElement></media-plyr-layout>\n  } @else if (isAudioSource()) {\n    <media-audio-layout #layoutElement></media-audio-layout>\n  } @else {\n    <media-video-layout #layoutElement></media-video-layout>\n  }\n</media-player>\n", styles: ["@charset \"UTF-8\";z-media-player{display:flex;align-items:center;justify-content:center;width:100%;container-type:inline-size;--media-user-font-size: .75;--media-cue-padding-x: calc(var(--cue-font-size, 1em) * .4)}z-media-player [data-media-player][data-view-type=video]{width:auto;height:100%;max-width:100%;max-height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZMediaPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZMediaPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'z-media-player', imports: [CommonModule, FormsModule, ZIconComponent, ZPopoverDirective, TranslatePipe, ZButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'z-media-player', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'zClasses()',
-                        '[attr.tabindex]': '0',
-                        '(keydown)': 'onKeyDown($event)',
-                        '(mouseleave)': 'onMouseLeave()',
-                        '(document:fullscreenchange)': 'onFullscreenStateChange()',
-                    }, 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 }] }] } });
+                    }, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<media-player #playerElement>\n  <media-provider>\n    @for (subtitle of zConfig().subtitles ?? []; track subtitle.src) {\n      <track\n        kind=\"subtitles\"\n        [label]=\"subtitle.label\"\n        [src]=\"subtitle.src\"\n        [srclang]=\"subtitle.srclang\"\n        [default]=\"subtitle.default ?? false\" />\n    }\n    @if (zConfig().chaptersVtt) {\n      <track kind=\"chapters\" [src]=\"zConfig().chaptersVtt!\" />\n    }\n  </media-provider>\n\n  @if (isPlyrSkin()) {\n    <media-plyr-layout #layoutElement></media-plyr-layout>\n  } @else if (isAudioSource()) {\n    <media-audio-layout #layoutElement></media-audio-layout>\n  } @else {\n    <media-video-layout #layoutElement></media-video-layout>\n  }\n</media-player>\n", styles: ["@charset \"UTF-8\";z-media-player{display:flex;align-items:center;justify-content:center;width:100%;container-type:inline-size;--media-user-font-size: .75;--media-cue-padding-x: calc(var(--cue-font-size, 1em) * .4)}z-media-player [data-media-player][data-view-type=video]{width:auto;height:100%;max-width:100%;max-height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSources", required: true }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zSkin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkin", required: false }] }], zDefaultLayoutConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDefaultLayoutConfig", required: false }] }], zPlyrLayoutConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlyrLayoutConfig", required: false }] }], zStateChange: [{ type: i0.Output, args: ["zStateChange"] }], zError: [{ type: i0.Output, args: ["zError"] }], playerElement: [{ type: i0.ViewChild, args: ['playerElement', { isSignal: true }] }], layoutElement: [{ type: i0.ViewChild, args: ['layoutElement', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.