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

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

No files matched your search

+23 -19
View File
@@ -15,6 +15,7 @@
<nav id="tabs">
<button data-tab="audio" class="active">🎵 Audio</button>
<button data-tab="playlist">🎶 Playlist</button>
<button data-tab="effetti">🌀 Effetti</button>
<button data-tab="pad">🎹 Pad</button>
<button data-tab="immagini">🖼 Immagini</button>
@@ -44,6 +45,26 @@
<div class="meter"><span>HIGH</span><div class="bar"><i id="m-treble"></i></div></div>
</section>
<section>
<label>Reattività <span id="gain-val">1.0×</span></label>
<input type="range" id="gain" min="0" max="3" step="0.05" value="1" />
<label>Velocità <span id="speed-val">1.0×</span></label>
<input type="range" id="speed" min="0" max="3" step="0.05" value="1" />
</section>
<section>
<label>Equalizzatore visual</label>
<label class="band band-bass">Bassi <span id="bass-gain-val">1.0×</span></label>
<input type="range" id="bass-gain" min="0" max="3" step="0.05" value="1" />
<label class="band band-mid">Medi <span id="mid-gain-val">1.0×</span></label>
<input type="range" id="mid-gain" min="0" max="3" step="0.05" value="1" />
<label class="band band-treble">Alti <span id="treble-gain-val">1.0×</span></label>
<input type="range" id="treble-gain" min="0" max="3" step="0.05" value="1" />
</section>
</div>
<!-- ============ PLAYLIST ============ -->
<div class="tab-panel" data-tab="playlist">
<section class="span2">
<label>Playlist <span id="playlist-count">0 brani</span></label>
<div class="row">
@@ -58,10 +79,10 @@
<input type="file" id="tracks-input" accept="audio/*,video/*" multiple hidden />
<input type="file" id="scene-img-input" accept="image/*" hidden />
<ol id="playlist" class="playlist"></ol>
<div class="hint-mini">Clic sul <b>nome</b> = avvia/riavvia · ▶/⏸ pausa · ⠿ riordina · ⌨ tasto rapido · 🎬 <b>scena</b> (effetto+testo+immagine applicati quando parte il brano)</div>
<div class="hint-mini">Clic sul <b>nome</b> = avvia/riavvia · ▶/⏸ pausa · ⠿ riordina · ⌨ tasto rapido · 🎬 <b>scena</b> (effetto/testo/immagine, ognuno col proprio tempo)</div>
</section>
<section>
<section class="span2">
<label>Resa video in playlist</label>
<select id="tvid-fit">
<option value="contain">Adatta (bordi neri)</option>
@@ -79,23 +100,6 @@
<input type="range" id="tvid-op" min="0" max="100" step="1" value="100" />
<div class="hint-mini">Si applica al video riprodotto dalla playlist (per fonderlo con gli effetti).</div>
</section>
<section>
<label>Reattività <span id="gain-val">1.0×</span></label>
<input type="range" id="gain" min="0" max="3" step="0.05" value="1" />
<label>Velocità <span id="speed-val">1.0×</span></label>
<input type="range" id="speed" min="0" max="3" step="0.05" value="1" />
</section>
<section>
<label>Equalizzatore visual</label>
<label class="band band-bass">Bassi <span id="bass-gain-val">1.0×</span></label>
<input type="range" id="bass-gain" min="0" max="3" step="0.05" value="1" />
<label class="band band-mid">Medi <span id="mid-gain-val">1.0×</span></label>
<input type="range" id="mid-gain" min="0" max="3" step="0.05" value="1" />
<label class="band band-treble">Alti <span id="treble-gain-val">1.0×</span></label>
<input type="range" id="treble-gain" min="0" max="3" step="0.05" value="1" />
</section>
</div>
<!-- ============ EFFETTI ============ -->