@shival99/z-ui 2.1.32 → 2.2.0

package/fesm2022/shival99-z-ui-components-z-marquee.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-marquee.mjs","sources":["../../../../libs/core-ui/components/z-marquee/z-marquee.component.ts","../../../../libs/core-ui/components/z-marquee/z-marquee.component.html","../../../../libs/core-ui/components/z-marquee/shival99-z-ui-components-z-marquee.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  input,\n  TemplateRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZMarqueeDirection, ZMarqueeFade } from './z-marquee.types';\n\n@Component({\n  selector: 'z-marquee',\n  imports: [NgTemplateOutlet],\n  standalone: true,\n  templateUrl: './z-marquee.component.html',\n  styleUrl: './z-marquee.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZMarqueeComponent {\n  public readonly class = input<ClassValue>('');\n\n  public readonly zDirection = input<ZMarqueeDirection>('left');\n\n  public readonly zPauseOnHover = input(false, { transform: zTransform });\n\n  public readonly zRepeat = input(4);\n\n  public readonly zDuration = input(60);\n\n  public readonly zGap = input('1rem');\n\n  public readonly zFade = input<ZMarqueeFade>('none');\n\n  protected readonly contentTemplate = contentChild<TemplateRef<unknown>>(TemplateRef);\n\n  protected readonly isVertical = computed(() => {\n    const dir = this.zDirection();\n\n    return dir === 'up' || dir === 'down';\n  });\n\n  protected readonly isReverse = computed(() => {\n    const dir = this.zDirection();\n\n    return dir === 'right' || dir === 'down';\n  });\n\n  protected readonly showLeftFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'left' || (fade === 'both' && !this.isVertical());\n  });\n\n  protected readonly showRightFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'right' || (fade === 'both' && !this.isVertical());\n  });\n\n  protected readonly showTopFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'top' || (fade === 'both' && this.isVertical());\n  });\n\n  protected readonly showBottomFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'bottom' || (fade === 'both' && this.isVertical());\n  });\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(\n      'relative flex overflow-hidden',\n      this.zPauseOnHover() ? 'z-marquee--pause-on-hover' : '',\n      this.isVertical() ? 'h-full flex-col' : 'flex-row',\n      this.class()\n    )\n  );\n\n  protected readonly repeatItems = computed(() => {\n    const repeat = Math.max(1, Math.floor(this.zRepeat()));\n\n    return Array.from({ length: repeat }, (_, index) => index);\n  });\n\n  protected readonly copyItems = [0, 1] as const;\n\n  protected readonly runnerClasses = computed(() =>\n    zMergeClasses(\n      'z-marquee-runner flex shrink-0 justify-start',\n      this.isVertical() ? 'min-h-full flex-col items-stretch' : 'flex-row items-center',\n      this.animationClasses()\n    )\n  );\n\n  protected readonly animationClasses = computed(() => {\n    const vertical = this.isVertical();\n    const reverse = this.isReverse();\n\n    const base = vertical ? 'z-marquee--animate-y' : 'z-marquee--animate-x';\n    const dir = reverse ? ' z-marquee--reverse' : '';\n\n    return `${base}${dir}`;\n  });\n\n  protected readonly trackClasses = computed(() =>\n    zMergeClasses(\n      'z-marquee-track flex shrink-0 justify-start',\n      this.isVertical() ? 'flex-col items-stretch' : 'flex-row items-center'\n    )\n  );\n\n  protected readonly contentClasses = computed(() =>\n    zMergeClasses(\n      'z-marquee-content flex shrink-0 justify-start',\n      this.isVertical() ? 'flex-col items-stretch' : 'flex-row items-center'\n    )\n  );\n}\n","<div\n  class=\"z-marquee-viewport flex min-w-full\"\n  [class.flex-row]=\"!isVertical()\"\n  [class.h-full]=\"isVertical()\"\n  [class.flex-col]=\"isVertical()\"\n  [style.gap]=\"zGap()\"\n  [style.--z-marquee-gap]=\"zGap()\"\n  [style.--z-marquee-duration]=\"zDuration() + 's'\">\n  <div [class]=\"runnerClasses()\">\n    @for (copy of copyItems; track copy) {\n      <div [class]=\"trackClasses()\" [style.gap]=\"zGap()\" [attr.aria-hidden]=\"copy === 0 ? null : 'true'\">\n        @for (item of repeatItems(); track item) {\n          <div [class]=\"contentClasses()\" [style.gap]=\"zGap()\">\n            @if (contentTemplate(); as tmpl) {\n              <ng-container [ngTemplateOutlet]=\"tmpl\" />\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (showLeftFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 left-0 w-12 bg-gradient-to-r via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showRightFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 right-0 w-12 bg-gradient-to-l via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showTopFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b via-55% to-transparent sm:h-12\"></div>\n}\n\n@if (showBottomFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t via-55% to-transparent sm:h-12\"></div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shival99-z-ui-components-z-marquee.mjs","sources":["../../../../libs/core-ui/components/z-marquee/z-marquee.component.ts","../../../../libs/core-ui/components/z-marquee/z-marquee.component.html","../../../../libs/core-ui/components/z-marquee/shival99-z-ui-components-z-marquee.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  input,\n  TemplateRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZMarqueeDirection, ZMarqueeFade } from './z-marquee.types';\n\n@Component({\n  selector: 'z-marquee',\n  imports: [NgTemplateOutlet],\n  standalone: true,\n  templateUrl: './z-marquee.component.html',\n  styleUrl: './z-marquee.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZMarqueeComponent {\n  public readonly class = input<ClassValue>('');\n\n  public readonly zDirection = input<ZMarqueeDirection>('left');\n\n  public readonly zPauseOnHover = input(false, { transform: zTransform });\n\n  public readonly zRepeat = input(4);\n\n  public readonly zDuration = input(60);\n\n  public readonly zGap = input('1rem');\n\n  public readonly zFade = input<ZMarqueeFade>('none');\n\n  protected readonly contentTemplate = contentChild<TemplateRef<unknown>>(TemplateRef);\n\n  protected readonly isVertical = computed(() => {\n    const dir = this.zDirection();\n\n    return dir === 'up' || dir === 'down';\n  });\n\n  protected readonly isReverse = computed(() => {\n    const dir = this.zDirection();\n\n    return dir === 'right' || dir === 'down';\n  });\n\n  protected readonly showLeftFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'left' || (fade === 'both' && !this.isVertical());\n  });\n\n  protected readonly showRightFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'right' || (fade === 'both' && !this.isVertical());\n  });\n\n  protected readonly showTopFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'top' || (fade === 'both' && this.isVertical());\n  });\n\n  protected readonly showBottomFade = computed(() => {\n    const fade = this.zFade();\n\n    return fade === 'bottom' || (fade === 'both' && this.isVertical());\n  });\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(\n      'relative flex overflow-hidden',\n      this.zPauseOnHover() ? 'z-marquee--pause-on-hover' : '',\n      this.isVertical() ? 'h-full flex-col' : 'flex-row',\n      this.class()\n    )\n  );\n\n  protected readonly repeatItems = computed(() => {\n    const repeat = Math.max(1, Math.floor(this.zRepeat()));\n\n    return Array.from({ length: repeat }, (_, index) => index);\n  });\n\n  protected readonly copyItems = [0, 1] as const;\n\n  protected readonly runnerClasses = computed(() =>\n    zMergeClasses(\n      'z-marquee-runner flex shrink-0 justify-start',\n      this.isVertical() ? 'min-h-full flex-col items-stretch' : 'flex-row items-center',\n      this.animationClasses()\n    )\n  );\n\n  protected readonly animationClasses = computed(() => {\n    const vertical = this.isVertical();\n    const reverse = this.isReverse();\n\n    const base = vertical ? 'z-marquee--animate-y' : 'z-marquee--animate-x';\n    const dir = reverse ? ' z-marquee--reverse' : '';\n\n    return `${base}${dir}`;\n  });\n\n  protected readonly trackClasses = computed(() =>\n    zMergeClasses(\n      'z-marquee-track flex shrink-0 justify-start',\n      this.isVertical() ? 'flex-col items-stretch' : 'flex-row items-center'\n    )\n  );\n\n  protected readonly contentClasses = computed(() =>\n    zMergeClasses(\n      'z-marquee-content flex shrink-0 justify-start',\n      this.isVertical() ? 'flex-col items-stretch' : 'flex-row items-center'\n    )\n  );\n}\n","<div\n  class=\"z-marquee-viewport flex min-w-full\"\n  [class.flex-row]=\"!isVertical()\"\n  [class.h-full]=\"isVertical()\"\n  [class.flex-col]=\"isVertical()\"\n  [style.gap]=\"zGap()\"\n  [style.--z-marquee-gap]=\"zGap()\"\n  [style.--z-marquee-duration]=\"zDuration() + 's'\">\n  <div [class]=\"runnerClasses()\">\n    @for (copy of copyItems; track copy) {\n      <div [class]=\"trackClasses()\" [style.gap]=\"zGap()\" [attr.aria-hidden]=\"copy === 0 ? null : 'true'\">\n        @for (item of repeatItems(); track item) {\n          <div [class]=\"contentClasses()\" [style.gap]=\"zGap()\">\n            @if (contentTemplate(); as tmpl) {\n              <ng-container [ngTemplateOutlet]=\"tmpl\" />\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n\n@if (showLeftFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 left-0 w-12 bg-gradient-to-r via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showRightFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-y-0 right-0 w-12 bg-gradient-to-l via-55% to-transparent sm:w-16\"></div>\n}\n\n@if (showTopFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b via-55% to-transparent sm:h-12\"></div>\n}\n\n@if (showBottomFade()) {\n  <div\n    class=\"from-background/85 via-background/30 pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t via-55% to-transparent sm:h-12\"></div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -27,15 +27,24 @@ const zMediaPlayerVariants = cva('relative overflow-hidden bg-black select-none
 class ZMediaPlayerComponent {
     _elementRef = inject((ElementRef));
     // Inputs
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    zSrc = input.required(...(ngDevMode ? [{ debugName: "zSrc" }] : []));
-    zSources = input([], ...(ngDevMode ? [{ debugName: "zSources" }] : []));
-    zPoster = input('', ...(ngDevMode ? [{ debugName: "zPoster" }] : []));
-    zAutoplay = input(false, ...(ngDevMode ? [{ debugName: "zAutoplay" }] : []));
-    zLoop = input(false, ...(ngDevMode ? [{ debugName: "zLoop" }] : []));
-    zMuted = input(false, ...(ngDevMode ? [{ debugName: "zMuted" }] : []));
-    zVolume = input(1.0, ...(ngDevMode ? [{ debugName: "zVolume" }] : []));
-    zSubtitles = input([], ...(ngDevMode ? [{ debugName: "zSubtitles" }] : []));
+    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 */
+    ...(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 */ []));
     // Outputs
     zPlay = output();
     zTimeUpdate = output();
@@ -45,42 +54,68 @@ class ZMediaPlayerComponent {
     zMiniplayerChange = output();
     zQualityChange = output();
     // Element Refs sử dụng signal viewChild thay vì decorator
-    videoElement = viewChild('videoElement', ...(ngDevMode ? [{ debugName: "videoElement" }] : []));
-    timelineContainer = viewChild('timelineContainer', ...(ngDevMode ? [{ debugName: "timelineContainer" }] : []));
+    videoElement = viewChild('videoElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
+    timelineContainer = viewChild('timelineContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timelineContainer" }] : /* istanbul ignore next */ []));
     // Component Signals trạng thái trình phát
-    isPlaying = signal(false, ...(ngDevMode ? [{ debugName: "isPlaying" }] : []));
-    currentTime = signal(0, ...(ngDevMode ? [{ debugName: "currentTime" }] : []));
-    duration = signal(0, ...(ngDevMode ? [{ debugName: "duration" }] : []));
-    volume = signal(1.0, ...(ngDevMode ? [{ debugName: "volume" }] : []));
-    isMuted = signal(false, ...(ngDevMode ? [{ debugName: "isMuted" }] : []));
-    playbackSpeed = signal(1.0, ...(ngDevMode ? [{ debugName: "playbackSpeed" }] : []));
-    activeSourceSrc = signal(null, ...(ngDevMode ? [{ debugName: "activeSourceSrc" }] : []));
-    showControls = signal(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
-    isBuffering = signal(false, ...(ngDevMode ? [{ debugName: "isBuffering" }] : []));
-    captionsEnabled = signal(false, ...(ngDevMode ? [{ debugName: "captionsEnabled" }] : []));
-    isTheaterMode = signal(false, ...(ngDevMode ? [{ debugName: "isTheaterMode" }] : []));
-    isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
-    isMiniplayer = signal(false, ...(ngDevMode ? [{ debugName: "isMiniplayer" }] : []));
-    showSettings = signal(false, ...(ngDevMode ? [{ debugName: "showSettings" }] : []));
-    settingsPanel = signal('main', ...(ngDevMode ? [{ debugName: "settingsPanel" }] : []));
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    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 */ []));
+    showControls = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showControls" }] : /* 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 */ []));
+    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, ...(ngDevMode ? [{ debugName: "bufferedProgress" }] : []));
+    bufferedProgress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bufferedProgress" }] : /* istanbul ignore next */ []));
     progress = computed(() => {
         const dur = this.duration();
         if (dur === 0) {
             return 0;
         }
         return (this.currentTime() / dur) * 100;
-    }, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
     // Trạng thái visual hiển thị
-    playPauseFlash = signal(null, ...(ngDevMode ? [{ debugName: "playPauseFlash" }] : []));
-    hoverTimeLabel = signal(null, ...(ngDevMode ? [{ debugName: "hoverTimeLabel" }] : []));
-    hoverX = signal(0, ...(ngDevMode ? [{ debugName: "hoverX" }] : []));
+    playPauseFlash = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "playPauseFlash" }] : /* istanbul ignore next */ []));
+    hoverTimeLabel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverTimeLabel" }] : /* istanbul ignore next */ []));
+    hoverX = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverX" }] : /* istanbul ignore next */ []));
     // Lớp phủ tua nhanh nhảy số cộng dồn kiểu YouTube
-    skipOverlayDirection = signal(null, ...(ngDevMode ? [{ debugName: "skipOverlayDirection" }] : []));
-    skipOverlayValue = signal(0, ...(ngDevMode ? [{ debugName: "skipOverlayValue" }] : []));
-    skipOverlayPulse = signal(0, ...(ngDevMode ? [{ debugName: "skipOverlayPulse" }] : []));
+    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') {
@@ -103,7 +138,8 @@ class ZMediaPlayerComponent {
             'webkitSupportsPresentationMode' in HTMLVideoElement.prototype &&
             'webkitSetPresentationMode' in HTMLVideoElement.prototype;
         return hasWebkitProto;
-    }, ...(ngDevMode ? [{ debugName: "isPiPSupported" }] : []));
+    }, /* @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 },
@@ -130,16 +166,22 @@ class ZMediaPlayerComponent {
             layout = 'fullscreen';
         }
         return zMergeClasses(zMediaPlayerVariants({ zLayout: layout }), this.class());
-    }, ...(ngDevMode ? [{ debugName: "zClasses" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zClasses" }] : /* istanbul ignore next */ []));
     // Nhãn thời gian hiển thị computed signals
-    currentTimeLabel = computed(() => this._formatTime(this.currentTime()), ...(ngDevMode ? [{ debugName: "currentTimeLabel" }] : []));
-    durationLabel = computed(() => this._formatTime(this.duration()), ...(ngDevMode ? [{ debugName: "durationLabel" }] : []));
-    effectiveSrc = computed(() => this.activeSourceSrc() ?? this.zSrc(), ...(ngDevMode ? [{ debugName: "effectiveSrc" }] : []));
-    qualitySources = computed(() => this.zSources().filter(source => !!source.src), ...(ngDevMode ? [{ debugName: "qualitySources" }] : []));
+    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 */ []));
+    effectiveSrc = computed(() => this.activeSourceSrc() ?? this.zSrc(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveSrc" }] : /* istanbul ignore next */ []));
+    qualitySources = computed(() => this.zSources().filter(source => !!source.src), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "qualitySources" }] : /* istanbul ignore next */ []));
     activeQualityLabel = computed(() => {
         const activeSrc = this.effectiveSrc();
         return this.qualitySources().find(source => source.src === activeSrc)?.label ?? 'Auto';
-    }, ...(ngDevMode ? [{ debugName: "activeQualityLabel" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeQualityLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const fallbackSrc = this.zSrc();
@@ -645,10 +687,10 @@ class ZMediaPlayerComponent {
         }
         return `${minutes}:${formattedSeconds}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMediaPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZMediaPlayerComponent, isStandalone: true, selector: "z-media-player", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSrc: { classPropertyName: "zSrc", publicName: "zSrc", isSignal: true, isRequired: true, transformFunction: null }, zSources: { classPropertyName: "zSources", publicName: "zSources", isSignal: true, isRequired: false, transformFunction: null }, zPoster: { classPropertyName: "zPoster", publicName: "zPoster", isSignal: true, isRequired: false, transformFunction: null }, zAutoplay: { classPropertyName: "zAutoplay", publicName: "zAutoplay", isSignal: true, isRequired: false, transformFunction: null }, zLoop: { classPropertyName: "zLoop", publicName: "zLoop", isSignal: true, isRequired: false, transformFunction: null }, zMuted: { classPropertyName: "zMuted", publicName: "zMuted", isSignal: true, isRequired: false, transformFunction: null }, zVolume: { classPropertyName: "zVolume", publicName: "zVolume", isSignal: true, isRequired: false, transformFunction: null }, zSubtitles: { classPropertyName: "zSubtitles", publicName: "zSubtitles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zPlay: "zPlay", zTimeUpdate: "zTimeUpdate", zVolumeChange: "zVolumeChange", zFullscreenChange: "zFullscreenChange", zTheaterModeChange: "zTheaterModeChange", zMiniplayerChange: "zMiniplayerChange", zQualityChange: "zQualityChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousemove": "onMouseMove()", "mouseleave": "onMouseLeave()", "document:fullscreenchange": "onFullscreenStateChange()" }, properties: { "class": "zClasses()", "attr.tabindex": "0" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoElement"], descendants: true, isSignal: true }, { propertyName: "timelineContainer", first: true, predicate: ["timelineContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Th\u1EBB video ch\u00EDnh ph\u00E1t ngu\u1ED3n zSrc -->\n<video\n  #videoElement\n  class=\"h-full w-full cursor-pointer object-contain\"\n  [src]=\"effectiveSrc()\"\n  [poster]=\"zPoster()\"\n  [loop]=\"zLoop()\"\n  [autoplay]=\"zAutoplay()\"\n  playsinline\n  webkit-playsinline\n  (click)=\"onVideoClick($event)\"\n  (play)=\"onPlayStateChange(true)\"\n  (pause)=\"onPlayStateChange(false)\"\n  (timeupdate)=\"onTimeUpdate()\"\n  (durationchange)=\"onDurationChange()\"\n  (seeking)=\"onSeeking(true)\"\n  (seeked)=\"onSeeking(false)\"\n  (waiting)=\"onSeeking(true)\"\n  (playing)=\"onSeeking(false)\"\n  (enterpictureinpicture)=\"onEnterPiP()\"\n  (leavepictureinpicture)=\"onLeavePiP()\"\n  (webkitpresentationmodechanged)=\"onWebkitPresentationModeChanged()\">\n  @for (sub of zSubtitles(); track sub.src) {\n    <track\n      [src]=\"sub.src\"\n      kind=\"subtitles\"\n      [srclang]=\"sub.srclang\"\n      [label]=\"sub.label\"\n      [default]=\"sub.default || false\" />\n  }\n</video>\n\n<!-- L\u1EDBp ph\u1EE7 v\u00F2ng xoay loading khi video \u0111ang buffer -->\n@if (isBuffering()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[10] flex items-center justify-center bg-black/20\">\n    <div class=\"size-14 animate-spin rounded-full border-4 border-white/20 border-t-red-600\"></div>\n  </div>\n}\n\n<!-- Hi\u1EC7u \u1EE9ng nh\u1EA5p nh\u00E1y Play/Pause l\u1EDBn gi\u1EEFa m\u00E0n h\u00ECnh t\u01B0\u01A1ng t\u1EF1 YouTube -->\n@if (playPauseFlash()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[11] flex items-center justify-center\">\n    <div\n      class=\"z-flash-animation flex size-14 items-center justify-center rounded-full bg-black/60 text-white sm:size-20\">\n      <z-icon\n        [zType]=\"playPauseFlash() === 'play' ? 'lucidePlay' : 'lucidePause'\"\n        zSize=\"24\"\n        [zStrokeWidth]=\"2\"\n        [class.translate-x-[2px]]=\"playPauseFlash() === 'play'\" />\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Tr\u00E1i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'left') {\n  <div class=\"z-double-tap-ripple-left\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-number\">- {{ skipOverlayValue() }}</span>\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-left\">\n        <z-icon zType=\"lucideChevronsLeft\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Ph\u1EA3i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'right') {\n  <div class=\"z-double-tap-ripple-right\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-right\">\n        <z-icon zType=\"lucideChevronsRight\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n      <span class=\"z-skip-overlay-number\">+ {{ skipOverlayValue() }}</span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 ch\u1EE9a thanh \u0111i\u1EC1u khi\u1EC3n (Bottom controls panel) -->\n<div\n  class=\"pointer-events-none absolute inset-x-0 bottom-0 z-[12] flex flex-col bg-gradient-to-t from-black/85 via-black/40 to-transparent p-3 pt-12 transition-opacity duration-300 select-none\"\n  [class.opacity-0]=\"!showControls()\"\n  [class.invisible]=\"!showControls()\">\n  <!-- Thanh Timeline (Progress Bar) t\u00F9y ch\u1EC9nh ki\u1EC3u YouTube -->\n  <div\n    #timelineContainer\n    id=\"z_media_player_timeline\"\n    class=\"group/timeline pointer-events-auto relative mb-3 flex h-1 w-full cursor-pointer items-center transition-all hover:h-1.5\"\n    (mousedown)=\"onTimelineDragStart($event)\"\n    (mousemove)=\"onTimelineHover($event)\"\n    (mouseleave)=\"onTimelineHoverEnd()\">\n    <!-- Thanh n\u1EC1n x\u00E1m c\u1EE7a thanh timeline -->\n    <div\n      class=\"absolute inset-x-0 h-1 overflow-hidden rounded-full bg-white/25 transition-all group-hover/timeline:h-1.5\">\n      <!-- Ti\u1EBFn tr\u00ECnh t\u1EA3i buffer c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\" [style.width.%]=\"bufferedProgress()\"></div>\n      <!-- Ti\u1EBFn tr\u00ECnh ph\u00E1t hi\u1EC7n t\u1EA1i c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-red-600\" [style.width.%]=\"progress()\"></div>\n    </div>\n\n    <!-- \u0110\u1EA7u k\u00E9o timeline (Thumb) \u0111\u1ECF ch\u1EC9 hi\u1EC3n th\u1ECB khi hover ho\u1EB7c k\u00E9o -->\n    <div\n      class=\"bg-red-650 pointer-events-none absolute size-3.5 -translate-x-1/2 scale-0 transform rounded-full opacity-0 transition-opacity duration-150 group-hover/timeline:scale-100 group-hover/timeline:opacity-100\"\n      [style.left.%]=\"progress()\"></div>\n\n    <!-- Tooltip hi\u1EC3n th\u1ECB m\u1ED1c th\u1EDDi gian khi hover -->\n    @if (hoverTimeLabel()) {\n      <div\n        class=\"pointer-events-none absolute bottom-4 z-[20] -translate-x-1/2 rounded-xs bg-zinc-950/70 px-2 py-1 font-mono text-[11px] leading-none whitespace-nowrap text-zinc-100 shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)] backdrop-blur-2xl\"\n        [style.left.px]=\"hoverX()\">\n        {{ hoverTimeLabel() }}\n      </div>\n    }\n  </div>\n\n  <!-- H\u00E0ng ch\u1EE9a c\u00E1c n\u00FAt b\u1EA5m \u0111i\u1EC1u khi\u1EC3n ch\u1EE9c n\u0103ng -->\n  <div class=\"pointer-events-auto flex items-center justify-between text-sm text-white\">\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn tr\u00E1i -->\n    <div class=\"flex items-center gap-2\">\n      <!-- N\u00FAt Ph\u00E1t / T\u1EA1m d\u1EEBng -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_play_btn\"\n        class=\"mr-1 flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n        (click)=\"togglePlay()\">\n        <z-icon [zType]=\"isPlaying() ? 'lucidePause' : 'lucidePlay'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt Tua l\u00F9i 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_rewind_5_btn\"\n        class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua l\u00F9i 5 gi\u00E2y (Arrow Left)\"\n        (click)=\"triggerSkip(5, 'left')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCcw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- N\u00FAt Tua ti\u1EBFn 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_forward_5_btn\"\n        class=\"mr-1 hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua ti\u1EBFn 5 gi\u00E2y (Arrow Right)\"\n        (click)=\"triggerSkip(5, 'right')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- T\u1ED5 h\u1EE3p n\u00FAt Mute v\u00E0 Slider \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang -->\n      <div class=\"group/volume hidden items-center gap-1.5 sm:flex\">\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mute_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"(isMuted() ? 'i18n_z_ui_media_player_unmute' : 'i18n_z_ui_media_player_mute') | translate\"\n          (click)=\"toggleMute()\">\n          <z-icon\n            [zType]=\"isMuted() ? 'lucideVolumeX' : volume() < 0.5 ? 'lucideVolume1' : 'lucideVolume2'\"\n            zSize=\"20\"\n            [zStrokeWidth]=\"2\" />\n        </button>\n        <!-- Thanh tr\u01B0\u1EE3t \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang m\u1EDF r\u1ED9ng khi hover -->\n        <input\n          type=\"range\"\n          id=\"z_media_player_volume_slider\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          [ngModel]=\"volume()\"\n          (ngModelChange)=\"onVolumeChange($event)\"\n          class=\"accent-red-650 h-1 w-0 cursor-pointer rounded-lg bg-white/20 opacity-0 transition-all duration-200 outline-none group-hover/volume:w-16 group-hover/volume:opacity-100 focus-visible:w-16 focus-visible:opacity-100\" />\n      </div>\n\n      <!-- Hi\u1EC3n th\u1ECB th\u1EDDi gian ph\u00E1t (currentTime / duration) -->\n      <div class=\"pl-1 font-mono text-xs text-white/90 select-none\">\n        <span>{{ currentTimeLabel() }}</span>\n        <span class=\"mx-1 text-white/40\">/</span>\n        <span class=\"text-white/60\">{{ durationLabel() }}</span>\n      </div>\n    </div>\n\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn ph\u1EA3i -->\n    <div class=\"flex items-center gap-1.5\">\n      <!-- N\u00FAt m\u1EDF tr\u00ECnh \u0111\u01A1n C\u00E0i \u0111\u1EB7t b\u1EB1ng ZPopoverDirective -->\n      @if (isFullscreen()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          (click)=\"toggleInlineSettings()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      } @else {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          z-popover\n          [zPopoverContent]=\"speedMenuTemplate\"\n          zPosition=\"top-right\"\n          zTrigger=\"click\"\n          [zOffset]=\"6\"\n          zClass=\"z-media-player-popover\"\n          (zShow)=\"showSettings.set(true); onMouseMove()\"\n          (zHide)=\"onSettingsHidden()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt Miniplayer (Picture-in-Picture) - \u1EA8n ho\u1EB7c disable n\u1EBFu browser ko h\u1ED7 tr\u1EE3 -->\n      @if (isPiPSupported()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mini_btn\"\n          class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n          [title]=\"'i18n_z_ui_media_player_miniplayer' | translate\"\n          (click)=\"toggleMiniplayer()\">\n          <z-icon zType=\"lucideTv\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 r\u1EA1p chi\u1EBFu phim (Theater Mode) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        id=\"z_media_player_theater_btn\"\n        class=\"flex hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none md:flex\"\n        [title]=\"\n          (isTheaterMode() ? 'i18n_z_ui_media_player_default_mode' : 'i18n_z_ui_media_player_theater_mode') | translate\n        \"\n        (click)=\"toggleTheaterMode()\">\n        <z-icon\n          [zType]=\"isTheaterMode() ? 'lucideSquare' : 'lucideRectangleHorizontal'\"\n          zSize=\"20\"\n          [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 to\u00E0n m\u00E0n h\u00ECnh (Fullscreen) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_full_btn\"\n        class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"\n          (isFullscreen() ? 'i18n_z_ui_media_player_exit_fullscreen' : 'i18n_z_ui_media_player_fullscreen') | translate\n        \"\n        (click)=\"toggleFullscreen()\">\n        <z-icon [zType]=\"isFullscreen() ? 'lucideMinimize' : 'lucideMaximize'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (isFullscreen() && showSettings()) {\n  <div class=\"z-media-player-popover z-media-player-inline-settings\">\n    <ng-container [ngTemplateOutlet]=\"speedMenuTemplate\" />\n  </div>\n}\n\n<!-- Template c\u1EA5u h\u00ECnh Popover c\u00E0i \u0111\u1EB7t s\u1EED d\u1EE5ng ng-template -->\n<ng-template #speedMenuTemplate>\n  <div\n    class=\"z-media-player-settings flex w-44 flex-col px-1 py-[4px] text-zinc-200\"\n    [class.z-main-panel]=\"settingsPanel() === 'main'\"\n    [class.z-sub-panel]=\"settingsPanel() !== 'main'\">\n    @if (settingsPanel() === 'main') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        @if (qualitySources().length > 1) {\n          <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('quality')\">\n            <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ 'i18n_z_ui_media_player_quality' | translate }}\n            </span>\n            <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ activeQualityLabel() }}</span>\n              <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n            </span>\n          </button>\n        }\n        <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('speed')\">\n          <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n            {{ 'i18n_z_ui_media_player_speed' | translate }}\n          </span>\n          <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">\n              {{ playbackSpeed() === 1 ? ('i18n_z_ui_media_player_normal' | translate) : playbackSpeed() + 'x' }}\n            </span>\n            <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (settingsPanel() === 'quality') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_quality' | translate }}</span>\n        </button>\n        @for (source of qualitySources(); track source.src) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_quality_btn_' + source.label\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"effectiveSrc() === source.src\"\n            (click)=\"setQualitySource(source)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ source.label }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (settingsPanel() === 'speed') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_speed' | translate }}</span>\n        </button>\n        @for (speed of playbackSpeeds; track speed.value) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_speed_btn_' + speed.value\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"playbackSpeed() === speed.value\"\n            (click)=\"setPlaybackSpeed(speed.value)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ speed.label | translate }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["z-media-player{display:block;width:100%;outline:none}z-media-player:focus,z-media-player:focus-visible{outline:none}z-media-player video::cue{background-color:#080808d9;color:#fff;font-family:inherit;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.9);padding:4px 8px;border-radius:4px}z-media-player .z-flash-animation{animation:zUiFlashIcon .72s cubic-bezier(.2,.85,.25,1) forwards;will-change:opacity,transform,filter}z-media-player .z-flash-animation z-icon{width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center}z-media-player .z-flash-animation z-icon ng-icon,z-media-player .z-flash-animation z-icon svg{width:100%!important;height:100%!important}@media(min-width:640px){z-media-player .z-flash-animation z-icon{width:32px!important;height:32px!important}}@keyframes zUiFlashIcon{0%{filter:blur(2px);opacity:0;transform:scale(.72)}18%{filter:blur(0);opacity:.95;transform:scale(1)}58%{opacity:.9;transform:scale(1.04)}to{filter:blur(0);opacity:0;transform:scale(1.18)}}z-media-player .animate-fade-in{animation:zUiFadeIn .2s cubic-bezier(.16,1,.3,1)}@keyframes zUiFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}z-media-player .z-double-tap-ripple-left,z-media-player .z-double-tap-ripple-right{position:absolute;top:0;bottom:0;width:35%;display:flex;align-items:center;z-index:11;pointer-events:none}z-media-player .z-double-tap-ripple-left:before,z-media-player .z-double-tap-ripple-right:before{position:absolute;inset:0;content:\"\";opacity:0;animation-duration:.72s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,1,.5,1)}z-media-player .z-double-tap-ripple-left{left:0;justify-content:flex-start;padding-left:5%}z-media-player .z-double-tap-ripple-left:before{background:radial-gradient(circle at 0% 50%,#ffffff21,#fff0 70%);border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;animation-name:zUiDoubleTapRippleLeft;transform-origin:left center}z-media-player .z-double-tap-ripple-left.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleLeftAlt}z-media-player .z-double-tap-ripple-right{right:0;justify-content:flex-end;padding-right:5%}z-media-player .z-double-tap-ripple-right:before{background:radial-gradient(circle at 100% 50%,#ffffff21,#fff0 70%);border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;animation-name:zUiDoubleTapRippleRight;transform-origin:right center}z-media-player .z-double-tap-ripple-right.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleRightAlt}z-media-player .z-skip-overlay-content{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;color:#fff;font-family:inherit;font-size:18px;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.75);-webkit-user-select:none;user-select:none}z-media-player .z-skip-overlay-number{min-width:42px;animation:zUiSkipNumberBump .22s cubic-bezier(.2,.85,.25,1) forwards;text-align:center;transform-origin:center}z-media-player .z-skip-pulse-alt .z-skip-overlay-number{animation-name:zUiSkipNumberBumpAlt}z-media-player .z-skip-overlay-arrows{display:inline-flex;align-items:center;color:#fffffff2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}@keyframes zUiDoubleTapRippleLeft{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleLeftAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleRight{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}@keyframes zUiDoubleTapRippleRightAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}z-media-player .z-chevron-slide-left{animation:zUiChevronSlideLeft .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-chevron-slide-right{animation:zUiChevronSlideRight .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-skip-pulse-alt .z-chevron-slide-left{animation-name:zUiChevronSlideLeftAlt}z-media-player .z-skip-pulse-alt .z-chevron-slide-right{animation-name:zUiChevronSlideRightAlt}@keyframes zUiSkipNumberBump{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiSkipNumberBumpAlt{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiChevronSlideLeft{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRight{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes zUiChevronSlideLeftAlt{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRightAlt{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}z-media-player #z_media_player_volume_slider{-webkit-appearance:none;appearance:none;background:transparent}z-media-player #z_media_player_volume_slider::-webkit-slider-runnable-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:10px;width:10px;border-radius:9999px;margin-top:-3.5px;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-webkit-slider-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}z-media-player #z_media_player_volume_slider::-moz-range-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-moz-range-thumb{background:#fff;height:10px;width:10px;border-radius:9999px;border:none;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-moz-range-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-moz-range-thumb{transform:scale(1.3)}.z-media-player-popover{backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;background-color:#0f0f0f99!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 15px 30px -10px #000c!important;border-radius:8px!important;padding:0!important;transform-origin:bottom right}.z-media-player-popover[data-state=open]{animation:zUiMediaSettingsPopoverIn .16s cubic-bezier(.2,.85,.25,1) forwards}.z-media-player-popover[data-state=closed]{animation:zUiMediaSettingsPopoverOut .16s cubic-bezier(.4,0,.2,1) forwards!important}.z-media-player-popover .bg-popover{background-color:transparent!important;color:#e4e4e7!important}.z-media-player-popover .z-media-player-settings{overflow:hidden;transform-origin:bottom right;animation:zUiMediaSettingsPanelIn .16s cubic-bezier(.2,.85,.25,1)}.z-media-player-popover .z-media-player-settings-panel{gap:4px;transform-origin:top right;animation:zUiMediaSettingsPanelIn .14s cubic-bezier(.2,.85,.25,1);will-change:opacity,transform}.z-media-player-popover .z-media-player-settings.z-main-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromLeft}.z-media-player-popover .z-media-player-settings.z-sub-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromRight}.z-media-player-popover .z-media-player-settings-item,.z-media-player-popover .z-media-player-settings-back{position:relative;display:flex;width:100%;min-width:0;height:32px;min-height:32px;cursor:pointer;align-items:center;border:0;border-radius:4px;background-color:transparent;padding:0 8px;color:#e4e4e7;font-size:12px;font-weight:500;line-height:1;outline:none;transition:background-color .12s ease,color .12s ease}.z-media-player-popover .z-media-player-settings-item{justify-content:space-between;gap:12px;text-align:left}.z-media-player-popover .z-media-player-settings-item:before{position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:9999px;background-color:#fff;content:\"\";opacity:0;transform:scaleY(.5);transition:opacity .12s ease,transform .12s ease}.z-media-player-popover .z-media-player-settings-item.z-active{background-color:#ffffff14;color:#fff;font-weight:600}.z-media-player-popover .z-media-player-settings-item.z-active:before{opacity:1;transform:scaleY(1)}.z-media-player-popover .z-media-player-settings-back{justify-content:flex-start;gap:8px;color:#f4f4f5;font-weight:600}.z-media-player-popover .z-media-player-settings-item:hover,.z-media-player-popover .z-media-player-settings-back:hover,.z-media-player-popover .z-media-player-settings-item:focus-visible,.z-media-player-popover .z-media-player-settings-back:focus-visible{background-color:#ffffff1a}.z-media-player-inline-settings{position:absolute;right:12px;bottom:64px;z-index:30}@keyframes zUiMediaSettingsPopoverIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes zUiMediaSettingsPopoverOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(4px) scale(.96)}}@keyframes zUiMediaSettingsPanelIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes zUiMediaSettingsPanelFromRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes zUiMediaSettingsPanelFromLeft{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][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.2", ngImport: i0, type: ZMediaPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZMediaPlayerComponent, isStandalone: true, selector: "z-media-player", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSrc: { classPropertyName: "zSrc", publicName: "zSrc", isSignal: true, isRequired: true, transformFunction: null }, zSources: { classPropertyName: "zSources", publicName: "zSources", isSignal: true, isRequired: false, transformFunction: null }, zPoster: { classPropertyName: "zPoster", publicName: "zPoster", isSignal: true, isRequired: false, transformFunction: null }, zAutoplay: { classPropertyName: "zAutoplay", publicName: "zAutoplay", isSignal: true, isRequired: false, transformFunction: null }, zLoop: { classPropertyName: "zLoop", publicName: "zLoop", isSignal: true, isRequired: false, transformFunction: null }, zMuted: { classPropertyName: "zMuted", publicName: "zMuted", isSignal: true, isRequired: false, transformFunction: null }, zVolume: { classPropertyName: "zVolume", publicName: "zVolume", isSignal: true, isRequired: false, transformFunction: null }, zSubtitles: { classPropertyName: "zSubtitles", publicName: "zSubtitles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zPlay: "zPlay", zTimeUpdate: "zTimeUpdate", zVolumeChange: "zVolumeChange", zFullscreenChange: "zFullscreenChange", zTheaterModeChange: "zTheaterModeChange", zMiniplayerChange: "zMiniplayerChange", zQualityChange: "zQualityChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousemove": "onMouseMove()", "mouseleave": "onMouseLeave()", "document:fullscreenchange": "onFullscreenStateChange()" }, properties: { "class": "zClasses()", "attr.tabindex": "0" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoElement"], descendants: true, isSignal: true }, { propertyName: "timelineContainer", first: true, predicate: ["timelineContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Th\u1EBB video ch\u00EDnh ph\u00E1t ngu\u1ED3n zSrc -->\n<video\n  #videoElement\n  class=\"h-full w-full cursor-pointer object-contain\"\n  [src]=\"effectiveSrc()\"\n  [poster]=\"zPoster()\"\n  [loop]=\"zLoop()\"\n  [autoplay]=\"zAutoplay()\"\n  playsinline\n  webkit-playsinline\n  (click)=\"onVideoClick($event)\"\n  (play)=\"onPlayStateChange(true)\"\n  (pause)=\"onPlayStateChange(false)\"\n  (timeupdate)=\"onTimeUpdate()\"\n  (durationchange)=\"onDurationChange()\"\n  (seeking)=\"onSeeking(true)\"\n  (seeked)=\"onSeeking(false)\"\n  (waiting)=\"onSeeking(true)\"\n  (playing)=\"onSeeking(false)\"\n  (enterpictureinpicture)=\"onEnterPiP()\"\n  (leavepictureinpicture)=\"onLeavePiP()\"\n  (webkitpresentationmodechanged)=\"onWebkitPresentationModeChanged()\">\n  @for (sub of zSubtitles(); track sub.src) {\n    <track\n      [src]=\"sub.src\"\n      kind=\"subtitles\"\n      [srclang]=\"sub.srclang\"\n      [label]=\"sub.label\"\n      [default]=\"sub.default || false\" />\n  }\n</video>\n\n<!-- L\u1EDBp ph\u1EE7 v\u00F2ng xoay loading khi video \u0111ang buffer -->\n@if (isBuffering()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[10] flex items-center justify-center bg-black/20\">\n    <div class=\"size-14 animate-spin rounded-full border-4 border-white/20 border-t-red-600\"></div>\n  </div>\n}\n\n<!-- Hi\u1EC7u \u1EE9ng nh\u1EA5p nh\u00E1y Play/Pause l\u1EDBn gi\u1EEFa m\u00E0n h\u00ECnh t\u01B0\u01A1ng t\u1EF1 YouTube -->\n@if (playPauseFlash()) {\n  <div class=\"pointer-events-none absolute inset-0 z-[11] flex items-center justify-center\">\n    <div\n      class=\"z-flash-animation flex size-14 items-center justify-center rounded-full bg-black/60 text-white sm:size-20\">\n      <z-icon\n        [zType]=\"playPauseFlash() === 'play' ? 'lucidePlay' : 'lucidePause'\"\n        zSize=\"24\"\n        [zStrokeWidth]=\"2\"\n        [class.translate-x-[2px]]=\"playPauseFlash() === 'play'\" />\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Tr\u00E1i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'left') {\n  <div class=\"z-double-tap-ripple-left\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-number\">- {{ skipOverlayValue() }}</span>\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-left\">\n        <z-icon zType=\"lucideChevronsLeft\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 tua nhanh nh\u1EA3y s\u1ED1 c\u1ED9ng d\u1ED3n Ph\u1EA3i (YouTube style) -->\n@if (skipOverlayValue() > 0 && skipOverlayDirection() === 'right') {\n  <div class=\"z-double-tap-ripple-right\" [class.z-skip-pulse-alt]=\"skipOverlayPulse() % 2 === 1\">\n    <div class=\"z-skip-overlay-content\">\n      <span class=\"z-skip-overlay-arrows z-chevron-slide-right\">\n        <z-icon zType=\"lucideChevronsRight\" zSize=\"26\" [zStrokeWidth]=\"2.4\" />\n      </span>\n      <span class=\"z-skip-overlay-number\">+ {{ skipOverlayValue() }}</span>\n    </div>\n  </div>\n}\n\n<!-- L\u1EDBp ph\u1EE7 ch\u1EE9a thanh \u0111i\u1EC1u khi\u1EC3n (Bottom controls panel) -->\n<div\n  class=\"pointer-events-none absolute inset-x-0 bottom-0 z-[12] flex flex-col bg-gradient-to-t from-black/85 via-black/40 to-transparent p-3 pt-12 transition-opacity duration-300 select-none\"\n  [class.opacity-0]=\"!showControls()\"\n  [class.invisible]=\"!showControls()\">\n  <!-- Thanh Timeline (Progress Bar) t\u00F9y ch\u1EC9nh ki\u1EC3u YouTube -->\n  <div\n    #timelineContainer\n    id=\"z_media_player_timeline\"\n    class=\"group/timeline pointer-events-auto relative mb-3 flex h-1 w-full cursor-pointer items-center transition-all hover:h-1.5\"\n    (mousedown)=\"onTimelineDragStart($event)\"\n    (mousemove)=\"onTimelineHover($event)\"\n    (mouseleave)=\"onTimelineHoverEnd()\">\n    <!-- Thanh n\u1EC1n x\u00E1m c\u1EE7a thanh timeline -->\n    <div\n      class=\"absolute inset-x-0 h-1 overflow-hidden rounded-full bg-white/25 transition-all group-hover/timeline:h-1.5\">\n      <!-- Ti\u1EBFn tr\u00ECnh t\u1EA3i buffer c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\" [style.width.%]=\"bufferedProgress()\"></div>\n      <!-- Ti\u1EBFn tr\u00ECnh ph\u00E1t hi\u1EC7n t\u1EA1i c\u1EE7a video -->\n      <div class=\"absolute top-0 left-0 h-full rounded-full bg-red-600\" [style.width.%]=\"progress()\"></div>\n    </div>\n\n    <!-- \u0110\u1EA7u k\u00E9o timeline (Thumb) \u0111\u1ECF ch\u1EC9 hi\u1EC3n th\u1ECB khi hover ho\u1EB7c k\u00E9o -->\n    <div\n      class=\"bg-red-650 pointer-events-none absolute size-3.5 -translate-x-1/2 scale-0 transform rounded-full opacity-0 transition-opacity duration-150 group-hover/timeline:scale-100 group-hover/timeline:opacity-100\"\n      [style.left.%]=\"progress()\"></div>\n\n    <!-- Tooltip hi\u1EC3n th\u1ECB m\u1ED1c th\u1EDDi gian khi hover -->\n    @if (hoverTimeLabel()) {\n      <div\n        class=\"pointer-events-none absolute bottom-4 z-[20] -translate-x-1/2 rounded-xs bg-zinc-950/70 px-2 py-1 font-mono text-[11px] leading-none whitespace-nowrap text-zinc-100 shadow-[0_12px_24px_-10px_rgba(0,0,0,0.85)] backdrop-blur-2xl\"\n        [style.left.px]=\"hoverX()\">\n        {{ hoverTimeLabel() }}\n      </div>\n    }\n  </div>\n\n  <!-- H\u00E0ng ch\u1EE9a c\u00E1c n\u00FAt b\u1EA5m \u0111i\u1EC1u khi\u1EC3n ch\u1EE9c n\u0103ng -->\n  <div class=\"pointer-events-auto flex items-center justify-between text-sm text-white\">\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn tr\u00E1i -->\n    <div class=\"flex items-center gap-2\">\n      <!-- N\u00FAt Ph\u00E1t / T\u1EA1m d\u1EEBng -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_play_btn\"\n        class=\"mr-1 flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n        (click)=\"togglePlay()\">\n        <z-icon [zType]=\"isPlaying() ? 'lucidePause' : 'lucidePlay'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt Tua l\u00F9i 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_rewind_5_btn\"\n        class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua l\u00F9i 5 gi\u00E2y (Arrow Left)\"\n        (click)=\"triggerSkip(5, 'left')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCcw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- N\u00FAt Tua ti\u1EBFn 5s -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_forward_5_btn\"\n        class=\"mr-1 hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n        title=\"Tua ti\u1EBFn 5 gi\u00E2y (Arrow Right)\"\n        (click)=\"triggerSkip(5, 'right')\">\n        <div class=\"relative flex items-center justify-center\">\n          <z-icon zType=\"lucideRotateCw\" zSize=\"18\" [zStrokeWidth]=\"2\" />\n          <span class=\"pointer-events-none absolute mt-[1px] scale-75 text-[8px] font-bold text-white select-none\">\n            5\n          </span>\n        </div>\n      </button>\n\n      <!-- T\u1ED5 h\u1EE3p n\u00FAt Mute v\u00E0 Slider \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang -->\n      <div class=\"group/volume hidden items-center gap-1.5 sm:flex\">\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mute_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"(isMuted() ? 'i18n_z_ui_media_player_unmute' : 'i18n_z_ui_media_player_mute') | translate\"\n          (click)=\"toggleMute()\">\n          <z-icon\n            [zType]=\"isMuted() ? 'lucideVolumeX' : volume() < 0.5 ? 'lucideVolume1' : 'lucideVolume2'\"\n            zSize=\"20\"\n            [zStrokeWidth]=\"2\" />\n        </button>\n        <!-- Thanh tr\u01B0\u1EE3t \u00E2m l\u01B0\u1EE3ng tr\u01B0\u1EE3t ngang m\u1EDF r\u1ED9ng khi hover -->\n        <input\n          type=\"range\"\n          id=\"z_media_player_volume_slider\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.05\"\n          [ngModel]=\"volume()\"\n          (ngModelChange)=\"onVolumeChange($event)\"\n          class=\"accent-red-650 h-1 w-0 cursor-pointer rounded-lg bg-white/20 opacity-0 transition-all duration-200 outline-none group-hover/volume:w-16 group-hover/volume:opacity-100 focus-visible:w-16 focus-visible:opacity-100\" />\n      </div>\n\n      <!-- Hi\u1EC3n th\u1ECB th\u1EDDi gian ph\u00E1t (currentTime / duration) -->\n      <div class=\"pl-1 font-mono text-xs text-white/90 select-none\">\n        <span>{{ currentTimeLabel() }}</span>\n        <span class=\"mx-1 text-white/40\">/</span>\n        <span class=\"text-white/60\">{{ durationLabel() }}</span>\n      </div>\n    </div>\n\n    <!-- C\u00E1c n\u00FAt \u0111i\u1EC1u khi\u1EC3n ph\u00EDa b\u00EAn ph\u1EA3i -->\n    <div class=\"flex items-center gap-1.5\">\n      <!-- N\u00FAt m\u1EDF tr\u00ECnh \u0111\u01A1n C\u00E0i \u0111\u1EB7t b\u1EB1ng ZPopoverDirective -->\n      @if (isFullscreen()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          (click)=\"toggleInlineSettings()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      } @else {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_settings_btn\"\n          class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n          [title]=\"'i18n_z_ui_media_player_settings' | translate\"\n          z-popover\n          [zPopoverContent]=\"speedMenuTemplate\"\n          zPosition=\"top-right\"\n          zTrigger=\"click\"\n          [zOffset]=\"6\"\n          zClass=\"z-media-player-popover\"\n          (zShow)=\"showSettings.set(true); onMouseMove()\"\n          (zHide)=\"onSettingsHidden()\">\n          <z-icon zType=\"lucideSettings\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt Miniplayer (Picture-in-Picture) - \u1EA8n ho\u1EB7c disable n\u1EBFu browser ko h\u1ED7 tr\u1EE3 -->\n      @if (isPiPSupported()) {\n        <button\n          z-button\n          zType=\"ghost\"\n          zSize=\"sm\"\n          zShape=\"default\"\n          [zWave]=\"false\"\n          type=\"button\"\n          id=\"z_media_player_mini_btn\"\n          class=\"hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none sm:flex\"\n          [title]=\"'i18n_z_ui_media_player_miniplayer' | translate\"\n          (click)=\"toggleMiniplayer()\">\n          <z-icon zType=\"lucideTv\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n        </button>\n      }\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 r\u1EA1p chi\u1EBFu phim (Theater Mode) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        id=\"z_media_player_theater_btn\"\n        class=\"flex hidden size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none md:flex\"\n        [title]=\"\n          (isTheaterMode() ? 'i18n_z_ui_media_player_default_mode' : 'i18n_z_ui_media_player_theater_mode') | translate\n        \"\n        (click)=\"toggleTheaterMode()\">\n        <z-icon\n          [zType]=\"isTheaterMode() ? 'lucideSquare' : 'lucideRectangleHorizontal'\"\n          zSize=\"20\"\n          [zStrokeWidth]=\"2\" />\n      </button>\n\n      <!-- N\u00FAt b\u1EADt/t\u1EAFt ch\u1EBF \u0111\u1ED9 to\u00E0n m\u00E0n h\u00ECnh (Fullscreen) -->\n      <button\n        z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zShape=\"default\"\n        [zWave]=\"false\"\n        type=\"button\"\n        id=\"z_media_player_full_btn\"\n        class=\"flex size-8 cursor-pointer items-center justify-center rounded-xs border-0 border-none bg-transparent p-0 text-white shadow-none transition-colors outline-none hover:bg-white/15 hover:text-white focus:outline-none focus-visible:outline-none\"\n        [title]=\"\n          (isFullscreen() ? 'i18n_z_ui_media_player_exit_fullscreen' : 'i18n_z_ui_media_player_fullscreen') | translate\n        \"\n        (click)=\"toggleFullscreen()\">\n        <z-icon [zType]=\"isFullscreen() ? 'lucideMinimize' : 'lucideMaximize'\" zSize=\"20\" [zStrokeWidth]=\"2\" />\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (isFullscreen() && showSettings()) {\n  <div class=\"z-media-player-popover z-media-player-inline-settings\">\n    <ng-container [ngTemplateOutlet]=\"speedMenuTemplate\" />\n  </div>\n}\n\n<!-- Template c\u1EA5u h\u00ECnh Popover c\u00E0i \u0111\u1EB7t s\u1EED d\u1EE5ng ng-template -->\n<ng-template #speedMenuTemplate>\n  <div\n    class=\"z-media-player-settings flex w-44 flex-col px-1 py-[4px] text-zinc-200\"\n    [class.z-main-panel]=\"settingsPanel() === 'main'\"\n    [class.z-sub-panel]=\"settingsPanel() !== 'main'\">\n    @if (settingsPanel() === 'main') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        @if (qualitySources().length > 1) {\n          <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('quality')\">\n            <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n              {{ 'i18n_z_ui_media_player_quality' | translate }}\n            </span>\n            <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n              <span class=\"min-w-0 truncate whitespace-nowrap\">{{ activeQualityLabel() }}</span>\n              <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n            </span>\n          </button>\n        }\n        <button type=\"button\" class=\"z-media-player-settings-item\" (click)=\"openSettingsPanel('speed')\">\n          <span class=\"min-w-0 flex-1 truncate whitespace-nowrap\">\n            {{ 'i18n_z_ui_media_player_speed' | translate }}\n          </span>\n          <span class=\"flex max-w-[5.5rem] min-w-0 items-center gap-1.5 text-zinc-400\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">\n              {{ playbackSpeed() === 1 ? ('i18n_z_ui_media_player_normal' | translate) : playbackSpeed() + 'x' }}\n            </span>\n            <z-icon zType=\"lucideChevronRight\" zSize=\"13\" class=\"shrink-0\" />\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (settingsPanel() === 'quality') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_quality' | translate }}</span>\n        </button>\n        @for (source of qualitySources(); track source.src) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_quality_btn_' + source.label\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"effectiveSrc() === source.src\"\n            (click)=\"setQualitySource(source)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ source.label }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (settingsPanel() === 'speed') {\n      <div class=\"z-media-player-settings-panel flex flex-col\">\n        <button\n          type=\"button\"\n          [title]=\"'i18n_z_ui_media_player_back' | translate\"\n          class=\"z-media-player-settings-back\"\n          (click)=\"closeSettingsPanel()\">\n          <z-icon zType=\"lucideChevronLeft\" zSize=\"13\" class=\"shrink-0\" />\n          <span class=\"min-w-0 truncate whitespace-nowrap\">{{ 'i18n_z_ui_media_player_speed' | translate }}</span>\n        </button>\n        @for (speed of playbackSpeeds; track speed.value) {\n          <button\n            type=\"button\"\n            [id]=\"'z_media_player_speed_btn_' + speed.value\"\n            class=\"z-media-player-settings-item\"\n            [class.z-active]=\"playbackSpeed() === speed.value\"\n            (click)=\"setPlaybackSpeed(speed.value)\">\n            <span class=\"min-w-0 truncate whitespace-nowrap\">{{ speed.label | translate }}</span>\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["z-media-player{display:block;width:100%;outline:none}z-media-player:focus,z-media-player:focus-visible{outline:none}z-media-player video::cue{background-color:#080808d9;color:#fff;font-family:inherit;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.9);padding:4px 8px;border-radius:4px}z-media-player .z-flash-animation{animation:zUiFlashIcon .72s cubic-bezier(.2,.85,.25,1) forwards;will-change:opacity,transform,filter}z-media-player .z-flash-animation z-icon{width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center}z-media-player .z-flash-animation z-icon ng-icon,z-media-player .z-flash-animation z-icon svg{width:100%!important;height:100%!important}@media(min-width:640px){z-media-player .z-flash-animation z-icon{width:32px!important;height:32px!important}}@keyframes zUiFlashIcon{0%{filter:blur(2px);opacity:0;transform:scale(.72)}18%{filter:blur(0);opacity:.95;transform:scale(1)}58%{opacity:.9;transform:scale(1.04)}to{filter:blur(0);opacity:0;transform:scale(1.18)}}z-media-player .animate-fade-in{animation:zUiFadeIn .2s cubic-bezier(.16,1,.3,1)}@keyframes zUiFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}z-media-player .z-double-tap-ripple-left,z-media-player .z-double-tap-ripple-right{position:absolute;top:0;bottom:0;width:35%;display:flex;align-items:center;z-index:11;pointer-events:none}z-media-player .z-double-tap-ripple-left:before,z-media-player .z-double-tap-ripple-right:before{position:absolute;inset:0;content:\"\";opacity:0;animation-duration:.72s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,1,.5,1)}z-media-player .z-double-tap-ripple-left{left:0;justify-content:flex-start;padding-left:5%}z-media-player .z-double-tap-ripple-left:before{background:radial-gradient(circle at 0% 50%,#ffffff21,#fff0 70%);border-top-right-radius:100% 50%;border-bottom-right-radius:100% 50%;animation-name:zUiDoubleTapRippleLeft;transform-origin:left center}z-media-player .z-double-tap-ripple-left.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleLeftAlt}z-media-player .z-double-tap-ripple-right{right:0;justify-content:flex-end;padding-right:5%}z-media-player .z-double-tap-ripple-right:before{background:radial-gradient(circle at 100% 50%,#ffffff21,#fff0 70%);border-top-left-radius:100% 50%;border-bottom-left-radius:100% 50%;animation-name:zUiDoubleTapRippleRight;transform-origin:right center}z-media-player .z-double-tap-ripple-right.z-skip-pulse-alt:before{animation-name:zUiDoubleTapRippleRightAlt}z-media-player .z-skip-overlay-content{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;color:#fff;font-family:inherit;font-size:18px;font-weight:700;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.75);-webkit-user-select:none;user-select:none}z-media-player .z-skip-overlay-number{min-width:42px;animation:zUiSkipNumberBump .22s cubic-bezier(.2,.85,.25,1) forwards;text-align:center;transform-origin:center}z-media-player .z-skip-pulse-alt .z-skip-overlay-number{animation-name:zUiSkipNumberBumpAlt}z-media-player .z-skip-overlay-arrows{display:inline-flex;align-items:center;color:#fffffff2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}@keyframes zUiDoubleTapRippleLeft{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleLeftAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:left center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:left center}}@keyframes zUiDoubleTapRippleRight{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}@keyframes zUiDoubleTapRippleRightAlt{0%{opacity:0;transform:scaleX(.5);transform-origin:right center}15%{opacity:1}80%{opacity:1}to{opacity:0;transform:scaleX(1);transform-origin:right center}}z-media-player .z-chevron-slide-left{animation:zUiChevronSlideLeft .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-chevron-slide-right{animation:zUiChevronSlideRight .72s cubic-bezier(.25,1,.5,1) forwards}z-media-player .z-skip-pulse-alt .z-chevron-slide-left{animation-name:zUiChevronSlideLeftAlt}z-media-player .z-skip-pulse-alt .z-chevron-slide-right{animation-name:zUiChevronSlideRightAlt}@keyframes zUiSkipNumberBump{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiSkipNumberBumpAlt{0%{opacity:.78;transform:scale(.92)}55%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes zUiChevronSlideLeft{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRight{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}@keyframes zUiChevronSlideLeftAlt{0%{opacity:0;transform:translate(8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-12px)}}@keyframes zUiChevronSlideRightAlt{0%{opacity:0;transform:translate(-8px)}28%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(12px)}}z-media-player #z_media_player_volume_slider{-webkit-appearance:none;appearance:none;background:transparent}z-media-player #z_media_player_volume_slider::-webkit-slider-runnable-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#fff;height:10px;width:10px;border-radius:9999px;margin-top:-3.5px;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-webkit-slider-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}z-media-player #z_media_player_volume_slider::-moz-range-track{background:#ffffff40;height:3px;border-radius:9999px}z-media-player #z_media_player_volume_slider::-moz-range-thumb{background:#fff;height:10px;width:10px;border-radius:9999px;border:none;transition:transform .15s ease}z-media-player #z_media_player_volume_slider:hover::-moz-range-thumb,z-media-player #z_media_player_volume_slider:focus-visible::-moz-range-thumb{transform:scale(1.3)}.z-media-player-popover{backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;background-color:#0f0f0f99!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 15px 30px -10px #000c!important;border-radius:8px!important;padding:0!important;transform-origin:bottom right}.z-media-player-popover[data-state=open]{animation:zUiMediaSettingsPopoverIn .16s cubic-bezier(.2,.85,.25,1) forwards}.z-media-player-popover[data-state=closed]{animation:zUiMediaSettingsPopoverOut .16s cubic-bezier(.4,0,.2,1) forwards!important}.z-media-player-popover .bg-popover{background-color:transparent!important;color:#e4e4e7!important}.z-media-player-popover .z-media-player-settings{overflow:hidden;transform-origin:bottom right;animation:zUiMediaSettingsPanelIn .16s cubic-bezier(.2,.85,.25,1)}.z-media-player-popover .z-media-player-settings-panel{gap:4px;transform-origin:top right;animation:zUiMediaSettingsPanelIn .14s cubic-bezier(.2,.85,.25,1);will-change:opacity,transform}.z-media-player-popover .z-media-player-settings.z-main-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromLeft}.z-media-player-popover .z-media-player-settings.z-sub-panel .z-media-player-settings-panel{animation-name:zUiMediaSettingsPanelFromRight}.z-media-player-popover .z-media-player-settings-item,.z-media-player-popover .z-media-player-settings-back{position:relative;display:flex;width:100%;min-width:0;height:32px;min-height:32px;cursor:pointer;align-items:center;border:0;border-radius:4px;background-color:transparent;padding:0 8px;color:#e4e4e7;font-size:12px;font-weight:500;line-height:1;outline:none;transition:background-color .12s ease,color .12s ease}.z-media-player-popover .z-media-player-settings-item{justify-content:space-between;gap:12px;text-align:left}.z-media-player-popover .z-media-player-settings-item:before{position:absolute;top:7px;bottom:7px;left:0;width:2px;border-radius:9999px;background-color:#fff;content:\"\";opacity:0;transform:scaleY(.5);transition:opacity .12s ease,transform .12s ease}.z-media-player-popover .z-media-player-settings-item.z-active{background-color:#ffffff14;color:#fff;font-weight:600}.z-media-player-popover .z-media-player-settings-item.z-active:before{opacity:1;transform:scaleY(1)}.z-media-player-popover .z-media-player-settings-back{justify-content:flex-start;gap:8px;color:#f4f4f5;font-weight:600}.z-media-player-popover .z-media-player-settings-item:hover,.z-media-player-popover .z-media-player-settings-back:hover,.z-media-player-popover .z-media-player-settings-item:focus-visible,.z-media-player-popover .z-media-player-settings-back:focus-visible{background-color:#ffffff1a}.z-media-player-inline-settings{position:absolute;right:12px;bottom:64px;z-index:30}@keyframes zUiMediaSettingsPopoverIn{0%{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes zUiMediaSettingsPopoverOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(4px) scale(.96)}}@keyframes zUiMediaSettingsPanelIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes zUiMediaSettingsPanelFromRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes zUiMediaSettingsPanelFromLeft{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMediaPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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: {
                         '[class]': 'zClasses()',