ez-vid-ang 22.0.0 → 22.0.1

package/fesm2022/ez-vid-ang.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Injectable, inject, input, ChangeDetectionStrategy, Component, output, computed, Pipe, ElementRef, NgZone, Renderer2, viewChild, effect, Directive, SecurityContext } from '@angular/core';
+import { EventEmitter, signal, Injectable, inject, input, ChangeDetectionStrategy, Component, output, computed, Pipe, ElementRef, NgZone, Renderer2, viewChild, effect, Directive, SecurityContext, DestroyRef } from '@angular/core';
 import { BehaviorSubject, Subject, fromEvent, throttleTime, merge, takeUntil } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * Enum of all possible playback states the Eva player can be in.
@@ -48,6 +49,7 @@ var EvaVideoEvent;
     EvaVideoEvent["STALLED"] = "stalled";
     EvaVideoEvent["SUSPEND"] = "suspend";
     EvaVideoEvent["TIME_UPDATE"] = "timeupdate";
+    EvaVideoEvent["DOUBLE_CLICK"] = "dblclick";
     EvaVideoEvent["VOLUME_CHANGE"] = "volumechange";
     EvaVideoEvent["WAITING"] = "waiting";
     EvaVideoEvent["WAITING_FOR_KEY"] = "waitingforkey";
@@ -104,7 +106,7 @@ class EvaApi {
      *
      * **Important:** Do not access this before `isPlayerReady` is `true`.
      */
-    assignedVideoElement;
+    assignedVideoElement = null;
     /**
      * Emits this `EvaApi` instance when the player is fully initialized and the
      * video element has been assigned. Components that need to defer setup until
@@ -348,6 +350,29 @@ class EvaApi {
         this.assignedVideoElement.currentTime = newTime;
         this.time.update(a => ({ ...a, current: newTime, remaining: a.total - newTime }));
     }
+    /**
+     * Jumps to a percentage of total duration based on a digit key.
+     * `"0"` seeks to 0%, `"5"` to 50%, `"9"` to 90%, etc.
+     * Ignored for live streams (duration is `Infinity`).
+     * Updates `time` signal immediately for responsive UI feedback.
+     *
+     * @param key - A single digit character (`"0"`–`"9"`).
+     */
+    jumpToVideoPercentage(key) {
+        if (!this.validateVideoAndPlayerBeforeAction()) {
+            return;
+        }
+        if (this.isLive()) {
+            return;
+        }
+        const digit = parseInt(key, 10);
+        if (isNaN(digit) || digit < 0 || digit > 9) {
+            return;
+        }
+        const newTime = (digit / 10) * this.time().total;
+        this.assignedVideoElement.currentTime = newTime;
+        this.time.update(a => ({ ...a, current: newTime, remaining: a.total - newTime }));
+    }
     /**
      * Sets the video playback rate.
      * Called from `EvaPlaybackSpeed` when the user selects a speed.
@@ -910,10 +935,10 @@ class EvaApi {
         }
         return parsed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaApi });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaApi });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaApi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaApi, decorators: [{
             type: Injectable
         }] });
 
@@ -947,10 +972,10 @@ class EvaBuffering {
      */
     defaultSpinner = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "defaultSpinner" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaBuffering, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaBuffering, isStandalone: true, selector: "eva-buffering", inputs: { defaultSpinner: { classPropertyName: "defaultSpinner", publicName: "defaultSpinner", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.eva-display-buffering": "evaAPI.isBuffering()" } }, ngImport: i0, template: "@if(defaultSpinner()) {\n<div class=\"eva-loader-meteor\"></div>\n}\n@else {\n<ng-content></ng-content>\n}", styles: [":host{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;top:0;left:0;transition:visibility var(--eva-transition-duration) linear,opacity var(--eva-transition-duration) linear;background-color:var(--eva-buffering-background-color);z-index:302;visibility:hidden;opacity:0}:host(.eva-display-buffering){visibility:visible!important;opacity:1!important}.eva-loader-meteor{width:var(--eva-buffering-default-spinner-size);height:var(--eva-buffering-default-spinner-size);border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:eva-loader-meteor-rotation var(--eva-buffering-spinner-animation-speed) linear infinite}@keyframes eva-loader-meteor-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaBuffering, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaBuffering, isStandalone: true, selector: "eva-buffering", inputs: { defaultSpinner: { classPropertyName: "defaultSpinner", publicName: "defaultSpinner", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.eva-display-buffering": "evaAPI.isBuffering()" } }, ngImport: i0, template: "@if(defaultSpinner()) {\n<div class=\"eva-loader-meteor\"></div>\n}\n@else {\n<ng-content></ng-content>\n}", styles: [":host{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;top:0;left:0;transition:visibility var(--eva-transition-duration) linear,opacity var(--eva-transition-duration) linear;background-color:var(--eva-buffering-background-color);z-index:302;visibility:hidden;opacity:0}:host(.eva-display-buffering){visibility:visible!important;opacity:1!important}.eva-loader-meteor{width:var(--eva-buffering-default-spinner-size);height:var(--eva-buffering-default-spinner-size);border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:eva-loader-meteor-rotation var(--eva-buffering-spinner-animation-speed) linear infinite}@keyframes eva-loader-meteor-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaBuffering, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaBuffering, decorators: [{
             type: Component,
             args: [{ selector: 'eva-buffering', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class.eva-display-buffering]": "evaAPI.isBuffering()"
@@ -1253,10 +1278,10 @@ class EvaActiveChapter {
             this.activeChapterClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaActiveChapter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaActiveChapter, isStandalone: true, selector: "eva-active-chapter", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { evaChapterClicked: "evaChapterClicked" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "activeChapterClicked()", "keydown": "activeChapterClickedKeyboard($event)" }, properties: { "attr.aria-label": "evaAria().ariaLabel" } }, ngImport: i0, template: "@if(activeChapter()){\n<span>{{activeChapter()!.title ? activeChapter()!.title : \"\"}}</span>\n\n@if(evaCustomIcon()){\n<ng-content />\n}\n@else {\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"var(--eva-active-chapter-icon-color)\"\n\tviewBox=\"0 0 16 16\">\n\t<path fill-rule=\"evenodd\"\n\t\td=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\" />\n</svg>\n}\n}", styles: [":host{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--eva-control-element-height);min-width:var(--eva-active-chapter-min-width);width:var(--eva-active-chapter-width);max-width:var(--eva-active-chapter-max-width);cursor:pointer;color:var(--eva-icon-color);font-family:var(--eva-font-family);outline:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:var(--eva-active-chapter-padding)}:host:hover{background-color:var(--eva-active-chapter-hover-background);border-radius:4px}:host>span{padding-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaActiveChapter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaActiveChapter, isStandalone: true, selector: "eva-active-chapter", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { evaChapterClicked: "evaChapterClicked" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "activeChapterClicked()", "keydown": "activeChapterClickedKeyboard($event)" }, properties: { "attr.aria-label": "evaAria().ariaLabel" } }, ngImport: i0, template: "@if(activeChapter()){\n<span>{{activeChapter()!.title ? activeChapter()!.title : \"\"}}</span>\n\n@if(evaCustomIcon()){\n<ng-content />\n}\n@else {\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"var(--eva-active-chapter-icon-color)\"\n\tviewBox=\"0 0 16 16\">\n\t<path fill-rule=\"evenodd\"\n\t\td=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\" />\n</svg>\n}\n}", styles: [":host{position:relative;display:flex;justify-content:space-between;align-items:center;height:var(--eva-control-element-height);min-width:var(--eva-active-chapter-min-width);width:var(--eva-active-chapter-width);max-width:var(--eva-active-chapter-max-width);cursor:pointer;color:var(--eva-icon-color);font-family:var(--eva-font-family);outline:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:var(--eva-active-chapter-padding)}:host:hover{background-color:var(--eva-active-chapter-hover-background);border-radius:4px}:host>span{padding-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaActiveChapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaActiveChapter, decorators: [{
             type: Component,
             args: [{ selector: 'eva-active-chapter', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -1337,10 +1362,10 @@ class EvaBackward {
             this.backwardClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaBackward, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaBackward, isStandalone: true, selector: "eva-backward", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaBackwardSeconds: { classPropertyName: "evaBackwardSeconds", publicName: "evaBackwardSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "backwardClicked()", "keydown": "backwardClickedKeyboard($event)" }, properties: { "attr.aria-label": "evaAria().ariaLabel", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-replay_10": "!evaCustomIcon() && evaBackwardSeconds() === 10", "class.eva-icon-replay_30": "!evaCustomIcon() && evaBackwardSeconds() === 30" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n<ng-content></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>img{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaBackward, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaBackward, isStandalone: true, selector: "eva-backward", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaBackwardSeconds: { classPropertyName: "evaBackwardSeconds", publicName: "evaBackwardSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "backwardClicked()", "keydown": "backwardClickedKeyboard($event)" }, properties: { "attr.aria-label": "evaAria().ariaLabel", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-replay_10": "!evaCustomIcon() && evaBackwardSeconds() === 10", "class.eva-icon-replay_30": "!evaCustomIcon() && evaBackwardSeconds() === 30" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n<ng-content></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>img{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaBackward, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaBackward, decorators: [{
             type: Component,
             args: [{ selector: 'eva-backward', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -1385,10 +1410,10 @@ class EvaControlsDivider {
      * - `ariaLabel` → `"Controls divider"`
      */
     evaAria = input(transformEvaControlsDividerAria(undefined), { ...(ngDevMode ? { debugName: "evaAria" } : /* istanbul ignore next */ {}), transform: transformEvaControlsDividerAria });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaControlsDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EvaControlsDivider, isStandalone: true, selector: "eva-controls-divider", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "separator", "aria-orientation": "horizontal", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-label": "evaAria().ariaLabel" } }, ngImport: i0, template: "", styles: [":host{display:flex;align-items:center;justify-content:center;height:var(--eva-scrub-bar-heights);flex-grow:1;flex-basis:0;margin:0;padding:0;border:0;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaControlsDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EvaControlsDivider, isStandalone: true, selector: "eva-controls-divider", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "separator", "aria-orientation": "horizontal", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-label": "evaAria().ariaLabel" } }, ngImport: i0, template: "", styles: [":host{display:flex;align-items:center;justify-content:center;height:var(--eva-scrub-bar-heights);flex-grow:1;flex-basis:0;margin:0;padding:0;border:0;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaControlsDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaControlsDivider, decorators: [{
             type: Component,
             args: [{ selector: 'eva-controls-divider', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -1482,6 +1507,41 @@ function validateTracks(tracks) {
     });
     return uniqueTracks;
 }
+/** Returns a fully populated `EvaKeyboardShortcutsConfiguration` with all default key bindings. */
+function prepareDefaultKeyboardShortcutsConfiguration() {
+    return {
+        backwardSeconds: 10,
+        forwardSeconds: 10,
+        backwardsKeyOne: "J",
+        forwardKeyOne: "L",
+        backwardsKeyTwo: "ARROWLEFT",
+        forwardKeyTwo: "ARROWRIGHT",
+        muteKey: "M",
+        fullscreen: "F",
+        playPause: "SPACE",
+        oneFrameBackward: ",",
+        oneFrameForward: ".",
+    };
+}
+/** Input transform that fills missing keys with defaults. `backwardSeconds` and `forwardSeconds` are clamped to a minimum of `1` (values `<= 0` fall back to `10`). Returns the full default config when `conf` is `null`/`undefined`. */
+function validateAndTransformEvaKeyboardShortcutsConfiguration(conf) {
+    if (!conf) {
+        return prepareDefaultKeyboardShortcutsConfiguration();
+    }
+    return {
+        backwardSeconds: (conf.backwardSeconds && conf.backwardSeconds > 0) ? conf.backwardSeconds : 10,
+        forwardSeconds: (conf.forwardSeconds && conf.forwardSeconds > 0) ? conf.forwardSeconds : 10,
+        backwardsKeyOne: conf.backwardsKeyOne ?? "J",
+        forwardKeyOne: conf.forwardKeyOne ?? "L",
+        backwardsKeyTwo: conf.backwardsKeyTwo ?? "ARROWLEFT",
+        forwardKeyTwo: conf.forwardKeyTwo ?? "ARROWRIGHT",
+        muteKey: conf.muteKey ?? "M",
+        fullscreen: conf.fullscreen ?? "F",
+        playPause: conf.playPause ?? "SPACE",
+        oneFrameBackward: conf.oneFrameBackward ?? ",",
+        oneFrameForward: conf.oneFrameForward ?? ".",
+    };
+}
 
 /**
  * Controls container component for the Eva video player.
@@ -1629,10 +1689,10 @@ class EvaControlsContainer {
             this.evaAPI.componentsContainerVisibilityStateSubject.next(true);
         }, this.evaAutohideTime());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaControlsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EvaControlsContainer, isStandalone: true, selector: "eva-controls-container", inputs: { evaAutohide: { classPropertyName: "evaAutohide", publicName: "evaAutohide", isSignal: true, isRequired: false, transformFunction: null }, evaAutohideTime: { classPropertyName: "evaAutohideTime", publicName: "evaAutohideTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hide": "hideControls()" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{position:absolute;bottom:0;left:0;display:flex;align-items:center;column-gap:var(--eva-controls-container-controls-spacing);width:100%;height:var(--eva-control-element-height);z-index:302;background-color:var(--eva-controls-container-background-color);opacity:1;transition:bottom var(--eva-transition-duration) ease-in-out,opacity var(--eva-transition-duration) ease-in-out}:host(.hide){bottom:calc(-1 * var(--eva-control-element-height))!important;opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaControlsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EvaControlsContainer, isStandalone: true, selector: "eva-controls-container", inputs: { evaAutohide: { classPropertyName: "evaAutohide", publicName: "evaAutohide", isSignal: true, isRequired: false, transformFunction: null }, evaAutohideTime: { classPropertyName: "evaAutohideTime", publicName: "evaAutohideTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.hide": "hideControls()" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{position:absolute;bottom:0;left:0;display:flex;align-items:center;column-gap:var(--eva-controls-container-controls-spacing);width:100%;height:var(--eva-control-element-height);z-index:302;background-color:var(--eva-controls-container-background-color);opacity:1;transition:bottom var(--eva-transition-duration) ease-in-out,opacity var(--eva-transition-duration) ease-in-out}:host(.hide){bottom:calc(-1 * var(--eva-control-element-height))!important;opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaControlsContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaControlsContainer, decorators: [{
             type: Component,
             args: [{ selector: 'eva-controls-container', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class.hide]": "hideControls()"
@@ -1709,10 +1769,10 @@ class EvaForward {
             this.forwardClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaForward, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaForward, isStandalone: true, selector: "eva-forward", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaForwardSeconds: { classPropertyName: "evaForwardSeconds", publicName: "evaForwardSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "forwardClicked()", "keydown": "forwardClickedKeyboard($event)" }, properties: { "attr.aria-label": "evaAria().ariaLabel", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-forward_10": "!evaCustomIcon() && evaForwardSeconds() === 10", "class.eva-icon-forward_30": "!evaCustomIcon() && evaForwardSeconds() === 30" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n<ng-content></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>img{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaForward, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaForward, isStandalone: true, selector: "eva-forward", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaForwardSeconds: { classPropertyName: "evaForwardSeconds", publicName: "evaForwardSeconds", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "forwardClicked()", "keydown": "forwardClickedKeyboard($event)" }, properties: { "attr.aria-label": "evaAria().ariaLabel", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-forward_10": "!evaCustomIcon() && evaForwardSeconds() === 10", "class.eva-icon-forward_30": "!evaCustomIcon() && evaForwardSeconds() === 30" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n<ng-content></ng-content>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>img{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaForward, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaForward, decorators: [{
             type: Component,
             args: [{ selector: 'eva-forward', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -1756,6 +1816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * await this.fullscreenService.toggleFullscreen(playerContainer, videoElement);
  */
 class EvaFullscreenAPI {
+    evaAPI = inject(EvaApi);
     /** Internal subject tracking whether the player is currently in fullscreen mode. */
     isFullscreenSubject = new BehaviorSubject(false);
     /** Observable stream of fullscreen state changes. Subscribe to react to enter/exit events. */
@@ -1961,12 +2022,22 @@ class EvaFullscreenAPI {
      * @param element - The player container element to make fullscreen.
      * @param videoElement - The native `<video>` element, used as a fallback on mobile/iOS.
      */
-    async toggleFullscreen(element, videoElement) {
+    async toggleFullscreen() {
+        const videoElement = this.evaAPI.assignedVideoElement;
+        if (!videoElement) {
+            console.warn('Video element not assigned');
+            return;
+        }
+        const playerContainer = videoElement.closest('eva-player');
+        if (!playerContainer) {
+            console.warn('Player container not found');
+            return;
+        }
         if (this.isFullscreen()) {
             await this.exitFullscreen();
         }
         else {
-            await this.enterFullscreen(element, videoElement);
+            await this.enterFullscreen(playerContainer, videoElement);
         }
     }
     /**
@@ -1997,10 +2068,10 @@ class EvaFullscreenAPI {
         this.fullscreenSub?.unsubscribe();
         this.isFullscreenSubject.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaFullscreenAPI, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaFullscreenAPI });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaFullscreenAPI, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaFullscreenAPI });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaFullscreenAPI, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaFullscreenAPI, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2035,7 +2106,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * </eva-fullscreen>
  */
 class EvaFullscreen {
-    evaAPI = inject(EvaApi);
     fullscreenService = inject(EvaFullscreenAPI);
     /**
      * When `true`, suppresses all built-in icon classes (`eva-icon`, `eva-icon-fullscreen`)
@@ -2091,17 +2161,7 @@ class EvaFullscreen {
      */
     async fullscreenClicked() {
         try {
-            const videoElement = this.evaAPI.assignedVideoElement;
-            if (!videoElement) {
-                console.warn('Video element not assigned');
-                return;
-            }
-            const playerContainer = videoElement.closest('eva-player');
-            if (!playerContainer) {
-                console.warn('Player container not found');
-                return;
-            }
-            await this.fullscreenService.toggleFullscreen(playerContainer, videoElement);
+            await this.fullscreenService.toggleFullscreen();
         }
         catch (error) {
             console.error('Failed to toggle fullscreen:', error);
@@ -2117,10 +2177,10 @@ class EvaFullscreen {
             this.fullscreenClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaFullscreen, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EvaFullscreen, isStandalone: true, selector: "eva-fullscreen", inputs: { evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "fullscreenClicked()", "keydown": "fullscreenClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-fullscreen": "!evaCustomIcon()" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:flex;justify-content:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>img{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaFullscreen, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EvaFullscreen, isStandalone: true, selector: "eva-fullscreen", inputs: { evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "fullscreenClicked()", "keydown": "fullscreenClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-fullscreen": "!evaCustomIcon()" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:flex;justify-content:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>img{pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaFullscreen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaFullscreen, decorators: [{
             type: Component,
             args: [{ selector: 'eva-fullscreen', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -2266,10 +2326,10 @@ class EvaMute {
             this.muteClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaMute, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaMute, isStandalone: true, selector: "eva-mute", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaLowVolume: { classPropertyName: "evaLowVolume", publicName: "evaLowVolume", isSignal: true, isRequired: false, transformFunction: null }, evaMiddleVolume: { classPropertyName: "evaMiddleVolume", publicName: "evaMiddleVolume", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "muteClicked()", "keydown": "muteClickKeyboard($event)" }, properties: { "attr.aria-label": "muteAriaLabel()", "attr.aria-valuetext": "muteAriaValueText()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-volume_up": "!evaCustomIcon() && evaIconVolumeUp()", "class.eva-icon-volume_middle": "!evaCustomIcon() && evaIconVolumeMiddle()", "class.eva-icon-volume_low": "!evaCustomIcon() && evaIconVolumeLow()", "class.eva-icon-volume_off": "!evaCustomIcon() && evaIconVolumeOff()" } }, ngImport: i0, template: "@if (evaCustomIcon() && evaIconVolumeOff()) {\n<ng-content select=\"[evaVolumeOff]\"></ng-content>\n}\n@if (evaCustomIcon() && evaIconVolumeLow()) {\n<ng-content select=\"[evaVolumeLow]\"></ng-content>\n}\n@if (evaCustomIcon() && evaIconVolumeMiddle()) {\n<ng-content select=\"[evaVolumeMiddle]\"></ng-content>\n}\n@if (evaCustomIcon() && evaIconVolumeUp()) {\n<ng-content select=\"[evaVolumeUp]\"></ng-content>\n}", styles: [":host{display:flex;justify-content:center;width:50px;height:var(--eva-control-element-height);color:var(--eva-icon-color);cursor:pointer;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaMute, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaMute, isStandalone: true, selector: "eva-mute", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaLowVolume: { classPropertyName: "evaLowVolume", publicName: "evaLowVolume", isSignal: true, isRequired: false, transformFunction: null }, evaMiddleVolume: { classPropertyName: "evaMiddleVolume", publicName: "evaMiddleVolume", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "muteClicked()", "keydown": "muteClickKeyboard($event)" }, properties: { "attr.aria-label": "muteAriaLabel()", "attr.aria-valuetext": "muteAriaValueText()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-volume_up": "!evaCustomIcon() && evaIconVolumeUp()", "class.eva-icon-volume_middle": "!evaCustomIcon() && evaIconVolumeMiddle()", "class.eva-icon-volume_low": "!evaCustomIcon() && evaIconVolumeLow()", "class.eva-icon-volume_off": "!evaCustomIcon() && evaIconVolumeOff()" } }, ngImport: i0, template: "@if (evaCustomIcon() && evaIconVolumeOff()) {\n<ng-content select=\"[evaVolumeOff]\"></ng-content>\n}\n@if (evaCustomIcon() && evaIconVolumeLow()) {\n<ng-content select=\"[evaVolumeLow]\"></ng-content>\n}\n@if (evaCustomIcon() && evaIconVolumeMiddle()) {\n<ng-content select=\"[evaVolumeMiddle]\"></ng-content>\n}\n@if (evaCustomIcon() && evaIconVolumeUp()) {\n<ng-content select=\"[evaVolumeUp]\"></ng-content>\n}", styles: [":host{display:flex;justify-content:center;width:50px;height:var(--eva-control-element-height);color:var(--eva-icon-color);cursor:pointer;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaMute, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaMute, decorators: [{
             type: Component,
             args: [{ selector: 'eva-mute', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -2367,30 +2427,20 @@ class EvaOverlayPlay {
     playClicked() {
         this.evaAPI.playOrPauseVideo();
     }
-    /**
-     * Handles keyboard events on the host element.
-     * Triggers play/pause on `Enter` or `Space` keypress.
-     */
-    playClickedKeyboard(k) {
-        if (k.key === 'Enter' || k.key === ' ') {
-            k.preventDefault();
-            this.playClicked();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaOverlayPlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: EvaOverlayPlay, isStandalone: true, selector: "eva-overlay-play", inputs: { evaOvelayPlayAria: { classPropertyName: "evaOvelayPlayAria", publicName: "evaOvelayPlayAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "click": "playClicked()", "keydown": "playClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-play_arrow": "!evaCustomIcon() && evaIconPlay()", "class.eva-display-overlay-play": "evaIconPlay() && !evaAPI.isBuffering()" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:flex;align-items:center;justify-content:center;width:100%;height:calc(100% - var(--eva-control-element-height));cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;position:absolute;top:0;left:0;transition:visibility var(--eva-transition-duration) linear,background-color var(--eva-transition-duration) linear,opacity var(--eva-transition-duration) linear;background-color:#0000;z-index:301;visibility:hidden;opacity:0}:host(.eva-display-overlay-play){background-color:var(--eva-overlay-play-background-color)!important;opacity:1!important;visibility:visible!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaOverlayPlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: EvaOverlayPlay, isStandalone: true, selector: "eva-overlay-play", inputs: { evaOvelayPlayAria: { classPropertyName: "evaOvelayPlayAria", publicName: "evaOvelayPlayAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "playClicked()" }, properties: { "attr.aria-label": "ariaLabel()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-play_arrow": "!evaCustomIcon() && evaIconPlay()", "class.eva-display-overlay-play": "evaIconPlay() && !evaAPI.isBuffering()" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:flex;align-items:center;justify-content:center;width:100%;height:calc(100% - var(--eva-control-element-height));cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;position:absolute;top:0;left:0;transition:visibility var(--eva-transition-duration) linear,background-color var(--eva-transition-duration) linear,opacity var(--eva-transition-duration) linear;background-color:#0000;z-index:301;opacity:0}:host(.eva-display-overlay-play){background-color:var(--eva-overlay-play-background-color)!important;opacity:1!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaOverlayPlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaOverlayPlay, decorators: [{
             type: Component,
             args: [{ selector: 'eva-overlay-play', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
+                        "role": "button",
                         "[attr.aria-label]": "ariaLabel()",
                         "[class.eva-icon]": "!evaCustomIcon()",
                         "[class.eva-icon-play_arrow]": "!evaCustomIcon() && evaIconPlay()",
                         "[class.eva-display-overlay-play]": "evaIconPlay() && !evaAPI.isBuffering()",
-                        "(click)": "playClicked()",
-                        "(keydown)": "playClickedKeyboard($event)"
-                    }, template: "<ng-content></ng-content>", styles: [":host{display:flex;align-items:center;justify-content:center;width:100%;height:calc(100% - var(--eva-control-element-height));cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;position:absolute;top:0;left:0;transition:visibility var(--eva-transition-duration) linear,background-color var(--eva-transition-duration) linear,opacity var(--eva-transition-duration) linear;background-color:#0000;z-index:301;visibility:hidden;opacity:0}:host(.eva-display-overlay-play){background-color:var(--eva-overlay-play-background-color)!important;opacity:1!important;visibility:visible!important}\n"] }]
+                        "(click)": "playClicked()"
+                    }, template: "<ng-content></ng-content>", styles: [":host{display:flex;align-items:center;justify-content:center;width:100%;height:calc(100% - var(--eva-control-element-height));cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;position:absolute;top:0;left:0;transition:visibility var(--eva-transition-duration) linear,background-color var(--eva-transition-duration) linear,opacity var(--eva-transition-duration) linear;background-color:#0000;z-index:301;opacity:0}:host(.eva-display-overlay-play){background-color:var(--eva-overlay-play-background-color)!important;opacity:1!important}\n"] }]
         }], propDecorators: { evaOvelayPlayAria: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaOvelayPlayAria", required: false }] }], evaCustomIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaCustomIcon", required: false }] }] } });
 
 /**
@@ -2511,10 +2561,10 @@ class EvaPictureInPicture {
             this.pipClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPictureInPicture, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaPictureInPicture, isStandalone: true, selector: "eva-picture-in-picture", inputs: { evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "pipClicked()", "keydown": "pipClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "ariaValueText()" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n<ng-content></ng-content>\n}\n@else {\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"var(--eva-icon-color)\"\n\tstyle=\"width: 50%; height: 50%\">\n\t<path\n\t\td=\"M19,11H11V17H19V11M23,19V5C23,3.88 22.1,3 21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19M21,19H3V4.97H21V19Z\" />\n</svg>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>svg{pointer-events:none!important;user-select:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPictureInPicture, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaPictureInPicture, isStandalone: true, selector: "eva-picture-in-picture", inputs: { evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "pipClicked()", "keydown": "pipClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "ariaValueText()" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n<ng-content></ng-content>\n}\n@else {\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"var(--eva-icon-color)\"\n\tstyle=\"width: 50%; height: 50%\">\n\t<path\n\t\td=\"M19,11H11V17H19V11M23,19V5C23,3.88 22.1,3 21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19M21,19H3V4.97H21V19Z\" />\n</svg>\n}", styles: [":host{display:flex;justify-content:center;align-items:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}:host>svg{pointer-events:none!important;user-select:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPictureInPicture, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPictureInPicture, decorators: [{
             type: Component,
             args: [{ selector: 'eva-picture-in-picture', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -2586,10 +2636,10 @@ class EvaTimeDisplayPipe {
     pad(num) {
         return num.toString().padStart(2, '0');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaTimeDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: EvaTimeDisplayPipe, isStandalone: true, name: "evaTimeDisplay" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaTimeDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.2", ngImport: i0, type: EvaTimeDisplayPipe, isStandalone: true, name: "evaTimeDisplay" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaTimeDisplayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaTimeDisplayPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'evaTimeDisplay',
@@ -2741,10 +2791,10 @@ class EvaPlayPause {
             this.playPauseClicked();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPlayPause, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaPlayPause, isStandalone: true, selector: "eva-play-pause", inputs: { evaPlayPauseAria: { classPropertyName: "evaPlayPauseAria", publicName: "evaPlayPauseAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playingStateChanged: "playingStateChanged" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "playPauseClicked()", "keydown": "playPauseClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "ariaValueText()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-pause": "!evaCustomIcon() && evaIconPause()", "class.eva-icon-play_arrow": "!evaCustomIcon() && evaIconPlay()" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n@if(evaIconPause()){\n<ng-content select=\"[evaPause]\"></ng-content>\n}\n@if(evaIconPlay()){\n<ng-content select=\"[evaPlay]\"></ng-content>\n}\n}", styles: [":host{display:flex;justify-content:center;height:var(--eva-control-element-height);width:50px;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer}:host>img{pointer-events:none;-webkit-user-select:none;user-select:none;width:32px;height:32px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPlayPause, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaPlayPause, isStandalone: true, selector: "eva-play-pause", inputs: { evaPlayPauseAria: { classPropertyName: "evaPlayPauseAria", publicName: "evaPlayPauseAria", isSignal: true, isRequired: false, transformFunction: null }, evaCustomIcon: { classPropertyName: "evaCustomIcon", publicName: "evaCustomIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { playingStateChanged: "playingStateChanged" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "playPauseClicked()", "keydown": "playPauseClickedKeyboard($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "ariaValueText()", "class.eva-icon": "!evaCustomIcon()", "class.eva-icon-pause": "!evaCustomIcon() && evaIconPause()", "class.eva-icon-play_arrow": "!evaCustomIcon() && evaIconPlay()" } }, ngImport: i0, template: "@if(evaCustomIcon()){\n@if(evaIconPause()){\n<ng-content select=\"[evaPause]\"></ng-content>\n}\n@if(evaIconPlay()){\n<ng-content select=\"[evaPlay]\"></ng-content>\n}\n}", styles: [":host{display:flex;justify-content:center;height:var(--eva-control-element-height);width:50px;color:var(--eva-icon-color);user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:pointer}:host>img{pointer-events:none;-webkit-user-select:none;user-select:none;width:32px;height:32px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPlayPause, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPlayPause, decorators: [{
             type: Component,
             args: [{ selector: 'eva-play-pause', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -2987,10 +3037,10 @@ class EvaPlaybackSpeed {
             this.evaAPI.controlsSelectorComponentActive.next(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPlaybackSpeed, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaPlaybackSpeed, isStandalone: true, selector: "eva-playback-speed", inputs: { evaPlaybackSpeeds: { classPropertyName: "evaPlaybackSpeeds", publicName: "evaPlaybackSpeeds", isSignal: true, isRequired: true, transformFunction: null }, evaDefaultPlaybackSpeed: { classPropertyName: "evaDefaultPlaybackSpeed", publicName: "evaDefaultPlaybackSpeed", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "playbackClicked()", "keydown": "playbackClickedKeyboard($event)", "blur": "handleBlur($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "currentSpeed() + 'x'", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"eva-playback-speed-container\">\n\t<!-- Current Speed Display Button -->\n\t<div class=\"eva-playback-speed-button\">\n\t\t<span class=\"speed-icon\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"speed-label\">{{ formatSpeed(currentSpeed()) }}</span>\n\t\t<span class=\"dropdown-arrow\" [class.rotated]=\"isOpen()\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</div>\n\n\t<!-- Dropdown Menu -->\n\t<div class=\"eva-playback-speed-dropdown\" [class.show]=\"isOpen()\">\n\t\t<div class=\"dropdown-content\">\n\t\t\t<div class=\"dropdown-header\">{{evaAria().ariaLabel}}</div>\n\t\t\t<div class=\"speed-options\">\n\t\t\t\t@for (speed of evaPlaybackSpeeds(); track speed) {\n\t\t\t\t<button type=\"button\" class=\"speed-option\" [class.active]=\"speed === currentSpeed()\"\n\t\t\t\t\t(click)=\"selectSpeed(speed, $index)\" [attr.aria-selected]=\"speed === currentSpeed()\" role=\"option\">\n\t\t\t\t\t<span class=\"speed-text\">{{ formatSpeed(speed) }}</span>\n\t\t\t\t\t@if (speed === currentSpeed()) {\n\t\t\t\t\t<span class=\"checkmark\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"></polyline>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);width:80px;cursor:pointer;color:#fff;position:relative;outline:none}:host:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;border-radius:4px}:host:hover{background-color:var(--eva-playback-speed-hover-background);border-radius:4px}:host.open{background-color:var(--eva-playback-speed-opened-background);border-radius:4px}.eva-playback-speed-container{position:relative;display:flex;align-items:center;justify-content:center}.eva-playback-speed-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}.eva-playback-speed-button .speed-icon{display:none}.eva-playback-speed-button .speed-label{font-family:var(--eva-font-family);font-size:var(--eva-playback-speed-label-font-size);color:var(--eva-playback-speed-label-color);white-space:nowrap;line-height:1}.eva-playback-speed-button .dropdown-arrow{display:flex;align-items:center;width:var(--eva-playback-speed-dropdown-arrow-size);height:var(--eva-playback-speed-dropdown-arrow-size);color:var(--eva-playback-speed-dropdown-arrow-color);transition:transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.eva-playback-speed-button .dropdown-arrow svg{width:100%;height:100%}.eva-playback-speed-button .dropdown-arrow.rotated{transform:rotate(180deg)}.eva-playback-speed-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-12px);margin-bottom:4px;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),visibility var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1);transform:translate(-50%) translateY(0) scale(.95);transform-origin:bottom center}.eva-playback-speed-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(calc(-12px - var(--eva-scrub-bar-heights))) scale(1)}@media(max-width:768px){.eva-playback-speed-dropdown{left:auto;right:0;transform:translateY(-8px)}.eva-playback-speed-dropdown.show{transform:translateY(-8px) scale(1)}}:host-context(.controls-left) .eva-playback-speed-dropdown{left:0;transform:translateY(-8px)}:host-context(.controls-left) .eva-playback-speed-dropdown.show{transform:translateY(-8px) scale(1)}:host-context(.controls-right) .eva-playback-speed-dropdown{left:auto;right:0;transform:translateY(-8px)}:host-context(.controls-right) .eva-playback-speed-dropdown.show{transform:translateY(-8px) scale(1)}.dropdown-content{background:var(--eva-playback-speed-dropdown-content-background);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:var(--eva-playback-speed-dropdown-content-box-shadow);overflow:hidden;min-width:180px;animation:slideIn var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}@media(max-width:768px){.dropdown-content{min-width:150px}}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:10px 14px 8px;font-family:var(--eva-font-family);font-size:var(--eva-playback-speed-dropdown-content-header-font-size);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--eva-playback-speed-dropdown-content-header-font-color);border-bottom:var(--eva-playback-speed-dropdown-content-header-bottom-border)}.speed-options{padding:4px;max-height:280px;overflow-y:auto}.speed-options::-webkit-scrollbar{width:6px}.speed-options::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.speed-options::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.speed-options::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.speed-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color var(--eva-transition-durations) ease,transform var(--eva-transition-duration) ease;outline:none}.speed-option:hover{background-color:var(--eva-playback-speed-dropdown-content-speed-option-bacground-hover)}.speed-option:active{transform:scale(.98)}.speed-option:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.speed-option.active{background-color:var(--eva-playback-speed-dropdown-content-speed-option-icon-active)}.speed-option .speed-text{font-family:var(--eva-font-family);font-size:var(--eva-playback-speed-dropdown-content-speed-option-font-size);font-weight:500;color:var(--eva-playback-speed-dropdown-content-speed-option-font-color);transition:color var(--eva-transition-duration) ease}.speed-option .checkmark{display:flex;align-items:center;width:var(--eva-playback-speed-dropdown-content-speed-option-checkmark-size);height:var(--eva-playback-speed-dropdown-content-speed-option-checkmark-size);color:var(--eva-playback-speed-dropdown-content-speed-option-checkmark-color);animation:checkmarkAppear var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.speed-option .checkmark svg{width:100%;height:100%}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPlaybackSpeed, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaPlaybackSpeed, isStandalone: true, selector: "eva-playback-speed", inputs: { evaPlaybackSpeeds: { classPropertyName: "evaPlaybackSpeeds", publicName: "evaPlaybackSpeeds", isSignal: true, isRequired: true, transformFunction: null }, evaDefaultPlaybackSpeed: { classPropertyName: "evaDefaultPlaybackSpeed", publicName: "evaDefaultPlaybackSpeed", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "playbackClicked()", "keydown": "playbackClickedKeyboard($event)", "blur": "handleBlur($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "currentSpeed() + 'x'", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"eva-playback-speed-container\">\n\t<!-- Current Speed Display Button -->\n\t<div class=\"eva-playback-speed-button\">\n\t\t<span class=\"speed-icon\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"speed-label\">{{ formatSpeed(currentSpeed()) }}</span>\n\t\t<span class=\"dropdown-arrow\" [class.rotated]=\"isOpen()\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</div>\n\n\t<!-- Dropdown Menu -->\n\t<div class=\"eva-playback-speed-dropdown\" [class.show]=\"isOpen()\">\n\t\t<div class=\"dropdown-content\">\n\t\t\t<div class=\"dropdown-header\">{{evaAria().ariaLabel}}</div>\n\t\t\t<div class=\"speed-options\">\n\t\t\t\t@for (speed of evaPlaybackSpeeds(); track speed) {\n\t\t\t\t<button type=\"button\" class=\"speed-option\" [class.active]=\"speed === currentSpeed()\"\n\t\t\t\t\t(click)=\"selectSpeed(speed, $index)\" [attr.aria-selected]=\"speed === currentSpeed()\" role=\"option\">\n\t\t\t\t\t<span class=\"speed-text\">{{ formatSpeed(speed) }}</span>\n\t\t\t\t\t@if (speed === currentSpeed()) {\n\t\t\t\t\t<span class=\"checkmark\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"></polyline>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);width:80px;cursor:pointer;color:#fff;position:relative;outline:none}:host:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;border-radius:4px}:host:hover{background-color:var(--eva-playback-speed-hover-background);border-radius:4px}:host.open{background-color:var(--eva-playback-speed-opened-background);border-radius:4px}.eva-playback-speed-container{position:relative;display:flex;align-items:center;justify-content:center}.eva-playback-speed-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}.eva-playback-speed-button .speed-icon{display:none}.eva-playback-speed-button .speed-label{font-family:var(--eva-font-family);font-size:var(--eva-playback-speed-label-font-size);color:var(--eva-playback-speed-label-color);white-space:nowrap;line-height:1}.eva-playback-speed-button .dropdown-arrow{display:flex;align-items:center;width:var(--eva-playback-speed-dropdown-arrow-size);height:var(--eva-playback-speed-dropdown-arrow-size);color:var(--eva-playback-speed-dropdown-arrow-color);transition:transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.eva-playback-speed-button .dropdown-arrow svg{width:100%;height:100%}.eva-playback-speed-button .dropdown-arrow.rotated{transform:rotate(180deg)}.eva-playback-speed-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-12px);margin-bottom:4px;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),visibility var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1);transform:translate(-50%) translateY(0) scale(.95);transform-origin:bottom center}.eva-playback-speed-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(calc(-12px - var(--eva-scrub-bar-heights))) scale(1)}@media(max-width:768px){.eva-playback-speed-dropdown{left:auto;right:0;transform:translateY(-8px)}.eva-playback-speed-dropdown.show{transform:translateY(-8px) scale(1)}}:host-context(.controls-left) .eva-playback-speed-dropdown{left:0;transform:translateY(-8px)}:host-context(.controls-left) .eva-playback-speed-dropdown.show{transform:translateY(-8px) scale(1)}:host-context(.controls-right) .eva-playback-speed-dropdown{left:auto;right:0;transform:translateY(-8px)}:host-context(.controls-right) .eva-playback-speed-dropdown.show{transform:translateY(-8px) scale(1)}.dropdown-content{background:var(--eva-playback-speed-dropdown-content-background);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:var(--eva-playback-speed-dropdown-content-box-shadow);overflow:hidden;min-width:180px;animation:slideIn var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}@media(max-width:768px){.dropdown-content{min-width:150px}}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:10px 14px 8px;font-family:var(--eva-font-family);font-size:var(--eva-playback-speed-dropdown-content-header-font-size);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--eva-playback-speed-dropdown-content-header-font-color);border-bottom:var(--eva-playback-speed-dropdown-content-header-bottom-border)}.speed-options{padding:4px;max-height:280px;overflow-y:auto}.speed-options::-webkit-scrollbar{width:6px}.speed-options::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.speed-options::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.speed-options::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.speed-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color var(--eva-transition-durations) ease,transform var(--eva-transition-duration) ease;outline:none}.speed-option:hover{background-color:var(--eva-playback-speed-dropdown-content-speed-option-bacground-hover)}.speed-option:active{transform:scale(.98)}.speed-option:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.speed-option.active{background-color:var(--eva-playback-speed-dropdown-content-speed-option-icon-active)}.speed-option .speed-text{font-family:var(--eva-font-family);font-size:var(--eva-playback-speed-dropdown-content-speed-option-font-size);font-weight:500;color:var(--eva-playback-speed-dropdown-content-speed-option-font-color);transition:color var(--eva-transition-duration) ease}.speed-option .checkmark{display:flex;align-items:center;width:var(--eva-playback-speed-dropdown-content-speed-option-checkmark-size);height:var(--eva-playback-speed-dropdown-content-speed-option-checkmark-size);color:var(--eva-playback-speed-dropdown-content-speed-option-checkmark-color);animation:checkmarkAppear var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.speed-option .checkmark svg{width:100%;height:100%}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPlaybackSpeed, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPlaybackSpeed, decorators: [{
             type: Component,
             args: [{ selector: 'eva-playback-speed', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -3214,10 +3264,10 @@ class EvaQualitySelector {
             this.evaAPI.controlsSelectorComponentActive.next(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaQualitySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaQualitySelector, isStandalone: true, selector: "eva-quality-selector", inputs: { evaQualitySelectorText: { classPropertyName: "evaQualitySelectorText", publicName: "evaQualitySelectorText", isSignal: true, isRequired: false, transformFunction: null }, evaQualityAutoText: { classPropertyName: "evaQualityAutoText", publicName: "evaQualityAutoText", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "onClicked()", "keydown": "onKeyDown($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "currentQuality()?.label ?? evaQualityAutoText()", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"eva-quality-selector-container\">\n\t<!-- Current Quality Display Button -->\n\t<div class=\"eva-quality-selector-button\">\n\t\t<span class=\"speed-icon\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"speed-label\">\n\t\t\t{{ currentQuality() ? formatQuality(currentQuality()!) : evaQualityAutoText() }}\n\t\t</span>\n\t\t<span class=\"dropdown-arrow\" [class.rotated]=\"isOpen()\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</div>\n\n\t<!-- Dropdown Menu -->\n\t<div class=\"eva-quality-selector-dropdown\" [class.show]=\"isOpen()\">\n\t\t<div class=\"dropdown-content\">\n\t\t\t<div class=\"dropdown-header\">{{ evaQualitySelectorText() }}</div>\n\t\t\t<div class=\"quality-options\">\n\t\t\t\t@for (quality of qualities(); track quality.qualityIndex) {\n\t\t\t\t<button type=\"button\" class=\"quality-option\"\n\t\t\t\t\t[class.active]=\"quality.qualityIndex === currentQuality()?.qualityIndex\"\n\t\t\t\t\t(click)=\"selectQuality(quality, $index)\"\n\t\t\t\t\t[attr.aria-selected]=\"quality.qualityIndex === currentQuality()?.qualityIndex\" role=\"option\">\n\t\t\t\t\t<span class=\"speed-text\">{{ formatQuality(quality) }}</span>\n\t\t\t\t\t@if (quality.qualityIndex === currentQuality()?.qualityIndex) {\n\t\t\t\t\t<span class=\"checkmark\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"></polyline>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);width:80px;cursor:pointer;color:#fff;position:relative;outline:none}:host:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;border-radius:4px}:host:hover{background-color:var(--eva-quality-selector-hover-background);border-radius:4px}:host.open{background-color:var(--eva-quality-selector-opened-background);border-radius:4px}.eva-quality-selector-container{position:relative;display:flex;align-items:center;justify-content:center}.eva-quality-selector-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}.eva-quality-selector-button .speed-icon{display:none}.eva-quality-selector-button .speed-label{font-family:var(--eva-font-family);font-size:var(--eva-quality-selector-label-font-size);color:var(--eva-quality-selector-label-color);white-space:nowrap;line-height:1}.eva-quality-selector-button .dropdown-arrow{display:flex;align-items:center;width:var(--eva-quality-selector-dropdown-arrow-size);height:var(--eva-quality-selector-dropdown-arrow-size);color:var(--eva-quality-selector-dropdown-arrow-color);transition:transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.eva-quality-selector-button .dropdown-arrow svg{width:100%;height:100%}.eva-quality-selector-button .dropdown-arrow.rotated{transform:rotate(180deg)}.eva-quality-selector-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-12px);margin-bottom:4px;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),visibility var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1);transform:translate(-50%) translateY(0) scale(.95);transform-origin:bottom center}.eva-quality-selector-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(calc(-12px - var(--eva-scrub-bar-heights))) scale(1)}@media(max-width:768px){.eva-quality-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}.eva-quality-selector-dropdown.show{transform:translateY(-8px) scale(1)}}:host-context(.controls-left) .eva-quality-selector-dropdown{left:0;transform:translateY(-8px)}:host-context(.controls-left) .eva-quality-selector-dropdown.show{transform:translateY(-8px) scale(1)}:host-context(.controls-right) .eva-quality-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}:host-context(.controls-right) .eva-quality-selector-dropdown.show{transform:translateY(-8px) scale(1)}.dropdown-content{background:var(--eva-quality-selector-dropdown-content-background);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:var(--eva-quality-selector-dropdown-content-box-shadow);overflow:hidden;min-width:180px;animation:slideIn var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}@media(max-width:768px){.dropdown-content{min-width:150px}}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:10px 14px 8px;font-family:var(--eva-font-family);font-size:var(--eva-quality-selector-dropdown-content-header-font-size);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--eva-quality-selector-dropdown-content-header-font-color);border-bottom:var(--eva-quality-selector-dropdown-content-header-bottom-border)}.quality-options{padding:4px;max-height:280px;overflow-y:auto}.quality-options::-webkit-scrollbar{width:6px}.quality-options::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.quality-options::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.quality-options::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.quality-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color var(--eva-transition-durations) ease,transform var(--eva-transition-duration) ease;outline:none}.quality-option:hover{background-color:var(--eva-quality-selector-dropdown-content-quality-option-bacground-hover)}.quality-option:active{transform:scale(.98)}.quality-option:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.quality-option.active{background-color:var(--eva-quality-selector-dropdown-content-quality-option-icon-active)}.quality-option .speed-text{font-family:var(--eva-font-family);font-size:var(--eva-quality-selector-dropdown-content-quality-option-font-size);font-weight:500;color:var(--eva-quality-selector-dropdown-content-quality-option-font-color);transition:color var(--eva-transition-duration) ease}.quality-option .checkmark{display:flex;align-items:center;width:var(--eva-quality-selector-dropdown-content-quality-option-checkmark-size);height:var(--eva-quality-selector-dropdown-content-quality-option-checkmark-size);color:var(--eva-quality-selector-dropdown-content-quality-option-checkmark-color);animation:checkmarkAppear var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.quality-option .checkmark svg{width:100%;height:100%}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaQualitySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaQualitySelector, isStandalone: true, selector: "eva-quality-selector", inputs: { evaQualitySelectorText: { classPropertyName: "evaQualitySelectorText", publicName: "evaQualitySelectorText", isSignal: true, isRequired: false, transformFunction: null }, evaQualityAutoText: { classPropertyName: "evaQualityAutoText", publicName: "evaQualityAutoText", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "onClicked()", "keydown": "onKeyDown($event)", "blur": "onBlur($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuetext": "currentQuality()?.label ?? evaQualityAutoText()", "class.open": "isOpen()" } }, ngImport: i0, template: "<div class=\"eva-quality-selector-container\">\n\t<!-- Current Quality Display Button -->\n\t<div class=\"eva-quality-selector-button\">\n\t\t<span class=\"speed-icon\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"speed-label\">\n\t\t\t{{ currentQuality() ? formatQuality(currentQuality()!) : evaQualityAutoText() }}\n\t\t</span>\n\t\t<span class=\"dropdown-arrow\" [class.rotated]=\"isOpen()\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</div>\n\n\t<!-- Dropdown Menu -->\n\t<div class=\"eva-quality-selector-dropdown\" [class.show]=\"isOpen()\">\n\t\t<div class=\"dropdown-content\">\n\t\t\t<div class=\"dropdown-header\">{{ evaQualitySelectorText() }}</div>\n\t\t\t<div class=\"quality-options\">\n\t\t\t\t@for (quality of qualities(); track quality.qualityIndex) {\n\t\t\t\t<button type=\"button\" class=\"quality-option\"\n\t\t\t\t\t[class.active]=\"quality.qualityIndex === currentQuality()?.qualityIndex\"\n\t\t\t\t\t(click)=\"selectQuality(quality, $index)\"\n\t\t\t\t\t[attr.aria-selected]=\"quality.qualityIndex === currentQuality()?.qualityIndex\" role=\"option\">\n\t\t\t\t\t<span class=\"speed-text\">{{ formatQuality(quality) }}</span>\n\t\t\t\t\t@if (quality.qualityIndex === currentQuality()?.qualityIndex) {\n\t\t\t\t\t<span class=\"checkmark\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"></polyline>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);width:80px;cursor:pointer;color:#fff;position:relative;outline:none}:host:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;border-radius:4px}:host:hover{background-color:var(--eva-quality-selector-hover-background);border-radius:4px}:host.open{background-color:var(--eva-quality-selector-opened-background);border-radius:4px}.eva-quality-selector-container{position:relative;display:flex;align-items:center;justify-content:center}.eva-quality-selector-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}.eva-quality-selector-button .speed-icon{display:none}.eva-quality-selector-button .speed-label{font-family:var(--eva-font-family);font-size:var(--eva-quality-selector-label-font-size);color:var(--eva-quality-selector-label-color);white-space:nowrap;line-height:1}.eva-quality-selector-button .dropdown-arrow{display:flex;align-items:center;width:var(--eva-quality-selector-dropdown-arrow-size);height:var(--eva-quality-selector-dropdown-arrow-size);color:var(--eva-quality-selector-dropdown-arrow-color);transition:transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.eva-quality-selector-button .dropdown-arrow svg{width:100%;height:100%}.eva-quality-selector-button .dropdown-arrow.rotated{transform:rotate(180deg)}.eva-quality-selector-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-12px);margin-bottom:4px;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),visibility var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1);transform:translate(-50%) translateY(0) scale(.95);transform-origin:bottom center}.eva-quality-selector-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(calc(-12px - var(--eva-scrub-bar-heights))) scale(1)}@media(max-width:768px){.eva-quality-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}.eva-quality-selector-dropdown.show{transform:translateY(-8px) scale(1)}}:host-context(.controls-left) .eva-quality-selector-dropdown{left:0;transform:translateY(-8px)}:host-context(.controls-left) .eva-quality-selector-dropdown.show{transform:translateY(-8px) scale(1)}:host-context(.controls-right) .eva-quality-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}:host-context(.controls-right) .eva-quality-selector-dropdown.show{transform:translateY(-8px) scale(1)}.dropdown-content{background:var(--eva-quality-selector-dropdown-content-background);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:var(--eva-quality-selector-dropdown-content-box-shadow);overflow:hidden;min-width:180px;animation:slideIn var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}@media(max-width:768px){.dropdown-content{min-width:150px}}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:10px 14px 8px;font-family:var(--eva-font-family);font-size:var(--eva-quality-selector-dropdown-content-header-font-size);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--eva-quality-selector-dropdown-content-header-font-color);border-bottom:var(--eva-quality-selector-dropdown-content-header-bottom-border)}.quality-options{padding:4px;max-height:280px;overflow-y:auto}.quality-options::-webkit-scrollbar{width:6px}.quality-options::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.quality-options::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.quality-options::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.quality-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color var(--eva-transition-durations) ease,transform var(--eva-transition-duration) ease;outline:none}.quality-option:hover{background-color:var(--eva-quality-selector-dropdown-content-quality-option-bacground-hover)}.quality-option:active{transform:scale(.98)}.quality-option:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.quality-option.active{background-color:var(--eva-quality-selector-dropdown-content-quality-option-icon-active)}.quality-option .speed-text{font-family:var(--eva-font-family);font-size:var(--eva-quality-selector-dropdown-content-quality-option-font-size);font-weight:500;color:var(--eva-quality-selector-dropdown-content-quality-option-font-color);transition:color var(--eva-transition-duration) ease}.quality-option .checkmark{display:flex;align-items:center;width:var(--eva-quality-selector-dropdown-content-quality-option-checkmark-size);height:var(--eva-quality-selector-dropdown-content-quality-option-checkmark-size);color:var(--eva-quality-selector-dropdown-content-quality-option-checkmark-color);animation:checkmarkAppear var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.quality-option .checkmark svg{width:100%;height:100%}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaQualitySelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaQualitySelector, decorators: [{
             type: Component,
             args: [{ selector: 'eva-quality-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'tabindex': '0',
@@ -3333,10 +3383,10 @@ class EvaScrubBarBufferingTime {
         }
         this.bufferedPercentage.set(bufferTime);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaScrubBarBufferingTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: EvaScrubBarBufferingTime, isStandalone: true, selector: "eva-scrub-bar-buffering-time", ngImport: i0, template: "<div class=\"buffer-container\" [style.width]=\"bufferedPercentage()\">\n</div>", styles: [":host{display:flex;width:100%;height:var(--eva-scrub-bar-heights);pointer-events:none;position:absolute;left:0;top:0;border-radius:2px}div.buffer-container{height:var(--eva-scrub-bar-heights);background-color:var(--eva-scrub-bar-buffering-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaScrubBarBufferingTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: EvaScrubBarBufferingTime, isStandalone: true, selector: "eva-scrub-bar-buffering-time", ngImport: i0, template: "<div class=\"buffer-container\" [style.width]=\"bufferedPercentage()\">\n</div>", styles: [":host{display:flex;width:100%;height:var(--eva-scrub-bar-heights);pointer-events:none;position:absolute;left:0;top:0;border-radius:2px}div.buffer-container{height:var(--eva-scrub-bar-heights);background-color:var(--eva-scrub-bar-buffering-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaScrubBarBufferingTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaScrubBarBufferingTime, decorators: [{
             type: Component,
             args: [{ selector: 'eva-scrub-bar-buffering-time', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buffer-container\" [style.width]=\"bufferedPercentage()\">\n</div>", styles: [":host{display:flex;width:100%;height:var(--eva-scrub-bar-heights);pointer-events:none;position:absolute;left:0;top:0;border-radius:2px}div.buffer-container{height:var(--eva-scrub-bar-heights);background-color:var(--eva-scrub-bar-buffering-background)}\n"] }]
         }] });
@@ -3378,10 +3428,10 @@ class EvaScrubBarCurrentTime {
         return Math.round(time.current * 100) / time.total + "%";
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "currentTimePercentage" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaScrubBarCurrentTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: EvaScrubBarCurrentTime, isStandalone: true, selector: "eva-scrub-bar-current-time", ngImport: i0, template: "<div class=\"current-time-container\" [style.width]=\"currentTimePercentage()\">\n</div>", styles: [":host{display:flex;width:100%;height:var(--eva-scrub-bar-heights);pointer-events:none;position:absolute;left:0;top:0;border-radius:2px}div.current-time-container{height:var(--eva-scrub-bar-heights);background-color:var(--eva-scrub-bar-current-time-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaScrubBarCurrentTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: EvaScrubBarCurrentTime, isStandalone: true, selector: "eva-scrub-bar-current-time", ngImport: i0, template: "<div class=\"current-time-container\" [style.width]=\"currentTimePercentage()\">\n</div>", styles: [":host{display:flex;width:100%;height:var(--eva-scrub-bar-heights);pointer-events:none;position:absolute;left:0;top:0;border-radius:2px}div.current-time-container{height:var(--eva-scrub-bar-heights);background-color:var(--eva-scrub-bar-current-time-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaScrubBarCurrentTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaScrubBarCurrentTime, decorators: [{
             type: Component,
             args: [{ selector: 'eva-scrub-bar-current-time', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"current-time-container\" [style.width]=\"currentTimePercentage()\">\n</div>", styles: [":host{display:flex;width:100%;height:var(--eva-scrub-bar-heights);pointer-events:none;position:absolute;left:0;top:0;border-radius:2px}div.current-time-container{height:var(--eva-scrub-bar-heights);background-color:var(--eva-scrub-bar-current-time-background)}\n"] }]
         }] });
@@ -3997,10 +4047,10 @@ class EvaScrubBar {
             this.hideControls.set(true);
         }, this.evaAutohideTime());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaScrubBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaScrubBar, isStandalone: true, selector: "eva-scrub-bar", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, hideWithControlsContainer: { classPropertyName: "hideWithControlsContainer", publicName: "hideWithControlsContainer", isSignal: true, isRequired: false, transformFunction: null }, evaSlidingEnabled: { classPropertyName: "evaSlidingEnabled", publicName: "evaSlidingEnabled", isSignal: true, isRequired: false, transformFunction: null }, evaAutohideTime: { classPropertyName: "evaAutohideTime", publicName: "evaAutohideTime", isSignal: true, isRequired: false, transformFunction: null }, evaShowTimeOnHover: { classPropertyName: "evaShowTimeOnHover", publicName: "evaShowTimeOnHover", isSignal: true, isRequired: false, transformFunction: null }, evaTimeFormat: { classPropertyName: "evaTimeFormat", publicName: "evaTimeFormat", isSignal: true, isRequired: false, transformFunction: null }, evaShowChapters: { classPropertyName: "evaShowChapters", publicName: "evaShowChapters", isSignal: true, isRequired: false, transformFunction: null }, evaChapters: { classPropertyName: "evaChapters", publicName: "evaChapters", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "slider", "aria-valuemin": "0", "aria-valuemax": "100" }, listeners: { "mousedown": "mouseDownScrub($event)", "document:mouseup": "mouseUpScrubBar($event)", "touchstart": "touchStartScrub($event)", "document:touchcancel": "touchCancelScrub($event)", "document:touchend": "touchEndScrub($event)", "keydown": "arrowAdjustTime($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "getPercentage()", "attr.aria-valuetext": "getPercentage()", "class.hide": "hideControls()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (evaShowChapters() && chapters().length > 0) {\n<div class=\"eva-chapter-markers\">\n\t@for (chapter of chapters(); track chapter.startTime) {\n\t<div class=\"eva-chapter-marker\" [style.left]=\"getChapterLeftPercent(chapter)\"\n\t\t[style.width]=\"getChapterWidthPercent(chapter)\">\n\t</div>\n\t}\n</div>\n}\n\n@if (hoverTime() !== null) {\n<div class=\"eva-hover-tooltip\" [style.left.px]=\"hoverLeft()\">\n\t<span class=\"eva-hover-time\">{{ hoverTime() }} @if(hoverChapter()) { {{hoverChapter()}}}</span>\n</div>\n}", styles: [":host{user-select:none;position:absolute;width:100%;height:var(--eva-scrub-bar-heights);bottom:var(--eva-control-element-height);margin:0;cursor:pointer;display:flex;align-items:center;background:var(--eva-scrub-bar-background);z-index:303;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:bottom var(--eva-transition-duration) ease-in-out,opacity var(--eva-transition-duration) ease-in-out}:host-context(eva-controls-container){position:relative;bottom:0;background:var(--eva-scrub-bar-background);height:var(--eva-scrub-bar-heights);flex-grow:1;flex-basis:0;margin:0 10px;-webkit-transition:initial;-khtml-transition:initial;-moz-transition:initial;-ms-transition:initial;transition:initial}:host(.hide){bottom:0!important;opacity:1}.eva-chapter-markers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.eva-chapter-marker{position:absolute;top:0;height:100%;border-right:var(--eva-scrub-bar-chapter-marker-width) solid var(--eva-scrub-bar-chapter-marker-color);box-sizing:border-box}.eva-chapter-marker:last-child{border-right:none}.eva-hover-tooltip{position:absolute;bottom:calc(100% + 8px);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;z-index:400;will-change:left}.eva-hover-chapter{background-color:var(--eva-scrub-bar-chapter-hover-background-color);color:var(--eva-scrub-bar-chapter-hover-text-color);padding:3px 8px;border-radius:4px;font-size:var(--eva-scrub-bar-chapter-hover-font-size);white-space:nowrap;text-align:center;max-width:160px;overflow:hidden;text-overflow:ellipsis}.eva-hover-time{background-color:var(--eva-scrub-bar-chapter-hover-tooltip-background-color);color:var(--eva-scrub-bar-chapter-hover-tooltip-text-color);padding:4px 8px;border-radius:4px;font-size:var(--eva-scrub-bar-chapter-hover-tooltip-font-size);font-family:var(--eva-font-family);white-space:nowrap;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaScrubBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaScrubBar, isStandalone: true, selector: "eva-scrub-bar", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null }, hideWithControlsContainer: { classPropertyName: "hideWithControlsContainer", publicName: "hideWithControlsContainer", isSignal: true, isRequired: false, transformFunction: null }, evaSlidingEnabled: { classPropertyName: "evaSlidingEnabled", publicName: "evaSlidingEnabled", isSignal: true, isRequired: false, transformFunction: null }, evaAutohideTime: { classPropertyName: "evaAutohideTime", publicName: "evaAutohideTime", isSignal: true, isRequired: false, transformFunction: null }, evaShowTimeOnHover: { classPropertyName: "evaShowTimeOnHover", publicName: "evaShowTimeOnHover", isSignal: true, isRequired: false, transformFunction: null }, evaTimeFormat: { classPropertyName: "evaTimeFormat", publicName: "evaTimeFormat", isSignal: true, isRequired: false, transformFunction: null }, evaShowChapters: { classPropertyName: "evaShowChapters", publicName: "evaShowChapters", isSignal: true, isRequired: false, transformFunction: null }, evaChapters: { classPropertyName: "evaChapters", publicName: "evaChapters", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "slider", "aria-valuemin": "0", "aria-valuemax": "100" }, listeners: { "mousedown": "mouseDownScrub($event)", "document:mouseup": "mouseUpScrubBar($event)", "touchstart": "touchStartScrub($event)", "document:touchcancel": "touchCancelScrub($event)", "document:touchend": "touchEndScrub($event)", "keydown": "arrowAdjustTime($event)" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "getPercentage()", "attr.aria-valuetext": "getPercentage()", "class.hide": "hideControls()" } }, ngImport: i0, template: "<ng-content></ng-content>\n\n@if (evaShowChapters() && chapters().length > 0) {\n<div class=\"eva-chapter-markers\">\n\t@for (chapter of chapters(); track chapter.startTime) {\n\t<div class=\"eva-chapter-marker\" [style.left]=\"getChapterLeftPercent(chapter)\"\n\t\t[style.width]=\"getChapterWidthPercent(chapter)\">\n\t</div>\n\t}\n</div>\n}\n\n@if (hoverTime() !== null) {\n<div class=\"eva-hover-tooltip\" [style.left.px]=\"hoverLeft()\">\n\t<span class=\"eva-hover-time\">{{ hoverTime() }} @if(hoverChapter()) { {{hoverChapter()}}}</span>\n</div>\n}", styles: [":host{user-select:none;position:absolute;width:100%;height:var(--eva-scrub-bar-heights);bottom:var(--eva-control-element-height);margin:0;cursor:pointer;display:flex;align-items:center;background:var(--eva-scrub-bar-background);z-index:303;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;transition:bottom var(--eva-transition-duration) ease-in-out,opacity var(--eva-transition-duration) ease-in-out}:host-context(eva-controls-container){position:relative;bottom:0;background:var(--eva-scrub-bar-background);height:var(--eva-scrub-bar-heights);flex-grow:1;flex-basis:0;margin:0 10px;-webkit-transition:initial;-khtml-transition:initial;-moz-transition:initial;-ms-transition:initial;transition:initial}:host(.hide){bottom:0!important;opacity:1}.eva-chapter-markers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.eva-chapter-marker{position:absolute;top:0;height:100%;border-right:var(--eva-scrub-bar-chapter-marker-width) solid var(--eva-scrub-bar-chapter-marker-color);box-sizing:border-box}.eva-chapter-marker:last-child{border-right:none}.eva-hover-tooltip{position:absolute;bottom:calc(100% + 8px);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;z-index:400;will-change:left}.eva-hover-chapter{background-color:var(--eva-scrub-bar-chapter-hover-background-color);color:var(--eva-scrub-bar-chapter-hover-text-color);padding:3px 8px;border-radius:4px;font-size:var(--eva-scrub-bar-chapter-hover-font-size);white-space:nowrap;text-align:center;max-width:160px;overflow:hidden;text-overflow:ellipsis}.eva-hover-time{background-color:var(--eva-scrub-bar-chapter-hover-tooltip-background-color);color:var(--eva-scrub-bar-chapter-hover-tooltip-text-color);padding:4px 8px;border-radius:4px;font-size:var(--eva-scrub-bar-chapter-hover-tooltip-font-size);font-family:var(--eva-font-family);white-space:nowrap;text-align:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaScrubBar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaScrubBar, decorators: [{
             type: Component,
             args: [{ selector: 'eva-scrub-bar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -4097,10 +4147,10 @@ class EvaSubtitleDisplay {
         this.controlsVisibility$?.unsubscribe();
         this.pipWindowActive$?.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaSubtitleDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaSubtitleDisplay, isStandalone: true, selector: "eva-subtitle-display", host: { properties: { "class.eva-subtitle-display--visible": "cue() !== null && !pipWindowActive()", "style.padding-bottom": "controlsCointainerNotVisible() ? '8px' : 'calc(var(--eva-control-element-height) + var(--eva-scrub-bar-heights) + 12px)'" } }, ngImport: i0, template: "@if (cue() && !pipWindowActive()) {\n<span class=\"eva-subtitle-cue\" [innerHTML]=\"cue()\"></span>\n}", styles: [":host{display:none;visibility:hidden;position:absolute;inset-inline:0;bottom:0;pointer-events:none;text-align:center;z-index:10;transition:padding-bottom var(--eva-transition-duration) ease-in-out}:host(.eva-subtitle-display--visible){display:block!important;visibility:visible!important}.eva-subtitle-cue{display:inline-block;font-size:var(--eva-subtitle-font-size);line-height:1.4;font-family:var(--eva-subtitle-font-family);color:var(--eva-subtitle-color, #ffffff);background-color:var(--eva-subtitle-background, rgba(0, 0, 0, .72));padding:var(--eva-subtitle-padding);border-radius:3px;white-space:pre-line}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaSubtitleDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaSubtitleDisplay, isStandalone: true, selector: "eva-subtitle-display", host: { properties: { "class.eva-subtitle-display--visible": "cue() !== null && !pipWindowActive()", "style.padding-bottom": "controlsCointainerNotVisible() ? '8px' : 'calc(var(--eva-control-element-height) + var(--eva-scrub-bar-heights) + 12px)'" } }, ngImport: i0, template: "@if (cue() && !pipWindowActive()) {\n<span class=\"eva-subtitle-cue\" [innerHTML]=\"cue()\"></span>\n}", styles: [":host{display:none;visibility:hidden;position:absolute;inset-inline:0;bottom:0;pointer-events:none;text-align:center;z-index:10;transition:padding-bottom var(--eva-transition-duration) ease-in-out}:host(.eva-subtitle-display--visible){display:block!important;visibility:visible!important}.eva-subtitle-cue{display:inline-block;font-size:var(--eva-subtitle-font-size);line-height:1.4;font-family:var(--eva-subtitle-font-family);color:var(--eva-subtitle-color, #ffffff);background-color:var(--eva-subtitle-background, rgba(0, 0, 0, .72));padding:var(--eva-subtitle-padding);border-radius:3px;white-space:pre-line}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaSubtitleDisplay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaSubtitleDisplay, decorators: [{
             type: Component,
             args: [{ selector: "eva-subtitle-display", changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         // Suppressed during PiP — the browser renders subtitles natively inside the PiP window
@@ -4247,10 +4297,10 @@ class EvaTimeDisplay {
                 return `${minutes}:${secs.toString().padStart(2, '0')}`;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaTimeDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaTimeDisplay, isStandalone: true, selector: "eva-time-display", inputs: { evaTimeProperty: { classPropertyName: "evaTimeProperty", publicName: "evaTimeProperty", isSignal: true, isRequired: true, transformFunction: null }, evaTimeFormating: { classPropertyName: "evaTimeFormating", publicName: "evaTimeFormating", isSignal: true, isRequired: true, transformFunction: null }, evaLiveText: { classPropertyName: "evaLiveText", publicName: "evaLiveText", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "timer" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-live": "'off'", "attr.aria-atomic": "'true'", "attr.aria-valuetext": "displayText()" } }, ngImport: i0, template: "@if(evaAPI.isLive()){\n<span>{{evaLiveText()}}</span>\n}\n@else {\n<span>{{evaAPI.time()[evaTimeProperty()] | evaTimeDisplay: evaTimeFormating(): evaTimeProperty()}}</span>\n}", styles: [":host{display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);min-width:30px;cursor:pointer;color:var(--eva-time-display-text-color);pointer-events:none;padding:0 6px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host>span{font-family:var(--eva-font-family)}\n"], dependencies: [{ kind: "pipe", type: EvaTimeDisplayPipe, name: "evaTimeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaTimeDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaTimeDisplay, isStandalone: true, selector: "eva-time-display", inputs: { evaTimeProperty: { classPropertyName: "evaTimeProperty", publicName: "evaTimeProperty", isSignal: true, isRequired: true, transformFunction: null }, evaTimeFormating: { classPropertyName: "evaTimeFormating", publicName: "evaTimeFormating", isSignal: true, isRequired: true, transformFunction: null }, evaLiveText: { classPropertyName: "evaLiveText", publicName: "evaLiveText", isSignal: true, isRequired: false, transformFunction: null }, evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "timer" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-live": "'off'", "attr.aria-atomic": "'true'", "attr.aria-valuetext": "displayText()" } }, ngImport: i0, template: "@if(evaAPI.isLive()){\n<span>{{evaLiveText()}}</span>\n}\n@else {\n<span>{{evaAPI.time()[evaTimeProperty()] | evaTimeDisplay: evaTimeFormating(): evaTimeProperty()}}</span>\n}", styles: [":host{display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);min-width:30px;cursor:pointer;color:var(--eva-time-display-text-color);pointer-events:none;padding:0 6px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host>span{font-family:var(--eva-font-family)}\n"], dependencies: [{ kind: "pipe", type: EvaTimeDisplayPipe, name: "evaTimeDisplay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaTimeDisplay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaTimeDisplay, decorators: [{
             type: Component,
             args: [{ selector: 'eva-time-display', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -4602,10 +4652,10 @@ class EvaTrackSelector {
         let t = this.localTracks().find(a => a.selected === true);
         this.evaAPI.subtitlesChanged(t ? t : null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaTrackSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaTrackSelector, isStandalone: true, selector: "eva-track-selector", inputs: { evaTrackSelectorText: { classPropertyName: "evaTrackSelectorText", publicName: "evaTrackSelectorText", isSignal: true, isRequired: false, transformFunction: null }, evaTrackOffText: { classPropertyName: "evaTrackOffText", publicName: "evaTrackOffText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.eva-icon": "true", "class.open": "isOpen()", "attr.aria-label": "evaTrackSelectorText()" } }, ngImport: i0, template: "<div class=\"eva-track-selector-container\">\n\t<!-- Current Track Display Button -->\n\t<button type=\"button\" class=\"eva-track-selector-button\"\n\t\t[attr.aria-label]=\"evaTrackSelectorText() + ': ' + (currentTrack() || evaTrackOffText())\"\n\t\t[attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n\t\t[attr.aria-controls]=\"'track-dropdown-' + uniqueId\" (click)=\"trackSelectorClicked()\"\n\t\t(keydown)=\"playbackClickedKeyboard($event)\">\n\t\t<span class=\"speed-icon\" aria-hidden=\"true\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"speed-label\">{{ currentTrack() || evaTrackOffText() }}</span>\n\t\t<span class=\"dropdown-arrow\" [class.rotated]=\"isOpen()\" aria-hidden=\"true\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</button>\n\n\t<!-- Dropdown Menu -->\n\t<div class=\"eva-track-selector-dropdown\" [class.show]=\"isOpen()\" [attr.id]=\"'track-dropdown-' + uniqueId\"\n\t\trole=\"listbox\" [attr.aria-label]=\"evaTrackSelectorText()\"\n\t\t[attr.aria-activedescendant]=\"isOpen() ? 'track-option-' + uniqueId + '-' + getActiveIndex() : null\">\n\t\t<div class=\"dropdown-content\">\n\t\t\t<div class=\"dropdown-header\" id=\"track-header-{{uniqueId}}\" role=\"presentation\">\n\t\t\t\t{{evaTrackSelectorText()}}\n\t\t\t</div>\n\t\t\t<div class=\"speed-options\" role=\"presentation\">\n\t\t\t\t@for (tr of localTracks(); track tr.id; let i = $index) {\n\t\t\t\t<button type=\"button\" class=\"speed-option\" [class.active]=\"tr.selected\"\n\t\t\t\t\t[attr.id]=\"'track-option-' + uniqueId + '-' + i\" (click)=\"selectTrack(tr, i)\"\n\t\t\t\t\t[attr.aria-selected]=\"tr.selected\" role=\"option\" [attr.tabindex]=\"isOpen() ? 0 : -1\">\n\t\t\t\t\t<span class=\"speed-text\">{{ tr.label }}</span>\n\t\t\t\t\t@if (tr.selected) {\n\t\t\t\t\t<span class=\"checkmark\" aria-hidden=\"true\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"></polyline>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:#fff;position:relative;outline:none}:host:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;border-radius:4px}:host:hover{background-color:var(--eva-track-selector-hover-background);border-radius:4px}:host.open{background-color:var(--eva-track-selector-opened-background);border-radius:4px}.eva-track-selector-container{position:relative;display:flex;align-items:center;justify-content:center}.eva-track-selector-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}.eva-track-selector-button .speed-icon{display:none}.eva-track-selector-button .speed-label{font-family:var(--eva-font-family);font-size:var(--eva-track-selector-label-font-size);font-weight:600;color:var(--eva-track-selector-label-color);white-space:nowrap;line-height:1}.eva-track-selector-button .dropdown-arrow{display:flex;align-items:center;width:var(--eva-track-selector-dropdown-arrow-size);height:var(--eva-track-selector-dropdown-arrow-size);color:var(--eva-track-selector-dropdown-arrow-color);transition:transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.eva-track-selector-button .dropdown-arrow svg{width:100%;height:100%}.eva-track-selector-button .dropdown-arrow.rotated{transform:rotate(180deg)}.eva-track-selector-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);margin-bottom:4px;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),visibility var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1);transform:translate(-50%) translateY(0) scale(.95);transform-origin:bottom center}.eva-track-selector-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(-8px) scale(1)}@media(max-width:768px){.eva-track-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}.eva-track-selector-dropdown.show{transform:translateY(-8px) scale(1)}}:host-context(.controls-left) .eva-track-selector-dropdown{left:0;transform:translateY(-8px)}:host-context(.controls-left) .eva-track-selector-dropdown.show{transform:translateY(-8px) scale(1)}:host-context(.controls-right) .eva-track-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}:host-context(.controls-right) .eva-track-selector-dropdown.show{transform:translateY(-8px) scale(1)}.dropdown-content{background:var(--eva-track-selector-dropdown-content-background);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:var(--eva-track-selector-dropdown-content-box-shadow);overflow:hidden;min-width:180px;animation:slideIn var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}@media(max-width:768px){.dropdown-content{min-width:150px}}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:10px 14px 8px;font-family:var(--eva-font-family);font-size:var(--eva-track-selector-dropdown-content-header-font-size);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--eva-track-selector-dropdown-content-header-font-color);border-bottom:var(--eva-track-selector-dropdown-content-header-bottom-border)}.speed-options{padding:4px;max-height:280px;overflow-y:auto}.speed-options::-webkit-scrollbar{width:6px}.speed-options::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.speed-options::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.speed-options::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.speed-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color var(--eva-transition-duration) ease,transform var(--eva-transition-duration) ease;outline:none}.speed-option:hover{background-color:var(--eva-track-selector-dropdown-content-speed-option-bacground-hover)}.speed-option:active{transform:scale(.98)}.speed-option.active{background-color:#3b82f64d}.speed-option.active:hover{background-color:#3b82f666}.speed-option .speed-text{font-family:var(--eva-font-family);font-size:var(--eva-track-selector-dropdown-content-speed-option-font-size);font-weight:500;color:var(--eva-track-selector-dropdown-content-speed-option-font-color);transition:color var(--eva-transition-duration) ease}.speed-option .checkmark{display:flex;align-items:center;width:var(--eva-track-selector-dropdown-content-speed-option-checkmark-size);height:var(--eva-track-selector-dropdown-content-speed-option-checkmark-size);color:var(--eva-track-selector-dropdown-content-speed-option-checkmark-color);animation:checkmarkAppear var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.speed-option .checkmark svg{width:100%;height:100%}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.eva-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.speed-option:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.speed-option:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.eva-track-selector-dropdown:not(.show){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaTrackSelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaTrackSelector, isStandalone: true, selector: "eva-track-selector", inputs: { evaTrackSelectorText: { classPropertyName: "evaTrackSelectorText", publicName: "evaTrackSelectorText", isSignal: true, isRequired: false, transformFunction: null }, evaTrackOffText: { classPropertyName: "evaTrackOffText", publicName: "evaTrackOffText", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.eva-icon": "true", "class.open": "isOpen()", "attr.aria-label": "evaTrackSelectorText()" } }, ngImport: i0, template: "<div class=\"eva-track-selector-container\">\n\t<!-- Current Track Display Button -->\n\t<button type=\"button\" class=\"eva-track-selector-button\"\n\t\t[attr.aria-label]=\"evaTrackSelectorText() + ': ' + (currentTrack() || evaTrackOffText())\"\n\t\t[attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n\t\t[attr.aria-controls]=\"'track-dropdown-' + uniqueId\" (click)=\"trackSelectorClicked()\"\n\t\t(keydown)=\"playbackClickedKeyboard($event)\">\n\t\t<span class=\"speed-icon\" aria-hidden=\"true\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" />\n\t\t\t</svg>\n\t\t</span>\n\t\t<span class=\"speed-label\">{{ currentTrack() || evaTrackOffText() }}</span>\n\t\t<span class=\"dropdown-arrow\" [class.rotated]=\"isOpen()\" aria-hidden=\"true\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t<polyline points=\"6 9 12 15 18 9\"></polyline>\n\t\t\t</svg>\n\t\t</span>\n\t</button>\n\n\t<!-- Dropdown Menu -->\n\t<div class=\"eva-track-selector-dropdown\" [class.show]=\"isOpen()\" [attr.id]=\"'track-dropdown-' + uniqueId\"\n\t\trole=\"listbox\" [attr.aria-label]=\"evaTrackSelectorText()\"\n\t\t[attr.aria-activedescendant]=\"isOpen() ? 'track-option-' + uniqueId + '-' + getActiveIndex() : null\">\n\t\t<div class=\"dropdown-content\">\n\t\t\t<div class=\"dropdown-header\" id=\"track-header-{{uniqueId}}\" role=\"presentation\">\n\t\t\t\t{{evaTrackSelectorText()}}\n\t\t\t</div>\n\t\t\t<div class=\"speed-options\" role=\"presentation\">\n\t\t\t\t@for (tr of localTracks(); track tr.id; let i = $index) {\n\t\t\t\t<button type=\"button\" class=\"speed-option\" [class.active]=\"tr.selected\"\n\t\t\t\t\t[attr.id]=\"'track-option-' + uniqueId + '-' + i\" (click)=\"selectTrack(tr, i)\"\n\t\t\t\t\t[attr.aria-selected]=\"tr.selected\" role=\"option\" [attr.tabindex]=\"isOpen() ? 0 : -1\">\n\t\t\t\t\t<span class=\"speed-text\">{{ tr.label }}</span>\n\t\t\t\t\t@if (tr.selected) {\n\t\t\t\t\t<span class=\"checkmark\" aria-hidden=\"true\">\n\t\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n\t\t\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\"></polyline>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t\t}\n\t\t\t\t</button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:var(--eva-control-element-height);width:50px;cursor:pointer;color:#fff;position:relative;outline:none}:host:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;border-radius:4px}:host:hover{background-color:var(--eva-track-selector-hover-background);border-radius:4px}:host.open{background-color:var(--eva-track-selector-opened-background);border-radius:4px}.eva-track-selector-container{position:relative;display:flex;align-items:center;justify-content:center}.eva-track-selector-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}.eva-track-selector-button .speed-icon{display:none}.eva-track-selector-button .speed-label{font-family:var(--eva-font-family);font-size:var(--eva-track-selector-label-font-size);font-weight:600;color:var(--eva-track-selector-label-color);white-space:nowrap;line-height:1}.eva-track-selector-button .dropdown-arrow{display:flex;align-items:center;width:var(--eva-track-selector-dropdown-arrow-size);height:var(--eva-track-selector-dropdown-arrow-size);color:var(--eva-track-selector-dropdown-arrow-color);transition:transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.eva-track-selector-button .dropdown-arrow svg{width:100%;height:100%}.eva-track-selector-button .dropdown-arrow.rotated{transform:rotate(180deg)}.eva-track-selector-dropdown{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);margin-bottom:4px;z-index:1000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),visibility var(--eva-transition-duration) cubic-bezier(.4,0,.2,1),transform var(--eva-transition-duration) cubic-bezier(.4,0,.2,1);transform:translate(-50%) translateY(0) scale(.95);transform-origin:bottom center}.eva-track-selector-dropdown.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%) translateY(-8px) scale(1)}@media(max-width:768px){.eva-track-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}.eva-track-selector-dropdown.show{transform:translateY(-8px) scale(1)}}:host-context(.controls-left) .eva-track-selector-dropdown{left:0;transform:translateY(-8px)}:host-context(.controls-left) .eva-track-selector-dropdown.show{transform:translateY(-8px) scale(1)}:host-context(.controls-right) .eva-track-selector-dropdown{left:auto;right:0;transform:translateY(-8px)}:host-context(.controls-right) .eva-track-selector-dropdown.show{transform:translateY(-8px) scale(1)}.dropdown-content{background:var(--eva-track-selector-dropdown-content-background);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:8px;box-shadow:var(--eva-track-selector-dropdown-content-box-shadow);overflow:hidden;min-width:180px;animation:slideIn var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}@media(max-width:768px){.dropdown-content{min-width:150px}}@keyframes slideIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{padding:10px 14px 8px;font-family:var(--eva-font-family);font-size:var(--eva-track-selector-dropdown-content-header-font-size);font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--eva-track-selector-dropdown-content-header-font-color);border-bottom:var(--eva-track-selector-dropdown-content-header-bottom-border)}.speed-options{padding:4px;max-height:280px;overflow-y:auto}.speed-options::-webkit-scrollbar{width:6px}.speed-options::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.speed-options::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.speed-options::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.speed-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color var(--eva-transition-duration) ease,transform var(--eva-transition-duration) ease;outline:none}.speed-option:hover{background-color:var(--eva-track-selector-dropdown-content-speed-option-bacground-hover)}.speed-option:active{transform:scale(.98)}.speed-option.active{background-color:#3b82f64d}.speed-option.active:hover{background-color:#3b82f666}.speed-option .speed-text{font-family:var(--eva-font-family);font-size:var(--eva-track-selector-dropdown-content-speed-option-font-size);font-weight:500;color:var(--eva-track-selector-dropdown-content-speed-option-font-color);transition:color var(--eva-transition-duration) ease}.speed-option .checkmark{display:flex;align-items:center;width:var(--eva-track-selector-dropdown-content-speed-option-checkmark-size);height:var(--eva-track-selector-dropdown-content-speed-option-checkmark-size);color:var(--eva-track-selector-dropdown-content-speed-option-checkmark-color);animation:checkmarkAppear var(--eva-transition-duration) cubic-bezier(.4,0,.2,1)}.speed-option .checkmark svg{width:100%;height:100%}@keyframes checkmarkAppear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.eva-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.speed-option:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.speed-option:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:-2px}.eva-track-selector-dropdown:not(.show){display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaTrackSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaTrackSelector, decorators: [{
             type: Component,
             args: [{ selector: 'eva-track-selector', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "[class.eva-icon]": "true",
@@ -4970,10 +5020,10 @@ class EvaVolume {
     onBlur() {
         this.isFocused.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaVolume, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaVolume, isStandalone: true, selector: "eva-volume", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "slider", "aria-orientation": "horizontal", "aria-valuemin": "0", "aria-valuemax": "100" }, listeners: { "click": "onClick($event)", "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "touchstart": "onTouchStart($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "ariaValue()", "attr.aria-valuetext": "ariaValue() + ' percent'", "class.eva-volume-focused": "isFocused()" } }, viewQueries: [{ propertyName: "volumeBar", first: true, predicate: ["volumeBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #volumeBar class=\"volumeBar\">\n\t<div class=\"volumeBackground\" [class.dragging]=\"isDragging()\">\n\t\t<div class=\"volumeValue\" [style.width]=\"videoVolume() * (100 - 15) + '%'\" aria-hidden=\"true\"></div>\n\t\t<div class=\"volumeKnob\" [style.left]=\"videoVolume() * (100 - 15) + '%'\" aria-hidden=\"true\"></div>\n\t</div>\n</div>\n\n<!-- Screen reader announcements for volume changes -->\n<div class=\"eva-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n\t@if (shouldAnnounceVolume()) {\n\t<span>Volume {{ ariaValue() }} percent</span>\n\t}\n</div>\n", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;height:var(--eva-control-element-height);width:var(--eva-volume-width);cursor:pointer;position:relative;padding:0 8px}.volumeBar{position:relative;display:flex;flex-grow:1;align-items:center;outline:none;border-radius:4px;transition:background-color var(--eva-transition-duration) ease}.volumeBar:focus{outline:none}.volumeBar:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;background-color:#ffffff0d}.volumeBar:active .volumeKnob{transform:translateY(-50%) scale(1.1)}.volumeBackground{display:flex;flex-grow:1;height:var(--eva-volume-track-height);pointer-events:none;background-color:var(--eva-volume-background-color);border-radius:3px;position:relative;transition:height var(--eva-transition-duration) ease}.volumeBackground.dragging{height:var(--eva-volume-track-height-dragging)}.volumeValue{display:flex;height:100%;pointer-events:none;background-color:var(--eva-volume-track-background-color);transition:width var(--eva-transition-duration) ease-out;border-radius:3px;position:relative}.volumeKnob{position:absolute;width:var(--eva-volume-knob-size);height:var(--eva-volume-knob-size);left:0;top:50%;transform:translateY(-50%);border-radius:50%;pointer-events:none;background-color:var(--eva-volume-knob-background-color);box-shadow:var(--eva-volume-knob-box-shadow);transition:all var(--eva-transition-duration) ease-out;z-index:1}.volumeKnob:before{content:\"\";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent)}.volumeBackground.dragging .volumeValue,.volumeBackground.dragging .volumeKnob{transition:none}.eva-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-contrast:high){.volumeBar:focus-visible{outline-width:3px}.volumeBackground{background-color:#fff6}}@media(prefers-reduced-motion:reduce){.volumeBar,.volumeBackground,.volumeValue,.volumeKnob{transition:none!important}}@media(pointer:coarse){.volumeBar{padding:8px 0}.volumeKnob{width:18px;height:18px}}:host.eva-volume-focused .volumeBackground{background-color:#ffffff40}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaVolume, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaVolume, isStandalone: true, selector: "eva-volume", inputs: { evaAria: { classPropertyName: "evaAria", publicName: "evaAria", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0", "role": "slider", "aria-orientation": "horizontal", "aria-valuemin": "0", "aria-valuemax": "100" }, listeners: { "click": "onClick($event)", "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "touchstart": "onTouchStart($event)", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-valuenow": "ariaValue()", "attr.aria-valuetext": "ariaValue() + ' percent'", "class.eva-volume-focused": "isFocused()" } }, viewQueries: [{ propertyName: "volumeBar", first: true, predicate: ["volumeBar"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #volumeBar class=\"volumeBar\">\n\t<div class=\"volumeBackground\" [class.dragging]=\"isDragging()\">\n\t\t<div class=\"volumeValue\" [style.width]=\"videoVolume() * (100 - 15) + '%'\" aria-hidden=\"true\"></div>\n\t\t<div class=\"volumeKnob\" [style.left]=\"videoVolume() * (100 - 15) + '%'\" aria-hidden=\"true\"></div>\n\t</div>\n</div>\n\n<!-- Screen reader announcements for volume changes -->\n<div class=\"eva-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n\t@if (shouldAnnounceVolume()) {\n\t<span>Volume {{ ariaValue() }} percent</span>\n\t}\n</div>\n", styles: [":host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;justify-content:center;height:var(--eva-control-element-height);width:var(--eva-volume-width);cursor:pointer;position:relative;padding:0 8px}.volumeBar{position:relative;display:flex;flex-grow:1;align-items:center;outline:none;border-radius:4px;transition:background-color var(--eva-transition-duration) ease}.volumeBar:focus{outline:none}.volumeBar:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px;background-color:#ffffff0d}.volumeBar:active .volumeKnob{transform:translateY(-50%) scale(1.1)}.volumeBackground{display:flex;flex-grow:1;height:var(--eva-volume-track-height);pointer-events:none;background-color:var(--eva-volume-background-color);border-radius:3px;position:relative;transition:height var(--eva-transition-duration) ease}.volumeBackground.dragging{height:var(--eva-volume-track-height-dragging)}.volumeValue{display:flex;height:100%;pointer-events:none;background-color:var(--eva-volume-track-background-color);transition:width var(--eva-transition-duration) ease-out;border-radius:3px;position:relative}.volumeKnob{position:absolute;width:var(--eva-volume-knob-size);height:var(--eva-volume-knob-size);left:0;top:50%;transform:translateY(-50%);border-radius:50%;pointer-events:none;background-color:var(--eva-volume-knob-background-color);box-shadow:var(--eva-volume-knob-box-shadow);transition:all var(--eva-transition-duration) ease-out;z-index:1}.volumeKnob:before{content:\"\";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent)}.volumeBackground.dragging .volumeValue,.volumeBackground.dragging .volumeKnob{transition:none}.eva-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-contrast:high){.volumeBar:focus-visible{outline-width:3px}.volumeBackground{background-color:#fff6}}@media(prefers-reduced-motion:reduce){.volumeBar,.volumeBackground,.volumeValue,.volumeKnob{transition:none!important}}@media(pointer:coarse){.volumeBar{padding:8px 0}.volumeKnob{width:18px;height:18px}}:host.eva-volume-focused .volumeBackground{background-color:#ffffff40}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaVolume, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaVolume, decorators: [{
             type: Component,
             args: [{ selector: 'eva-volume', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         "tabindex": "0",
@@ -5080,10 +5130,10 @@ class EvaCueChangeDirective {
             this.evaAPI.onCueChange(null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaCueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: EvaCueChangeDirective, isStandalone: true, selector: "track[evaCueChange]", inputs: { evaCueChangeActive: { classPropertyName: "evaCueChangeActive", publicName: "evaCueChangeActive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaCueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: EvaCueChangeDirective, isStandalone: true, selector: "track[evaCueChange]", inputs: { evaCueChangeActive: { classPropertyName: "evaCueChangeActive", publicName: "evaCueChangeActive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaCueChangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaCueChangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'track[evaCueChange]'
@@ -5125,8 +5175,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  */
 class EvaMediaEventListenersDirective {
     evaAPI = inject(EvaApi);
+    fullscreenService = inject(EvaFullscreenAPI);
     elementRef = inject((ElementRef));
     subs = [];
+    // private lastTapTime: number = 0;
     ngOnInit() {
         const el = this.elementRef.nativeElement;
         const on = (event, handler) => {
@@ -5138,6 +5190,7 @@ class EvaMediaEventListenersDirective {
         on(EvaVideoEvent.LOADED_METADATA, e => this.evaAPI.loadedVideoMetadata(e));
         on(EvaVideoEvent.PAUSE, () => this.evaAPI.pauseVideo());
         on(EvaVideoEvent.PLAY, () => this.evaAPI.playVideo());
+        on(EvaVideoEvent.DOUBLE_CLICK, () => this.fullscreenService.toggleFullscreen());
         on(EvaVideoEvent.PLAYING, () => this.evaAPI.playingVideo());
         on(EvaVideoEvent.PROGRESS, () => this.evaAPI.checkBufferStatus());
         on(EvaVideoEvent.RATECHANGE, e => this.evaAPI.playbackRateVideoChanged(e));
@@ -5149,14 +5202,32 @@ class EvaMediaEventListenersDirective {
         on(EvaVideoEvent.WAITING, () => this.evaAPI.videoWaiting());
         on(EvaVideoEvent.ENTERED_PICTURE_IN_PICTURE, e => this.evaAPI.assignPictureInPictureWindow(e));
         on(EvaVideoEvent.LEFT_PICTURE_IN_PICTURE, e => this.evaAPI.removePictureInPictureWindow(e));
+        // this.subs.push(
+        //   fromEvent<TouchEvent>(el, 'touchend')
+        //     .subscribe((e) => {
+        //       console.log(e);
+        //       const now = e.timeStamp;
+        //       if (now - this.lastTapTime <= 300) {
+        //         const rect = el.getBoundingClientRect();
+        //         const tapX = e.changedTouches[0].clientX;
+        //         if (tapX < rect.left + rect.width / 2) {
+        //           this.evaAPI.seekBack(10);
+        //         } else {
+        //           this.evaAPI.seekForward(10);
+        //         }
+        //         this.lastTapTime = 0;
+        //       } else {
+        //         this.lastTapTime = now;
+        //       }
+        //     }));
     }
     ngOnDestroy() {
         this.subs.forEach(s => s.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaMediaEventListenersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: EvaMediaEventListenersDirective, isStandalone: true, selector: "video[evaMediaEventListeners]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaMediaEventListenersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: EvaMediaEventListenersDirective, isStandalone: true, selector: "video[evaMediaEventListeners]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaMediaEventListenersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaMediaEventListenersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'video[evaMediaEventListeners]'
@@ -5233,21 +5304,18 @@ class EvaUserInteractionEventsDirective {
      * - All streams are automatically torn down when `destroy$` emits via `takeUntil`.
      */
     prepareListeners() {
-        const mousemove$ = fromEvent(this.evaAPI.assignedVideoElement, 'mousemove')
-            .pipe(throttleTime(100));
-        const touchstart$ = fromEvent(this.evaAPI.assignedVideoElement, 'touchstart');
-        const click$ = fromEvent(this.evaAPI.assignedVideoElement, 'click');
-        // Merge all user interaction events
+        const videoEl = this.evaAPI.assignedVideoElement;
+        const mousemove$ = fromEvent(videoEl, 'mousemove').pipe(throttleTime(100));
+        const touchstart$ = fromEvent(videoEl, 'touchstart');
+        const click$ = fromEvent(videoEl, 'click');
         merge(mousemove$, touchstart$, click$)
             .pipe(takeUntil(this.destroy$))
-            .subscribe((t) => {
-            this.evaAPI.triggerUserInteraction.next(t);
-        });
+            .subscribe((t) => this.evaAPI.triggerUserInteraction.next(t));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaUserInteractionEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: EvaUserInteractionEventsDirective, isStandalone: true, selector: "eva-controls-container[evaUserInteractionEvents]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaUserInteractionEventsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: EvaUserInteractionEventsDirective, isStandalone: true, selector: "eva-controls-container[evaUserInteractionEvents]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaUserInteractionEventsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaUserInteractionEventsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'eva-controls-container[evaUserInteractionEvents]'
@@ -5408,16 +5476,129 @@ class EvaVideoConfigurationDirective {
             this.elementRef.nativeElement.poster = this.sanitizer.sanitize(SecurityContext.URL, config.poster) ?? '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaVideoConfigurationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: EvaVideoConfigurationDirective, isStandalone: true, selector: "video[evaVideoConfiguration]", inputs: { evaVideoConfig: { classPropertyName: "evaVideoConfig", publicName: "evaVideoConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { videoConfigurationDone: "videoConfigurationDone" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaVideoConfigurationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: EvaVideoConfigurationDirective, isStandalone: true, selector: "video[evaVideoConfiguration]", inputs: { evaVideoConfig: { classPropertyName: "evaVideoConfig", publicName: "evaVideoConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { videoConfigurationDone: "videoConfigurationDone" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaVideoConfigurationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaVideoConfigurationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'video[evaVideoConfiguration]'
                 }]
         }], propDecorators: { videoConfigurationDone: [{ type: i0.Output, args: ["videoConfigurationDone"] }], evaVideoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoConfig", required: true }] }] } });
 
+/** Duration of a single frame at 30fps, used for frame-step shortcuts. */
+const FRAME_DURATION_SECONDS = 1 / 30;
+/**
+ * Directive that enables configurable keyboard shortcuts on the video player.
+ *
+ * Listens on the `document` for `keydown` events and delegates to `EvaApi`
+ * and `EvaFullscreenAPI` methods. The listener is dynamically added/removed
+ * via an `effect()` based on `evaKeyboardShortcutsEnabled`.
+ *
+ * Applied as a host directive on `EvaPlayer` — consumers configure it
+ * via inputs on `<eva-player>` directly.
+ *
+ * Shortcuts are suppressed when focus is inside an `<input>`, `<textarea>`,
+ * or `contenteditable` element to avoid interfering with text entry.
+ *
+ * @example
+ * <eva-player
+ *   [evaKeyboardShortcutsEnabled]="true"
+ *   [evaKeyboardShortcutsConfiguration]="{ backwardsKeyOne: 'ArrowLeft', forwardKeyOne: 'ArrowRight' }"
+ * />
+ */
+class EvaKeyboardShortcuts {
+    /** Whether keyboard shortcuts are active. Dynamically adds/removes the document listener. */
+    evaKeyboardShortcutsEnabled = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "evaKeyboardShortcutsEnabled" }] : /* istanbul ignore next */ []));
+    /** Key binding configuration. All keys are guaranteed present via the transform on `EvaPlayer`. */
+    evaKeyboardShortcutsConfiguration = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "evaKeyboardShortcutsConfiguration" }] : /* istanbul ignore next */ []));
+    api = inject(EvaApi);
+    fullscreenService = inject(EvaFullscreenAPI);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        effect(() => {
+            if (this.evaKeyboardShortcutsEnabled()) {
+                this.document.addEventListener('keydown', this.onKeydown);
+            }
+            else {
+                this.document.removeEventListener('keydown', this.onKeydown);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('keydown', this.onKeydown);
+        });
+    }
+    /**
+     * Handles `keydown` events. Matches `e.key` (case-insensitive) against the
+     * configured shortcuts. `playPause` uses `e.code` to reliably detect Space.
+     * Number keys `0`–`9` jump to the corresponding percentage of total duration.
+     */
+    onKeydown = (e) => {
+        const config = this.evaKeyboardShortcutsConfiguration();
+        const key = e.key.toUpperCase();
+        const code = e.code.toUpperCase();
+        const target = e.target;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+            return;
+        }
+        if (config.backwardsKeyOne && key === config.backwardsKeyOne.toUpperCase()) {
+            e.preventDefault();
+            this.api.seekBack(config.backwardSeconds);
+        }
+        else if (config.forwardKeyOne && key === config.forwardKeyOne.toUpperCase()) {
+            e.preventDefault();
+            this.api.seekForward(config.forwardSeconds);
+        }
+        else if (config.backwardsKeyTwo && key === config.backwardsKeyTwo.toUpperCase()) {
+            e.preventDefault();
+            this.api.seekBack(config.backwardSeconds);
+        }
+        else if (config.forwardKeyTwo && key === config.forwardKeyTwo.toUpperCase()) {
+            e.preventDefault();
+            this.api.seekForward(config.forwardSeconds);
+        }
+        else if (config.fullscreen && key === config.fullscreen.toUpperCase()) {
+            e.preventDefault();
+            this.fullscreenService.toggleFullscreen();
+        }
+        else if (config.muteKey && key === config.muteKey.toUpperCase()) {
+            e.preventDefault();
+            this.api.muteOrUnmuteVideo();
+        }
+        else if (config.playPause && code === config.playPause.toUpperCase()) {
+            e.preventDefault();
+            this.api.playOrPauseVideo();
+        }
+        else if (config.oneFrameBackward && key === config.oneFrameBackward.toUpperCase()) {
+            e.preventDefault();
+            this.api.seekBack(FRAME_DURATION_SECONDS);
+        }
+        else if (config.oneFrameForward && key === config.oneFrameForward.toUpperCase()) {
+            e.preventDefault();
+            this.api.seekForward(FRAME_DURATION_SECONDS);
+        }
+        else if (this.isNumberPressed(key)) {
+            e.preventDefault();
+            this.api.jumpToVideoPercentage(key);
+        }
+    };
+    /** Returns `true` if the key is a digit `0`–`9`. */
+    isNumberPressed(key) {
+        return key === "0" || key === "1" || key === "2" || key === "3" || key === "4" || key === "5" || key === "6" || key === "7" || key === "8" || key === "9";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaKeyboardShortcuts, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: EvaKeyboardShortcuts, isStandalone: true, selector: "[evaKeyboardShortcuts]", inputs: { evaKeyboardShortcutsEnabled: { classPropertyName: "evaKeyboardShortcutsEnabled", publicName: "evaKeyboardShortcutsEnabled", isSignal: true, isRequired: true, transformFunction: null }, evaKeyboardShortcutsConfiguration: { classPropertyName: "evaKeyboardShortcutsConfiguration", publicName: "evaKeyboardShortcutsConfiguration", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaKeyboardShortcuts, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[evaKeyboardShortcuts]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { evaKeyboardShortcutsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaKeyboardShortcutsEnabled", required: true }] }], evaKeyboardShortcutsConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaKeyboardShortcutsConfiguration", required: true }] }] } });
+
 /**
  * Root player component for the Eva video player.
  *
@@ -5469,6 +5650,21 @@ class EvaPlayer {
      */
     evaVideoConfiguration = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "evaVideoConfiguration" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables keyboard shortcuts on the player.
+     * When `true`, the `EvaKeyboardShortcuts` directive listens for `keydown` events on the document.
+     *
+     * @default false
+     */
+    evaKeyboardShortcutsEnabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "evaKeyboardShortcutsEnabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Key binding configuration for keyboard shortcuts.
+     * Partial configs are merged with defaults via `validateAndTransformEvaKeyboardShortcutsConfiguration`.
+     *
+     * @default prepareDefaultKeyboardShortcutsConfiguration()
+     */
+    evaKeyboardShortcutsConfiguration = input(prepareDefaultKeyboardShortcutsConfiguration(), { ...(ngDevMode ? { debugName: "evaKeyboardShortcutsConfiguration" } : /* istanbul ignore next */ {}), transform: validateAndTransformEvaKeyboardShortcutsConfiguration });
     /**
      * List of subtitle/text tracks to attach to the video element.
      * Validated and transformed via `validateTracks`.
@@ -5536,13 +5732,13 @@ class EvaPlayer {
     videoConfigReady() {
         this.playerMainAPI.onPlayerReady();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPlayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: EvaPlayer, isStandalone: true, selector: "eva-player", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, evaVideoSources: { classPropertyName: "evaVideoSources", publicName: "evaVideoSources", isSignal: true, isRequired: true, transformFunction: null }, evaVideoConfiguration: { classPropertyName: "evaVideoConfiguration", publicName: "evaVideoConfiguration", isSignal: true, isRequired: false, transformFunction: null }, evaVideoTracks: { classPropertyName: "evaVideoTracks", publicName: "evaVideoTracks", isSignal: true, isRequired: false, transformFunction: null }, evaNotSupportedText: { classPropertyName: "evaNotSupportedText", publicName: "evaNotSupportedText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [EvaApi, EvaFullscreenAPI], viewQueries: [{ propertyName: "evaVideoElement", first: true, predicate: ["evaVideoElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<video #evaVideoElement [id]=\"id()\" evaMediaEventListeners evaVideoConfiguration\n\t[evaVideoConfig]=\"evaVideoConfiguration()\" (videoConfigurationDone)=\"videoConfigReady()\">\n\t@for (vs of evaVideoSources(); track $index) {\n\t<source #evaVideoSources [type]=\"vs.type\" [src]=\"vs.src\" />\n\t}\n\t@if(evaNotSupportedText()){\n\t<p>{{evaNotSupportedText()}}</p>\n\t}\n\n\t@for (t of evaVideoTracks(); track $index) {\n\t<track #evaVideoTracks [default]=\"t.default\" [kind]=\"t.kind\" [label]=\"t.label\" [src]=\"t.src\" [srclang]=\"t.srclang\"\n\t\t[ariaLabel]=\"t.label\" evaCueChange\n\t\t[evaCueChangeActive]=\"t.kind === 'subtitles' && activeSubtitleLabel() === t.label\" />\n\t}\n</video>\n\n<ng-content></ng-content>", styles: [":host{display:block;position:relative;padding:0;margin:0;border:0;border-radius:0;overflow:hidden}:host>video{display:block;width:100%;object-fit:contain;object-position:0 0;transition:padding-bottom var(--eva-transition-duration) ease-in-out}:host(video::cue){font-family:var(--eva-font-family);color:unset;background-color:transparent;font-size:0px;text-decoration:none;text-shadow:none}\n"], dependencies: [{ kind: "directive", type: EvaMediaEventListenersDirective, selector: "video[evaMediaEventListeners]" }, { kind: "directive", type: EvaVideoConfigurationDirective, selector: "video[evaVideoConfiguration]", inputs: ["evaVideoConfig"], outputs: ["videoConfigurationDone"] }, { kind: "directive", type: EvaCueChangeDirective, selector: "track[evaCueChange]", inputs: ["evaCueChangeActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPlayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EvaPlayer, isStandalone: true, selector: "eva-player", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, evaVideoSources: { classPropertyName: "evaVideoSources", publicName: "evaVideoSources", isSignal: true, isRequired: true, transformFunction: null }, evaVideoConfiguration: { classPropertyName: "evaVideoConfiguration", publicName: "evaVideoConfiguration", isSignal: true, isRequired: false, transformFunction: null }, evaKeyboardShortcutsEnabled: { classPropertyName: "evaKeyboardShortcutsEnabled", publicName: "evaKeyboardShortcutsEnabled", isSignal: true, isRequired: false, transformFunction: null }, evaKeyboardShortcutsConfiguration: { classPropertyName: "evaKeyboardShortcutsConfiguration", publicName: "evaKeyboardShortcutsConfiguration", isSignal: true, isRequired: false, transformFunction: null }, evaVideoTracks: { classPropertyName: "evaVideoTracks", publicName: "evaVideoTracks", isSignal: true, isRequired: false, transformFunction: null }, evaNotSupportedText: { classPropertyName: "evaNotSupportedText", publicName: "evaNotSupportedText", isSignal: true, isRequired: false, transformFunction: null } }, providers: [EvaApi, EvaFullscreenAPI], viewQueries: [{ propertyName: "evaVideoElement", first: true, predicate: ["evaVideoElement"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<video #evaVideoElement [id]=\"id()\" evaMediaEventListeners evaVideoConfiguration evaKeyboardShortcuts\n\t[evaKeyboardShortcutsEnabled]=\"evaKeyboardShortcutsEnabled()\"\n\t[evaKeyboardShortcutsConfiguration]=\"evaKeyboardShortcutsConfiguration()\" [evaVideoConfig]=\"evaVideoConfiguration()\"\n\t(videoConfigurationDone)=\"videoConfigReady()\">\n\t@for (vs of evaVideoSources(); track $index) {\n\t<source #evaVideoSources [type]=\"vs.type\" [src]=\"vs.src\" />\n\t}\n\t@if(evaNotSupportedText()){\n\t<p>{{evaNotSupportedText()}}</p>\n\t}\n\n\t@for (t of evaVideoTracks(); track $index) {\n\t<track #evaVideoTracks [default]=\"t.default\" [kind]=\"t.kind\" [label]=\"t.label\" [src]=\"t.src\" [srclang]=\"t.srclang\"\n\t\t[ariaLabel]=\"t.label\" evaCueChange\n\t\t[evaCueChangeActive]=\"t.kind === 'subtitles' && activeSubtitleLabel() === t.label\" />\n\t}\n</video>\n\n<ng-content></ng-content>", styles: [":host{display:block;position:relative;padding:0;margin:0;border:0;border-radius:0;overflow:hidden}:host>video{display:block;width:100%;object-fit:contain;object-position:0 0;transition:padding-bottom var(--eva-transition-duration) ease-in-out}:host(video::cue){font-family:var(--eva-font-family);color:unset;background-color:transparent;font-size:0px;text-decoration:none;text-shadow:none}\n"], dependencies: [{ kind: "directive", type: EvaMediaEventListenersDirective, selector: "video[evaMediaEventListeners]" }, { kind: "directive", type: EvaVideoConfigurationDirective, selector: "video[evaVideoConfiguration]", inputs: ["evaVideoConfig"], outputs: ["videoConfigurationDone"] }, { kind: "directive", type: EvaCueChangeDirective, selector: "track[evaCueChange]", inputs: ["evaCueChangeActive"] }, { kind: "directive", type: EvaKeyboardShortcuts, selector: "[evaKeyboardShortcuts]", inputs: ["evaKeyboardShortcutsEnabled", "evaKeyboardShortcutsConfiguration"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaPlayer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaPlayer, decorators: [{
             type: Component,
-            args: [{ selector: 'eva-player', imports: [EvaMediaEventListenersDirective, EvaVideoConfigurationDirective, EvaCueChangeDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [EvaApi, EvaFullscreenAPI], template: "<video #evaVideoElement [id]=\"id()\" evaMediaEventListeners evaVideoConfiguration\n\t[evaVideoConfig]=\"evaVideoConfiguration()\" (videoConfigurationDone)=\"videoConfigReady()\">\n\t@for (vs of evaVideoSources(); track $index) {\n\t<source #evaVideoSources [type]=\"vs.type\" [src]=\"vs.src\" />\n\t}\n\t@if(evaNotSupportedText()){\n\t<p>{{evaNotSupportedText()}}</p>\n\t}\n\n\t@for (t of evaVideoTracks(); track $index) {\n\t<track #evaVideoTracks [default]=\"t.default\" [kind]=\"t.kind\" [label]=\"t.label\" [src]=\"t.src\" [srclang]=\"t.srclang\"\n\t\t[ariaLabel]=\"t.label\" evaCueChange\n\t\t[evaCueChangeActive]=\"t.kind === 'subtitles' && activeSubtitleLabel() === t.label\" />\n\t}\n</video>\n\n<ng-content></ng-content>", styles: [":host{display:block;position:relative;padding:0;margin:0;border:0;border-radius:0;overflow:hidden}:host>video{display:block;width:100%;object-fit:contain;object-position:0 0;transition:padding-bottom var(--eva-transition-duration) ease-in-out}:host(video::cue){font-family:var(--eva-font-family);color:unset;background-color:transparent;font-size:0px;text-decoration:none;text-shadow:none}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], evaVideoSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoSources", required: true }] }], evaVideoConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoConfiguration", required: false }] }], evaVideoTracks: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoTracks", required: false }] }], evaNotSupportedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaNotSupportedText", required: false }] }], evaVideoElement: [{ type: i0.ViewChild, args: ['evaVideoElement', { isSignal: true }] }] } });
+            args: [{ selector: 'eva-player', imports: [EvaMediaEventListenersDirective, EvaVideoConfigurationDirective, EvaCueChangeDirective, EvaKeyboardShortcuts], changeDetection: ChangeDetectionStrategy.OnPush, providers: [EvaApi, EvaFullscreenAPI], template: "<video #evaVideoElement [id]=\"id()\" evaMediaEventListeners evaVideoConfiguration evaKeyboardShortcuts\n\t[evaKeyboardShortcutsEnabled]=\"evaKeyboardShortcutsEnabled()\"\n\t[evaKeyboardShortcutsConfiguration]=\"evaKeyboardShortcutsConfiguration()\" [evaVideoConfig]=\"evaVideoConfiguration()\"\n\t(videoConfigurationDone)=\"videoConfigReady()\">\n\t@for (vs of evaVideoSources(); track $index) {\n\t<source #evaVideoSources [type]=\"vs.type\" [src]=\"vs.src\" />\n\t}\n\t@if(evaNotSupportedText()){\n\t<p>{{evaNotSupportedText()}}</p>\n\t}\n\n\t@for (t of evaVideoTracks(); track $index) {\n\t<track #evaVideoTracks [default]=\"t.default\" [kind]=\"t.kind\" [label]=\"t.label\" [src]=\"t.src\" [srclang]=\"t.srclang\"\n\t\t[ariaLabel]=\"t.label\" evaCueChange\n\t\t[evaCueChangeActive]=\"t.kind === 'subtitles' && activeSubtitleLabel() === t.label\" />\n\t}\n</video>\n\n<ng-content></ng-content>", styles: [":host{display:block;position:relative;padding:0;margin:0;border:0;border-radius:0;overflow:hidden}:host>video{display:block;width:100%;object-fit:contain;object-position:0 0;transition:padding-bottom var(--eva-transition-duration) ease-in-out}:host(video::cue){font-family:var(--eva-font-family);color:unset;background-color:transparent;font-size:0px;text-decoration:none;text-shadow:none}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], evaVideoSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoSources", required: true }] }], evaVideoConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoConfiguration", required: false }] }], evaKeyboardShortcutsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaKeyboardShortcutsEnabled", required: false }] }], evaKeyboardShortcutsConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaKeyboardShortcutsConfiguration", required: false }] }], evaVideoTracks: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoTracks", required: false }] }], evaNotSupportedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaNotSupportedText", required: false }] }], evaVideoElement: [{ type: i0.ViewChild, args: ['evaVideoElement', { isSignal: true }] }] } });
 
 /**
  * DASH streaming directive for the Eva video player.
@@ -5759,10 +5955,10 @@ class EvaDashDirective {
     getDashInstance() {
         return this.dash;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaDashDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: EvaDashDirective, isStandalone: true, selector: "eva-player[evaDash]", inputs: { evaDashSrc: { classPropertyName: "evaDashSrc", publicName: "evaDashSrc", isSignal: true, isRequired: true, transformFunction: null }, evaDashDRMToken: { classPropertyName: "evaDashDRMToken", publicName: "evaDashDRMToken", isSignal: true, isRequired: false, transformFunction: null }, evaDashDRMLicenseServer: { classPropertyName: "evaDashDRMLicenseServer", publicName: "evaDashDRMLicenseServer", isSignal: true, isRequired: false, transformFunction: null }, evaDashConfig: { classPropertyName: "evaDashConfig", publicName: "evaDashConfig", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["evaDash"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaDashDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: EvaDashDirective, isStandalone: true, selector: "eva-player[evaDash]", inputs: { evaDashSrc: { classPropertyName: "evaDashSrc", publicName: "evaDashSrc", isSignal: true, isRequired: true, transformFunction: null }, evaDashDRMToken: { classPropertyName: "evaDashDRMToken", publicName: "evaDashDRMToken", isSignal: true, isRequired: false, transformFunction: null }, evaDashDRMLicenseServer: { classPropertyName: "evaDashDRMLicenseServer", publicName: "evaDashDRMLicenseServer", isSignal: true, isRequired: false, transformFunction: null }, evaDashConfig: { classPropertyName: "evaDashConfig", publicName: "evaDashConfig", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["evaDash"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaDashDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaDashDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'eva-player[evaDash]',
@@ -5963,10 +6159,10 @@ class EvaHlsDirective {
     getHlsInstance() {
         return this.hls;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaHlsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: EvaHlsDirective, isStandalone: true, selector: "eva-player[evaHls]", inputs: { evaHlsSrc: { classPropertyName: "evaHlsSrc", publicName: "evaHlsSrc", isSignal: true, isRequired: true, transformFunction: null }, evaHlsHeaders: { classPropertyName: "evaHlsHeaders", publicName: "evaHlsHeaders", isSignal: true, isRequired: false, transformFunction: null }, evaHlsConfig: { classPropertyName: "evaHlsConfig", publicName: "evaHlsConfig", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["evaHls"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaHlsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: EvaHlsDirective, isStandalone: true, selector: "eva-player[evaHls]", inputs: { evaHlsSrc: { classPropertyName: "evaHlsSrc", publicName: "evaHlsSrc", isSignal: true, isRequired: true, transformFunction: null }, evaHlsHeaders: { classPropertyName: "evaHlsHeaders", publicName: "evaHlsHeaders", isSignal: true, isRequired: false, transformFunction: null }, evaHlsConfig: { classPropertyName: "evaHlsConfig", publicName: "evaHlsConfig", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["evaHls"], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: EvaHlsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EvaHlsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'eva-player[evaHls]',
@@ -5978,5 +6174,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EvaActiveChapter, EvaBackward, EvaBuffering, EvaControlsContainer, EvaControlsDivider, EvaCueChangeDirective, EvaDashDirective, EvaForward, EvaFullscreen, EvaHlsDirective, EvaMediaEventListenersDirective, EvaMute, EvaOverlayPlay, EvaPictureInPicture, EvaPlayPause, EvaPlaybackSpeed, EvaPlayer, EvaQualitySelector, EvaScrubBar, EvaScrubBarBufferingTime, EvaScrubBarCurrentTime, EvaState, EvaSubtitleDisplay, EvaTimeDisplay, EvaTimeDisplayPipe, EvaTrackSelector, EvaUserInteractionEventsDirective, EvaVideoConfigurationDirective, EvaVideoEvent, EvaVolume, isValidTrackKind, isValidVideoEvent, transformEvaActiveChapterAria, transformEvaBackwardAria, transformEvaControlsDividerAria, transformEvaForwardAria, transformEvaFullscreenAria, transformEvaMuteAria, transformEvaOverlayPlayAria, transformEvaPictureInPictureAria, transformEvaPlayPauseAria, transformEvaPlaybackSpeedAria, transformEvaScrubBarAria, transformEvaTimeDisplayAria, transformEvaVolumeAria, validateAndTransformEvaForwardAndBackwardSeconds, validateAndTransformVolumeRange };
+export { EvaActiveChapter, EvaBackward, EvaBuffering, EvaControlsContainer, EvaControlsDivider, EvaCueChangeDirective, EvaDashDirective, EvaForward, EvaFullscreen, EvaHlsDirective, EvaKeyboardShortcuts, EvaMediaEventListenersDirective, EvaMute, EvaOverlayPlay, EvaPictureInPicture, EvaPlayPause, EvaPlaybackSpeed, EvaPlayer, EvaQualitySelector, EvaScrubBar, EvaScrubBarBufferingTime, EvaScrubBarCurrentTime, EvaState, EvaSubtitleDisplay, EvaTimeDisplay, EvaTimeDisplayPipe, EvaTrackSelector, EvaUserInteractionEventsDirective, EvaVideoConfigurationDirective, EvaVideoEvent, EvaVolume, isValidTrackKind, isValidVideoEvent, transformEvaActiveChapterAria, transformEvaBackwardAria, transformEvaControlsDividerAria, transformEvaForwardAria, transformEvaFullscreenAria, transformEvaMuteAria, transformEvaOverlayPlayAria, transformEvaPictureInPictureAria, transformEvaPlayPauseAria, transformEvaPlaybackSpeedAria, transformEvaScrubBarAria, transformEvaTimeDisplayAria, transformEvaVolumeAria, validateAndTransformEvaForwardAndBackwardSeconds, validateAndTransformVolumeRange };
 //# sourceMappingURL=ez-vid-ang.mjs.map