diff --git a/resources/css/player.css b/resources/css/player.css index 7d7b78c..f5b5d46 100644 --- a/resources/css/player.css +++ b/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; +} diff --git a/resources/views/stream/partials/player.blade.php b/resources/views/stream/partials/player.blade.php index b94fd76..7a78a10 100644 --- a/resources/views/stream/partials/player.blade.php +++ b/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); })();