luzadev/djaudiovisualizer
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Scenes: independent per-element timing (effect/text/image) with full inline options + duration; dedicated Playlist tab

Browse Source 
Each scene element (effect, text, image) now has its own appearance time and
optional duration, with all styling options inline (no more capture-from-panel).
Live preview applies edits immediately on the playing track. Moved the playlist
and its video-render controls into a new Playlist tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
lucianoandClaude Opus 4.8 committed 2026-06-22 14:53:05 +02:00
1 parent dc37e4ab3f
commit 56230cb3b0
3 files changed
+256 -162
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/style.css
+23 -13
View File
@@ -362,35 +362,45 @@ textarea.textarea-lg {
.scene-editor .se-title { font-size: 12px; font-weight: 600; opacity: 0.92; margin-bottom: 10px; }
.scene-editor .se-title small { font-weight: 400; opacity: 0.55; }
.scene-editor .se-empty { font-size: 11px; opacity: 0.5; padding: 6px 2px 10px; }
.scene-editor .cue {
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.08);
border-left: 3px solid rgba(255,255,255,0.18);
border-radius: 10px;
padding: 9px;
margin-bottom: 9px;
}
.scene-editor .cue-effect { border-left-color: #8fb6ff; }
.scene-editor .cue-text { border-left-color: #ffd27a; }
.scene-editor .cue-image { border-left-color: #9be6a0; }
.scene-editor .cue-head { display: flex; align-items: center; gap: 6px; }
.scene-editor .cue-at { opacity: 0.5; flex: 0 0 auto; }
.scene-editor .cue-time { width: 60px; flex: 0 0 auto; text-align: center; padding: 6px 4px; font-variant-numeric: tabular-nums; }
.scene-editor .cue-ico { flex: 0 0 auto; }
.scene-editor .cue-type { flex: 0 0 auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
.scene-editor .cue-at { opacity: 0.5; flex: 0 0 auto; margin-left: 4px; }
.scene-editor .cue-time { width: 58px; flex: 0 0 auto; text-align: center; padding: 6px 4px; font-variant-numeric: tabular-nums; }
.scene-editor .cue-durl { flex: 0 0 auto; opacity: 0.5; font-size: 11px; }
.scene-editor .cue-dur { width: 46px; flex: 0 0 auto; text-align: center; padding: 6px 4px; }
.scene-editor .cue-del { flex: 0 0 auto; color: #ff9a9a; margin-left: auto; }
.scene-editor .cue-body { margin-top: 8px; }
.scene-editor .cue-eff-fam, .scene-editor .cue-eff-pre { flex: 1; min-width: 0; }
.scene-editor .cue-eff-cur { flex: 0 0 auto; }
.scene-editor .cue-eff-name { flex: 1; min-width: 0; font-size: 10px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-editor .cue-base { flex: 0 0 auto; font-size: 9px; opacity: 0.45; padding: 0 4px; }
.scene-editor .cue-block { background: rgba(255,255,255,0.035); border-radius: 8px; padding: 7px 8px; margin-top: 7px; }
.scene-editor .cue-bh { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.55; margin-bottom: 5px; }
.scene-editor .cue-text { width: 100%; margin: 0 0 6px; }
.scene-editor .cue-text { width: 100%; margin: 0 0 7px; }
.scene-editor .cue-row { display: flex; align-items: center; gap: 6px; }
.scene-editor .cue-row + .cue-row { margin-top: 6px; }
.scene-editor .cue-tstyle, .scene-editor .cue-img,
.scene-editor .cue-img-clear, .scene-editor .cue-tstyle-clear { flex: 0 0 auto; }
.scene-editor .cue-tinfo, .scene-editor .cue-name { flex: 1; min-width: 0; font-size: 10px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-editor .cue-tx-dir, .scene-editor .cue-tx-fx,
.scene-editor .cue-tx-font, .scene-editor .cue-tx-pos { flex: 1; min-width: 0; }
.scene-editor .cue-tx-size, .scene-editor .cue-tx-speed, .scene-editor .cue-img-size { flex: 1; }
.scene-editor .cue-tx-color { flex: 0 0 auto; width: 34px; padding: 0; }
.scene-editor .cue-tx-bold { width: auto; }
.scene-editor .cue-img, .scene-editor .cue-img-clear { flex: 0 0 auto; }
.scene-editor .cue-name { flex: 1; min-width: 0; font-size: 10px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-editor .cue-img-pos { flex: 0 0 auto; width: 92px; }
.scene-editor .cue-dim { flex: 0 0 auto; font-size: 10px; opacity: 0.55; }
.scene-editor .cue-img-size { flex: 1; }
.scene-editor .se-foot { display: flex; gap: 6px; margin-top: 2px; }
.scene-editor .se-foot .se-clear { color: #ff9a9a; }
.scene-editor .se-foot { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.scene-editor .se-foot .se-clear { color: #ff9a9a; margin-left: auto; }
/* ============ OUTPUT WINDOW ============ */
body.output { cursor: none; background: #000; }