npm - @elementar-rt/components - Versions diffs - 0.6.58 → 0.7.1 - Mend

@elementar-rt/components 0.6.58 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (414) hide show

package/fesm2022/elementar-rt-components-video-player.mjs CHANGED Viewed

@@ -2,28 +2,28 @@ import * as i0 from '@angular/core';
 import { input, booleanAttribute, viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 class VideoPlayerComponent {
-    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
-    poster = input('', ...(ngDevMode ? [{ debugName: "poster" }] : []));
-    autoplay = input(false, ...(ngDevMode ? [{ debugName: "autoplay", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    loop = input(false, ...(ngDevMode ? [{ debugName: "loop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    chapters = input([], ...(ngDevMode ? [{ debugName: "chapters" }] : []));
-    _videoEl = viewChild('videoEl', ...(ngDevMode ? [{ debugName: "_videoEl" }] : []));
-    _playing = signal(false, ...(ngDevMode ? [{ debugName: "_playing" }] : []));
-    _muted = signal(false, ...(ngDevMode ? [{ debugName: "_muted" }] : []));
-    _volume = signal(1, ...(ngDevMode ? [{ debugName: "_volume" }] : []));
-    _currentTime = signal(0, ...(ngDevMode ? [{ debugName: "_currentTime" }] : []));
-    _duration = signal(0, ...(ngDevMode ? [{ debugName: "_duration" }] : []));
-    _buffered = signal(0, ...(ngDevMode ? [{ debugName: "_buffered" }] : []));
-    _speed = signal(1, ...(ngDevMode ? [{ debugName: "_speed" }] : []));
-    _showSpeedMenu = signal(false, ...(ngDevMode ? [{ debugName: "_showSpeedMenu" }] : []));
-    _fullscreen = signal(false, ...(ngDevMode ? [{ debugName: "_fullscreen" }] : []));
-    _progress = computed(() => this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_progress" }] : []));
-    _bufferedPct = computed(() => this._duration() > 0 ? (this._buffered() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_bufferedPct" }] : []));
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    poster = input('', ...(ngDevMode ? [{ debugName: "poster" }] : /* istanbul ignore next */ []));
+    autoplay = input(false, { ...(ngDevMode ? { debugName: "autoplay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loop = input(false, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    chapters = input([], ...(ngDevMode ? [{ debugName: "chapters" }] : /* istanbul ignore next */ []));
+    _videoEl = viewChild('videoEl', ...(ngDevMode ? [{ debugName: "_videoEl" }] : /* istanbul ignore next */ []));
+    _playing = signal(false, ...(ngDevMode ? [{ debugName: "_playing" }] : /* istanbul ignore next */ []));
+    _muted = signal(false, ...(ngDevMode ? [{ debugName: "_muted" }] : /* istanbul ignore next */ []));
+    _volume = signal(1, ...(ngDevMode ? [{ debugName: "_volume" }] : /* istanbul ignore next */ []));
+    _currentTime = signal(0, ...(ngDevMode ? [{ debugName: "_currentTime" }] : /* istanbul ignore next */ []));
+    _duration = signal(0, ...(ngDevMode ? [{ debugName: "_duration" }] : /* istanbul ignore next */ []));
+    _buffered = signal(0, ...(ngDevMode ? [{ debugName: "_buffered" }] : /* istanbul ignore next */ []));
+    _speed = signal(1, ...(ngDevMode ? [{ debugName: "_speed" }] : /* istanbul ignore next */ []));
+    _showSpeedMenu = signal(false, ...(ngDevMode ? [{ debugName: "_showSpeedMenu" }] : /* istanbul ignore next */ []));
+    _fullscreen = signal(false, ...(ngDevMode ? [{ debugName: "_fullscreen" }] : /* istanbul ignore next */ []));
+    _progress = computed(() => this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
+    _bufferedPct = computed(() => this._duration() > 0 ? (this._buffered() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_bufferedPct" }] : /* istanbul ignore next */ []));
     _currentChapter = computed(() => {
         const t = this._currentTime();
         const chapters = [...this.chapters()].sort((a, b) => b.time - a.time);
         return chapters.find(c => t >= c.time)?.label ?? '';
-    }, ...(ngDevMode ? [{ debugName: "_currentChapter" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_currentChapter" }] : /* istanbul ignore next */ []));
     _speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
     ngAfterViewInit() {
         const v = this._videoEl()?.nativeElement;
@@ -128,12 +128,12 @@ class VideoPlayerComponent {
     _video() {
         return this._videoEl()?.nativeElement ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VideoPlayerComponent, isStandalone: true, selector: "emr-video-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, chapters: { classPropertyName: "chapters", publicName: "chapters", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_videoEl", first: true, predicate: ["videoEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}\u00D7\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}\u00D7</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.vp-container{position:relative;background:#000;border-radius:.75rem;overflow:hidden;aspect-ratio:16/9}.vp-container:hover .vp-controls{opacity:1}.vp-video{width:100%;height:100%;object-fit:contain;cursor:pointer;display:block}.vp-chapter-badge{position:absolute;top:calc(var(--spacing, .25rem) * 3);left:calc(var(--spacing, .25rem) * 3);background:#0009;color:#fff;font-size:.75rem;font-weight:600;padding:calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);border-radius:9999px}.vp-controls{position:absolute;bottom:0;left:0;right:0;padding:calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2);background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.vp-progress-wrap{position:relative;height:calc(var(--spacing, .25rem) * 4);display:flex;align-items:center}.vp-buffered{position:absolute;left:0;height:3px;background:#ffffff4d;border-radius:9999px;pointer-events:none;z-index:0}.vp-seek{width:100%;position:relative;z-index:1;accent-color:var(--color-primary);cursor:pointer;background:transparent;height:3px}.vp-chapter-marker{position:absolute;width:2px;height:calc(var(--spacing, .25rem) * 2.5);background:#fff9;border-radius:1px;z-index:2;pointer-events:none;transform:translate(-50%)}.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:var(--spacing, .25rem)}.vp-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;border-radius:.375rem}.vp-btn:hover{background:#ffffff26}.vp-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}.vp-volume{width:calc(var(--spacing, .25rem) * 20);accent-color:var(--color-primary);cursor:pointer}.vp-time{font-size:.75rem;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-speed-wrap{position:relative}.vp-speed-btn{font-size:.75rem;font-weight:700;width:auto;padding:0 calc(var(--spacing, .25rem) * 1.5);min-width:calc(var(--spacing, .25rem) * 9)}.vp-speed-menu{position:absolute;bottom:calc(100% + calc(var(--spacing, .25rem) * 2));right:0;background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-width:calc(var(--spacing, .25rem) * 16);box-shadow:0 4px 16px #0000004d}.vp-speed-opt{font-size:.875rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 3);background:transparent;border:none;cursor:pointer;text-align:center;color:var(--color-on-surface)}.vp-speed-opt:hover{background:var(--color-surface-container)}.vp-speed-opt[data-active]{color:var(--color-primary);font-weight:600}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: VideoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: VideoPlayerComponent, isStandalone: true, selector: "emr-video-player", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, chapters: { classPropertyName: "chapters", publicName: "chapters", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_videoEl", first: true, predicate: ["videoEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}\u00D7\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}\u00D7</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.vp-container{position:relative;background:#000;border-radius:.75rem;overflow:hidden;aspect-ratio:16/9}.vp-container:hover .vp-controls{opacity:1}.vp-video{width:100%;height:100%;object-fit:contain;cursor:pointer;display:block}.vp-chapter-badge{position:absolute;top:calc(var(--spacing, .25rem) * 3);left:calc(var(--spacing, .25rem) * 3);background:#0009;color:#fff;font-size:.75rem;font-weight:600;padding:calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);border-radius:9999px}.vp-controls{position:absolute;bottom:0;left:0;right:0;padding:calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2);background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.vp-progress-wrap{position:relative;height:calc(var(--spacing, .25rem) * 4);display:flex;align-items:center}.vp-buffered{position:absolute;left:0;height:3px;background:#ffffff4d;border-radius:9999px;pointer-events:none;z-index:0}.vp-seek{width:100%;position:relative;z-index:1;accent-color:var(--color-primary);cursor:pointer;background:transparent;height:3px}.vp-chapter-marker{position:absolute;width:2px;height:calc(var(--spacing, .25rem) * 2.5);background:#fff9;border-radius:1px;z-index:2;pointer-events:none;transform:translate(-50%)}.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:var(--spacing, .25rem)}.vp-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;border-radius:.375rem}.vp-btn:hover{background:#ffffff26}.vp-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}.vp-volume{width:calc(var(--spacing, .25rem) * 20);accent-color:var(--color-primary);cursor:pointer}.vp-time{font-size:.75rem;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-speed-wrap{position:relative}.vp-speed-btn{font-size:.75rem;font-weight:700;width:auto;padding:0 calc(var(--spacing, .25rem) * 1.5);min-width:calc(var(--spacing, .25rem) * 9)}.vp-speed-menu{position:absolute;bottom:calc(100% + calc(var(--spacing, .25rem) * 2));right:0;background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-width:calc(var(--spacing, .25rem) * 16);box-shadow:0 4px 16px #0000004d}.vp-speed-opt{font-size:.875rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 3);background:transparent;border:none;cursor:pointer;text-align:center;color:var(--color-on-surface)}.vp-speed-opt:hover{background:var(--color-surface-container)}.vp-speed-opt[data-active]{color:var(--color-primary);font-weight:600}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: VideoPlayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'emr-video-player', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}\u00D7\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}\u00D7</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.vp-container{position:relative;background:#000;border-radius:.75rem;overflow:hidden;aspect-ratio:16/9}.vp-container:hover .vp-controls{opacity:1}.vp-video{width:100%;height:100%;object-fit:contain;cursor:pointer;display:block}.vp-chapter-badge{position:absolute;top:calc(var(--spacing, .25rem) * 3);left:calc(var(--spacing, .25rem) * 3);background:#0009;color:#fff;font-size:.75rem;font-weight:600;padding:calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);border-radius:9999px}.vp-controls{position:absolute;bottom:0;left:0;right:0;padding:calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2);background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.vp-progress-wrap{position:relative;height:calc(var(--spacing, .25rem) * 4);display:flex;align-items:center}.vp-buffered{position:absolute;left:0;height:3px;background:#ffffff4d;border-radius:9999px;pointer-events:none;z-index:0}.vp-seek{width:100%;position:relative;z-index:1;accent-color:var(--color-primary);cursor:pointer;background:transparent;height:3px}.vp-chapter-marker{position:absolute;width:2px;height:calc(var(--spacing, .25rem) * 2.5);background:#fff9;border-radius:1px;z-index:2;pointer-events:none;transform:translate(-50%)}.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:var(--spacing, .25rem)}.vp-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;border-radius:.375rem}.vp-btn:hover{background:#ffffff26}.vp-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}.vp-volume{width:calc(var(--spacing, .25rem) * 20);accent-color:var(--color-primary);cursor:pointer}.vp-time{font-size:.75rem;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-speed-wrap{position:relative}.vp-speed-btn{font-size:.75rem;font-weight:700;width:auto;padding:0 calc(var(--spacing, .25rem) * 1.5);min-width:calc(var(--spacing, .25rem) * 9)}.vp-speed-menu{position:absolute;bottom:calc(100% + calc(var(--spacing, .25rem) * 2));right:0;background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-width:calc(var(--spacing, .25rem) * 16);box-shadow:0 4px 16px #0000004d}.vp-speed-opt{font-size:.875rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 3);background:transparent;border:none;cursor:pointer;text-align:center;color:var(--color-on-surface)}.vp-speed-opt:hover{background:var(--color-surface-container)}.vp-speed-opt[data-active]{color:var(--color-primary);font-weight:600}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'emr-video-player', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"vp-container\">\n  <video\n    #videoEl\n    class=\"vp-video\"\n    [src]=\"src()\"\n    [poster]=\"poster()\"\n    [loop]=\"loop()\"\n    [muted]=\"_muted()\"\n    (timeupdate)=\"_onTimeUpdate()\"\n    (play)=\"_onPlay()\"\n    (pause)=\"_onPause()\"\n    (loadedmetadata)=\"_onLoadedMetadata()\"\n    (click)=\"_togglePlay()\"\n  ></video>\n\n  @if (_currentChapter()) {\n    <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n  }\n\n  <div class=\"vp-controls\">\n    <!-- Progress bar -->\n    <div class=\"vp-progress-wrap\">\n      <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n      <input\n        type=\"range\" class=\"vp-seek\"\n        min=\"0\" max=\"100\" step=\"0.1\"\n        [value]=\"_progress()\"\n        (input)=\"_onSeek($event)\"\n      />\n      @for (ch of chapters(); track ch.time) {\n        <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n      }\n    </div>\n\n    <!-- Bottom bar -->\n    <div class=\"vp-bar\">\n      <div class=\"vp-bar-left\">\n        <!-- Play/Pause -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n          @if (_playing()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n          }\n        </button>\n\n        <!-- Volume -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n          @if (_muted() || _volume() === 0) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n          }\n        </button>\n        <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n        <!-- Time -->\n        <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n      </div>\n\n      <div class=\"vp-bar-right\">\n        <!-- Speed -->\n        <div class=\"vp-speed-wrap\">\n          <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n            {{ _speed() }}\u00D7\n          </button>\n          @if (_showSpeedMenu()) {\n            <div class=\"vp-speed-menu\">\n              @for (s of _speeds; track s) {\n                <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s || null\" (click)=\"_setSpeed(s)\">{{ s }}\u00D7</button>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- PiP -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n        </button>\n\n        <!-- Fullscreen -->\n        <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n          @if (_fullscreen()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n          } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.vp-container{position:relative;background:#000;border-radius:.75rem;overflow:hidden;aspect-ratio:16/9}.vp-container:hover .vp-controls{opacity:1}.vp-video{width:100%;height:100%;object-fit:contain;cursor:pointer;display:block}.vp-chapter-badge{position:absolute;top:calc(var(--spacing, .25rem) * 3);left:calc(var(--spacing, .25rem) * 3);background:#0009;color:#fff;font-size:.75rem;font-weight:600;padding:calc(var(--spacing, .25rem) * .5) calc(var(--spacing, .25rem) * 2);border-radius:9999px}.vp-controls{position:absolute;bottom:0;left:0;right:0;padding:calc(var(--spacing, .25rem) * 4) calc(var(--spacing, .25rem) * 3) calc(var(--spacing, .25rem) * 2);background:linear-gradient(transparent,#000000b3);opacity:0;transition:opacity .2s ease;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.vp-progress-wrap{position:relative;height:calc(var(--spacing, .25rem) * 4);display:flex;align-items:center}.vp-buffered{position:absolute;left:0;height:3px;background:#ffffff4d;border-radius:9999px;pointer-events:none;z-index:0}.vp-seek{width:100%;position:relative;z-index:1;accent-color:var(--color-primary);cursor:pointer;background:transparent;height:3px}.vp-chapter-marker{position:absolute;width:2px;height:calc(var(--spacing, .25rem) * 2.5);background:#fff9;border-radius:1px;z-index:2;pointer-events:none;transform:translate(-50%)}.vp-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.vp-bar-left,.vp-bar-right{display:flex;align-items:center;gap:var(--spacing, .25rem)}.vp-btn{width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:#fff;border-radius:.375rem}.vp-btn:hover{background:#ffffff26}.vp-btn svg{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4)}.vp-volume{width:calc(var(--spacing, .25rem) * 20);accent-color:var(--color-primary);cursor:pointer}.vp-time{font-size:.75rem;color:#ffffffd9;white-space:nowrap;font-variant-numeric:tabular-nums}.vp-speed-wrap{position:relative}.vp-speed-btn{font-size:.75rem;font-weight:700;width:auto;padding:0 calc(var(--spacing, .25rem) * 1.5);min-width:calc(var(--spacing, .25rem) * 9)}.vp-speed-menu{position:absolute;bottom:calc(100% + calc(var(--spacing, .25rem) * 2));right:0;background:var(--color-surface-container-high);border:1px solid var(--color-outline-variant);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-width:calc(var(--spacing, .25rem) * 16);box-shadow:0 4px 16px #0000004d}.vp-speed-opt{font-size:.875rem;padding:calc(var(--spacing, .25rem) * 1.5) calc(var(--spacing, .25rem) * 3);background:transparent;border:none;cursor:pointer;text-align:center;color:var(--color-on-surface)}.vp-speed-opt:hover{background:var(--color-surface-container)}.vp-speed-opt[data-active]{color:var(--color-primary);font-weight:600}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], chapters: [{ type: i0.Input, args: [{ isSignal: true, alias: "chapters", required: false }] }], _videoEl: [{ type: i0.ViewChild, args: ['videoEl', { isSignal: true }] }] } });
 /**

package/fesm2022/elementar-rt-components-video-player.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elementar-rt-components-video-player.mjs","sources":["../../../projects/components/video-player/src/video-player/video-player.component.ts","../../../projects/components/video-player/src/video-player/video-player.component.html","../../../projects/components/video-player/elementar-rt-components-video-player.ts"],"sourcesContent":["import {\n Component, input, signal, computed, ChangeDetectionStrategy,\n booleanAttribute, viewChild, ElementRef, AfterViewInit, OnDestroy\n} from '@angular/core';\n\nexport interface VideoChapter {\n time: number;\n label: string;\n}\n\n@Component({\n selector: 'emr-video-player',\n standalone: true,\n templateUrl: './video-player.component.html',\n styleUrl: './video-player.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class VideoPlayerComponent implements AfterViewInit, OnDestroy {\n src = input('');\n poster = input('');\n autoplay = input(false, { transform: booleanAttribute });\n loop = input(false, { transform: booleanAttribute });\n chapters = input<VideoChapter[]>([]);\n\n protected _videoEl = viewChild<ElementRef<HTMLVideoElement>>('videoEl');\n\n protected _playing = signal(false);\n protected _muted = signal(false);\n protected _volume = signal(1);\n protected _currentTime = signal(0);\n protected _duration = signal(0);\n protected _buffered = signal(0);\n protected _speed = signal(1);\n protected _showSpeedMenu = signal(false);\n protected _fullscreen = signal(false);\n\n protected _progress = computed(() =>\n this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0\n );\n\n protected _bufferedPct = computed(() =>\n this._duration() > 0 ? (this._buffered() / this._duration()) * 100 : 0\n );\n\n protected _currentChapter = computed(() => {\n const t = this._currentTime();\n const chapters = [...this.chapters()].sort((a, b) => b.time - a.time);\n return chapters.find(c => t >= c.time)?.label ?? '';\n });\n\n protected readonly _speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];\n\n ngAfterViewInit(): void {\n const v = this._videoEl()?.nativeElement;\n if (v && this.autoplay()) { v.play().catch(() => {}); }\n }\n\n ngOnDestroy(): void {}\n\n protected _togglePlay(): void {\n const v = this._video();\n if (!v) return;\n if (this._playing()) { v.pause(); } else { v.play().catch(() => {}); }\n }\n\n protected _toggleMute(): void {\n const v = this._video();\n if (!v) return;\n v.muted = !v.muted;\n this._muted.set(v.muted);\n }\n\n protected _onVolumeChange(e: Event): void {\n const v = this._video();\n if (!v) return;\n const vol = parseFloat((e.target as HTMLInputElement).value);\n v.volume = vol;\n v.muted = vol === 0;\n this._volume.set(vol);\n this._muted.set(v.muted);\n }\n\n protected _onSeek(e: Event): void {\n const v = this._video();\n if (!v) return;\n const pct = parseFloat((e.target as HTMLInputElement).value);\n v.currentTime = (pct / 100) * this._duration();\n }\n\n protected _setSpeed(s: number): void {\n const v = this._video();\n if (!v) return;\n v.playbackRate = s;\n this._speed.set(s);\n this._showSpeedMenu.set(false);\n }\n\n protected _togglePiP(): void {\n const v = this._video();\n if (!v) return;\n if (document.pictureInPictureElement) {\n document.exitPictureInPicture().catch(() => {});\n } else {\n v.requestPictureInPicture().catch(() => {});\n }\n }\n\n protected _toggleFullscreen(): void {\n const el = document.querySelector('.vp-container') as HTMLElement;\n if (!el) return;\n if (document.fullscreenElement) {\n document.exitFullscreen().then(() => this._fullscreen.set(false)).catch(() => {});\n } else {\n el.requestFullscreen().then(() => this._fullscreen.set(true)).catch(() => {});\n }\n }\n\n protected _onTimeUpdate(): void {\n const v = this._video();\n if (!v) return;\n this._currentTime.set(v.currentTime);\n if (v.buffered.length > 0) this._buffered.set(v.buffered.end(v.buffered.length - 1));\n }\n\n protected _onPlay(): void { this._playing.set(true); }\n protected _onPause(): void { this._playing.set(false); }\n protected _onLoadedMetadata(): void {\n const v = this._video();\n if (v) this._duration.set(v.duration);\n }\n\n protected _formatTime(s: number): string {\n if (!s \|\| isNaN(s)) return '0:00';\n const h = Math.floor(s / 3600);\n const m = Math.floor((s % 3600) / 60);\n const sec = Math.floor(s % 60);\n if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;\n return `${m}:${sec.toString().padStart(2, '0')}`;\n }\n\n protected _chapterOffset(chapter: VideoChapter): number {\n return this._duration() > 0 ? (chapter.time / this._duration()) * 100 : 0;\n }\n\n private _video(): HTMLVideoElement \| null {\n return this._videoEl()?.nativeElement ?? null;\n }\n}\n","<div class=\"vp-container\">\n <video\n #videoEl\n class=\"vp-video\"\n [src]=\"src()\"\n [poster]=\"poster()\"\n [loop]=\"loop()\"\n [muted]=\"_muted()\"\n (timeupdate)=\"_onTimeUpdate()\"\n (play)=\"_onPlay()\"\n (pause)=\"_onPause()\"\n (loadedmetadata)=\"_onLoadedMetadata()\"\n (click)=\"_togglePlay()\"\n ></video>\n\n @if (_currentChapter()) {\n <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n }\n\n <div class=\"vp-controls\">\n <!-- Progress bar -->\n <div class=\"vp-progress-wrap\">\n <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n <input\n type=\"range\" class=\"vp-seek\"\n min=\"0\" max=\"100\" step=\"0.1\"\n [value]=\"_progress()\"\n (input)=\"_onSeek($event)\"\n />\n @for (ch of chapters(); track ch.time) {\n <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n }\n </div>\n\n <!-- Bottom bar -->\n <div class=\"vp-bar\">\n <div class=\"vp-bar-left\">\n <!-- Play/Pause -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n @if (_playing()) {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n }\n </button>\n\n <!-- Volume -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n @if (_muted() \|\| _volume() === 0) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n }\n </button>\n <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n <!-- Time -->\n <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n </div>\n\n <div class=\"vp-bar-right\">\n <!-- Speed -->\n <div class=\"vp-speed-wrap\">\n <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n {{ _speed() }}×\n </button>\n @if (_showSpeedMenu()) {\n <div class=\"vp-speed-menu\">\n @for (s of _speeds; track s) {\n <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s \|\| null\" (click)=\"_setSpeed(s)\">{{ s }}×</button>\n }\n </div>\n }\n </div>\n\n <!-- PiP -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n </button>\n\n <!-- Fullscreen -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n @if (_fullscreen()) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n }\n </button>\n </div>\n </div>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"elementar-rt-components-video-player.mjs","sources":["../../../projects/components/video-player/src/video-player/video-player.component.ts","../../../projects/components/video-player/src/video-player/video-player.component.html","../../../projects/components/video-player/elementar-rt-components-video-player.ts"],"sourcesContent":["import {\n Component, input, signal, computed, ChangeDetectionStrategy,\n booleanAttribute, viewChild, ElementRef, AfterViewInit, OnDestroy\n} from '@angular/core';\n\nexport interface VideoChapter {\n time: number;\n label: string;\n}\n\n@Component({\n selector: 'emr-video-player',\n standalone: true,\n templateUrl: './video-player.component.html',\n styleUrl: './video-player.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class VideoPlayerComponent implements AfterViewInit, OnDestroy {\n src = input('');\n poster = input('');\n autoplay = input(false, { transform: booleanAttribute });\n loop = input(false, { transform: booleanAttribute });\n chapters = input<VideoChapter[]>([]);\n\n protected _videoEl = viewChild<ElementRef<HTMLVideoElement>>('videoEl');\n\n protected _playing = signal(false);\n protected _muted = signal(false);\n protected _volume = signal(1);\n protected _currentTime = signal(0);\n protected _duration = signal(0);\n protected _buffered = signal(0);\n protected _speed = signal(1);\n protected _showSpeedMenu = signal(false);\n protected _fullscreen = signal(false);\n\n protected _progress = computed(() =>\n this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0\n );\n\n protected _bufferedPct = computed(() =>\n this._duration() > 0 ? (this._buffered() / this._duration()) * 100 : 0\n );\n\n protected _currentChapter = computed(() => {\n const t = this._currentTime();\n const chapters = [...this.chapters()].sort((a, b) => b.time - a.time);\n return chapters.find(c => t >= c.time)?.label ?? '';\n });\n\n protected readonly _speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];\n\n ngAfterViewInit(): void {\n const v = this._videoEl()?.nativeElement;\n if (v && this.autoplay()) { v.play().catch(() => {}); }\n }\n\n ngOnDestroy(): void {}\n\n protected _togglePlay(): void {\n const v = this._video();\n if (!v) return;\n if (this._playing()) { v.pause(); } else { v.play().catch(() => {}); }\n }\n\n protected _toggleMute(): void {\n const v = this._video();\n if (!v) return;\n v.muted = !v.muted;\n this._muted.set(v.muted);\n }\n\n protected _onVolumeChange(e: Event): void {\n const v = this._video();\n if (!v) return;\n const vol = parseFloat((e.target as HTMLInputElement).value);\n v.volume = vol;\n v.muted = vol === 0;\n this._volume.set(vol);\n this._muted.set(v.muted);\n }\n\n protected _onSeek(e: Event): void {\n const v = this._video();\n if (!v) return;\n const pct = parseFloat((e.target as HTMLInputElement).value);\n v.currentTime = (pct / 100) * this._duration();\n }\n\n protected _setSpeed(s: number): void {\n const v = this._video();\n if (!v) return;\n v.playbackRate = s;\n this._speed.set(s);\n this._showSpeedMenu.set(false);\n }\n\n protected _togglePiP(): void {\n const v = this._video();\n if (!v) return;\n if (document.pictureInPictureElement) {\n document.exitPictureInPicture().catch(() => {});\n } else {\n v.requestPictureInPicture().catch(() => {});\n }\n }\n\n protected _toggleFullscreen(): void {\n const el = document.querySelector('.vp-container') as HTMLElement;\n if (!el) return;\n if (document.fullscreenElement) {\n document.exitFullscreen().then(() => this._fullscreen.set(false)).catch(() => {});\n } else {\n el.requestFullscreen().then(() => this._fullscreen.set(true)).catch(() => {});\n }\n }\n\n protected _onTimeUpdate(): void {\n const v = this._video();\n if (!v) return;\n this._currentTime.set(v.currentTime);\n if (v.buffered.length > 0) this._buffered.set(v.buffered.end(v.buffered.length - 1));\n }\n\n protected _onPlay(): void { this._playing.set(true); }\n protected _onPause(): void { this._playing.set(false); }\n protected _onLoadedMetadata(): void {\n const v = this._video();\n if (v) this._duration.set(v.duration);\n }\n\n protected _formatTime(s: number): string {\n if (!s \|\| isNaN(s)) return '0:00';\n const h = Math.floor(s / 3600);\n const m = Math.floor((s % 3600) / 60);\n const sec = Math.floor(s % 60);\n if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;\n return `${m}:${sec.toString().padStart(2, '0')}`;\n }\n\n protected _chapterOffset(chapter: VideoChapter): number {\n return this._duration() > 0 ? (chapter.time / this._duration()) * 100 : 0;\n }\n\n private _video(): HTMLVideoElement \| null {\n return this._videoEl()?.nativeElement ?? null;\n }\n}\n","<div class=\"vp-container\">\n <video\n #videoEl\n class=\"vp-video\"\n [src]=\"src()\"\n [poster]=\"poster()\"\n [loop]=\"loop()\"\n [muted]=\"_muted()\"\n (timeupdate)=\"_onTimeUpdate()\"\n (play)=\"_onPlay()\"\n (pause)=\"_onPause()\"\n (loadedmetadata)=\"_onLoadedMetadata()\"\n (click)=\"_togglePlay()\"\n ></video>\n\n @if (_currentChapter()) {\n <div class=\"vp-chapter-badge\">{{ _currentChapter() }}</div>\n }\n\n <div class=\"vp-controls\">\n <!-- Progress bar -->\n <div class=\"vp-progress-wrap\">\n <div class=\"vp-buffered\" [style.width.%]=\"_bufferedPct()\"></div>\n <input\n type=\"range\" class=\"vp-seek\"\n min=\"0\" max=\"100\" step=\"0.1\"\n [value]=\"_progress()\"\n (input)=\"_onSeek($event)\"\n />\n @for (ch of chapters(); track ch.time) {\n <div class=\"vp-chapter-marker\" [style.left.%]=\"_chapterOffset(ch)\" [title]=\"ch.label\"></div>\n }\n </div>\n\n <!-- Bottom bar -->\n <div class=\"vp-bar\">\n <div class=\"vp-bar-left\">\n <!-- Play/Pause -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePlay()\" [attr.aria-label]=\"_playing() ? 'Pause' : 'Play'\">\n @if (_playing()) {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"/><rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>\n }\n </button>\n\n <!-- Volume -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleMute()\" aria-label=\"Mute\">\n @if (_muted() \|\| _volume() === 0) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><line x1=\"23\" y1=\"9\" x2=\"17\" y2=\"15\"/><line x1=\"17\" y1=\"9\" x2=\"23\" y2=\"15\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07\"/></svg>\n }\n </button>\n <input type=\"range\" class=\"vp-volume\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"_volume()\" (input)=\"_onVolumeChange($event)\" aria-label=\"Volume\" />\n\n <!-- Time -->\n <span class=\"vp-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n </div>\n\n <div class=\"vp-bar-right\">\n <!-- Speed -->\n <div class=\"vp-speed-wrap\">\n <button type=\"button\" class=\"vp-btn vp-speed-btn\" (click)=\"_showSpeedMenu.set(!_showSpeedMenu())\">\n {{ _speed() }}×\n </button>\n @if (_showSpeedMenu()) {\n <div class=\"vp-speed-menu\">\n @for (s of _speeds; track s) {\n <button type=\"button\" class=\"vp-speed-opt\" [attr.data-active]=\"_speed() === s \|\| null\" (click)=\"_setSpeed(s)\">{{ s }}×</button>\n }\n </div>\n }\n </div>\n\n <!-- PiP -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_togglePiP()\" aria-label=\"Picture in picture\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"/><rect x=\"12\" y=\"10\" width=\"8\" height=\"6\" rx=\"1\" fill=\"currentColor\"/></svg>\n </button>\n\n <!-- Fullscreen -->\n <button type=\"button\" class=\"vp-btn\" (click)=\"_toggleFullscreen()\" aria-label=\"Fullscreen\">\n @if (_fullscreen()) {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0 2-2h3M3 16h3a2 2 0 0 0 2 2v3\"/></svg>\n } @else {\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3\"/></svg>\n }\n </button>\n </div>\n </div>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/elementar-rt-components-video-viewer.mjs CHANGED Viewed

@@ -3,18 +3,18 @@ import { input, booleanAttribute, output, inject, signal, computed, HostListener
 import { DomSanitizer } from '@angular/platform-browser';
 class VideoViewerComponent {
-    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
-    poster = input('', ...(ngDevMode ? [{ debugName: "poster" }] : []));
-    open = input(false, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    poster = input('', ...(ngDevMode ? [{ debugName: "poster" }] : /* istanbul ignore next */ []));
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     closed = output();
     _sanitizer = inject(DomSanitizer);
-    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
-    _playing = signal(false, ...(ngDevMode ? [{ debugName: "_playing" }] : []));
-    _muted = signal(false, ...(ngDevMode ? [{ debugName: "_muted" }] : []));
-    _volume = signal(1, ...(ngDevMode ? [{ debugName: "_volume" }] : []));
-    _currentTime = signal(0, ...(ngDevMode ? [{ debugName: "_currentTime" }] : []));
-    _duration = signal(0, ...(ngDevMode ? [{ debugName: "_duration" }] : []));
-    _progress = computed(() => this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_progress" }] : []));
+    _open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : /* istanbul ignore next */ []));
+    _playing = signal(false, ...(ngDevMode ? [{ debugName: "_playing" }] : /* istanbul ignore next */ []));
+    _muted = signal(false, ...(ngDevMode ? [{ debugName: "_muted" }] : /* istanbul ignore next */ []));
+    _volume = signal(1, ...(ngDevMode ? [{ debugName: "_volume" }] : /* istanbul ignore next */ []));
+    _currentTime = signal(0, ...(ngDevMode ? [{ debugName: "_currentTime" }] : /* istanbul ignore next */ []));
+    _duration = signal(0, ...(ngDevMode ? [{ debugName: "_duration" }] : /* istanbul ignore next */ []));
+    _progress = computed(() => this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0, ...(ngDevMode ? [{ debugName: "_progress" }] : /* istanbul ignore next */ []));
     _videoType = computed(() => {
         const s = this.src();
         if (/youtube\.com|youtu\.be/.test(s))
@@ -22,7 +22,7 @@ class VideoViewerComponent {
         if (/vimeo\.com/.test(s))
             return 'vimeo';
         return 'mp4';
-    }, ...(ngDevMode ? [{ debugName: "_videoType" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_videoType" }] : /* istanbul ignore next */ []));
     _embedUrl = computed(() => {
         const s = this.src();
         const type = this._videoType();
@@ -37,7 +37,7 @@ class VideoViewerComponent {
                 return this._sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${id}?autoplay=1`);
         }
         return null;
-    }, ...(ngDevMode ? [{ debugName: "_embedUrl" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_embedUrl" }] : /* istanbul ignore next */ []));
     onKey(e) {
         if (!this._open())
             return;
@@ -77,14 +77,14 @@ class VideoViewerComponent {
         const sec = Math.floor(s % 60);
         return `${m}:${sec.toString().padStart(2, '0')}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: VideoViewerComponent, isStandalone: true, selector: "emr-video-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown": "onKey($event)" }, properties: { "attr.data-open": "_open() || null" } }, ngImport: i0, template: "@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">\u00D7</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { \u23F8 } @else { \u25B6 }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { \uD83D\uDD07 } @else { \uD83D\uDD0A }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">\u26F6</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n", styles: [".vv-backdrop{position:fixed;inset:0;background:#000000d9;z-index:9000;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);animation:fadeIn .2s ease}.vv-player{position:relative;width:100%;max-width:calc(var(--spacing, .25rem) * 192);aspect-ratio:16/9;background:#000;border-radius:.75rem;overflow:hidden}.vv-close{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:10;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.25rem;line-height:1}.vv-close:hover{background:#000c}.vv-video{width:100%;height:100%;object-fit:contain;cursor:pointer}.vv-embed{width:100%;height:100%;border:none}.vv-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);background:linear-gradient(transparent,#000000b3)}.vv-btn{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1rem;padding:var(--spacing, .25rem);border-radius:.25rem}.vv-btn:hover{background:#ffffff26}.vv-time{font-size:.75rem;color:#fffc;white-space:nowrap}.vv-seek{flex:1;height:var(--spacing, .25rem);cursor:pointer;accent-color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: VideoViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: VideoViewerComponent, isStandalone: true, selector: "emr-video-viewer", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, poster: { classPropertyName: "poster", publicName: "poster", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { listeners: { "keydown": "onKey($event)" }, properties: { "attr.data-open": "_open() || null" } }, ngImport: i0, template: "@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">\u00D7</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { \u23F8 } @else { \u25B6 }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { \uD83D\uDD07 } @else { \uD83D\uDD0A }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">\u26F6</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n", styles: [".vv-backdrop{position:fixed;inset:0;background:#000000d9;z-index:9000;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);animation:fadeIn .2s ease}.vv-player{position:relative;width:100%;max-width:calc(var(--spacing, .25rem) * 192);aspect-ratio:16/9;background:#000;border-radius:.75rem;overflow:hidden}.vv-close{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:10;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.25rem;line-height:1}.vv-close:hover{background:#000c}.vv-video{width:100%;height:100%;object-fit:contain;cursor:pointer}.vv-embed{width:100%;height:100%;border:none}.vv-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);background:linear-gradient(transparent,#000000b3)}.vv-btn{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1rem;padding:var(--spacing, .25rem);border-radius:.25rem}.vv-btn:hover{background:#ffffff26}.vv-time{font-size:.75rem;color:#fffc;white-space:nowrap}.vv-seek{flex:1;height:var(--spacing, .25rem);cursor:pointer;accent-color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: VideoViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: VideoViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emr-video-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.data-open]': '_open() || null',
-                    }, template: "@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">\u00D7</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { \u23F8 } @else { \u25B6 }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { \uD83D\uDD07 } @else { \uD83D\uDD0A }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">\u26F6</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n", styles: [".vv-backdrop{position:fixed;inset:0;background:#000000d9;z-index:9000;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);animation:fadeIn .2s ease}.vv-player{position:relative;width:100%;max-width:calc(var(--spacing, .25rem) * 192);aspect-ratio:16/9;background:#000;border-radius:.75rem;overflow:hidden}.vv-close{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:10;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.25rem;line-height:1}.vv-close:hover{background:#000c}.vv-video{width:100%;height:100%;object-fit:contain;cursor:pointer}.vv-embed{width:100%;height:100%;border:none}.vv-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);background:linear-gradient(transparent,#000000b3)}.vv-btn{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1rem;padding:var(--spacing, .25rem);border-radius:.25rem}.vv-btn:hover{background:#ffffff26}.vv-time{font-size:.75rem;color:#fffc;white-space:nowrap}.vv-seek{flex:1;height:var(--spacing, .25rem);cursor:pointer;accent-color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "@if (_open()) {\n  <div class=\"vv-backdrop\" (click)=\"_close()\">\n    <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n      <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">\u00D7</button>\n\n      @if (_videoType() === 'mp4') {\n        <video\n          class=\"vv-video\"\n          [src]=\"src()\"\n          [poster]=\"poster()\"\n          [muted]=\"_muted()\"\n          [volume]=\"_volume()\"\n          [autoplay]=\"true\"\n          (timeupdate)=\"_onTimeUpdate($event)\"\n          (play)=\"_playing.set(true)\"\n          (pause)=\"_playing.set(false)\"\n          (click)=\"_togglePlay()\"\n        ></video>\n        <div class=\"vv-controls\">\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n            @if (_playing()) { \u23F8 } @else { \u25B6 }\n          </button>\n          <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n          <input\n            type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n            [value]=\"_progress()\"\n            (change)=\"_onSeek($event)\"\n          />\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n            @if (_muted()) { \uD83D\uDD07 } @else { \uD83D\uDD0A }\n          </button>\n          <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">\u26F6</button>\n        </div>\n      } @else {\n        <iframe\n          class=\"vv-embed\"\n          [src]=\"_embedUrl()\"\n          frameborder=\"0\"\n          allowfullscreen\n          allow=\"autoplay; fullscreen; picture-in-picture\"\n        ></iframe>\n      }\n    </div>\n  </div>\n}\n", styles: [".vv-backdrop{position:fixed;inset:0;background:#000000d9;z-index:9000;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);animation:fadeIn .2s ease}.vv-player{position:relative;width:100%;max-width:calc(var(--spacing, .25rem) * 192);aspect-ratio:16/9;background:#000;border-radius:.75rem;overflow:hidden}.vv-close{position:absolute;top:calc(var(--spacing, .25rem) * 3);right:calc(var(--spacing, .25rem) * 3);z-index:10;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;cursor:pointer;color:#fff;font-size:1.25rem;line-height:1}.vv-close:hover{background:#000c}.vv-video{width:100%;height:100%;object-fit:contain;cursor:pointer}.vv-embed{width:100%;height:100%;border:none}.vv-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 3);background:linear-gradient(transparent,#000000b3)}.vv-btn{background:transparent;border:none;cursor:pointer;color:#fff;font-size:1rem;padding:var(--spacing, .25rem);border-radius:.25rem}.vv-btn:hover{background:#ffffff26}.vv-time{font-size:.75rem;color:#fffc;white-space:nowrap}.vv-seek{flex:1;height:var(--spacing, .25rem);cursor:pointer;accent-color:var(--color-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], poster: [{ type: i0.Input, args: [{ isSignal: true, alias: "poster", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], onKey: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]

package/fesm2022/elementar-rt-components-video-viewer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"elementar-rt-components-video-viewer.mjs","sources":["../../../projects/components/video-viewer/src/video-viewer/video-viewer.component.ts","../../../projects/components/video-viewer/src/video-viewer/video-viewer.component.html","../../../projects/components/video-viewer/elementar-rt-components-video-viewer.ts"],"sourcesContent":["import {\n Component, input, signal, computed, ChangeDetectionStrategy,\n booleanAttribute, output, HostListener\n} from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { inject } from '@angular/core';\n\ntype VideoType = 'mp4' \| 'youtube' \| 'vimeo';\n\n@Component({\n selector: 'emr-video-viewer',\n standalone: true,\n templateUrl: './video-viewer.component.html',\n styleUrl: './video-viewer.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-open]': '_open() \|\| null',\n }\n})\nexport class VideoViewerComponent {\n src = input('');\n poster = input('');\n open = input(false, { transform: booleanAttribute });\n\n closed = output<void>();\n\n private _sanitizer = inject(DomSanitizer);\n\n protected _open = signal(false);\n protected _playing = signal(false);\n protected _muted = signal(false);\n protected _volume = signal(1);\n protected _currentTime = signal(0);\n protected _duration = signal(0);\n protected _progress = computed(() =>\n this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0\n );\n\n protected _videoType = computed<VideoType>(() => {\n const s = this.src();\n if (/youtube\\.com\|youtu\\.be/.test(s)) return 'youtube';\n if (/vimeo\\.com/.test(s)) return 'vimeo';\n return 'mp4';\n });\n\n protected _embedUrl = computed<SafeResourceUrl \| null>(() => {\n const s = this.src();\n const type = this._videoType();\n if (type === 'youtube') {\n const id = s.match(/(?:v=\|youtu\\.be\\/)([^&?/]+)/)?.[1];\n if (id) return this._sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${id}?autoplay=1`);\n }\n if (type === 'vimeo') {\n const id = s.match(/vimeo\\.com\\/(\\d+)/)?.[1];\n if (id) return this._sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${id}?autoplay=1`);\n }\n return null;\n });\n\n @HostListener('keydown', ['$event'])\n onKey(e: KeyboardEvent): void {\n if (!this._open()) return;\n if (e.code === 'Space') { e.preventDefault(); this._togglePlay(); }\n if (e.code === 'Escape') this._close();\n if (e.code === 'KeyF') this._fullscreen();\n }\n\n protected _show(): void { this._open.set(true); }\n protected _close(): void { this._open.set(false); this.closed.emit(); }\n\n protected _togglePlay(): void { this._playing.set(!this._playing()); }\n protected _toggleMute(): void { this._muted.set(!this._muted()); }\n\n protected _onTimeUpdate(e: Event): void {\n const v = e.target as HTMLVideoElement;\n this._currentTime.set(v.currentTime);\n this._duration.set(v.duration);\n }\n\n protected _onSeek(e: Event): void {\n const v = (e.target as HTMLInputElement);\n const video = document.querySelector('.vv-video') as HTMLVideoElement;\n if (video) video.currentTime = (parseFloat(v.value) / 100) * this._duration();\n }\n\n protected _fullscreen(): void {\n const el = document.querySelector('.vv-player') as HTMLElement;\n if (el?.requestFullscreen) el.requestFullscreen();\n }\n\n protected _formatTime(s: number): string {\n if (!s \|\| isNaN(s)) return '0:00';\n const m = Math.floor(s / 60);\n const sec = Math.floor(s % 60);\n return `${m}:${sec.toString().padStart(2, '0')}`;\n }\n}\n","@if (_open()) {\n <div class=\"vv-backdrop\" (click)=\"_close()\">\n <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">×</button>\n\n @if (_videoType() === 'mp4') {\n <video\n class=\"vv-video\"\n [src]=\"src()\"\n [poster]=\"poster()\"\n [muted]=\"_muted()\"\n [volume]=\"_volume()\"\n [autoplay]=\"true\"\n (timeupdate)=\"_onTimeUpdate($event)\"\n (play)=\"_playing.set(true)\"\n (pause)=\"_playing.set(false)\"\n (click)=\"_togglePlay()\"\n ></video>\n <div class=\"vv-controls\">\n <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n @if (_playing()) { ⏸ } @else { ▶ }\n </button>\n <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n <input\n type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n [value]=\"_progress()\"\n (change)=\"_onSeek($event)\"\n />\n <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n @if (_muted()) { 🔇 } @else { 🔊 }\n </button>\n <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">⛶</button>\n </div>\n } @else {\n <iframe\n class=\"vv-embed\"\n [src]=\"_embedUrl()\"\n frameborder=\"0\"\n allowfullscreen\n allow=\"autoplay; fullscreen; picture-in-picture\"\n ></iframe>\n }\n </div>\n </div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;MAmBa,oBAAoB,CAAA;AAC/B,IAAA,GAAG,GAAG,KAAK,CAAC,EAAE~~,+CAAC~~;AACf,IAAA,MAAM,GAAG,KAAK,CAAC,EAAE,~~kDAAC~~;~~AAClB~~,~~IAAA,~~IAAI,GAAG,KAAK,CAAC,KAAK,~~wCAAI~~,SAAS,EAAE,gBAAgB,EAAA,~~CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC~~;IAEpD,MAAM,GAAG,MAAM,EAAQ;AAEf,IAAA,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC;AAE/B,IAAA,KAAK,GAAG,MAAM,CAAC,KAAK,~~iDAAC~~;AACrB,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK~~,oDAAC~~;AACxB,IAAA,MAAM,GAAG,MAAM,CAAC,KAAK,~~kDAAC~~;AACtB,IAAA,OAAO,GAAG,MAAM,CAAC,CAAC,~~mDAAC~~;AACnB,IAAA,YAAY,GAAG,MAAM,CAAC,CAAC,~~wDAAC~~;AACxB,IAAA,SAAS,GAAG,MAAM,CAAC,CAAC,~~qDAAC~~;AACrB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAC7B,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,~~qDAC1E~~;AAES,IAAA,UAAU,GAAG,QAAQ,CAAY,MAAK;AAC9C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE;AACpB,QAAA,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC;AAAE,YAAA,OAAO,SAAS;AACtD,QAAA,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;AAAE,YAAA,OAAO,OAAO;AACxC,QAAA,OAAO,KAAK;AACd,IAAA,CAAC,~~sDAAC~~;AAEQ,IAAA,SAAS,GAAG,QAAQ,CAAyB,MAAK;AAC1D,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE;AACpB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE;AAC9B,QAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,YAAA,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,6BAA6B,CAAC,GAAG,CAAC,CAAC;AACtD,YAAA,IAAI,EAAE;gBAAE,OAAO,IAAI,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAA,8BAAA,EAAiC,EAAE,CAAA,WAAA,CAAa,CAAC;QACjH;AACA,QAAA,IAAI,IAAI,KAAK,OAAO,EAAE;AACpB,YAAA,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;AAC5C,YAAA,IAAI,EAAE;gBAAE,OAAO,IAAI,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAA,+BAAA,EAAkC,EAAE,CAAA,WAAA,CAAa,CAAC;QAClH;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,~~qDAAC~~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~~;;;;~~"}
1	+ {"version":3,"file":"elementar-rt-components-video-viewer.mjs","sources":["../../../projects/components/video-viewer/src/video-viewer/video-viewer.component.ts","../../../projects/components/video-viewer/src/video-viewer/video-viewer.component.html","../../../projects/components/video-viewer/elementar-rt-components-video-viewer.ts"],"sourcesContent":["import {\n Component, input, signal, computed, ChangeDetectionStrategy,\n booleanAttribute, output, HostListener\n} from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { inject } from '@angular/core';\n\ntype VideoType = 'mp4' \| 'youtube' \| 'vimeo';\n\n@Component({\n selector: 'emr-video-viewer',\n standalone: true,\n templateUrl: './video-viewer.component.html',\n styleUrl: './video-viewer.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-open]': '_open() \|\| null',\n }\n})\nexport class VideoViewerComponent {\n src = input('');\n poster = input('');\n open = input(false, { transform: booleanAttribute });\n\n closed = output<void>();\n\n private _sanitizer = inject(DomSanitizer);\n\n protected _open = signal(false);\n protected _playing = signal(false);\n protected _muted = signal(false);\n protected _volume = signal(1);\n protected _currentTime = signal(0);\n protected _duration = signal(0);\n protected _progress = computed(() =>\n this._duration() > 0 ? (this._currentTime() / this._duration()) * 100 : 0\n );\n\n protected _videoType = computed<VideoType>(() => {\n const s = this.src();\n if (/youtube\\.com\|youtu\\.be/.test(s)) return 'youtube';\n if (/vimeo\\.com/.test(s)) return 'vimeo';\n return 'mp4';\n });\n\n protected _embedUrl = computed<SafeResourceUrl \| null>(() => {\n const s = this.src();\n const type = this._videoType();\n if (type === 'youtube') {\n const id = s.match(/(?:v=\|youtu\\.be\\/)([^&?/]+)/)?.[1];\n if (id) return this._sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${id}?autoplay=1`);\n }\n if (type === 'vimeo') {\n const id = s.match(/vimeo\\.com\\/(\\d+)/)?.[1];\n if (id) return this._sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${id}?autoplay=1`);\n }\n return null;\n });\n\n @HostListener('keydown', ['$event'])\n onKey(e: KeyboardEvent): void {\n if (!this._open()) return;\n if (e.code === 'Space') { e.preventDefault(); this._togglePlay(); }\n if (e.code === 'Escape') this._close();\n if (e.code === 'KeyF') this._fullscreen();\n }\n\n protected _show(): void { this._open.set(true); }\n protected _close(): void { this._open.set(false); this.closed.emit(); }\n\n protected _togglePlay(): void { this._playing.set(!this._playing()); }\n protected _toggleMute(): void { this._muted.set(!this._muted()); }\n\n protected _onTimeUpdate(e: Event): void {\n const v = e.target as HTMLVideoElement;\n this._currentTime.set(v.currentTime);\n this._duration.set(v.duration);\n }\n\n protected _onSeek(e: Event): void {\n const v = (e.target as HTMLInputElement);\n const video = document.querySelector('.vv-video') as HTMLVideoElement;\n if (video) video.currentTime = (parseFloat(v.value) / 100) * this._duration();\n }\n\n protected _fullscreen(): void {\n const el = document.querySelector('.vv-player') as HTMLElement;\n if (el?.requestFullscreen) el.requestFullscreen();\n }\n\n protected _formatTime(s: number): string {\n if (!s \|\| isNaN(s)) return '0:00';\n const m = Math.floor(s / 60);\n const sec = Math.floor(s % 60);\n return `${m}:${sec.toString().padStart(2, '0')}`;\n }\n}\n","@if (_open()) {\n <div class=\"vv-backdrop\" (click)=\"_close()\">\n <div class=\"vv-player\" (click)=\"$event.stopPropagation()\">\n <button type=\"button\" class=\"vv-close\" (click)=\"_close()\" aria-label=\"Close\">×</button>\n\n @if (_videoType() === 'mp4') {\n <video\n class=\"vv-video\"\n [src]=\"src()\"\n [poster]=\"poster()\"\n [muted]=\"_muted()\"\n [volume]=\"_volume()\"\n [autoplay]=\"true\"\n (timeupdate)=\"_onTimeUpdate($event)\"\n (play)=\"_playing.set(true)\"\n (pause)=\"_playing.set(false)\"\n (click)=\"_togglePlay()\"\n ></video>\n <div class=\"vv-controls\">\n <button type=\"button\" class=\"vv-btn\" (click)=\"_togglePlay()\">\n @if (_playing()) { ⏸ } @else { ▶ }\n </button>\n <span class=\"vv-time\">{{ _formatTime(_currentTime()) }} / {{ _formatTime(_duration()) }}</span>\n <input\n type=\"range\" class=\"vv-seek\" min=\"0\" max=\"100\"\n [value]=\"_progress()\"\n (change)=\"_onSeek($event)\"\n />\n <button type=\"button\" class=\"vv-btn\" (click)=\"_toggleMute()\">\n @if (_muted()) { 🔇 } @else { 🔊 }\n </button>\n <button type=\"button\" class=\"vv-btn\" (click)=\"_fullscreen()\">⛶</button>\n </div>\n } @else {\n <iframe\n class=\"vv-embed\"\n [src]=\"_embedUrl()\"\n frameborder=\"0\"\n allowfullscreen\n allow=\"autoplay; fullscreen; picture-in-picture\"\n ></iframe>\n }\n </div>\n </div>\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}