Speed up device snapshot cadence for a near-live thumbnail

Lower the default and minimum snapshot interval (10s/2s -> 2s/1s) and
refresh the selected device's thumbnail on its own 1s timer instead of
waiting for the 5s device-list poll, so the preview updates fast
enough to feel close to live video without building an actual
streaming pipeline.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ubuntu
2026-09-05 01:51:13 +00:00
co-authored by Claude Sonnet 5
parent e5df068778
commit 03ec3f0c68
2 changed files with 27 additions and 10 deletions
+23 -6
View File
@@ -1220,7 +1220,7 @@
<div class="modal-body">
<div id="snapshotIntervalSettingsAlert"></div>
<label for="snapshot_interval_input" class="form-label">Seconds between 2 snapshots</label>
<input type="number" min="2" step="1" class="form-control" id="snapshot_interval_input" placeholder="10">
<input type="number" min="1" step="1" class="form-control" id="snapshot_interval_input" placeholder="2">
<div class="form-text">This value is applied to the currently selected device.</div>
</div>
<div class="modal-footer">
@@ -1528,7 +1528,7 @@
var PROGRESS_STALE_MS = 15000
var playlistImportProgress = 0
var playlistImportInFlight = false
var selectedDeviceSnapshotIntervalSeconds = 10
var selectedDeviceSnapshotIntervalSeconds = 2
var currentSelectedDeviceData = null
var socket = io('https://iptv.mrk.ovh', {
@@ -1710,6 +1710,22 @@
$placeholder.hide();
}
// Reloads the currently selected device's snapshot image on its own fast
// timer, independent of the 5s full device-list poll, so a low snapshot
// interval (see Settings > Snapshot interval) actually feels near-live.
function refreshSelectedDeviceSnapshotFast() {
var device = currentSelectedDeviceData;
if (!device || !device.snapshot_url) {
return;
}
var dataRunning = device.data_running || {};
var hasChannel = Object.keys(dataRunning).length > 0 && dataRunning.name_channel;
if (!hasChannel) {
return;
}
$('#selectedDeviceSnapshot').attr('src', device.snapshot_url + '?t=' + Date.now());
}
function updateAutoSnapshotToggle(device) {
var $toggle = $('#autoSnapshotToggle');
if (!device || !device.id_device) {
@@ -1723,12 +1739,12 @@
function updateSnapshotIntervalState(device) {
if (!device || !device.id_device) {
selectedDeviceSnapshotIntervalSeconds = 10;
selectedDeviceSnapshotIntervalSeconds = 2;
return;
}
var interval = Number(device.snapshot_interval_seconds);
if (!Number.isFinite(interval) || interval < 2) {
if (!Number.isFinite(interval) || interval < 1) {
interval = selectedDeviceSnapshotIntervalSeconds;
}
selectedDeviceSnapshotIntervalSeconds = interval;
@@ -1789,6 +1805,7 @@
$(window).on('scroll resize', lazyLoad);
updateListDevices()
setInterval(updateListDevices, 5000)
setInterval(refreshSelectedDeviceSnapshotFast, 1000)
update_list_playlist()
display_most_frequent()
setInterval(display_most_frequent, 15000)
@@ -3158,9 +3175,9 @@
}
var intervalValue = Number($('#snapshot_interval_input').val());
if (!Number.isInteger(intervalValue) || intervalValue < 2) {
if (!Number.isInteger(intervalValue) || intervalValue < 1) {
$('#snapshot_interval_input').addClass('is-invalid');
$('#snapshotIntervalSettingsAlert').html('<div class="alert alert-danger" role="alert">Enter an integer value greater than or equal to 2.</div>');
$('#snapshotIntervalSettingsAlert').html('<div class="alert alert-danger" role="alert">Enter an integer value greater than or equal to 1.</div>');
return;
}