mchus/jukebox_maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch dashboard to watcher-based multi-disk view, fix transcoding FPS display

Browse Source 
- dashboard.html: remove standalone "Mounted Disk" input panel; show all disks
  from GET /api/disks (watcher), auto-refresh every 5s
- detect.go: use avg_frame_rate when r_frame_rate is unrealistic (>120 fps or 0),
  fixes MJPEG/mjpeg showing 90000fps
- transcoder.go: parse fps= from ffmpeg progress output and expose in Progress struct
- copier.go: update task message with real-time encoding fps (@ 45.3 fps),
  clear speed_bps/eta during transcoding to avoid showing stale copy speed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chus
2026-05-21 21:51:39 +03:00
parent 2bad23da3a
commit 839ff494a4
4 changed files with 198 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
web/templates/dashboard.html
View File

@@ -1,20 +1,16 @@
{{define "content"}}
<section class="panel">
<h2>Mounted Disk</h2>
<h2>Disks</h2>
<div class="panel-body">
<div class="path-input-row">
<input class="form-input" type="text" id="mountPath" placeholder="/Volumes/JUKEBOX or E:\\">
<button type="button" class="button-secondary" onclick="refreshSelectedDisk()">Refresh</button>
</div>
<div class="form-hint">Choose the directory where the removable disk is mounted. The app works with one selected disk at a time in standalone mode.</div>
<div id="diskSummary" class="text-muted">Loading disks...</div>
</div>
</section>
<div id="diskState"></div>
<div class="disk-grid" id="diskGrid"></div>
<script>
const selectedDisk = { info: null };
let disks = [];
const taskState = new Map();
const taskPollers = new Map();
@@ -28,12 +24,16 @@ function escapeHTML(value) {
}[char]));
}
function diskKey(disk) {
return disk.disk_id || disk.mount_path;
}
function badgeClass(state) {
return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
}
function badgeLabel(state) {
return ({ absent: 'Directory unavailable', foreign: 'Uninitialized disk', known: 'Ready' })[state] || '—';
return ({ absent: 'Not connected', foreign: 'Uninitialized disk', known: 'Ready' })[state] || '—';
}
function fmtSpeed(bps) {
@@ -51,6 +51,14 @@ function fmtETA(sec) {
return sec + ' s';
}
function fmtBytes(bytes) {
if (!bytes) return '—';
if (bytes >= 1e12) return (bytes / 1e12).toFixed(1) + ' TB';
if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB';
return bytes + ' B';
}
function fmtDateTime(value) {
if (!value) return 'Never';
const date = new Date(value);
@@ -69,92 +77,21 @@ function taskMeta(task) {
return [fmtSpeed(task.speed_bps), task.eta_sec ? 'ETA: ' + fmtETA(task.eta_sec) : ''].filter(Boolean).join(' · ');
}
function renderDisk() {
const root = document.getElementById('diskState');
const disk = selectedDisk.info;
if (!disk) {
root.innerHTML = `
<section class="panel">
<div class="panel-body text-muted">Choose a mounted disk directory to inspect it.</div>
</section>
`;
return;
}
const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
const progress = activeTask ? activeTask.progress : 0;
const message = activeTask ? (activeTask.message || 'Preparing...') : '';
const meta = activeTask ? taskMeta(activeTask) : '';
const isKnown = disk.state === 'known';
const isForeign = disk.state === 'foreign';
const hasCapacity = disk.state !== 'absent';
root.innerHTML = `
<section class="panel disk-card">
<h2>${escapeHTML(disk.mount_path)}</h2>
<table class="kv-table">
<tbody>
<tr>
<th>Status</th>
<td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
</tr>
<tr>
<th>Disk ID</th>
<td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">not initialized yet</span>'}</td>
</tr>
<tr>
<th>Total capacity</th>
<td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td>
</tr>
<tr>
<th>Free space</th>
<td>${hasCapacity ? fmtBytes(disk.free_bytes) : '—'}</td>
</tr>
<tr>
<th>Last copied</th>
<td>${fmtDateTime(disk.last_copied_at)}</td>
</tr>
</tbody>
</table>
${activeTask ? `
<div class="panel-body progress-wrap">
<div class="progress-bar-bg">
<div class="progress-bar-fill" style="width:${progress}%"></div>
</div>
<div class="progress-label">${escapeHTML(message)}</div>
<div class="progress-label">${escapeHTML(meta)}</div>
</div>
` : ''}
<div class="btn-row">
${isKnown ? `
<button class="button-danger" data-action="start-copy" data-mode="replace" ${activeTask ? 'disabled' : ''}>Replace media</button>
<button class="button-primary" data-action="start-copy" data-mode="add" ${activeTask ? 'disabled' : ''}>Add media</button>
<button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy">Cancel</button>
<button class="button-secondary" data-action="disk-settings" style="margin-left:auto">⚙ Settings</button>
` : ''}
${isForeign ? `
<button class="button-secondary" data-action="init-disk">Initialize disk</button>
` : ''}
</div>
</section>
${isKnown ? renderProfile(disk) : ''}
`;
}
function renderProfile(disk) {
const p = disk.profile || {};
const t = p.transcode || null;
const transcodeEnabled = !!t;
const key = escapeHTML(diskKey(disk));
const sel = (name, value, options) => {
const opts = options.map(([v, label]) =>
`<option value="${v}" ${v === value ? 'selected' : ''}>${escapeHTML(label)}</option>`
).join('');
return `<select class="form-input" id="prof_${name}">${opts}</select>`;
return `<select class="form-input" id="prof_${name}_${key}">${opts}</select>`;
};
const transcodeSection = `
<div id="transcodeFields" style="${transcodeEnabled ? '' : 'display:none'}">
<div id="transcodeFields_${key}" style="${transcodeEnabled ? '' : 'display:none'}">
<div class="form-group">
<label>Видеокодек</label>
${sel('video_codec', t?.video_codec || 'h264', [['h264','H.264 (AVC)'],['h265','H.265 (HEVC)'],['mpeg4','MPEG-4']])}
@@ -193,13 +130,13 @@ function renderProfile(disk) {
`;
return `
<section class="panel" id="profilePanel" style="display:none">
<section class="panel" id="profilePanel_${key}" style="display:none">
<h2>Профиль диска</h2>
<div class="panel-body">
<h3>Параметры копирования</h3>
<div class="form-group">
<label>Папка назначения</label>
<input class="form-input" type="text" id="prof_dest_folder" value="${escapeHTML(p.dest_folder || 'media')}">
<input class="form-input" type="text" id="prof_dest_folder_${key}" value="${escapeHTML(p.dest_folder || 'media')}">
</div>
<div class="form-group">
<label>Режим перезаписи</label>
@@ -216,53 +153,129 @@ function renderProfile(disk) {
</div>
<div class="form-group">
<label>Резерв свободного места (ГБ)</label>
<input class="form-input" type="number" id="prof_reserve_free_gb" value="${p.reserve_free_gb ?? 2}" min="0" step="0.5">
<input class="form-input" type="number" id="prof_reserve_free_gb_${key}" value="${p.reserve_free_gb ?? 2}" min="0" step="0.5">
</div>
<div class="form-group">
<label><input type="checkbox" id="prof_auto_copy" ${p.auto_copy ? 'checked' : ''}> Автокопирование при подключении</label>
<label><input type="checkbox" id="prof_auto_copy_${key}" ${p.auto_copy ? 'checked' : ''}> Автокопирование при подключении</label>
</div>
<h3 style="margin-top:1.5em">Транскодирование видео</h3>
<div class="form-group">
<label>
<input type="checkbox" id="prof_transcode_enabled" ${transcodeEnabled ? 'checked' : ''}
onchange="document.getElementById('transcodeFields').style.display=this.checked?'':'none'">
<input type="checkbox" id="prof_transcode_enabled_${key}" ${transcodeEnabled ? 'checked' : ''}
onchange="document.getElementById('transcodeFields_${key}').style.display=this.checked?'':'none'">
Ограничить видео под устройство
</label>
</div>
${transcodeSection}
<div class="btn-row" style="margin-top:1em">
<button class="button-primary" onclick="saveProfile('${escapeHTML(disk.mount_path)}')">Сохранить профиль</button>
<button class="button-primary" onclick="saveProfile('${escapeHTML(disk.mount_path)}','${key}')">Сохранить профиль</button>
</div>
</div>
</section>
`;
}
async function saveProfile(mountPath) {
function renderDisks() {
const grid = document.getElementById('diskGrid');
const summary = document.getElementById('diskSummary');
if (!disks.length) {
summary.textContent = 'No disks found.';
grid.innerHTML = '';
return;
}
const knownCount = disks.filter((d) => d.state === 'known').length;
summary.textContent = `Disks found: ${disks.length}. Ready to copy: ${knownCount}.`;
grid.innerHTML = disks.map((disk) => {
const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
const progress = activeTask ? activeTask.progress : 0;
const message = activeTask ? (activeTask.message || 'Preparing...') : '';
const meta = activeTask ? taskMeta(activeTask) : '';
const isKnown = disk.state === 'known';
const isForeign = disk.state === 'foreign';
const hasCapacity = disk.state !== 'absent';
const key = escapeHTML(diskKey(disk));
return `
<section class="panel disk-card">
<h2>${escapeHTML(disk.mount_path)}</h2>
<table class="kv-table">
<tbody>
<tr>
<th>Status</th>
<td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
</tr>
<tr>
<th>Disk ID</th>
<td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">not initialized yet</span>'}</td>
</tr>
<tr>
<th>Total capacity</th>
<td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td>
</tr>
<tr>
<th>Free space</th>
<td>${hasCapacity ? fmtBytes(disk.free_bytes) : '—'}</td>
</tr>
<tr>
<th>Last copied</th>
<td>${fmtDateTime(disk.last_copied_at)}</td>
</tr>
</tbody>
</table>
${activeTask ? `
<div class="panel-body progress-wrap">
<div class="progress-bar-bg">
<div class="progress-bar-fill" style="width:${progress}%"></div>
</div>
<div class="progress-label">${escapeHTML(message)}</div>
${meta ? `<div class="progress-label">${escapeHTML(meta)}</div>` : ''}
</div>
` : ''}
<div class="btn-row">
${isKnown ? `
<button class="button-danger" data-action="start-copy" data-mode="replace" data-disk-id="${key}" ${activeTask ? 'disabled' : ''}>Replace media</button>
<button class="button-primary" data-action="start-copy" data-mode="add" data-disk-id="${key}" ${activeTask ? 'disabled' : ''}>Add media</button>
<button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy" data-disk-id="${key}">Cancel</button>
<button class="button-secondary" data-action="disk-settings" data-disk-key="${key}" style="margin-left:auto">⚙ Settings</button>
` : ''}
${isForeign ? `
<button class="button-secondary" data-action="init-disk" data-mount-path="${escapeHTML(disk.mount_path)}">Initialize disk</button>
` : ''}
</div>
</section>
${isKnown ? renderProfile(disk) : ''}
`;
}).join('');
}
async function saveProfile(mountPath, key) {
const g = id => document.getElementById(id);
const transcodeEnabled = g('prof_transcode_enabled')?.checked;
const transcodeEnabled = g(`prof_transcode_enabled_${key}`)?.checked;
const profile = {
dest_folder: g('prof_dest_folder')?.value.trim() || 'media',
overwrite_mode: g('prof_overwrite_mode')?.value || 'skip',
file_select_mode: g('prof_file_select_mode')?.value || 'new',
reserve_free_gb: parseFloat(g('prof_reserve_free_gb')?.value || '2') || 0,
auto_copy: g('prof_auto_copy')?.checked || false,
shuffle_depth: parseInt(g('prof_shuffle_depth')?.value ?? '-1', 10),
dest_folder: g(`prof_dest_folder_${key}`)?.value.trim() || 'media',
overwrite_mode: g(`prof_overwrite_mode_${key}`)?.value || 'skip',
file_select_mode: g(`prof_file_select_mode_${key}`)?.value || 'new',
reserve_free_gb: parseFloat(g(`prof_reserve_free_gb_${key}`)?.value || '2') || 0,
auto_copy: g(`prof_auto_copy_${key}`)?.checked || false,
shuffle_depth: parseInt(g(`prof_shuffle_depth_${key}`)?.value ?? '-1', 10),
};
if (transcodeEnabled) {
profile.transcode = {
video_codec: g('prof_video_codec')?.value || 'h264',
max_resolution: g('prof_max_resolution')?.value || '720p',
max_video_bitrate: g('prof_max_video_bitrate')?.value || '',
max_fps: parseInt(g('prof_max_fps')?.value || '0', 10),
audio_codec: g('prof_audio_codec')?.value || 'aac',
max_audio_bitrate: g('prof_max_audio_bitrate')?.value || '',
max_audio_channels: parseInt(g('prof_max_audio_channels')?.value || '0', 10),
output_format: g('prof_output_format')?.value || 'mp4',
video_codec: g(`prof_video_codec_${key}`)?.value || 'h264',
max_resolution: g(`prof_max_resolution_${key}`)?.value || '720p',
max_video_bitrate: g(`prof_max_video_bitrate_${key}`)?.value || '',
max_fps: parseInt(g(`prof_max_fps_${key}`)?.value || '0', 10),
audio_codec: g(`prof_audio_codec_${key}`)?.value || 'aac',
max_audio_bitrate: g(`prof_max_audio_bitrate_${key}`)?.value || '',
max_audio_channels: parseInt(g(`prof_max_audio_channels_${key}`)?.value || '0', 10),
output_format: g(`prof_output_format_${key}`)?.value || 'mp4',
};
}
@@ -278,7 +291,7 @@ async function saveProfile(mountPath) {
return;
}
toast('Профиль сохранён', 'ok');
refreshSelectedDisk();
refreshDisks();
} catch (error) {
toast('Ошибка сети', 'error');
}
@@ -296,42 +309,28 @@ function startTaskPoll(taskID) {
pollTask(taskID);
}
async function refreshSelectedDisk() {
const mountPath = document.getElementById('mountPath').value.trim();
if (!mountPath) {
selectedDisk.info = null;
renderDisk();
return;
}
localStorage.setItem('jukebox.selectedMountPath', mountPath);
async function refreshDisks() {
try {
const response = await fetch('/api/disks/probe?mount_path=' + encodeURIComponent(mountPath));
const response = await fetch('/api/disks');
if (!response.ok) return;
const payload = await response.json();
if (!response.ok) {
toast(payload.error || 'Failed to inspect directory', 'error');
return;
}
selectedDisk.info = payload;
renderDisk();
disks = payload.items || [];
renderDisks();
if (payload.active_task_id) {
for (const taskID of Array.from(taskPollers.keys())) {
if (taskID !== payload.active_task_id) {
stopTaskPoll(taskID);
taskState.delete(taskID);
}
const activeTasks = new Set();
for (const disk of disks) {
if (disk.active_task_id) {
activeTasks.add(disk.active_task_id);
startTaskPoll(disk.active_task_id);
}
startTaskPoll(payload.active_task_id);
} else {
for (const taskID of Array.from(taskPollers.keys())) {
}
for (const taskID of Array.from(taskPollers.keys())) {
if (!activeTasks.has(taskID)) {
stopTaskPoll(taskID);
taskState.delete(taskID);
}
}
} catch (error) {
toast('Network error', 'error');
}
} catch (error) {}
}
async function pollTask(taskID) {
@@ -340,7 +339,7 @@ async function pollTask(taskID) {
if (!response.ok) return;
const task = await response.json();
taskState.set(taskID, task);
renderDisk();
renderDisks();
if (['success', 'failed', 'canceled'].includes(task.status)) {
stopTaskPoll(taskID);
@@ -348,19 +347,17 @@ async function pollTask(taskID) {
if (task.status === 'success') toast(task.message || 'Done', 'ok');
if (task.status === 'failed') toast('Error: ' + task.error, 'error');
if (task.status === 'canceled') toast('Copy canceled', 'error');
refreshSelectedDisk();
refreshDisks();
}
} catch (error) {}
}
async function startCopy(mode) {
const mountPath = document.getElementById('mountPath').value.trim();
if (!mountPath) return;
async function startCopy(diskID, mode) {
try {
const response = await fetch('/api/disks/copy/start', {
const response = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mount_path: mountPath, mode })
body: JSON.stringify({ mode })
});
const payload = await response.json();
if (!response.ok) {
@@ -368,25 +365,22 @@ async function startCopy(mode) {
return;
}
startTaskPoll(payload.task_id);
refreshSelectedDisk();
refreshDisks();
} catch (error) {
toast('Network error', 'error');
}
}
async function cancelCopy() {
if (!selectedDisk.info || !selectedDisk.info.disk_id) return;
async function cancelCopy(diskID) {
try {
await fetch('/api/disks/' + encodeURIComponent(selectedDisk.info.disk_id) + '/copy/cancel', { method: 'POST' });
await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/cancel', { method: 'POST' });
toast('Canceling...', 'ok');
} catch (error) {
toast('Network error', 'error');
}
}
async function initDisk() {
const mountPath = document.getElementById('mountPath').value.trim();
if (!mountPath) return;
async function initDisk(mountPath) {
try {
const response = await fetch('/api/disks/init', {
method: 'POST',
@@ -399,22 +393,23 @@ async function initDisk() {
return;
}
toast('Disk initialized', 'ok');
refreshSelectedDisk();
refreshDisks();
} catch (error) {
toast('Network error', 'error');
}
}
document.getElementById('diskState').addEventListener('click', (event) => {
document.getElementById('diskGrid').addEventListener('click', (event) => {
const button = event.target.closest('button[data-action]');
if (!button) return;
const action = button.dataset.action;
if (action === 'start-copy') startCopy(button.dataset.mode || 'add');
if (action === 'cancel-copy') cancelCopy();
if (action === 'init-disk') initDisk();
if (action === 'start-copy') startCopy(button.dataset.diskId, button.dataset.mode || 'add');
if (action === 'cancel-copy') cancelCopy(button.dataset.diskId);
if (action === 'init-disk') initDisk(button.dataset.mountPath);
if (action === 'disk-settings') {
const panel = document.getElementById('profilePanel');
const key = button.dataset.diskKey;
const panel = document.getElementById('profilePanel_' + key);
if (!panel) return;
const open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : '';
@@ -422,12 +417,7 @@ document.getElementById('diskState').addEventListener('click', (event) => {
}
});
const savedMountPath = localStorage.getItem('jukebox.selectedMountPath');
if (savedMountPath) {
document.getElementById('mountPath').value = savedMountPath;
refreshSelectedDisk();
} else {
renderDisk();
}
refreshDisks();
setInterval(refreshDisks, 5000);
</script>
{{end}}