snice 4.9.0 → 4.10.0

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

@@ -0,0 +1,654 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, query, styles, ready, dispose, watch, on, dispatch, render, css, html } from 'snice';
+
+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 = [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 = [property()];
+            _poster_decorators = [property()];
+            _autoplay_decorators = [property({ type: Boolean })];
+            _muted_decorators = [property({ type: Boolean })];
+            _loop_decorators = [property({ type: Boolean })];
+            _controls_decorators = [property({ type: Boolean })];
+            _playbackRate_decorators = [property({ type: Number, attribute: 'playback-rate' })];
+            _currentTime_decorators = [property({ type: Number, attribute: 'current-time' })];
+            _volume_decorators = [property({ type: Number })];
+            _variant_decorators = [property()];
+            _container_decorators = [query('.video-container')];
+            _videoEl_decorators = [query('video')];
+            _progressContainer_decorators = [query('.video-progress-container')];
+            _componentStyles_decorators = [styles()];
+            _init_decorators = [ready()];
+            _cleanup_decorators = [dispose()];
+            _handleSrcChange_decorators = [watch('src')];
+            _handleVolumeChange_decorators = [watch('volume')];
+            _handleMutedChange_decorators = [watch('muted')];
+            _handlePlaybackRateChange_decorators = [watch('playbackRate')];
+            _handleLoopChange_decorators = [watch('loop')];
+            _handleKeydown_decorators = [on('keydown')];
+            _emitPlay_decorators = [dispatch('video-play', { bubbles: true, composed: true })];
+            _emitPause_decorators = [dispatch('video-pause', { bubbles: true, composed: true })];
+            _emitEnded_decorators = [dispatch('video-ended', { bubbles: true, composed: true })];
+            _emitTimeUpdate_decorators = [dispatch('video-time-update', { bubbles: true, composed: true })];
+            _emitFullscreenChange_decorators = [dispatch('video-fullscreen-change', { bubbles: true, composed: true })];
+            _emitVolumeChange_decorators = [dispatch('video-volume-change', { bubbles: true, composed: true })];
+            _renderPlayer_decorators = [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 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 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;
+})();
+
+export { SniceVideoPlayer };
+//# sourceMappingURL=snice-video-player.js.map