@kaushal-satani-aipxperts/player-angular 0.4.1 → 0.4.2

package/dist/web-component/src/index.js

@@ -1,2191 +0,0 @@
-import { UvpPlayerCore, cacheVideo, isCached, removeCachedVideo } from "@kaushal-satani-aipxperts/player-core";
-import { icons } from "feather-icons";
-const DEFAULT_TAG = "uvp-player";
-const OBSERVED_ATTRIBUTES = [
-    "source-url",
-    "source-type",
-    "source-qualities",
-    "autoplay",
-    "muted",
-    "poster",
-    "controls",
-    "auto-next",
-    "loop",
-    "playback-rate",
-    "volume",
-    "custom-controls",
-    "playlist",
-    "scale-mode"
-];
-/**
- * Universal Video Player custom element.
- *
- * Provides a framework-agnostic video player with support for MP4, HLS, and DASH,
- * including offline caching and custom UI controls.
- *
- * @example
- * <uvp-player source-url="https://example.com/video.mp4"></uvp-player>
- */
-export class UvpPlayerElement extends HTMLElement {
-    static get observedAttributes() {
-        return [...OBSERVED_ATTRIBUTES];
-    }
-    constructor() {
-        super();
-        this.cleanupCallbacks = [];
-        this.isCustomControlsMode = false;
-        this.showControls = true;
-        this.isUserSeeking = false;
-        this.controlsHideTimer = null;
-        this.isFullscreen = false;
-        this.isInteractionActive = true;
-        this.isLocked = false;
-        this.progressRafId = null;
-        this.lastStableDuration = 0;
-        this.handleDocumentClick = (event) => {
-            const target = event.target;
-            const isInsidePlayer = this.contains(target);
-            if (!isInsidePlayer) {
-                this.closeSettingsMenu();
-                this.playlistPanel.classList.remove("open");
-            }
-        };
-        this.handleVideoProgress = () => {
-            let duration = this.videoEl.duration;
-            // Stabilize duration: different quality levels in HLS/DASH can have slightly different
-            // reported durations. We "lock" to the maximum seen duration for the current source
-            // to prevent the progress bar from jittering during quality transitions.
-            if (Number.isFinite(duration) && duration > 0) {
-                if (duration > this.lastStableDuration) {
-                    this.lastStableDuration = duration;
-                }
-                else {
-                    duration = this.lastStableDuration;
-                }
-            }
-            else if (this.lastStableDuration > 0) {
-                duration = this.lastStableDuration;
-            }
-            else {
-                duration = 0;
-            }
-            const current = this.videoEl.currentTime || 0;
-            const playedPercent = duration > 0 ? (current / duration) * 100 : 0;
-            if (!this.isUserSeeking && duration > 0) {
-                this.progressInput.value = String(playedPercent);
-            }
-            this.updateProgressVisual(playedPercent);
-            this.progressBufferedEl.style.width = `${this.getBufferedPercent(duration, current)}%`;
-            this.currentTimeEl.textContent = this.formatTime(current);
-            this.durationEl.textContent = this.formatTime(duration);
-        };
-        this.handleQualityUiRefresh = () => {
-            this.refreshQualityUi();
-        };
-        this.handlePlayStateChange = () => {
-            const paused = this.videoEl.paused;
-            this.setButtonIcon(this.controlPlayPauseButton, paused ? "play" : "pause");
-            this.controlPlayPauseButton.setAttribute("aria-label", paused ? "Play" : "Pause");
-            if (paused) {
-                this.stopProgressLoop();
-            }
-            else {
-                this.startProgressLoop();
-            }
-            this.markInteraction();
-            this.updateNavigationButtons();
-        };
-        this.handleVolumeChange = () => {
-            const muted = this.videoEl.muted || this.videoEl.volume === 0;
-            this.setButtonIcon(this.muteButton, muted ? "volume-x" : "volume-2");
-            this.muteButton.setAttribute("aria-label", muted ? "Unmute" : "Mute");
-            const displayVolume = muted ? 0 : (this.videoEl.volume ?? 0);
-            this.volumeInput.value = String(displayVolume);
-            // Update track background for custom fill look
-            const percent = displayVolume * 100;
-            this.volumeInput.style.background = `linear-gradient(to right, var(--uvp-accent) 0%, var(--uvp-accent) ${percent}%, rgba(255, 255, 255, 0.2) ${percent}%, rgba(255, 255, 255, 0.2) 100%)`;
-        };
-        this.handleFullscreenChange = () => {
-            const fsEl = document.fullscreenElement ||
-                document.webkitFullscreenElement ||
-                document.mozFullScreenElement ||
-                document.msFullscreenElement;
-            this.isFullscreen = Boolean(fsEl);
-            this.setButtonIcon(this.fullscreenButton, this.isFullscreen ? "minimize" : "maximize");
-            this.fullscreenButton.setAttribute("aria-label", this.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
-        };
-        this.isProcessingFullscreen = false;
-        this.handleKeyDown = (event) => {
-            // Ignore if user is typing in an input or textarea
-            const target = event.target;
-            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
-                return;
-            }
-            // Only handle shortcuts if the player is visible or was recently interacted with
-            // For a more robust implementation, we could check if the player is in view.
-            switch (event.code) {
-                case "Space":
-                    event.preventDefault();
-                    if (this.videoEl.paused)
-                        void this.play();
-                    else
-                        this.pause();
-                    break;
-                case "ArrowRight":
-                    event.preventDefault();
-                    this.seek(this.videoEl.currentTime + 10);
-                    break;
-                case "ArrowLeft":
-                    event.preventDefault();
-                    this.seek(this.videoEl.currentTime - 10);
-                    break;
-                case "ArrowUp":
-                    event.preventDefault();
-                    this.setVolume(this.videoEl.volume + 0.1);
-                    if (this.videoEl.muted)
-                        this.core.setMuted(false);
-                    this.handleVolumeChange();
-                    this.markInteraction();
-                    break;
-                case "ArrowDown":
-                    event.preventDefault();
-                    this.setVolume(this.videoEl.volume - 0.1);
-                    this.handleVolumeChange();
-                    this.markInteraction();
-                    break;
-                case "KeyF":
-                    event.preventDefault();
-                    this.toggleFullscreen();
-                    break;
-                case "KeyM":
-                    event.preventDefault();
-                    this.core.setMuted(!this.videoEl.muted);
-                    this.handleVolumeChange();
-                    break;
-                case "Escape":
-                    if (this.isFullscreen) {
-                        event.preventDefault();
-                        this.toggleFullscreen();
-                    }
-                    break;
-            }
-        };
-        this.markInteraction = () => {
-            if (this.isCustomControlsMode || !this.showControls)
-                return;
-            this.shellEl.classList.remove("ui-hidden");
-            this.clearHideTimer();
-            if (this.videoEl.paused)
-                return;
-            this.controlsHideTimer = window.setTimeout(() => {
-                this.shellEl.classList.add("ui-hidden");
-                this.closeSettingsMenu();
-            }, 2200);
-        };
-        this.shadowRootRef = this.attachShadow({ mode: "open" });
-        this.shadowRootRef.innerHTML = `
-      <style>
-        * {
-          box-sizing: border-box;
-        }
-
-        :host {
-          display: block;
-          width: 100%;
-          height: 100%;
-          min-width: 100%;
-          min-height: 100%;
-          --uvp-bg: #2A2F35;
-          --uvp-control-bg: rgba(96, 21, 107, 0.85);
-          --uvp-text: #FFFFFF;
-          --uvp-accent: #A400BC;
-          --uvp-accent-2: #4664E1;
-          --uvp-accent-3: #00D17F;
-          --uvp-border: rgba(255, 255, 255, 0.15);
-          --uvp-radius: 14px;
-        }
-
-        .shell {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background: #000;
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 12px;
-          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
-          border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        :host(:fullscreen) .shell,
-        :host(:-webkit-full-screen) .shell,
-        :host(:-moz-full-screen) .shell,
-        .shell:fullscreen,
-        .shell:-webkit-full-screen,
-        .shell:-moz-full-screen {
-          width: 100vw;
-          height: 100vh;
-          border-radius: 0;
-          border: none;
-          max-width: none;
-          max-height: none;
-        }
-
-        .settings-wrap {
-          position: relative;
-          display: flex;
-          align-items: center;
-        }
-
-        .settings-menu {
-          position: absolute;
-          bottom: calc(100% + 12px);
-          right: -20px;
-          background: rgba(15, 15, 15, 0.98);
-          border: 1px solid rgba(255, 255, 255, 0.1);
-          border-radius: 12px;
-          width: 220px;
-          max-height: 350px;
-          overflow-y: auto;
-          padding: 6px;
-          display: flex;
-          flex-direction: column;
-          z-index: 10;
-          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
-          transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
-          transform-origin: bottom right;
-        }
-
-        .settings-menu.hidden {
-          display: none;
-          opacity: 0;
-          transform: scale(0.95);
-        }
-
-        .menu-screen {
-          display: flex;
-          flex-direction: column;
-          gap: 2px;
-        }
-
-        .menu-header {
-          display: flex;
-          align-items: center;
-          padding: 6px 8px;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          margin-bottom: 4px;
-        }
-
-        .menu-back {
-          background: transparent !important;
-          border: none !important;
-          color: var(--uvp-text);
-          cursor: pointer;
-          padding: 0;
-          margin-right: 8px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 50%;
-          width: 24px;
-          height: 24px;
-          box-shadow: none !important;
-        }
-
-        .menu-back:hover {
-          background: rgba(255, 255, 255, 0.1) !important;
-        }
-
-        .menu-title {
-          font-weight: 600;
-          font-size: 13px;
-        }
-
-        .settings-item {
-          border: none !important;
-          background: transparent !important;
-          color: var(--uvp-text);
-          border-radius: 6px;
-          min-height: 32px;
-          height: auto !important;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 8px;
-          font: 12px/1 'Outfit', Inter, system-ui, sans-serif;
-          transition: background 150ms ease;
-          cursor: pointer;
-        }
-
-        .settings-item:hover {
-          background: rgba(255, 255, 255, 0.1);
-        }
-
-        .settings-item .item-left {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-        }
-
-        .settings-item .item-right {
-          display: flex;
-          align-items: center;
-          gap: 6px;
-          color: rgba(255, 255, 255, 0.5);
-          font-size: 12px;
-        }
-
-        .settings-item svg {
-          opacity: 0.7;
-        }
-
-        /* Mobile Bottom Sheet */
-
-
-        /* Toggle Switch Styles */
-        .switch {
-          position: relative;
-          display: inline-block;
-          width: 34px;
-          height: 20px;
-          pointer-events: none;
-        }
-
-        .switch input {
-          opacity: 0;
-          width: 0;
-          height: 0;
-        }
-
-        .slider {
-          position: absolute;
-          cursor: pointer;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background-color: rgba(255, 255, 255, 0.2);
-          transition: .3s;
-          border-radius: 34px;
-        }
-
-        .slider:before {
-          position: absolute;
-          content: "";
-          height: 14px;
-          width: 14px;
-          left: 3px;
-          bottom: 3px;
-          background-color: white;
-          transition: .3s;
-          border-radius: 50%;
-        }
-
-        input:checked + .slider {
-          background-color: var(--uvp-accent);
-        }
-
-        input:checked + .slider:before {
-          transform: translateX(14px);
-        }
-
-        /* Playlist Panel */
-        .playlist-panel {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          width: 320px;
-          background: #1a1a1a;
-          border-left: 1px solid rgba(255, 255, 255, 0.1);
-          z-index: 100;
-          transform: translateX(100%);
-          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          display: flex;
-          flex-direction: column;
-          box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
-          pointer-events: auto;
-        }
-
-        .playlist-panel.open {
-          transform: translateX(0);
-        }
-
-        .playlist-header {
-          padding: 20px;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-
-        .playlist-header h3 {
-          margin: 0;
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--uvp-text);
-        }
-
-        .playlist-close {
-          background: transparent;
-          border: none;
-          color: rgba(255, 255, 255, 0.5);
-          cursor: pointer;
-          padding: 4px;
-          transition: color 0.2s;
-        }
-
-        .playlist-close:hover {
-          color: var(--uvp-text);
-        }
-
-        .playlist-items {
-          flex: 1;
-          overflow-y: auto;
-          padding: 8px 0;
-        }
-
-        /* Custom Scrollbar for Playlist */
-        .playlist-items::-webkit-scrollbar {
-          width: 6px;
-        }
-        .playlist-items::-webkit-scrollbar-track {
-          background: transparent;
-        }
-        .playlist-items::-webkit-scrollbar-thumb {
-          background: rgba(255, 255, 255, 0.1);
-          border-radius: 3px;
-        }
-        .playlist-items::-webkit-scrollbar-thumb:hover {
-          background: rgba(255, 255, 255, 0.2);
-        }
-
-        .playlist-item {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          padding: 12px 20px;
-          cursor: pointer;
-          transition: background 0.2s;
-          border-left: 3px solid transparent;
-        }
-
-        .playlist-item:hover {
-          background: rgba(255, 255, 255, 0.05);
-        }
-
-        .playlist-item.active {
-          background: rgba(164, 0, 188, 0.15);
-          border-left-color: var(--uvp-accent);
-        }
-
-        .playlist-item-thumb {
-          width: 80px;
-          height: 45px;
-          background: #333;
-          border-radius: 4px;
-          overflow: hidden;
-          flex-shrink: 0;
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .playlist-item-thumb::after {
-          content: '';
-          display: block;
-          width: 20px;
-          height: 20px;
-          background: rgba(255, 255, 255, 0.1);
-          border-radius: 50%;
-        }
-
-        .playlist-item-thumb img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-          z-index: 2;
-        }
-
-        .playlist-item-info {
-          flex: 1;
-          min-width: 0;
-        }
-
-        .playlist-item-title {
-          font-size: 14px;
-          font-weight: 500;
-          color: var(--uvp-text);
-          margin-bottom: 2px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .playlist-item-meta {
-          font-size: 12px;
-          color: rgba(255, 255, 255, 0.5);
-        }
-
-        .playlist-item.active .playlist-item-title {
-          color: var(--uvp-accent);
-        }
-
-        video {
-          width: 100%;
-          height: 100%;
-          display: block;
-          background: #000;
-          transition: object-fit 0.3s ease;
-        }
-
-        .shell.scale-fit video {
-          object-fit: contain;
-        }
-        .shell.scale-fill video {
-          object-fit: fill;
-        }
-        .shell.scale-zoom video {
-          object-fit: cover;
-        }
-
-        .center-actions {
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          display: flex;
-          align-items: center;
-          gap: 16px;
-          transition: opacity 200ms ease;
-        }
-
-        .center-actions button {
-          width: 64px;
-          height: 64px;
-          border-radius: 999px;
-          border: none;
-          background: transparent;
-          color: #FFFFFF;
-          display: grid;
-          place-items: center;
-          cursor: pointer;
-          transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
-        }
-
-        .center-actions button:hover:not(:disabled) {
-          transform: scale(1.1);
-          background: rgba(255, 255, 255, 0.15);
-        }
-
-        .center-actions button:active:not(:disabled) {
-          transform: scale(0.95);
-        }
-
-        .center-actions .center-play-pause {
-          width: 80px;
-          height: 80px;
-          background: linear-gradient(135deg, #A400BC 0%, #60156B 100%);
-          border: 2px solid rgba(255, 255, 255, 0.4);
-          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-        }
-
-        .center-actions .center-play-pause:hover:not(:disabled) {
-          background: linear-gradient(135deg, #D54DE8 0%, #A400BC 100%);
-          box-shadow: 0 6px 20px rgba(164, 0, 188, 0.4);
-        }
-
-        .center-actions button svg,
-        .icon-btn svg {
-          width: 24px;
-          height: 24px;
-          stroke: currentColor;
-          display: block;
-          margin: 0 auto;
-        }
-
-        .center-actions .center-play-pause svg {
-          width: 32px;
-          height: 32px;
-        }
-
-        .center-actions button:disabled,
-        .controls-row button:disabled {
-          opacity: 0.35;
-          cursor: not-allowed;
-          pointer-events: none;
-        }
-
-        .controls {
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          padding: 16px;
-          background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-          transition: opacity 250ms ease;
-        }
-
-        .top-overlay {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: 80px;
-          background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
-          z-index: 6;
-          transition: opacity 250ms ease;
-          pointer-events: none;
-        }
-
-        .top-controls {
-          position: absolute;
-          top: 0;
-          right: 0;
-          padding: 12px 20px;
-          display: flex;
-          gap: 12px;
-          z-index: 7;
-          color: var(--uvp-text);
-          transition: opacity 250ms ease;
-        }
-
-        .shell.ui-hidden .top-overlay,
-        .shell.ui-hidden .top-controls {
-          opacity: 0;
-          pointer-events: none;
-        }
-
-        .shell.locked .controls,
-        .shell.locked .playlist-panel,
-        .shell.locked .settings-wrap,
-        .shell.locked .playlist-toggle,
-        .shell.locked .aspect-shortcut {
-          display: none !important;
-        }
-
-        .controls-row {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          color: var(--uvp-text);
-          font: 14px/1.2 'Outfit', Inter, system-ui, sans-serif;
-        }
-
-        .controls-row button,
-        .controls-row select,
-        .top-controls button {
-          border-radius: 10px;
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          background: rgba(96, 21, 107, 0.4);
-          color: var(--uvp-text);
-          height: 36px;
-          padding: 0 12px;
-          cursor: pointer;
-          transition: all 200ms ease;
-        }
-
-        .icon-btn {
-          width: 40px;
-          min-width: 40px;
-          height: 40px;
-          border: none !important;
-          background: transparent !important;
-          box-shadow: none;
-          padding: 0;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 999px !important;
-        }
-
-        .icon-btn:hover {
-          background: rgba(255, 255, 255, 0.15) !important;
-          transform: translateY(-1px);
-        }
-
-        .icon-btn:active {
-          transform: translateY(0);
-        }
-
-        .speed-wrap {
-          position: relative;
-        }
-
-        .speed-button {
-          border: none !important;
-          background: transparent !important;
-          color: var(--uvp-text);
-          font-weight: 700;
-          min-width: 40px;
-          height: 36px !important;
-          padding: 0 8px !important;
-          border-radius: 8px !important;
-        }
-
-        .speed-button:hover {
-          background: rgba(255, 255, 255, 0.15) !important;
-        }
-
-        .speed-list, .quality-list {
-          display: flex;
-          flex-direction: column;
-          gap: 2px;
-          padding: 4px;
-        }
-
-        .speed-item, .quality-item, .aspect-item {
-          border: none !important;
-          background: transparent !important;
-          color: var(--uvp-text);
-          border-radius: 6px;
-          min-height: 32px;
-          height: auto !important;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 8px;
-          font: 12px/1 'Outfit', Inter, system-ui, sans-serif;
-          transition: all 150ms ease;
-          cursor: pointer;
-          width: 100%;
-          text-align: left;
-        }
-
-        .speed-item:hover, .quality-item:hover, .aspect-item:hover {
-          background: rgba(255, 255, 255, 0.08) !important;
-        }
-
-        .speed-item.active, .quality-item.active, .aspect-item.active {
-          color: var(--uvp-accent);
-          font-weight: 600;
-          background: rgba(164, 0, 188, 0.1) !important;
-        }
-
-        .speed-item .check, .quality-item .check, .aspect-item .check {
-          width: 18px;
-          height: 18px;
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          opacity: 0;
-          flex-shrink: 0;
-          stroke: currentColor;
-        }
-
-        .speed-item.active .check, .quality-item.active .check, .aspect-item.active .check {
-          opacity: 1;
-        }
-
-        .spacer {
-          flex: 1;
-        }
-
-        .controls-row input[type="range"] {
-          accent-color: var(--uvp-accent);
-        }
-
-        .progress-wrap {
-          position: relative;
-          flex: 1;
-          height: 20px;
-          display: flex;
-          align-items: center;
-          overflow: visible;
-          margin: 0 12px;
-        }
-
-        .progress-track,
-        .progress-buffered,
-        .progress-played {
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: 6px;
-          border-radius: 999px;
-        }
-
-        .progress-track {
-          background: rgba(255, 255, 255, 0.2);
-          z-index: 1;
-        }
-
-        .progress-buffered {
-          width: 0%;
-          right: auto;
-          background: rgba(255, 255, 255, 0.4);
-          transition: width 240ms linear;
-          z-index: 2;
-        }
-
-        .progress-played {
-          width: 0%;
-          right: auto;
-          background: linear-gradient(90deg, #A400BC 0%, #D54DE8 100%);
-          transition: width 90ms linear;
-          z-index: 3;
-        }
-
-
-        .progress-thumb {
-          position: absolute;
-          top: 50%;
-          left: 0%;
-          width: 16px;
-          height: 16px;
-          border-radius: 999px;
-          background: #FFFFFF;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(164, 0, 188, 0.3);
-          transform: translate(-50%, -50%);
-          transition: left 90ms linear, transform 150ms ease;
-          z-index: 4;
-          pointer-events: none;
-        }
-
-        /* Removed hover scaling from progress thumb */
-
-        .progress {
-          position: absolute;
-          inset: 0;
-          width: 100%;
-          margin: 0;
-          -webkit-appearance: none;
-          appearance: none;
-          background: transparent;
-          cursor: pointer;
-          z-index: 5;
-        }
-
-        .progress::-webkit-slider-runnable-track {
-          height: 20px;
-          background: transparent;
-        }
-
-        .progress::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          appearance: none;
-          width: 20px;
-          height: 20px;
-          background: transparent;
-        }
-
-        .volume {
-          width: 70px;
-          height: 4px;
-          -webkit-appearance: none;
-          appearance: none;
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 999px;
-          outline: none;
-        }
-
-        .volume::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          appearance: none;
-          width: 12px;
-          height: 12px;
-          background: var(--uvp-accent);
-          border-radius: 50%;
-          cursor: pointer;
-          border: 2px solid #fff;
-          box-shadow: 0 0 5px rgba(0,0,0,0.3);
-          transition: transform 150ms ease;
-        }
-
-        .volume::-moz-range-thumb {
-          width: 12px;
-          height: 12px;
-          background: var(--uvp-accent);
-          border-radius: 50%;
-          cursor: pointer;
-          border: 2px solid #fff;
-          box-shadow: 0 0 5px rgba(0,0,0,0.3);
-        }
-
-        .spacer {
-          flex: 1;
-        }
-
-        .time {
-          min-width: 50px;
-          text-align: center;
-          font-variant-numeric: tabular-nums;
-          font-weight: 500;
-        }
-
-        .hidden {
-          display: none !important;
-        }
-
-        .shell.ui-hidden .controls,
-        .shell.ui-hidden .center-actions {
-          opacity: 0;
-          pointer-events: none;
-        }
-
-        @media (max-width: 600px) {
-          .settings-menu {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            width: 100%;
-            max-height: 70vh;
-            border-radius: 24px 24px 0 0;
-            padding: 16px 8px 32px 8px;
-            transform-origin: bottom center;
-          }
-
-          .settings-menu.hidden {
-            transform: translateY(100%);
-          }
-
-          .settings-wrap {
-            position: static;
-          }
-
-          .settings-scrim {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(4px);
-            z-index: 9;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
-          }
-
-          .settings-scrim.visible {
-            opacity: 1;
-            pointer-events: auto;
-          }
-
-          .mute, .volume {
-            display: none !important;
-          }
-
-          .time {
-            font-size: 11px;
-            min-width: 36px;
-          }
-
-          .progress-wrap {
-            margin: 0 12px;
-          }
-
-          .controls-row {
-            gap: 0px;
-          }
-
-          .controls {
-            gap: 4px;
-            padding: 12px;
-          }
-
-          /* Mobile Playlist Bottom Sheet */
-          .playlist-panel {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            top: auto;
-            width: 100%;
-            height: auto;
-            background: rgba(15, 15, 15, 0.98);
-            border-radius: 24px 24px 0 0;
-            transform: translateY(100%);
-            border-left: none;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            z-index: 1000;
-          }
-
-          .playlist-panel.open {
-            transform: translateY(0);
-          }
-
-          .playlist-header {
-            padding: 12px 20px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-          }
-
-          .playlist-header h3 {
-            font-size: 14px;
-          }
-
-          .playlist-items {
-            display: flex;
-            flex-direction: row;
-            overflow-x: auto;
-            padding: 16px 20px 24px 20px;
-            gap: 16px;
-            scroll-snap-type: x mandatory;
-            scroll-padding: 0 20px;
-            -webkit-overflow-scrolling: touch;
-          }
-
-          .playlist-items::-webkit-scrollbar {
-            display: none;
-          }
-
-          .playlist-item {
-            flex-direction: column;
-            width: 140px;
-            padding: 0;
-            background: transparent;
-            border-left: none;
-            border-bottom: 3px solid transparent;
-            align-items: flex-start;
-            gap: 8px;
-            flex-shrink: 0;
-            scroll-snap-align: start;
-          }
-
-          .playlist-item.active {
-            background: transparent;
-            border-left-color: transparent;
-            border-bottom-color: var(--uvp-accent);
-          }
-
-          .playlist-item-thumb {
-            width: 100%;
-            height: 78px;
-            border-radius: 8px;
-          }
-
-          .playlist-item-info {
-            padding: 2px 4px;
-          }
-
-          .playlist-item-title {
-            font-size: 12px;
-            white-space: normal;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            line-height: 1.3;
-          }
-
-          .playlist-item-meta {
-            font-size: 10px;
-            margin-top: 2px;
-          }
-        }
-      </style>
-      <div class="shell">
-        <video part="video"></video>
-        <div class="top-overlay"></div>
-        <div class="top-controls">
-          <button class="aspect-shortcut icon-btn" part="aspect-shortcut" aria-label="Cycle Aspect Ratio"></button>
-          <button class="lock-button icon-btn" part="lock-button" aria-label="Lock controls"></button>
-        </div>
-        <div class="playlist-panel" part="playlist-panel">
-          <div class="playlist-header">
-            <h3>Playlist</h3>
-            <button class="playlist-close" aria-label="Close playlist"></button>
-          </div>
-          <div class="playlist-items" part="playlist-items"></div>
-        </div>
-        <div class="center-actions" part="center-actions">
-          <!-- Center buttons removed/moved to bottom bar -->
-        </div>
-        <div class="controls" part="controls">
-          <div class="controls-row">
-            <span class="time current-time">0:00</span>
-            <div class="progress-wrap" part="progress-wrap">
-              <div class="progress-track"></div>
-              <div class="progress-buffered"></div>
-              <div class="progress-played"></div>
-              <div class="progress-thumb"></div>
-              <input class="progress" part="progress" type="range" min="0" max="100" step="0.1" value="0" />
-            </div>
-            <span class="time duration">0:00</span>
-          </div>
-          <div class="controls-row">
-            <button class="control-prev icon-btn" part="control-prev" aria-label="Previous"></button>
-            <button class="control-play-pause icon-btn" part="control-play-pause" aria-label="Play"></button>
-            <button class="control-next icon-btn" part="control-next" aria-label="Next"></button>
-            <button part="mute" class="mute icon-btn" aria-label="Mute"></button>
-            <input class="volume" part="volume" type="range" min="0" max="1" step="0.05" value="1" />
-            <span class="spacer"></span>
-            <div class="settings-scrim"></div>
-            <div class="settings-wrap">
-              <button part="settings" class="settings-button icon-btn" aria-label="Settings" aria-expanded="false"></button>
-              <div class="settings-menu hidden" part="settings-menu">
-                <!-- Main Screen -->
-                <div class="menu-screen" data-screen="main">
-                  <div class="settings-item" data-action="quality-screen">
-                    <div class="item-left">
-                      <span class="icon-quality"></span>
-                      <span>Quality</span>
-                    </div>
-                    <div class="item-right">
-                      <span class="current-quality-value">Auto</span>
-                      <span class="icon-chevron-right"></span>
-                    </div>
-                  </div>
-                  <div class="settings-item" data-action="speed-screen">
-                    <div class="item-left">
-                      <span class="icon-speed"></span>
-                      <span>Playback Speed</span>
-                    </div>
-                    <div class="item-right">
-                      <span class="current-speed-value">1x</span>
-                      <span class="icon-chevron-right"></span>
-                    </div>
-                  </div>
-                  <div class="settings-item" data-action="aspect-screen">
-                    <div class="item-left">
-                      <span class="icon-aspect"></span>
-                      <span>Aspect Ratio</span>
-                    </div>
-                    <div class="item-right">
-                      <span class="current-aspect-value">Fit</span>
-                      <span class="icon-chevron-right"></span>
-                    </div>
-                  </div>
-                  <div class="settings-item" data-action="autoplay">
-                    <div class="item-left">
-                      <span class="icon-play"></span>
-                      <span>Auto Play</span>
-                    </div>
-                    <label class="switch">
-                      <input type="checkbox" class="autoplay-toggle">
-                      <span class="slider"></span>
-                    </label>
-                  </div>
-                  <div class="settings-item" data-action="loop">
-                    <div class="item-left">
-                      <span class="icon-repeat"></span>
-                      <span>Loop</span>
-                    </div>
-                    <label class="switch">
-                      <input type="checkbox" class="loop-toggle">
-                      <span class="slider"></span>
-                    </label>
-                  </div>
-                  <div class="settings-item" data-action="download">
-                    <div class="item-left">
-                      <span class="download-icon"></span>
-                      <span class="download-text">Download</span>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Quality Screen -->
-                <div class="menu-screen hidden" data-screen="quality">
-                  <div class="menu-header">
-                    <button class="menu-back" data-target="main">
-                      <span class="icon-arrow-left"></span>
-                    </button>
-                    <span class="menu-title">Quality</span>
-                  </div>
-                  <div class="quality-list"></div>
-                </div>
-
-                <!-- Speed Screen -->
-                <div class="menu-screen hidden" data-screen="speed">
-                  <div class="menu-header">
-                    <button class="menu-back" data-target="main">
-                      <span class="icon-arrow-left"></span>
-                    </button>
-                    <span class="menu-title">Playback Speed</span>
-                  </div>
-                  <div class="speed-list">
-                    <button class="speed-item" data-rate="0.5"><span>0.5x</span><span class="check"></span></button>
-                    <button class="speed-item active" data-rate="1"><span>1x</span><span class="check"></span></button>
-                    <button class="speed-item" data-rate="1.5"><span>1.5x</span><span class="check"></span></button>
-                    <button class="speed-item" data-rate="2"><span>2x</span><span class="check"></span></button>
-                  </div>
-                </div>
-
-                <!-- Aspect Screen -->
-                <div class="menu-screen hidden" data-screen="aspect">
-                  <div class="menu-header">
-                    <button class="menu-back" data-target="main">
-                      <span class="icon-arrow-left"></span>
-                    </button>
-                    <span class="menu-title">Aspect Ratio</span>
-                  </div>
-                  <div class="aspect-list">
-                    <button class="aspect-item" data-mode="fit"><span>Fit</span><span class="check"></span></button>
-                    <button class="aspect-item" data-mode="fill"><span>Stretch</span><span class="check"></span></button>
-                    <button class="aspect-item" data-mode="zoom"><span>Zoom</span><span class="check"></span></button>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button part="playlist-toggle" class="playlist-toggle icon-btn hidden" aria-label="Show playlist"></button>
-            <button part="fullscreen" class="fullscreen icon-btn" aria-label="Enter fullscreen"></button>
-          </div>
-        </div>
-        <slot name="controls" class="hidden"></slot>
-      </div>
-    `;
-        this.shellEl = this.shadowRootRef.querySelector(".shell");
-        this.videoEl = this.shadowRootRef.querySelector("video");
-        this.centerActionsEl = this.shadowRootRef.querySelector(".center-actions");
-        this.controlPrevButton = this.shadowRootRef.querySelector(".control-prev");
-        this.controlPlayPauseButton = this.shadowRootRef.querySelector(".control-play-pause");
-        this.controlNextButton = this.shadowRootRef.querySelector(".control-next");
-        this.progressPlayedEl = this.shadowRootRef.querySelector(".progress-played");
-        this.progressBufferedEl = this.shadowRootRef.querySelector(".progress-buffered");
-        this.progressThumbEl = this.shadowRootRef.querySelector(".progress-thumb");
-        this.controlsEl = this.shadowRootRef.querySelector(".controls");
-        this.progressInput = this.shadowRootRef.querySelector(".progress");
-        this.currentTimeEl = this.shadowRootRef.querySelector(".current-time");
-        this.durationEl = this.shadowRootRef.querySelector(".duration");
-        this.muteButton = this.shadowRootRef.querySelector(".mute");
-        this.volumeInput = this.shadowRootRef.querySelector(".volume");
-        this.settingsScrim = this.shadowRootRef.querySelector(".settings-scrim");
-        this.settingsWrap = this.shadowRootRef.querySelector(".settings-wrap");
-        this.settingsButton = this.shadowRootRef.querySelector(".settings-button");
-        this.settingsMenu = this.shadowRootRef.querySelector(".settings-menu");
-        this.settingsMainScreen = this.shadowRootRef.querySelector('[data-screen="main"]');
-        this.settingsQualityScreen = this.shadowRootRef.querySelector('[data-screen="quality"]');
-        this.settingsAspectScreen = this.shadowRootRef.querySelector('[data-screen="aspect"]');
-        this.settingsDownloadScreen = this.shadowRootRef.querySelector('[data-screen="download"]');
-        this.fullscreenButton = this.shadowRootRef.querySelector(".fullscreen");
-        this.autoplayToggle = this.shadowRootRef.querySelector(".autoplay-toggle");
-        this.loopToggle = this.shadowRootRef.querySelector(".loop-toggle");
-        this.playlistButton = this.shadowRootRef.querySelector(".playlist-toggle");
-        this.playlistPanel = this.shadowRootRef.querySelector(".playlist-panel");
-        this.playlistCloseButton = this.shadowRootRef.querySelector(".playlist-close");
-        this.playlistItemsContainer = this.shadowRootRef.querySelector(".playlist-items");
-        this.lockButton = this.shadowRootRef.querySelector(".lock-button");
-        this.aspectShortcut = this.shadowRootRef.querySelector(".aspect-shortcut");
-        this.slotEl = this.shadowRootRef.querySelector('slot[name="controls"]');
-        this.isCustomControlsMode = this.readBooleanAttr("custom-controls", false);
-        this.showControls = this.readBooleanAttr("controls", true);
-        this.core = new UvpPlayerCore(this.readConfigFromAttributes());
-        this.core.attachMediaElement(this.videoEl);
-        this.bindUiEvents();
-        this.updateUiVisibility();
-        this.refreshDownloadUi();
-    }
-    connectedCallback() {
-        if (!this.core.getMediaElement()) {
-            this.core.attachMediaElement(this.videoEl);
-        }
-        const events = [
-            "ready",
-            "sourcechange",
-            "play",
-            "pause",
-            "timeupdate",
-            "ended",
-            "playlistend",
-            "qualitychange",
-            "downloadstatus",
-            "qualitiesdiscovered",
-            "error"
-        ];
-        this.cleanupCallbacks = events.map((eventName) => this.core.on(eventName, (detail) => {
-            if (eventName === "sourcechange") {
-                this.lastStableDuration = 0;
-                this.handlePlayStateChange();
-            }
-            this.dispatchEvent(new CustomEvent(eventName, {
-                detail,
-                bubbles: true,
-                composed: true
-            }));
-        }));
-        this.cleanupCallbacks.push(this.core.on("qualitiesdiscovered", () => {
-            this.refreshQualityUi();
-        }));
-        this.cleanupCallbacks.push(this.core.on("qualitychange", () => {
-            this.refreshQualityUi();
-        }));
-        this.cleanupCallbacks.push(this.core.on("scaleModeChange", () => {
-            this.refreshScaleModeUi();
-        }));
-        this.videoEl.addEventListener("timeupdate", this.handleVideoProgress);
-        this.videoEl.addEventListener("loadedmetadata", this.handleVideoProgress);
-        this.videoEl.addEventListener("progress", this.handleVideoProgress);
-        this.videoEl.addEventListener("play", this.handlePlayStateChange);
-        this.videoEl.addEventListener("pause", this.handlePlayStateChange);
-        this.videoEl.addEventListener("volumechange", this.handleVolumeChange);
-        this.videoEl.addEventListener("loadedmetadata", this.handleQualityUiRefresh);
-        document.addEventListener("fullscreenchange", this.handleFullscreenChange);
-        document.addEventListener("webkitfullscreenchange", this.handleFullscreenChange);
-        document.addEventListener("mozfullscreenchange", this.handleFullscreenChange);
-        document.addEventListener("MSFullscreenChange", this.handleFullscreenChange);
-        this.handlePlayStateChange();
-        this.handleVideoProgress();
-        this.handleVolumeChange();
-        this.handleFullscreenChange();
-        const config = this.core.getConfig();
-        this.autoplayToggle.checked = Boolean(config.autoplay || config.autoNext);
-        this.loopToggle.checked = Boolean(config.loop);
-        this.renderStaticIcons();
-        this.refreshPlaylistUi();
-        this.refreshQualityUi();
-        this.refreshScaleModeUi();
-        this.core.on("sourcechange", () => {
-            this.updateNavigationButtons();
-            this.refreshQualityUi();
-            this.refreshPlaylistUi();
-            this.updateUiVisibility();
-            this.refreshDownloadUi();
-        });
-        this.markInteraction();
-        document.addEventListener("keydown", this.handleKeyDown);
-        document.addEventListener("click", this.handleDocumentClick);
-    }
-    refreshPlaylistUi() {
-        const playlist = this.core.getPlaylist();
-        const currentIndex = this.core.getCurrentIndex();
-        this.playlistButton.classList.toggle("hidden", playlist.length <= 1);
-        this.playlistItemsContainer.innerHTML = "";
-        playlist.forEach((item, index) => {
-            const el = document.createElement("div");
-            el.className = `playlist-item ${index === currentIndex ? "active" : ""}`;
-            el.innerHTML = `
-        <div class="playlist-item-thumb">
-          ${item.poster ? `<img src="${item.poster}" alt="">` : ""}
-        </div>
-        <div class="playlist-item-info">
-          <div class="playlist-item-title">${item.title || `Video ${index + 1}`}</div>
-          <div class="playlist-item-meta">${item.type.toUpperCase()}</div>
-        </div>
-      `;
-            el.addEventListener("click", () => {
-                this.core.goTo(index);
-                this.playlistPanel.classList.remove("open");
-                this.markInteraction();
-            });
-            this.playlistItemsContainer.appendChild(el);
-        });
-    }
-    disconnectedCallback() {
-        document.removeEventListener("keydown", this.handleKeyDown);
-        document.removeEventListener("click", this.handleDocumentClick);
-        this.cleanupCallbacks.forEach((cleanup) => cleanup());
-        this.cleanupCallbacks = [];
-        this.videoEl.removeEventListener("timeupdate", this.handleVideoProgress);
-        this.videoEl.removeEventListener("loadedmetadata", this.handleVideoProgress);
-        this.videoEl.removeEventListener("progress", this.handleVideoProgress);
-        this.videoEl.removeEventListener("play", this.handlePlayStateChange);
-        this.videoEl.removeEventListener("pause", this.handlePlayStateChange);
-        this.videoEl.removeEventListener("volumechange", this.handleVolumeChange);
-        this.videoEl.removeEventListener("loadedmetadata", this.handleQualityUiRefresh);
-        document.removeEventListener("fullscreenchange", this.handleFullscreenChange);
-        document.removeEventListener("webkitfullscreenchange", this.handleFullscreenChange);
-        document.removeEventListener("mozfullscreenchange", this.handleFullscreenChange);
-        document.removeEventListener("MSFullscreenChange", this.handleFullscreenChange);
-        this.shellEl.removeEventListener("mousemove", this.markInteraction);
-        this.shellEl.removeEventListener("click", this.markInteraction);
-        this.shellEl.removeEventListener("touchstart", this.markInteraction);
-        this.shellEl.removeEventListener("mouseenter", this.markInteraction);
-        this.clearHideTimer();
-        this.stopProgressLoop();
-        this.core.detachMediaElement();
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (name === "scale-mode") {
-            const mode = newValue;
-            this.core.setScaleMode(mode);
-            return;
-        }
-        this.applyAttributeToCore(name);
-    }
-    /**
-     * Starts video playback.
-     * @returns A promise that resolves when playback starts.
-     */
-    play() {
-        return this.core.play();
-    }
-    /**
-     * Pauses video playback.
-     */
-    pause() {
-        this.core.pause();
-    }
-    /**
-     * Seeks to a specific time in the video.
-     * @param seconds - The time in seconds to seek to.
-     */
-    seek(seconds) {
-        this.core.seek(seconds);
-    }
-    /**
-     * Plays the next item in the playlist.
-     */
-    next() {
-        this.core.next();
-    }
-    /**
-     * Plays the previous item in the playlist.
-     */
-    previous() {
-        this.core.previous();
-    }
-    /**
-     * Sets the playback rate (speed) of the video.
-     * @param rate - The playback rate (e.g., 1.0, 1.5, 2.0).
-     */
-    setPlaybackRate(rate) {
-        this.core.setPlaybackRate(rate);
-    }
-    /**
-     * Sets the volume of the video.
-     * @param value - The volume level (0.0 to 1.0).
-     */
-    setVolume(value) {
-        this.core.setVolume(value);
-    }
-    /**
-     * Returns the underlying player core instance for advanced control.
-     * @returns The UvpPlayerCore instance.
-     */
-    getApi() {
-        return this.core;
-    }
-    readConfigFromAttributes() {
-        return {
-            source: this.buildSourceFromAttributes(),
-            autoplay: this.hasAttribute("autoplay"),
-            muted: this.hasAttribute("muted"),
-            poster: this.getAttribute("poster") ?? undefined,
-            controls: false,
-            autoNext: this.readBooleanAttr("auto-next", false),
-            loop: this.readBooleanAttr("loop", false),
-            playbackRate: this.readNumberAttr("playback-rate", 1),
-            volume: this.readNumberAttr("volume", 1),
-            scaleMode: this.getAttribute("scale-mode") ?? "fit"
-        };
-    }
-    buildSourceFromAttributes() {
-        const url = this.getAttribute("source-url");
-        if (!url)
-            return undefined;
-        const type = this.getAttribute("source-type") ?? "mp4";
-        const qualities = this.parseSourceQualitiesAttr();
-        return {
-            id: "single",
-            url,
-            type,
-            ...(qualities.length > 0 ? { qualities } : {})
-        };
-    }
-    parseSourceQualitiesAttr() {
-        const raw = this.getAttribute("source-qualities");
-        if (!raw?.trim())
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            if (!Array.isArray(parsed))
-                return [];
-            const out = [];
-            for (const entry of parsed) {
-                if (!entry || typeof entry !== "object")
-                    continue;
-                const obj = entry;
-                const id = typeof obj.id === "string" ? obj.id : "";
-                if (!id)
-                    continue;
-                const label = typeof obj.label === "string"
-                    ? obj.label
-                    : typeof obj.height === "number" && Number.isFinite(obj.height)
-                        ? `${obj.height}p`
-                        : id;
-                const item = { id, label };
-                if (typeof obj.height === "number" && Number.isFinite(obj.height)) {
-                    item.height = obj.height;
-                }
-                if (typeof obj.bitrateKbps === "number" && Number.isFinite(obj.bitrateKbps)) {
-                    item.bitrateKbps = obj.bitrateKbps;
-                }
-                out.push(item);
-            }
-            return out;
-        }
-        catch {
-            return [];
-        }
-    }
-    applyAttributeToCore(name) {
-        switch (name) {
-            case "source-url":
-            case "source-type":
-            case "source-qualities":
-                this.core.updateConfig({
-                    source: this.buildSourceFromAttributes()
-                });
-                this.updateNavigationButtons();
-                this.refreshQualityUi();
-                break;
-            case "playlist":
-                this.core.updateConfig({
-                    playlist: this.parsePlaylistAttr()
-                });
-                this.updateNavigationButtons();
-                this.refreshQualityUi();
-                this.refreshPlaylistUi();
-                break;
-            case "autoplay":
-                this.core.updateConfig({ autoplay: this.hasAttribute("autoplay") });
-                break;
-            case "muted":
-                this.core.updateConfig({ muted: this.hasAttribute("muted") });
-                break;
-            case "poster":
-                this.core.updateConfig({ poster: this.getAttribute("poster") ?? "" });
-                break;
-            case "controls":
-                this.showControls = this.readBooleanAttr("controls", true);
-                this.updateUiVisibility();
-                break;
-            case "auto-next":
-                this.core.updateConfig({ autoNext: this.readBooleanAttr("auto-next", false) });
-                this.updateNavigationButtons();
-                break;
-            case "loop":
-                this.core.updateConfig({ loop: this.readBooleanAttr("loop", false) });
-                this.updateNavigationButtons();
-                break;
-            case "playback-rate":
-                this.core.setPlaybackRate(this.readNumberAttr("playback-rate", 1));
-                this.updateSpeedUi(this.readNumberAttr("playback-rate", 1));
-                break;
-            case "volume":
-                this.core.setVolume(this.readNumberAttr("volume", 1));
-                break;
-            case "custom-controls":
-                this.isCustomControlsMode = this.readBooleanAttr("custom-controls", false);
-                this.updateUiVisibility();
-                break;
-            default:
-                break;
-        }
-    }
-    readBooleanAttr(name, fallback) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        if (value === "" || value === "true")
-            return true;
-        if (value === "false")
-            return false;
-        return fallback;
-    }
-    readNumberAttr(name, fallback) {
-        const value = this.getAttribute(name);
-        if (value == null)
-            return fallback;
-        const parsed = Number(value);
-        return Number.isFinite(parsed) ? parsed : fallback;
-    }
-    bindUiEvents() {
-        this.controlPlayPauseButton.addEventListener("click", () => {
-            if (this.videoEl.paused)
-                void this.play();
-            else
-                this.pause();
-            this.markInteraction();
-        });
-        this.controlPrevButton.addEventListener("click", () => {
-            if (this.controlPrevButton.disabled)
-                return;
-            this.previous();
-            this.updateNavigationButtons();
-            this.markInteraction();
-        });
-        this.controlNextButton.addEventListener("click", () => {
-            if (this.controlNextButton.disabled)
-                return;
-            this.next();
-            this.updateNavigationButtons();
-            this.markInteraction();
-        });
-        this.progressInput.addEventListener("input", () => {
-            this.isUserSeeking = true;
-            const percent = Number(this.progressInput.value);
-            const duration = this.videoEl.duration || 0;
-            this.currentTimeEl.textContent = this.formatTime((percent / 100) * duration);
-            this.updateProgressVisual(percent);
-            this.markInteraction();
-        });
-        this.progressInput.addEventListener("change", () => {
-            const duration = this.videoEl.duration || 0;
-            if (duration > 0) {
-                const percent = Number(this.progressInput.value);
-                this.seek((percent / 100) * duration);
-            }
-            this.isUserSeeking = false;
-            this.markInteraction();
-        });
-        this.muteButton.addEventListener("click", () => {
-            this.core.setMuted(!this.videoEl.muted);
-            this.handleVolumeChange();
-            this.markInteraction();
-        });
-        this.volumeInput.addEventListener("input", () => {
-            const value = Number(this.volumeInput.value);
-            this.setVolume(value);
-            if (value > 0 && this.videoEl.muted)
-                this.core.setMuted(false);
-            this.handleVolumeChange();
-            this.markInteraction();
-        });
-        this.fullscreenButton.addEventListener("click", () => {
-            this.toggleFullscreen();
-        });
-        this.lockButton.addEventListener("click", (event) => {
-            event.stopPropagation();
-            this.isLocked = !this.isLocked;
-            this.shellEl.classList.toggle("locked", this.isLocked);
-            this.refreshLockButtonIcon();
-            this.markInteraction();
-        });
-        this.aspectShortcut.addEventListener("click", (event) => {
-            event.stopPropagation();
-            const currentMode = this.core.getScaleMode();
-            const modes = ["fit", "fill", "zoom"];
-            const nextIndex = (modes.indexOf(currentMode) + 1) % modes.length;
-            this.core.setScaleMode(modes[nextIndex]);
-            this.markInteraction();
-        });
-        this.settingsButton.addEventListener("click", (event) => {
-            event.stopPropagation();
-            const isHidden = this.settingsMenu.classList.contains("hidden");
-            if (isHidden) {
-                this.openSettingsMenu();
-                this.playlistPanel.classList.remove("open");
-            }
-            else {
-                this.closeSettingsMenu();
-            }
-            this.markInteraction();
-        });
-        this.settingsScrim.addEventListener("click", () => {
-            this.closeSettingsMenu();
-            this.playlistPanel.classList.remove("open");
-        });
-        // Screen Transitions
-        this.settingsMenu.querySelectorAll(".settings-item[data-action]").forEach((item) => {
-            item.addEventListener("click", (event) => {
-                event.stopPropagation();
-                const action = item.dataset.action;
-                if (action === "quality-screen") {
-                    this.switchMenuScreen("quality");
-                }
-                else if (action === "speed-screen") {
-                    this.switchMenuScreen("speed");
-                }
-                else if (action === "aspect-screen") {
-                    this.switchMenuScreen("aspect");
-                }
-                else if (action === "autoplay") {
-                    const newState = !this.autoplayToggle.checked;
-                    this.autoplayToggle.checked = newState;
-                    this.core.updateConfig({ autoplay: newState, autoNext: newState });
-                }
-                else if (action === "loop") {
-                    const newState = !this.loopToggle.checked;
-                    this.loopToggle.checked = newState;
-                    this.core.updateConfig({ loop: newState });
-                }
-                else if (action === "download") {
-                    this.handleDownloadAction(item);
-                }
-                this.markInteraction();
-            });
-        });
-        this.settingsMenu.querySelectorAll(".menu-back").forEach((btn) => {
-            btn.addEventListener("click", (event) => {
-                event.stopPropagation();
-                const target = btn.dataset.target || "main";
-                this.switchMenuScreen(target);
-                this.markInteraction();
-            });
-        });
-        // Speed Selection
-        this.settingsMenu.querySelectorAll(".speed-item").forEach((item) => {
-            item.addEventListener("click", (event) => {
-                event.stopPropagation();
-                const rate = Number(item.dataset.rate);
-                this.setPlaybackRate(rate);
-                this.updateSpeedUi(rate);
-                this.closeSettingsMenu();
-                this.markInteraction();
-            });
-        });
-        // Aspect Selection
-        this.settingsMenu.querySelectorAll(".aspect-item").forEach((item) => {
-            item.addEventListener("click", (event) => {
-                event.stopPropagation();
-                const mode = item.dataset.mode;
-                this.core.setScaleMode(mode);
-                this.closeSettingsMenu();
-                this.markInteraction();
-            });
-        });
-        this.playlistButton.addEventListener("click", (event) => {
-            event.stopPropagation();
-            const isOpen = this.playlistPanel.classList.toggle("open");
-            if (isOpen) {
-                this.closeSettingsMenu();
-            }
-            this.settingsScrim.classList.toggle("visible", isOpen);
-            this.markInteraction();
-        });
-        this.playlistCloseButton.addEventListener("click", (event) => {
-            event.stopPropagation();
-            this.playlistPanel.classList.remove("open");
-            this.settingsScrim.classList.remove("visible");
-            this.markInteraction();
-        });
-        this.shadowRootRef.addEventListener("click", (event) => {
-            const target = event.target;
-            const isInsideSettings = this.settingsWrap.contains(target);
-            const isInsidePlaylist = this.playlistPanel.contains(target) || this.playlistButton.contains(target);
-            const isInsideScrim = this.settingsScrim.contains(target);
-            if (!isInsideSettings || isInsideScrim) {
-                this.closeSettingsMenu();
-            }
-            if (!isInsidePlaylist) {
-                this.playlistPanel.classList.remove("open");
-            }
-        });
-        this.videoEl.addEventListener("ratechange", () => {
-            this.updateSpeedUi(this.videoEl.playbackRate || 1);
-            this.markInteraction();
-        });
-        this.fullscreenButton.addEventListener("click", () => {
-            this.toggleFullscreen();
-        });
-        this.shellEl.addEventListener("mousemove", this.markInteraction);
-        this.shellEl.addEventListener("click", this.markInteraction);
-        this.shellEl.addEventListener("touchstart", this.markInteraction);
-        this.shellEl.addEventListener("mouseenter", this.markInteraction);
-        this.shadowRootRef.querySelectorAll(".settings-item").forEach((item) => {
-            item.addEventListener("click", () => {
-                const action = item.dataset.action;
-                if (action === "quality-screen")
-                    this.switchMenuScreen("quality");
-                if (action === "speed-screen")
-                    this.switchMenuScreen("speed");
-                if (action === "aspect-screen")
-                    this.switchMenuScreen("aspect");
-                if (action === "download-screen")
-                    this.switchMenuScreen("download");
-            });
-        });
-        this.updateNavigationButtons();
-    }
-    openSettingsMenu() {
-        this.refreshQualityUi();
-        this.refreshScaleModeUi();
-        this.refreshDownloadUi();
-        this.switchMenuScreen("main");
-        this.settingsMenu.classList.remove("hidden");
-        this.settingsButton.setAttribute("aria-expanded", "true");
-        this.settingsScrim.classList.add("visible");
-    }
-    closeSettingsMenu() {
-        this.settingsMenu.classList.add("hidden");
-        this.settingsButton.setAttribute("aria-expanded", "false");
-        this.settingsScrim.classList.remove("visible");
-    }
-    switchMenuScreen(screenId) {
-        this.settingsMenu.querySelectorAll(".menu-screen").forEach((screen) => {
-            const isTarget = screen.dataset.screen === screenId;
-            screen.classList.toggle("hidden", !isTarget);
-        });
-    }
-    handleDownloadAction(item) {
-        const source = this.core.getCurrentSource();
-        if (!source)
-            return;
-        if (source.type !== "mp4" && source.type !== "mov" && source.type !== "hls" && source.type !== "dash") {
-            alert("Downloading is only supported for MP4, MOV, HLS, and DASH formats.");
-            return;
-        }
-        const isDownloading = item.dataset.status === "downloading";
-        const isDownloaded = item.dataset.status === "downloaded";
-        if (isDownloading)
-            return;
-        if (isDownloaded) {
-            removeCachedVideo(source.id).then(() => {
-                this.refreshDownloadUi();
-            });
-        }
-        else {
-            item.dataset.status = "downloading";
-            const textEl = item.querySelector(".download-text");
-            if (textEl)
-                textEl.textContent = "Downloading 0%";
-            cacheVideo(source.id, source.url, (data) => {
-                if (data.status === "in_progress") {
-                    if (textEl)
-                        textEl.textContent = `Downloading ${Math.round(data.progress || 0)}%`;
-                }
-                else if (data.status === "completed") {
-                    item.dataset.status = "none";
-                    this.refreshDownloadUi();
-                    // Optional: Auto-switch source logic can be added here
-                }
-                else if (data.status === "error") {
-                    if (textEl)
-                        textEl.textContent = "Download failed";
-                    setTimeout(() => {
-                        item.dataset.status = "none";
-                        this.refreshDownloadUi();
-                    }, 2000);
-                }
-            }, source.type);
-        }
-    }
-    refreshDownloadUi() {
-        const source = this.core.getCurrentSource();
-        const downloadItem = this.settingsMenu.querySelector('[data-action="download"]');
-        if (!downloadItem)
-            return;
-        if (!source || (source.type !== "mp4" && source.type !== "mov" && source.type !== "hls" && source.type !== "dash")) {
-            downloadItem.style.opacity = "0.5";
-            downloadItem.style.pointerEvents = "none";
-            const textEl = downloadItem.querySelector(".download-text");
-            if (textEl)
-                textEl.textContent = "Download (Unsupported)";
-            return;
-        }
-        downloadItem.style.opacity = "1";
-        downloadItem.style.pointerEvents = "auto";
-        const textEl = downloadItem.querySelector(".download-text");
-        const iconEl = downloadItem.querySelector(".download-icon");
-        if (downloadItem.dataset.status === "downloading") {
-            // Don't overwrite downloading state
-            return;
-        }
-        isCached(source.id).then((cached) => {
-            // Re-check if source is still the same after async call
-            if (this.core.getCurrentSource()?.id !== source.id)
-                return;
-            if (cached) {
-                downloadItem.dataset.status = "downloaded";
-                if (textEl)
-                    textEl.textContent = "Remove Download";
-                if (iconEl) {
-                    iconEl.innerHTML = icons.trash.toSvg({ width: "16", height: "16", "stroke-width": "2.5" });
-                }
-            }
-            else {
-                downloadItem.dataset.status = "none";
-                if (textEl)
-                    textEl.textContent = "Download";
-                if (iconEl) {
-                    iconEl.innerHTML = icons.download.toSvg({ width: "16", height: "16", "stroke-width": "2.5" });
-                }
-            }
-        });
-    }
-    updateUiVisibility() {
-        const useCustom = this.isCustomControlsMode;
-        const controlsEnabled = this.showControls;
-        this.videoEl.controls = false;
-        this.controlsEl.classList.toggle("hidden", useCustom || !controlsEnabled);
-        this.centerActionsEl.classList.toggle("hidden", useCustom || !controlsEnabled);
-        this.slotEl.classList.toggle("hidden", !useCustom || !controlsEnabled);
-        if (useCustom || !controlsEnabled) {
-            this.shellEl.classList.remove("ui-hidden");
-            this.clearHideTimer();
-        }
-        else {
-            this.markInteraction();
-        }
-    }
-    toggleFullscreen() {
-        if (this.isProcessingFullscreen)
-            return;
-        this.isProcessingFullscreen = true;
-        setTimeout(() => {
-            this.isProcessingFullscreen = false;
-        }, 1000);
-        const doc = document;
-        const el = this.shellEl;
-        if (this.isFullscreen) {
-            if (document.exitFullscreen) {
-                void document.exitFullscreen();
-            }
-            else if (doc.webkitExitFullscreen) {
-                doc.webkitExitFullscreen();
-            }
-            else if (doc.mozCancelFullScreen) {
-                doc.mozCancelFullScreen();
-            }
-            else if (doc.msExitFullscreen) {
-                doc.msExitFullscreen();
-            }
-        }
-        else {
-            try {
-                if (el.requestFullscreen) {
-                    void el.requestFullscreen();
-                }
-                else if (el.webkitRequestFullscreen) {
-                    el.webkitRequestFullscreen();
-                }
-                else if (el.mozRequestFullScreen) {
-                    el.mozRequestFullScreen();
-                }
-                else if (el.msRequestFullscreen) {
-                    el.msRequestFullscreen();
-                }
-            }
-            catch (err) {
-                console.error("Fullscreen request failed:", err);
-            }
-        }
-        this.markInteraction();
-    }
-    formatTime(seconds) {
-        if (!Number.isFinite(seconds) || seconds <= 0)
-            return "0:00";
-        const total = Math.floor(seconds);
-        const mins = Math.floor(total / 60);
-        const secs = total % 60;
-        return `${mins}:${String(secs).padStart(2, "0")}`;
-    }
-    clearHideTimer() {
-        if (this.controlsHideTimer == null)
-            return;
-        window.clearTimeout(this.controlsHideTimer);
-        this.controlsHideTimer = null;
-    }
-    updateProgressVisual(percent) {
-        const clamped = Math.max(0, Math.min(100, percent));
-        this.progressPlayedEl.style.width = `${clamped}%`;
-        this.progressThumbEl.style.left = `${clamped}%`;
-    }
-    updateNavigationButtons() {
-        const canPrev = this.core.canGoPrevious();
-        const canNext = this.core.canGoNext();
-        this.controlPrevButton.disabled = !canPrev;
-        this.controlNextButton.disabled = !canNext;
-    }
-    parsePlaylistAttr() {
-        const raw = this.getAttribute("playlist");
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            if (!Array.isArray(parsed))
-                return [];
-            return parsed.map((item) => ({
-                ...item,
-                id: item.id || Math.random().toString(36).substring(7)
-            }));
-        }
-        catch {
-            return [];
-        }
-    }
-    refreshQualityUi() {
-        const qualities = this.core.getQualities();
-        const currentQuality = this.core.getCurrentQuality();
-        const currentQualityLabel = currentQuality?.label || "Auto";
-        // Update overlay value text
-        const valueEl = this.settingsMenu.querySelector(".current-quality-value");
-        if (valueEl)
-            valueEl.textContent = currentQualityLabel;
-        const listEl = this.settingsMenu.querySelector(".quality-list");
-        if (!listEl)
-            return;
-        listEl.innerHTML = "";
-        const createItem = (id, label) => {
-            const el = document.createElement("button");
-            const isActive = id === (currentQuality?.id || null);
-            el.className = `quality-item ${isActive ? "active" : ""}`;
-            el.innerHTML = `<span>${label}</span><span class="check"></span>`;
-            const checkEl = el.querySelector(".check");
-            if (checkEl) {
-                checkEl.innerHTML = icons.check.toSvg({ width: "16", height: "16", "stroke-width": "2.5" });
-            }
-            el.addEventListener("click", (event) => {
-                event.stopPropagation();
-                this.core.setSelectedQuality(id);
-                this.closeSettingsMenu();
-                this.markInteraction();
-            });
-            return el;
-        };
-        // Always add Auto
-        listEl.appendChild(createItem(null, "Auto"));
-        qualities.forEach((q) => {
-            const label = q.label || (q.height ? `${q.height}p` : q.id);
-            listEl.appendChild(createItem(q.id, label));
-        });
-    }
-    renderAspectMenu() {
-        this.settingsAspectScreen.innerHTML = `
-      <div class="settings-header">
-        <button class="back-button">Back</button>
-        <span>Aspect Ratio</span>
-      </div>
-      <div class="settings-options">
-        <div class="settings-option" data-mode="fit">
-          <span>Fit</span>
-          <span class="check-mark"></span>
-        </div>
-        <div class="settings-option" data-mode="fill">
-          <span>Stretch</span>
-          <span class="check-mark"></span>
-        </div>
-        <div class="settings-option" data-mode="zoom">
-          <span>Zoom</span>
-          <span class="check-mark"></span>
-        </div>
-      </div>
-    `;
-        const backBtn = this.settingsAspectScreen.querySelector(".back-button");
-        backBtn?.addEventListener("click", () => this.switchMenuScreen("main"));
-        const options = this.settingsAspectScreen.querySelectorAll(".settings-option");
-        const currentMode = this.core.getScaleMode();
-        options.forEach((opt) => {
-            const mode = opt.dataset.mode;
-            if (mode === currentMode) {
-                opt.classList.add("active");
-            }
-            opt.addEventListener("click", () => {
-                this.core.setScaleMode(mode);
-                this.switchMenuScreen("main");
-            });
-        });
-    }
-    refreshScaleModeUi() {
-        const mode = this.core.getScaleMode();
-        this.shellEl.classList.remove("scale-fit", "scale-fill", "scale-zoom");
-        this.shellEl.classList.add(`scale-${mode}`);
-        // Update active state in sub-menu
-        this.settingsMenu.querySelectorAll(".aspect-item").forEach((item) => {
-            const itemMode = item.dataset.mode;
-            item.classList.toggle("active", itemMode === mode);
-        });
-        // Update label in main menu
-        const label = this.shadowRootRef.querySelector(".current-aspect-value");
-        if (label) {
-            const labels = {
-                fit: "Fit",
-                fill: "Stretch",
-                zoom: "Zoom"
-            };
-            label.textContent = labels[mode] || "Fit";
-        }
-    }
-    renderStaticIcons() {
-        this.setButtonIcon(this.controlPrevButton, "skip-back");
-        this.setButtonIcon(this.controlNextButton, "skip-forward");
-        this.setButtonIcon(this.muteButton, "volume-2");
-        this.setButtonIcon(this.settingsButton, "settings");
-        this.setButtonIcon(this.fullscreenButton, "maximize");
-        this.setButtonIcon(this.playlistButton, "list");
-        this.setButtonIcon(this.playlistCloseButton, "x");
-        this.setButtonIcon(this.aspectShortcut, "box");
-        this.refreshLockButtonIcon();
-        // Unified Menu Icons
-        const setIcon = (selector, name, size = "18") => {
-            this.settingsMenu.querySelectorAll(selector).forEach((el) => {
-                el.innerHTML = icons[name].toSvg({ width: size, height: size, "stroke-width": "2" });
-            });
-        };
-        setIcon(".icon-quality", "monitor");
-        setIcon(".icon-speed", "fast-forward");
-        setIcon(".icon-aspect", "box");
-        setIcon(".icon-play", "play");
-        setIcon(".icon-repeat", "repeat");
-        setIcon(".icon-arrow-left", "arrow-left", "20");
-        this.settingsMenu.querySelectorAll(".icon-chevron-right").forEach((el) => {
-            el.innerHTML = icons["chevron-right"].toSvg({ width: "16", height: "16", "stroke-width": "2.5" });
-        });
-        const downloadIcon = this.settingsMenu.querySelector(".download-icon");
-        if (downloadIcon) {
-            downloadIcon.innerHTML = icons.download.toSvg({ width: "16", height: "16", "stroke-width": "2.5" });
-        }
-        this.settingsMenu.querySelectorAll(".check").forEach((element) => {
-            element.innerHTML = icons.check.toSvg({
-                width: "16",
-                height: "16",
-                "stroke-width": "2.5"
-            });
-        });
-    }
-    setButtonIcon(button, iconName) {
-        const icon = icons[iconName];
-        if (!icon)
-            return;
-        button.innerHTML = icon.toSvg({
-            width: "26",
-            height: "26",
-            "stroke-width": "2.2"
-        });
-    }
-    refreshLockButtonIcon() {
-        const iconName = this.isLocked ? "lock" : "unlock";
-        this.setButtonIcon(this.lockButton, iconName);
-    }
-    updateSpeedUi(rate) {
-        const normalized = [0.5, 1, 1.5, 2].includes(rate) ? rate : 1;
-        const valueEl = this.settingsMenu.querySelector(".current-speed-value");
-        if (valueEl)
-            valueEl.textContent = `${normalized}x`;
-        this.settingsMenu.querySelectorAll(".speed-item").forEach((item) => {
-            const itemRate = Number(item.dataset.rate);
-            item.classList.toggle("active", itemRate === normalized);
-        });
-    }
-    getBufferedPercent(duration, currentTime) {
-        if (!duration || !Number.isFinite(duration) || duration <= 0)
-            return 0;
-        const ranges = this.videoEl.buffered;
-        if (!ranges || ranges.length === 0)
-            return 0;
-        let end = 0;
-        for (let i = 0; i < ranges.length; i += 1) {
-            const start = ranges.start(i);
-            const rangeEnd = ranges.end(i);
-            if (currentTime >= start && currentTime <= rangeEnd) {
-                end = Math.max(end, rangeEnd);
-            }
-            else {
-                end = Math.max(end, rangeEnd);
-            }
-        }
-        return Math.max(0, Math.min(100, (end / duration) * 100));
-    }
-    startProgressLoop() {
-        this.stopProgressLoop();
-        const tick = () => {
-            if (this.videoEl.paused || this.videoEl.ended) {
-                this.progressRafId = null;
-                return;
-            }
-            this.handleVideoProgress();
-            this.progressRafId = window.requestAnimationFrame(tick);
-        };
-        this.progressRafId = window.requestAnimationFrame(tick);
-    }
-    stopProgressLoop() {
-        if (this.progressRafId == null)
-            return;
-        window.cancelAnimationFrame(this.progressRafId);
-        this.progressRafId = null;
-    }
-}
-export function defineUvpPlayerElement(tagName = DEFAULT_TAG) {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, UvpPlayerElement);
-    }
-}
-//# sourceMappingURL=index.js.map