Video full screen: the bottom bar hides after a few idle seconds and returns on movement
build-container / build (push) Successful in 4m16s
build-container / build (push) Successful in 4m16s
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
ee4674cdad
commit
8b77bacb7a
2 files changed
+8
-1
No files matched your search
@@ -1151,3 +1151,8 @@ html.hc #view a:not(.btn):not(.row):not(.vcard):not(.seg a):not(.sgrp a) { text-
|
|||||||
#lyr .lyrbody:has(.lyrq) { padding-top: 10vh; padding-bottom: 16vh; } #lyr .lyrbody:has(.lyrq) .empty { padding-top: 0; text-align: center; }
|
#lyr .lyrbody:has(.lyrq) { padding-top: 10vh; padding-bottom: 16vh; } #lyr .lyrbody:has(.lyrq) .empty { padding-top: 0; text-align: center; }
|
||||||
|
|
||||||
.mini .vbvol { width: 84px; accent-color: var(--accent); } .mini .ibtn.txt { width: auto; min-width: 40px; font-size: 13px; font-weight: 600; padding: 0 6px; }
|
.mini .vbvol { width: 84px; accent-color: var(--accent); } .mini .ibtn.txt { width: auto; min-width: 40px; font-size: 13px; font-weight: 600; padding: 0 6px; }
|
||||||
|
|
||||||
|
/* full screen: the bottom bar slides away with the other controls after a few idle seconds */
|
||||||
|
body.vfullwin #player { transition: transform .25s ease, opacity .25s; }
|
||||||
|
body.vfullwin:has(.vstage.vhide) #player { transform: translateY(100%); opacity: 0; pointer-events: none; }
|
||||||
|
body.vfullwin:has(.vstage.vhide) .vstage.vfull { bottom: 0; } body.vfullwin:has(.vstage.vhide) .vstage.vfull video { height: 100dvh; }
|
||||||
+3
-1
@@ -315,7 +315,7 @@ function videoMount() {
|
|||||||
<div id="vnextbox"></div></div><p class="sub" id="vmsg" role="status"></p></div>`;
|
<div id="vnextbox"></div></div><p class="sub" id="vmsg" role="status"></p></div>`;
|
||||||
const stage = $('#vstage'); stage.prepend(el); el.controls = false;
|
const stage = $('#vstage'); stage.prepend(el); el.controls = false;
|
||||||
let drag = false, hideT = null;
|
let drag = false, hideT = null;
|
||||||
const wake = () => { stage.classList.remove('vhide'); clearTimeout(hideT); if (!el.paused && !drag) hideT = setTimeout(() => stage.classList.add('vhide'), 3000); };
|
const wake = () => { stage.classList.remove('vhide'); clearTimeout(hideT); if (!el.paused && !drag) hideT = setTimeout(() => { if (document.querySelector('#player:hover, #player:focus-within')) wake(); else stage.classList.add('vhide'); }, 3000); }; // (in full screen the bottom bar hides with the rest, but not while you are on it)
|
||||||
vp.wake = wake; vp.drag = () => drag;
|
vp.wake = wake; vp.drag = () => drag;
|
||||||
vp.flash = text => { const f = $('#vflash'); if (!f) return; f.textContent = text; f.classList.remove('on'); void f.offsetWidth; f.classList.add('on'); };
|
vp.flash = text => { const f = $('#vflash'); if (!f) return; f.textContent = text; f.classList.remove('on'); void f.offsetWidth; f.classList.add('on'); };
|
||||||
let lastTap = 0, lastDbl = 0;
|
let lastTap = 0, lastDbl = 0;
|
||||||
@@ -471,6 +471,8 @@ function videoFsExit() {
|
|||||||
const box = document.querySelector('.vstage.vfull'); if (box) box.classList.remove('vfull'); document.body.classList.remove('vfullwin');
|
const box = document.querySelector('.vstage.vfull'); if (box) box.classList.remove('vfull'); document.body.classList.remove('vfullwin');
|
||||||
if (document.fullscreenElement || document.webkitFullscreenElement) { try { (document.exitFullscreen || document.webkitExitFullscreen).call(document); } catch {} }
|
if (document.fullscreenElement || document.webkitFullscreenElement) { try { (document.exitFullscreen || document.webkitExitFullscreen).call(document); } catch {} }
|
||||||
}
|
}
|
||||||
|
// in full screen, touching or moving over the picture or the bar brings the hidden bar back
|
||||||
|
['pointermove', 'pointerdown', 'keydown'].forEach(ev => addEventListener(ev, () => { if (vp && vp.wake && document.body.classList.contains('vfullwin')) vp.wake(); }, true));
|
||||||
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement && document.body.classList.contains('vfullwin')) videoFsExit(); });
|
document.addEventListener('fullscreenchange', () => { if (!document.fullscreenElement && document.body.classList.contains('vfullwin')) videoFsExit(); });
|
||||||
/** The picture stopped on its own: start again from where it was, at most 4 times in a row, and say so. */
|
/** The picture stopped on its own: start again from where it was, at most 4 times in a row, and say so. */
|
||||||
function videoRescue(why, at) {
|
function videoRescue(why, at) {
|
||||||
|
|||||||
Reference in new issue
Block a user