fixed most upload issues, updated schematic
This commit is contained in:
zyphlar
+112
-26
@@ -1,6 +1,6 @@
|
||||
// app.js — UI glue for the BabyMobile manager PWA.
|
||||
import { BabyMobile, isSupported, MAX_TRACKS } from './ble.js';
|
||||
import { fileToWav, RATES, BITS } from './wav.js';
|
||||
import { decodeFileToMono, encodeWav, trimSamples, RATES, BITS } from './wav.js';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const dev = new BabyMobile();
|
||||
@@ -12,6 +12,8 @@ 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)) || {}; }
|
||||
@@ -67,35 +69,93 @@ $('drop').addEventListener('drop', (e) => {
|
||||
});
|
||||
fileInput.addEventListener('change', () => { if (fileInput.files.length) handleFile(fileInput.files[0]); });
|
||||
|
||||
// Decode the file (expensive) once per file/rate, then re-encode cheaply when
|
||||
// the user tweaks bit-depth or trim.
|
||||
async function handleFile(file) {
|
||||
const rate = parseInt($('rate').value, 10);
|
||||
const bits = parseInt($('bits').value, 10);
|
||||
$('convert-info').textContent = `Converting "${file.name}"…`;
|
||||
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 res = await fileToWav(file, { rate, bits });
|
||||
pendingWav = { ...res, name: file.name };
|
||||
const sec = res.durationSec.toFixed(1);
|
||||
$('convert-info').innerHTML =
|
||||
`<b>${file.name}</b> → ${bits}-bit ${rate / 1000} kHz mono<br>` +
|
||||
`${sec}s · ${fmtBytes(res.wav.byteLength)} (incl. 44-byte WAV header)`;
|
||||
$('btn-upload').disabled = !dev.connected;
|
||||
const rate = parseInt($('rate').value, 10);
|
||||
decoded = await decodeFileToMono(file, rate);
|
||||
$('trim-start').value = '0';
|
||||
$('trim-end').value = '0';
|
||||
$('trim').hidden = false;
|
||||
reEncode();
|
||||
} catch (err) {
|
||||
$('convert-info').textContent = 'Could not decode this file: ' + (err.message || err) +
|
||||
'. Try a WAV/MP3/M4A the browser can decode.';
|
||||
}
|
||||
}
|
||||
|
||||
// Re-convert if the format options change while a file is staged.
|
||||
['rate', 'bits'].forEach((id) => $(id).addEventListener('change', () => {
|
||||
if (fileInput.files.length) handleFile(fileInput.files[0]);
|
||||
}));
|
||||
function trimValues() {
|
||||
return {
|
||||
trimStart: Math.max(0, parseFloat($('trim-start').value) || 0),
|
||||
trimEnd: Math.max(0, parseFloat($('trim-end').value) || 0),
|
||||
};
|
||||
}
|
||||
|
||||
// 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 { trimStart, trimEnd } = trimValues();
|
||||
const fullDur = decoded.samples.length / decoded.rate;
|
||||
const { wav, durationSec } = encodeWav(decoded.samples, decoded.rate, bits, { trimStart, trimEnd });
|
||||
pendingWav = { wav, durationSec, rate: decoded.rate, bits, name: currentFile.name };
|
||||
|
||||
const trimmed = (trimStart || trimEnd) ? ` (trimmed from ${fullDur.toFixed(1)}s)` : '';
|
||||
$('convert-info').innerHTML =
|
||||
`<b>${currentFile.name}</b> → ${bits}-bit ${decoded.rate / 1000} kHz mono<br>` +
|
||||
`${durationSec.toFixed(1)}s${trimmed} · ${fmtBytes(wav.byteLength)} (incl. 44-byte WAV header)`;
|
||||
$('btn-upload').disabled = !dev.connected || durationSec <= 0;
|
||||
$('btn-preview').disabled = durationSec <= 0;
|
||||
}
|
||||
|
||||
// Changing the rate needs a fresh decode; bits/trim only need a re-encode.
|
||||
$('rate').addEventListener('change', () => { if (currentFile) handleFile(currentFile); });
|
||||
['bits', 'trim-start', 'trim-end'].forEach((id) => $(id).addEventListener('input', () => { stopPreview(); reEncode(); }));
|
||||
|
||||
// ---- 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 buf = previewCtx.createBuffer(1, slice.length, decoded.rate);
|
||||
buf.getChannelData(0).set(slice);
|
||||
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 () => {
|
||||
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%';
|
||||
@@ -120,10 +180,6 @@ $('btn-upload').addEventListener('click', async () => {
|
||||
}
|
||||
});
|
||||
|
||||
// ---- playback ----
|
||||
$('btn-play').addEventListener('click', () => dev.play(parseInt($('play-slot').value, 10)).catch((e) => log('' + e)));
|
||||
$('btn-stop').addEventListener('click', () => dev.stop().catch((e) => log('' + e)));
|
||||
|
||||
// ---- track list ----
|
||||
$('btn-refresh').addEventListener('click', () => refresh());
|
||||
|
||||
@@ -138,8 +194,10 @@ async function refresh() {
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(idx, onDevice) {
|
||||
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) {
|
||||
@@ -153,6 +211,7 @@ async function onDelete(idx, onDevice) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -171,6 +230,8 @@ function renderSlots() {
|
||||
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;
|
||||
@@ -185,11 +246,12 @@ function renderSlots() {
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'slot-actions';
|
||||
const playBtn = btn('▶', 'Play', () => dev.play(t.idx).catch((e) => log('' + e)));
|
||||
playBtn.dataset.needsConn = '';
|
||||
playBtn.disabled = !dev.connected;
|
||||
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));
|
||||
actions.append(playBtn, delBtn);
|
||||
() => onDelete(t.idx, onDevice, t.name));
|
||||
actions.append(playBtn, stopBtn, delBtn);
|
||||
li.append(actions);
|
||||
list.append(li);
|
||||
}
|
||||
@@ -213,9 +275,33 @@ function fillSelect(sel, values, fmt, selected) {
|
||||
}
|
||||
fillSelect($('rate'), RATES, (v) => `${v / 1000} kHz`, 8000);
|
||||
fillSelect($('bits'), BITS, (v) => `${v}-bit`, 8);
|
||||
for (const sel of [$('upload-slot'), $('play-slot')]) {
|
||||
fillSelect(sel, Array.from({ length: MAX_TRACKS }, (_, i) => i), (v) => `Slot ${v}`, 0);
|
||||
fillSelect($('play-slot'), Array.from({ length: MAX_TRACKS }, (_, i) => i), (v) => `Slot ${v}`, 0);
|
||||
|
||||
// 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()) {
|
||||
|
||||
Reference in New Issue
Block a user