@shival99/z-ui 2.0.48 → 2.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import * as i1 from '@angular/common';
|
|
1
2
|
import { CommonModule } from '@angular/common';
|
|
2
3
|
import * as i0 from '@angular/core';
|
|
3
4
|
import { inject, ElementRef, input, output, viewChild, signal, computed, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
|
-
import * as
|
|
5
|
+
import * as i2 from '@angular/forms';
|
|
5
6
|
import { FormsModule } from '@angular/forms';
|
|
6
7
|
import { TranslatePipe } from '@ngx-translate/core';
|
|
7
8
|
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
|
|
@@ -258,6 +259,14 @@ class ZMediaPlayerComponent {
|
|
|
258
259
|
this.closeSettingsPanel();
|
|
259
260
|
this.onMouseMove();
|
|
260
261
|
}
|
|
262
|
+
toggleInlineSettings() {
|
|
263
|
+
const nextVisible = !this.showSettings();
|
|
264
|
+
this.showSettings.set(nextVisible);
|
|
265
|
+
if (!nextVisible) {
|
|
266
|
+
this.closeSettingsPanel();
|
|
267
|
+
}
|
|
268
|
+
this.onMouseMove();
|
|
269
|
+
}
|
|
261
270
|
setQualitySource(source) {
|
|
262
271
|
if (source.src === this.effectiveSrc()) {
|
|
263
272
|
this.closeSettingsPanel();
|
|
@@ -321,6 +330,7 @@ class ZMediaPlayerComponent {
|
|
|
321
330
|
onFullscreenStateChange() {
|
|
322
331
|
const isFull = !!document.fullscreenElement;
|
|
323
332
|
this.isFullscreen.set(isFull);
|
|
333
|
+
this.onSettingsHidden();
|
|
324
334
|
this.zFullscreenChange.emit(isFull);
|
|
325
335
|
}
|
|
326
336
|
// Trình phát thu nhỏ (Picture-in-Picture)
|
|
@@ -636,7 +646,7 @@ class ZMediaPlayerComponent {
|
|
|
636
646
|
return `${minutes}:${formattedSeconds}`;
|
|
637
647
|
}
|
|
638
648
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMediaPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
639
|
-
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 <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\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<!-- 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}@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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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", "zShowArrow"], 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 });
|
|
649
|
+
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", "zShowArrow"], 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 });
|
|
640
650
|
}
|
|
641
651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMediaPlayerComponent, decorators: [{
|
|
642
652
|
type: Component,
|
|
@@ -647,7 +657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
|
|
|
647
657
|
'(mousemove)': 'onMouseMove()',
|
|
648
658
|
'(mouseleave)': 'onMouseLeave()',
|
|
649
659
|
'(document:fullscreenchange)': 'onFullscreenStateChange()',
|
|
650
|
-
}, 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 <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\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<!-- 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}@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"] }]
|
|
660
|
+
}, 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"] }]
|
|
651
661
|
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSrc", required: true }] }], zSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSources", required: false }] }], zPoster: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPoster", required: false }] }], zAutoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoplay", required: false }] }], zLoop: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoop", required: false }] }], zMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMuted", required: false }] }], zVolume: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVolume", required: false }] }], zSubtitles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSubtitles", required: false }] }], zPlay: [{ type: i0.Output, args: ["zPlay"] }], zTimeUpdate: [{ type: i0.Output, args: ["zTimeUpdate"] }], zVolumeChange: [{ type: i0.Output, args: ["zVolumeChange"] }], zFullscreenChange: [{ type: i0.Output, args: ["zFullscreenChange"] }], zTheaterModeChange: [{ type: i0.Output, args: ["zTheaterModeChange"] }], zMiniplayerChange: [{ type: i0.Output, args: ["zMiniplayerChange"] }], zQualityChange: [{ type: i0.Output, args: ["zQualityChange"] }], videoElement: [{ type: i0.ViewChild, args: ['videoElement', { isSignal: true }] }], timelineContainer: [{ type: i0.ViewChild, args: ['timelineContainer', { isSignal: true }] }] } });
|
|
652
662
|
|
|
653
663
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shival99-z-ui-components-z-media-player.mjs","sources":["../../../../libs/core-ui/components/z-media-player/z-media-player.variants.ts","../../../../libs/core-ui/components/z-media-player/z-media-player.component.ts","../../../../libs/core-ui/components/z-media-player/z-media-player.component.html","../../../../libs/core-ui/components/z-media-player/shival99-z-ui-components-z-media-player.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zMediaPlayerVariants = cva(\n 'relative overflow-hidden bg-black select-none transition-all duration-300 w-full flex flex-col justify-center items-center group/player outline-none',\n {\n variants: {\n zLayout: {\n default: 'aspect-video rounded-md shadow-md max-w-5xl mx-auto',\n theater: 'w-full aspect-[21/9] max-w-full',\n fullscreen: 'fixed inset-0 w-screen h-screen z-[9999] rounded-none max-w-full aspect-none',\n },\n },\n defaultVariants: {\n zLayout: 'default',\n },\n }\n);\n\nexport type ZMediaPlayerVariants = VariantProps<typeof zMediaPlayerVariants>;\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n inject,\n input,\n output,\n signal,\n computed,\n effect,\n viewChild,\n afterNextRender,\n OnDestroy,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZMediaPlayerSubtitleTrack, ZMediaPlayerPlaybackSpeed, ZMediaPlayerSource } from './z-media-player.types';\nimport { zMediaPlayerVariants, type ZMediaPlayerVariants } from './z-media-player.variants';\n\ninterface ZWebkitHTMLVideoElement extends HTMLVideoElement {\n webkitSupportsPresentationMode?(mode: 'inline' | 'picture-in-picture'): boolean;\n webkitPresentationMode?: 'inline' | 'picture-in-picture';\n webkitSetPresentationMode?(mode: 'inline' | 'picture-in-picture'): void;\n}\n\ninterface ZDocumentWithPiP extends Document {\n pictureInPictureEnabled: boolean;\n pictureInPictureElement: Element | null;\n exitPictureInPicture(): Promise<void>;\n}\n\ntype ZMediaPlayerSettingsPanel = 'main' | 'quality' | 'speed';\n\n@Component({\n selector: 'z-media-player',\n imports: [CommonModule, FormsModule, ZIconComponent, ZPopoverDirective, TranslatePipe, ZButtonComponent],\n standalone: true,\n templateUrl: './z-media-player.component.html',\n styleUrl: './z-media-player.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n '[attr.tabindex]': '0',\n '(keydown)': 'onKeyDown($event)',\n '(mousemove)': 'onMouseMove()',\n '(mouseleave)': 'onMouseLeave()',\n '(document:fullscreenchange)': 'onFullscreenStateChange()',\n },\n})\nexport class ZMediaPlayerComponent implements OnDestroy {\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n // Inputs\n public readonly class = input<ClassValue>('');\n public readonly zSrc = input.required<string>();\n public readonly zSources = input<ZMediaPlayerSource[]>([]);\n public readonly zPoster = input<string>('');\n public readonly zAutoplay = input(false);\n public readonly zLoop = input(false);\n public readonly zMuted = input(false);\n public readonly zVolume = input(1.0);\n public readonly zSubtitles = input<ZMediaPlayerSubtitleTrack[]>([]);\n\n // Outputs\n public readonly zPlay = output<boolean>();\n public readonly zTimeUpdate = output<number>();\n public readonly zVolumeChange = output<number>();\n public readonly zFullscreenChange = output<boolean>();\n public readonly zTheaterModeChange = output<boolean>();\n public readonly zMiniplayerChange = output<boolean>();\n public readonly zQualityChange = output<ZMediaPlayerSource>();\n\n // Element Refs sử dụng signal viewChild thay vì decorator\n public readonly videoElement = viewChild<ElementRef<HTMLVideoElement>>('videoElement');\n public readonly timelineContainer = viewChild<ElementRef<HTMLDivElement>>('timelineContainer');\n\n // Component Signals trạng thái trình phát\n protected readonly isPlaying = signal(false);\n protected readonly currentTime = signal(0);\n protected readonly duration = signal(0);\n protected readonly volume = signal(1.0);\n protected readonly isMuted = signal(false);\n protected readonly playbackSpeed = signal(1.0);\n protected readonly activeSourceSrc = signal<string | null>(null);\n protected readonly showControls = signal(true);\n protected readonly isBuffering = signal(false);\n protected readonly captionsEnabled = signal(false);\n protected readonly isTheaterMode = signal(false);\n protected readonly isFullscreen = signal(false);\n protected readonly isMiniplayer = signal(false);\n protected readonly showSettings = signal(false);\n protected readonly settingsPanel = signal<ZMediaPlayerSettingsPanel>('main');\n protected readonly isDragging = signal(false);\n\n // Tiến trình đệm và phát\n protected readonly bufferedProgress = signal(0);\n protected readonly progress = computed(() => {\n const dur = this.duration();\n if (dur === 0) {\n return 0;\n }\n return (this.currentTime() / dur) * 100;\n });\n\n // Trạng thái visual hiển thị\n protected readonly playPauseFlash = signal<'play' | 'pause' | null>(null);\n protected readonly hoverTimeLabel = signal<string | null>(null);\n protected readonly hoverX = signal(0);\n\n // Lớp phủ tua nhanh nhảy số cộng dồn kiểu YouTube\n protected readonly skipOverlayDirection = signal<'left' | 'right' | null>(null);\n protected readonly skipOverlayValue = signal(0);\n protected readonly skipOverlayPulse = signal(0);\n\n // Kiểm tra trình duyệt hỗ trợ Picture-in-Picture\n protected readonly isPiPSupported = computed(() => {\n if (typeof document === 'undefined') {\n return false;\n }\n const doc = document as ZDocumentWithPiP;\n const hasPiP = doc.pictureInPictureEnabled;\n const hasRequestPiP =\n typeof HTMLVideoElement !== 'undefined' && 'requestPictureInPicture' in HTMLVideoElement.prototype;\n if (hasPiP && hasRequestPiP) {\n return true;\n }\n const video = this.videoElement()?.nativeElement;\n if (video) {\n const hasWebkit =\n 'webkitSupportsPresentationMode' in video &&\n typeof (video as ZWebkitHTMLVideoElement).webkitSupportsPresentationMode === 'function' &&\n (video as ZWebkitHTMLVideoElement).webkitSupportsPresentationMode!('picture-in-picture');\n return !!hasWebkit;\n }\n const hasWebkitProto =\n typeof HTMLVideoElement !== 'undefined' &&\n 'webkitSupportsPresentationMode' in HTMLVideoElement.prototype &&\n 'webkitSetPresentationMode' in HTMLVideoElement.prototype;\n return hasWebkitProto;\n });\n\n // Danh sách các tốc độ phát video\n protected readonly playbackSpeeds: readonly ZMediaPlayerPlaybackSpeed[] = [\n { label: '0.25x', value: 0.25 },\n { label: '0.5x', value: 0.5 },\n { label: '0.75x', value: 0.75 },\n { label: 'i18n_z_ui_media_player_normal', value: 1.0 },\n { label: '1.25x', value: 1.25 },\n { label: '1.5x', value: 1.5 },\n { label: '2.0x', value: 2.0 },\n ];\n\n // Lưu trữ Timer ẩn thanh điều khiển và điều hướng\n private _controlsTimeout: ReturnType<typeof setTimeout> | null = null;\n private _flashTimeout: ReturnType<typeof setTimeout> | null = null;\n private _skipOverlayTimeout: ReturnType<typeof setTimeout> | null = null;\n private _clickTimeout: ReturnType<typeof setTimeout> | null = null;\n private _accumulatedSkip = 0;\n\n // Cập nhật CVA class dựa trên các trạng thái giao diện\n protected readonly zClasses = computed(() => {\n let layout: ZMediaPlayerVariants['zLayout'] = 'default';\n if (this.isTheaterMode()) {\n layout = 'theater';\n }\n if (this.isFullscreen()) {\n layout = 'fullscreen';\n }\n\n return zMergeClasses(zMediaPlayerVariants({ zLayout: layout }), this.class());\n });\n\n // Nhãn thời gian hiển thị computed signals\n protected readonly currentTimeLabel = computed(() => this._formatTime(this.currentTime()));\n protected readonly durationLabel = computed(() => this._formatTime(this.duration()));\n protected readonly effectiveSrc = computed(() => this.activeSourceSrc() ?? this.zSrc());\n protected readonly qualitySources = computed(() => this.zSources().filter(source => !!source.src));\n protected readonly activeQualityLabel = computed(() => {\n const activeSrc = this.effectiveSrc();\n return this.qualitySources().find(source => source.src === activeSrc)?.label ?? 'Auto';\n });\n\n constructor() {\n effect(() => {\n const fallbackSrc = this.zSrc();\n const sources = this.qualitySources();\n const currentSrc = this.activeSourceSrc();\n if (currentSrc && (currentSrc === fallbackSrc || sources.some(source => source.src === currentSrc))) {\n return;\n }\n\n this.activeSourceSrc.set(sources[0]?.src ?? fallbackSrc);\n });\n\n effect(() => {\n const src = this.effectiveSrc();\n const video = this.videoElement()?.nativeElement;\n if (video) {\n if (video.src !== src) {\n video.src = src;\n }\n video.load();\n }\n });\n\n afterNextRender(() => {\n this._initializeVideoState();\n });\n }\n\n ngOnDestroy(): void {\n if (this._controlsTimeout) {\n clearTimeout(this._controlsTimeout);\n }\n if (this._flashTimeout) {\n clearTimeout(this._flashTimeout);\n }\n if (this._skipOverlayTimeout) {\n clearTimeout(this._skipOverlayTimeout);\n }\n if (this._clickTimeout) {\n clearTimeout(this._clickTimeout);\n }\n }\n\n // Khởi tạo trạng thái âm lượng và tắt tiếng khi bắt đầu render\n private _initializeVideoState(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.volume = this.zVolume();\n this.volume.set(this.zVolume());\n\n video.muted = this.zMuted();\n this.isMuted.set(this.zMuted());\n\n this._resetControlsTimer();\n }\n\n // Thay đổi trạng thái Phát / Tạm dừng\n protected togglePlay(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n if (video.paused) {\n video.play().catch(console.error);\n this._triggerFlashIcon('play');\n return;\n }\n\n video.pause();\n this._triggerFlashIcon('pause');\n }\n\n // Kích hoạt flash icon giữa màn hình\n private _triggerFlashIcon(type: 'play' | 'pause'): void {\n if (this._flashTimeout) {\n clearTimeout(this._flashTimeout);\n }\n\n this.playPauseFlash.set(type);\n this._flashTimeout = setTimeout(() => {\n this.playPauseFlash.set(null);\n }, 500);\n }\n\n // Bật / tắt tiếng (Mute)\n protected toggleMute(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const nextMuted = !video.muted;\n video.muted = nextMuted;\n this.isMuted.set(nextMuted);\n this.zVolumeChange.emit(nextMuted ? 0 : this.volume());\n }\n\n // Điều chỉnh mức âm lượng từ slider\n protected onVolumeChange(val: number): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.volume = val;\n this.volume.set(val);\n\n const isSilent = val === 0;\n video.muted = isSilent;\n this.isMuted.set(isSilent);\n\n this.zVolumeChange.emit(val);\n }\n\n // Đặt tốc độ phát video\n protected setPlaybackSpeed(speed: number): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.playbackRate = speed;\n this.playbackSpeed.set(speed);\n this.closeSettingsPanel();\n }\n\n protected openSettingsPanel(panel: ZMediaPlayerSettingsPanel): void {\n this.settingsPanel.set(panel);\n }\n\n protected closeSettingsPanel(): void {\n this.settingsPanel.set('main');\n }\n\n protected onSettingsHidden(): void {\n this.showSettings.set(false);\n this.closeSettingsPanel();\n this.onMouseMove();\n }\n\n protected setQualitySource(source: ZMediaPlayerSource): void {\n if (source.src === this.effectiveSrc()) {\n this.closeSettingsPanel();\n return;\n }\n\n const video = this.videoElement()?.nativeElement;\n const current = video?.currentTime ?? this.currentTime();\n const shouldResume = !!video && !video.paused;\n const playbackRate = video?.playbackRate ?? this.playbackSpeed();\n\n if (video) {\n let didResume = false;\n const restorePosition = () => {\n const safeTime = Number.isFinite(video.duration) ? Math.min(current, video.duration) : current;\n video.playbackRate = playbackRate;\n video.currentTime = safeTime;\n this.currentTime.set(safeTime);\n if (shouldResume && !didResume) {\n didResume = true;\n video.play().catch(console.error);\n }\n };\n\n video.addEventListener('loadedmetadata', restorePosition, { once: true });\n video.addEventListener('loadeddata', restorePosition, { once: true });\n }\n\n this.activeSourceSrc.set(source.src);\n this.bufferedProgress.set(0);\n this.zQualityChange.emit(source);\n this.closeSettingsPanel();\n }\n\n // Tua đến mốc thời gian chỉ định\n protected seekTo(time: number): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.currentTime = time;\n this.currentTime.set(time);\n }\n\n // Bật/tắt chế độ rạp phim (Theater Mode)\n protected toggleTheaterMode(): void {\n if (this.isFullscreen()) {\n return;\n }\n\n const nextState = !this.isTheaterMode();\n this.isTheaterMode.set(nextState);\n this.zTheaterModeChange.emit(nextState);\n }\n\n // Bật/tắt chế độ toàn màn hình\n protected toggleFullscreen(): void {\n const wrapper = this._elementRef.nativeElement;\n if (!wrapper) {\n return;\n }\n\n if (document.fullscreenElement) {\n document.exitFullscreen().catch(console.error);\n return;\n }\n\n wrapper.requestFullscreen().catch(console.error);\n }\n\n // Lắng nghe sự kiện thay đổi fullscreen (liên kết qua host property của component)\n protected onFullscreenStateChange(): void {\n const isFull = !!document.fullscreenElement;\n this.isFullscreen.set(isFull);\n this.zFullscreenChange.emit(isFull);\n }\n\n // Trình phát thu nhỏ (Picture-in-Picture)\n protected async toggleMiniplayer(): Promise<void> {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n try {\n const doc = document as ZDocumentWithPiP;\n if (doc.pictureInPictureEnabled && typeof video.requestPictureInPicture === 'function') {\n if (doc.pictureInPictureElement) {\n await doc.exitPictureInPicture();\n this.isMiniplayer.set(false);\n this.zMiniplayerChange.emit(false);\n return;\n }\n\n await video.requestPictureInPicture();\n this.isMiniplayer.set(true);\n this.zMiniplayerChange.emit(true);\n return;\n }\n\n const webkitVideo = video as ZWebkitHTMLVideoElement;\n if (\n 'webkitSupportsPresentationMode' in webkitVideo &&\n typeof webkitVideo.webkitSupportsPresentationMode === 'function' &&\n webkitVideo.webkitSupportsPresentationMode('picture-in-picture')\n ) {\n const currentMode = webkitVideo.webkitPresentationMode;\n const targetMode = currentMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture';\n webkitVideo.webkitSetPresentationMode!(targetMode);\n const isPiP = targetMode === 'picture-in-picture';\n this.isMiniplayer.set(isPiP);\n this.zMiniplayerChange.emit(isPiP);\n }\n } catch (err) {\n console.warn('Picture-in-Picture API error: ', err);\n }\n }\n\n protected onEnterPiP(): void {\n this.isMiniplayer.set(true);\n this.zMiniplayerChange.emit(true);\n }\n\n protected onLeavePiP(): void {\n this.isMiniplayer.set(false);\n this.zMiniplayerChange.emit(false);\n }\n\n protected onWebkitPresentationModeChanged(): void {\n const video = this.videoElement()?.nativeElement;\n if (video) {\n const isPiP = (video as ZWebkitHTMLVideoElement).webkitPresentationMode === 'picture-in-picture';\n this.isMiniplayer.set(isPiP);\n this.zMiniplayerChange.emit(isPiP);\n }\n }\n\n // Bật/tắt hiển thị phụ đề (CC)\n protected toggleSubtitles(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const tracks = video.textTracks;\n const currentEnabled = this.captionsEnabled();\n const targetState = !currentEnabled;\n\n this.captionsEnabled.set(targetState);\n\n let i = 0;\n while (i < tracks.length) {\n tracks[i].mode = targetState ? 'showing' : 'disabled';\n i++;\n }\n }\n\n // Cập nhật trạng thái khi video phát/dừng\n protected onPlayStateChange(playing: boolean): void {\n this.isPlaying.set(playing);\n this.zPlay.emit(playing);\n this._resetControlsTimer();\n }\n\n // Cập nhật mốc thời gian phát\n protected onTimeUpdate(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video || this.isDragging()) {\n return;\n }\n\n this.currentTime.set(video.currentTime);\n this.zTimeUpdate.emit(video.currentTime);\n this.updateBufferedProgress();\n }\n\n protected onDurationChange(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n this.duration.set(video.duration);\n }\n\n protected onSeeking(seeking: boolean): void {\n this.isBuffering.set(seeking);\n }\n\n protected updateBufferedProgress(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video || video.buffered.length === 0 || this.duration() === 0) {\n return;\n }\n\n const end = video.buffered.end(video.buffered.length - 1);\n this.bufferedProgress.set((end / this.duration()) * 100);\n }\n\n // Bắt đầu kéo thanh timeline phát\n protected onTimelineDragStart(event: MouseEvent): void {\n event.preventDefault();\n this.isDragging.set(true);\n this._updateTimeFromCoords(event);\n\n const moveHandler = (moveEvent: MouseEvent) => {\n this._updateTimeFromCoords(moveEvent);\n };\n\n const upHandler = () => {\n this.isDragging.set(false);\n document.removeEventListener('mousemove', moveHandler);\n document.removeEventListener('mouseup', upHandler);\n this._resetControlsTimer();\n };\n\n document.addEventListener('mousemove', moveHandler);\n document.addEventListener('mouseup', upHandler);\n }\n\n protected onTimelineHover(event: MouseEvent): void {\n const container = this.timelineContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n const rect = container.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n this.hoverX.set(offsetX);\n\n const ratio = Math.max(0, Math.min(1, offsetX / rect.width));\n const hoverTime = ratio * this.duration();\n this.hoverTimeLabel.set(this._formatTime(hoverTime));\n }\n\n protected onTimelineHoverEnd(): void {\n this.hoverTimeLabel.set(null);\n }\n\n private _updateTimeFromCoords(event: MouseEvent): void {\n const container = this.timelineContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n const rect = container.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const { width } = rect;\n let ratio = offsetX / width;\n\n if (ratio < 0) {\n ratio = 0;\n }\n if (ratio > 1) {\n ratio = 1;\n }\n\n const targetTime = ratio * this.duration();\n const video = this.videoElement()?.nativeElement;\n if (video) {\n video.currentTime = targetTime;\n this.currentTime.set(targetTime);\n }\n }\n\n // Tải lại bộ đếm thời gian ẩn controls\n protected onMouseMove(): void {\n this._resetControlsTimer();\n }\n\n protected onMouseLeave(): void {\n const video = this.videoElement()?.nativeElement;\n if (video && !video.paused && !this.isDragging() && !this.showSettings()) {\n this.showControls.set(false);\n }\n }\n\n private _resetControlsTimer(): void {\n this.showControls.set(true);\n\n if (this._controlsTimeout) {\n clearTimeout(this._controlsTimeout);\n }\n\n const video = this.videoElement()?.nativeElement;\n if (video && !video.paused && !this.showSettings() && !this.isDragging()) {\n this._controlsTimeout = setTimeout(() => {\n this.showControls.set(false);\n }, 3000);\n }\n }\n\n // Xử lý sự kiện click phân biệt Single-click và Double-click\n protected onVideoClick(event: MouseEvent): void {\n if (this._clickTimeout) {\n clearTimeout(this._clickTimeout);\n this._clickTimeout = null;\n this._handleVideoDoubleClick(event);\n return;\n }\n\n this._clickTimeout = setTimeout(() => {\n this._clickTimeout = null;\n this.togglePlay();\n }, 250);\n }\n\n private _handleVideoDoubleClick(event: MouseEvent): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const rect = video.getBoundingClientRect();\n const clickX = event.clientX - rect.left;\n const isLeftHalf = clickX < rect.width / 2;\n\n if (isLeftHalf) {\n this.seekTo(Math.max(0, video.currentTime - 10));\n this._triggerSkipOverlay(10, 'left');\n return;\n }\n\n this.seekTo(Math.min(this.duration(), video.currentTime + 10));\n this._triggerSkipOverlay(10, 'right');\n }\n\n // Kích hoạt overlay tua nhanh cộng dồn\n protected triggerSkip(seconds: number, direction: 'left' | 'right'): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n if (direction === 'left') {\n this.seekTo(Math.max(0, video.currentTime - seconds));\n }\n if (direction === 'right') {\n this.seekTo(Math.min(this.duration(), video.currentTime + seconds));\n }\n\n this._triggerSkipOverlay(seconds, direction);\n }\n\n private _triggerSkipOverlay(seconds: number, direction: 'left' | 'right'): void {\n if (this._skipOverlayTimeout) {\n clearTimeout(this._skipOverlayTimeout);\n }\n\n this._accumulatedSkip += Math.abs(seconds);\n this.skipOverlayDirection.set(direction);\n this.skipOverlayValue.set(this._accumulatedSkip);\n this.skipOverlayPulse.update(value => value + 1);\n\n this._skipOverlayTimeout = setTimeout(() => {\n this.skipOverlayDirection.set(null);\n this.skipOverlayValue.set(0);\n this._accumulatedSkip = 0;\n }, 800);\n }\n\n // Bắt sự kiện phím tắt điều khiển\n protected onKeyDown(event: KeyboardEvent): void {\n const activeEl = document.activeElement;\n if (\n activeEl &&\n (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.hasAttribute('contenteditable'))\n ) {\n return;\n }\n\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const key = event.key.toLowerCase();\n\n if (key === ' ' || key === 'arrowup' || key === 'arrowdown' || key === 'arrowleft' || key === 'arrowright') {\n event.preventDefault();\n }\n\n if (key === ' ' || key === 'k') {\n this.togglePlay();\n return;\n }\n if (key === 'm') {\n this.toggleMute();\n return;\n }\n if (key === 'f') {\n this.toggleFullscreen();\n return;\n }\n if (key === 't') {\n this.toggleTheaterMode();\n return;\n }\n if (key === 'i') {\n void this.toggleMiniplayer();\n return;\n }\n if (key === 'arrowleft' || key === 'j') {\n const skipSec = key === 'j' ? 10 : 5;\n this.triggerSkip(skipSec, 'left');\n return;\n }\n if (key === 'arrowright' || key === 'l') {\n const skipSec = key === 'l' ? 10 : 5;\n this.triggerSkip(skipSec, 'right');\n return;\n }\n if (key === 'arrowup') {\n this.onVolumeChange(Math.min(1.0, this.volume() + 0.05));\n return;\n }\n if (key === 'arrowdown') {\n this.onVolumeChange(Math.max(0, this.volume() - 0.05));\n return;\n }\n if (event.key >= '0' && event.key <= '9') {\n const numPercent = Number(event.key) * 10;\n this.seekTo((numPercent / 100) * this.duration());\n return;\n }\n }\n\n protected toggleSettings(): void {\n this.showSettings.set(!this.showSettings());\n }\n\n // Định dạng hiển thị m:ss / h:mm:ss\n private _formatTime(time: number): string {\n if (Number.isNaN(time) || time === Infinity || time < 0) {\n return '0:00';\n }\n\n const hours = Math.floor(time / 3600);\n const minutes = Math.floor((time % 3600) / 60);\n const seconds = Math.floor(time % 60);\n\n const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;\n\n if (hours > 0) {\n const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;\n return `${hours}:${formattedMinutes}:${formattedSeconds}`;\n }\n\n return `${minutes}:${formattedSeconds}`;\n }\n}\n","<!-- Thẻ video chính phát nguồn 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ớp phủ vòng xoay loading khi video đang 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ệu ứng nhấp nháy Play/Pause lớn giữa màn hình tương tự 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ớp phủ tua nhanh nhảy số cộng dồn Trái (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ớp phủ tua nhanh nhảy số cộng dồn Phải (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ớp phủ chứa thanh điều khiển (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ùy chỉnh kiểu 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ền xám của 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ến trình tải buffer của video -->\n <div class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\" [style.width.%]=\"bufferedProgress()\"></div>\n <!-- Tiến trình phát hiện tại của video -->\n <div class=\"absolute top-0 left-0 h-full rounded-full bg-red-600\" [style.width.%]=\"progress()\"></div>\n </div>\n\n <!-- Đầu kéo timeline (Thumb) đỏ chỉ hiển thị khi hover hoặc kéo -->\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ển thị mốc thời 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àng chứa các nút bấm điều khiển chức năng -->\n <div class=\"pointer-events-auto flex items-center justify-between text-sm text-white\">\n <!-- Các nút điều khiển phía bên trái -->\n <div class=\"flex items-center gap-2\">\n <!-- Nút Phát / Tạm dừng -->\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út Tua lùi 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ùi 5 giây (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út Tua tiến 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ến 5 giây (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ổ hợp nút Mute và Slider âm lượng trượt 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ượt âm lượng trượt ngang mở rộng 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ển thị thời gian phát (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ác nút điều khiển phía bên phải -->\n <div class=\"flex items-center gap-1.5\">\n <!-- Nút mở trình đơn Cài đặt bằng ZPopoverDirective -->\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út Miniplayer (Picture-in-Picture) - Ẩn hoặc disable nếu browser ko hỗ trợ -->\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út bật/tắt chế độ rạp chiếu 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út bật/tắt chế độ toàn màn hình (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<!-- Template cấu hình Popover cài đặt sử dụng 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"shival99-z-ui-components-z-media-player.mjs","sources":["../../../../libs/core-ui/components/z-media-player/z-media-player.variants.ts","../../../../libs/core-ui/components/z-media-player/z-media-player.component.ts","../../../../libs/core-ui/components/z-media-player/z-media-player.component.html","../../../../libs/core-ui/components/z-media-player/shival99-z-ui-components-z-media-player.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zMediaPlayerVariants = cva(\n 'relative overflow-hidden bg-black select-none transition-all duration-300 w-full flex flex-col justify-center items-center group/player outline-none',\n {\n variants: {\n zLayout: {\n default: 'aspect-video rounded-md shadow-md max-w-5xl mx-auto',\n theater: 'w-full aspect-[21/9] max-w-full',\n fullscreen: 'fixed inset-0 w-screen h-screen z-[9999] rounded-none max-w-full aspect-none',\n },\n },\n defaultVariants: {\n zLayout: 'default',\n },\n }\n);\n\nexport type ZMediaPlayerVariants = VariantProps<typeof zMediaPlayerVariants>;\n","import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n inject,\n input,\n output,\n signal,\n computed,\n effect,\n viewChild,\n afterNextRender,\n OnDestroy,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZMediaPlayerSubtitleTrack, ZMediaPlayerPlaybackSpeed, ZMediaPlayerSource } from './z-media-player.types';\nimport { zMediaPlayerVariants, type ZMediaPlayerVariants } from './z-media-player.variants';\n\ninterface ZWebkitHTMLVideoElement extends HTMLVideoElement {\n webkitSupportsPresentationMode?(mode: 'inline' | 'picture-in-picture'): boolean;\n webkitPresentationMode?: 'inline' | 'picture-in-picture';\n webkitSetPresentationMode?(mode: 'inline' | 'picture-in-picture'): void;\n}\n\ninterface ZDocumentWithPiP extends Document {\n pictureInPictureEnabled: boolean;\n pictureInPictureElement: Element | null;\n exitPictureInPicture(): Promise<void>;\n}\n\ntype ZMediaPlayerSettingsPanel = 'main' | 'quality' | 'speed';\n\n@Component({\n selector: 'z-media-player',\n imports: [CommonModule, FormsModule, ZIconComponent, ZPopoverDirective, TranslatePipe, ZButtonComponent],\n standalone: true,\n templateUrl: './z-media-player.component.html',\n styleUrl: './z-media-player.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'zClasses()',\n '[attr.tabindex]': '0',\n '(keydown)': 'onKeyDown($event)',\n '(mousemove)': 'onMouseMove()',\n '(mouseleave)': 'onMouseLeave()',\n '(document:fullscreenchange)': 'onFullscreenStateChange()',\n },\n})\nexport class ZMediaPlayerComponent implements OnDestroy {\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n // Inputs\n public readonly class = input<ClassValue>('');\n public readonly zSrc = input.required<string>();\n public readonly zSources = input<ZMediaPlayerSource[]>([]);\n public readonly zPoster = input<string>('');\n public readonly zAutoplay = input(false);\n public readonly zLoop = input(false);\n public readonly zMuted = input(false);\n public readonly zVolume = input(1.0);\n public readonly zSubtitles = input<ZMediaPlayerSubtitleTrack[]>([]);\n\n // Outputs\n public readonly zPlay = output<boolean>();\n public readonly zTimeUpdate = output<number>();\n public readonly zVolumeChange = output<number>();\n public readonly zFullscreenChange = output<boolean>();\n public readonly zTheaterModeChange = output<boolean>();\n public readonly zMiniplayerChange = output<boolean>();\n public readonly zQualityChange = output<ZMediaPlayerSource>();\n\n // Element Refs sử dụng signal viewChild thay vì decorator\n public readonly videoElement = viewChild<ElementRef<HTMLVideoElement>>('videoElement');\n public readonly timelineContainer = viewChild<ElementRef<HTMLDivElement>>('timelineContainer');\n\n // Component Signals trạng thái trình phát\n protected readonly isPlaying = signal(false);\n protected readonly currentTime = signal(0);\n protected readonly duration = signal(0);\n protected readonly volume = signal(1.0);\n protected readonly isMuted = signal(false);\n protected readonly playbackSpeed = signal(1.0);\n protected readonly activeSourceSrc = signal<string | null>(null);\n protected readonly showControls = signal(true);\n protected readonly isBuffering = signal(false);\n protected readonly captionsEnabled = signal(false);\n protected readonly isTheaterMode = signal(false);\n protected readonly isFullscreen = signal(false);\n protected readonly isMiniplayer = signal(false);\n protected readonly showSettings = signal(false);\n protected readonly settingsPanel = signal<ZMediaPlayerSettingsPanel>('main');\n protected readonly isDragging = signal(false);\n\n // Tiến trình đệm và phát\n protected readonly bufferedProgress = signal(0);\n protected readonly progress = computed(() => {\n const dur = this.duration();\n if (dur === 0) {\n return 0;\n }\n return (this.currentTime() / dur) * 100;\n });\n\n // Trạng thái visual hiển thị\n protected readonly playPauseFlash = signal<'play' | 'pause' | null>(null);\n protected readonly hoverTimeLabel = signal<string | null>(null);\n protected readonly hoverX = signal(0);\n\n // Lớp phủ tua nhanh nhảy số cộng dồn kiểu YouTube\n protected readonly skipOverlayDirection = signal<'left' | 'right' | null>(null);\n protected readonly skipOverlayValue = signal(0);\n protected readonly skipOverlayPulse = signal(0);\n\n // Kiểm tra trình duyệt hỗ trợ Picture-in-Picture\n protected readonly isPiPSupported = computed(() => {\n if (typeof document === 'undefined') {\n return false;\n }\n const doc = document as ZDocumentWithPiP;\n const hasPiP = doc.pictureInPictureEnabled;\n const hasRequestPiP =\n typeof HTMLVideoElement !== 'undefined' && 'requestPictureInPicture' in HTMLVideoElement.prototype;\n if (hasPiP && hasRequestPiP) {\n return true;\n }\n const video = this.videoElement()?.nativeElement;\n if (video) {\n const hasWebkit =\n 'webkitSupportsPresentationMode' in video &&\n typeof (video as ZWebkitHTMLVideoElement).webkitSupportsPresentationMode === 'function' &&\n (video as ZWebkitHTMLVideoElement).webkitSupportsPresentationMode!('picture-in-picture');\n return !!hasWebkit;\n }\n const hasWebkitProto =\n typeof HTMLVideoElement !== 'undefined' &&\n 'webkitSupportsPresentationMode' in HTMLVideoElement.prototype &&\n 'webkitSetPresentationMode' in HTMLVideoElement.prototype;\n return hasWebkitProto;\n });\n\n // Danh sách các tốc độ phát video\n protected readonly playbackSpeeds: readonly ZMediaPlayerPlaybackSpeed[] = [\n { label: '0.25x', value: 0.25 },\n { label: '0.5x', value: 0.5 },\n { label: '0.75x', value: 0.75 },\n { label: 'i18n_z_ui_media_player_normal', value: 1.0 },\n { label: '1.25x', value: 1.25 },\n { label: '1.5x', value: 1.5 },\n { label: '2.0x', value: 2.0 },\n ];\n\n // Lưu trữ Timer ẩn thanh điều khiển và điều hướng\n private _controlsTimeout: ReturnType<typeof setTimeout> | null = null;\n private _flashTimeout: ReturnType<typeof setTimeout> | null = null;\n private _skipOverlayTimeout: ReturnType<typeof setTimeout> | null = null;\n private _clickTimeout: ReturnType<typeof setTimeout> | null = null;\n private _accumulatedSkip = 0;\n\n // Cập nhật CVA class dựa trên các trạng thái giao diện\n protected readonly zClasses = computed(() => {\n let layout: ZMediaPlayerVariants['zLayout'] = 'default';\n if (this.isTheaterMode()) {\n layout = 'theater';\n }\n if (this.isFullscreen()) {\n layout = 'fullscreen';\n }\n\n return zMergeClasses(zMediaPlayerVariants({ zLayout: layout }), this.class());\n });\n\n // Nhãn thời gian hiển thị computed signals\n protected readonly currentTimeLabel = computed(() => this._formatTime(this.currentTime()));\n protected readonly durationLabel = computed(() => this._formatTime(this.duration()));\n protected readonly effectiveSrc = computed(() => this.activeSourceSrc() ?? this.zSrc());\n protected readonly qualitySources = computed(() => this.zSources().filter(source => !!source.src));\n protected readonly activeQualityLabel = computed(() => {\n const activeSrc = this.effectiveSrc();\n return this.qualitySources().find(source => source.src === activeSrc)?.label ?? 'Auto';\n });\n\n constructor() {\n effect(() => {\n const fallbackSrc = this.zSrc();\n const sources = this.qualitySources();\n const currentSrc = this.activeSourceSrc();\n if (currentSrc && (currentSrc === fallbackSrc || sources.some(source => source.src === currentSrc))) {\n return;\n }\n\n this.activeSourceSrc.set(sources[0]?.src ?? fallbackSrc);\n });\n\n effect(() => {\n const src = this.effectiveSrc();\n const video = this.videoElement()?.nativeElement;\n if (video) {\n if (video.src !== src) {\n video.src = src;\n }\n video.load();\n }\n });\n\n afterNextRender(() => {\n this._initializeVideoState();\n });\n }\n\n ngOnDestroy(): void {\n if (this._controlsTimeout) {\n clearTimeout(this._controlsTimeout);\n }\n if (this._flashTimeout) {\n clearTimeout(this._flashTimeout);\n }\n if (this._skipOverlayTimeout) {\n clearTimeout(this._skipOverlayTimeout);\n }\n if (this._clickTimeout) {\n clearTimeout(this._clickTimeout);\n }\n }\n\n // Khởi tạo trạng thái âm lượng và tắt tiếng khi bắt đầu render\n private _initializeVideoState(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.volume = this.zVolume();\n this.volume.set(this.zVolume());\n\n video.muted = this.zMuted();\n this.isMuted.set(this.zMuted());\n\n this._resetControlsTimer();\n }\n\n // Thay đổi trạng thái Phát / Tạm dừng\n protected togglePlay(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n if (video.paused) {\n video.play().catch(console.error);\n this._triggerFlashIcon('play');\n return;\n }\n\n video.pause();\n this._triggerFlashIcon('pause');\n }\n\n // Kích hoạt flash icon giữa màn hình\n private _triggerFlashIcon(type: 'play' | 'pause'): void {\n if (this._flashTimeout) {\n clearTimeout(this._flashTimeout);\n }\n\n this.playPauseFlash.set(type);\n this._flashTimeout = setTimeout(() => {\n this.playPauseFlash.set(null);\n }, 500);\n }\n\n // Bật / tắt tiếng (Mute)\n protected toggleMute(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const nextMuted = !video.muted;\n video.muted = nextMuted;\n this.isMuted.set(nextMuted);\n this.zVolumeChange.emit(nextMuted ? 0 : this.volume());\n }\n\n // Điều chỉnh mức âm lượng từ slider\n protected onVolumeChange(val: number): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.volume = val;\n this.volume.set(val);\n\n const isSilent = val === 0;\n video.muted = isSilent;\n this.isMuted.set(isSilent);\n\n this.zVolumeChange.emit(val);\n }\n\n // Đặt tốc độ phát video\n protected setPlaybackSpeed(speed: number): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.playbackRate = speed;\n this.playbackSpeed.set(speed);\n this.closeSettingsPanel();\n }\n\n protected openSettingsPanel(panel: ZMediaPlayerSettingsPanel): void {\n this.settingsPanel.set(panel);\n }\n\n protected closeSettingsPanel(): void {\n this.settingsPanel.set('main');\n }\n\n protected onSettingsHidden(): void {\n this.showSettings.set(false);\n this.closeSettingsPanel();\n this.onMouseMove();\n }\n\n protected toggleInlineSettings(): void {\n const nextVisible = !this.showSettings();\n this.showSettings.set(nextVisible);\n if (!nextVisible) {\n this.closeSettingsPanel();\n }\n this.onMouseMove();\n }\n\n protected setQualitySource(source: ZMediaPlayerSource): void {\n if (source.src === this.effectiveSrc()) {\n this.closeSettingsPanel();\n return;\n }\n\n const video = this.videoElement()?.nativeElement;\n const current = video?.currentTime ?? this.currentTime();\n const shouldResume = !!video && !video.paused;\n const playbackRate = video?.playbackRate ?? this.playbackSpeed();\n\n if (video) {\n let didResume = false;\n const restorePosition = () => {\n const safeTime = Number.isFinite(video.duration) ? Math.min(current, video.duration) : current;\n video.playbackRate = playbackRate;\n video.currentTime = safeTime;\n this.currentTime.set(safeTime);\n if (shouldResume && !didResume) {\n didResume = true;\n video.play().catch(console.error);\n }\n };\n\n video.addEventListener('loadedmetadata', restorePosition, { once: true });\n video.addEventListener('loadeddata', restorePosition, { once: true });\n }\n\n this.activeSourceSrc.set(source.src);\n this.bufferedProgress.set(0);\n this.zQualityChange.emit(source);\n this.closeSettingsPanel();\n }\n\n // Tua đến mốc thời gian chỉ định\n protected seekTo(time: number): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n video.currentTime = time;\n this.currentTime.set(time);\n }\n\n // Bật/tắt chế độ rạp phim (Theater Mode)\n protected toggleTheaterMode(): void {\n if (this.isFullscreen()) {\n return;\n }\n\n const nextState = !this.isTheaterMode();\n this.isTheaterMode.set(nextState);\n this.zTheaterModeChange.emit(nextState);\n }\n\n // Bật/tắt chế độ toàn màn hình\n protected toggleFullscreen(): void {\n const wrapper = this._elementRef.nativeElement;\n if (!wrapper) {\n return;\n }\n\n if (document.fullscreenElement) {\n document.exitFullscreen().catch(console.error);\n return;\n }\n\n wrapper.requestFullscreen().catch(console.error);\n }\n\n // Lắng nghe sự kiện thay đổi fullscreen (liên kết qua host property của component)\n protected onFullscreenStateChange(): void {\n const isFull = !!document.fullscreenElement;\n this.isFullscreen.set(isFull);\n this.onSettingsHidden();\n this.zFullscreenChange.emit(isFull);\n }\n\n // Trình phát thu nhỏ (Picture-in-Picture)\n protected async toggleMiniplayer(): Promise<void> {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n try {\n const doc = document as ZDocumentWithPiP;\n if (doc.pictureInPictureEnabled && typeof video.requestPictureInPicture === 'function') {\n if (doc.pictureInPictureElement) {\n await doc.exitPictureInPicture();\n this.isMiniplayer.set(false);\n this.zMiniplayerChange.emit(false);\n return;\n }\n\n await video.requestPictureInPicture();\n this.isMiniplayer.set(true);\n this.zMiniplayerChange.emit(true);\n return;\n }\n\n const webkitVideo = video as ZWebkitHTMLVideoElement;\n if (\n 'webkitSupportsPresentationMode' in webkitVideo &&\n typeof webkitVideo.webkitSupportsPresentationMode === 'function' &&\n webkitVideo.webkitSupportsPresentationMode('picture-in-picture')\n ) {\n const currentMode = webkitVideo.webkitPresentationMode;\n const targetMode = currentMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture';\n webkitVideo.webkitSetPresentationMode!(targetMode);\n const isPiP = targetMode === 'picture-in-picture';\n this.isMiniplayer.set(isPiP);\n this.zMiniplayerChange.emit(isPiP);\n }\n } catch (err) {\n console.warn('Picture-in-Picture API error: ', err);\n }\n }\n\n protected onEnterPiP(): void {\n this.isMiniplayer.set(true);\n this.zMiniplayerChange.emit(true);\n }\n\n protected onLeavePiP(): void {\n this.isMiniplayer.set(false);\n this.zMiniplayerChange.emit(false);\n }\n\n protected onWebkitPresentationModeChanged(): void {\n const video = this.videoElement()?.nativeElement;\n if (video) {\n const isPiP = (video as ZWebkitHTMLVideoElement).webkitPresentationMode === 'picture-in-picture';\n this.isMiniplayer.set(isPiP);\n this.zMiniplayerChange.emit(isPiP);\n }\n }\n\n // Bật/tắt hiển thị phụ đề (CC)\n protected toggleSubtitles(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const tracks = video.textTracks;\n const currentEnabled = this.captionsEnabled();\n const targetState = !currentEnabled;\n\n this.captionsEnabled.set(targetState);\n\n let i = 0;\n while (i < tracks.length) {\n tracks[i].mode = targetState ? 'showing' : 'disabled';\n i++;\n }\n }\n\n // Cập nhật trạng thái khi video phát/dừng\n protected onPlayStateChange(playing: boolean): void {\n this.isPlaying.set(playing);\n this.zPlay.emit(playing);\n this._resetControlsTimer();\n }\n\n // Cập nhật mốc thời gian phát\n protected onTimeUpdate(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video || this.isDragging()) {\n return;\n }\n\n this.currentTime.set(video.currentTime);\n this.zTimeUpdate.emit(video.currentTime);\n this.updateBufferedProgress();\n }\n\n protected onDurationChange(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n this.duration.set(video.duration);\n }\n\n protected onSeeking(seeking: boolean): void {\n this.isBuffering.set(seeking);\n }\n\n protected updateBufferedProgress(): void {\n const video = this.videoElement()?.nativeElement;\n if (!video || video.buffered.length === 0 || this.duration() === 0) {\n return;\n }\n\n const end = video.buffered.end(video.buffered.length - 1);\n this.bufferedProgress.set((end / this.duration()) * 100);\n }\n\n // Bắt đầu kéo thanh timeline phát\n protected onTimelineDragStart(event: MouseEvent): void {\n event.preventDefault();\n this.isDragging.set(true);\n this._updateTimeFromCoords(event);\n\n const moveHandler = (moveEvent: MouseEvent) => {\n this._updateTimeFromCoords(moveEvent);\n };\n\n const upHandler = () => {\n this.isDragging.set(false);\n document.removeEventListener('mousemove', moveHandler);\n document.removeEventListener('mouseup', upHandler);\n this._resetControlsTimer();\n };\n\n document.addEventListener('mousemove', moveHandler);\n document.addEventListener('mouseup', upHandler);\n }\n\n protected onTimelineHover(event: MouseEvent): void {\n const container = this.timelineContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n const rect = container.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n this.hoverX.set(offsetX);\n\n const ratio = Math.max(0, Math.min(1, offsetX / rect.width));\n const hoverTime = ratio * this.duration();\n this.hoverTimeLabel.set(this._formatTime(hoverTime));\n }\n\n protected onTimelineHoverEnd(): void {\n this.hoverTimeLabel.set(null);\n }\n\n private _updateTimeFromCoords(event: MouseEvent): void {\n const container = this.timelineContainer()?.nativeElement;\n if (!container) {\n return;\n }\n\n const rect = container.getBoundingClientRect();\n const offsetX = event.clientX - rect.left;\n const { width } = rect;\n let ratio = offsetX / width;\n\n if (ratio < 0) {\n ratio = 0;\n }\n if (ratio > 1) {\n ratio = 1;\n }\n\n const targetTime = ratio * this.duration();\n const video = this.videoElement()?.nativeElement;\n if (video) {\n video.currentTime = targetTime;\n this.currentTime.set(targetTime);\n }\n }\n\n // Tải lại bộ đếm thời gian ẩn controls\n protected onMouseMove(): void {\n this._resetControlsTimer();\n }\n\n protected onMouseLeave(): void {\n const video = this.videoElement()?.nativeElement;\n if (video && !video.paused && !this.isDragging() && !this.showSettings()) {\n this.showControls.set(false);\n }\n }\n\n private _resetControlsTimer(): void {\n this.showControls.set(true);\n\n if (this._controlsTimeout) {\n clearTimeout(this._controlsTimeout);\n }\n\n const video = this.videoElement()?.nativeElement;\n if (video && !video.paused && !this.showSettings() && !this.isDragging()) {\n this._controlsTimeout = setTimeout(() => {\n this.showControls.set(false);\n }, 3000);\n }\n }\n\n // Xử lý sự kiện click phân biệt Single-click và Double-click\n protected onVideoClick(event: MouseEvent): void {\n if (this._clickTimeout) {\n clearTimeout(this._clickTimeout);\n this._clickTimeout = null;\n this._handleVideoDoubleClick(event);\n return;\n }\n\n this._clickTimeout = setTimeout(() => {\n this._clickTimeout = null;\n this.togglePlay();\n }, 250);\n }\n\n private _handleVideoDoubleClick(event: MouseEvent): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const rect = video.getBoundingClientRect();\n const clickX = event.clientX - rect.left;\n const isLeftHalf = clickX < rect.width / 2;\n\n if (isLeftHalf) {\n this.seekTo(Math.max(0, video.currentTime - 10));\n this._triggerSkipOverlay(10, 'left');\n return;\n }\n\n this.seekTo(Math.min(this.duration(), video.currentTime + 10));\n this._triggerSkipOverlay(10, 'right');\n }\n\n // Kích hoạt overlay tua nhanh cộng dồn\n protected triggerSkip(seconds: number, direction: 'left' | 'right'): void {\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n if (direction === 'left') {\n this.seekTo(Math.max(0, video.currentTime - seconds));\n }\n if (direction === 'right') {\n this.seekTo(Math.min(this.duration(), video.currentTime + seconds));\n }\n\n this._triggerSkipOverlay(seconds, direction);\n }\n\n private _triggerSkipOverlay(seconds: number, direction: 'left' | 'right'): void {\n if (this._skipOverlayTimeout) {\n clearTimeout(this._skipOverlayTimeout);\n }\n\n this._accumulatedSkip += Math.abs(seconds);\n this.skipOverlayDirection.set(direction);\n this.skipOverlayValue.set(this._accumulatedSkip);\n this.skipOverlayPulse.update(value => value + 1);\n\n this._skipOverlayTimeout = setTimeout(() => {\n this.skipOverlayDirection.set(null);\n this.skipOverlayValue.set(0);\n this._accumulatedSkip = 0;\n }, 800);\n }\n\n // Bắt sự kiện phím tắt điều khiển\n protected onKeyDown(event: KeyboardEvent): void {\n const activeEl = document.activeElement;\n if (\n activeEl &&\n (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' || activeEl.hasAttribute('contenteditable'))\n ) {\n return;\n }\n\n const video = this.videoElement()?.nativeElement;\n if (!video) {\n return;\n }\n\n const key = event.key.toLowerCase();\n\n if (key === ' ' || key === 'arrowup' || key === 'arrowdown' || key === 'arrowleft' || key === 'arrowright') {\n event.preventDefault();\n }\n\n if (key === ' ' || key === 'k') {\n this.togglePlay();\n return;\n }\n if (key === 'm') {\n this.toggleMute();\n return;\n }\n if (key === 'f') {\n this.toggleFullscreen();\n return;\n }\n if (key === 't') {\n this.toggleTheaterMode();\n return;\n }\n if (key === 'i') {\n void this.toggleMiniplayer();\n return;\n }\n if (key === 'arrowleft' || key === 'j') {\n const skipSec = key === 'j' ? 10 : 5;\n this.triggerSkip(skipSec, 'left');\n return;\n }\n if (key === 'arrowright' || key === 'l') {\n const skipSec = key === 'l' ? 10 : 5;\n this.triggerSkip(skipSec, 'right');\n return;\n }\n if (key === 'arrowup') {\n this.onVolumeChange(Math.min(1.0, this.volume() + 0.05));\n return;\n }\n if (key === 'arrowdown') {\n this.onVolumeChange(Math.max(0, this.volume() - 0.05));\n return;\n }\n if (event.key >= '0' && event.key <= '9') {\n const numPercent = Number(event.key) * 10;\n this.seekTo((numPercent / 100) * this.duration());\n return;\n }\n }\n\n protected toggleSettings(): void {\n this.showSettings.set(!this.showSettings());\n }\n\n // Định dạng hiển thị m:ss / h:mm:ss\n private _formatTime(time: number): string {\n if (Number.isNaN(time) || time === Infinity || time < 0) {\n return '0:00';\n }\n\n const hours = Math.floor(time / 3600);\n const minutes = Math.floor((time % 3600) / 60);\n const seconds = Math.floor(time % 60);\n\n const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;\n\n if (hours > 0) {\n const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;\n return `${hours}:${formattedMinutes}:${formattedSeconds}`;\n }\n\n return `${minutes}:${formattedSeconds}`;\n }\n}\n","<!-- Thẻ video chính phát nguồn 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ớp phủ vòng xoay loading khi video đang 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ệu ứng nhấp nháy Play/Pause lớn giữa màn hình tương tự 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ớp phủ tua nhanh nhảy số cộng dồn Trái (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ớp phủ tua nhanh nhảy số cộng dồn Phải (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ớp phủ chứa thanh điều khiển (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ùy chỉnh kiểu 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ền xám của 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ến trình tải buffer của video -->\n <div class=\"absolute top-0 left-0 h-full rounded-full bg-white/30\" [style.width.%]=\"bufferedProgress()\"></div>\n <!-- Tiến trình phát hiện tại của video -->\n <div class=\"absolute top-0 left-0 h-full rounded-full bg-red-600\" [style.width.%]=\"progress()\"></div>\n </div>\n\n <!-- Đầu kéo timeline (Thumb) đỏ chỉ hiển thị khi hover hoặc kéo -->\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ển thị mốc thời 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àng chứa các nút bấm điều khiển chức năng -->\n <div class=\"pointer-events-auto flex items-center justify-between text-sm text-white\">\n <!-- Các nút điều khiển phía bên trái -->\n <div class=\"flex items-center gap-2\">\n <!-- Nút Phát / Tạm dừng -->\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út Tua lùi 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ùi 5 giây (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út Tua tiến 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ến 5 giây (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ổ hợp nút Mute và Slider âm lượng trượt 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ượt âm lượng trượt ngang mở rộng 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ển thị thời gian phát (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ác nút điều khiển phía bên phải -->\n <div class=\"flex items-center gap-1.5\">\n <!-- Nút mở trình đơn Cài đặt bằng 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út Miniplayer (Picture-in-Picture) - Ẩn hoặc disable nếu browser ko hỗ trợ -->\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út bật/tắt chế độ rạp chiếu 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út bật/tắt chế độ toàn màn hình (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ấu hình Popover cài đặt sử dụng 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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shival99/z-ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.49",
|
|
4
4
|
"description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 20+, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -86,6 +86,7 @@ declare class ZMediaPlayerComponent implements OnDestroy {
|
|
|
86
86
|
protected openSettingsPanel(panel: ZMediaPlayerSettingsPanel): void;
|
|
87
87
|
protected closeSettingsPanel(): void;
|
|
88
88
|
protected onSettingsHidden(): void;
|
|
89
|
+
protected toggleInlineSettings(): void;
|
|
89
90
|
protected setQualitySource(source: ZMediaPlayerSource): void;
|
|
90
91
|
protected seekTo(time: number): void;
|
|
91
92
|
protected toggleTheaterMode(): void;
|