MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-26 21:42:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Add spacing before first and after last lyric. Fix a bug for the first lyric animation being triggerd before it'd have started

Browse Source
This commit is contained in:
X-Ryl669 2023-11-21 15:44:03 +01:00
parent 59d7994de7
commit 8d56f91117
4 changed files with 65 additions and 36 deletions
htdocs
assets
index.cssindex.js
index.html
web-src/src/components
LyricsPane.vue

2
htdocs/assets/index.css

File diff suppressed because one or more lines are too long

58
htdocs/assets/index.js

File diff suppressed because one or more lines are too long

3
htdocs/index.html

@ -17,9 +17,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OwnTone</title>
<script type="module" crossorigin src="./assets/index.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index.css">
<link rel="stylesheet" href="./assets/index.css">
</head>
<body>
<div id="app"></div>
</body>
</html>

38
web-src/src/components/LyricsPane.vue

@ -9,6 +9,7 @@
@wheel.passive="startedScroll"
>
<div class="lyrics">
<div class="space"></div>
<div
v-for="(item, key) in lyricsArr"
:key="item"
@ -25,6 +26,7 @@
{{ item[0] }}
</template>
</div>
<div class="space"></div>
</div>
</div>
</template>
@ -35,7 +37,7 @@ export default {
data() {
// Non reactive
// Used as a cache to speed up finding the lyric index in the array for the current time
this.lastIndex = 0
this.lastIndex = -1
// Fired upon scrolling, that's disabling the auto scrolling for 5s
this.scrollTimer = null
this.lastItemId = -1
@ -57,10 +59,13 @@ export default {
// We have to perform a dichotomic search in the time array to find the index that's matching
const curTime = this.player.item_progress_ms / 1000
const la = this.lyricsArr
if (la.length && la[0].length === 1) return 0 // Bail out for non synchronized lyrics
if (la.length && la[0].length === 1) {
this.resetPosCache()
return -1 // Bail out for non synchronized lyrics
}
if (
this.player.item_id != this.lastItemId ||
(this.lastIndex < la.length && la[this.lastIndex][1] > curTime)
(this.lastIndexValid() && la[this.lastIndex][1] > curTime)
) {
// Song changed or time scrolled back, let's reset the cache
this.resetPosCache()
@ -89,7 +94,7 @@ export default {
if (!this.lyricsArr.length || this.lyricsArr[0].length < 2) return 3600
// The index is 0 before the first lyric until the end of the first lyric
if (
!this.lyricIndex &&
this.lyricIndex == -1 &&
this.player.item_progress_ms / 1000 < this.lyricsArr[0][1]
)
return this.lyricsArr[0][1]
@ -105,7 +110,7 @@ export default {
return this.$store.state.player
},
splitLyric() {
if (!this.lyricsArr.length) return {}
if (!this.lyricsArr.length || this.lyricIndex == -1) return {}
// Need to split evenly the transition in the lyrics's word (based on the word size / lyrics size)
const lyric = this.lyricsArr[this.lyricIndex][0]
@ -129,9 +134,17 @@ export default {
}
},
methods: {
lastIndexValid() {
return this.lastIndex >= 0 && this.lastIndex < this.lyricsArr.length
},
resetPosCache() {
// Scroll to the start of the track's lyric in all cases
if (this.player.item_id != this.lastItemId && this.$refs.lyricsWrapper)
this.$refs.lyricsWrapper.scrollTo(0, 0)
this.lastItemId = this.player.item_id
this.lastIndex = 0
this.lastIndex = -1
},
startedScroll(e) {
// Ugly trick to check if a scroll event comes from the user or from JS
@ -146,8 +159,13 @@ export default {
},
_scrollToElement() {
let scrollTouch = this.$refs.lyricsWrapper,
currentLyric = scrollTouch.children[0].children[this.lyricIndex],
let scrollTouch = this.$refs.lyricsWrapper
if (this.lyricIndex == -1) {
scrollTouch.scrollTo(0, 0)
return
}
let currentLyric = scrollTouch.children[0].children[this.lyricIndex],
offsetToCenter = scrollTouch.offsetHeight >> 1
if (!this.lyricsArr || !currentLyric) return
@ -215,4 +233,8 @@ export default {
text-align: center;
font-size: 1rem;
}
.lyrics-wrapper .lyrics .space {
height: 20vh;
}
</style>