Fix capture.html: remove bin requirement, fix start/stop handler naming to avoid recursion, track sessionId

This commit is contained in:
Zac Gaetano 2026-05-16 00:42:36 -04:00
parent 1862082ba7
commit 79dcfaffeb

View file

@ -280,10 +280,10 @@
</div> </div>
<div class="control-buttons"> <div class="control-buttons">
<button class="btn btn-record btn-start" id="startBtn" onclick="startRecording()"> <button class="btn btn-record btn-start" id="startBtn" onclick="handleStartRecording()">
⏺ START ⏺ START
</button> </button>
<button class="btn btn-record btn-stop" id="stopBtn" onclick="stopRecording()" disabled> <button class="btn btn-record btn-stop" id="stopBtn" onclick="handleStopRecording()" disabled>
⏹ STOP ⏹ STOP
</button> </button>
</div> </div>
@ -333,6 +333,7 @@
recentCaptures: [], recentCaptures: [],
recordingTime: 0, recordingTime: 0,
recordingInterval: null, recordingInterval: null,
sessionId: null,
}; };
// ============================================================ // ============================================================
@ -499,10 +500,10 @@
const item = document.createElement('div'); const item = document.createElement('div');
item.className = 'capture-item'; item.className = 'capture-item';
item.innerHTML = ` item.innerHTML = `
<div class="capture-item-name">${capture.clip_name || 'Untitled'}</div> <div class="capture-item-name">${capture.clip_name || capture.name || 'Untitled'}</div>
<div class="capture-item-meta"> <div class="capture-item-meta">
<span>${formatDuration(capture.duration || 0)}</span> <span>${formatDuration(capture.duration || 0)}</span>
<span>${new Date(capture.captured_at).toLocaleDateString()}</span> <span>${new Date(capture.created_at || capture.captured_at).toLocaleDateString()}</span>
</div> </div>
`; `;
container.appendChild(item); container.appendChild(item);
@ -511,11 +512,13 @@
// ============================================================ // ============================================================
// RECORDING CONTROL // RECORDING CONTROL
// Named handleStartRecording / handleStopRecording to avoid
// shadowing the api.js startRecording / stopRecording functions.
// ============================================================ // ============================================================
async function startRecording() { async function handleStartRecording() {
if (!captureState.currentProject || !captureState.currentBin || !captureState.currentDevice) { if (!captureState.currentProject || !captureState.currentDevice) {
alert('Please select project, bin, and device'); alert('Please select project and device');
return; return;
} }
@ -527,15 +530,16 @@
try { try {
updateStatusBar('Starting recording...'); updateStatusBar('Starting recording...');
const result = await startRecording( const result = await startRecording(
captureState.currentDevice, parseInt(captureState.currentDevice, 10),
captureState.currentProject, captureState.currentProject,
captureState.currentBin, captureState.currentBin || null,
captureState.currentClipName captureState.currentClipName
); );
if (result.success) { if (result.success) {
captureState.isRecording = true; captureState.isRecording = true;
captureState.recordingTime = 0; captureState.recordingTime = 0;
captureState.sessionId = result.data.session_id || null;
startTimecodeUpdate(); startTimecodeUpdate();
updateRecordingUI(); updateRecordingUI();
updateStatusBar(); updateStatusBar();
@ -548,13 +552,14 @@
} }
} }
async function stopRecording() { async function handleStopRecording() {
try { try {
updateStatusBar('Stopping recording...'); updateStatusBar('Stopping recording...');
const result = await stopRecording(); const result = await stopRecording(captureState.sessionId);
if (result.success) { if (result.success) {
captureState.isRecording = false; captureState.isRecording = false;
captureState.sessionId = null;
clearInterval(captureState.recordingInterval); clearInterval(captureState.recordingInterval);
updateRecordingUI(); updateRecordingUI();
loadCaptureData(); loadCaptureData();