zyphlar
463 lines
17 KiB
JavaScript
463 lines
17 KiB
JavaScript
// app.js — UI glue for the BabyMobile manager PWA.
|
|
import { BabyMobile, isSupported, MAX_TRACKS } from './ble.js';
|
|
import { decodeFileToMono, encodeWav, trimSamples, RATES, BITS } from './wav.js';
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
const dev = new BabyMobile();
|
|
|
|
// Slot metadata is kept locally because the firmware can't enumerate tracks
|
|
// over BLE. This remembers what *we* uploaded so the UI can show slot contents.
|
|
const SLOTS_KEY = 'babymobile.slots.v1';
|
|
let slots = loadSlots();
|
|
|
|
let pendingWav = null; // { wav, durationSec, rate, bits, name }
|
|
let deviceTracks = null; // last result of dev.listTracks(), or null
|
|
let currentFile = null; // the picked File
|
|
let decoded = null; // { samples, rate, srcRate } cached decode of currentFile
|
|
|
|
function loadSlots() {
|
|
try { return JSON.parse(localStorage.getItem(SLOTS_KEY)) || {}; }
|
|
catch { return {}; }
|
|
}
|
|
function saveSlots() {
|
|
localStorage.setItem(SLOTS_KEY, JSON.stringify(slots));
|
|
}
|
|
|
|
function log(msg) {
|
|
const el = $('log');
|
|
const time = new Date().toLocaleTimeString();
|
|
el.textContent += `[${time}] ${msg}\n`;
|
|
el.scrollTop = el.scrollHeight;
|
|
}
|
|
|
|
function fmtBytes(n) {
|
|
if (n < 1024) return `${n} B`;
|
|
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
|
return `${(n / 1024 / 1024).toFixed(2)} MB`;
|
|
}
|
|
|
|
// ---- connection state ----
|
|
dev.addEventListener('log', (e) => log(e.detail));
|
|
dev.addEventListener('connected', async (e) => { setConnected(true, e.detail.name); await refresh(); fetchVolume(); });
|
|
dev.addEventListener('disconnected', () => {
|
|
setConnected(false); deviceTracks = null; renderSlots();
|
|
$('volume-val').textContent = '—';
|
|
});
|
|
dev.addEventListener('volume', (e) => setVolumeUI(e.detail.percent));
|
|
|
|
// ---- global (device) volume ----
|
|
function setVolumeUI(pct) {
|
|
$('volume').value = String(pct);
|
|
$('volume-val').textContent = `${pct}%`;
|
|
}
|
|
async function fetchVolume() {
|
|
try { setVolumeUI(await dev.getVolume()); }
|
|
catch (err) { log('Volume read failed: ' + (err.message || err)); }
|
|
}
|
|
let volTimer = null;
|
|
$('volume').addEventListener('input', () => {
|
|
const pct = parseInt($('volume').value, 10);
|
|
$('volume-val').textContent = `${pct}%`;
|
|
clearTimeout(volTimer);
|
|
volTimer = setTimeout(() => { dev.setVolume(pct).catch((e) => log('' + e)); }, 120);
|
|
});
|
|
|
|
function setConnected(on, name) {
|
|
$('status-dot').className = on ? 'dot on' : 'dot';
|
|
$('status-text').textContent = on ? `Connected${name ? ' · ' + name : ''}` : 'Not connected';
|
|
$('btn-connect').textContent = on ? 'Disconnect' : 'Scan & connect';
|
|
document.querySelectorAll('[data-needs-conn]').forEach((el) => { el.disabled = !on; });
|
|
}
|
|
|
|
$('btn-connect').addEventListener('click', async () => {
|
|
try {
|
|
if (dev.connected) await dev.disconnect();
|
|
else await dev.connect();
|
|
} catch (err) {
|
|
if (err && err.name === 'NotFoundError') log('Scan cancelled.');
|
|
else log('Error: ' + (err && err.message ? err.message : err));
|
|
}
|
|
});
|
|
|
|
// ---- file selection & conversion ----
|
|
const fileInput = $('file');
|
|
$('drop').addEventListener('click', () => fileInput.click());
|
|
$('drop').addEventListener('dragover', (e) => { e.preventDefault(); $('drop').classList.add('hover'); });
|
|
$('drop').addEventListener('dragleave', () => $('drop').classList.remove('hover'));
|
|
$('drop').addEventListener('drop', (e) => {
|
|
e.preventDefault(); $('drop').classList.remove('hover');
|
|
if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
|
|
});
|
|
fileInput.addEventListener('change', () => { if (fileInput.files.length) handleFile(fileInput.files[0]); });
|
|
|
|
const MIN_CLIP = 0.05; // shortest selectable clip, seconds
|
|
let fullDur = 0; // full decoded duration in seconds
|
|
let selStart = 0; // selection start, seconds
|
|
let selEnd = 0; // selection end (kept), seconds
|
|
|
|
// Decode the file (expensive) once per file/rate, then re-encode cheaply when
|
|
// the user tweaks bit-depth or trim.
|
|
async function handleFile(file) {
|
|
stopPreview();
|
|
currentFile = file;
|
|
decoded = null;
|
|
pendingWav = null;
|
|
$('btn-upload').disabled = true;
|
|
$('btn-preview').disabled = true;
|
|
$('trim').hidden = true;
|
|
$('convert-info').textContent = `Decoding "${file.name}"…`;
|
|
try {
|
|
const rate = parseInt($('rate').value, 10);
|
|
decoded = await decodeFileToMono(file, rate);
|
|
fullDur = decoded.samples.length / decoded.rate;
|
|
selStart = 0;
|
|
selEnd = fullDur;
|
|
$('track-level').value = '100';
|
|
$('track-level-val').textContent = '100%';
|
|
$('trim').hidden = false;
|
|
drawWave();
|
|
layoutTrim();
|
|
reEncode();
|
|
} catch (err) {
|
|
$('convert-info').textContent = 'Could not decode this file: ' + (err.message || err) +
|
|
'. Try a WAV/MP3/M4A the browser can decode.';
|
|
}
|
|
}
|
|
|
|
// Current selection as the values encodeWav wants (trimEnd = seconds off the tail).
|
|
function trimValues() {
|
|
return { trimStart: selStart, trimEnd: fullDur - selEnd };
|
|
}
|
|
|
|
// Apply a new selection (clamped + ordered), then repaint handles/region/readout.
|
|
function setSelection(start, end) {
|
|
selStart = Math.max(0, Math.min(start, fullDur - MIN_CLIP));
|
|
selEnd = Math.min(fullDur, Math.max(end, selStart + MIN_CLIP));
|
|
layoutTrim();
|
|
stopPreview();
|
|
scheduleReEncode();
|
|
}
|
|
|
|
// Position the two handles + the highlighted region and refresh the readout.
|
|
// Skips overwriting a time field while it's being edited.
|
|
function layoutTrim() {
|
|
const a = fullDur ? selStart / fullDur : 0;
|
|
const b = fullDur ? selEnd / fullDur : 1;
|
|
$('handle-start').style.left = `${a * 100}%`;
|
|
$('handle-end').style.left = `${b * 100}%`;
|
|
$('trim-region').style.left = `${a * 100}%`;
|
|
$('trim-region').style.right = `${(1 - b) * 100}%`;
|
|
$('handle-start').setAttribute('aria-valuetext', `${selStart.toFixed(2)}s`);
|
|
$('handle-end').setAttribute('aria-valuetext', `${selEnd.toFixed(2)}s`);
|
|
if (document.activeElement !== $('trim-start-s')) $('trim-start-s').value = selStart.toFixed(2);
|
|
if (document.activeElement !== $('trim-end-s')) $('trim-end-s').value = selEnd.toFixed(2);
|
|
$('trim-clip').textContent = `${(selEnd - selStart).toFixed(2)}s clip`;
|
|
}
|
|
|
|
// ---- drag + keyboard + typed-entry on the trim handles ----
|
|
function secAtClientX(clientX) {
|
|
const rect = $('wave').getBoundingClientRect();
|
|
const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
|
return frac * fullDur;
|
|
}
|
|
for (const which of ['start', 'end']) {
|
|
const el = $(`handle-${which}`);
|
|
el.addEventListener('pointerdown', (e) => {
|
|
e.preventDefault();
|
|
el.focus();
|
|
el.setPointerCapture(e.pointerId);
|
|
el.classList.add('dragging');
|
|
const move = (ev) => {
|
|
const s = secAtClientX(ev.clientX);
|
|
if (which === 'start') setSelection(s, selEnd);
|
|
else setSelection(selStart, s);
|
|
};
|
|
const up = () => {
|
|
el.classList.remove('dragging');
|
|
el.removeEventListener('pointermove', move);
|
|
el.removeEventListener('pointerup', up);
|
|
};
|
|
el.addEventListener('pointermove', move);
|
|
el.addEventListener('pointerup', up);
|
|
});
|
|
el.addEventListener('keydown', (e) => {
|
|
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
|
|
e.preventDefault();
|
|
const d = (e.key === 'ArrowRight' ? 1 : -1) * (e.shiftKey ? 0.1 : 0.01);
|
|
if (which === 'start') setSelection(selStart + d, selEnd);
|
|
else setSelection(selStart, selEnd + d);
|
|
});
|
|
}
|
|
// Editable time fields for exact entry (commit on change/Enter).
|
|
$('trim-start-s').addEventListener('change', () => {
|
|
const v = parseFloat($('trim-start-s').value);
|
|
setSelection(isNaN(v) ? 0 : v, selEnd);
|
|
});
|
|
$('trim-end-s').addEventListener('change', () => {
|
|
const v = parseFloat($('trim-end-s').value);
|
|
setSelection(selStart, isNaN(v) ? fullDur : v);
|
|
});
|
|
|
|
// Draw a min/max waveform of the full (pre-trim) samples onto the canvas.
|
|
function drawWave() {
|
|
const canvas = $('wave');
|
|
if (!decoded || !canvas.clientWidth) return;
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const w = canvas.clientWidth, h = canvas.clientHeight;
|
|
canvas.width = w * dpr; canvas.height = h * dpr;
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.scale(dpr, dpr);
|
|
ctx.clearRect(0, 0, w, h);
|
|
const s = decoded.samples;
|
|
const mid = h / 2;
|
|
const step = Math.max(1, Math.floor(s.length / w));
|
|
ctx.fillStyle = '#7c4dff';
|
|
for (let x = 0; x < w; x++) {
|
|
let min = 1, max = -1;
|
|
const base = x * step;
|
|
for (let i = 0; i < step && base + i < s.length; i++) {
|
|
const v = s[base + i];
|
|
if (v < min) min = v;
|
|
if (v > max) max = v;
|
|
}
|
|
const y1 = mid - max * mid;
|
|
ctx.fillRect(x, y1, 1, Math.max(1, (mid - min * mid) - y1));
|
|
}
|
|
}
|
|
|
|
// Re-encode the staged WAV from the cached decode (no re-decode).
|
|
function reEncode() {
|
|
if (!decoded || !currentFile) return;
|
|
const bits = parseInt($('bits').value, 10);
|
|
const gain = parseInt($('track-level').value, 10) / 100;
|
|
const { trimStart, trimEnd } = trimValues();
|
|
const { wav, durationSec } = encodeWav(decoded.samples, decoded.rate, bits, { trimStart, trimEnd, gain });
|
|
pendingWav = { wav, durationSec, rate: decoded.rate, bits, level: Math.round(gain * 100), name: currentFile.name };
|
|
const lvl = gain !== 1 ? ` · ${Math.round(gain * 100)}% level` : '';
|
|
$('convert-info').innerHTML =
|
|
`<b>${currentFile.name}</b> → ${bits}-bit ${decoded.rate / 1000} kHz mono · ` +
|
|
`${durationSec.toFixed(1)}s${lvl} · ${fmtBytes(wav.byteLength)} (incl. 44-byte WAV header)`;
|
|
$('btn-upload').disabled = !dev.connected || durationSec <= 0;
|
|
$('btn-preview').disabled = durationSec <= 0;
|
|
}
|
|
|
|
// Coalesce rapid slider events: update the UI immediately, re-encode once per frame.
|
|
let reEncodeQueued = false;
|
|
function scheduleReEncode() {
|
|
if (reEncodeQueued) return;
|
|
reEncodeQueued = true;
|
|
requestAnimationFrame(() => { reEncodeQueued = false; reEncode(); });
|
|
}
|
|
|
|
// Changing the rate needs a fresh decode; bits/trim only need a re-encode.
|
|
$('rate').addEventListener('change', () => { if (currentFile) handleFile(currentFile); });
|
|
$('bits').addEventListener('input', () => { stopPreview(); reEncode(); });
|
|
$('track-level').addEventListener('input', () => {
|
|
$('track-level-val').textContent = `${$('track-level').value}%`;
|
|
stopPreview(); scheduleReEncode();
|
|
});
|
|
// Redraw the waveform on viewport resize (rotation / window size change).
|
|
let resizeTimer = null;
|
|
window.addEventListener('resize', () => {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = setTimeout(() => { if (decoded) drawWave(); }, 150);
|
|
});
|
|
|
|
// ---- local preview of the trimmed clip ----
|
|
let previewCtx = null;
|
|
let previewSrc = null;
|
|
function stopPreview() {
|
|
if (previewSrc) { try { previewSrc.stop(); } catch {} previewSrc = null; }
|
|
if (previewCtx) { try { previewCtx.close(); } catch {} previewCtx = null; }
|
|
$('btn-preview').textContent = '▶ Preview';
|
|
}
|
|
$('btn-preview').addEventListener('click', () => {
|
|
if (previewSrc) { stopPreview(); return; }
|
|
if (!decoded) return;
|
|
const { trimStart, trimEnd } = trimValues();
|
|
const slice = trimSamples(decoded.samples, decoded.rate, trimStart, trimEnd);
|
|
if (!slice.length) return;
|
|
const AC = window.AudioContext || window.webkitAudioContext;
|
|
previewCtx = new AC();
|
|
const gain = parseInt($('track-level').value, 10) / 100;
|
|
const buf = previewCtx.createBuffer(1, slice.length, decoded.rate);
|
|
const ch = buf.getChannelData(0);
|
|
for (let i = 0; i < slice.length; i++) ch[i] = Math.max(-1, Math.min(1, slice[i] * gain));
|
|
previewSrc = previewCtx.createBufferSource();
|
|
previewSrc.buffer = buf;
|
|
previewSrc.connect(previewCtx.destination);
|
|
previewSrc.onended = stopPreview;
|
|
previewSrc.start();
|
|
$('btn-preview').textContent = '⏹ Stop';
|
|
});
|
|
|
|
// ---- upload ----
|
|
$('btn-upload').addEventListener('click', async () => {
|
|
reEncode(); // ensure pendingWav matches the current sliders/format (rAF may be pending)
|
|
if (!pendingWav) return;
|
|
const track = parseInt($('upload-slot').value, 10);
|
|
if (occupiedSlots().has(track)) {
|
|
const name = slots[track]?.name;
|
|
if (!confirm(`Slot ${track} already holds ${name ? `"${name}"` : 'a track'}. Overwrite it?`)) return;
|
|
}
|
|
stopPreview();
|
|
$('btn-upload').disabled = true;
|
|
const bar = $('upload-bar');
|
|
bar.style.width = '0%';
|
|
bar.parentElement.classList.add('active');
|
|
try {
|
|
const { ok, acked } = await dev.upload(track, pendingWav.wav, (sent, total) => {
|
|
bar.style.width = `${Math.round((sent / total) * 100)}%`;
|
|
});
|
|
if (ok) {
|
|
slots[track] = {
|
|
name: pendingWav.name, bits: pendingWav.bits, rate: pendingWav.rate,
|
|
durationSec: pendingWav.durationSec, bytes: pendingWav.wav.byteLength, at: Date.now(),
|
|
};
|
|
saveSlots();
|
|
await refresh(); // pull the authoritative list back from the device
|
|
}
|
|
} catch (err) {
|
|
log('Upload failed: ' + (err.message || err));
|
|
} finally {
|
|
bar.parentElement.classList.remove('active');
|
|
$('btn-upload').disabled = !dev.connected;
|
|
}
|
|
});
|
|
|
|
// ---- track list ----
|
|
$('btn-refresh').addEventListener('click', () => refresh());
|
|
|
|
async function refresh() {
|
|
if (!dev.connected) return;
|
|
try {
|
|
deviceTracks = await dev.listTracks();
|
|
log(`Device reports ${deviceTracks.length} track(s).`);
|
|
renderSlots();
|
|
} catch (err) {
|
|
log('List failed: ' + (err.message || err));
|
|
}
|
|
}
|
|
|
|
async function onDelete(idx, onDevice, name) {
|
|
const label = name ? `"${name}"` : `the track in slot ${idx}`;
|
|
if (onDevice) {
|
|
if (!confirm(`Delete ${label} from the device? This can't be undone.`)) return;
|
|
try {
|
|
const r = await dev.deleteTrack(idx);
|
|
if (r.success) {
|
|
delete slots[idx]; saveSlots();
|
|
log(`🗑 Deleted slot ${idx}.`);
|
|
await refresh();
|
|
} else {
|
|
log(`Device could not delete slot ${idx}.`);
|
|
}
|
|
} catch (err) {
|
|
log('Delete failed: ' + (err.message || err));
|
|
}
|
|
} else {
|
|
if (!confirm(`Forget ${label} from this browser's list? (It only clears the local record.)`)) return;
|
|
delete slots[idx]; saveSlots(); renderSlots();
|
|
}
|
|
}
|
|
|
|
function renderSlots() {
|
|
const list = $('slots');
|
|
list.innerHTML = '';
|
|
const onDevice = dev.connected && Array.isArray(deviceTracks);
|
|
|
|
// When connected, the device list is the source of truth (annotated with local
|
|
// names). Otherwise fall back to the local record of past uploads.
|
|
const rows = onDevice
|
|
? deviceTracks.map((t) => ({ ...t, name: slots[t.idx]?.name }))
|
|
: Object.keys(slots).map(Number).sort((a, b) => a - b).map((k) => ({
|
|
idx: k, bits: slots[k].bits, rate: slots[k].rate,
|
|
durationSec: slots[k].durationSec, name: slots[k].name,
|
|
}));
|
|
|
|
updateUploadSlotOptions(); // keep the upload picker's "next free" in sync
|
|
|
|
if (!rows.length) {
|
|
list.innerHTML = `<li class="empty">${onDevice ? 'No tracks on the device yet.' : 'Connect to list device tracks.'}</li>`;
|
|
return;
|
|
}
|
|
|
|
for (const t of rows) {
|
|
const li = document.createElement('li');
|
|
const title = t.name || `Track ${t.idx}`;
|
|
li.innerHTML =
|
|
`<div class="slot-meta"><span class="slot-num">${t.idx}</span>` +
|
|
`<div><b>${title}</b><small>${t.bits}-bit ${t.rate / 1000}kHz · ${(+t.durationSec).toFixed(1)}s</small></div></div>`;
|
|
const actions = document.createElement('div');
|
|
actions.className = 'slot-actions';
|
|
const playBtn = btn('▶', 'Play', () => dev.play(t.idx).catch((e) => log('' + e)));
|
|
const stopBtn = btn('⏹', 'Stop', () => dev.stop().catch((e) => log('' + e)));
|
|
playBtn.dataset.needsConn = ''; stopBtn.dataset.needsConn = '';
|
|
playBtn.disabled = stopBtn.disabled = !dev.connected;
|
|
const delBtn = btn('🗑', onDevice ? 'Delete from device' : 'Forget (local only)',
|
|
() => onDelete(t.idx, onDevice, t.name));
|
|
actions.append(playBtn, stopBtn, delBtn);
|
|
li.append(actions);
|
|
list.append(li);
|
|
}
|
|
}
|
|
function btn(label, title, fn) {
|
|
const b = document.createElement('button');
|
|
b.textContent = label; b.title = title; b.className = 'mini';
|
|
b.addEventListener('click', fn);
|
|
return b;
|
|
}
|
|
|
|
// ---- populate selectors ----
|
|
function fillSelect(sel, values, fmt, selected) {
|
|
sel.innerHTML = '';
|
|
for (const v of values) {
|
|
const o = document.createElement('option');
|
|
o.value = v; o.textContent = fmt(v);
|
|
if (v === selected) o.selected = true;
|
|
sel.append(o);
|
|
}
|
|
}
|
|
fillSelect($('rate'), RATES, (v) => `${v / 1000} kHz`, 8000);
|
|
fillSelect($('bits'), BITS, (v) => `${v}-bit`, 8);
|
|
|
|
// Which slots currently hold a track: device truth when connected, else local memory.
|
|
function occupiedSlots() {
|
|
if (dev.connected && Array.isArray(deviceTracks)) return new Set(deviceTracks.map((t) => t.idx));
|
|
return new Set(Object.keys(slots).map(Number));
|
|
}
|
|
function nextFreeSlot() {
|
|
const occ = occupiedSlots();
|
|
for (let i = 0; i < MAX_TRACKS; i++) if (!occ.has(i)) return i;
|
|
return MAX_TRACKS - 1; // all full → default to the last slot
|
|
}
|
|
// Rebuild the upload-slot picker, label occupied slots, and default to next free.
|
|
function updateUploadSlotOptions() {
|
|
const occ = occupiedSlots();
|
|
const sel = $('upload-slot');
|
|
sel.innerHTML = '';
|
|
for (let i = 0; i < MAX_TRACKS; i++) {
|
|
const o = document.createElement('option');
|
|
o.value = i;
|
|
const name = slots[i]?.name;
|
|
o.textContent = occ.has(i) ? `Slot ${i} — in use${name ? `: ${name}` : ''}` : `Slot ${i} — free`;
|
|
sel.append(o);
|
|
}
|
|
sel.value = String(nextFreeSlot());
|
|
}
|
|
updateUploadSlotOptions();
|
|
|
|
// ---- support banner ----
|
|
if (!isSupported()) {
|
|
$('unsupported').hidden = false;
|
|
$('btn-connect').disabled = true;
|
|
}
|
|
|
|
renderSlots();
|
|
setConnected(false);
|
|
|
|
// ---- PWA service worker ----
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('./sw.js').catch(() => {});
|
|
}
|