@frameset/plex-player 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/plex-player.cjs.js +127 -1
  2. package/dist/plex-player.cjs.js.map +1 -1
  3. package/dist/plex-player.css +304 -603
  4. package/dist/plex-player.css.map +1 -1
  5. package/dist/plex-player.esm.js +127 -1
  6. package/dist/plex-player.esm.js.map +1 -1
  7. package/dist/plex-player.js +127 -1
  8. package/dist/plex-player.js.map +1 -1
  9. package/dist/plex-player.min.js +2 -2
  10. package/dist/plex-player.min.js.map +1 -1
  11. package/dist/react/index.esm.js +1 -1
  12. package/dist/react/index.js +1 -1
  13. package/dist/vue/index.esm.js +1 -1
  14. package/dist/vue/index.js +1 -1
  15. package/package.json +1 -1
  16. package/src/core/index.js +134 -0
package/dist/plex-player.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["main.css","controls.css","playlist.css","settings.css"],"names":[],"mappings":"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","file":"plex-player.css","sourcesContent":["/* =====================================================\r\n PLEX Video Player - Main Styles\r\n ===================================================== */\r\n\r\n/* CSS Variables - scoped to player */\r\n.plex-player,\r\n.plex-player-container {\r\n --plex-primary: #e5a00d;\r\n --plex-primary-hover: #f5b82e;\r\n --plex-bg-dark: #1a1a1a;\r\n --plex-bg-darker: #0d0d0d;\r\n --plex-bg-overlay: rgba(0, 0, 0, 0.85);\r\n --plex-text-primary: #ffffff;\r\n --plex-text-secondary: #a0a0a0;\r\n --plex-border: rgba(255, 255, 255, 0.1);\r\n --plex-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);\r\n --plex-gradient-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);\r\n --plex-transition-fast: 0.15s ease;\r\n --plex-transition-normal: 0.25s ease;\r\n --plex-transition-slow: 0.4s ease;\r\n --plex-radius-sm: 4px;\r\n --plex-radius-md: 8px;\r\n --plex-radius-lg: 12px;\r\n --plex-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n --plex-z-video: 1;\r\n --plex-z-overlay: 10;\r\n --plex-z-controls: 20;\r\n --plex-z-panel: 30;\r\n --plex-z-modal: 40;\r\n --plex-z-toast: 50;\r\n}\r\n\r\n/* Scoped Reset - only inside player */\r\n.plex-player *,\r\n.plex-player *::before,\r\n.plex-player *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Player Container Wrapper */\r\n.plex-player-container {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 16 / 9;\r\n background: var(--plex-bg-darker);\r\n border-radius: var(--plex-radius-md);\r\n overflow: hidden;\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n/* Player Container */\r\n.plex-player {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background: var(--plex-bg-darker);\r\n overflow: hidden;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -webkit-tap-highlight-color: transparent;\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-player.fullscreen {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: 9999;\r\n}\r\n\r\n/* Video Container */\r\n.video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #000;\r\n z-index: var(--plex-z-video);\r\n}\r\n\r\n.video-container video {\r\n width: 100%;\r\n height: 100%;\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n background: #000;\r\n}\r\n\r\n/* Controls Visibility */\r\n.plex-player.controls-visible .top-controls,\r\n.plex-player.controls-visible .bottom-controls {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n}\r\n\r\n.plex-player:not(.controls-visible) .top-controls,\r\n.plex-player:not(.controls-visible) .bottom-controls {\r\n opacity: 0;\r\n visibility: hidden;\r\n}\r\n\r\n.plex-player:not(.controls-visible) .top-controls {\r\n transform: translateY(-100%);\r\n}\r\n\r\n.plex-player:not(.controls-visible) .bottom-controls {\r\n transform: translateY(100%);\r\n}\r\n\r\n/* Cursor hiding */\r\n.plex-player.hide-cursor {\r\n cursor: none;\r\n}\r\n\r\n.plex-player.hide-cursor video {\r\n cursor: none;\r\n}\r\n\r\n/* Loading Spinner */\r\n.loading-spinner {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: var(--plex-z-overlay);\r\n}\r\n\r\n.loading-spinner .spinner {\r\n width: 60px;\r\n height: 60px;\r\n border: 4px solid rgba(255, 255, 255, 0.2);\r\n border-top-color: var(--plex-primary);\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Big Play Button */\r\n.big-play-btn {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(1);\r\n width: 80px;\r\n height: 80px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: var(--plex-z-overlay);\r\n transition: all var(--plex-transition-normal);\r\n box-shadow: 0 4px 30px rgba(229, 160, 13, 0.4);\r\n}\r\n\r\n.big-play-btn:hover {\r\n transform: translate(-50%, -50%) scale(1.1);\r\n background: var(--plex-primary-hover);\r\n}\r\n\r\n.big-play-btn .material-icons {\r\n font-size: 48px;\r\n color: #000;\r\n margin-left: 4px;\r\n}\r\n\r\n.big-play-btn.hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translate(-50%, -50%) scale(0.8);\r\n}\r\n\r\n/* Gesture Overlay */\r\n.gesture-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n z-index: var(--plex-z-overlay);\r\n pointer-events: none;\r\n}\r\n\r\n.gesture-left,\r\n.gesture-right {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.gesture-center {\r\n flex: 1;\r\n}\r\n\r\n.gesture-indicator {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 20px;\r\n background: rgba(0, 0, 0, 0.7);\r\n border-radius: var(--plex-radius-lg);\r\n opacity: 0;\r\n transform: scale(0.8);\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.gesture-indicator.active {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n.gesture-indicator .material-icons {\r\n font-size: 48px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.gesture-indicator .gesture-text {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Volume/Brightness Indicators */\r\n.volume-indicator,\r\n.brightness-indicator {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 24px;\r\n background: rgba(0, 0, 0, 0.8);\r\n border-radius: var(--plex-radius-lg);\r\n z-index: var(--plex-z-overlay);\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.volume-indicator .material-icons,\r\n.brightness-indicator .material-icons {\r\n font-size: 36px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.volume-indicator-bar,\r\n.brightness-indicator-bar {\r\n width: 120px;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n}\r\n\r\n.volume-indicator-fill,\r\n.brightness-indicator-fill {\r\n height: 100%;\r\n background: var(--plex-primary);\r\n border-radius: 2px;\r\n transition: width var(--plex-transition-fast);\r\n}\r\n\r\n/* Subtitles Container */\r\n.subtitles-container {\r\n position: absolute;\r\n bottom: 80px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80%;\r\n max-width: 800px;\r\n text-align: center;\r\n z-index: var(--plex-z-overlay);\r\n pointer-events: none;\r\n}\r\n\r\n.subtitle-line {\r\n display: inline-block;\r\n padding: 8px 16px;\r\n margin: 4px 0;\r\n background: rgba(0, 0, 0, 0.75);\r\n border-radius: var(--plex-radius-sm);\r\n font-size: 24px;\r\n line-height: 1.4;\r\n color: #fff;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n/* Cast Overlay */\r\n.cast-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: var(--plex-bg-darker);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: var(--plex-z-overlay);\r\n}\r\n\r\n.cast-overlay.hidden {\r\n display: none;\r\n}\r\n\r\n.cast-overlay-content {\r\n text-align: center;\r\n animation: castPulse 2s ease-in-out infinite;\r\n}\r\n\r\n.cast-overlay .cast-icon {\r\n font-size: 80px;\r\n color: var(--plex-primary);\r\n margin-bottom: 24px;\r\n}\r\n\r\n.cast-overlay .cast-title {\r\n font-size: 18px;\r\n color: var(--plex-text-secondary);\r\n margin-bottom: 8px;\r\n}\r\n\r\n.cast-overlay .cast-device {\r\n font-size: 28px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n margin-bottom: 16px;\r\n}\r\n\r\n.cast-overlay .cast-video {\r\n font-size: 16px;\r\n color: var(--plex-text-secondary);\r\n max-width: 300px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n@keyframes castPulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.7; }\r\n}\r\n\r\n/* Utility Classes */\r\n.hidden {\r\n display: none !important;\r\n}\r\n\r\n.visually-hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n}\r\n\r\n/* Toast Notification */\r\n.toast {\r\n position: absolute;\r\n bottom: 100px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(20px);\r\n background: var(--plex-bg-overlay);\r\n padding: 12px 24px;\r\n border-radius: var(--plex-radius-md);\r\n z-index: var(--plex-z-toast);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all var(--plex-transition-normal);\r\n}\r\n\r\n.toast.show {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n.toast-message {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Context Menu */\r\n.context-menu {\r\n position: fixed;\r\n min-width: 200px;\r\n background: var(--plex-bg-dark);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-md);\r\n box-shadow: var(--plex-shadow);\r\n z-index: var(--plex-z-modal);\r\n overflow: hidden;\r\n}\r\n\r\n.context-menu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n cursor: pointer;\r\n transition: background var(--plex-transition-fast);\r\n}\r\n\r\n.context-menu-item:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.context-menu-item .material-icons {\r\n font-size: 20px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.context-menu-item span:last-child {\r\n font-size: 14px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.context-menu-divider {\r\n height: 1px;\r\n background: var(--plex-border);\r\n margin: 4px 0;\r\n}\r\n\r\n/* Stats Overlay */\r\n.stats-overlay {\r\n position: absolute;\r\n top: 80px;\r\n left: 20px;\r\n width: 280px;\r\n background: var(--plex-bg-overlay);\r\n border-radius: var(--plex-radius-md);\r\n z-index: var(--plex-z-panel);\r\n overflow: hidden;\r\n}\r\n\r\n.stats-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-bottom: 1px solid var(--plex-border);\r\n font-size: 14px;\r\n font-weight: 600;\r\n}\r\n\r\n.stats-content {\r\n padding: 12px 16px;\r\n}\r\n\r\n.stat-item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 8px 0;\r\n font-size: 13px;\r\n border-bottom: 1px solid var(--plex-border);\r\n}\r\n\r\n.stat-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.stat-label {\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.stat-value {\r\n color: var(--plex-text-primary);\r\n font-weight: 500;\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 768px) {\r\n .big-play-btn {\r\n width: 64px;\r\n height: 64px;\r\n }\r\n \r\n .big-play-btn .material-icons {\r\n font-size: 36px;\r\n }\r\n \r\n .subtitle-line {\r\n font-size: 18px;\r\n padding: 6px 12px;\r\n }\r\n \r\n .subtitles-container {\r\n width: 90%;\r\n bottom: 70px;\r\n }\r\n \r\n .gesture-indicator .material-icons {\r\n font-size: 36px;\r\n }\r\n \r\n .stats-overlay {\r\n top: 60px;\r\n left: 10px;\r\n width: 240px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .big-play-btn {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n \r\n .big-play-btn .material-icons {\r\n font-size: 32px;\r\n }\r\n \r\n .subtitle-line {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n/* Touch Device Optimizations */\r\n@media (hover: none) and (pointer: coarse) {\r\n .control-btn {\r\n min-width: 44px;\r\n min-height: 44px;\r\n }\r\n \r\n .volume-slider-container {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Animations */\r\n@keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0%, 100% {\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n 50% {\r\n transform: translate(-50%, -50%) scale(1.05);\r\n }\r\n}\r\n","/* =====================================================\r\n PLEX Video Player - Controls Styles\r\n ===================================================== */\r\n\r\n/* Top Controls Bar */\r\n.top-controls {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px 20px;\r\n background: var(--plex-gradient-top);\r\n z-index: var(--plex-z-controls);\r\n transition: all var(--plex-transition-normal);\r\n}\r\n\r\n.top-left,\r\n.top-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.video-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n margin-left: 8px;\r\n max-width: 400px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n/* Bottom Controls */\r\n.bottom-controls {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n padding: 0 16px 16px;\r\n background: var(--plex-gradient);\r\n z-index: var(--plex-z-controls);\r\n transition: all var(--plex-transition-normal);\r\n}\r\n\r\n/* Progress Container */\r\n.progress-container {\r\n position: relative;\r\n width: 100%;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 8px 0;\r\n}\r\n\r\n.progress-bar {\r\n position: relative;\r\n width: 100%;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n overflow: visible;\r\n transition: height var(--plex-transition-fast);\r\n}\r\n\r\n.progress-container:hover .progress-bar {\r\n height: 6px;\r\n}\r\n\r\n.progress-buffered {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n background: rgba(255, 255, 255, 0.35);\r\n border-radius: 2px;\r\n pointer-events: none;\r\n}\r\n\r\n.progress-played {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n background: var(--plex-primary);\r\n border-radius: 2px;\r\n pointer-events: none;\r\n}\r\n\r\n.progress-handle {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n width: 14px;\r\n height: 14px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%) scale(0);\r\n transition: transform var(--plex-transition-fast);\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\r\n pointer-events: none;\r\n}\r\n\r\n.progress-container:hover .progress-handle,\r\n.progress-container.dragging .progress-handle {\r\n transform: translate(-50%, -50%) scale(1);\r\n}\r\n\r\n.progress-container.dragging .progress-bar {\r\n height: 6px;\r\n}\r\n\r\n/* Progress Tooltip */\r\n.progress-tooltip {\r\n position: absolute;\r\n bottom: 100%;\r\n left: 0;\r\n padding: 6px 10px;\r\n background: var(--plex-bg-dark);\r\n border-radius: var(--plex-radius-sm);\r\n font-size: 13px;\r\n font-weight: 500;\r\n white-space: nowrap;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateX(-50%) translateY(4px);\r\n transition: all var(--plex-transition-fast);\r\n pointer-events: none;\r\n z-index: 50;\r\n}\r\n\r\n.progress-container:hover .progress-tooltip {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateX(-50%) translateY(-4px);\r\n}\r\n\r\n/* Hide tooltip when preview is visible */\r\n.progress-container:hover .progress-preview[style*=\"display: flex\"] ~ .progress-tooltip,\r\n.progress-preview:not([style*=\"display: none\"]) + .progress-tooltip {\r\n opacity: 0;\r\n visibility: hidden;\r\n}\r\n\r\n/* Progress Preview (Thumbnail) */\r\n.progress-preview {\r\n position: absolute;\r\n bottom: calc(100% + 16px);\r\n left: 0;\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n z-index: 100;\r\n pointer-events: none;\r\n background: rgba(0, 0, 0, 0.9);\r\n padding: 4px;\r\n border-radius: var(--plex-radius-sm);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n#preview-canvas {\r\n width: 160px;\r\n height: 90px;\r\n background: var(--plex-bg-dark);\r\n border: 2px solid var(--plex-primary);\r\n border-radius: var(--plex-radius-sm);\r\n object-fit: contain;\r\n}\r\n\r\n.preview-time {\r\n margin-top: 6px;\r\n padding: 4px 10px;\r\n background: var(--plex-primary);\r\n color: #000;\r\n border-radius: var(--plex-radius-sm);\r\n font-size: 12px;\r\n font-weight: 700;\r\n}\r\n\r\n/* Time Display */\r\n.time-display {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n padding: 8px 0;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.time-separator {\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n/* Main Controls Row */\r\n.main-controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-top: 4px;\r\n}\r\n\r\n.controls-left,\r\n.controls-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n/* Control Button */\r\n.control-btn {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--plex-radius-sm);\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.control-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.control-btn:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.control-btn .material-icons {\r\n font-size: 24px;\r\n}\r\n\r\n.control-btn.active {\r\n color: var(--plex-primary);\r\n}\r\n\r\n/* Cast Button */\r\n#cast-btn {\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n#cast-btn.active {\r\n color: var(--plex-primary);\r\n animation: pulse-cast 2s ease-in-out infinite;\r\n}\r\n\r\n#cast-btn.hidden {\r\n display: none;\r\n}\r\n\r\n@keyframes pulse-cast {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.6; }\r\n}\r\n\r\n/* Play Button (Larger) */\r\n.play-btn {\r\n width: 48px;\r\n height: 48px;\r\n}\r\n\r\n.play-btn .material-icons {\r\n font-size: 32px;\r\n}\r\n\r\n/* Speed Text */\r\n.speed-text {\r\n font-size: 14px;\r\n font-weight: 600;\r\n min-width: 28px;\r\n}\r\n\r\n/* Volume Control */\r\n.volume-control {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n.volume-slider-container {\r\n position: relative;\r\n width: 0;\r\n overflow: hidden;\r\n transition: width var(--plex-transition-normal);\r\n}\r\n\r\n.volume-control:hover .volume-slider-container {\r\n width: 80px;\r\n}\r\n\r\n.volume-slider {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 80px;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\n.volume-slider::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 14px;\r\n height: 14px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: transform var(--plex-transition-fast);\r\n}\r\n\r\n.volume-slider::-webkit-slider-thumb:hover {\r\n transform: scale(1.2);\r\n}\r\n\r\n.volume-slider::-moz-range-thumb {\r\n width: 14px;\r\n height: 14px;\r\n background: var(--plex-primary);\r\n border: none;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n}\r\n\r\n.volume-slider-fill {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n height: 4px;\r\n background: var(--plex-primary);\r\n border-radius: 2px;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n}\r\n\r\n/* Chapters Markers (on progress bar) */\r\n.chapter-marker {\r\n position: absolute;\r\n top: 0;\r\n width: 3px;\r\n height: 100%;\r\n background: rgba(255, 255, 255, 0.8);\r\n border-radius: 1px;\r\n transform: translateX(-50%);\r\n cursor: pointer;\r\n z-index: 2;\r\n}\r\n\r\n.chapter-marker:hover {\r\n background: var(--plex-primary);\r\n}\r\n\r\n/* Skip Intro Button */\r\n.skip-intro-btn {\r\n position: absolute;\r\n right: 20px;\r\n bottom: 100px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 20px;\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #000;\r\n border: none;\r\n border-radius: var(--plex-radius-md);\r\n font-size: 14px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n z-index: var(--plex-z-controls);\r\n transition: all var(--plex-transition-normal);\r\n}\r\n\r\n.skip-intro-btn:hover {\r\n background: #fff;\r\n transform: scale(1.02);\r\n}\r\n\r\n.skip-intro-btn .material-icons {\r\n font-size: 20px;\r\n}\r\n\r\n/* Double Tap Ripple Effect */\r\n.tap-ripple {\r\n position: absolute;\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translate(-50%, -50%) scale(0);\r\n animation: ripple 0.5s ease-out forwards;\r\n pointer-events: none;\r\n}\r\n\r\n@keyframes ripple {\r\n to {\r\n transform: translate(-50%, -50%) scale(2);\r\n opacity: 0;\r\n }\r\n}\r\n\r\n/* Responsive Controls */\r\n@media (max-width: 768px) {\r\n .top-controls {\r\n padding: 12px 16px;\r\n }\r\n \r\n .video-title {\r\n font-size: 14px;\r\n max-width: 200px;\r\n }\r\n \r\n .bottom-controls {\r\n padding: 0 12px 12px;\r\n }\r\n \r\n .control-btn {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n \r\n .control-btn .material-icons {\r\n font-size: 22px;\r\n }\r\n \r\n .play-btn {\r\n width: 44px;\r\n height: 44px;\r\n }\r\n \r\n .play-btn .material-icons {\r\n font-size: 28px;\r\n }\r\n \r\n .time-display {\r\n font-size: 12px;\r\n }\r\n \r\n .speed-text {\r\n font-size: 12px;\r\n }\r\n \r\n #preview-canvas {\r\n width: 120px;\r\n height: 68px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .controls-left,\r\n .controls-right {\r\n gap: 0;\r\n }\r\n \r\n .control-btn {\r\n width: 32px;\r\n height: 32px;\r\n }\r\n \r\n .control-btn .material-icons {\r\n font-size: 20px;\r\n }\r\n \r\n .video-title {\r\n max-width: 140px;\r\n font-size: 13px;\r\n }\r\n \r\n /* Hide some buttons on very small screens */\r\n #cast-btn,\r\n #quality-btn {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Hover/Focus States for Accessibility */\r\n.control-btn:focus-visible {\r\n outline: 2px solid var(--plex-primary);\r\n outline-offset: 2px;\r\n}\r\n\r\n.progress-container:focus-visible {\r\n outline: 2px solid var(--plex-primary);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Disabled State */\r\n.control-btn:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n}\r\n\r\n.control-btn:disabled:hover {\r\n background: transparent;\r\n}\r\n","/* =====================================================\r\n PLEX Video Player - Playlist Styles\r\n ===================================================== */\r\n\r\n/* Playlist Panel */\r\n.playlist-panel {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 360px;\r\n height: 100%;\r\n background: var(--plex-bg-dark);\r\n border-left: 1px solid var(--plex-border);\r\n z-index: var(--plex-z-panel);\r\n display: flex;\r\n flex-direction: column;\r\n transform: translateX(100%);\r\n transition: transform var(--plex-transition-normal);\r\n}\r\n\r\n.playlist-panel.visible {\r\n transform: translateX(0);\r\n}\r\n\r\n/* Playlist Header */\r\n.playlist-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px 20px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border-bottom: 1px solid var(--plex-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.playlist-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.playlist-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n/* Playlist Content */\r\n.playlist-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n padding: 12px;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar-thumb {\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 3px;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar-thumb:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Playlist Empty State */\r\n.playlist-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n padding: 40px;\r\n text-align: center;\r\n}\r\n\r\n.playlist-empty .material-icons {\r\n font-size: 64px;\r\n color: var(--plex-text-secondary);\r\n margin-bottom: 16px;\r\n opacity: 0.5;\r\n}\r\n\r\n.playlist-empty-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n margin-bottom: 8px;\r\n}\r\n\r\n.playlist-empty-text {\r\n font-size: 14px;\r\n color: var(--plex-text-secondary);\r\n line-height: 1.5;\r\n}\r\n\r\n/* Playlist Item */\r\n.playlist-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 10px 12px;\r\n background: rgba(255, 255, 255, 0.02);\r\n border-radius: var(--plex-radius-md);\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n margin-bottom: 8px;\r\n position: relative;\r\n}\r\n\r\n.playlist-item:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n}\r\n\r\n.playlist-item.active {\r\n background: rgba(229, 160, 13, 0.15);\r\n border: 1px solid rgba(229, 160, 13, 0.3);\r\n}\r\n\r\n.playlist-item.playing {\r\n background: rgba(229, 160, 13, 0.2);\r\n}\r\n\r\n.playlist-item.dragging {\r\n opacity: 0.5;\r\n transform: scale(0.98);\r\n}\r\n\r\n/* Playlist Item Thumbnail */\r\n.playlist-item-thumbnail {\r\n position: relative;\r\n width: 100px;\r\n height: 56px;\r\n background: var(--plex-bg-darker);\r\n border-radius: var(--plex-radius-sm);\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n}\r\n\r\n.playlist-item-thumbnail img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.playlist-item-thumbnail .placeholder-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 32px;\r\n color: var(--plex-text-secondary);\r\n opacity: 0.5;\r\n}\r\n\r\n.playlist-item-duration {\r\n position: absolute;\r\n bottom: 4px;\r\n right: 4px;\r\n padding: 2px 6px;\r\n background: rgba(0, 0, 0, 0.8);\r\n border-radius: 3px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Playing Indicator */\r\n.playlist-item-playing-indicator {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n display: none;\r\n align-items: flex-end;\r\n justify-content: center;\r\n gap: 2px;\r\n width: 24px;\r\n height: 20px;\r\n}\r\n\r\n.playlist-item.playing .playlist-item-playing-indicator {\r\n display: flex;\r\n}\r\n\r\n.playlist-item-playing-indicator span {\r\n width: 4px;\r\n background: var(--plex-primary);\r\n border-radius: 1px;\r\n animation: equalizer 0.5s ease-in-out infinite alternate;\r\n}\r\n\r\n.playlist-item-playing-indicator span:nth-child(1) {\r\n height: 60%;\r\n animation-delay: 0s;\r\n}\r\n\r\n.playlist-item-playing-indicator span:nth-child(2) {\r\n height: 100%;\r\n animation-delay: 0.15s;\r\n}\r\n\r\n.playlist-item-playing-indicator span:nth-child(3) {\r\n height: 40%;\r\n animation-delay: 0.3s;\r\n}\r\n\r\n@keyframes equalizer {\r\n from {\r\n transform: scaleY(0.5);\r\n }\r\n to {\r\n transform: scaleY(1);\r\n }\r\n}\r\n\r\n/* Playlist Item Info */\r\n.playlist-item-info {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.playlist-item-title {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--plex-text-primary);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.playlist-item-meta {\r\n font-size: 12px;\r\n color: var(--plex-text-secondary);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n/* Playlist Item Actions */\r\n.playlist-item-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n opacity: 0;\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-item:hover .playlist-item-actions {\r\n opacity: 1;\r\n}\r\n\r\n.playlist-item-action {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--plex-radius-sm);\r\n cursor: pointer;\r\n color: var(--plex-text-secondary);\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-item-action:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.playlist-item-action .material-icons {\r\n font-size: 18px;\r\n}\r\n\r\n/* Drag Handle */\r\n.playlist-item-drag-handle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n cursor: grab;\r\n color: var(--plex-text-secondary);\r\n opacity: 0;\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-item:hover .playlist-item-drag-handle {\r\n opacity: 1;\r\n}\r\n\r\n.playlist-item-drag-handle:active {\r\n cursor: grabbing;\r\n}\r\n\r\n.playlist-item-drag-handle .material-icons {\r\n font-size: 18px;\r\n}\r\n\r\n/* Playlist Footer */\r\n.playlist-footer {\r\n padding: 16px;\r\n border-top: 1px solid var(--plex-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.playlist-add-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n width: 100%;\r\n padding: 12px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 2px dashed var(--plex-border);\r\n border-radius: var(--plex-radius-md);\r\n color: var(--plex-text-secondary);\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-add-btn:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-color: var(--plex-primary);\r\n color: var(--plex-primary);\r\n}\r\n\r\n.playlist-add-btn .material-icons {\r\n font-size: 20px;\r\n}\r\n\r\n/* Playlist Stats */\r\n.playlist-stats {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: rgba(0, 0, 0, 0.3);\r\n border-top: 1px solid var(--plex-border);\r\n font-size: 12px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n/* Queue Next Indicator */\r\n.playlist-item-queue-next {\r\n position: absolute;\r\n top: 4px;\r\n left: 4px;\r\n padding: 2px 6px;\r\n background: var(--plex-primary);\r\n border-radius: 3px;\r\n font-size: 9px;\r\n font-weight: 700;\r\n color: #000;\r\n text-transform: uppercase;\r\n}\r\n\r\n/* Responsive Playlist */\r\n@media (max-width: 768px) {\r\n .playlist-panel {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n \r\n .playlist-item-thumbnail {\r\n width: 80px;\r\n height: 45px;\r\n }\r\n \r\n .playlist-item-title {\r\n font-size: 13px;\r\n }\r\n \r\n .playlist-item-actions {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .playlist-header {\r\n padding: 12px 16px;\r\n }\r\n \r\n .playlist-content {\r\n padding: 8px;\r\n }\r\n \r\n .playlist-item {\r\n padding: 8px;\r\n gap: 10px;\r\n }\r\n \r\n .playlist-item-thumbnail {\r\n width: 70px;\r\n height: 40px;\r\n }\r\n \r\n .playlist-item-drag-handle {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Drag and Drop States */\r\n.playlist-content.drag-over {\r\n background: rgba(229, 160, 13, 0.05);\r\n}\r\n\r\n.playlist-item.drop-target-above::before {\r\n content: '';\r\n position: absolute;\r\n top: -4px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: var(--plex-primary);\r\n border-radius: 1px;\r\n}\r\n\r\n.playlist-item.drop-target-below::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: var(--plex-primary);\r\n border-radius: 1px;\r\n}\r\n","/* =====================================================\r\n PLEX Video Player - Settings Styles\r\n ===================================================== */\r\n\r\n/* Settings Panel */\r\n.settings-panel {\r\n position: absolute;\r\n bottom: 80px;\r\n right: 20px;\r\n width: 300px;\r\n max-height: 400px;\r\n background: var(--plex-bg-dark);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-lg);\r\n box-shadow: var(--plex-shadow);\r\n z-index: var(--plex-z-panel);\r\n overflow: hidden;\r\n transform-origin: bottom right;\r\n animation: settingsOpen 0.2s ease;\r\n}\r\n\r\n@keyframes settingsOpen {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n/* Settings Header */\r\n.settings-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border-bottom: 1px solid var(--plex-border);\r\n}\r\n\r\n.settings-title {\r\n font-size: 15px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Settings Content */\r\n.settings-content {\r\n max-height: 340px;\r\n overflow-y: auto;\r\n}\r\n\r\n.settings-content::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.settings-content::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.settings-content::-webkit-scrollbar-thumb {\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 3px;\r\n}\r\n\r\n/* Settings Menu */\r\n.settings-menu {\r\n padding: 8px 0;\r\n}\r\n\r\n/* Settings Item */\r\n.settings-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n cursor: pointer;\r\n transition: background var(--plex-transition-fast);\r\n}\r\n\r\n.settings-item:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.settings-item .material-icons:first-child {\r\n font-size: 22px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.settings-item-label {\r\n flex: 1;\r\n font-size: 14px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.settings-item-value {\r\n font-size: 13px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.settings-item .material-icons:last-child {\r\n font-size: 20px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n/* Settings Submenu */\r\n.settings-submenu {\r\n padding: 8px 0;\r\n}\r\n\r\n/* Settings Option */\r\n.settings-option {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n cursor: pointer;\r\n transition: background var(--plex-transition-fast);\r\n font-size: 14px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.settings-option:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.settings-option.active {\r\n color: var(--plex-primary);\r\n}\r\n\r\n.settings-option.active::after {\r\n content: 'check';\r\n font-family: 'Material Icons';\r\n font-size: 20px;\r\n color: var(--plex-primary);\r\n}\r\n\r\n/* Toggle Switch */\r\n.toggle-switch {\r\n position: relative;\r\n width: 44px;\r\n height: 24px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 12px;\r\n cursor: pointer;\r\n transition: background var(--plex-transition-fast);\r\n}\r\n\r\n.toggle-switch.active {\r\n background: var(--plex-primary);\r\n}\r\n\r\n.toggle-slider {\r\n position: absolute;\r\n top: 2px;\r\n left: 2px;\r\n width: 20px;\r\n height: 20px;\r\n background: #fff;\r\n border-radius: 50%;\r\n transition: transform var(--plex-transition-fast);\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.toggle-switch.active .toggle-slider {\r\n transform: translateX(20px);\r\n}\r\n\r\n/* Subtitles Settings Panel */\r\n.subtitles-settings-panel {\r\n position: absolute;\r\n bottom: 80px;\r\n right: 20px;\r\n width: 320px;\r\n background: var(--plex-bg-dark);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-lg);\r\n box-shadow: var(--plex-shadow);\r\n z-index: var(--plex-z-panel);\r\n overflow: hidden;\r\n}\r\n\r\n.subtitles-settings-content {\r\n padding: 16px;\r\n}\r\n\r\n/* Subtitle Setting Item */\r\n.subtitle-setting-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.subtitle-setting-item label {\r\n flex: 0 0 100px;\r\n font-size: 13px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.subtitle-setting-item input[type=\"range\"] {\r\n flex: 1;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n outline: none;\r\n}\r\n\r\n.subtitle-setting-item input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n cursor: pointer;\r\n}\r\n\r\n.subtitle-setting-item input[type=\"color\"] {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 40px;\r\n height: 30px;\r\n border: none;\r\n border-radius: var(--plex-radius-sm);\r\n cursor: pointer;\r\n background: transparent;\r\n}\r\n\r\n.subtitle-setting-item input[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n padding: 0;\r\n}\r\n\r\n.subtitle-setting-item input[type=\"color\"]::-webkit-color-swatch {\r\n border: 2px solid var(--plex-border);\r\n border-radius: var(--plex-radius-sm);\r\n}\r\n\r\n.subtitle-setting-item span:last-child {\r\n flex: 0 0 50px;\r\n text-align: right;\r\n font-size: 13px;\r\n color: var(--plex-text-primary);\r\n font-weight: 500;\r\n}\r\n\r\n/* Subtitle Load Button */\r\n.subtitle-load-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n width: 100%;\r\n padding: 12px;\r\n margin-top: 8px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-md);\r\n color: var(--plex-text-primary);\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.subtitle-load-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: var(--plex-primary);\r\n}\r\n\r\n.subtitle-load-btn .material-icons {\r\n font-size: 20px;\r\n}\r\n\r\n/* Speed Panel (Alternative) */\r\n.speed-panel {\r\n position: absolute;\r\n bottom: 80px;\r\n right: 60px;\r\n width: 200px;\r\n background: var(--plex-bg-dark);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-lg);\r\n box-shadow: var(--plex-shadow);\r\n z-index: var(--plex-z-panel);\r\n overflow: hidden;\r\n padding: 8px 0;\r\n}\r\n\r\n/* Quality Badge */\r\n.quality-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 2px 6px;\r\n background: var(--plex-primary);\r\n border-radius: 3px;\r\n font-size: 10px;\r\n font-weight: 700;\r\n color: #000;\r\n text-transform: uppercase;\r\n margin-left: 8px;\r\n}\r\n\r\n/* Section Divider */\r\n.settings-divider {\r\n height: 1px;\r\n background: var(--plex-border);\r\n margin: 8px 16px;\r\n}\r\n\r\n/* Settings Group Label */\r\n.settings-group-label {\r\n padding: 8px 16px 4px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: var(--plex-text-secondary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n}\r\n\r\n/* Responsive Settings */\r\n@media (max-width: 768px) {\r\n .settings-panel {\r\n position: fixed;\r\n top: auto;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n max-height: 60vh;\r\n border-radius: var(--plex-radius-lg) var(--plex-radius-lg) 0 0;\r\n transform-origin: bottom center;\r\n }\r\n \r\n .subtitles-settings-panel {\r\n position: fixed;\r\n top: auto;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n width: 100%;\r\n max-height: 70vh;\r\n border-radius: var(--plex-radius-lg) var(--plex-radius-lg) 0 0;\r\n }\r\n \r\n .settings-item {\r\n padding: 14px 20px;\r\n }\r\n \r\n .settings-option {\r\n padding: 14px 20px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .settings-content {\r\n max-height: 50vh;\r\n }\r\n \r\n .subtitle-setting-item {\r\n flex-wrap: wrap;\r\n }\r\n \r\n .subtitle-setting-item label {\r\n flex: 0 0 100%;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .subtitle-setting-item input[type=\"range\"] {\r\n flex: 1;\r\n }\r\n}\r\n\r\n/* Animation for panel open/close */\r\n.settings-panel.closing {\r\n animation: settingsClose 0.15s ease forwards;\r\n}\r\n\r\n@keyframes settingsClose {\r\n from {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n to {\r\n opacity: 0;\r\n transform: scale(0.95);\r\n }\r\n}\r\n\r\n/* Keyboard Shortcut Hints */\r\n.shortcut-hint {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 24px;\r\n height: 24px;\r\n padding: 0 6px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid var(--plex-border);\r\n border-radius: 4px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: var(--plex-text-secondary);\r\n margin-left: auto;\r\n}\r\n\r\n/* Audio Track Indicator */\r\n.audio-track-indicator {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n font-size: 12px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.audio-track-indicator .material-icons {\r\n font-size: 16px;\r\n}\r\n"]}
1
+ {"version":3,"sources":["main.css","controls.css","playlist.css","settings.css"],"names":[],"mappings":"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","file":"plex-player.css","sourcesContent":["/* =====================================================\r\n PLEX Video Player - Main Styles\r\n ===================================================== */\r\n\r\n/* CSS Variables - scoped to player */\r\n.plex-player,\r\n.plex-player-container {\r\n --plex-primary: #e5a00d;\r\n --plex-primary-hover: #f5b82e;\r\n --plex-bg-dark: #1a1a1a;\r\n --plex-bg-darker: #0d0d0d;\r\n --plex-bg-overlay: rgba(0, 0, 0, 0.85);\r\n --plex-text-primary: #ffffff;\r\n --plex-text-secondary: #a0a0a0;\r\n --plex-border: rgba(255, 255, 255, 0.1);\r\n --plex-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);\r\n --plex-gradient-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);\r\n --plex-transition-fast: 0.15s ease;\r\n --plex-transition-normal: 0.25s ease;\r\n --plex-transition-slow: 0.4s ease;\r\n --plex-radius-sm: 4px;\r\n --plex-radius-md: 8px;\r\n --plex-radius-lg: 12px;\r\n --plex-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\r\n --plex-z-video: 1;\r\n --plex-z-overlay: 10;\r\n --plex-z-controls: 20;\r\n --plex-z-panel: 30;\r\n --plex-z-modal: 40;\r\n --plex-z-toast: 50;\r\n}\r\n\r\n/* Scoped Reset - only inside player */\r\n.plex-player *,\r\n.plex-player *::before,\r\n.plex-player *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n/* Player Container Wrapper */\r\n.plex-player-container {\r\n position: relative;\r\n width: 100%;\r\n aspect-ratio: 16 / 9;\r\n background: var(--plex-bg-darker);\r\n border-radius: var(--plex-radius-md);\r\n overflow: hidden;\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n/* Player Container */\r\n.plex-player {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n background: var(--plex-bg-darker);\r\n overflow: hidden;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -webkit-tap-highlight-color: transparent;\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-player.plex-fullscreen {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n z-index: 9999;\r\n border-radius: 0;\r\n}\r\n\r\n/* Video Container */\r\n.video-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #000;\r\n z-index: var(--plex-z-video);\r\n}\r\n\r\n.video-container video {\r\n width: 100%;\r\n height: 100%;\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n background: #000;\r\n}\r\n\r\n/* Controls Visibility */\r\n.plex-player.controls-visible .top-controls,\r\n.plex-player.controls-visible .bottom-controls {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n}\r\n\r\n.plex-player:not(.controls-visible) .top-controls,\r\n.plex-player:not(.controls-visible) .bottom-controls {\r\n opacity: 0;\r\n visibility: hidden;\r\n}\r\n\r\n.plex-player:not(.controls-visible) .top-controls {\r\n transform: translateY(-100%);\r\n}\r\n\r\n.plex-player:not(.controls-visible) .bottom-controls {\r\n transform: translateY(100%);\r\n}\r\n\r\n/* Cursor hiding */\r\n.plex-player.hide-cursor {\r\n cursor: none;\r\n}\r\n\r\n.plex-player.hide-cursor video {\r\n cursor: none;\r\n}\r\n\r\n/* Loading Spinner */\r\n.loading-spinner {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: var(--plex-z-overlay);\r\n}\r\n\r\n.loading-spinner .spinner {\r\n width: 60px;\r\n height: 60px;\r\n border: 4px solid rgba(255, 255, 255, 0.2);\r\n border-top-color: var(--plex-primary);\r\n border-radius: 50%;\r\n animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Big Play Button */\r\n.big-play-btn {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(1);\r\n width: 80px;\r\n height: 80px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: var(--plex-z-overlay);\r\n transition: all var(--plex-transition-normal);\r\n box-shadow: 0 4px 30px rgba(229, 160, 13, 0.4);\r\n}\r\n\r\n.big-play-btn:hover {\r\n transform: translate(-50%, -50%) scale(1.1);\r\n background: var(--plex-primary-hover);\r\n}\r\n\r\n.big-play-btn .material-icons {\r\n font-size: 48px;\r\n color: #000;\r\n margin-left: 4px;\r\n}\r\n\r\n.big-play-btn.hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translate(-50%, -50%) scale(0.8);\r\n}\r\n\r\n/* Gesture Overlay */\r\n.gesture-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n z-index: var(--plex-z-overlay);\r\n pointer-events: none;\r\n}\r\n\r\n.gesture-left,\r\n.gesture-right {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.gesture-center {\r\n flex: 1;\r\n}\r\n\r\n.gesture-indicator {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 20px;\r\n background: rgba(0, 0, 0, 0.7);\r\n border-radius: var(--plex-radius-lg);\r\n opacity: 0;\r\n transform: scale(0.8);\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.gesture-indicator.active {\r\n opacity: 1;\r\n transform: scale(1);\r\n}\r\n\r\n.gesture-indicator .material-icons {\r\n font-size: 48px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.gesture-indicator .gesture-text {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Volume/Brightness Indicators */\r\n.volume-indicator,\r\n.brightness-indicator {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 24px;\r\n background: rgba(0, 0, 0, 0.8);\r\n border-radius: var(--plex-radius-lg);\r\n z-index: var(--plex-z-overlay);\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.volume-indicator .material-icons,\r\n.brightness-indicator .material-icons {\r\n font-size: 36px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.volume-indicator-bar,\r\n.brightness-indicator-bar {\r\n width: 120px;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n}\r\n\r\n.volume-indicator-fill,\r\n.brightness-indicator-fill {\r\n height: 100%;\r\n background: var(--plex-primary);\r\n border-radius: 2px;\r\n transition: width var(--plex-transition-fast);\r\n}\r\n\r\n/* Subtitles Container */\r\n.subtitles-container {\r\n position: absolute;\r\n bottom: 80px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80%;\r\n max-width: 800px;\r\n text-align: center;\r\n z-index: var(--plex-z-overlay);\r\n pointer-events: none;\r\n}\r\n\r\n.subtitle-line {\r\n display: inline-block;\r\n padding: 8px 16px;\r\n margin: 4px 0;\r\n background: rgba(0, 0, 0, 0.75);\r\n border-radius: var(--plex-radius-sm);\r\n font-size: 24px;\r\n line-height: 1.4;\r\n color: #fff;\r\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);\r\n}\r\n\r\n/* Cast Overlay */\r\n.cast-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: var(--plex-bg-darker);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: var(--plex-z-overlay);\r\n}\r\n\r\n.cast-overlay.hidden {\r\n display: none;\r\n}\r\n\r\n.cast-overlay-content {\r\n text-align: center;\r\n animation: castPulse 2s ease-in-out infinite;\r\n}\r\n\r\n.cast-overlay .cast-icon {\r\n font-size: 80px;\r\n color: var(--plex-primary);\r\n margin-bottom: 24px;\r\n}\r\n\r\n.cast-overlay .cast-title {\r\n font-size: 18px;\r\n color: var(--plex-text-secondary);\r\n margin-bottom: 8px;\r\n}\r\n\r\n.cast-overlay .cast-device {\r\n font-size: 28px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n margin-bottom: 16px;\r\n}\r\n\r\n.cast-overlay .cast-video {\r\n font-size: 16px;\r\n color: var(--plex-text-secondary);\r\n max-width: 300px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n@keyframes castPulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.7; }\r\n}\r\n\r\n/* Utility Classes */\r\n.hidden {\r\n display: none !important;\r\n}\r\n\r\n.visually-hidden {\r\n opacity: 0;\r\n visibility: hidden;\r\n}\r\n\r\n/* Toast Notification */\r\n.toast {\r\n position: absolute;\r\n bottom: 100px;\r\n left: 50%;\r\n transform: translateX(-50%) translateY(20px);\r\n background: var(--plex-bg-overlay);\r\n padding: 12px 24px;\r\n border-radius: var(--plex-radius-md);\r\n z-index: var(--plex-z-toast);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all var(--plex-transition-normal);\r\n}\r\n\r\n.toast.show {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateX(-50%) translateY(0);\r\n}\r\n\r\n.toast-message {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Context Menu */\r\n.context-menu {\r\n position: fixed;\r\n min-width: 200px;\r\n background: var(--plex-bg-dark);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-md);\r\n box-shadow: var(--plex-shadow);\r\n z-index: var(--plex-z-modal);\r\n overflow: hidden;\r\n}\r\n\r\n.context-menu-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n cursor: pointer;\r\n transition: background var(--plex-transition-fast);\r\n}\r\n\r\n.context-menu-item:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.context-menu-item .material-icons {\r\n font-size: 20px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.context-menu-item span:last-child {\r\n font-size: 14px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.context-menu-divider {\r\n height: 1px;\r\n background: var(--plex-border);\r\n margin: 4px 0;\r\n}\r\n\r\n/* Stats Overlay */\r\n.stats-overlay {\r\n position: absolute;\r\n top: 80px;\r\n left: 20px;\r\n width: 280px;\r\n background: var(--plex-bg-overlay);\r\n border-radius: var(--plex-radius-md);\r\n z-index: var(--plex-z-panel);\r\n overflow: hidden;\r\n}\r\n\r\n.stats-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-bottom: 1px solid var(--plex-border);\r\n font-size: 14px;\r\n font-weight: 600;\r\n}\r\n\r\n.stats-content {\r\n padding: 12px 16px;\r\n}\r\n\r\n.stat-item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 8px 0;\r\n font-size: 13px;\r\n border-bottom: 1px solid var(--plex-border);\r\n}\r\n\r\n.stat-item:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.stat-label {\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n.stat-value {\r\n color: var(--plex-text-primary);\r\n font-weight: 500;\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 768px) {\r\n .big-play-btn {\r\n width: 64px;\r\n height: 64px;\r\n }\r\n \r\n .big-play-btn .material-icons {\r\n font-size: 36px;\r\n }\r\n \r\n .subtitle-line {\r\n font-size: 18px;\r\n padding: 6px 12px;\r\n }\r\n \r\n .subtitles-container {\r\n width: 90%;\r\n bottom: 70px;\r\n }\r\n \r\n .gesture-indicator .material-icons {\r\n font-size: 36px;\r\n }\r\n \r\n .stats-overlay {\r\n top: 60px;\r\n left: 10px;\r\n width: 240px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .big-play-btn {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n \r\n .big-play-btn .material-icons {\r\n font-size: 32px;\r\n }\r\n \r\n .subtitle-line {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n/* Touch Device Optimizations */\r\n@media (hover: none) and (pointer: coarse) {\r\n .control-btn {\r\n min-width: 44px;\r\n min-height: 44px;\r\n }\r\n \r\n .volume-slider-container {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Animations */\r\n@keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@keyframes slideUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0%, 100% {\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n 50% {\r\n transform: translate(-50%, -50%) scale(1.05);\r\n }\r\n}\r\n","/* =====================================================\r\n PLEX Video Player - Controls Styles (NPM Package)\r\n ===================================================== */\r\n\r\n/* Video Element */\r\n.plex-video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n background: #000;\r\n}\r\n\r\n/* Controls Container */\r\n.plex-controls {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n padding: 0 16px 16px;\r\n background: var(--plex-gradient);\r\n z-index: var(--plex-z-controls);\r\n transition: opacity var(--plex-transition-normal), visibility var(--plex-transition-normal);\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n.plex-player:not(.plex-controls-visible) .plex-controls {\r\n opacity: 0;\r\n visibility: hidden;\r\n}\r\n\r\n/* Progress Container */\r\n.plex-progress-container {\r\n position: relative;\r\n width: 100%;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 8px 0;\r\n}\r\n\r\n.plex-progress-bar {\r\n position: relative;\r\n width: 100%;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n overflow: visible;\r\n transition: height var(--plex-transition-fast);\r\n}\r\n\r\n.plex-progress-container:hover .plex-progress-bar {\r\n height: 6px;\r\n}\r\n\r\n.plex-progress-buffered {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n background: rgba(255, 255, 255, 0.35);\r\n border-radius: 2px;\r\n pointer-events: none;\r\n width: 0;\r\n}\r\n\r\n.plex-progress-played {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n background: var(--plex-primary);\r\n border-radius: 2px;\r\n pointer-events: none;\r\n width: 0;\r\n}\r\n\r\n.plex-progress-handle {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n width: 14px;\r\n height: 14px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%) scale(0);\r\n transition: transform var(--plex-transition-fast);\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\r\n pointer-events: none;\r\n}\r\n\r\n.plex-progress-container:hover .plex-progress-handle {\r\n transform: translate(-50%, -50%) scale(1);\r\n}\r\n\r\n/* Progress Preview */\r\n.plex-progress-preview {\r\n position: absolute;\r\n bottom: 100%;\r\n left: 0;\r\n margin-bottom: 8px;\r\n padding: 6px 10px;\r\n background: var(--plex-bg-dark);\r\n border-radius: var(--plex-radius-sm);\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateX(-50%);\r\n transition: opacity var(--plex-transition-fast);\r\n pointer-events: none;\r\n z-index: 50;\r\n}\r\n\r\n.plex-progress-container:hover .plex-progress-preview {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n.plex-preview-time {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n white-space: nowrap;\r\n}\r\n\r\n/* Controls Bar */\r\n.plex-controls-bar {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-top: 8px;\r\n}\r\n\r\n.plex-controls-left,\r\n.plex-controls-right {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n/* Control Button */\r\n.plex-btn {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n padding: 0;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--plex-radius-sm);\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-btn:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.plex-btn:active {\r\n transform: scale(0.95);\r\n}\r\n\r\n.plex-btn svg {\r\n width: 24px;\r\n height: 24px;\r\n fill: currentColor;\r\n}\r\n\r\n.plex-btn:focus-visible {\r\n outline: 2px solid var(--plex-primary);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Play Button States */\r\n.plex-player.plex-playing .plex-play-btn .plex-icon-play {\r\n display: none;\r\n}\r\n\r\n.plex-player.plex-playing .plex-play-btn .plex-icon-pause {\r\n display: block;\r\n}\r\n\r\n.plex-player:not(.plex-playing) .plex-play-btn .plex-icon-play {\r\n display: block;\r\n}\r\n\r\n.plex-player:not(.plex-playing) .plex-play-btn .plex-icon-pause {\r\n display: none;\r\n}\r\n\r\n/* Volume Container */\r\n.plex-volume-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n.plex-volume-slider {\r\n position: relative;\r\n width: 0;\r\n overflow: hidden;\r\n transition: width var(--plex-transition-normal);\r\n}\r\n\r\n.plex-volume-container:hover .plex-volume-slider {\r\n width: 80px;\r\n}\r\n\r\n.plex-volume-track {\r\n position: relative;\r\n width: 80px;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 2px;\r\n cursor: pointer;\r\n}\r\n\r\n.plex-volume-level {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n height: 100%;\r\n background: var(--plex-primary);\r\n border-radius: 2px;\r\n pointer-events: none;\r\n width: 100%;\r\n}\r\n\r\n.plex-volume-handle {\r\n position: absolute;\r\n top: 50%;\r\n right: 0;\r\n width: 12px;\r\n height: 12px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n transform: translateY(-50%);\r\n cursor: pointer;\r\n opacity: 0;\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.plex-volume-container:hover .plex-volume-handle {\r\n opacity: 1;\r\n}\r\n\r\n/* Volume Button States */\r\n.plex-player.plex-muted .plex-icon-volume-high,\r\n.plex-player.plex-muted .plex-icon-volume-low {\r\n display: none;\r\n}\r\n\r\n.plex-player.plex-muted .plex-icon-volume-mute {\r\n display: block;\r\n}\r\n\r\n.plex-player:not(.plex-muted) .plex-icon-volume-mute {\r\n display: none;\r\n}\r\n\r\n.plex-player:not(.plex-muted) .plex-icon-volume-high {\r\n display: block;\r\n}\r\n\r\n.plex-player:not(.plex-muted) .plex-icon-volume-low {\r\n display: none;\r\n}\r\n\r\n/* Time Display */\r\n.plex-time {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n margin-left: 8px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-time-current,\r\n.plex-time-duration {\r\n font-variant-numeric: tabular-nums;\r\n}\r\n\r\n.plex-time-separator {\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n/* Fullscreen Button States */\r\n.plex-player.plex-fullscreen .plex-icon-fullscreen {\r\n display: none;\r\n}\r\n\r\n.plex-player.plex-fullscreen .plex-icon-fullscreen-exit {\r\n display: block;\r\n}\r\n\r\n.plex-player:not(.plex-fullscreen) .plex-icon-fullscreen {\r\n display: block;\r\n}\r\n\r\n.plex-player:not(.plex-fullscreen) .plex-icon-fullscreen-exit {\r\n display: none;\r\n}\r\n\r\n/* Big Play Button */\r\n.plex-big-play {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(1);\r\n width: 72px;\r\n height: 72px;\r\n background: var(--plex-primary);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: var(--plex-z-overlay);\r\n transition: all var(--plex-transition-normal);\r\n box-shadow: 0 4px 30px rgba(229, 160, 13, 0.4);\r\n}\r\n\r\n.plex-big-play:hover {\r\n transform: translate(-50%, -50%) scale(1.1);\r\n background: var(--plex-primary-hover);\r\n}\r\n\r\n.plex-big-play svg {\r\n width: 40px;\r\n height: 40px;\r\n fill: #000;\r\n margin-left: 4px;\r\n}\r\n\r\n.plex-player.plex-playing .plex-big-play {\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translate(-50%, -50%) scale(0.8);\r\n}\r\n\r\n/* Loader */\r\n.plex-loader {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: var(--plex-z-overlay);\r\n display: none;\r\n}\r\n\r\n.plex-player.plex-loading .plex-loader {\r\n display: block;\r\n}\r\n\r\n.plex-player.plex-loading .plex-big-play {\r\n display: none;\r\n}\r\n\r\n.plex-spinner {\r\n width: 48px;\r\n height: 48px;\r\n border: 4px solid rgba(255, 255, 255, 0.2);\r\n border-top-color: var(--plex-primary);\r\n border-radius: 50%;\r\n animation: plex-spin 1s linear infinite;\r\n}\r\n\r\n@keyframes plex-spin {\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 768px) {\r\n .plex-controls {\r\n padding: 0 12px 12px;\r\n }\r\n \r\n .plex-btn {\r\n width: 36px;\r\n height: 36px;\r\n }\r\n \r\n .plex-btn svg {\r\n width: 22px;\r\n height: 22px;\r\n }\r\n \r\n .plex-time {\r\n font-size: 12px;\r\n }\r\n \r\n .plex-big-play {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n \r\n .plex-big-play svg {\r\n width: 32px;\r\n height: 32px;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .plex-controls-left,\r\n .plex-controls-right {\r\n gap: 0;\r\n }\r\n \r\n .plex-btn {\r\n width: 32px;\r\n height: 32px;\r\n }\r\n \r\n .plex-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n \r\n .plex-prev-btn,\r\n .plex-next-btn,\r\n .plex-cast-btn {\r\n display: none;\r\n }\r\n \r\n .plex-big-play {\r\n width: 56px;\r\n height: 56px;\r\n }\r\n \r\n .plex-big-play svg {\r\n width: 28px;\r\n height: 28px;\r\n }\r\n}\r\n\r\n/* Controls Visibility */\r\n.plex-player.plex-controls-visible .plex-controls {\r\n opacity: 1;\r\n visibility: visible;\r\n}\r\n\r\n/* Cursor hiding when controls hidden */\r\n.plex-player:not(.plex-controls-visible) {\r\n cursor: none;\r\n}\r\n\r\n.plex-player:not(.plex-controls-visible) .plex-video {\r\n cursor: none;\r\n}\r\n","/* =====================================================\r\n PLEX Video Player - Playlist Styles\r\n ===================================================== */\r\n\r\n/* Playlist Panel */\r\n.playlist-panel {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 360px;\r\n height: 100%;\r\n background: var(--plex-bg-dark);\r\n border-left: 1px solid var(--plex-border);\r\n z-index: var(--plex-z-panel);\r\n display: flex;\r\n flex-direction: column;\r\n transform: translateX(100%);\r\n transition: transform var(--plex-transition-normal);\r\n}\r\n\r\n.playlist-panel.visible {\r\n transform: translateX(0);\r\n}\r\n\r\n/* Playlist Header */\r\n.playlist-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 16px 20px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border-bottom: 1px solid var(--plex-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.playlist-title {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.playlist-header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n}\r\n\r\n/* Playlist Content */\r\n.playlist-content {\r\n flex: 1;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n padding: 12px;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar {\r\n width: 6px;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar-track {\r\n background: transparent;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar-thumb {\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 3px;\r\n}\r\n\r\n.playlist-content::-webkit-scrollbar-thumb:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n/* Playlist Empty State */\r\n.playlist-empty {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n padding: 40px;\r\n text-align: center;\r\n}\r\n\r\n.playlist-empty .material-icons {\r\n font-size: 64px;\r\n color: var(--plex-text-secondary);\r\n margin-bottom: 16px;\r\n opacity: 0.5;\r\n}\r\n\r\n.playlist-empty-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n margin-bottom: 8px;\r\n}\r\n\r\n.playlist-empty-text {\r\n font-size: 14px;\r\n color: var(--plex-text-secondary);\r\n line-height: 1.5;\r\n}\r\n\r\n/* Playlist Item */\r\n.playlist-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 10px 12px;\r\n background: rgba(255, 255, 255, 0.02);\r\n border-radius: var(--plex-radius-md);\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n margin-bottom: 8px;\r\n position: relative;\r\n}\r\n\r\n.playlist-item:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n}\r\n\r\n.playlist-item.active {\r\n background: rgba(229, 160, 13, 0.15);\r\n border: 1px solid rgba(229, 160, 13, 0.3);\r\n}\r\n\r\n.playlist-item.playing {\r\n background: rgba(229, 160, 13, 0.2);\r\n}\r\n\r\n.playlist-item.dragging {\r\n opacity: 0.5;\r\n transform: scale(0.98);\r\n}\r\n\r\n/* Playlist Item Thumbnail */\r\n.playlist-item-thumbnail {\r\n position: relative;\r\n width: 100px;\r\n height: 56px;\r\n background: var(--plex-bg-darker);\r\n border-radius: var(--plex-radius-sm);\r\n overflow: hidden;\r\n flex-shrink: 0;\r\n}\r\n\r\n.playlist-item-thumbnail img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.playlist-item-thumbnail .placeholder-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-size: 32px;\r\n color: var(--plex-text-secondary);\r\n opacity: 0.5;\r\n}\r\n\r\n.playlist-item-duration {\r\n position: absolute;\r\n bottom: 4px;\r\n right: 4px;\r\n padding: 2px 6px;\r\n background: rgba(0, 0, 0, 0.8);\r\n border-radius: 3px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n/* Playing Indicator */\r\n.playlist-item-playing-indicator {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n display: none;\r\n align-items: flex-end;\r\n justify-content: center;\r\n gap: 2px;\r\n width: 24px;\r\n height: 20px;\r\n}\r\n\r\n.playlist-item.playing .playlist-item-playing-indicator {\r\n display: flex;\r\n}\r\n\r\n.playlist-item-playing-indicator span {\r\n width: 4px;\r\n background: var(--plex-primary);\r\n border-radius: 1px;\r\n animation: equalizer 0.5s ease-in-out infinite alternate;\r\n}\r\n\r\n.playlist-item-playing-indicator span:nth-child(1) {\r\n height: 60%;\r\n animation-delay: 0s;\r\n}\r\n\r\n.playlist-item-playing-indicator span:nth-child(2) {\r\n height: 100%;\r\n animation-delay: 0.15s;\r\n}\r\n\r\n.playlist-item-playing-indicator span:nth-child(3) {\r\n height: 40%;\r\n animation-delay: 0.3s;\r\n}\r\n\r\n@keyframes equalizer {\r\n from {\r\n transform: scaleY(0.5);\r\n }\r\n to {\r\n transform: scaleY(1);\r\n }\r\n}\r\n\r\n/* Playlist Item Info */\r\n.playlist-item-info {\r\n flex: 1;\r\n min-width: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.playlist-item-title {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--plex-text-primary);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.playlist-item-meta {\r\n font-size: 12px;\r\n color: var(--plex-text-secondary);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n/* Playlist Item Actions */\r\n.playlist-item-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n opacity: 0;\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-item:hover .playlist-item-actions {\r\n opacity: 1;\r\n}\r\n\r\n.playlist-item-action {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--plex-radius-sm);\r\n cursor: pointer;\r\n color: var(--plex-text-secondary);\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-item-action:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.playlist-item-action .material-icons {\r\n font-size: 18px;\r\n}\r\n\r\n/* Drag Handle */\r\n.playlist-item-drag-handle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 20px;\r\n cursor: grab;\r\n color: var(--plex-text-secondary);\r\n opacity: 0;\r\n transition: opacity var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-item:hover .playlist-item-drag-handle {\r\n opacity: 1;\r\n}\r\n\r\n.playlist-item-drag-handle:active {\r\n cursor: grabbing;\r\n}\r\n\r\n.playlist-item-drag-handle .material-icons {\r\n font-size: 18px;\r\n}\r\n\r\n/* Playlist Footer */\r\n.playlist-footer {\r\n padding: 16px;\r\n border-top: 1px solid var(--plex-border);\r\n flex-shrink: 0;\r\n}\r\n\r\n.playlist-add-btn {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n width: 100%;\r\n padding: 12px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 2px dashed var(--plex-border);\r\n border-radius: var(--plex-radius-md);\r\n color: var(--plex-text-secondary);\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.playlist-add-btn:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-color: var(--plex-primary);\r\n color: var(--plex-primary);\r\n}\r\n\r\n.playlist-add-btn .material-icons {\r\n font-size: 20px;\r\n}\r\n\r\n/* Playlist Stats */\r\n.playlist-stats {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: rgba(0, 0, 0, 0.3);\r\n border-top: 1px solid var(--plex-border);\r\n font-size: 12px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n/* Queue Next Indicator */\r\n.playlist-item-queue-next {\r\n position: absolute;\r\n top: 4px;\r\n left: 4px;\r\n padding: 2px 6px;\r\n background: var(--plex-primary);\r\n border-radius: 3px;\r\n font-size: 9px;\r\n font-weight: 700;\r\n color: #000;\r\n text-transform: uppercase;\r\n}\r\n\r\n/* Responsive Playlist */\r\n@media (max-width: 768px) {\r\n .playlist-panel {\r\n width: 100%;\r\n max-width: 100%;\r\n }\r\n \r\n .playlist-item-thumbnail {\r\n width: 80px;\r\n height: 45px;\r\n }\r\n \r\n .playlist-item-title {\r\n font-size: 13px;\r\n }\r\n \r\n .playlist-item-actions {\r\n opacity: 1;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .playlist-header {\r\n padding: 12px 16px;\r\n }\r\n \r\n .playlist-content {\r\n padding: 8px;\r\n }\r\n \r\n .playlist-item {\r\n padding: 8px;\r\n gap: 10px;\r\n }\r\n \r\n .playlist-item-thumbnail {\r\n width: 70px;\r\n height: 40px;\r\n }\r\n \r\n .playlist-item-drag-handle {\r\n display: none;\r\n }\r\n}\r\n\r\n/* Drag and Drop States */\r\n.playlist-content.drag-over {\r\n background: rgba(229, 160, 13, 0.05);\r\n}\r\n\r\n.playlist-item.drop-target-above::before {\r\n content: '';\r\n position: absolute;\r\n top: -4px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: var(--plex-primary);\r\n border-radius: 1px;\r\n}\r\n\r\n.playlist-item.drop-target-below::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: var(--plex-primary);\r\n border-radius: 1px;\r\n}\r\n","/* =====================================================\r\n PLEX Video Player - Settings Styles (NPM Package)\r\n ===================================================== */\r\n\r\n/* Settings Panel */\r\n.plex-settings-panel {\r\n position: absolute;\r\n bottom: 80px;\r\n right: 16px;\r\n width: 280px;\r\n max-height: 400px;\r\n background: var(--plex-bg-dark);\r\n border: 1px solid var(--plex-border);\r\n border-radius: var(--plex-radius-lg);\r\n box-shadow: var(--plex-shadow);\r\n z-index: var(--plex-z-panel);\r\n overflow: hidden;\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: scale(0.95) translateY(10px);\r\n transform-origin: bottom right;\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.plex-settings-panel.plex-settings-open {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: scale(1) translateY(0);\r\n}\r\n\r\n/* Settings Header */\r\n.plex-settings-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border-bottom: 1px solid var(--plex-border);\r\n}\r\n\r\n.plex-settings-title {\r\n font-size: 15px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-settings-close {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 28px;\r\n height: 28px;\r\n padding: 0;\r\n background: transparent;\r\n border: none;\r\n border-radius: var(--plex-radius-sm);\r\n cursor: pointer;\r\n color: var(--plex-text-secondary);\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.plex-settings-close:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-settings-close svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n}\r\n\r\n/* Settings Content */\r\n.plex-settings-content {\r\n padding: 8px 0;\r\n}\r\n\r\n/* Settings Item */\r\n.plex-settings-item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 16px;\r\n cursor: pointer;\r\n transition: background var(--plex-transition-fast);\r\n}\r\n\r\n.plex-settings-item:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.plex-settings-label {\r\n font-size: 14px;\r\n color: var(--plex-text-primary);\r\n}\r\n\r\n.plex-settings-value {\r\n font-size: 13px;\r\n color: var(--plex-text-secondary);\r\n}\r\n\r\n/* Settings Submenu */\r\n.plex-settings-submenu {\r\n padding: 8px 0;\r\n}\r\n\r\n.plex-settings-back {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 16px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--plex-text-primary);\r\n cursor: pointer;\r\n border-bottom: 1px solid var(--plex-border);\r\n transition: background var(--plex-transition-fast);\r\n}\r\n\r\n.plex-settings-back:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.plex-settings-back svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n}\r\n\r\n/* Speed Options */\r\n.plex-speed-options {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 8px 0;\r\n}\r\n\r\n.plex-speed-option {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px 16px;\r\n background: transparent;\r\n border: none;\r\n font-size: 14px;\r\n color: var(--plex-text-primary);\r\n cursor: pointer;\r\n transition: all var(--plex-transition-fast);\r\n}\r\n\r\n.plex-speed-option:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.plex-speed-option.active {\r\n color: var(--plex-primary);\r\n font-weight: 600;\r\n}\r\n\r\n.plex-speed-option.active::before {\r\n content: '✓';\r\n margin-right: 8px;\r\n}\r\n\r\n/* Responsive */\r\n@media (max-width: 480px) {\r\n .plex-settings-panel {\r\n width: calc(100% - 32px);\r\n left: 16px;\r\n right: 16px;\r\n }\r\n}\r\n"]}
package/dist/plex-player.esm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @frameset/plex-player v1.0.4
2
+ * @frameset/plex-player v1.0.6
3
3
  * Professional video player with VAST ads, Chromecast, PiP, subtitles, playlists and more. Built by FRAMESET Studio.
4
4
  * (c) 2026 FRAMESET Studio
5
5
  * Released under the MIT License
@@ -140,6 +140,8 @@ class PlexPlayer {
140
140
  _init() {
141
141
  // Add player class
142
142
  this.container.classList.add('plex-player');
143
+ // Show controls initially
144
+ this.container.classList.add('plex-controls-visible');
143
145
 
144
146
  // Apply theme
145
147
  this._applyTheme();
@@ -201,6 +203,53 @@ class PlexPlayer {
201
203
  this.loader.className = 'plex-loader';
202
204
  this.loader.innerHTML = '<div class="plex-spinner"></div>';
203
205
  this.container.appendChild(this.loader);
206
+
207
+ // Settings panel
208
+ this.settingsPanel = document.createElement('div');
209
+ this.settingsPanel.className = 'plex-settings-panel';
210
+ this.settingsPanel.innerHTML = this._getSettingsHTML();
211
+ this.container.appendChild(this.settingsPanel);
212
+ }
213
+ _getSettingsHTML() {
214
+ const i18n = this.i18n;
215
+ return `
216
+ <div class="plex-settings-header">
217
+ <span class="plex-settings-title">${i18n.settings || 'Settings'}</span>
218
+ <button class="plex-settings-close">
219
+ <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
220
+ </button>
221
+ </div>
222
+ <div class="plex-settings-content">
223
+ <div class="plex-settings-item" data-setting="speed">
224
+ <span class="plex-settings-label">${i18n.speed || 'Speed'}</span>
225
+ <span class="plex-settings-value">1x</span>
226
+ </div>
227
+ <div class="plex-settings-item" data-setting="quality">
228
+ <span class="plex-settings-label">${i18n.quality || 'Quality'}</span>
229
+ <span class="plex-settings-value">Auto</span>
230
+ </div>
231
+ <div class="plex-settings-item" data-setting="subtitles">
232
+ <span class="plex-settings-label">${i18n.subtitles || 'Subtitles'}</span>
233
+ <span class="plex-settings-value">${i18n.off || 'Off'}</span>
234
+ </div>
235
+ </div>
236
+ <div class="plex-settings-submenu plex-settings-speed" style="display: none;">
237
+ <div class="plex-settings-back">
238
+ <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
239
+ <span>${i18n.speed || 'Speed'}</span>
240
+ </div>
241
+ <div class="plex-speed-options">
242
+ <button class="plex-speed-option" data-speed="0.25">0.25x</button>
243
+ <button class="plex-speed-option" data-speed="0.5">0.5x</button>
244
+ <button class="plex-speed-option" data-speed="0.75">0.75x</button>
245
+ <button class="plex-speed-option active" data-speed="1">1x</button>
246
+ <button class="plex-speed-option" data-speed="1.25">1.25x</button>
247
+ <button class="plex-speed-option" data-speed="1.5">1.5x</button>
248
+ <button class="plex-speed-option" data-speed="1.75">1.75x</button>
249
+ <button class="plex-speed-option" data-speed="2">2x</button>
250
+ </div>
251
+ </div>
252
+ `;
204
253
  }
205
254
  _getControlsHTML() {
206
255
  const i18n = this.i18n;
@@ -318,6 +367,11 @@ class PlexPlayer {
318
367
  this.els.volumeBtn?.addEventListener('click', () => this.toggleMute());
319
368
  this.els.pipBtn?.addEventListener('click', () => this.togglePiP());
320
369
  this.els.fullscreenBtn?.addEventListener('click', () => this.toggleFullscreen());
370
+ this.els.settingsBtn?.addEventListener('click', () => this.toggleSettings());
371
+ this.els.castBtn?.addEventListener('click', () => this.cast());
372
+
373
+ // Settings panel events
374
+ this._bindSettingsEvents();
321
375
 
322
376
  // Progress bar
323
377
  this._bindProgressEvents();
@@ -847,6 +901,78 @@ class PlexPlayer {
847
901
  }
848
902
  return this;
849
903
  }
904
+
905
+ // Settings
906
+ toggleSettings() {
907
+ if (this.settingsPanel.classList.contains('plex-settings-open')) {
908
+ this.closeSettings();
909
+ } else {
910
+ this.openSettings();
911
+ }
912
+ return this;
913
+ }
914
+ openSettings() {
915
+ this.settingsPanel.classList.add('plex-settings-open');
916
+ // Reset to main menu
917
+ const content = this.settingsPanel.querySelector('.plex-settings-content');
918
+ const speedMenu = this.settingsPanel.querySelector('.plex-settings-speed');
919
+ if (content) content.style.display = 'block';
920
+ if (speedMenu) speedMenu.style.display = 'none';
921
+ return this;
922
+ }
923
+ closeSettings() {
924
+ this.settingsPanel.classList.remove('plex-settings-open');
925
+ return this;
926
+ }
927
+ _bindSettingsEvents() {
928
+ if (!this.settingsPanel) return;
929
+
930
+ // Close button
931
+ const closeBtn = this.settingsPanel.querySelector('.plex-settings-close');
932
+ closeBtn?.addEventListener('click', () => this.closeSettings());
933
+
934
+ // Settings items
935
+ const speedItem = this.settingsPanel.querySelector('[data-setting="speed"]');
936
+ const speedMenu = this.settingsPanel.querySelector('.plex-settings-speed');
937
+ const content = this.settingsPanel.querySelector('.plex-settings-content');
938
+ const backBtn = this.settingsPanel.querySelector('.plex-settings-back');
939
+ speedItem?.addEventListener('click', () => {
940
+ if (content) content.style.display = 'none';
941
+ if (speedMenu) speedMenu.style.display = 'block';
942
+ });
943
+ backBtn?.addEventListener('click', () => {
944
+ if (content) content.style.display = 'block';
945
+ if (speedMenu) speedMenu.style.display = 'none';
946
+ });
947
+
948
+ // Speed options
949
+ const speedOptions = this.settingsPanel.querySelectorAll('.plex-speed-option');
950
+ speedOptions.forEach(option => {
951
+ option.addEventListener('click', () => {
952
+ const speed = parseFloat(option.dataset.speed);
953
+ this.setPlaybackRate(speed);
954
+
955
+ // Update active state
956
+ speedOptions.forEach(o => o.classList.remove('active'));
957
+ option.classList.add('active');
958
+
959
+ // Update display
960
+ const speedValue = this.settingsPanel.querySelector('[data-setting="speed"] .plex-settings-value');
961
+ if (speedValue) speedValue.textContent = `${speed}x`;
962
+
963
+ // Go back to main menu
964
+ if (content) content.style.display = 'block';
965
+ if (speedMenu) speedMenu.style.display = 'none';
966
+ });
967
+ });
968
+
969
+ // Close settings when clicking outside
970
+ this.container.addEventListener('click', e => {
971
+ if (!this.settingsPanel.contains(e.target) && !this.els.settingsBtn?.contains(e.target) && this.settingsPanel.classList.contains('plex-settings-open')) {
972
+ this.closeSettings();
973
+ }
974
+ });
975
+ }
850
976
  getState() {
851
977
  return {
852
978
  currentTime: this.video.currentTime,