@prolibu-suite/cobalt-core 0.2.0 → 0.4.0

package/dist/cjs/co-video.cjs.entry.js

@@ -0,0 +1,839 @@
+'use strict';
+
+var index = require('./index-NNvye1ul.js');
+
+const coVideoCss = () => `:host{display:block;font-family:var(--co-font-family-primary);--co-video-controls-bg:linear-gradient(transparent, rgba(0, 0, 0, 0.75));--co-video-controls-color:#fff;--co-video-progress-height:4px;--co-video-progress-height-hover:8px;--co-video-accent:var(--co-color-base-blanco);--co-video-buffered:rgba(255, 255, 255, 0.25);--co-video-btn-hover:rgba(255, 255, 255, 0.16)}.co-video{position:relative;width:100%;background:#000;overflow:hidden;outline:none;user-select:none;-webkit-user-select:none}.co-video:focus-visible{outline:2px solid var(--co-semantic-border-focus-ring);outline-offset:2px}.co-video--16-9{aspect-ratio:16 / 9}.co-video--4-3{aspect-ratio:4 / 3}.co-video--1-1{aspect-ratio:1 / 1}.co-video--21-9{aspect-ratio:21 / 9}.co-video--auto{height:100%}.co-video--rounded-none{border-radius:0}.co-video--rounded-sm{border-radius:var(--co-border-radius-xs)}.co-video--rounded-md{border-radius:var(--co-border-radius-sm)}.co-video--rounded-lg{border-radius:var(--co-border-radius-lg)}.co-video--rounded-xl{border-radius:var(--co-border-radius-xl)}:host(:fullscreen){width:100%;height:100%}:host(:fullscreen) .co-video{border-radius:0 !important;aspect-ratio:unset;width:100%;height:100%}.co-video--disabled{opacity:0.5;pointer-events:none}.co-video__native{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.co-video__click-area{position:absolute;inset:0;z-index:1;cursor:pointer}.co-video__poster{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat}.co-video__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none}.co-video__spinner{width:40px;height:40px;border:3px solid rgba(255, 255, 255, 0.15);border-top-color:#fff;border-radius:50%;animation:co-video-spin 0.7s linear infinite}@keyframes co-video-spin{to{transform:rotate(360deg)}}.co-video__big-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;background:transparent;border:none;padding:0;color:#fff}.co-video__big-play-circle{width:72px;height:72px;border-radius:var(--co-border-radius-full);background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease, background 0.2s ease}.co-video__big-play:hover .co-video__big-play-circle{transform:scale(1.1);background:rgba(0, 0, 0, 0.7)}.co-video__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);z-index:4;background:rgba(0, 0, 0, 0.85);color:#fff}.co-video__error-text{font-size:var(--co-font-size-14);color:rgba(255, 255, 255, 0.7);margin:0;text-align:center;padding:0 var(--co-spacing-xl)}.co-video__error-retry{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-lg);border:1px solid rgba(255, 255, 255, 0.3);border-radius:var(--co-border-radius-full);background:transparent;color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease}.co-video__error-retry:hover{background:rgba(255, 255, 255, 0.1);border-color:rgba(255, 255, 255, 0.5)}.co-video__controls{position:absolute;bottom:0;left:0;right:0;background:var(--co-video-controls-bg);padding:var(--co-spacing-3xl) var(--co-spacing-lg) var(--co-spacing-md);z-index:5;opacity:1;transition:opacity 0.3s ease}.co-video__controls--hidden{opacity:0;pointer-events:none}.co-video__progress{position:relative;width:100%;height:var(--co-video-progress-height);cursor:pointer;transition:height 0.15s ease;margin-bottom:var(--co-spacing-sm);outline:none;touch-action:none}.co-video__progress:hover,.co-video__progress:focus-visible{height:var(--co-video-progress-height-hover)}.co-video__progress:focus-visible{outline:2px solid var(--co-semantic-border-focus-ring);outline-offset:4px;border-radius:var(--co-border-radius-full)}.co-video__progress-track{position:absolute;inset:0;background:rgba(255, 255, 255, 0.2);border-radius:var(--co-border-radius-full);overflow:hidden}.co-video__progress-buffered{position:absolute;top:0;left:0;height:100%;background:var(--co-video-buffered);border-radius:var(--co-border-radius-full);transition:width 0.3s ease}.co-video__progress-played{position:absolute;top:0;left:0;height:100%;background:var(--co-video-accent);border-radius:var(--co-border-radius-full)}.co-video__progress-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:var(--co-border-radius-full);background:var(--co-video-accent);transform:translate(-50%, -50%) scale(0);transition:transform 0.15s ease;pointer-events:none}.co-video__progress:hover .co-video__progress-thumb{transform:translate(-50%, -50%) scale(1)}.co-video__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-video__toolbar-left,.co-video__toolbar-right{display:flex;align-items:center;gap:var(--co-spacing-sm)}.co-video__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--co-video-controls-color);cursor:pointer;border-radius:var(--co-border-radius-xs);padding:0;transition:background 0.15s ease;flex-shrink:0}.co-video__btn:hover{background:var(--co-video-btn-hover)}.co-video__btn:focus-visible{outline:2px solid #fff;outline-offset:2px}.co-video__btn--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-video__time{font-size:var(--co-font-size-12);color:var(--co-video-controls-color);white-space:nowrap;padding:0 var(--co-spacing-xs);font-variant-numeric:tabular-nums}.co-video__volume{display:flex;align-items:center;position:relative}.co-video__volume-slider-wrap{width:0;overflow:hidden;transition:width 0.2s ease, opacity 0.2s ease;opacity:0}.co-video__volume-slider-wrap--visible{width:96px;opacity:1;overflow:visible}.co-video__volume-slider{width:96px;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 10px}.co-video__volume-track{position:relative;width:100%;height:4px;background:rgba(255, 255, 255, 0.2);border-radius:var(--co-border-radius-full)}.co-video__volume-fill{position:absolute;top:0;left:0;height:100%;background:var(--co-video-accent);border-radius:var(--co-border-radius-full)}.co-video__volume-thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:var(--co-border-radius-full);background:var(--co-video-accent);transform:translate(-50%, -50%);pointer-events:none}.co-video__speed-wrap{position:relative}.co-video__btn--speed{width:auto;padding:0 var(--co-spacing-sm)}.co-video__speed-label{font-family:var(--co-font-family-primary);font-size:var(--co-font-size-13);font-weight:500;color:var(--co-video-controls-color)}.co-video__speed-menu{position:absolute;bottom:100%;right:0;margin-bottom:var(--co-spacing-xs);background:rgba(20, 20, 20, 0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--co-border-radius-sm);padding:var(--co-spacing-xs) 0;min-width:130px;box-shadow:var(--co-shadow-lg);z-index:10}.co-video__speed-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--co-spacing-sm) var(--co-spacing-lg);color:#fff;font-size:var(--co-font-size-14);font-family:var(--co-font-family-primary);cursor:pointer;background:transparent;border:none;transition:background 0.1s ease;text-align:left}.co-video__speed-option:hover{background:rgba(255, 255, 255, 0.08)}.co-video__speed-option--active{font-weight:600}@media (max-width: 480px){.co-video__volume-slider-wrap{display:none}.co-video__toolbar{gap:var(--co-spacing-xxs)}.co-video__btn{width:32px;height:32px}.co-video__big-play-circle{width:56px;height:56px}.co-video__time{font-size:var(--co-font-size-11)}.co-video__controls{padding:var(--co-spacing-2xl) var(--co-spacing-sm2) var(--co-spacing-sm)}}`;
+
+const VIDEO_I18N = {
+    es: {
+        play: 'Reproducir',
+        pause: 'Pausar',
+        mute: 'Silenciar',
+        unmute: 'Activar sonido',
+        volume: 'Volumen',
+        fullscreen: 'Pantalla completa',
+        exitFullscreen: 'Salir de pantalla completa',
+        speed: 'Velocidad',
+        pip: 'Imagen en imagen',
+        exitPip: 'Salir de imagen en imagen',
+        download: 'Descargar',
+        seek: 'Buscar',
+        normal: 'Normal',
+        error: 'Error al reproducir el video',
+        retry: 'Reintentar',
+        player: 'Reproductor de video',
+    },
+    en: {
+        play: 'Play',
+        pause: 'Pause',
+        mute: 'Mute',
+        unmute: 'Unmute',
+        volume: 'Volume',
+        fullscreen: 'Fullscreen',
+        exitFullscreen: 'Exit fullscreen',
+        speed: 'Speed',
+        pip: 'Picture in picture',
+        exitPip: 'Exit picture in picture',
+        download: 'Download',
+        seek: 'Seek',
+        normal: 'Normal',
+        error: 'Error playing video',
+        retry: 'Retry',
+        player: 'Video player',
+    },
+    pt: {
+        play: 'Reproduzir',
+        pause: 'Pausar',
+        mute: 'Silenciar',
+        unmute: 'Ativar som',
+        volume: 'Volume',
+        fullscreen: 'Tela cheia',
+        exitFullscreen: 'Sair da tela cheia',
+        speed: 'Velocidade',
+        pip: 'Imagem em imagem',
+        exitPip: 'Sair de imagem em imagem',
+        download: 'Baixar',
+        seek: 'Buscar',
+        normal: 'Normal',
+        error: 'Erro ao reproduzir o vídeo',
+        retry: 'Tentar novamente',
+        player: 'Reprodutor de vídeo',
+    },
+};
+const ERROR_MESSAGES = {
+    1: {
+        es: 'La carga del video fue interrumpida',
+        en: 'Video loading was aborted',
+        pt: 'O carregamento do vídeo foi interrompido',
+    },
+    2: {
+        es: 'Error de red al cargar el video',
+        en: 'Network error while loading video',
+        pt: 'Erro de rede ao carregar o vídeo',
+    },
+    3: {
+        es: 'Error al decodificar el video',
+        en: 'Error decoding video',
+        pt: 'Erro ao decodificar o vídeo',
+    },
+    4: {
+        es: 'Formato de video no soportado',
+        en: 'Video format not supported',
+        pt: 'Formato de vídeo não suportado',
+    },
+};
+const CoVideo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.coPlay = index.createEvent(this, "coPlay", 7);
+        this.coPause = index.createEvent(this, "coPause", 7);
+        this.coEnded = index.createEvent(this, "coEnded", 7);
+        this.coReady = index.createEvent(this, "coReady", 7);
+        this.coError = index.createEvent(this, "coError", 7);
+        this.coTimeUpdate = index.createEvent(this, "coTimeUpdate", 3);
+        this.coSeeked = index.createEvent(this, "coSeeked", 7);
+        this.coVolumeChange = index.createEvent(this, "coVolumeChange", 7);
+        this.coFullscreenChange = index.createEvent(this, "coFullscreenChange", 7);
+        this.coPlaybackRateChange = index.createEvent(this, "coPlaybackRateChange", 7);
+        this.coPipChange = index.createEvent(this, "coPipChange", 7);
+        this.coDownload = index.createEvent(this, "coDownload", 7);
+        this.coThresholdReached = index.createEvent(this, "coThresholdReached", 7);
+        // ═══════════════════════════════════════════════════
+        // SOURCE & BEHAVIOR PROPS
+        // ═══════════════════════════════════════════════════
+        /** Video source URL */
+        this.src = '';
+        /** Poster/thumbnail image URL */
+        this.poster = '';
+        /** MIME type hint */
+        this.type = '';
+        /** Preload behavior */
+        this.preload = 'metadata';
+        /** Auto-start playback (requires muted for browser autoplay) */
+        this.autoplay = false;
+        /** Loop playback */
+        this.loop = false;
+        /** Muted state */
+        this.muted = false;
+        /** Initial volume (0-1) */
+        this.volume = 1;
+        /** Current playback position in seconds (enables resume) */
+        this.currentTime = 0;
+        /** Playback speed */
+        this.playbackRate = 1;
+        /** Available playback speeds (JSON array string) */
+        this.playbackRates = '[0.5, 0.75, 1, 1.25, 1.5, 2]';
+        // ═══════════════════════════════════════════════════
+        // CONTROL VISIBILITY PROPS
+        // ═══════════════════════════════════════════════════
+        /** Master toggle for custom control bar */
+        this.controls = true;
+        /** Show play/pause button */
+        this.showPlay = true;
+        /** Show volume controls */
+        this.showVolume = true;
+        /** Show progress/seek bar */
+        this.showProgress = true;
+        /** Show time display */
+        this.showTime = true;
+        /** Show fullscreen button */
+        this.showFullscreen = true;
+        /** Show playback speed selector */
+        this.showSpeed = false;
+        /** Show Picture-in-Picture button */
+        this.showPip = false;
+        /** Show download button */
+        this.showDownload = false;
+        // ═══════════════════════════════════════════════════
+        // APPEARANCE & BEHAVIOR PROPS
+        // ═══════════════════════════════════════════════════
+        /** Enable download functionality */
+        this.allowDownload = false;
+        /** Container aspect ratio */
+        this.aspectRatio = '16:9';
+        /** Border radius */
+        this.rounded = 'lg';
+        /** Auto-hide controls after inactivity */
+        this.controlsAutoHide = true;
+        /** Milliseconds before controls hide */
+        this.controlsAutoHideDelay = 3000;
+        /** Disabled state */
+        this.disabled = false;
+        /** Progress percentage (0-100) that triggers coThresholdReached. 0 = disabled */
+        this.watchThreshold = 0;
+        /** Language for labels and aria attributes */
+        this.locale = 'es';
+        // ═══════════════════════════════════════════════════
+        // STATE
+        // ═══════════════════════════════════════════════════
+        this.isPlaying = false;
+        this.internalCurrentTime = 0;
+        this.duration = 0;
+        this.buffered = 0;
+        this.volumeLevel = 1;
+        this.isMuted = false;
+        this.isFullscreen = false;
+        this.internalPlaybackRate = 1;
+        this.isLoading = true;
+        this.showControlBar = true;
+        this.hasError = false;
+        this.errorMessage = '';
+        this.showSpeedMenu = false;
+        this.isPip = false;
+        this.thresholdFired = false;
+        this.hasStarted = false;
+        this.isSeeking = false;
+        this.showVolumeSlider = false;
+        this.lastTimeUpdateEmit = 0;
+        this.parsedRates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+        this.seekFromTime = 0;
+        this.externalTimeUpdate = false;
+        // ── Controls auto-hide ──────────────────────────
+        this.resetControlsTimer = () => {
+            if (!this.controlsAutoHide || !this.controls)
+                return;
+            this.showControlBar = true;
+            if (this.controlsTimer)
+                clearTimeout(this.controlsTimer);
+            this.controlsTimer = setTimeout(() => {
+                if (this.isPlaying && !this.showSpeedMenu) {
+                    this.showControlBar = false;
+                }
+            }, this.controlsAutoHideDelay);
+        };
+        this.handleContainerMouseMove = () => {
+            this.resetControlsTimer();
+        };
+        this.handleContainerMouseLeave = () => {
+            if (this.isPlaying && this.controlsAutoHide) {
+                this.showControlBar = false;
+                this.showSpeedMenu = false;
+            }
+        };
+        this.handleContainerTouchStart = () => {
+            if (this.showControlBar && this.isPlaying) {
+                this.showControlBar = false;
+            }
+            else {
+                this.resetControlsTimer();
+            }
+        };
+        // ── Video event handlers ────────────────────────
+        this.onLoadedMetadata = () => {
+            if (!this.videoEl)
+                return;
+            this.duration = this.videoEl.duration;
+            this.hasError = false;
+            this.coReady.emit({ duration: this.duration });
+            if (this.currentTime > 0 && this.currentTime < this.duration) {
+                this.videoEl.currentTime = this.currentTime;
+            }
+        };
+        this.onPlay = () => {
+            this.isPlaying = true;
+            this.hasStarted = true;
+            this.coPlay.emit();
+            this.resetControlsTimer();
+        };
+        this.onPause = () => {
+            this.isPlaying = false;
+            this.showControlBar = true;
+            this.coPause.emit();
+            if (this.controlsTimer)
+                clearTimeout(this.controlsTimer);
+        };
+        this.onEnded = () => {
+            this.isPlaying = false;
+            this.showControlBar = true;
+            this.coEnded.emit();
+        };
+        this.onTimeUpdate = () => {
+            if (!this.videoEl || this.isSeeking)
+                return;
+            this.internalCurrentTime = this.videoEl.currentTime;
+            this.externalTimeUpdate = true;
+            this.currentTime = this.videoEl.currentTime;
+            const now = performance.now();
+            if (now - this.lastTimeUpdateEmit > 250) {
+                this.lastTimeUpdateEmit = now;
+                const pct = this.duration > 0 ? Math.round((this.internalCurrentTime / this.duration) * 100) : 0;
+                this.coTimeUpdate.emit({
+                    currentTime: this.internalCurrentTime,
+                    duration: this.duration,
+                    progressPercent: pct,
+                });
+                if (this.watchThreshold > 0 && !this.thresholdFired && pct >= this.watchThreshold) {
+                    this.thresholdFired = true;
+                    this.coThresholdReached.emit({
+                        threshold: this.watchThreshold,
+                        currentTime: this.internalCurrentTime,
+                        duration: this.duration,
+                    });
+                }
+            }
+        };
+        this.onWaiting = () => {
+            this.isLoading = true;
+        };
+        this.onCanPlay = () => {
+            this.isLoading = false;
+        };
+        this.onError = () => {
+            var _a, _b;
+            if (!((_a = this.videoEl) === null || _a === void 0 ? void 0 : _a.error))
+                return;
+            const code = this.videoEl.error.code;
+            const message = ((_b = ERROR_MESSAGES[code]) === null || _b === void 0 ? void 0 : _b[this.locale]) || this.t.error;
+            this.hasError = true;
+            this.errorMessage = message;
+            this.isLoading = false;
+            this.coError.emit({ code, message });
+        };
+        this.onProgress = () => {
+            if (!this.videoEl || this.duration <= 0)
+                return;
+            const buf = this.videoEl.buffered;
+            if (buf.length > 0) {
+                this.buffered = (buf.end(buf.length - 1) / this.duration) * 100;
+            }
+        };
+        this.onNativeVolumeChange = () => {
+            if (!this.videoEl)
+                return;
+            this.volumeLevel = this.videoEl.volume;
+            this.isMuted = this.videoEl.muted;
+            this.volume = this.videoEl.volume;
+            this.muted = this.videoEl.muted;
+            this.coVolumeChange.emit({ volume: this.volumeLevel, muted: this.isMuted });
+        };
+        this.onNativeRateChange = () => {
+            if (!this.videoEl)
+                return;
+            this.internalPlaybackRate = this.videoEl.playbackRate;
+            this.playbackRate = this.videoEl.playbackRate;
+            this.coPlaybackRateChange.emit({ rate: this.internalPlaybackRate });
+        };
+        // ── Control interactions ────────────────────────
+        this.handlePlayClick = () => {
+            if (this.disabled || !this.videoEl)
+                return;
+            if (this.isPlaying) {
+                this.videoEl.pause();
+            }
+            else {
+                this.videoEl.play().catch(() => { });
+            }
+        };
+        this.handleBigPlayClick = () => {
+            if (this.disabled)
+                return;
+            this.handlePlayClick();
+        };
+        this.handleMuteClick = () => {
+            if (this.disabled || !this.videoEl)
+                return;
+            this.videoEl.muted = !this.videoEl.muted;
+        };
+        this.isDraggingVolume = false;
+        this.handleVolumeMouseEnter = () => {
+            this.showVolumeSlider = true;
+        };
+        this.handleVolumeMouseLeave = () => {
+            if (!this.isDraggingVolume) {
+                this.showVolumeSlider = false;
+            }
+        };
+        // ── Progress bar seek ───────────────────────────
+        this.handleProgressPointerDown = (e) => {
+            if (this.disabled || !this.videoEl)
+                return;
+            e.preventDefault();
+            this.isSeeking = true;
+            this.seekFromTime = this.videoEl.currentTime;
+            this.seekFromPointerEvent(e);
+            const onMove = (ev) => this.seekFromPointerEvent(ev);
+            const onUp = () => {
+                if (this.videoEl) {
+                    this.coSeeked.emit({ from: this.seekFromTime, to: this.videoEl.currentTime });
+                }
+                this.isSeeking = false;
+                document.removeEventListener('pointermove', onMove);
+                document.removeEventListener('pointerup', onUp);
+            };
+            document.addEventListener('pointermove', onMove);
+            document.addEventListener('pointerup', onUp);
+        };
+        // ── Volume slider ──────────────────────────────
+        this.handleVolumePointerDown = (e) => {
+            if (this.disabled || !this.videoEl)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.isDraggingVolume = true;
+            this.showVolumeSlider = true;
+            this.setVolumeFromPointerEvent(e);
+            const onMove = (ev) => this.setVolumeFromPointerEvent(ev);
+            const onUp = () => {
+                this.isDraggingVolume = false;
+                document.removeEventListener('pointermove', onMove);
+                document.removeEventListener('pointerup', onUp);
+            };
+            document.addEventListener('pointermove', onMove);
+            document.addEventListener('pointerup', onUp);
+        };
+        // ── Speed menu ─────────────────────────────────
+        this.handleSpeedClick = (e) => {
+            e.stopPropagation();
+            this.showSpeedMenu = !this.showSpeedMenu;
+        };
+        this.handleSpeedSelect = (rate) => {
+            if (this.disabled || !this.videoEl)
+                return;
+            this.videoEl.playbackRate = rate;
+            this.showSpeedMenu = false;
+        };
+        // ── Fullscreen ─────────────────────────────────
+        this.handleFullscreenClick = () => {
+            if (this.disabled)
+                return;
+            const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+            if (fsEl) {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen().catch(() => { });
+                }
+                else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+            }
+            else {
+                const target = this.el;
+                if (target.requestFullscreen) {
+                    target.requestFullscreen().catch(() => { });
+                }
+                else if (target.webkitRequestFullscreen) {
+                    target.webkitRequestFullscreen();
+                }
+                else if (this.videoEl && this.videoEl.webkitEnterFullscreen) {
+                    this.videoEl.webkitEnterFullscreen();
+                }
+            }
+        };
+        this.handleFullscreenChange = () => {
+            const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+            this.isFullscreen = fsEl === this.el;
+            this.coFullscreenChange.emit({ fullscreen: this.isFullscreen });
+        };
+        // ── Picture-in-Picture ─────────────────────────
+        this.handlePipClick = async () => {
+            if (this.disabled || !this.videoEl)
+                return;
+            try {
+                if (this.isPip) {
+                    await document.exitPictureInPicture();
+                }
+                else {
+                    await this.videoEl.requestPictureInPicture();
+                }
+            }
+            catch (_a) {
+                // PiP not available
+            }
+        };
+        this.handleEnterPip = () => {
+            this.isPip = true;
+            this.coPipChange.emit({ pip: true });
+        };
+        this.handleLeavePip = () => {
+            this.isPip = false;
+            this.coPipChange.emit({ pip: false });
+        };
+        // ── Download ───────────────────────────────────
+        this.handleDownloadClick = () => {
+            if (!this.allowDownload || !this.src)
+                return;
+            this.coDownload.emit({ src: this.src });
+            const a = document.createElement('a');
+            a.href = this.src;
+            a.download = '';
+            a.target = '_blank';
+            a.rel = 'noopener';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+        };
+        // ── Retry ──────────────────────────────────────
+        this.handleRetryClick = () => {
+            if (!this.videoEl)
+                return;
+            this.hasError = false;
+            this.errorMessage = '';
+            this.isLoading = true;
+            this.videoEl.load();
+        };
+        // ── Keyboard ───────────────────────────────────
+        this.handleKeyDown = (e) => {
+            var _a, _b;
+            if (this.disabled || !this.videoEl)
+                return;
+            const tag = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+            if (tag === 'input' || tag === 'textarea')
+                return;
+            switch (e.key) {
+                case ' ':
+                case 'k':
+                case 'K':
+                    e.preventDefault();
+                    this.handlePlayClick();
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    this.videoEl.currentTime = Math.min(this.duration, this.videoEl.currentTime + 5);
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    this.videoEl.currentTime = Math.max(0, this.videoEl.currentTime - 5);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.videoEl.volume = Math.min(1, this.videoEl.volume + 0.1);
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.videoEl.volume = Math.max(0, this.videoEl.volume - 0.1);
+                    break;
+                case 'm':
+                case 'M':
+                    e.preventDefault();
+                    this.handleMuteClick();
+                    break;
+                case 'f':
+                case 'F':
+                    e.preventDefault();
+                    this.handleFullscreenClick();
+                    break;
+                case 'Escape':
+                    if (this.showSpeedMenu) {
+                        e.preventDefault();
+                        this.showSpeedMenu = false;
+                    }
+                    break;
+            }
+        };
+        // ── Click on video area (toggle play) ──────────
+        this.handleVideoAreaClick = () => {
+            if (this.disabled)
+                return;
+            this.handlePlayClick();
+            this.resetControlsTimer();
+        };
+    }
+    // ═══════════════════════════════════════════════════
+    // i18n HELPER
+    // ═══════════════════════════════════════════════════
+    get t() {
+        return VIDEO_I18N[this.locale] || VIDEO_I18N['es'];
+    }
+    // ═══════════════════════════════════════════════════
+    // COMPUTED
+    // ═══════════════════════════════════════════════════
+    get progressPercent() {
+        if (this.duration <= 0)
+            return 0;
+        return (this.internalCurrentTime / this.duration) * 100;
+    }
+    get pipSupported() {
+        return typeof document !== 'undefined' && 'pictureInPictureEnabled' in document && document.pictureInPictureEnabled;
+    }
+    // ═══════════════════════════════════════════════════
+    // WATCHERS
+    // ═══════════════════════════════════════════════════
+    onSrcChange() {
+        this.resetState();
+    }
+    onMutedChange() {
+        if (this.videoEl)
+            this.videoEl.muted = this.muted;
+        this.isMuted = this.muted;
+    }
+    onVolumeChange() {
+        const clamped = Math.max(0, Math.min(1, this.volume));
+        if (this.videoEl)
+            this.videoEl.volume = clamped;
+        this.volumeLevel = clamped;
+    }
+    onCurrentTimeChange() {
+        if (this.externalTimeUpdate) {
+            this.externalTimeUpdate = false;
+            return;
+        }
+        if (this.videoEl && Math.abs(this.videoEl.currentTime - this.currentTime) > 0.5) {
+            this.videoEl.currentTime = this.currentTime;
+        }
+    }
+    onPlaybackRateChange() {
+        if (this.videoEl)
+            this.videoEl.playbackRate = this.playbackRate;
+        this.internalPlaybackRate = this.playbackRate;
+    }
+    onPlaybackRatesChange() {
+        this.parseRates();
+    }
+    // ═══════════════════════════════════════════════════
+    // LIFECYCLE
+    // ═══════════════════════════════════════════════════
+    componentWillLoad() {
+        this.parseRates();
+        this.volumeLevel = Math.max(0, Math.min(1, this.volume));
+        this.isMuted = this.muted;
+        this.internalPlaybackRate = this.playbackRate;
+    }
+    componentDidLoad() {
+        if (this.videoEl) {
+            this.bindVideoEvents();
+            this.videoEl.volume = this.volumeLevel;
+            this.videoEl.muted = this.isMuted;
+            this.videoEl.playbackRate = this.internalPlaybackRate;
+            if (this.autoplay && this.muted) {
+                this.videoEl.play().catch(() => { });
+            }
+        }
+        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    }
+    disconnectedCallback() {
+        if (this.controlsTimer)
+            clearTimeout(this.controlsTimer);
+        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+        document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+        if (this.videoEl) {
+            this.videoEl.removeEventListener('loadedmetadata', this.onLoadedMetadata);
+            this.videoEl.removeEventListener('play', this.onPlay);
+            this.videoEl.removeEventListener('pause', this.onPause);
+            this.videoEl.removeEventListener('ended', this.onEnded);
+            this.videoEl.removeEventListener('timeupdate', this.onTimeUpdate);
+            this.videoEl.removeEventListener('waiting', this.onWaiting);
+            this.videoEl.removeEventListener('canplay', this.onCanPlay);
+            this.videoEl.removeEventListener('error', this.onError);
+            this.videoEl.removeEventListener('progress', this.onProgress);
+            this.videoEl.removeEventListener('volumechange', this.onNativeVolumeChange);
+            this.videoEl.removeEventListener('ratechange', this.onNativeRateChange);
+            this.videoEl.removeEventListener('enterpictureinpicture', this.handleEnterPip);
+            this.videoEl.removeEventListener('leavepictureinpicture', this.handleLeavePip);
+        }
+    }
+    // ═══════════════════════════════════════════════════
+    // PUBLIC METHODS
+    // ═══════════════════════════════════════════════════
+    async play() {
+        var _a;
+        await ((_a = this.videoEl) === null || _a === void 0 ? void 0 : _a.play());
+    }
+    async pause() {
+        var _a;
+        (_a = this.videoEl) === null || _a === void 0 ? void 0 : _a.pause();
+    }
+    async togglePlay() {
+        var _a, _b;
+        if (this.isPlaying) {
+            (_a = this.videoEl) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+        else {
+            await ((_b = this.videoEl) === null || _b === void 0 ? void 0 : _b.play());
+        }
+    }
+    async seek(time) {
+        if (this.videoEl) {
+            this.videoEl.currentTime = time;
+        }
+    }
+    async setVolume(level) {
+        const clamped = Math.max(0, Math.min(1, level));
+        this.volume = clamped;
+        if (this.videoEl)
+            this.videoEl.volume = clamped;
+        this.volumeLevel = clamped;
+    }
+    async toggleMute() {
+        this.handleMuteClick();
+    }
+    async toggleFullscreen() {
+        this.handleFullscreenClick();
+    }
+    async togglePip() {
+        this.handlePipClick();
+    }
+    // ═══════════════════════════════════════════════════
+    // PRIVATE METHODS
+    // ═══════════════════════════════════════════════════
+    parseRates() {
+        try {
+            const parsed = JSON.parse(this.playbackRates);
+            if (Array.isArray(parsed)) {
+                this.parsedRates = parsed.filter(r => typeof r === 'number' && r > 0).sort((a, b) => a - b);
+            }
+        }
+        catch (_a) {
+            this.parsedRates = [0.5, 0.75, 1, 1.25, 1.5, 2];
+        }
+    }
+    resetState() {
+        this.isPlaying = false;
+        this.internalCurrentTime = 0;
+        this.duration = 0;
+        this.buffered = 0;
+        this.hasError = false;
+        this.errorMessage = '';
+        this.thresholdFired = false;
+        this.hasStarted = false;
+        this.isLoading = true;
+        this.showSpeedMenu = false;
+    }
+    bindVideoEvents() {
+        if (!this.videoEl)
+            return;
+        this.videoEl.addEventListener('loadedmetadata', this.onLoadedMetadata);
+        this.videoEl.addEventListener('play', this.onPlay);
+        this.videoEl.addEventListener('pause', this.onPause);
+        this.videoEl.addEventListener('ended', this.onEnded);
+        this.videoEl.addEventListener('timeupdate', this.onTimeUpdate);
+        this.videoEl.addEventListener('waiting', this.onWaiting);
+        this.videoEl.addEventListener('canplay', this.onCanPlay);
+        this.videoEl.addEventListener('error', this.onError);
+        this.videoEl.addEventListener('progress', this.onProgress);
+        this.videoEl.addEventListener('volumechange', this.onNativeVolumeChange);
+        this.videoEl.addEventListener('ratechange', this.onNativeRateChange);
+        this.videoEl.addEventListener('enterpictureinpicture', this.handleEnterPip);
+        this.videoEl.addEventListener('leavepictureinpicture', this.handleLeavePip);
+    }
+    formatTime(seconds) {
+        if (!isFinite(seconds) || seconds < 0)
+            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')}`;
+    }
+    seekFromPointerEvent(e) {
+        if (!this.progressTrackEl || !this.videoEl)
+            return;
+        const rect = this.progressTrackEl.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const time = ratio * this.duration;
+        this.videoEl.currentTime = time;
+        this.internalCurrentTime = time;
+    }
+    setVolumeFromPointerEvent(e) {
+        if (!this.volumeTrackEl || !this.videoEl)
+            return;
+        const rect = this.volumeTrackEl.getBoundingClientRect();
+        const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        this.videoEl.volume = ratio;
+        if (ratio > 0 && this.videoEl.muted) {
+            this.videoEl.muted = false;
+        }
+    }
+    // ═══════════════════════════════════════════════════
+    // RENDER HELPERS
+    // ═══════════════════════════════════════════════════
+    renderBigPlayButton() {
+        if (this.isPlaying || this.hasError || this.isLoading)
+            return null;
+        return (index.h("button", { class: "co-video__big-play", part: "big-play", onClick: this.handleBigPlayClick, "aria-label": this.t.play, tabindex: "-1" }, index.h("div", { class: "co-video__big-play-circle" }, index.h("co-icon", { name: "play", size: 32, weight: "fill" }))));
+    }
+    renderPoster() {
+        if (!this.poster || this.hasStarted)
+            return null;
+        return (index.h("div", { class: "co-video__poster", part: "poster", style: { backgroundImage: `url(${this.poster})` } }));
+    }
+    renderLoader() {
+        if (!this.isLoading || this.hasError)
+            return null;
+        return (index.h("div", { class: "co-video__loader" }, index.h("div", { class: "co-video__spinner" })));
+    }
+    renderError() {
+        if (!this.hasError)
+            return null;
+        return (index.h("div", { class: "co-video__error" }, index.h("co-icon", { name: "warning-circle", size: 48, weight: "regular" }), index.h("p", { class: "co-video__error-text" }, this.errorMessage || this.t.error), index.h("button", { class: "co-video__error-retry", onClick: this.handleRetryClick }, index.h("co-icon", { name: "arrow-clockwise", size: 16, weight: "bold" }), this.t.retry)));
+    }
+    renderProgressBar() {
+        if (!this.showProgress)
+            return null;
+        const playedPct = this.progressPercent;
+        const bufferedPct = this.buffered;
+        return (index.h("div", { class: "co-video__progress", part: "progress", role: "slider", "aria-label": this.t.seek, "aria-valuenow": Math.round(this.internalCurrentTime), "aria-valuemin": 0, "aria-valuemax": Math.round(this.duration), tabindex: 0, ref: el => (this.progressTrackEl = el), onPointerDown: this.handleProgressPointerDown }, index.h("div", { class: "co-video__progress-track" }, index.h("div", { class: "co-video__progress-buffered", style: { width: `${bufferedPct}%` } }), index.h("div", { class: "co-video__progress-played", style: { width: `${playedPct}%` } })), index.h("div", { class: "co-video__progress-thumb", style: { left: `${playedPct}%` } })));
+    }
+    renderVolumeControl() {
+        if (!this.showVolume)
+            return null;
+        const volumePct = this.isMuted ? 0 : this.volumeLevel * 100;
+        const volumeIcon = this.isMuted || this.volumeLevel === 0
+            ? 'speaker-x'
+            : this.volumeLevel < 0.5
+                ? 'speaker-low'
+                : 'speaker-high';
+        return (index.h("div", { class: "co-video__volume", onMouseEnter: this.handleVolumeMouseEnter, onMouseLeave: this.handleVolumeMouseLeave }, index.h("button", { class: "co-video__btn", onClick: this.handleMuteClick, "aria-label": this.isMuted ? this.t.unmute : this.t.mute }, index.h("co-icon", { name: volumeIcon, size: 20, weight: "fill" })), index.h("div", { class: { 'co-video__volume-slider-wrap': true, 'co-video__volume-slider-wrap--visible': this.showVolumeSlider } }, index.h("div", { class: "co-video__volume-slider", onPointerDown: this.handleVolumePointerDown, role: "slider", "aria-label": this.t.volume, "aria-valuenow": Math.round(volumePct), "aria-valuemin": 0, "aria-valuemax": 100 }, index.h("div", { class: "co-video__volume-track", ref: el => (this.volumeTrackEl = el) }, index.h("div", { class: "co-video__volume-fill", style: { width: `${volumePct}%` } }), index.h("div", { class: "co-video__volume-thumb", style: { left: `${volumePct}%` } }))))));
+    }
+    renderSpeedMenu() {
+        if (!this.showSpeed)
+            return null;
+        const label = this.internalPlaybackRate === 1
+            ? `1x`
+            : `${this.internalPlaybackRate}x`;
+        return (index.h("div", { class: "co-video__speed-wrap" }, index.h("button", { class: "co-video__btn co-video__btn--speed", onClick: this.handleSpeedClick, "aria-label": this.t.speed, "aria-haspopup": "listbox", "aria-expanded": this.showSpeedMenu ? 'true' : 'false' }, index.h("span", { class: "co-video__speed-label" }, label)), this.showSpeedMenu && (index.h("div", { class: "co-video__speed-menu", role: "listbox", "aria-label": this.t.speed }, this.parsedRates.map(rate => (index.h("button", { class: {
+                'co-video__speed-option': true,
+                'co-video__speed-option--active': rate === this.internalPlaybackRate,
+            }, role: "option", "aria-selected": rate === this.internalPlaybackRate ? 'true' : 'false', onClick: () => this.handleSpeedSelect(rate) }, index.h("span", null, rate === 1 ? this.t.normal : `${rate}x`), rate === this.internalPlaybackRate && index.h("co-icon", { name: "check", size: 14, weight: "bold" }))))))));
+    }
+    renderControls() {
+        if (!this.controls)
+            return null;
+        return (index.h("div", { class: {
+                'co-video__controls': true,
+                'co-video__controls--hidden': !this.showControlBar,
+            }, part: "controls", onClick: (e) => e.stopPropagation() }, this.renderProgressBar(), index.h("div", { class: "co-video__toolbar", part: "toolbar" }, index.h("div", { class: "co-video__toolbar-left" }, this.showPlay && (index.h("button", { class: "co-video__btn", onClick: this.handlePlayClick, "aria-label": this.isPlaying ? this.t.pause : this.t.play }, index.h("co-icon", { name: this.isPlaying ? 'pause' : 'play', size: 20, weight: "fill" }))), this.renderVolumeControl(), this.showTime && (index.h("span", { class: "co-video__time", "aria-live": "off" }, this.formatTime(this.internalCurrentTime), " / ", this.formatTime(this.duration)))), index.h("div", { class: "co-video__toolbar-right" }, this.renderSpeedMenu(), this.showPip && this.pipSupported && (index.h("button", { class: "co-video__btn", onClick: this.handlePipClick, "aria-label": this.isPip ? this.t.exitPip : this.t.pip }, index.h("co-icon", { name: this.isPip ? 'picture-in-picture' : 'picture-in-picture', size: 20, weight: this.isPip ? 'fill' : 'regular' }))), this.showDownload && (index.h("button", { class: {
+                'co-video__btn': true,
+                'co-video__btn--disabled': !this.allowDownload,
+            }, onClick: this.handleDownloadClick, "aria-label": this.t.download, disabled: !this.allowDownload }, index.h("co-icon", { name: "download-simple", size: 20, weight: "regular" }))), this.showFullscreen && (index.h("button", { class: "co-video__btn", onClick: this.handleFullscreenClick, "aria-label": this.isFullscreen ? this.t.exitFullscreen : this.t.fullscreen }, index.h("co-icon", { name: this.isFullscreen ? 'corners-in' : 'corners-out', size: 20, weight: "regular" })))))));
+    }
+    // ═══════════════════════════════════════════════════
+    // RENDER
+    // ═══════════════════════════════════════════════════
+    render() {
+        const aspectClass = `co-video--${this.aspectRatio.replace(':', '-')}`;
+        return (index.h(index.Host, { key: 'b9ec731de1166f1669cae03cb58ccdd7f2d7739c' }, index.h("div", { key: '366893b040c2fe7a6bb79bfee6cf7750a768c2f3', class: {
+                'co-video': true,
+                [aspectClass]: true,
+                [`co-video--rounded-${this.rounded}`]: true,
+                'co-video--disabled': this.disabled,
+                'co-video--fullscreen': this.isFullscreen,
+                'co-video--playing': this.isPlaying,
+            }, part: "container", ref: el => (this.containerEl = el), role: "region", "aria-label": this.t.player, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseMove: this.handleContainerMouseMove, onMouseLeave: this.handleContainerMouseLeave, onTouchStart: this.handleContainerTouchStart }, index.h("video", { key: '017ef8e92b6bf6424cfc1582b518f8fc765d3b4d', ref: el => (this.videoEl = el), class: "co-video__native", part: "video", src: this.src || undefined, poster: undefined, preload: this.preload, loop: this.loop, playsinline: true, tabindex: -1, controlsList: this.allowDownload ? undefined : 'nodownload' }), this.renderPoster(), this.renderLoader(), this.renderBigPlayButton(), this.renderError(), index.h("div", { key: '79de41cc82a7b55eeb33011e50574c8e1602f9dc', class: "co-video__click-area", onClick: this.handleVideoAreaClick }), this.renderControls())));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "src": [{
+                "onSrcChange": 0
+            }],
+        "muted": [{
+                "onMutedChange": 0
+            }],
+        "volume": [{
+                "onVolumeChange": 0
+            }],
+        "currentTime": [{
+                "onCurrentTimeChange": 0
+            }],
+        "playbackRate": [{
+                "onPlaybackRateChange": 0
+            }],
+        "playbackRates": [{
+                "onPlaybackRatesChange": 0
+            }]
+    }; }
+};
+CoVideo.style = coVideoCss();
+
+exports.co_video = CoVideo;