cclohmar/NextNVR
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: iframe focus (PWA-friendly), mobile grid overlap fix

Browse source
This commit is contained in:
Claus Lohmar 2026-08-05 14:28:46 +01:00
parent c509ba7eb1
commit c2fb05a9ef
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
public/app.js
View file

@ -84,9 +84,7 @@ function renderLiveGrid() {
const img = tile.querySelector('img'); const img = tile.querySelector('img');
if (img) img.src = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`; if (img) img.src = `/recordings/${cam.name || cam.id}/latest.jpg?t=${Date.now()}`;
}, 3000); }, 3000);
tile.addEventListener('click', () => { tile.addEventListener('click', () => openFocus(cam));
window.open(`http://${location.hostname}:1984/stream.html?src=${cam.id}_sub`, '_blank');
});
} else { } else {
tile.innerHTML = '<span class="tile-placeholder">No Camera</span>'; tile.innerHTML = '<span class="tile-placeholder">No Camera</span>';
} }
@ -98,12 +96,20 @@ function renderLiveGrid() {
let focusIdx = -1; let focusIdx = -1;
function openFocus(cam) { function openFocus(cam) {
focusIdx = cameras.indexOf(cam); focusIdx = cameras.indexOf(cam);
// Open go2rtc's built-in WebRTC player in a new tab. const overlay = document.getElementById('focus-overlay');
// The player provides full live video with sub-second latency. overlay.classList.remove('hidden');
const url = `http://${location.hostname}:1984/?src=${cam.id}_sub`; // Remove any previous iframe.
window.open(url, '_blank'); const oldFrame = overlay.querySelector('iframe.go2rtc');
// Also update the overlay for keyboard nav. if (oldFrame) oldFrame.remove();
// Embed go2rtc player in iframe — PWA-friendly, no new tab.
const iframe = document.createElement('iframe');
iframe.className = 'go2rtc';
iframe.allow = 'autoplay';
iframe.src = `http://${location.hostname}:1984/stream.html?src=${cam.id}_sub`;
document.getElementById('focus-video').style.display = 'none';
overlay.appendChild(iframe);
document.getElementById('focus-title').textContent = cam.name; document.getElementById('focus-title').textContent = cam.name;
document.getElementById('focus-time').textContent = new Date().toLocaleTimeString() + ' live';
renderThumbs(); renderThumbs();
} }
function updateFocus() {} function updateFocus() {}

10
public/style.css
View file

@ -107,6 +107,10 @@ body {
#focus-title { flex: 1; font-size: 16px; color: #fff; } #focus-title { flex: 1; font-size: 16px; color: #fff; }
.focus-time { font-size: 13px; color: var(--text-muted); } .focus-time { font-size: 13px; color: var(--text-muted); }
#focus-video { flex: 1; width: 100%; object-fit: contain; } #focus-video { flex: 1; width: 100%; object-fit: contain; }
iframe.go2rtc {
flex: 1; width: 100%; border: none;
position: absolute; inset: 48px 0 0 0;
}
.thumb-strip { .thumb-strip {
display: flex; gap: 4px; padding: 8px; display: flex; gap: 4px; padding: 8px;
background: rgba(0,0,0,.8); overflow-x: auto; background: rgba(0,0,0,.8); overflow-x: auto;
@ -191,11 +195,11 @@ body {
/* Grid: 2 columns, auto-height rows */ /* Grid: 2 columns, auto-height rows */
.grid-4x2 { .grid-4x2 {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto; grid-auto-rows: minmax(120px, auto);
gap: 4px; gap: 4px;
height: auto; height: auto;
} }
.grid-tile { aspect-ratio: 4/3; } .grid-tile { aspect-ratio: auto; min-height: 120px; }
.tile-label { font-size: 10px; bottom: 3px; left: 4px; padding: 1px 5px; } .tile-label { font-size: 10px; bottom: 3px; left: 4px; padding: 1px 5px; }
/* Settings: full-width cards */ /* Settings: full-width cards */
@ -220,7 +224,7 @@ body {
@media (max-width: 400px) { @media (max-width: 400px) {
/* Single column grid on very small screens */ /* Single column grid on very small screens */
.grid-4x2 { grid-template-columns: 1fr; } .grid-4x2 { grid-template-columns: 1fr; }
.grid-tile { aspect-ratio: 16/9; } .grid-tile { min-height: 160px; }
/* Minimal top bar */ /* Minimal top bar */
.topbar { padding: 6px 8px; } .topbar { padding: 6px 8px; }