david
e0bad5e5ac
Redesigned WAV Browser as a structured Sample Library with card layout: - WAVs grouped by library (ISO name) and program (volume name) - Library cards with collapsible headers showing program/sample counts - Program sections within each library - Sample cards in a compact grid with play-on-click Updated playWav to show a clean sample name in the player bar, hide the player when playback ends, and use sample-card selectors for active-state highlighting. Clean display names (underscores → spaces, stripped .wav extensions)
409 lines
13 KiB
JavaScript
409 lines
13 KiB
JavaScript
// AKAI Utils — Web UI
|
|
const API = '/api';
|
|
|
|
let eventSource = null;
|
|
|
|
// ─── Search ────────────────────────────────────────────────────────
|
|
|
|
document.getElementById('search-btn').addEventListener('click', doSearch);
|
|
document.getElementById('search-query').addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') doSearch();
|
|
});
|
|
document.getElementById('search-dl-all').addEventListener('click', downloadTop10);
|
|
|
|
async function doSearch() {
|
|
const q = document.getElementById('search-query').value;
|
|
const filter = document.getElementById('search-filter').value;
|
|
const status = document.getElementById('search-status');
|
|
const results = document.getElementById('search-results');
|
|
|
|
status.textContent = 'Searching...';
|
|
results.innerHTML = '';
|
|
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (q) params.set('q', q);
|
|
if (filter) params.set('filter', filter);
|
|
params.set('limit', '50');
|
|
|
|
const resp = await fetch(`${API}/search?${params}`);
|
|
const data = await resp.json();
|
|
status.textContent = `Found ${data.length} items`;
|
|
document.getElementById('result-count').textContent = `(${data.length})`;
|
|
renderResults(data);
|
|
} catch (e) {
|
|
status.textContent = 'Search failed: ' + e.message;
|
|
}
|
|
}
|
|
|
|
function renderResults(items) {
|
|
const container = document.getElementById('search-results');
|
|
container.innerHTML = items.map(r => `
|
|
<div class="result-card">
|
|
<div class="title">${esc(r.title)}</div>
|
|
<div class="meta">
|
|
<span>${r.identifier}</span>
|
|
<span>${r.downloads.toLocaleString()} downloads</span>
|
|
</div>
|
|
<div class="actions">
|
|
<button class="btn-dl" data-action="download" data-identifier="${esc(r.identifier)}">Download ISOs</button>
|
|
<button class="btn-list" data-action="list" data-identifier="${esc(r.identifier)}">List Files</button>
|
|
</div>
|
|
<div id="list-${sanitize(r.identifier)}" class="file-list"></div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
async function downloadTop10() {
|
|
const q = document.getElementById('search-query').value;
|
|
const filter = document.getElementById('search-filter').value;
|
|
const params = new URLSearchParams();
|
|
if (q) params.set('q', q);
|
|
if (filter) params.set('filter', filter);
|
|
params.set('limit', '10');
|
|
|
|
try {
|
|
const resp = await fetch(`${API}/search?${params}`);
|
|
const data = await resp.json();
|
|
for (const item of data) {
|
|
await downloadItem(item.identifier);
|
|
}
|
|
} catch (e) {
|
|
alert('Bulk download failed: ' + e.message);
|
|
}
|
|
}
|
|
|
|
// ─── List ──────────────────────────────────────────────────────────
|
|
|
|
async function listItem(identifier) {
|
|
const el = document.getElementById('list-' + sanitize(identifier));
|
|
el.innerHTML = 'Loading...';
|
|
|
|
try {
|
|
const resp = await fetch(`${API}/list?identifier=${encodeURIComponent(identifier)}`);
|
|
const files = await resp.json();
|
|
if (!Array.isArray(files) || files.length === 0) {
|
|
el.innerHTML = '<span class="no-files">No ISO files</span>';
|
|
return;
|
|
}
|
|
el.innerHTML = files.map(f =>
|
|
`<div class="file-row">${esc(f.name)} <span class="file-size">${f.size || '?'}</span></div>`
|
|
).join('');
|
|
} catch (e) {
|
|
el.innerHTML = 'Failed: ' + e.message;
|
|
}
|
|
}
|
|
|
|
// ─── Download ──────────────────────────────────────────────────────
|
|
|
|
async function downloadItem(identifier) {
|
|
try {
|
|
const resp = await fetch(`${API}/download?identifier=${encodeURIComponent(identifier)}&dir=./output/isos`);
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
alert(data.error);
|
|
return;
|
|
}
|
|
startProgressStream();
|
|
} catch (e) {
|
|
alert('Download failed: ' + e.message);
|
|
}
|
|
}
|
|
|
|
function startProgressStream() {
|
|
if (eventSource) eventSource.close();
|
|
eventSource = new EventSource(`${API}/progress`);
|
|
|
|
eventSource.onmessage = function(e) {
|
|
const jobs = JSON.parse(e.data);
|
|
renderDownloadQueue(jobs);
|
|
|
|
const allDone = Object.values(jobs).every(j => j.done || j.error);
|
|
if (allDone && Object.keys(jobs).length > 0) {
|
|
eventSource.close();
|
|
eventSource = null;
|
|
}
|
|
};
|
|
|
|
eventSource.onerror = function() {
|
|
if (eventSource) {
|
|
eventSource.close();
|
|
eventSource = null;
|
|
}
|
|
};
|
|
}
|
|
|
|
function renderDownloadQueue(jobs) {
|
|
const container = document.getElementById('download-queue');
|
|
const count = document.getElementById('dl-count');
|
|
const entries = Object.values(jobs);
|
|
count.textContent = `(${entries.length})`;
|
|
|
|
container.innerHTML = entries.map(j => {
|
|
const pct = j.total_size > 0 ? Math.round(j.downloaded / j.total_size * 100) : 0;
|
|
let cls = '';
|
|
if (j.error) cls = 'error';
|
|
else if (j.done) cls = 'done';
|
|
|
|
let info = '';
|
|
if (j.error) info = j.error;
|
|
else if (j.done) info = formatBytes(j.total_size) + ' — complete';
|
|
else info = formatBytes(j.downloaded) + ' / ' + formatBytes(j.total_size) +
|
|
(j.speed > 0 ? ' — ' + formatBytes(j.speed) + '/s' : '');
|
|
|
|
return `
|
|
<div class="dl-item">
|
|
<div class="dl-name">${esc(j.file_name)}</div>
|
|
<div class="dl-bar"><div class="dl-bar-fill ${cls}" style="width:${pct}%"></div></div>
|
|
<div class="dl-info"><span>${info}</span><span>${j.done && !j.error ? '✓' : pct + '%'}</span></div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
// ─── Extract ───────────────────────────────────────────────────────
|
|
|
|
document.getElementById('extract-btn').addEventListener('click', doExtract);
|
|
|
|
async function doExtract() {
|
|
const isoDir = document.getElementById('extract-iso-dir').value;
|
|
const wavDir = document.getElementById('extract-wav-dir').value;
|
|
const status = document.getElementById('extract-status');
|
|
|
|
status.textContent = 'Extracting... (check server console for output)';
|
|
status.style.color = 'var(--yellow)';
|
|
|
|
try {
|
|
const resp = await fetch(`${API}/extract?dir=${encodeURIComponent(isoDir)}&out=${encodeURIComponent(wavDir)}`);
|
|
const data = await resp.json();
|
|
if (data.error) {
|
|
status.textContent = data.error;
|
|
status.style.color = 'var(--accent)';
|
|
return;
|
|
}
|
|
status.textContent = data.message || 'Extraction complete';
|
|
status.style.color = 'var(--green)';
|
|
} catch (e) {
|
|
status.textContent = 'Extraction failed: ' + e.message;
|
|
status.style.color = 'var(--accent)';
|
|
}
|
|
}
|
|
|
|
// ─── WAV Browser ──────────────────────────────────────────────────
|
|
|
|
let audioCtx = null;
|
|
let currentSource = null;
|
|
let currentAudioBuffer = null;
|
|
let startTime = 0;
|
|
let pauseOffset = 0;
|
|
let isPlaying = false;
|
|
let animationFrame = null;
|
|
|
|
document.getElementById('wav-browse-btn').addEventListener('click', browseWavs);
|
|
|
|
function groupWavs(paths) {
|
|
const libs = {};
|
|
for (const p of paths) {
|
|
const parts = p.split('/');
|
|
let lib, prog, file;
|
|
if (parts.length === 1) {
|
|
file = parts[0];
|
|
} else if (parts.length === 2) {
|
|
lib = parts[0]; prog = parts[0]; file = parts[1];
|
|
} else {
|
|
lib = parts[0]; prog = parts[1]; file = parts[parts.length - 1];
|
|
}
|
|
if (!libs[lib]) libs[lib] = {};
|
|
if (!libs[lib][prog]) libs[lib][prog] = [];
|
|
libs[lib][prog].push({ fullPath: p, name: file.replace(/\.wav$/i, '') });
|
|
}
|
|
return libs;
|
|
}
|
|
|
|
function cleanName(name) {
|
|
return name.replace(/_+/g, ' ').trim();
|
|
}
|
|
|
|
function renderSampleCards(samples) {
|
|
return samples.map(s => `
|
|
<div class="sample-card" data-action="play" data-wav="${esc(s.fullPath)}">
|
|
<span class="sample-name" title="${esc(s.name)}">${esc(s.name)}</span>
|
|
<span class="sample-play-icon">▶</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderPrograms(programs) {
|
|
const progNames = Object.keys(programs).sort();
|
|
return progNames.map(prog => {
|
|
const samples = programs[prog];
|
|
return `
|
|
<div class="program-card">
|
|
<div class="program-header">
|
|
<h4>${esc(cleanName(prog))}</h4>
|
|
<span class="prog-meta">${samples.length} samples</span>
|
|
</div>
|
|
<div class="program-samples">
|
|
${renderSampleCards(samples)}
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function renderLibraries(libs) {
|
|
const libNames = Object.keys(libs).sort();
|
|
return libNames.map(lib => {
|
|
const programs = libs[lib];
|
|
const progCount = Object.keys(programs).length;
|
|
const sampleCount = Object.values(programs).reduce((sum, s) => sum + s.length, 0);
|
|
return `
|
|
<div class="library-card">
|
|
<div class="library-header">
|
|
<h3>${esc(cleanName(lib))}</h3>
|
|
<span class="lib-meta">${progCount} programs · ${sampleCount} samples</span>
|
|
</div>
|
|
<div class="library-programs">
|
|
${renderPrograms(programs)}
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
async function browseWavs() {
|
|
const dir = document.getElementById('wav-dir').value;
|
|
const results = document.getElementById('wav-results');
|
|
const summary = document.getElementById('wav-summary');
|
|
const list = document.getElementById('wav-list');
|
|
list.innerHTML = 'Loading...';
|
|
|
|
try {
|
|
const url = `${API}/list-wavs?dir=${encodeURIComponent(dir)}`;
|
|
const resp = await fetch(url);
|
|
|
|
if (!resp.ok) {
|
|
list.innerHTML = '<span class="no-files">HTTP ' + resp.status + '</span>';
|
|
results.style.display = 'block';
|
|
return;
|
|
}
|
|
const data = await resp.json();
|
|
if (!data || data.error) {
|
|
list.innerHTML = '<span class="no-files">Error: ' + (data && data.error ? data.error : 'server error') + '</span>';
|
|
results.style.display = 'block';
|
|
return;
|
|
}
|
|
if (!Array.isArray(data) || data.length === 0) {
|
|
list.innerHTML = '<span class="no-files">No WAV files found</span>';
|
|
results.style.display = 'block';
|
|
return;
|
|
}
|
|
const libs = groupWavs(data);
|
|
const libCount = Object.keys(libs).length;
|
|
summary.textContent = libCount + ' librar' + (libCount === 1 ? 'y' : 'ies') + ' · ' + data.length + ' samples';
|
|
list.innerHTML = renderLibraries(libs);
|
|
results.style.display = 'block';
|
|
} catch (e) {
|
|
list.innerHTML = 'Failed: ' + e.message;
|
|
results.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
async function playWav(filename) {
|
|
console.log('playWav:', filename);
|
|
if (!audioCtx) {
|
|
audioCtx = new AudioContext();
|
|
console.log('playWav: created AudioContext');
|
|
}
|
|
|
|
if (currentSource) {
|
|
currentSource.stop();
|
|
currentSource = null;
|
|
}
|
|
if (animationFrame) {
|
|
cancelAnimationFrame(animationFrame);
|
|
animationFrame = null;
|
|
}
|
|
|
|
const name = filename.split('/').pop().replace(/\.wav$/i, '');
|
|
const player = document.getElementById('wav-player');
|
|
const nowPlaying = document.getElementById('wav-now-playing');
|
|
player.style.display = 'block';
|
|
nowPlaying.textContent = 'Loading: ' + name;
|
|
|
|
try {
|
|
const resp = await fetch(`/wavs/${encodeURIComponent(filename)}`);
|
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
|
const arrayBuffer = await resp.arrayBuffer();
|
|
currentAudioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
|
|
|
|
currentSource = audioCtx.createBufferSource();
|
|
currentSource.buffer = currentAudioBuffer;
|
|
currentSource.connect(audioCtx.destination);
|
|
|
|
currentSource.onended = () => {
|
|
if (isPlaying) {
|
|
isPlaying = false;
|
|
pauseOffset = 0;
|
|
nowPlaying.textContent = '';
|
|
document.getElementById('wav-progress-fill').style.width = '0%';
|
|
document.getElementById('wav-time').textContent = formatTime(0);
|
|
clearActiveItem();
|
|
player.style.display = 'none';
|
|
}
|
|
};
|
|
|
|
startTime = audioCtx.currentTime - pauseOffset;
|
|
currentSource.start(0, pauseOffset);
|
|
isPlaying = true;
|
|
pauseOffset = 0;
|
|
|
|
nowPlaying.textContent = '▶ ' + name;
|
|
setActiveItem(filename);
|
|
updateProgress();
|
|
} catch (e) {
|
|
nowPlaying.textContent = 'Error: ' + e.message;
|
|
}
|
|
}
|
|
|
|
function updateProgress() {
|
|
if (!isPlaying || !currentAudioBuffer) return;
|
|
|
|
const elapsed = audioCtx.currentTime - startTime;
|
|
const duration = currentAudioBuffer.duration;
|
|
const pct = Math.min((elapsed / duration) * 100, 100);
|
|
|
|
document.getElementById('wav-progress-fill').style.width = pct + '%';
|
|
document.getElementById('wav-time').textContent = formatTime(elapsed);
|
|
|
|
if (elapsed < duration) {
|
|
animationFrame = requestAnimationFrame(updateProgress);
|
|
}
|
|
}
|
|
|
|
function setActiveItem(filename) {
|
|
document.querySelectorAll('.sample-card').forEach(el => {
|
|
el.classList.toggle('playing', el.dataset.wav === filename);
|
|
});
|
|
}
|
|
|
|
function clearActiveItem() {
|
|
document.querySelectorAll('.sample-card').forEach(el => {
|
|
el.classList.remove('playing');
|
|
});
|
|
}
|
|
|
|
// Initial load
|
|
doSearch();
|
|
|
|
// Event delegation for dynamically generated buttons
|
|
document.addEventListener('click', function(e) {
|
|
const btn = e.target.closest('[data-action]');
|
|
if (!btn) return;
|
|
const action = btn.dataset.action;
|
|
if (action === 'download') {
|
|
downloadItem(btn.dataset.identifier);
|
|
} else if (action === 'list') {
|
|
listItem(btn.dataset.identifier);
|
|
} else if (action === 'play') {
|
|
playWav(btn.dataset.wav);
|
|
}
|
|
});
|