snice 4.9.0 → 4.10.0

package/dist/cdn/video-player/snice-video-player.js

@@ -0,0 +1,721 @@
+/*!
+ * snice v4.9.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-video-player.min.js");}
+var SniceVideoPlayer = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  var playerStyles = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%}.video-container{position:relative;background:rgb(0 0 0);border-radius:var(--snice-border-radius-lg,.5rem);overflow:hidden;width:100%}.video-container:-webkit-full-screen,.video-container:fullscreen{border-radius:0}video{display:block;width:100%;height:auto;cursor:pointer}.video-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-color:rgb(0 0 0);cursor:pointer;z-index:1}.video-poster-play{width:4.5rem;height:4.5rem;background:rgb(0 0 0 / .6);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform var(--snice-transition-fast, 150ms) ease,background var(--snice-transition-fast, 150ms) ease}.video-poster-play:hover{transform:scale(1.1);background:rgb(0 0 0 / .8)}.video-poster-play svg{color:rgb(255 255 255);margin-left:.25rem}.video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgb(0 0 0 / .7));padding:var(--snice-spacing-lg,1.5rem) var(--snice-spacing-md,1rem) var(--snice-spacing-sm,.75rem);opacity:0;transition:opacity var(--snice-transition-medium, 250ms) ease;z-index:2;display:flex;flex-direction:column;gap:var(--snice-spacing-xs,.5rem)}.video-container.controls-visible .video-controls,.video-container.paused .video-controls,.video-container:hover .video-controls{opacity:1}.video-progress-container{width:100%;height:.25rem;cursor:pointer;position:relative;padding:.25rem 0}.video-progress-container:hover{height:.375rem}.video-progress-track{width:100%;height:100%;background:rgb(255 255 255 / .3);border-radius:9999px;position:relative;overflow:hidden}.video-progress-buffered{position:absolute;top:0;left:0;height:100%;background:rgb(255 255 255 / .4);border-radius:9999px}.video-progress-bar{position:absolute;top:0;left:0;height:100%;background:var(--snice-color-primary,rgb(37 99 235));border-radius:9999px;transition:width .1s linear}.video-progress-container:hover .video-progress-bar::after{content:'';position:absolute;right:-.375rem;top:50%;transform:translateY(-50%);width:.75rem;height:.75rem;background:var(--snice-color-primary,rgb(37 99 235));border-radius:50%}.video-controls-left,.video-controls-row{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem)}.video-controls-right{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);margin-left:auto}.video-btn{background:0 0;border:none;cursor:pointer;padding:var(--snice-spacing-2xs,.25rem);border-radius:var(--snice-border-radius-md,.25rem);color:rgb(255 255 255);display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--snice-transition-fast, 150ms) ease;line-height:0}.video-btn:hover{background:rgb(255 255 255 / .15)}.video-btn:active{background:rgb(255 255 255 / .25)}.video-btn:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.video-btn svg{width:1.25rem;height:1.25rem}.video-btn-play svg{width:1.5rem;height:1.5rem}.video-time{font-size:var(--snice-font-size-xs, .75rem);color:rgb(255 255 255);font-variant-numeric:tabular-nums;user-select:none;white-space:nowrap}.video-volume{display:flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem)}.video-volume-slider{-webkit-appearance:none;appearance:none;width:0;height:.25rem;background:rgb(255 255 255 / .3);border-radius:9999px;outline:0;cursor:pointer;transition:width var(--snice-transition-fast, 150ms) ease;overflow:hidden}.video-volume-slider:focus-visible,.video-volume:hover .video-volume-slider{width:4rem}.video-volume-slider::-webkit-slider-runnable-track{width:100%;height:.25rem;background:0 0;border-radius:9999px}.video-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.75rem;height:.75rem;background:rgb(255 255 255);border-radius:50%;cursor:pointer;margin-top:-.25rem}.video-volume-slider::-moz-range-track{width:100%;height:.25rem;background:rgb(255 255 255 / .3);border-radius:9999px}.video-volume-slider::-moz-range-progress{height:.25rem;background:rgb(255 255 255);border-radius:9999px}.video-volume-slider::-moz-range-thumb{width:.75rem;height:.75rem;background:rgb(255 255 255);border:none;border-radius:50%;cursor:pointer}.video-rate-btn{font-size:var(--snice-font-size-xs, .75rem);font-weight:var(--snice-font-weight-medium,500);min-width:2rem;text-align:center}.video-center-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;background:rgb(0 0 0 / .5);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity var(--snice-transition-fast, 150ms) ease;z-index:1}.video-container.paused .video-center-play{opacity:1}.video-center-play svg{color:rgb(255 255 255);width:2rem;height:2rem;margin-left:.25rem}:host([variant=minimal]) .video-controls{background:rgb(0 0 0 / .5);padding:var(--snice-spacing-xs,.5rem)}:host([variant=minimal]) .video-center-play{display:none}:host([variant=minimal]) .video-btn-pip,:host([variant=minimal]) .video-rate-btn{display:none}:host([variant=cinema]) .video-container{border-radius:0;box-shadow:var(--snice-shadow-lg,0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1))}:host([variant=cinema]) .video-controls{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem) var(--snice-spacing-md,1rem)}:host([variant=cinema]) .video-btn svg{width:1.5rem;height:1.5rem}:host([variant=cinema]) .video-btn-play svg{width:2rem;height:2rem}:host([variant=cinema]) .video-time{font-size:var(--snice-font-size-sm, .875rem)}.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.video-loading-spinner{width:2.5rem;height:2.5rem;border:3px solid;border-top-color:rgb(255 255 255);border-radius:50%;animation:.8s linear infinite video-spin}@keyframes video-spin{to{transform:rotate(360deg)}}@container (max-width:400px){.video-controls-row{gap:var(--snice-spacing-3xs,.125rem)}.video-btn{padding:var(--snice-spacing-3xs,.125rem)}.video-btn svg{width:1rem;height:1rem}.video-btn-play svg{width:1.25rem;height:1.25rem}.video-rate-btn{display:none}.video-time{font-size:.625rem}}";
+
+  const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+  const SEEK_STEP = 5;
+  const VOLUME_STEP = 0.1;
+  const CONTROLS_HIDE_DELAY = 3000;
+  let SniceVideoPlayer = (() => {
+      let _classDecorators = [snice.element('snice-video-player')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _src_decorators;
+      let _src_initializers = [];
+      let _src_extraInitializers = [];
+      let _poster_decorators;
+      let _poster_initializers = [];
+      let _poster_extraInitializers = [];
+      let _autoplay_decorators;
+      let _autoplay_initializers = [];
+      let _autoplay_extraInitializers = [];
+      let _muted_decorators;
+      let _muted_initializers = [];
+      let _muted_extraInitializers = [];
+      let _loop_decorators;
+      let _loop_initializers = [];
+      let _loop_extraInitializers = [];
+      let _controls_decorators;
+      let _controls_initializers = [];
+      let _controls_extraInitializers = [];
+      let _playbackRate_decorators;
+      let _playbackRate_initializers = [];
+      let _playbackRate_extraInitializers = [];
+      let _currentTime_decorators;
+      let _currentTime_initializers = [];
+      let _currentTime_extraInitializers = [];
+      let _volume_decorators;
+      let _volume_initializers = [];
+      let _volume_extraInitializers = [];
+      let _variant_decorators;
+      let _variant_initializers = [];
+      let _variant_extraInitializers = [];
+      let _container_decorators;
+      let _container_initializers = [];
+      let _container_extraInitializers = [];
+      let _videoEl_decorators;
+      let _videoEl_initializers = [];
+      let _videoEl_extraInitializers = [];
+      let _progressContainer_decorators;
+      let _progressContainer_initializers = [];
+      let _progressContainer_extraInitializers = [];
+      let _componentStyles_decorators;
+      let _init_decorators;
+      let _cleanup_decorators;
+      let _handleSrcChange_decorators;
+      let _handleVolumeChange_decorators;
+      let _handleMutedChange_decorators;
+      let _handlePlaybackRateChange_decorators;
+      let _handleLoopChange_decorators;
+      let _handleKeydown_decorators;
+      let _emitPlay_decorators;
+      let _emitPause_decorators;
+      let _emitEnded_decorators;
+      let _emitTimeUpdate_decorators;
+      let _emitFullscreenChange_decorators;
+      let _emitVolumeChange_decorators;
+      let _renderPlayer_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _src_decorators = [snice.property()];
+              _poster_decorators = [snice.property()];
+              _autoplay_decorators = [snice.property({ type: Boolean })];
+              _muted_decorators = [snice.property({ type: Boolean })];
+              _loop_decorators = [snice.property({ type: Boolean })];
+              _controls_decorators = [snice.property({ type: Boolean })];
+              _playbackRate_decorators = [snice.property({ type: Number, attribute: 'playback-rate' })];
+              _currentTime_decorators = [snice.property({ type: Number, attribute: 'current-time' })];
+              _volume_decorators = [snice.property({ type: Number })];
+              _variant_decorators = [snice.property()];
+              _container_decorators = [snice.query('.video-container')];
+              _videoEl_decorators = [snice.query('video')];
+              _progressContainer_decorators = [snice.query('.video-progress-container')];
+              _componentStyles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _cleanup_decorators = [snice.dispose()];
+              _handleSrcChange_decorators = [snice.watch('src')];
+              _handleVolumeChange_decorators = [snice.watch('volume')];
+              _handleMutedChange_decorators = [snice.watch('muted')];
+              _handlePlaybackRateChange_decorators = [snice.watch('playbackRate')];
+              _handleLoopChange_decorators = [snice.watch('loop')];
+              _handleKeydown_decorators = [snice.on('keydown')];
+              _emitPlay_decorators = [snice.dispatch('video-play', { bubbles: true, composed: true })];
+              _emitPause_decorators = [snice.dispatch('video-pause', { bubbles: true, composed: true })];
+              _emitEnded_decorators = [snice.dispatch('video-ended', { bubbles: true, composed: true })];
+              _emitTimeUpdate_decorators = [snice.dispatch('video-time-update', { bubbles: true, composed: true })];
+              _emitFullscreenChange_decorators = [snice.dispatch('video-fullscreen-change', { bubbles: true, composed: true })];
+              _emitVolumeChange_decorators = [snice.dispatch('video-volume-change', { bubbles: true, composed: true })];
+              _renderPlayer_decorators = [snice.render()];
+              __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleSrcChange_decorators, { kind: "method", name: "handleSrcChange", static: false, private: false, access: { has: obj => "handleSrcChange" in obj, get: obj => obj.handleSrcChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleVolumeChange_decorators, { kind: "method", name: "handleVolumeChange", static: false, private: false, access: { has: obj => "handleVolumeChange" in obj, get: obj => obj.handleVolumeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleMutedChange_decorators, { kind: "method", name: "handleMutedChange", static: false, private: false, access: { has: obj => "handleMutedChange" in obj, get: obj => obj.handleMutedChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handlePlaybackRateChange_decorators, { kind: "method", name: "handlePlaybackRateChange", static: false, private: false, access: { has: obj => "handlePlaybackRateChange" in obj, get: obj => obj.handlePlaybackRateChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleLoopChange_decorators, { kind: "method", name: "handleLoopChange", static: false, private: false, access: { has: obj => "handleLoopChange" in obj, get: obj => obj.handleLoopChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleKeydown_decorators, { kind: "method", name: "handleKeydown", static: false, private: false, access: { has: obj => "handleKeydown" in obj, get: obj => obj.handleKeydown }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitPlay_decorators, { kind: "method", name: "emitPlay", static: false, private: false, access: { has: obj => "emitPlay" in obj, get: obj => obj.emitPlay }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitPause_decorators, { kind: "method", name: "emitPause", static: false, private: false, access: { has: obj => "emitPause" in obj, get: obj => obj.emitPause }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitEnded_decorators, { kind: "method", name: "emitEnded", static: false, private: false, access: { has: obj => "emitEnded" in obj, get: obj => obj.emitEnded }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitTimeUpdate_decorators, { kind: "method", name: "emitTimeUpdate", static: false, private: false, access: { has: obj => "emitTimeUpdate" in obj, get: obj => obj.emitTimeUpdate }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitFullscreenChange_decorators, { kind: "method", name: "emitFullscreenChange", static: false, private: false, access: { has: obj => "emitFullscreenChange" in obj, get: obj => obj.emitFullscreenChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _emitVolumeChange_decorators, { kind: "method", name: "emitVolumeChange", static: false, private: false, access: { has: obj => "emitVolumeChange" in obj, get: obj => obj.emitVolumeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _renderPlayer_decorators, { kind: "method", name: "renderPlayer", static: false, private: false, access: { has: obj => "renderPlayer" in obj, get: obj => obj.renderPlayer }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _src_decorators, { kind: "field", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+              __esDecorate(null, null, _poster_decorators, { kind: "field", name: "poster", static: false, private: false, access: { has: obj => "poster" in obj, get: obj => obj.poster, set: (obj, value) => { obj.poster = value; } }, metadata: _metadata }, _poster_initializers, _poster_extraInitializers);
+              __esDecorate(null, null, _autoplay_decorators, { kind: "field", name: "autoplay", static: false, private: false, access: { has: obj => "autoplay" in obj, get: obj => obj.autoplay, set: (obj, value) => { obj.autoplay = value; } }, metadata: _metadata }, _autoplay_initializers, _autoplay_extraInitializers);
+              __esDecorate(null, null, _muted_decorators, { kind: "field", name: "muted", static: false, private: false, access: { has: obj => "muted" in obj, get: obj => obj.muted, set: (obj, value) => { obj.muted = value; } }, metadata: _metadata }, _muted_initializers, _muted_extraInitializers);
+              __esDecorate(null, null, _loop_decorators, { kind: "field", name: "loop", static: false, private: false, access: { has: obj => "loop" in obj, get: obj => obj.loop, set: (obj, value) => { obj.loop = value; } }, metadata: _metadata }, _loop_initializers, _loop_extraInitializers);
+              __esDecorate(null, null, _controls_decorators, { kind: "field", name: "controls", static: false, private: false, access: { has: obj => "controls" in obj, get: obj => obj.controls, set: (obj, value) => { obj.controls = value; } }, metadata: _metadata }, _controls_initializers, _controls_extraInitializers);
+              __esDecorate(null, null, _playbackRate_decorators, { kind: "field", name: "playbackRate", static: false, private: false, access: { has: obj => "playbackRate" in obj, get: obj => obj.playbackRate, set: (obj, value) => { obj.playbackRate = value; } }, metadata: _metadata }, _playbackRate_initializers, _playbackRate_extraInitializers);
+              __esDecorate(null, null, _currentTime_decorators, { kind: "field", name: "currentTime", static: false, private: false, access: { has: obj => "currentTime" in obj, get: obj => obj.currentTime, set: (obj, value) => { obj.currentTime = value; } }, metadata: _metadata }, _currentTime_initializers, _currentTime_extraInitializers);
+              __esDecorate(null, null, _volume_decorators, { kind: "field", name: "volume", static: false, private: false, access: { has: obj => "volume" in obj, get: obj => obj.volume, set: (obj, value) => { obj.volume = value; } }, metadata: _metadata }, _volume_initializers, _volume_extraInitializers);
+              __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+              __esDecorate(null, null, _container_decorators, { kind: "field", name: "container", static: false, private: false, access: { has: obj => "container" in obj, get: obj => obj.container, set: (obj, value) => { obj.container = value; } }, metadata: _metadata }, _container_initializers, _container_extraInitializers);
+              __esDecorate(null, null, _videoEl_decorators, { kind: "field", name: "videoEl", static: false, private: false, access: { has: obj => "videoEl" in obj, get: obj => obj.videoEl, set: (obj, value) => { obj.videoEl = value; } }, metadata: _metadata }, _videoEl_initializers, _videoEl_extraInitializers);
+              __esDecorate(null, null, _progressContainer_decorators, { kind: "field", name: "progressContainer", static: false, private: false, access: { has: obj => "progressContainer" in obj, get: obj => obj.progressContainer, set: (obj, value) => { obj.progressContainer = value; } }, metadata: _metadata }, _progressContainer_initializers, _progressContainer_extraInitializers);
+              __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+              _classThis = _classDescriptor.value;
+              if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+              __runInitializers(_classThis, _classExtraInitializers);
+          }
+          componentStyles() {
+              return snice.css `${playerStyles}`;
+          }
+          init() {
+              this.showPoster = !!this.poster && !this.autoplay;
+          }
+          cleanup() {
+              this.clearControlsTimer();
+              if (this.videoEl) {
+                  this.videoEl.pause();
+              }
+          }
+          handleSrcChange() {
+              this.showPoster = !!this.poster;
+              this.playing = false;
+              this.currentTime = 0;
+              this.duration = 0;
+              this.loading = false;
+              this.bufferedPercent = 0;
+          }
+          handleVolumeChange(_oldVal, newVal) {
+              if (this.videoEl && newVal >= 0 && newVal <= 1) {
+                  this.videoEl.volume = newVal;
+              }
+          }
+          handleMutedChange(_oldVal, newVal) {
+              if (this.videoEl) {
+                  this.videoEl.muted = newVal;
+              }
+          }
+          handlePlaybackRateChange(_oldVal, newVal) {
+              if (this.videoEl) {
+                  this.videoEl.playbackRate = newVal;
+              }
+          }
+          handleLoopChange(_oldVal, newVal) {
+              if (this.videoEl) {
+                  this.videoEl.loop = newVal;
+              }
+          }
+          // --- Video event handlers via template bindings ---
+          handleVideoLoadedMetadata() {
+              if (!this.videoEl)
+                  return;
+              this.duration = this.videoEl.duration;
+              this.loading = false;
+          }
+          handleVideoPlay() {
+              this.playing = true;
+              this.loading = false;
+              this.showPoster = false;
+              this.emitPlay();
+              this.startControlsTimer();
+          }
+          handleVideoPause() {
+              if (!this.videoEl?.ended) {
+                  this.playing = false;
+                  this.emitPause();
+              }
+              this.clearControlsTimer();
+              this.controlsVisible = true;
+          }
+          handleVideoEnded() {
+              this.playing = false;
+              this.controlsVisible = true;
+              this.emitEnded();
+          }
+          handleVideoTimeUpdate() {
+              if (!this.videoEl || this.isSeeking)
+                  return;
+              this.currentTime = this.videoEl.currentTime;
+              this.emitTimeUpdate();
+          }
+          handleVideoProgress() {
+              if (!this.videoEl || this.videoEl.buffered.length === 0)
+                  return;
+              const end = this.videoEl.buffered.end(this.videoEl.buffered.length - 1);
+              this.bufferedPercent = this.duration > 0 ? (end / this.duration) * 100 : 0;
+          }
+          handleVideoWaiting() {
+              this.loading = true;
+          }
+          handleVideoCanPlay() {
+              this.loading = false;
+          }
+          handleVideoVolumeChange() {
+              if (!this.videoEl)
+                  return;
+              this.volume = this.videoEl.volume;
+              this.muted = this.videoEl.muted;
+              this.emitVolumeChange();
+          }
+          // --- User interaction handlers ---
+          handleVideoClick() {
+              this.toggle();
+          }
+          handleVideoDblClick() {
+              this.toggleFullscreen();
+          }
+          handlePosterClick() {
+              this.showPoster = false;
+              this.play();
+          }
+          handleProgressClick(e) {
+              if (!this.progressContainer || this.duration === 0)
+                  return;
+              const rect = this.progressContainer.getBoundingClientRect();
+              const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+              this.seekTo(percent * this.duration);
+          }
+          handleProgressMouseDown(e) {
+              this.isSeeking = true;
+              this.handleProgressClick(e);
+              const handleMove = (ev) => {
+                  if (!this.progressContainer || this.duration === 0)
+                      return;
+                  const rect = this.progressContainer.getBoundingClientRect();
+                  const percent = Math.max(0, Math.min(1, (ev.clientX - rect.left) / rect.width));
+                  this.currentTime = percent * this.duration;
+              };
+              const handleUp = () => {
+                  this.isSeeking = false;
+                  if (this.videoEl) {
+                      this.videoEl.currentTime = this.currentTime;
+                  }
+                  document.removeEventListener('mousemove', handleMove);
+                  document.removeEventListener('mouseup', handleUp);
+              };
+              document.addEventListener('mousemove', handleMove);
+              document.addEventListener('mouseup', handleUp);
+          }
+          handleVolumeSlider(e) {
+              const input = e.target;
+              const vol = parseFloat(input.value);
+              this.volume = vol;
+              if (vol > 0 && this.muted) {
+                  this.muted = false;
+              }
+              this.emitVolumeChange();
+          }
+          toggleMute() {
+              if (this.muted) {
+                  this.muted = false;
+                  this.volume = this.previousVolume || 1;
+              }
+              else {
+                  this.previousVolume = this.volume;
+                  this.muted = true;
+              }
+              this.emitVolumeChange();
+          }
+          cyclePlaybackRate() {
+              const currentIdx = PLAYBACK_RATES.indexOf(this.playbackRate);
+              const nextIdx = (currentIdx + 1) % PLAYBACK_RATES.length;
+              this.setPlaybackRate(PLAYBACK_RATES[nextIdx]);
+          }
+          handleContainerMouseMove() {
+              this.controlsVisible = true;
+              this.startControlsTimer();
+          }
+          handleContainerMouseLeave() {
+              if (this.playing) {
+                  this.controlsVisible = false;
+              }
+          }
+          handleKeydown(e) {
+              if (!this.controls)
+                  return;
+              switch (e.key) {
+                  case ' ':
+                  case 'k':
+                      e.preventDefault();
+                      this.toggle();
+                      break;
+                  case 'f':
+                      e.preventDefault();
+                      this.toggleFullscreen();
+                      break;
+                  case 'm':
+                      e.preventDefault();
+                      this.toggleMute();
+                      break;
+                  case 'ArrowRight':
+                      e.preventDefault();
+                      this.seekTo(Math.min(this.duration, this.currentTime + SEEK_STEP));
+                      break;
+                  case 'ArrowLeft':
+                      e.preventDefault();
+                      this.seekTo(Math.max(0, this.currentTime - SEEK_STEP));
+                      break;
+                  case 'ArrowUp':
+                      e.preventDefault();
+                      this.volume = Math.min(1, this.volume + VOLUME_STEP);
+                      break;
+                  case 'ArrowDown':
+                      e.preventDefault();
+                      this.volume = Math.max(0, this.volume - VOLUME_STEP);
+                      break;
+              }
+          }
+          // --- Controls timer ---
+          startControlsTimer() {
+              this.clearControlsTimer();
+              if (this.playing) {
+                  this.controlsTimer = window.setTimeout(() => {
+                      this.controlsVisible = false;
+                  }, CONTROLS_HIDE_DELAY);
+              }
+          }
+          clearControlsTimer() {
+              if (this.controlsTimer !== null) {
+                  clearTimeout(this.controlsTimer);
+                  this.controlsTimer = null;
+              }
+          }
+          // --- Public methods ---
+          async play() {
+              if (!this.videoEl)
+                  return;
+              this.showPoster = false;
+              try {
+                  await this.videoEl.play();
+              }
+              catch {
+                  // Autoplay may be blocked
+              }
+          }
+          pause() {
+              if (!this.videoEl)
+                  return;
+              this.videoEl.pause();
+          }
+          toggle() {
+              if (this.playing) {
+                  this.pause();
+              }
+              else {
+                  this.play();
+              }
+          }
+          seekTo(time) {
+              if (!this.videoEl)
+                  return;
+              const clamped = Math.max(0, Math.min(this.duration || 0, time));
+              this.videoEl.currentTime = clamped;
+              this.currentTime = clamped;
+          }
+          async requestFullscreen() {
+              if (!this.container)
+                  return;
+              try {
+                  await this.container.requestFullscreen();
+              }
+              catch {
+                  // Fullscreen may not be available
+              }
+          }
+          async exitFullscreen() {
+              if (!document.fullscreenElement)
+                  return;
+              try {
+                  await document.exitFullscreen();
+              }
+              catch {
+                  // May not be in fullscreen
+              }
+          }
+          async requestPictureInPicture() {
+              if (!this.videoEl)
+                  return;
+              try {
+                  if (document.pictureInPictureElement) {
+                      await document.exitPictureInPicture();
+                  }
+                  else {
+                      await this.videoEl.requestPictureInPicture();
+                  }
+              }
+              catch {
+                  // PiP may not be available
+              }
+          }
+          setPlaybackRate(rate) {
+              this.playbackRate = rate;
+          }
+          async toggleFullscreen() {
+              if (document.fullscreenElement) {
+                  await this.exitFullscreen();
+              }
+              else {
+                  await this.requestFullscreen();
+              }
+          }
+          handleFullscreenChange() {
+              this.emitFullscreenChange();
+          }
+          // --- Helpers ---
+          formatTime(seconds) {
+              if (isNaN(seconds) || !isFinite(seconds))
+                  return '0:00';
+              const h = Math.floor(seconds / 3600);
+              const m = Math.floor((seconds % 3600) / 60);
+              const s = Math.floor(seconds % 60);
+              if (h > 0) {
+                  return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+              }
+              return `${m}:${s.toString().padStart(2, '0')}`;
+          }
+          // --- Dispatch events ---
+          emitPlay() {
+              return { player: this };
+          }
+          emitPause() {
+              return { player: this };
+          }
+          emitEnded() {
+              return { player: this };
+          }
+          emitTimeUpdate() {
+              return { player: this, currentTime: this.currentTime, duration: this.duration };
+          }
+          emitFullscreenChange() {
+              return { player: this, fullscreen: !!document.fullscreenElement };
+          }
+          emitVolumeChange() {
+              return { player: this, volume: this.volume, muted: this.muted };
+          }
+          // --- Render ---
+          renderPlayer() {
+              const progress = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
+              const isPlaying = this.playing;
+              const containerClass = [
+                  'video-container',
+                  !isPlaying ? 'paused' : '',
+                  this.controlsVisible ? 'controls-visible' : '',
+              ].filter(Boolean).join(' ');
+              const isMutedOrZero = this.muted || this.volume === 0;
+              return snice.html `
+      <div
+        class="${containerClass}"
+        tabindex="0"
+        @mousemove=${() => this.handleContainerMouseMove()}
+        @mouseleave=${() => this.handleContainerMouseLeave()}
+        @fullscreenchange=${() => this.handleFullscreenChange()}
+      >
+        <video
+          .src=${this.src}
+          ?autoplay=${this.autoplay}
+          ?muted=${this.muted}
+          ?loop=${this.loop}
+          playsinline
+          preload="metadata"
+          @loadedmetadata=${() => this.handleVideoLoadedMetadata()}
+          @play=${() => this.handleVideoPlay()}
+          @pause=${() => this.handleVideoPause()}
+          @ended=${() => this.handleVideoEnded()}
+          @timeupdate=${() => this.handleVideoTimeUpdate()}
+          @progress=${() => this.handleVideoProgress()}
+          @waiting=${() => this.handleVideoWaiting()}
+          @canplay=${() => this.handleVideoCanPlay()}
+          @volumechange=${() => this.handleVideoVolumeChange()}
+          @click=${() => this.handleVideoClick()}
+          @dblclick=${() => this.handleVideoDblClick()}
+        >
+          <slot></slot>
+        </video>
+
+        <if ${this.showPoster && this.poster}>
+          <div
+            class="video-poster"
+            style="background-image: url('${this.poster}')"
+            @click=${() => this.handlePosterClick()}
+          >
+            <div class="video-poster-play">
+              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M8 5v14l11-7z"/>
+              </svg>
+            </div>
+          </div>
+        </if>
+
+        <if ${this.loading}>
+          <div class="video-loading">
+            <div class="video-loading-spinner"></div>
+          </div>
+        </if>
+
+        <if ${!isPlaying && !this.showPoster && this.src}>
+          <div class="video-center-play">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7z"/>
+            </svg>
+          </div>
+        </if>
+
+        <if ${this.controls && this.src}>
+          <div class="video-controls">
+            <div
+              class="video-progress-container"
+              @click=${(e) => this.handleProgressClick(e)}
+              @mousedown=${(e) => this.handleProgressMouseDown(e)}
+            >
+              <div class="video-progress-track">
+                <div class="video-progress-buffered" style="width: ${this.bufferedPercent}%"></div>
+                <div class="video-progress-bar" style="width: ${progress}%"></div>
+              </div>
+            </div>
+
+            <div class="video-controls-row">
+              <div class="video-controls-left">
+                <button class="video-btn video-btn-play" @click=${() => this.toggle()} title="${isPlaying ? 'Pause' : 'Play'}">
+                  <if ${isPlaying}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <rect x="6" y="4" width="4" height="16"></rect>
+                      <rect x="14" y="4" width="4" height="16"></rect>
+                    </svg>
+                  </if>
+                  <if ${!isPlaying}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M8 5v14l11-7z"/>
+                    </svg>
+                  </if>
+                </button>
+
+                <div class="video-volume">
+                  <button class="video-btn video-btn-volume" @click=${() => this.toggleMute()} title="${isMutedOrZero ? 'Unmute' : 'Mute'}">
+                    <if ${isMutedOrZero}>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M11 5L6 9H2v6h4l5 4V5z"/>
+                        <line x1="23" y1="9" x2="17" y2="15"/>
+                        <line x1="17" y1="9" x2="23" y2="15"/>
+                      </svg>
+                    </if>
+                    <if ${!isMutedOrZero && this.volume > 0.5}>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M11 5L6 9H2v6h4l5 4V5z"/>
+                        <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                      </svg>
+                    </if>
+                    <if ${!isMutedOrZero && this.volume > 0 && this.volume <= 0.5}>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M11 5L6 9H2v6h4l5 4V5z"/>
+                        <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                      </svg>
+                    </if>
+                  </button>
+                  <input
+                    class="video-volume-slider"
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    .value=${this.muted ? '0' : this.volume.toString()}
+                    @input=${(e) => this.handleVolumeSlider(e)}
+                  />
+                </div>
+
+                <span class="video-time">${this.formatTime(this.currentTime)} / ${this.formatTime(this.duration)}</span>
+              </div>
+
+              <div class="video-controls-right">
+                <button class="video-btn video-rate-btn" @click=${() => this.cyclePlaybackRate()} title="Playback speed">
+                  ${this.playbackRate}x
+                </button>
+
+                <button class="video-btn video-btn-pip" @click=${() => this.requestPictureInPicture()} title="Picture-in-Picture">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
+                    <rect x="11" y="9" width="9" height="7" rx="1" fill="currentColor" opacity="0.5"/>
+                  </svg>
+                </button>
+
+                <button class="video-btn video-btn-fullscreen" @click=${() => this.toggleFullscreen()} title="Fullscreen">
+                  <svg xmlns="http://www.w3.org/2000/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>
+                </button>
+              </div>
+            </div>
+          </div>
+        </if>
+      </div>
+    `;
+          }
+          constructor() {
+              super(...arguments);
+              this.src = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _src_initializers, ''));
+              this.poster = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _poster_initializers, ''));
+              this.autoplay = (__runInitializers(this, _poster_extraInitializers), __runInitializers(this, _autoplay_initializers, false));
+              this.muted = (__runInitializers(this, _autoplay_extraInitializers), __runInitializers(this, _muted_initializers, false));
+              this.loop = (__runInitializers(this, _muted_extraInitializers), __runInitializers(this, _loop_initializers, false));
+              this.controls = (__runInitializers(this, _loop_extraInitializers), __runInitializers(this, _controls_initializers, true));
+              this.playbackRate = (__runInitializers(this, _controls_extraInitializers), __runInitializers(this, _playbackRate_initializers, 1));
+              this.currentTime = (__runInitializers(this, _playbackRate_extraInitializers), __runInitializers(this, _currentTime_initializers, 0));
+              this.volume = (__runInitializers(this, _currentTime_extraInitializers), __runInitializers(this, _volume_initializers, 1));
+              this.variant = (__runInitializers(this, _volume_extraInitializers), __runInitializers(this, _variant_initializers, 'default'));
+              this.duration = (__runInitializers(this, _variant_extraInitializers), 0);
+              this.playing = false;
+              this.loading = false;
+              this.showPoster = true;
+              this.controlsVisible = false;
+              this.controlsTimer = null;
+              this.bufferedPercent = 0;
+              this.previousVolume = 1;
+              this.isSeeking = false;
+              this.container = __runInitializers(this, _container_initializers, void 0);
+              this.videoEl = (__runInitializers(this, _container_extraInitializers), __runInitializers(this, _videoEl_initializers, void 0));
+              this.progressContainer = (__runInitializers(this, _videoEl_extraInitializers), __runInitializers(this, _progressContainer_initializers, void 0));
+              __runInitializers(this, _progressContainer_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceVideoPlayer = SniceVideoPlayer;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-video-player.js.map