ez-vid-ang 0.0.6 → 0.0.7

package/README.md

@@ -57,29 +57,61 @@ Add the required styles to your angular.json:
 > *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/>
 
-Import the needed modules into your standalone component or NgModule:
+Import the needed components and types into your standalone component or NgModule:
 ```
 import { Component } from '@angular/core';
-import { EvaPlayer } from 'ez-vid-ang';
+import {
+  EvaActiveChapter,
+  EvaBackward,
+  EvaBuffering,
+  EvaChapterMarker,
+  EvaOverlayPlay,
+  EvaControlsContainer, EvaControlsDivider,
+  EvaForward, EvaFullscreen, EvaHlsDirective,
+  EvaMute, EvaMuteAria, EvaPlaybackSpeed, EvaPlayer,
+  EvaPlayPause, EvaQualitySelector, EvaScrubBar,
+  EvaScrubBarBufferingTime, EvaScrubBarCurrentTime,
+  EvaSubtitleDisplay,EvaPictureInPicture,
+  EvaTimeDisplay, EvaTrack, EvaTrackSelector,
+  EvaVideoElementConfiguration, EvaVideoSource, EvaVolume
+} from "ez-vid-ang";
 
 @Component({
   selector: 'lt-home-page',
   templateUrl: './home-page.html',
   styleUrl: './home-page.scss',
   imports: [
-    EvaCoreModule,
-    EvaControlsModule,
-    EvaBufferingModule,
-    EvaStreamingModule
+EvaActiveChapter,
+    EvaBackward,
+    EvaBuffering,
+    EvaOverlayPlay,
+    EvaControlsContainer,
+    EvaControlsDivider,
+    EvaForward,
+    EvaFullscreen,
+    EvaHlsDirective,
+    EvaMute,
+    EvaPlaybackSpeed,
+    EvaPlayer,
+    EvaPlayPause,
+    EvaPictureInPicture,
+    EvaQualitySelector,
+    EvaScrubBar,
+    EvaScrubBarBufferingTime,
+    EvaScrubBarCurrentTime,
+    EvaSubtitleDisplay,
+    EvaTimeDisplay, 
+    EvaTrackSelector,
+    EvaVolume
   ]
 })
 export class HomePage {}
 
 ```
 
-## Modules
+## Components
 
-Library has four groups of componentse. You can click on the name to go to the documentation:
+Library has four groups of components. You can click on the name to go to the documentation:
 - [**EvaCore**](documentation/core) – Main player component, directives, and providers
 - [**EvaControls**](documentation/controls) – Video control components and pipes
 - [**EvaBuffering**](documentation/buffering) – Loading and buffering indicators

package/fesm2022/ez-vid-ang.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Injectable, inject, input, ChangeDetectionStrategy, Component, output, computed, Pipe, ElementRef, NgZone, HostListener, Renderer2, viewChild, effect, Directive, viewChildren } 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 { BehaviorSubject, Subject, fromEvent, throttleTime, merge, takeUntil } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * Enum of all possible playback states the Eva player can be in.
@@ -28,6 +29,8 @@ var EvaVideoEvent;
     EvaVideoEvent["CAN_PLAY_THROUGH"] = "canplaythrough";
     EvaVideoEvent["COMPLETE"] = "complete";
     EvaVideoEvent["DURATION_CHANGE"] = "durationchange";
+    EvaVideoEvent["ENTERED_PICTURE_IN_PICTURE"] = "enterpictureinpicture";
+    EvaVideoEvent["LEFT_PICTURE_IN_PICTURE"] = "leavepictureinpicture";
     EvaVideoEvent["EMPTIED"] = "emptied";
     EvaVideoEvent["ENCRYPTED"] = "encrypted";
     EvaVideoEvent["ENDED"] = "ended";
@@ -195,6 +198,14 @@ class EvaApi {
      */
     triggerUserInteraction = new Subject();
     currentSubtitleCue = signal(null, ...(ngDevMode ? [{ debugName: "currentSubtitleCue" }] : []));
+    /** The active `PictureInPictureWindow` instance. `null` when PiP is not active. */
+    pipWindow = null;
+    /**
+     * Broadcasts the current Picture-in-Picture state.
+     * Emits `true` when the player enters PiP, `false` when it leaves.
+     * Subscribed to by `EvaPictureInPicture` to keep its icon state in sync.
+     */
+    pictureInPictureSubject = new BehaviorSubject(false);
     // ─── Buffering Detection ──────────────────────────────────────────────────
     /** Timeout reference used by the position-polling buffering detection. Cleared on each `timeupdate`. */
     bufferingTimeout;
@@ -685,6 +696,64 @@ class EvaApi {
             this.isBuffering.set(true);
         }
     }
+    // ─── Picture in picture ────────────────────────────────────────────────────────────
+    /**
+     * Toggles Picture-in-Picture mode for the assigned video element.
+     *
+     * - If this player's video element is currently in PiP, exits PiP via
+     *   `document.exitPictureInPicture()`.
+     * - If another element is currently in PiP, exits that first, then enters PiP
+     *   on this player's video element.
+     * - If PiP is not active, enters PiP via `requestPictureInPicture()`.
+     *
+     * No-ops if:
+     * - The player is not yet ready.
+     * - `document.pictureInPictureEnabled` is `false` (API not supported or blocked).
+     * - `assignedVideoElement.disablePictureInPicture` is `true`.
+     *
+     * State is tracked via native `enterpictureinpicture` / `leavepictureinpicture`
+     * events, not by the Promise resolution, to correctly handle external PiP changes.
+     *
+     * @returns A `Promise<void>` that resolves when the PiP state change completes.
+     */
+    async changePictureInPictureStatus() {
+        if (!this.validateVideoAndPlayerBeforeAction()) {
+            return;
+        }
+        if (!document.pictureInPictureEnabled) {
+            console.warn('[EvaApi] Picture-in-Picture is not supported or is disabled in this browser.');
+            return;
+        }
+        if (this.assignedVideoElement.disablePictureInPicture) {
+            console.warn('[EvaApi] Picture-in-Picture is disabled on this video element.');
+            return;
+        }
+        try {
+            if (document.pictureInPictureElement === this.assignedVideoElement) {
+                // This player is already in PiP — exit
+                await document.exitPictureInPicture();
+            }
+            else {
+                // Another element may be in PiP — the browser handles exiting it automatically
+                // before entering PiP on a new element, but we exit explicitly for safety
+                if (document.pictureInPictureElement) {
+                    await document.exitPictureInPicture();
+                }
+                await this.assignedVideoElement.requestPictureInPicture();
+            }
+        }
+        catch (error) {
+            console.error('[EvaApi] Picture-in-Picture toggle failed:', error);
+        }
+    }
+    assignPictureInPictureWindow(p) {
+        this.pipWindow = p.pictureInPictureWindow;
+        this.pictureInPictureSubject.next(true);
+    }
+    removePictureInPictureWindow(_p) {
+        this.pipWindow = null;
+        this.pictureInPictureSubject.next(false);
+    }
     // ─── Utilities ────────────────────────────────────────────────────────────
     /**
      * Returns whether the current source is a live stream.
@@ -784,9 +853,13 @@ class EvaApi {
         if (this.trackTimeout) {
             clearTimeout(this.trackTimeout);
         }
+        if (this.pipWindow) {
+            this.pipWindow = null;
+        }
         // Clear the registered streaming quality function
         this.qualityFn = null;
         // Complete all subjects — notifies subscribers and prevents further emissions
+        this.pictureInPictureSubject.complete();
         this.videoStateSubject.complete();
         this.videoVolumeSubject.complete();
         this.playbackRateSubject.complete();
@@ -961,6 +1034,24 @@ function transformEvaPlayPauseAria(v) {
         }
     };
 }
+function transformEvaPictureInPictureAria(v) {
+    if (!v) {
+        return {
+            ariaLabel: "Picture in picture",
+            ariaValueText: {
+                ariaLabelActivated: "Picture in picture is active",
+                ariaLabelDeactivated: "Picture in picture is invactive",
+            }
+        };
+    }
+    return {
+        ariaLabel: v.ariaLabel ? v.ariaLabel : "Picture in picture",
+        ariaValueText: {
+            ariaLabelActivated: v.ariaValueText && v.ariaValueText.ariaLabelActivated ? v.ariaValueText.ariaLabelActivated : "Picture in picture is active",
+            ariaLabelDeactivated: v.ariaValueText && v.ariaValueText.ariaLabelDeactivated ? v.ariaValueText.ariaLabelDeactivated : "Picture in picture is invactive",
+        }
+    };
+}
 function validateAndTransformEvaForwardAndBackwardSeconds(v) {
     if (!v) {
         return 10;
@@ -2398,6 +2489,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                     }, 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"] }]
         }], propDecorators: { evaOvelayPlayAria: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaOvelayPlayAria", required: false }] }], evaCustomIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaCustomIcon", required: false }] }] } });
 
+/**
+ * Picture-in-Picture toggle button for the Eva video player.
+ *
+ * Subscribes to `EvaApi.pictureInPictureSubject` to track whether the player is
+ * currently in PiP mode and updates its icon and ARIA attributes accordingly.
+ * Delegates the actual PiP toggle to `EvaApi.changePictureInPictureStatus()`, which
+ * handles browser support checks, the `disablePictureInPicture` guard, and correctly
+ * exiting another element's PiP session before entering a new one.
+ *
+ * State is kept in sync with native browser events (`enterpictureinpicture` /
+ * `leavepictureinpicture`) registered by `EvaApi`, so the button correctly reflects
+ * PiP changes triggered externally (e.g. by the browser's native controls or another
+ * player instance).
+ *
+ * Keyboard support:
+ * - `Enter` (13) and `Space` (32) trigger the same action as a click.
+ *
+ * @example
+ * // Minimal usage
+ * <eva-picture-in-picture />
+ *
+ * @example
+ * // With custom ARIA labels
+ * <eva-picture-in-picture
+ *   [evaAria]="{
+ *     ariaLabel: 'Picture in picture',
+ *     ariaValueText: {
+ *       ariaLabelActivated: 'Exit picture-in-picture',
+ *       ariaLabelDeactivated: 'Enter picture-in-picture'
+ *     }
+ *   }"
+ * />
+ *
+ * @example
+ * // With a custom icon
+ * <eva-picture-in-picture [evaCustomIcon]="true">
+ *   <my-pip-icon />
+ * </eva-picture-in-picture>
+ */
+class EvaPictureInPicture {
+    evaApi = inject(EvaApi);
+    /**
+     * When `true`, suppresses all built-in icon classes so you can project a
+     * custom icon via content projection.
+     *
+     * @default false
+     */
+    evaCustomIcon = input(false, ...(ngDevMode ? [{ debugName: "evaCustomIcon" }] : []));
+    /**
+     * ARIA configuration for the PiP button.
+     *
+     * All properties are optional — defaults are applied via `transformEvaPictureInPictureAria`.
+     * - `ariaLabel` — static label for the button element.
+     * - `ariaValueText.ariaLabelActivated` — `aria-valuetext` when PiP is active.
+     * - `ariaValueText.ariaLabelDeactivated` — `aria-valuetext` when PiP is inactive.
+     */
+    evaAria = input(transformEvaPictureInPictureAria(undefined), { ...(ngDevMode ? { debugName: "evaAria" } : {}), transform: transformEvaPictureInPictureAria });
+    /**
+     * Whether this player's video element is currently in Picture-in-Picture mode.
+     * Updated by subscribing to `EvaApi.pictureInPictureSubject`.
+     */
+    isPictureInPictureActive = signal(false, ...(ngDevMode ? [{ debugName: "isPictureInPictureActive" }] : []));
+    /**
+     * Static `aria-label` for the host button element.
+     * Sourced from `evaAria().ariaLabel` — does not change with PiP state.
+     */
+    ariaLabel = computed(() => {
+        return this.evaAria().ariaLabel;
+    }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Dynamic `aria-valuetext` for the host element.
+     * Switches between `ariaValueText.ariaLabelActivated` and
+     * `ariaValueText.ariaLabelDeactivated` based on the current PiP state,
+     * giving screen readers a meaningful description of the current button action.
+     */
+    ariaValueText = computed(() => {
+        return this.isPictureInPictureActive()
+            ? this.evaAria().ariaValueText.ariaLabelActivated
+            : this.evaAria().ariaValueText.ariaLabelDeactivated;
+    }, ...(ngDevMode ? [{ debugName: "ariaValueText" }] : []));
+    /** Subscription to `EvaApi.pictureInPictureSubject`. Cleaned up in `ngOnDestroy`. */
+    pip$ = null;
+    /**
+     * Subscribes to `EvaApi.pictureInPictureSubject` to keep `isPictureInPictureActive`
+     * in sync with the native PiP state, including changes triggered externally by the browser.
+     */
+    ngOnInit() {
+        this.pip$ = this.evaApi.pictureInPictureSubject.subscribe((isActive) => {
+            this.isPictureInPictureActive.set(isActive);
+        });
+    }
+    /** Unsubscribes from `EvaApi.pictureInPictureSubject` to prevent memory leaks. */
+    ngOnDestroy() {
+        this.pip$?.unsubscribe();
+    }
+    /**
+     * Delegates the PiP toggle to `EvaApi.changePictureInPictureStatus()`.
+     * Called on host click and from `pipClickedKeyboard`.
+     */
+    pipClicked() {
+        this.evaApi.changePictureInPictureStatus();
+    }
+    /**
+     * Handles keyboard events on the host element.
+     * Triggers `pipClicked()` on `Enter` (13) or `Space` (32) keypress.
+     *
+     * @param k - The native `KeyboardEvent` from the host element.
+     */
+    pipClickedKeyboard(k) {
+        if (k.keyCode === 13 || k.keyCode === 32) {
+            k.preventDefault();
+            this.pipClicked();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EvaPictureInPicture, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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: "21.1.2", ngImport: i0, type: EvaPictureInPicture, decorators: [{
+            type: Component,
+            args: [{ selector: 'eva-picture-in-picture', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        "tabindex": "0",
+                        "role": "button",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-valuetext]": "ariaValueText()",
+                        "(click)": "pipClicked()",
+                        "(keydown)": "pipClickedKeyboard($event)"
+                    }, 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"] }]
+        }], propDecorators: { evaCustomIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaCustomIcon", required: false }] }], evaAria: [{ type: i0.Input, args: [{ isSignal: true, alias: "evaAria", required: false }] }] } });
+
 /**
  * Pure pipe that formats a time value in seconds into a display string
  * for use in Eva video player time displays.
@@ -3877,18 +4097,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  *
  * Renders the currently active subtitle cue sourced directly from
  * `EvaApi.currentSubtitleCue`. The component is visible only when a cue is active
- * and automatically adjusts its bottom position based on whether the controls
- * container is visible, ensuring subtitles never overlap the controls bar.
+ * AND the player is not in Picture-in-Picture mode. It automatically adjusts its
+ * bottom position based on whether the controls container is visible, ensuring
+ * subtitles never overlap the controls bar.
  *
  * Visibility and positioning are driven entirely by host class and style bindings:
- * - `eva-subtitle-display--visible` — applied when `currentSubtitleCue` is non-null.
+ * - `eva-subtitle-display--visible` — applied when `currentSubtitleCue` is non-null
+ *   AND `pipWindowActive` is `false`. When PiP is active, this class is suppressed
+ *   because `EvaApi.setupPipListeners()` switches the active `TextTrack` to
+ *   `mode="showing"`, handing subtitle rendering off to the browser's native PiP UI.
  * - `padding-bottom` — switches between a minimal offset (`8px`) when controls are
- *   hidden and a calculated offset accounting for `--eva-control-element-height`,
- *   `--eva-scrub-bar-heights`, and a `12px` gap when controls are visible.
+ *   hidden and a calculated offset (`--eva-control-element-height + --eva-scrub-bar-heights + 12px`)
+ *   when controls are visible.
  *
  * The `cue` signal is read directly from `EvaApi.currentSubtitleCue`, which is
  * updated by `EvaCueChangeDirective` on each native `cuechange` event. No additional
- * subscription or polling is required.
+ * subscription is required for the cue text itself.
  *
  * @example
  * // Place inside eva-player to render active subtitle cues
@@ -3911,32 +4135,48 @@ class EvaSubtitleDisplay {
      * Updated by subscribing to `EvaApi.componentsContainerVisibilityStateSubject`.
      */
     controlsCointainerNotVisible = signal(false, ...(ngDevMode ? [{ debugName: "controlsCointainerNotVisible" }] : []));
+    /**
+     * Whether the player is currently in Picture-in-Picture mode.
+     * When `true`, the `eva-subtitle-display--visible` class is suppressed so the
+     * Angular subtitle overlay is hidden. The browser takes over subtitle rendering
+     * inside the PiP window via the active `TextTrack` (mode switched to `"showing"`
+     * by `EvaApi.setupPipListeners()`).
+     * Updated by subscribing to `EvaApi.pictureInPictureSubject`.
+     */
+    pipWindowActive = signal(false, ...(ngDevMode ? [{ debugName: "pipWindowActive" }] : []));
     /** Subscription to controls container visibility changes. Cleaned up in `ngOnDestroy`. */
-    controlsVisibiliti$ = null;
+    controlsVisibility$ = null;
+    /** Subscription to Picture-in-Picture state changes. Cleaned up in `ngOnDestroy`. */
+    pipWindowActive$ = null;
     /**
-     * Subscribes to `EvaApi.componentsContainerVisibilityStateSubject` to track
-     * whether the controls container is currently visible, so the subtitle
-     * position can adjust accordingly.
+     * Subscribes to:
+     * - `EvaApi.componentsContainerVisibilityStateSubject` — to adjust `padding-bottom`
+     *   based on controls bar visibility.
+     * - `EvaApi.pictureInPictureSubject` — to suppress the subtitle overlay when PiP is active.
      */
     ngOnInit() {
-        this.controlsVisibiliti$ = this.evaAPI.componentsContainerVisibilityStateSubject.subscribe((a) => {
+        this.controlsVisibility$ = this.evaAPI.componentsContainerVisibilityStateSubject.subscribe((a) => {
             this.controlsCointainerNotVisible.set(a);
         });
+        this.pipWindowActive$ = this.evaAPI.pictureInPictureSubject.subscribe((a) => {
+            this.pipWindowActive.set(a);
+        });
     }
-    /** Unsubscribes from the controls visibility subscription to prevent memory leaks. */
+    /** Unsubscribes from all active subscriptions to prevent memory leaks. */
     ngOnDestroy() {
-        this.controlsVisibiliti$?.unsubscribe();
+        this.controlsVisibility$?.unsubscribe();
+        this.pipWindowActive$?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EvaSubtitleDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: EvaSubtitleDisplay, isStandalone: true, selector: "eva-subtitle-display", host: { properties: { "class.eva-subtitle-display": "true", "class.eva-subtitle-display--visible": "cue() !== null", "style.padding-bottom": "controlsCointainerNotVisible() ? '8px' : 'calc(var(--eva-control-element-height) + var(--eva-scrub-bar-heights) + 12px)'" } }, ngImport: i0, template: "@if (cue()) {\n<span class=\"eva-subtitle-cue\" [innerHTML]=\"cue()\"></span>\n}", styles: [":host{display:block;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}.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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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: "21.1.2", ngImport: i0, type: EvaSubtitleDisplay, decorators: [{
             type: Component,
             args: [{ selector: "eva-subtitle-display", changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        "[class.eva-subtitle-display]": "true",
-                        "[class.eva-subtitle-display--visible]": "cue() !== null",
+                        // Suppressed during PiP — the browser renders subtitles natively inside the PiP window
+                        "[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)'"
-                    }, template: "@if (cue()) {\n<span class=\"eva-subtitle-cue\" [innerHTML]=\"cue()\"></span>\n}", styles: [":host{display:block;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}.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"] }]
+                    }, 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"] }]
         }] });
 
 /**
@@ -4958,6 +5198,8 @@ class EvaMediaEventListenersDirective {
     canPlayThrough$ = null;
     complete$ = null;
     durationChange$ = null;
+    enteredPiP$ = null;
+    leftPiP$ = null;
     emptied$ = null;
     encrypted$ = null;
     ended$ = null;
@@ -4987,6 +5229,8 @@ class EvaMediaEventListenersDirective {
     completeSub = null;
     durationChangeSub = null;
     emptiedSub = null;
+    enteredPipSub = null;
+    leftPipSub = null;
     encryptedSub = null;
     endedSub = null;
     errorSub = null;
@@ -5017,6 +5261,9 @@ class EvaMediaEventListenersDirective {
         this.complete$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.COMPLETE);
         this.durationChange$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.DURATION_CHANGE);
         this.emptied$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.EMPTIED);
+        this.enteredPiP$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.ENTERED_PICTURE_IN_PICTURE);
+        this.leftPiP$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.LEFT_PICTURE_IN_PICTURE);
+        this.emptied$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.EMPTIED);
         this.encrypted$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.ENCRYPTED);
         this.ended$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.ENDED);
         this.error$ = fromEvent(this.elementRef.nativeElement, EvaVideoEvent.ERROR);
@@ -5059,6 +5306,14 @@ class EvaMediaEventListenersDirective {
         /** Stub — no `EvaApi` side effect yet. */
         this.emptiedSub = this.emptied$.subscribe(() => {
         });
+        this.enteredPipSub = this.enteredPiP$.subscribe((pip) => {
+            this.evaAPI.assignPictureInPictureWindow(pip);
+        });
+        this.leftPipSub = this.leftPiP$.subscribe((pip) => {
+            this.evaAPI.removePictureInPictureWindow(pip);
+        });
+        this.emptiedSub = this.emptied$.subscribe(() => {
+        });
         /** Stub — no `EvaApi` side effect yet. */
         this.encryptedSub = this.encrypted$.subscribe(() => {
         });
@@ -5156,6 +5411,8 @@ class EvaMediaEventListenersDirective {
         this.completeSub?.unsubscribe();
         this.durationChangeSub?.unsubscribe();
         this.emptiedSub?.unsubscribe();
+        this.enteredPipSub?.unsubscribe();
+        this.leftPipSub?.unsubscribe();
         this.encryptedSub?.unsubscribe();
         this.endedSub?.unsubscribe();
         this.errorSub?.unsubscribe();
@@ -5298,6 +5555,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * `startingVolume`, which is validated and clamped via `validateAndPrepareStartingVideoVolume`
  * before being assigned.
  *
+ * Sanitization strategy per property type:
+ * - `poster` — sanitized with `SecurityContext.URL` as it is rendered as a resource URL.
+ * - `width` / `height` / `startingVolume` — assigned as typed numbers; no sanitization needed.
+ * - `autoplay` / `controls` / `loop` / `muted` / `playinline` /
+ *   `disablePictureInPicture` / `disableRemotePlayback` — assigned as typed booleans; no sanitization needed.
+ * - `crossorigin` / `preload` — constrained enum strings assigned directly to typed DOM properties; no sanitization needed.
+ *
  * Supported configuration properties (all optional):
  * - `width` / `height` — dimensions of the video element
  * - `autoplay` — start playback automatically
@@ -5321,6 +5585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 class EvaVideoConfigurationDirective {
     evaAPI = inject(EvaApi);
     elementRef = inject((ElementRef));
+    sanitizer = inject(DomSanitizer);
     /**
      * The configuration object to apply to the native `<video>` element.
      *
@@ -5341,7 +5606,6 @@ class EvaVideoConfigurationDirective {
      * @param changes - The `SimpleChanges` map provided by Angular.
      */
     ngOnChanges(changes) {
-        // Only apply changes if view is initialized and videoConfig changed
         if (this.isViewInitialized && changes['videoConfig']) {
             this.applyConfiguration();
         }
@@ -5358,6 +5622,11 @@ class EvaVideoConfigurationDirective {
      * Iterates over all supported `EvaVideoElementConfiguration` properties and
      * applies each one directly to the native `<video>` element if the value is truthy.
      *
+     * Sanitization is applied only where values are rendered as resource URLs:
+     * - `poster` is sanitized with `SecurityContext.URL`.
+     * - All other properties are typed DOM assignments (boolean, number, or constrained
+     *   enum string) and do not require sanitization.
+     *
      * `startingVolume` is passed through `validateAndPrepareStartingVideoVolume`
      * before assignment to ensure it is clamped to a valid `[0, 1]` range.
      *
@@ -5367,44 +5636,53 @@ class EvaVideoConfigurationDirective {
         if (!this.evaVideoConfig()) {
             return;
         }
-        if (this.evaVideoConfig().width) {
-            this.elementRef.nativeElement.width = this.evaVideoConfig().width;
+        const config = this.evaVideoConfig();
+        // Numeric properties — assigned as typed numbers, no sanitization needed
+        if (config.width) {
+            this.elementRef.nativeElement.width = config.width;
         }
-        if (this.evaVideoConfig().height) {
-            this.elementRef.nativeElement.height = this.evaVideoConfig().height;
+        if (config.height) {
+            this.elementRef.nativeElement.height = config.height;
         }
-        if (this.evaVideoConfig().autoplay) {
-            this.elementRef.nativeElement.autoplay = this.evaVideoConfig().autoplay;
+        // Boolean properties — assigned as typed booleans, no sanitization needed
+        if (config.autoplay) {
+            this.elementRef.nativeElement.autoplay = config.autoplay;
         }
-        if (this.evaVideoConfig().controls) {
-            this.elementRef.nativeElement.controls = this.evaVideoConfig().controls;
+        if (config.controls) {
+            this.elementRef.nativeElement.controls = config.controls;
         }
-        if (this.evaVideoConfig().crossorigin) {
-            this.elementRef.nativeElement.crossOrigin = this.evaVideoConfig().crossorigin;
+        if (config.disablePictureInPicture) {
+            this.elementRef.nativeElement.disablePictureInPicture = config.disablePictureInPicture;
         }
-        if (this.evaVideoConfig().disablePictureInPicture) {
-            this.elementRef.nativeElement.disablePictureInPicture = this.evaVideoConfig().disablePictureInPicture;
+        if (config.disableRemotePlayback) {
+            this.elementRef.nativeElement.disableRemotePlayback = config.disableRemotePlayback;
         }
-        if (this.evaVideoConfig().disableRemotePlayback) {
-            this.elementRef.nativeElement.disableRemotePlayback = this.evaVideoConfig().disableRemotePlayback;
+        if (config.loop) {
+            this.elementRef.nativeElement.loop = config.loop;
         }
-        if (this.evaVideoConfig().loop) {
-            this.elementRef.nativeElement.loop = this.evaVideoConfig().loop;
+        if (config.muted) {
+            this.elementRef.nativeElement.muted = config.muted;
         }
-        if (this.evaVideoConfig().muted) {
-            this.elementRef.nativeElement.muted = this.evaVideoConfig().muted;
+        if (config.playinline) {
+            this.elementRef.nativeElement.playsInline = config.playinline;
         }
-        if (this.evaVideoConfig().playinline) {
-            this.elementRef.nativeElement.playsInline = this.evaVideoConfig().playinline;
+        // Constrained enum strings — typed DOM properties with a fixed set of valid values,
+        // no sanitization needed
+        if (config.crossorigin) {
+            this.elementRef.nativeElement.crossOrigin = config.crossorigin;
         }
-        if (this.evaVideoConfig().poster) {
-            this.elementRef.nativeElement.poster = this.evaVideoConfig().poster;
+        if (config.preload) {
+            this.elementRef.nativeElement.preload = config.preload;
         }
-        if (this.evaVideoConfig().preload) {
-            this.elementRef.nativeElement.preload = this.evaVideoConfig().preload;
+        // URL property — sanitized with SecurityContext.URL as the browser fetches this
+        // as a resource and it is reflected in the DOM as an attribute
+        if (config.poster) {
+            this.elementRef.nativeElement.poster = this.sanitizer.sanitize(SecurityContext.URL, config.poster) ?? '';
         }
-        if (this.evaVideoConfig().startingVolume) {
-            this.elementRef.nativeElement.volume = validateAndPrepareStartingVideoVolume(this.evaVideoConfig().startingVolume);
+        // 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 });
@@ -5970,5 +6248,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EvaActiveChapter, EvaBackward, EvaBuffering, EvaControlsContainer, EvaControlsDivider, EvaCueChangeDirective, EvaDashDirective, EvaForward, EvaFullscreen, EvaHlsDirective, EvaMediaEventListenersDirective, EvaMute, EvaOverlayPlay, EvaPlayPause, EvaPlaybackSpeed, EvaPlayer, EvaQualitySelector, EvaScrubBar, EvaScrubBarBufferingTime, EvaScrubBarCurrentTime, EvaState, EvaSubtitleDisplay, EvaTimeDisplay, EvaTimeDisplayPipe, EvaTrackSelector, EvaUserInteractionEventsDirective, EvaVideoConfigurationDirective, EvaVideoEvent, EvaVolume, isValidTrackKind, isValidVideoEvent, transformEvaActiveChaptedAria, transformEvaBackwardAria, transformEvaControlsDividerAria, transformEvaForwardAria, transformEvaFullscreenAria, transformEvaMuteAria, transformEvaOverlayPlayAria, transformEvaPlayPauseAria, transformEvaPlaybackSpeedAria, transformEvaScrubBarAria, transformEvaTimeDisplayAria, transformEvaVolumeAria, validateAndTransformEvaForwardAndBackwardSeconds, validateAndTransformVolumeRange };
+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, transformEvaActiveChaptedAria, transformEvaBackwardAria, transformEvaControlsDividerAria, transformEvaForwardAria, transformEvaFullscreenAria, transformEvaMuteAria, transformEvaOverlayPlayAria, transformEvaPictureInPictureAria, transformEvaPlayPauseAria, transformEvaPlaybackSpeedAria, transformEvaScrubBarAria, transformEvaTimeDisplayAria, transformEvaVolumeAria, validateAndTransformEvaForwardAndBackwardSeconds, validateAndTransformVolumeRange };
 //# sourceMappingURL=ez-vid-ang.mjs.map