ez-vid-ang 0.0.7 → 0.0.10

package/README.md

@@ -1,6 +1,6 @@
 # EzVidAng (Easy Video Angular)
 
-Highly configurable and easy-to-use Angular component library for video playback and streaming.
+Highly configurable, performant and easy-to-use Angular component library for video playback and streaming.
 
 > [!CAUTION]
 > This package is still under development and is not ready for use in production. Use at your own risk.
@@ -16,6 +16,9 @@ Highly configurable and easy-to-use Angular component library for video playback
 ▶️ **Inspired by modern players** – Familiar UX similar to popular platforms<br/>
 📱 **Responsive design** - Works across all screen sizes and devices<br/>
 
+## Example project
+
+Example project can be found on [Stackblitz](https://stackblitz.com/edit/stackblitz-starters-sr5wp23n)
 
 ## Version compatibility
 
@@ -55,7 +58,57 @@ Add the required styles to your angular.json:
 ```
 > [!NOTE]
 > *eva-icons-and-fonts.scss* is optional if you provide custom icons and fonts for all components. It includes a prepared *.woff* file and utility classes for default icon usage.
-<br/>
+
+
+> [!IMPORTANT]
+> **If you want to use HLS streaming directive you must install latest version of the hls.js.**
+> 
+> ```
+> npm i hls.js
+>```
+> **And add the required script to your angular.json**
+> ```
+> {
+>   "projects": {
+>     "your_project": {
+>       "architect": {
+>         "build": {
+>           "options": {
+>             "scripts": [
+>               "node_modules/hls.js/dist/hls.min.js"
+>             ]
+>           }
+>         }
+>       }
+>     }
+>   }
+> }
+> ```
+
+> [!IMPORTANT]
+> **If you want to use DASH streaming directive you must install v5 of the dash.js.**
+> 
+> ```
+> npm i dashjs
+>```
+> **And add the required script to your angular.json**
+> ```
+> {
+>   "projects": {
+>     "your_project": {
+>       "architect": {
+>         "build": {
+>           "options": {
+>             "scripts": [
+>               "node_modules/dashjs/dist/modern/esm/dash.all.min.js"
+>             ]
+>           }
+>         }
+>       }
+>     }
+>   }
+> }
+> ```
 
 Import the needed components and types into your standalone component or NgModule:
 ```
@@ -116,3 +169,17 @@ Library has four groups of components. You can click on the name to go to the do
 - [**EvaControls**](documentation/controls) – Video control components and pipes
 - [**EvaBuffering**](documentation/buffering) – Loading and buffering indicators
 - [**EvaStreaming**](documentation/streaming) – Directives for live streaming support
+
+---
+### 💖 Support This Project
+
+If you wish to make a donation you can click the widget.
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/K3K01AFMO6)
+
+Your support helps:
+- Maintain the project
+- Add new features
+- Fix bugs
+- Provide long-term updates
+
+Thank you for your generosity! 🙏

package/fesm2022/ez-vid-ang.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Injectable, inject, input, ChangeDetectionStrategy, Component, output, computed, Pipe, ElementRef, NgZone, HostListener, Renderer2, viewChild, effect, Directive, SecurityContext, viewChildren } from '@angular/core';
+import { EventEmitter, signal, Injectable, inject, input, ChangeDetectionStrategy, Component, output, computed, Pipe, ElementRef, NgZone, HostListener, Renderer2, viewChild, effect, Directive, SecurityContext } from '@angular/core';
 import { BehaviorSubject, Subject, fromEvent, throttleTime, merge, takeUntil } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -206,6 +206,7 @@ class EvaApi {
      * Subscribed to by `EvaPictureInPicture` to keep its icon state in sync.
      */
     pictureInPictureSubject = new BehaviorSubject(false);
+    lastActiveVolume = 1;
     // ─── Buffering Detection ──────────────────────────────────────────────────
     /** Timeout reference used by the position-polling buffering detection. Cleared on each `timeupdate`. */
     bufferingTimeout;
@@ -348,6 +349,7 @@ class EvaApi {
      */
     setPlaybackSpeed(speed) {
         if (!this.validateVideoAndPlayerBeforeAction()) {
+            console.log("nemam element za playback speed na vrijednost: " + speed);
             return;
         }
         this.assignedVideoElement.playbackRate = speed;
@@ -364,18 +366,18 @@ class EvaApi {
     }
     /**
      * Returns the current video volume as a normalized value (`0` to `1`).
-     * Falls back to `0.75` (the default initial volume) if the player is not yet ready.
+     * Falls back to `1` (the default initial volume) if the player is not yet ready.
      * Called from `EvaMute` and `EvaVolume` on initialization.
      */
     getVideoVolume() {
         if (!this.validateVideoAndPlayerBeforeAction()) {
-            return 0.75;
+            return 1;
         }
         return this.assignedVideoElement.volume;
     }
     /**
      * Toggles mute/unmute by setting volume to `0` if currently audible,
-     * or restoring it to `0.75` if currently muted.
+     * or restoring it to last volume value if currently muted.
      * Called from `EvaMute`.
      */
     muteOrUnmuteVideo() {
@@ -386,7 +388,7 @@ class EvaApi {
             this.assignedVideoElement.volume = 0;
         }
         else {
-            this.assignedVideoElement.volume = 0.75;
+            this.assignedVideoElement.volume = this.lastActiveVolume;
         }
     }
     /**
@@ -401,12 +403,15 @@ class EvaApi {
         }
         if (volume < 0) {
             this.assignedVideoElement.volume = 0;
+            this.lastActiveVolume = 0;
         }
         else if (volume > 1) {
             this.assignedVideoElement.volume = 1;
+            this.lastActiveVolume = 1;
         }
         else {
             this.assignedVideoElement.volume = volume;
+            this.lastActiveVolume = volume;
         }
     }
     // ─── Event Listener Callbacks ─────────────────────────────────────────────
@@ -1443,7 +1448,7 @@ function validateAndTransformPlaybackSpeeds(v) {
 }
 function validateAndPrepareStartingVideoVolume(v) {
     if (v === undefined) {
-        return 0.75;
+        return 1;
     }
     if (v < 0) {
         return 0;
@@ -1511,7 +1516,7 @@ function videoConfigurationDefaultSetter(v) {
         v.preload = "auto";
     }
     if (!v.startingVolume) {
-        v.startingVolume = 0.75;
+        v.startingVolume = 1;
     }
     return v;
 }
@@ -2920,22 +2925,27 @@ class EvaPlaybackSpeed {
     selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
     /** Bound reference to the click-outside handler, stored for removal in `ngOnDestroy`. */
     clickOutsideListener;
+    playerReady$ = null;
     /**
      * Sets the initial playback speed based on `evaDefaultPlaybackSpeed` and `evaPlaybackSpeeds`,
      * then attaches a document-level click listener to close the dropdown when clicking outside.
      */
     ngOnInit() {
-        // Set initial speed
-        const speeds = this.evaPlaybackSpeeds();
-        const defaultSpeed = this.evaDefaultPlaybackSpeed();
-        const index = speeds.indexOf(defaultSpeed);
-        if (index !== -1) {
-            this.currentSpeed.set(defaultSpeed);
-            this.selectedIndex.set(index);
-        }
-        else if (speeds.length > 0) {
-            this.currentSpeed.set(speeds[0]);
-            this.selectedIndex.set(0);
+        if (!this.evaAPI.isPlayerReady) {
+            this.playerReady$ = this.evaAPI.playerReadyEvent.subscribe(() => {
+                const speeds = this.evaPlaybackSpeeds();
+                const defaultSpeed = this.evaDefaultPlaybackSpeed();
+                const index = speeds.indexOf(defaultSpeed);
+                if (index !== -1) {
+                    this.currentSpeed.set(defaultSpeed);
+                    this.selectedIndex.set(index);
+                }
+                else if (speeds.length > 0) {
+                    this.currentSpeed.set(speeds[0]);
+                    this.selectedIndex.set(0);
+                }
+                this.evaAPI.setPlaybackSpeed(index !== 1 ? defaultSpeed : speeds[0]);
+            });
         }
         // Listen for clicks outside
         this.clickOutsideListener = this.handleClickOutside.bind(this);
@@ -2943,6 +2953,7 @@ class EvaPlaybackSpeed {
     }
     /** Removes the document-level click-outside listener to prevent memory leaks. */
     ngOnDestroy() {
+        this.playerReady$?.unsubscribe();
         if (this.clickOutsideListener) {
             document.removeEventListener('click', this.clickOutsideListener, true);
         }
@@ -4469,12 +4480,11 @@ class EvaTrackSelector {
         if (this.evaAPI.assignedVideoElement) {
             Array.from(this.evaAPI.assignedVideoElement.textTracks)
                 .forEach(textTrack => {
-                if (textTrack.label === tr.label) {
-                    textTrack.mode = "showing";
-                }
-                else {
-                    textTrack.mode = "hidden";
-                }
+                // if (textTrack.label === tr.label) {
+                //   textTrack.mode = "showing";
+                // } else {
+                textTrack.mode = "hidden";
+                // }
             });
         }
         this.evaAPI.subtitlesChanged(tr);
@@ -4766,6 +4776,7 @@ class EvaVolume {
     videoVolume;
     /** Subscription to volume changes from `EvaApi`. Cleaned up in `ngOnDestroy`. */
     videoVolumeSub = null;
+    playerReady$ = null;
     /** Cleanup function returned by `Renderer2.listen` for the `mousemove`/`touchmove` document listener. */
     mouseMoveListener;
     /** Cleanup function returned by `Renderer2.listen` for the `mouseup`/`touchend` document listener. */
@@ -4778,10 +4789,16 @@ class EvaVolume {
      * external volume changes (e.g. from the mute button).
      */
     ngOnInit() {
-        // Initialize volume signal
         const initialVolume = this.evaAPI.getVideoVolume();
         this.videoVolume = signal(initialVolume, ...(ngDevMode ? [{ debugName: "videoVolume" }] : []));
-        this.ariaValue.set(String(Math.round(initialVolume * 100)));
+        if (!this.evaAPI.isPlayerReady) {
+            this.playerReady$ = this.evaAPI.playerReadyEvent.subscribe(() => {
+                // Initialize volume signal
+                const initialVolume = this.evaAPI.getVideoVolume();
+                this.videoVolume.set(initialVolume);
+                this.ariaValue.set(String(Math.round(initialVolume * 100)));
+            });
+        }
         // Subscribe to volume changes from API
         this.videoVolumeSub = this.evaAPI.videoVolumeSubject.subscribe(volume => {
             if (volume !== null) {
@@ -4797,6 +4814,7 @@ class EvaVolume {
     ngOnDestroy() {
         // Clean up subscription
         this.videoVolumeSub?.unsubscribe();
+        this.playerReady$?.unsubscribe();
         // Clean up event listeners if component destroyed while dragging
         this.removeDocumentListeners();
         // Clean up announce timeout
@@ -5586,6 +5604,7 @@ class EvaVideoConfigurationDirective {
     evaAPI = inject(EvaApi);
     elementRef = inject((ElementRef));
     sanitizer = inject(DomSanitizer);
+    videoConfigurationDone = output();
     /**
      * The configuration object to apply to the native `<video>` element.
      *
@@ -5617,6 +5636,7 @@ class EvaVideoConfigurationDirective {
     ngAfterViewInit() {
         this.isViewInitialized = true;
         this.applyConfiguration();
+        this.videoConfigurationDone.emit();
     }
     /**
      * Iterates over all supported `EvaVideoElementConfiguration` properties and
@@ -5637,6 +5657,13 @@ class EvaVideoConfigurationDirective {
             return;
         }
         const config = this.evaVideoConfig();
+        // Volume — validated and clamped to [0, 1] by validateAndPrepareStartingVideoVolume,
+        // assigned as a typed number, no sanitization needed
+        if (config.startingVolume) {
+            let v = validateAndPrepareStartingVideoVolume(config.startingVolume);
+            this.elementRef.nativeElement.volume = v;
+            this.evaAPI.setVideoVolume(v);
+        }
         // Numeric properties — assigned as typed numbers, no sanitization needed
         if (config.width) {
             this.elementRef.nativeElement.width = config.width;
@@ -5679,14 +5706,9 @@ class EvaVideoConfigurationDirective {
         if (config.poster) {
             this.elementRef.nativeElement.poster = this.sanitizer.sanitize(SecurityContext.URL, config.poster) ?? '';
         }
-        // Volume — validated and clamped to [0, 1] by validateAndPrepareStartingVideoVolume,
-        // assigned as a typed number, no sanitization needed
-        if (config.startingVolume) {
-            this.elementRef.nativeElement.volume = validateAndPrepareStartingVideoVolume(config.startingVolume);
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EvaVideoConfigurationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: EvaVideoConfigurationDirective, isStandalone: true, selector: "video[evaVideoConfiguration]", inputs: { evaVideoConfig: { classPropertyName: "evaVideoConfig", publicName: "evaVideoConfig", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.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: "21.1.2", ngImport: i0, type: EvaVideoConfigurationDirective, decorators: [{
             type: Directive,
@@ -5694,7 +5716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                     selector: 'video[evaVideoConfiguration]',
                     standalone: true
                 }]
-        }], propDecorators: { evaVideoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoConfig", required: true }] }] } });
+        }], propDecorators: { videoConfigurationDone: [{ type: i0.Output, args: ["videoConfigurationDone"] }], evaVideoConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaVideoConfig", required: true }] }] } });
 
 /**
  * Root player component for the Eva video player.
@@ -5768,7 +5790,7 @@ class EvaPlayer {
     /**
      * References to the `<track>` elements rendered in the template for subtitle support.
      */
-    evaVideoTrackElements = viewChildren("evaVideoTracks", ...(ngDevMode ? [{ debugName: "evaVideoTrackElements" }] : []));
+    // private readonly evaVideoTrackElements = viewChildren<ElementRef<HTMLTrackElement>>("evaVideoTracks");
     subtitleChangeSubject = null;
     subtitlesTimeout = null;
     activeSubtitleLabel = null;
@@ -5784,10 +5806,17 @@ class EvaPlayer {
             //when number of tracks is change we must restart all mutation observers as some may become invalid
             this.playerMainAPI.updateAndPrepareTracks(changes["evaVideoTracks"].currentValue);
             if (!changes["evaVideoTracks"].firstChange) {
-                this.prepareSubtitles();
+                // this.prepareSubtitles();
             }
         }
     }
+    ngOnInit() {
+        // prevent NG0100
+        const defaultTrack = this.evaVideoTracks().find(t => t.default && t.kind === 'subtitles');
+        if (defaultTrack) {
+            this.activeSubtitleLabel = defaultTrack.label ?? null;
+        }
+    }
     /**
      * Assigns the native `<video>` element to `EvaApi` and signals that the player
      * is ready for use. Also logs the presence of any HLS or DASH streaming directives.
@@ -5806,7 +5835,6 @@ class EvaPlayer {
                 }
             }
         });
-        this.playerMainAPI.onPlayerReady();
     }
     /** Reserved for future teardown logic. */
     ngOnDestroy() {
@@ -5817,28 +5845,16 @@ class EvaPlayer {
         this.playerFullscreenAPI.destroy();
         this.playerMainAPI.destroy();
     }
-    prepareSubtitles() {
-        if (this.subtitlesTimeout) {
-            clearTimeout(this.subtitlesTimeout);
-        }
-        this.subtitlesTimeout = setTimeout(() => {
-            let trackRef = this.evaVideoTrackElements().find(a => {
-                let tt = a.nativeElement.track;
-                return tt && tt.mode === "showing" && tt.kind === "subtitles";
-            });
-            if (!trackRef) {
-                this.playerMainAPI.currentSubtitleCue.set(null);
-                return;
-            }
-        }, 200);
+    videoConfigReady() {
+        this.playerMainAPI.onPlayerReady();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EvaPlayer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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 }, 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 }, { propertyName: "evaVideoTrackElements", predicate: ["evaVideoTracks"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<video #evaVideoElement [id]=\"id()\" evaMediaEventListeners evaVideoConfiguration\n\t[evaVideoConfig]=\"evaVideoConfiguration()\">\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:#fff}\n"], dependencies: [{ kind: "directive", type: EvaMediaEventListenersDirective, selector: "video[evaMediaEventListeners]" }, { kind: "directive", type: EvaVideoConfigurationDirective, selector: "video[evaVideoConfiguration]", inputs: ["evaVideoConfig"] }, { kind: "directive", type: EvaCueChangeDirective, selector: "track[evaCueChange]", inputs: ["evaCueChangeActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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 }, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EvaPlayer, decorators: [{
             type: Component,
-            args: [{ selector: 'eva-player', imports: [EvaMediaEventListenersDirective, EvaVideoConfigurationDirective, EvaCueChangeDirective], providers: [EvaApi, EvaFullscreenAPI], template: "<video #evaVideoElement [id]=\"id()\" evaMediaEventListeners evaVideoConfiguration\n\t[evaVideoConfig]=\"evaVideoConfiguration()\">\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:#fff}\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 }] }], evaVideoTrackElements: [{ type: i0.ViewChildren, args: ["evaVideoTracks", { isSignal: true }] }] } });
+            args: [{ selector: 'eva-player', imports: [EvaMediaEventListenersDirective, EvaVideoConfigurationDirective, EvaCueChangeDirective], 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 }] }] } });
 
 /**
  * DASH streaming directive for the Eva video player.