nodes/olivv-cs-ComfyUI-FunPack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Movie Editor: align audio clips with video on the timeline

Browse Source 
Remove the left "Clips" lane label gutter that offset audio blocks by 72px
so per-scene and inserted audio share the same time origin as video clips.
This commit is contained in:
digital-garbage
2026-06-10 14:04:07 +03:00
parent da3f06199d
commit 82bb1511d5
2 changed files with 4 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
movie_editor/frontend/styles.css
+1 -4
View File
@@ -410,10 +410,7 @@ input[type=number] { font-family: var(--font-mono); }
.tl-audio-add { font-size: 12px; padding: 2px 6px; max-width: 200px; }
.tl-audio-lane { position: relative; height: 36px; border-bottom: 1px solid var(--line-2); }
.tl-audio-lane:last-child { border-bottom: none; }
.tl-audio-lane-label { position: absolute; left: 0; top: 0; bottom: 0; width: 72px; display: flex; align-items: center;
padding: 0 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
color: var(--faint); background: var(--ink-1); border-right: 1px solid var(--line-2); z-index: 2; pointer-events: none; }
.tl-audio-lane-body { position: absolute; left: 72px; right: 0; top: 0; bottom: 0; }
.tl-audio-lane-body { position: absolute; inset: 0; }
.tl-aud-clip { position: absolute; top: 5px; bottom: 5px; box-sizing: border-box;
background: linear-gradient(180deg, #1e3a2f, #152820); border: 1px solid #2d5a45; border-radius: 5px;
display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 48px; overflow: hidden; }
movie_editor/frontend/timeline.js
+3 -5
View File
@@ -332,7 +332,6 @@
function insertedAudioLane(st, p, track, laneH) {
const lane = el("div", "tl-audio-lane"); lane.style.height = laneH + "px";
const asset = (st.mediaBin || []).find((m) => m.id === track.media_ref);
lane.append(el("div", "tl-audio-lane-label", (asset && asset.name) || track.label || "Track"));
const body = el("div", "tl-audio-lane-body");
const startSec = track.start_sec || 0;
const dur = asset && asset.duration_sec ? asset.duration_sec : Math.max(2, (p.scenes || []).reduce((a, sc) => a + sDur(sc, p), 0) - startSec);
@@ -363,11 +362,10 @@
return lane;
}
function audioLanes(st, p, lay, contentW) {
function audioLanes(st, p, lay) {
const wrap = el("div", "tl-audio-lanes");
const origLane = el("div", "tl-audio-lane"); origLane.style.height = "36px";
origLane.append(el("div", "tl-audio-lane-label", "Clips"));
const origBody = el("div", "tl-audio-lane-body"); origBody.style.width = contentW + "px";
const origBody = el("div", "tl-audio-lane-body");
lay.forEach(({ sc, o, d }, i) => origBody.append(sceneAudioClip(st, p, sc, i, o * pxPerSec, d * pxPerSec)));
origLane.append(origBody);
wrap.append(origLane);
@@ -503,7 +501,7 @@
for (let i = 0; i < lay.length - 1; i++) track.append(seamEl(st, p, lay[i].sc, (lay[i].o + lay[i].d) * pxPerSec));
if (!lay.length) track.append(el("div", "tl-emptyhint", "No clips yet — add one from the toolbar."));
tracks.append(track);
tracks.append(audioLanes(st, p, lay, contentW));
tracks.append(audioLanes(st, p, lay));
const phSec = Math.min(window.Player?.getPlayhead() ?? 0, totalSec);
tlPhEl = el("div", "tl-playhead"); tlPhEl.style.left = (phSec * pxPerSec) + "px"; tracks.append(tlPhEl);
content.append(tracks);