ui: hide control footer in fullscreen; toggle fullscreen with the F key
The grid/archive control bar is hidden while its frame is fullscreen, so the video fills the screen cleanly. A global F-key handler toggles fullscreen of the active frame (live-main or arch-content) — entered and exited with F, and exited with Esc as well. Uses e.code (KeyF) so it works on non-Latin layouts and ignores typing in inputs and Ctrl/Cmd/Alt combos. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -281,6 +281,20 @@ function toggleFullscreen(el) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Клавиша F — переключить полноэкранный режим фрейма (live-main / arch-content).
|
||||||
|
// Esc выходит нативно. e.code (физическая клавиша) — работает и в русской раскладке.
|
||||||
|
function bindFullscreenKey() {
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
if (e.code !== "KeyF" || e.ctrlKey || e.metaKey || e.altKey) return;
|
||||||
|
const t = e.target;
|
||||||
|
if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
|
||||||
|
const frame = document.getElementById("live-main") || document.getElementById("arch-content");
|
||||||
|
if (!frame) return;
|
||||||
|
e.preventDefault();
|
||||||
|
toggleFullscreen(frame);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// умеет ли браузер декодировать HEVC (H.265) сам — для нативного просмотра
|
// умеет ли браузер декодировать HEVC (H.265) сам — для нативного просмотра
|
||||||
let _hevc = null;
|
let _hevc = null;
|
||||||
function hevcSupported() {
|
function hevcSupported() {
|
||||||
@@ -2197,6 +2211,7 @@ document.addEventListener("DOMContentLoaded", async () => {
|
|||||||
ensureFooter(); // создаёт футер с #sys-stats/#clock до их заполнения
|
ensureFooter(); // создаёт футер с #sys-stats/#clock до их заполнения
|
||||||
startClock();
|
startClock();
|
||||||
bindLogout();
|
bindLogout();
|
||||||
|
bindFullscreenKey();
|
||||||
refreshStats(); setInterval(refreshStats, 5000);
|
refreshStats(); setInterval(refreshStats, 5000);
|
||||||
applyGridMenuLimit();
|
applyGridMenuLimit();
|
||||||
const page = document.body.dataset.page;
|
const page = document.body.dataset.page;
|
||||||
|
|||||||
@@ -240,6 +240,9 @@ footer.grid-bar {
|
|||||||
.tile:fullscreen { border: none; background: #000; }
|
.tile:fullscreen { border: none; background: #000; }
|
||||||
.tile:fullscreen video, .tile:fullscreen video-stream { object-fit: contain; }
|
.tile:fullscreen video, .tile:fullscreen video-stream { object-fit: contain; }
|
||||||
#grid:fullscreen { width: 100vw; height: 100vh; background: var(--bg); padding: 0; }
|
#grid:fullscreen { width: 100vw; height: 100vh; background: var(--bg); padding: 0; }
|
||||||
|
/* в полноэкранном режиме панель-футер скрыта (вход/выход — клавиша F, выход также Esc) */
|
||||||
|
#live-main:fullscreen .grid-bar,
|
||||||
|
#arch-content:fullscreen .grid-bar { display: none; }
|
||||||
.hevc-hint {
|
.hevc-hint {
|
||||||
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
|
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
|
||||||
background: rgba(63, 3, 3, .88); color: #fff; font-size: 11px;
|
background: rgba(63, 3, 3, .88); color: #fff; font-size: 11px;
|
||||||
|
|||||||
Reference in New Issue
Block a user