Add styling to plyr and fix switcher not hiding

resources/css/player.css

@@ -665,7 +665,13 @@
     pointer-events: none;
 }
 
-.aspect-\[16\/9\]:hover .player-switcher,
+@media (hover: hover) {
+    .aspect-\[16\/9\]:hover .player-switcher {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+
 .player-switcher--visible {
     opacity: 1;
     pointer-events: auto;
@@ -869,3 +875,72 @@
         height: 36px;
     }
 }
+
+/* ============================================================
+   Plyr Player Overrides — pink accent, rounded corners, skip overlay
+   ============================================================ */
+.plyr--full-ui input[type='range'] {
+    color: var(--plyr-range-fill-background, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
+}
+
+.plyr__control--overlaid {
+    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
+}
+
+.plyr--video .plyr__control.plyr__tab-focus,
+.plyr--video .plyr__control:hover,
+.plyr--video .plyr__control[aria-expanded='true'] {
+    background: var(--plyr-video-control-background-hover, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
+}
+
+.plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']::before {
+    background: var(--plyr-control-toggle-checked-background, var(--plyr-color-main, var(--plyr-color-main, #c61e54))) !important;
+}
+
+.plyr--full-ui {
+    border-radius: 15px;
+}
+
+/* Plyr Engagement Heatmap, overlays the progress bar track */
+.plyr__progress__heatmap {
+    position: absolute;
+    left: -6px;
+    right: -6px;
+    bottom: 40%;
+    height: 48px;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.plyr__progress__heatmap-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Plyr Mobile Double-tap Skip Overlay */
+#plyr__time_skip {
+    background: #c61e54;
+    border: 0;
+    border-radius: 50%;
+    color: #fff;
+    left: 50%;
+    min-width: 60px;
+    width: min-content;
+    max-width: 100px;
+    max-height: 90px;
+    opacity: 0;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    transform: translate(-50%, -50%);
+    padding-top: 15px;
+    padding-bottom: 15px;
+    position: absolute;
+    top: 50%;
+    transition: 1s;
+    z-index: 3;
+    pointer-events: none;
+    box-shadow: 0px 0px 45px #000000;
+}

resources/views/stream/partials/player.blade.php

@@ -30,6 +30,20 @@
             hstreamBtn.classList.remove('player-switcher__btn--active');
             plyrBtn.classList.add('player-switcher__btn--active');
         }
+
+        var switcher = document.getElementById('player-switcher');
+        var container = switcher.parentElement;
+        var hideTimer = null;
+
+        function showSwitcher() {
+            switcher.classList.add('player-switcher--visible');
+            clearTimeout(hideTimer);
+            hideTimer = setTimeout(function () {
+                switcher.classList.remove('player-switcher--visible');
+            }, 3000);
+        }
+
+        container.addEventListener('pointerdown', showSwitcher);
     })();
     </script>
 </div>