@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

package/dist/collection/components/co-video/co-video.js

@@ -0,0 +1,1772 @@
+import { h, Host } from "@stencil/core";
+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',
+    },
+};
+/**
+ * A fully configurable video player component with custom controls.
+ *
+ * @slot - Default slot (unused, reserved for future captions/overlays)
+ */
+export class CoVideo {
+    constructor() {
+        // ═══════════════════════════════════════════════════
+        // 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 (h("button", { class: "co-video__big-play", part: "big-play", onClick: this.handleBigPlayClick, "aria-label": this.t.play, tabindex: "-1" }, h("div", { class: "co-video__big-play-circle" }, h("co-icon", { name: "play", size: 32, weight: "fill" }))));
+    }
+    renderPoster() {
+        if (!this.poster || this.hasStarted)
+            return null;
+        return (h("div", { class: "co-video__poster", part: "poster", style: { backgroundImage: `url(${this.poster})` } }));
+    }
+    renderLoader() {
+        if (!this.isLoading || this.hasError)
+            return null;
+        return (h("div", { class: "co-video__loader" }, h("div", { class: "co-video__spinner" })));
+    }
+    renderError() {
+        if (!this.hasError)
+            return null;
+        return (h("div", { class: "co-video__error" }, h("co-icon", { name: "warning-circle", size: 48, weight: "regular" }), h("p", { class: "co-video__error-text" }, this.errorMessage || this.t.error), h("button", { class: "co-video__error-retry", onClick: this.handleRetryClick }, 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 (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 }, h("div", { class: "co-video__progress-track" }, h("div", { class: "co-video__progress-buffered", style: { width: `${bufferedPct}%` } }), h("div", { class: "co-video__progress-played", style: { width: `${playedPct}%` } })), 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 (h("div", { class: "co-video__volume", onMouseEnter: this.handleVolumeMouseEnter, onMouseLeave: this.handleVolumeMouseLeave }, h("button", { class: "co-video__btn", onClick: this.handleMuteClick, "aria-label": this.isMuted ? this.t.unmute : this.t.mute }, h("co-icon", { name: volumeIcon, size: 20, weight: "fill" })), h("div", { class: { 'co-video__volume-slider-wrap': true, 'co-video__volume-slider-wrap--visible': this.showVolumeSlider } }, 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 }, h("div", { class: "co-video__volume-track", ref: el => (this.volumeTrackEl = el) }, h("div", { class: "co-video__volume-fill", style: { width: `${volumePct}%` } }), 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 (h("div", { class: "co-video__speed-wrap" }, 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' }, h("span", { class: "co-video__speed-label" }, label)), this.showSpeedMenu && (h("div", { class: "co-video__speed-menu", role: "listbox", "aria-label": this.t.speed }, this.parsedRates.map(rate => (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) }, h("span", null, rate === 1 ? this.t.normal : `${rate}x`), rate === this.internalPlaybackRate && h("co-icon", { name: "check", size: 14, weight: "bold" }))))))));
+    }
+    renderControls() {
+        if (!this.controls)
+            return null;
+        return (h("div", { class: {
+                'co-video__controls': true,
+                'co-video__controls--hidden': !this.showControlBar,
+            }, part: "controls", onClick: (e) => e.stopPropagation() }, this.renderProgressBar(), h("div", { class: "co-video__toolbar", part: "toolbar" }, h("div", { class: "co-video__toolbar-left" }, this.showPlay && (h("button", { class: "co-video__btn", onClick: this.handlePlayClick, "aria-label": this.isPlaying ? this.t.pause : this.t.play }, h("co-icon", { name: this.isPlaying ? 'pause' : 'play', size: 20, weight: "fill" }))), this.renderVolumeControl(), this.showTime && (h("span", { class: "co-video__time", "aria-live": "off" }, this.formatTime(this.internalCurrentTime), " / ", this.formatTime(this.duration)))), h("div", { class: "co-video__toolbar-right" }, this.renderSpeedMenu(), this.showPip && this.pipSupported && (h("button", { class: "co-video__btn", onClick: this.handlePipClick, "aria-label": this.isPip ? this.t.exitPip : this.t.pip }, h("co-icon", { name: this.isPip ? 'picture-in-picture' : 'picture-in-picture', size: 20, weight: this.isPip ? 'fill' : 'regular' }))), this.showDownload && (h("button", { class: {
+                'co-video__btn': true,
+                'co-video__btn--disabled': !this.allowDownload,
+            }, onClick: this.handleDownloadClick, "aria-label": this.t.download, disabled: !this.allowDownload }, h("co-icon", { name: "download-simple", size: 20, weight: "regular" }))), this.showFullscreen && (h("button", { class: "co-video__btn", onClick: this.handleFullscreenClick, "aria-label": this.isFullscreen ? this.t.exitFullscreen : this.t.fullscreen }, h("co-icon", { name: this.isFullscreen ? 'corners-in' : 'corners-out', size: 20, weight: "regular" })))))));
+    }
+    // ═══════════════════════════════════════════════════
+    // RENDER
+    // ═══════════════════════════════════════════════════
+    render() {
+        const aspectClass = `co-video--${this.aspectRatio.replace(':', '-')}`;
+        return (h(Host, { key: '6c107daa400b98ec6f35e2229f948075ef57ec00' }, h("div", { key: '4c41f12bb65374d91c282e134ecf3129d4510268', 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 }, h("video", { key: '164a8115e79d73bc3781ae16af99e5cfdcb54a1c', 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(), h("div", { key: 'a03be76edc9eee1cc7dabc896190d4864dae729b', class: "co-video__click-area", onClick: this.handleVideoAreaClick }), this.renderControls())));
+    }
+    static get is() { return "co-video"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-video.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-video.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Video source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            },
+            "poster": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Poster/thumbnail image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "poster",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "MIME type hint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "''"
+            },
+            "preload": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'metadata' | 'auto'",
+                    "resolved": "\"auto\" | \"metadata\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preload behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preload",
+                "defaultValue": "'metadata'"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-start playback (requires muted for browser autoplay)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loop playback"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "false"
+            },
+            "muted": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muted state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "muted",
+                "defaultValue": "false"
+            },
+            "volume": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial volume (0-1)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "volume",
+                "defaultValue": "1"
+            },
+            "currentTime": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current playback position in seconds (enables resume)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-time",
+                "defaultValue": "0"
+            },
+            "playbackRate": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Playback speed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "playback-rate",
+                "defaultValue": "1"
+            },
+            "playbackRates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available playback speeds (JSON array string)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "playback-rates",
+                "defaultValue": "'[0.5, 0.75, 1, 1.25, 1.5, 2]'"
+            },
+            "controls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Master toggle for custom control bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "controls",
+                "defaultValue": "true"
+            },
+            "showPlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show play/pause button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-play",
+                "defaultValue": "true"
+            },
+            "showVolume": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show volume controls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-volume",
+                "defaultValue": "true"
+            },
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show progress/seek bar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "true"
+            },
+            "showTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show time display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-time",
+                "defaultValue": "true"
+            },
+            "showFullscreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show fullscreen button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-fullscreen",
+                "defaultValue": "true"
+            },
+            "showSpeed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show playback speed selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-speed",
+                "defaultValue": "false"
+            },
+            "showPip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show Picture-in-Picture button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-pip",
+                "defaultValue": "false"
+            },
+            "showDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show download button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-download",
+                "defaultValue": "false"
+            },
+            "allowDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable download functionality"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-download",
+                "defaultValue": "false"
+            },
+            "aspectRatio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'16:9' | '4:3' | '1:1' | '21:9' | 'auto'",
+                    "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"4:3\" | \"auto\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Container aspect ratio"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aspect-ratio",
+                "defaultValue": "'16:9'"
+            },
+            "rounded": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border radius"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rounded",
+                "defaultValue": "'lg'"
+            },
+            "controlsAutoHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-hide controls after inactivity"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "controls-auto-hide",
+                "defaultValue": "true"
+            },
+            "controlsAutoHideDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds before controls hide"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "controls-auto-hide-delay",
+                "defaultValue": "3000"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "watchThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Progress percentage (0-100) that triggers coThresholdReached. 0 = disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "watch-threshold",
+                "defaultValue": "0"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "VideoLang",
+                    "resolved": "\"en\" | \"es\" | \"pt\"",
+                    "references": {
+                        "VideoLang": {
+                            "location": "global",
+                            "id": "global::VideoLang"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language for labels and aria attributes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPlaying": {},
+            "internalCurrentTime": {},
+            "duration": {},
+            "buffered": {},
+            "volumeLevel": {},
+            "isMuted": {},
+            "isFullscreen": {},
+            "internalPlaybackRate": {},
+            "isLoading": {},
+            "showControlBar": {},
+            "hasError": {},
+            "errorMessage": {},
+            "showSpeedMenu": {},
+            "isPip": {},
+            "thresholdFired": {},
+            "hasStarted": {},
+            "isSeeking": {},
+            "showVolumeSlider": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coPlay",
+                "name": "coPlay",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coPause",
+                "name": "coPause",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coEnded",
+                "name": "coEnded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coReady",
+                "name": "coReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ duration: number }",
+                    "resolved": "{ duration: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coError",
+                "name": "coError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ code: number; message: string }",
+                    "resolved": "{ code: number; message: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coTimeUpdate",
+                "name": "coTimeUpdate",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ currentTime: number; duration: number; progressPercent: number }",
+                    "resolved": "{ currentTime: number; duration: number; progressPercent: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coSeeked",
+                "name": "coSeeked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ from: number; to: number }",
+                    "resolved": "{ from: number; to: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coVolumeChange",
+                "name": "coVolumeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ volume: number; muted: boolean }",
+                    "resolved": "{ volume: number; muted: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coFullscreenChange",
+                "name": "coFullscreenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ fullscreen: boolean }",
+                    "resolved": "{ fullscreen: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coPlaybackRateChange",
+                "name": "coPlaybackRateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ rate: number }",
+                    "resolved": "{ rate: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coPipChange",
+                "name": "coPipChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ pip: boolean }",
+                    "resolved": "{ pip: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coDownload",
+                "name": "coDownload",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ src: string }",
+                    "resolved": "{ src: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coThresholdReached",
+                "name": "coThresholdReached",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ threshold: number; currentTime: number; duration: number }",
+                    "resolved": "{ threshold: number; currentTime: number; duration: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "play": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "pause": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "togglePlay": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "seek": {
+                "complexType": {
+                    "signature": "(time: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "time",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setVolume": {
+                "complexType": {
+                    "signature": "(level: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "level",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleMute": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleFullscreen": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "togglePip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "src",
+                "methodName": "onSrcChange"
+            }, {
+                "propName": "muted",
+                "methodName": "onMutedChange"
+            }, {
+                "propName": "volume",
+                "methodName": "onVolumeChange"
+            }, {
+                "propName": "currentTime",
+                "methodName": "onCurrentTimeChange"
+            }, {
+                "propName": "playbackRate",
+                "methodName": "onPlaybackRateChange"
+            }, {
+                "propName": "playbackRates",
+                "methodName": "onPlaybackRatesChange"
+            }];
+    }
+}