Be able to click on lyric line to start karaoke from that line
This commit is contained in:
1 parent
d2e7b7e97d
commit
9993e9927f
2 files changed
+28
-6
No files matched your search
@@ -187,7 +187,13 @@ audio[controls] { width: 100%; outline: 0; }
|
|||||||
}
|
}
|
||||||
.lyrics[hidden] { display: none; } /* [hidden] must beat position:absolute rule specificity */
|
.lyrics[hidden] { display: none; } /* [hidden] must beat position:absolute rule specificity */
|
||||||
|
|
||||||
.lyrics-line { padding: 4px 0; opacity: .55; transition: opacity .2s ease, color .2s ease; }
|
.lyrics-line {
|
||||||
|
display: block; width: 100%; text-align: left;
|
||||||
|
background: none; border: none; margin: 0; padding: 4px 0;
|
||||||
|
font: inherit; color: inherit; cursor: pointer;
|
||||||
|
opacity: .55; transition: opacity .2s ease, color .2s ease;
|
||||||
|
}
|
||||||
|
.lyrics-line:hover, .lyrics-line:focus-visible { opacity: .85; outline: 0; }
|
||||||
.lyrics-line.current { opacity: 1; font-weight: 700; }
|
.lyrics-line.current { opacity: 1; font-weight: 700; }
|
||||||
|
|
||||||
.lyrics-sync {
|
.lyrics-sync {
|
||||||
|
|||||||
+21
-5
@@ -442,6 +442,21 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Click a line to say "this is playing right now" — re-anchors the karaoke
|
||||||
|
// clock to that line, which is how we recover from loading mid-song (we
|
||||||
|
// have no reliable elapsed time on most providers) or from drift building
|
||||||
|
// up over a long track. The buffering-delay nudge above is left as-is.
|
||||||
|
if (el.lyricsLines) {
|
||||||
|
el.lyricsLines.addEventListener('click', function (e) {
|
||||||
|
var btn = e.target.closest('.lyrics-line');
|
||||||
|
if (!btn) return;
|
||||||
|
var line = syncedLines.filter(function (l) { return l.el === btn; })[0];
|
||||||
|
if (!line) return;
|
||||||
|
trackStartedAt = Date.now() + lyricsOffsetMs - line.time * 1000;
|
||||||
|
startKaraoke();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function loadLyrics(track) {
|
function loadLyrics(track) {
|
||||||
if (!CFG.lyricsEnabled || !el.lyricsToggle) return;
|
if (!CFG.lyricsEnabled || !el.lyricsToggle) return;
|
||||||
el.lyricsToggle.hidden = true;
|
el.lyricsToggle.hidden = true;
|
||||||
@@ -460,11 +475,12 @@
|
|||||||
if (!res.found || !res.lyrics || !el.lyricsLines) return;
|
if (!res.found || !res.lyrics || !el.lyricsLines) return;
|
||||||
if (res.synced && res.synced.length) {
|
if (res.synced && res.synced.length) {
|
||||||
syncedLines = res.synced.map(function (l) {
|
syncedLines = res.synced.map(function (l) {
|
||||||
var div = document.createElement('div');
|
var btn = document.createElement('button');
|
||||||
div.className = 'lyrics-line';
|
btn.type = 'button';
|
||||||
div.textContent = l.text;
|
btn.className = 'lyrics-line';
|
||||||
el.lyricsLines.appendChild(div);
|
btn.textContent = l.text;
|
||||||
return { time: l.time, el: div };
|
el.lyricsLines.appendChild(btn);
|
||||||
|
return { time: l.time, el: btn };
|
||||||
});
|
});
|
||||||
if (el.lyricsSync) el.lyricsSync.hidden = false;
|
if (el.lyricsSync) el.lyricsSync.hidden = false;
|
||||||
if (el.lyrics && !el.lyrics.hidden) startKaraoke();
|
if (el.lyrics && !el.lyrics.hidden) startKaraoke();
|
||||||
|
|||||||
Reference in new issue
Block a user