@kaushal-satani-aipxperts/player-angular 0.1.0

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

@@ -0,0 +1,1999 @@
+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"
+];
+/**
+ * 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.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.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;
+          object-fit: contain;
+        }
+
+        .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;
+        }
+
+        .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 {
+          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 {
+          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 {
+          background: rgba(255, 255, 255, 0.08) !important;
+        }
+
+        .speed-item.active, .quality-item.active {
+          color: var(--uvp-accent);
+          font-weight: 600;
+          background: rgba(164, 0, 188, 0.1) !important;
+        }
+
+        .speed-item .check, .quality-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 {
+          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="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="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>
+              </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.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.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.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.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) {
+        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)
+        };
+    }
+    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.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 === "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();
+            });
+        });
+        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.updateNavigationButtons();
+    }
+    openSettingsMenu() {
+        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() {
+        const doc = document;
+        const el = this;
+        if (this.isFullscreen) {
+            if (document.exitFullscreen) {
+                void document.exitFullscreen();
+            }
+            else if (doc.webkitExitFullscreen) {
+                void doc.webkitExitFullscreen();
+            }
+            else if (doc.mozCancelFullScreen) {
+                void doc.mozCancelFullScreen();
+            }
+            else if (doc.msExitFullscreen) {
+                void doc.msExitFullscreen();
+            }
+        }
+        else {
+            const options = { navigationUI: "hide" };
+            const el = this;
+            const request = async () => {
+                try {
+                    if (el.requestFullscreen) {
+                        await el.requestFullscreen(options);
+                    }
+                    else if (el.webkitRequestFullscreen) {
+                        await el.webkitRequestFullscreen(options);
+                    }
+                    else if (el.mozRequestFullScreen) {
+                        await el.mozRequestFullScreen(options);
+                    }
+                    else if (el.msRequestFullscreen) {
+                        await el.msRequestFullscreen(options);
+                    }
+                }
+                catch (err) {
+                    // Fallback without options
+                    try {
+                        if (el.requestFullscreen) {
+                            await el.requestFullscreen();
+                        }
+                        else if (el.webkitRequestFullscreen) {
+                            await el.webkitRequestFullscreen();
+                        }
+                        else if (el.mozRequestFullScreen) {
+                            await el.mozRequestFullScreen();
+                        }
+                        else if (el.msRequestFullscreen) {
+                            await el.msRequestFullscreen();
+                        }
+                    }
+                    catch (finalErr) {
+                        console.error("Fullscreen request failed completely:", finalErr);
+                    }
+                }
+            };
+            void request();
+        }
+        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));
+        });
+    }
+    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");
+        // 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-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"
+        });
+    }
+    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