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

Playlist: click a track name to (re)start it from the beginning

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
lucianoandClaude Opus 4.8 committed 2026-06-19 15:46:54 +02:00
1 parent 9653306a68
commit 19085e9c16
3 files changed
+6 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/control.html
+1 -1
View File
@@ -53,7 +53,7 @@
</div> </div>
<input type="file" id="tracks-input" accept="audio/*" multiple hidden /> <input type="file" id="tracks-input" accept="audio/*" multiple hidden />
<ol id="playlist" class="playlist"></ol> <ol id="playlist" class="playlist"></ol>
<div class="hint-mini">Trascina ⠿ per riordinare · ⌨ tasto rapido · ▶/⏸ avvia/pausa</div> <div class="hint-mini">Clic sul <b>nome</b> = avvia/riavvia dall'inizio · ▶/⏸ pausa/riprendi · ⠿ trascina per riordinare · ⌨ tasto rapido</div>
</section> </section>
<section> <section>
src/control.js
+3 -1
View File
@@ -274,7 +274,7 @@ function renderPlaylist() {
const prog = (isCur && playDur > 0) ? Math.min(100, playCur / playDur * 100) : 0; const prog = (isCur && playDur > 0) ? Math.min(100, playCur / playDur * 100) : 0;
li.innerHTML = li.innerHTML =
'<span class="grip">⠿</span>' + '<span class="grip">⠿</span>' +
'<span class="tname" title="' + tr.name.replace(/"/g, '&quot;') + '">' + tr.name + '</span>' + '<span class="tname" title="Avvia / riavvia dall\'inizio — ' + tr.name.replace(/"/g, '&quot;') + '">' + tr.name + '</span>' +
'<span class="ttime">' + timeLabel + '</span>' + '<span class="ttime">' + timeLabel + '</span>' +
'<button class="key-btn" title="Assegna tasto rapido">' + '<button class="key-btn" title="Assegna tasto rapido">' +
(capturingFor === i ? '…' : (tr.key ? tr.key.toUpperCase() : '⌨')) + '</button>' + (capturingFor === i ? '…' : (tr.key ? tr.key.toUpperCase() : '⌨')) + '</button>' +
@@ -282,6 +282,8 @@ function renderPlaylist() {
'<button class="del-btn" title="Rimuovi">✕</button>' + '<button class="del-btn" title="Rimuovi">✕</button>' +
(isCur ? '<i class="tprog" style="width:' + prog.toFixed(1) + '%"></i>' : ''); (isCur ? '<i class="tprog" style="width:' + prog.toFixed(1) + '%"></i>' : '');
// Clicking the name (re)starts the track from the beginning.
li.querySelector('.tname').addEventListener('click', () => playIndex(i));
// On the current track the button pauses/resumes/replays; on others it starts that track. // On the current track the button pauses/resumes/replays; on others it starts that track.
li.querySelector('.play-btn').addEventListener('click', () => { li.querySelector('.play-btn').addEventListener('click', () => {
if (i === currentIndex) togglePlayPause(); if (i === currentIndex) togglePlayPause();
src/style.css
+2
View File
@@ -331,7 +331,9 @@ textarea.textarea-lg {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
} }
.track .tname:hover { color: #cde0ff; }
.track button { .track button {
flex: 0 0 auto; flex: 0 0 auto;
padding: 3px 8px; padding: 3px 8px;