okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Disable lyrics scrolling while the user is doing it themself (#1149)

Browse source 
* Disable lyrics scrolling while the user is doing it themself

* Add scroll event to other .lyric-body element
This commit is contained in:
Stepan Tikunov 2022-06-10 06:00:20 +03:00 • committed by GitHub
parent 40ba2f58da
commit 05b6ea112e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/web-remote/index.js
View file

@ -21,6 +21,7 @@ var app = new Vue({
start: 0, start: 0,
end: 0 end: 0
}, },
lyricsScrollingBlocked: false,
queue: {}, queue: {},
lowerPanelState: "controls", lowerPanelState: "controls",
userInteraction: false userInteraction: false
@ -318,12 +319,18 @@ var app = new Vue({
return {} return {}
} }
}, },
blockLyricsScrolling() {
this.lyricsScrollingBlocked = true;
setTimeout(() => {
this.lyricsScrollingBlocked = false;
}, 100);
},
getLyricClass(start, end) { getLyricClass(start, end) {
var currentTime = this.getCurrentTime(); var currentTime = this.getCurrentTime();
// check if currenttime is between start and end // check if currenttime is between start and end
if (currentTime >= start && currentTime <= end) { if (currentTime >= start && currentTime <= end) {
setTimeout(() => { setTimeout(() => {
if (document.querySelector(".lyric-line.active")) { if (document.querySelector(".lyric-line.active") && !this.lyricsScrollingBlocked) {
document.querySelector(".lyric-line.active").scrollIntoView({ document.querySelector(".lyric-line.active").scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "center" block: "center"

4
src/web-remote/views/index.ejs
View file

@ -91,7 +91,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="md-body lyric-body" style="width:100%;"> <div class="md-body lyric-body" style="width:100%;" @scroll.passive="blockLyricsScrolling()">
<template v-if="player.lyrics"> <template v-if="player.lyrics">
<template v-for="lyric in player.lyrics" v-if="lyric.line != 'lrcInstrumental'"> <template v-for="lyric in player.lyrics" v-if="lyric.line != 'lrcInstrumental'">
<h3 class="lyric-line" @click="seekTo(lyric.startTime, false)" <h3 class="lyric-line" @click="seekTo(lyric.startTime, false)"
@ -723,7 +723,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="md-body lyric-body"> <div class="md-body lyric-body" @scroll.passive="blockLyricsScrolling()">
<template v-if="player.lyrics"> <template v-if="player.lyrics">
<template v-for="lyric in player.lyrics" v-if="lyric.line != 'lrcInstrumental'"> <template v-for="lyric in player.lyrics" v-if="lyric.line != 'lrcInstrumental'">
<h3 class="lyric-line" @click="seekTo(lyric.startTime, false)" <h3 class="lyric-line" @click="seekTo(lyric.startTime, false)"