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
internal/copier/copier.go
+12 -9
View File
@@ -393,23 +393,26 @@ func (c *Copier) processVideo(ctx context.Context, taskID string, database *db.D
ext := transcoder.OutputExt(profile.OutputFormat) ext := transcoder.OutputExt(profile.OutputFormat)
dstTranscoded := strings.TrimSuffix(dst, filepath.Ext(dst)) + ext dstTranscoded := strings.TrimSuffix(dst, filepath.Ext(dst)) + ext
srcFPS := fmt.Sprintf("%.2f", info.FPS) srcInfo := fmt.Sprintf("%s/%dch/%.0ffps", info.Codec, info.AudioChannels, info.FPS)
msg := fmt.Sprintf("Transcoding %s (%s/%dch/%sfps → %s/%s/%dfps %s)", dstInfo := fmt.Sprintf("%s/%s/%dfps %s", profile.VideoCodec, profile.AudioCodec, profile.MaxFPS, profile.OutputFormat)
filepath.Base(src), baseMsg := fmt.Sprintf("Transcoding %s (%s → %s)", filepath.Base(src), srcInfo, dstInfo)
info.Codec, info.AudioChannels, srcFPS,
profile.VideoCodec, profile.AudioCodec, profile.MaxFPS, profile.OutputFormat,
)
c.tasks.Update(taskID, func(t *task.Task) { c.tasks.Update(taskID, func(t *task.Task) {
t.Phase = task.PhaseTranscoding t.Phase = task.PhaseTranscoding
t.Message = msg t.Message = baseMsg
}) })
if t, ok := c.tasks.Get(taskID); ok { if t, ok := c.tasks.Get(taskID); ok {
_ = database.UpdateTask(*t) _ = database.UpdateTask(*t)
} }
progressFn := func(pct float64) { progressFn := func(p transcoder.Progress) {
c.tasks.Update(taskID, func(t *task.Task) { c.tasks.Update(taskID, func(t *task.Task) {
t.Progress = int(pct * 100) t.Progress = int(p.Pct * 100)
t.SpeedBPS = 0
t.ETASec = 0
if p.EncodeFPS > 0 {
t.Message = fmt.Sprintf("%s @ %.1f fps", baseMsg, p.EncodeFPS)
}
}) })
} }
internal/transcoder/detect.go
+14 -8
View File
@@ -34,13 +34,14 @@ func ProbeVideo(path string) (VideoInfo, error) {
var raw struct { var raw struct {
Streams []struct { Streams []struct {
CodecType string `json:"codec_type"` CodecType string `json:"codec_type"`
CodecName string `json:"codec_name"` CodecName string `json:"codec_name"`
Width int `json:"width"` Width int `json:"width"`
Height int `json:"height"` Height int `json:"height"`
RFrameRate string `json:"r_frame_rate"` RFrameRate string `json:"r_frame_rate"`
BitRate string `json:"bit_rate"` AvgFrameRate string `json:"avg_frame_rate"`
Channels int `json:"channels"` BitRate string `json:"bit_rate"`
Channels int `json:"channels"`
} `json:"streams"` } `json:"streams"`
Format struct { Format struct {
Duration string `json:"duration"` Duration string `json:"duration"`
@@ -58,7 +59,12 @@ func ProbeVideo(path string) (VideoInfo, error) {
info.Codec = s.CodecName info.Codec = s.CodecName
info.Width = s.Width info.Width = s.Width
info.Height = s.Height info.Height = s.Height
info.FPS = parseFraction(s.RFrameRate) // avg_frame_rate надёжнее для MJPEG и кодеков с нестандартным таймбейсом
fps := parseFraction(s.RFrameRate)
if avg := parseFraction(s.AvgFrameRate); avg > 0 && (fps <= 0 || fps > 120) {
fps = avg
}
info.FPS = fps
if br, err := strconv.ParseInt(s.BitRate, 10, 64); err == nil { if br, err := strconv.ParseInt(s.BitRate, 10, 64); err == nil {
info.VideoBitrate = br info.VideoBitrate = br
} }
internal/transcoder/transcoder.go
+20 -6
View File
@@ -21,8 +21,13 @@ type Options struct {
SourceInfo VideoInfo SourceInfo VideoInfo
} }
// Transcode запускает ffmpeg. progress вызывается с 0..1 по мере работы. type Progress struct {
func Transcode(ctx context.Context, opts Options, progress func(float64)) error { Pct float64 // 0..1
EncodeFPS float64 // текущая скорость кодирования, кадр/с
}
// Transcode запускает ffmpeg. progress вызывается при каждом обновлении прогресса.
func Transcode(ctx context.Context, opts Options, progress func(Progress)) error {
if err := os.MkdirAll(filepath.Dir(opts.Output), 0o755); err != nil { if err := os.MkdirAll(filepath.Dir(opts.Output), 0o755); err != nil {
return err return err
} }
@@ -42,20 +47,29 @@ func Transcode(ctx context.Context, opts Options, progress func(float64)) error
} }
// Парсим прогресс из stdout (-progress pipe:1) // Парсим прогресс из stdout (-progress pipe:1)
if opts.SourceInfo.DurationSec > 0 && progress != nil { if progress != nil {
var cur Progress
scanner := bufio.NewScanner(stdout) scanner := bufio.NewScanner(stdout)
for scanner.Scan() { for scanner.Scan() {
line := scanner.Text() line := scanner.Text()
if strings.HasPrefix(line, "out_time_us=") { switch {
case strings.HasPrefix(line, "out_time_us="):
val := strings.TrimPrefix(line, "out_time_us=") val := strings.TrimPrefix(line, "out_time_us=")
if us, err := strconv.ParseInt(val, 10, 64); err == nil && us > 0 { if us, err := strconv.ParseInt(val, 10, 64); err == nil && us > 0 && opts.SourceInfo.DurationSec > 0 {
sec := float64(us) / 1e6 sec := float64(us) / 1e6
pct := sec / opts.SourceInfo.DurationSec pct := sec / opts.SourceInfo.DurationSec
if pct > 1 { if pct > 1 {
pct = 1 pct = 1
} }
progress(pct) cur.Pct = pct
} }
case strings.HasPrefix(line, "fps="):
val := strings.TrimPrefix(line, "fps=")
if fps, err := strconv.ParseFloat(strings.TrimSpace(val), 64); err == nil && fps > 0 {
cur.EncodeFPS = fps
}
case line == "progress=continue" || line == "progress=end":
progress(cur)
} }
} }
} }
web/templates/dashboard.html
+152 -162
View File
@@ -1,20 +1,16 @@
{{define "content"}} {{define "content"}}
<section class="panel"> <section class="panel">
<h2>Mounted Disk</h2> <h2>Disks</h2>
<div class="panel-body"> <div class="panel-body">
<div class="path-input-row"> <div id="diskSummary" class="text-muted">Loading disks...</div>
<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> </div>
</section> </section>
<div id="diskState"></div> <div class="disk-grid" id="diskGrid"></div>
<script> <script>
const selectedDisk = { info: null }; let disks = [];
const taskState = new Map(); const taskState = new Map();
const taskPollers = new Map(); const taskPollers = new Map();
@@ -28,12 +24,16 @@ function escapeHTML(value) {
}[char])); }[char]));
} }
function diskKey(disk) {
return disk.disk_id || disk.mount_path;
}
function badgeClass(state) { function badgeClass(state) {
return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown'; return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
} }
function badgeLabel(state) { 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) { function fmtSpeed(bps) {
@@ -51,6 +51,14 @@ function fmtETA(sec) {
return sec + ' s'; 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) { function fmtDateTime(value) {
if (!value) return 'Never'; if (!value) return 'Never';
const date = new Date(value); 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(' · '); 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) { function renderProfile(disk) {
const p = disk.profile || {}; const p = disk.profile || {};
const t = p.transcode || null; const t = p.transcode || null;
const transcodeEnabled = !!t; const transcodeEnabled = !!t;
const key = escapeHTML(diskKey(disk));
const sel = (name, value, options) => { const sel = (name, value, options) => {
const opts = options.map(([v, label]) => const opts = options.map(([v, label]) =>
`<option value="${v}" ${v === value ? 'selected' : ''}>${escapeHTML(label)}</option>` `<option value="${v}" ${v === value ? 'selected' : ''}>${escapeHTML(label)}</option>`
).join(''); ).join('');
return `<select class="form-input" id="prof_${name}">${opts}</select>`; return `<select class="form-input" id="prof_${name}_${key}">${opts}</select>`;
}; };
const transcodeSection = ` const transcodeSection = `
<div id="transcodeFields" style="${transcodeEnabled ? '' : 'display:none'}"> <div id="transcodeFields_${key}" style="${transcodeEnabled ? '' : 'display:none'}">
<div class="form-group"> <div class="form-group">
<label>Видеокодек</label> <label>Видеокодек</label>
${sel('video_codec', t?.video_codec || 'h264', [['h264','H.264 (AVC)'],['h265','H.265 (HEVC)'],['mpeg4','MPEG-4']])} ${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 ` return `
<section class="panel" id="profilePanel" style="display:none"> <section class="panel" id="profilePanel_${key}" style="display:none">
<h2>Профиль диска</h2> <h2>Профиль диска</h2>
<div class="panel-body"> <div class="panel-body">
<h3>Параметры копирования</h3> <h3>Параметры копирования</h3>
<div class="form-group"> <div class="form-group">
<label>Папка назначения</label> <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>
<div class="form-group"> <div class="form-group">
<label>Режим перезаписи</label> <label>Режим перезаписи</label>
@@ -216,53 +153,129 @@ function renderProfile(disk) {
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Резерв свободного места (ГБ)</label> <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>
<div class="form-group"> <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> </div>
<h3 style="margin-top:1.5em">Транскодирование видео</h3> <h3 style="margin-top:1.5em">Транскодирование видео</h3>
<div class="form-group"> <div class="form-group">
<label> <label>
<input type="checkbox" id="prof_transcode_enabled" ${transcodeEnabled ? 'checked' : ''} <input type="checkbox" id="prof_transcode_enabled_${key}" ${transcodeEnabled ? 'checked' : ''}
onchange="document.getElementById('transcodeFields').style.display=this.checked?'':'none'"> onchange="document.getElementById('transcodeFields_${key}').style.display=this.checked?'':'none'">
Ограничить видео под устройство Ограничить видео под устройство
</label> </label>
</div> </div>
${transcodeSection} ${transcodeSection}
<div class="btn-row" style="margin-top:1em"> <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>
</div> </div>
</section> </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 g = id => document.getElementById(id);
const transcodeEnabled = g('prof_transcode_enabled')?.checked; const transcodeEnabled = g(`prof_transcode_enabled_${key}`)?.checked;
const profile = { const profile = {
dest_folder: g('prof_dest_folder')?.value.trim() || 'media', dest_folder: g(`prof_dest_folder_${key}`)?.value.trim() || 'media',
overwrite_mode: g('prof_overwrite_mode')?.value || 'skip', overwrite_mode: g(`prof_overwrite_mode_${key}`)?.value || 'skip',
file_select_mode: g('prof_file_select_mode')?.value || 'new', file_select_mode: g(`prof_file_select_mode_${key}`)?.value || 'new',
reserve_free_gb: parseFloat(g('prof_reserve_free_gb')?.value || '2') || 0, reserve_free_gb: parseFloat(g(`prof_reserve_free_gb_${key}`)?.value || '2') || 0,
auto_copy: g('prof_auto_copy')?.checked || false, auto_copy: g(`prof_auto_copy_${key}`)?.checked || false,
shuffle_depth: parseInt(g('prof_shuffle_depth')?.value ?? '-1', 10), shuffle_depth: parseInt(g(`prof_shuffle_depth_${key}`)?.value ?? '-1', 10),
}; };
if (transcodeEnabled) { if (transcodeEnabled) {
profile.transcode = { profile.transcode = {
video_codec: g('prof_video_codec')?.value || 'h264', video_codec: g(`prof_video_codec_${key}`)?.value || 'h264',
max_resolution: g('prof_max_resolution')?.value || '720p', max_resolution: g(`prof_max_resolution_${key}`)?.value || '720p',
max_video_bitrate: g('prof_max_video_bitrate')?.value || '', max_video_bitrate: g(`prof_max_video_bitrate_${key}`)?.value || '',
max_fps: parseInt(g('prof_max_fps')?.value || '0', 10), max_fps: parseInt(g(`prof_max_fps_${key}`)?.value || '0', 10),
audio_codec: g('prof_audio_codec')?.value || 'aac', audio_codec: g(`prof_audio_codec_${key}`)?.value || 'aac',
max_audio_bitrate: g('prof_max_audio_bitrate')?.value || '', max_audio_bitrate: g(`prof_max_audio_bitrate_${key}`)?.value || '',
max_audio_channels: parseInt(g('prof_max_audio_channels')?.value || '0', 10), max_audio_channels: parseInt(g(`prof_max_audio_channels_${key}`)?.value || '0', 10),
output_format: g('prof_output_format')?.value || 'mp4', output_format: g(`prof_output_format_${key}`)?.value || 'mp4',
}; };
} }
@@ -278,7 +291,7 @@ async function saveProfile(mountPath) {
return; return;
} }
toast('Профиль сохранён', 'ok'); toast('Профиль сохранён', 'ok');
refreshSelectedDisk(); refreshDisks();
} catch (error) { } catch (error) {
toast('Ошибка сети', 'error'); toast('Ошибка сети', 'error');
} }
@@ -296,42 +309,28 @@ function startTaskPoll(taskID) {
pollTask(taskID); pollTask(taskID);
} }
async function refreshSelectedDisk() { async function refreshDisks() {
const mountPath = document.getElementById('mountPath').value.trim();
if (!mountPath) {
selectedDisk.info = null;
renderDisk();
return;
}
localStorage.setItem('jukebox.selectedMountPath', mountPath);
try { 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(); const payload = await response.json();
if (!response.ok) { disks = payload.items || [];
toast(payload.error || 'Failed to inspect directory', 'error'); renderDisks();
return;
}
selectedDisk.info = payload;
renderDisk();
if (payload.active_task_id) { const activeTasks = new Set();
for (const taskID of Array.from(taskPollers.keys())) { for (const disk of disks) {
if (taskID !== payload.active_task_id) { if (disk.active_task_id) {
stopTaskPoll(taskID); activeTasks.add(disk.active_task_id);
taskState.delete(taskID); 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); stopTaskPoll(taskID);
taskState.delete(taskID); taskState.delete(taskID);
} }
} }
} catch (error) { } catch (error) {}
toast('Network error', 'error');
}
} }
async function pollTask(taskID) { async function pollTask(taskID) {
@@ -340,7 +339,7 @@ async function pollTask(taskID) {
if (!response.ok) return; if (!response.ok) return;
const task = await response.json(); const task = await response.json();
taskState.set(taskID, task); taskState.set(taskID, task);
renderDisk(); renderDisks();
if (['success', 'failed', 'canceled'].includes(task.status)) { if (['success', 'failed', 'canceled'].includes(task.status)) {
stopTaskPoll(taskID); stopTaskPoll(taskID);
@@ -348,19 +347,17 @@ async function pollTask(taskID) {
if (task.status === 'success') toast(task.message || 'Done', 'ok'); if (task.status === 'success') toast(task.message || 'Done', 'ok');
if (task.status === 'failed') toast('Error: ' + task.error, 'error'); if (task.status === 'failed') toast('Error: ' + task.error, 'error');
if (task.status === 'canceled') toast('Copy canceled', 'error'); if (task.status === 'canceled') toast('Copy canceled', 'error');
refreshSelectedDisk(); refreshDisks();
} }
} catch (error) {} } catch (error) {}
} }
async function startCopy(mode) { async function startCopy(diskID, mode) {
const mountPath = document.getElementById('mountPath').value.trim();
if (!mountPath) return;
try { try {
const response = await fetch('/api/disks/copy/start', { const response = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ mount_path: mountPath, mode }) body: JSON.stringify({ mode })
}); });
const payload = await response.json(); const payload = await response.json();
if (!response.ok) { if (!response.ok) {
@@ -368,25 +365,22 @@ async function startCopy(mode) {
return; return;
} }
startTaskPoll(payload.task_id); startTaskPoll(payload.task_id);
refreshSelectedDisk(); refreshDisks();
} catch (error) { } catch (error) {
toast('Network error', 'error'); toast('Network error', 'error');
} }
} }
async function cancelCopy() { async function cancelCopy(diskID) {
if (!selectedDisk.info || !selectedDisk.info.disk_id) return;
try { 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'); toast('Canceling...', 'ok');
} catch (error) { } catch (error) {
toast('Network error', 'error'); toast('Network error', 'error');
} }
} }
async function initDisk() { async function initDisk(mountPath) {
const mountPath = document.getElementById('mountPath').value.trim();
if (!mountPath) return;
try { try {
const response = await fetch('/api/disks/init', { const response = await fetch('/api/disks/init', {
method: 'POST', method: 'POST',
@@ -399,22 +393,23 @@ async function initDisk() {
return; return;
} }
toast('Disk initialized', 'ok'); toast('Disk initialized', 'ok');
refreshSelectedDisk(); refreshDisks();
} catch (error) { } catch (error) {
toast('Network error', '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]'); const button = event.target.closest('button[data-action]');
if (!button) return; if (!button) return;
const action = button.dataset.action; const action = button.dataset.action;
if (action === 'start-copy') startCopy(button.dataset.mode || 'add'); if (action === 'start-copy') startCopy(button.dataset.diskId, button.dataset.mode || 'add');
if (action === 'cancel-copy') cancelCopy(); if (action === 'cancel-copy') cancelCopy(button.dataset.diskId);
if (action === 'init-disk') initDisk(); if (action === 'init-disk') initDisk(button.dataset.mountPath);
if (action === 'disk-settings') { if (action === 'disk-settings') {
const panel = document.getElementById('profilePanel'); const key = button.dataset.diskKey;
const panel = document.getElementById('profilePanel_' + key);
if (!panel) return; if (!panel) return;
const open = panel.style.display !== 'none'; const open = panel.style.display !== 'none';
panel.style.display = open ? 'none' : ''; panel.style.display = open ? 'none' : '';
@@ -422,12 +417,7 @@ document.getElementById('diskState').addEventListener('click', (event) => {
} }
}); });
const savedMountPath = localStorage.getItem('jukebox.selectedMountPath'); refreshDisks();
if (savedMountPath) { setInterval(refreshDisks, 5000);
document.getElementById('mountPath').value = savedMountPath;
refreshSelectedDisk();
} else {
renderDisk();
}
</script> </script>
{{end}} {{end}}