dejvino/music-video-gen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Phase 6 WIP refactor: migrate track analysis UI from overlay to sidebar header

Browse Source
This commit is contained in:
Dejvino
2026-08-05 12:39:44 +02:00
parent d0f93e5c55
commit 40188493ac
3 changed files with 128 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
flow-state/src/main.js
+36 -14
View File
@@ -17,9 +17,6 @@ const dom = {
stage: document.getElementById('stage'),
overlay: document.getElementById('overlay'),
dropzone: document.getElementById('dropzone'),
analysing: document.getElementById('analysing'),
anStep: document.querySelector('#analysing .an-step'),
anFill: document.querySelector('#analysing .an-fill'),
fileInput: document.getElementById('file-input'),
audio: document.getElementById('audio'),
timelineCanvas: document.getElementById('timeline-canvas'),
@@ -29,6 +26,12 @@ const dom = {
panelTabs: document.getElementById('panel-tabs'),
hud: document.getElementById('hud'),
play: document.getElementById('btn-play'),
thLabel: document.getElementById('th-label'),
thName: document.getElementById('th-name'),
thProgress: document.getElementById('th-progress'),
thStep: document.getElementById('th-step'),
thFill: document.getElementById('th-fill'),
changeTrack: document.getElementById('btn-change-track'),
};
const state = {
@@ -52,17 +55,32 @@ const paramPanel = new ParamPanel(document.createElement('div'), onParamChange);
async function loadFile(file) {
if (state.busy) return;
state.busy = true;
dom.dropzone.hidden = true;
dom.analysing.hidden = false;
if (dom.overlay) {
dom.overlay.hidden = true;
dom.overlay.style.display = 'none';
}
dom.thLabel.textContent = 'loading track';
dom.thName.hidden = false;
dom.thName.textContent = file.name.replace(/\.[^/.]+$/, '');
dom.thName.title = file.name;
dom.thProgress.hidden = false;
dom.changeTrack.hidden = true;
try {
await state.show.load(file, (stage, fraction) => {
dom.anStep.textContent = stage;
dom.anFill.style.width = `${Math.round((fraction || 0) * 100)}%`;
dom.thStep.textContent = stage;
dom.thFill.style.width = `${Math.round((fraction || 0) * 100)}%`;
});
dom.audio.src = URL.createObjectURL(file);
dom.overlay.hidden = true;
dom.thLabel.textContent = 'loaded track';
dom.thName.textContent = state.show.fileName;
dom.thName.title = state.show.fileName;
dom.thProgress.hidden = true;
dom.changeTrack.hidden = false;
dom.changeTrack.textContent = 'change track';
strip.setShow(state.show);
resize();
seekTo(0);
@@ -70,18 +88,22 @@ async function loadFile(file) {
document.title = `flow-state · ${state.show.fileName}`;
console.info('[flow-state]', describeLook(state.show.look));
} catch (err) {
dom.anStep.textContent = `failed: ${err.message}`;
dom.thLabel.textContent = 'analysis failed';
dom.thStep.textContent = `failed: ${err.message}`;
console.error(err);
setTimeout(() => {
dom.analysing.hidden = true;
dom.dropzone.hidden = false;
}, 4000);
dom.changeTrack.hidden = false;
dom.changeTrack.textContent = 'try again';
if (dom.overlay) {
dom.overlay.hidden = false;
dom.overlay.style.display = 'flex';
}
} finally {
state.busy = false;
}
}
dom.dropzone.addEventListener('click', () => dom.fileInput.click());
if (dom.dropzone) dom.dropzone.addEventListener('click', () => dom.fileInput.click());
if (dom.changeTrack) dom.changeTrack.addEventListener('click', () => dom.fileInput.click());
dom.fileInput.addEventListener('change', (e) => {
if (e.target.files[0]) loadFile(e.target.files[0]);
});