mirror of
https://github.com/owntone/owntone-server.git
synced 2025-04-18 18:05:20 -04:00
[web] Fix a the lyrics pane overlapping the slider
When the track played has a composer or a long title, the slider is not covered by the lyrics pane anymore.
This commit is contained in:
Alain Nussbaumer
parent
d146a9e940
commit
f419869dfc
@ -1,33 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="lyrics-overlay"></div>
|
|
||||||
<div
|
<div
|
||||||
ref="lyricsWrapper"
|
ref="lyrics"
|
||||||
class="lyrics-wrapper"
|
class="lyrics"
|
||||||
@touchstart="autoScroll = false"
|
@touchstart="autoScrolling = false"
|
||||||
@touchend="autoScroll = true"
|
@touchend="autoScrolling = true"
|
||||||
@scroll.passive="startedScroll"
|
@scroll.passive="start_scrolling"
|
||||||
@wheel.passive="startedScroll"
|
@wheel.passive="start_scrolling"
|
||||||
>
|
>
|
||||||
<div class="lyrics">
|
<template v-for="(item, index) in lyrics" :key="item">
|
||||||
<div class="space"></div>
|
|
||||||
<div
|
<div
|
||||||
v-for="(item, key) in lyricsArr"
|
v-if="is_sync && index == verse_index"
|
||||||
:key="item"
|
:class="{ 'is-highlighted': is_playing }"
|
||||||
:class="key == lyricIndex && is_sync && 'gradient'"
|
|
||||||
>
|
>
|
||||||
<ul v-if="key == lyricIndex && is_sync && is_playing">
|
<span
|
||||||
<template v-for="timedWord in splitLyric" :key="timedWord.delay">
|
v-for="word in split_verse(index)"
|
||||||
<li :style="{ animationDuration: timedWord.delay + 's' }">
|
class="has-text-weight-bold is-size-5"
|
||||||
{{ timedWord.text }}
|
>
|
||||||
</li>
|
<span
|
||||||
</template>
|
:style="{ animationDuration: word.duration + 's' }"
|
||||||
</ul>
|
v-text="word.content"
|
||||||
<template v-if="key != lyricIndex || !is_sync || !is_playing">
|
/>
|
||||||
{{ item[0] }}
|
</span>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space"></div>
|
<div v-else>
|
||||||
</div>
|
{{ item[0] }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -43,11 +41,8 @@ export default {
|
|||||||
// Fired upon scrolling, thus disabling the auto scrolling for 5 seconds
|
// Fired upon scrolling, thus disabling the auto scrolling for 5 seconds
|
||||||
this.scrollTimer = null
|
this.scrollTimer = null
|
||||||
this.lastItemId = -1
|
this.lastItemId = -1
|
||||||
// Reactive
|
|
||||||
return {
|
return {
|
||||||
scroll: {},
|
autoScrolling: true
|
||||||
// Stops scrolling when a touch event is detected
|
|
||||||
autoScroll: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -55,201 +50,156 @@ export default {
|
|||||||
return this.player.state === 'play'
|
return this.player.state === 'play'
|
||||||
},
|
},
|
||||||
is_sync() {
|
is_sync() {
|
||||||
return this.lyricsArr.length && this.lyricsArr[0].length > 1
|
return this.lyrics.length && this.lyrics[0].length > 1
|
||||||
},
|
},
|
||||||
lyricIndex() {
|
verse_index() {
|
||||||
/*
|
if (!this.is_sync) {
|
||||||
* A dichotomous search is performed in
|
this.reset_scrolling()
|
||||||
* the time array to find the matching index.
|
|
||||||
*/
|
|
||||||
const curTime = this.player.item_progress_ms / 1000
|
|
||||||
const la = this.lyricsArr
|
|
||||||
if (la.length && la[0].length === 1) {
|
|
||||||
this.resetPosCache()
|
|
||||||
// Bail out for non synchronized lyrics
|
|
||||||
return -1
|
return -1
|
||||||
}
|
}
|
||||||
if (
|
const curTime = this.player.item_progress_ms / 1000,
|
||||||
this.player.item_id != this.lastItemId ||
|
la = this.lyrics,
|
||||||
(this.lastIndexValid() && la[this.lastIndex][1] > curTime)
|
trackChanged = this.player.item_id !== this.lastItemId,
|
||||||
) {
|
trackSeeked =
|
||||||
|
this.lastIndex >= 0 &&
|
||||||
|
this.lastIndex < la.length &&
|
||||||
|
la[this.lastIndex][1] > curTime
|
||||||
|
if (trackChanged || trackSeeked) {
|
||||||
// Reset the cache when the track has changed or has been rewind
|
// Reset the cache when the track has changed or has been rewind
|
||||||
this.resetPosCache()
|
this.reset_scrolling()
|
||||||
}
|
}
|
||||||
// Check the cached value to avoid searching the times
|
// Check the cached value to avoid searching the times
|
||||||
if (this.lastIndex < la.length - 1 && la[this.lastIndex + 1][1] > curTime)
|
if (this.lastIndex < la.length - 1 && la[this.lastIndex + 1][1] > curTime)
|
||||||
return this.lastIndex
|
return this.lastIndex
|
||||||
if (this.lastIndex < la.length - 2 && la[this.lastIndex + 2][1] > curTime)
|
if (this.lastIndex < la.length - 2 && la[this.lastIndex + 2][1] > curTime)
|
||||||
return this.lastIndex + 1
|
return this.lastIndex + 1
|
||||||
|
|
||||||
// Not found in the next 2 items, so start dichotomous search for the best time
|
// Not found in the next 2 items, so start dichotomous search for the best time
|
||||||
let i
|
let start = 0,
|
||||||
let start = 0
|
end = la.length - 1,
|
||||||
let end = la.length - 1
|
index
|
||||||
while (start <= end) {
|
while (start <= end) {
|
||||||
i = ((end + start) / 2) | 0
|
index = (start + end) >> 1
|
||||||
if (la[i][1] <= curTime && la.length > i + 1 && la[i + 1][1] > curTime)
|
if (
|
||||||
break
|
la[index][1] <= curTime &&
|
||||||
if (la[i][1] < curTime) start = i + 1
|
(la[index + 1]?.[1] > curTime || !la[index + 1])
|
||||||
else end = i - 1
|
) {
|
||||||
|
return index
|
||||||
|
}
|
||||||
|
la[index][1] < curTime ? (start = index + 1) : (end = index - 1)
|
||||||
}
|
}
|
||||||
return i
|
return -1
|
||||||
},
|
},
|
||||||
lyricDuration() {
|
lyrics() {
|
||||||
// Ignore unsynchronized lyrics
|
|
||||||
if (!this.lyricsArr.length || this.lyricsArr[0].length < 2) return 3600
|
|
||||||
// The index is 0 before the first lyrics and until their end
|
|
||||||
if (
|
|
||||||
this.lyricIndex == -1 &&
|
|
||||||
this.player.item_progress_ms / 1000 < this.lyricsArr[0][1]
|
|
||||||
)
|
|
||||||
return this.lyricsArr[0][1]
|
|
||||||
return this.lyricIndex < this.lyricsArr.length - 1
|
|
||||||
? this.lyricsArr[this.lyricIndex + 1][1] -
|
|
||||||
this.lyricsArr[this.lyricIndex][1]
|
|
||||||
: 3600
|
|
||||||
},
|
|
||||||
lyricsArr() {
|
|
||||||
return this.$store.getters.lyrics
|
return this.$store.getters.lyrics
|
||||||
},
|
},
|
||||||
player() {
|
player() {
|
||||||
return this.$store.state.player
|
return this.$store.state.player
|
||||||
},
|
|
||||||
splitLyric() {
|
|
||||||
if (!this.lyricsArr.length || this.lyricIndex == -1) return {}
|
|
||||||
|
|
||||||
// Split evenly the transition in the lyrics word (based on the word size / lyrics size)
|
|
||||||
const lyric = this.lyricsArr[this.lyricIndex][0]
|
|
||||||
const lyricDur = this.lyricDuration / lyric.length
|
|
||||||
|
|
||||||
// Split lyrics into words
|
|
||||||
const parsedWords = lyric.match(/\S+\s*/g)
|
|
||||||
let duration = 0
|
|
||||||
return parsedWords.map((w) => {
|
|
||||||
const d = duration
|
|
||||||
duration += (w.length + 1) * lyricDur
|
|
||||||
return { delay: d, text: w }
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
lyricIndex() {
|
verse_index() {
|
||||||
/*
|
this.autoScrolling && this.scroll_to_verse()
|
||||||
* Scroll current lyrics in the center of the view
|
this.lastIndex = this.verse_index
|
||||||
* unless manipulated by user
|
|
||||||
*/
|
|
||||||
this.autoScroll && this._scrollToElement()
|
|
||||||
this.lastIndex = this.lyricIndex
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
lastIndexValid() {
|
reset_scrolling() {
|
||||||
return this.lastIndex >= 0 && this.lastIndex < this.lyricsArr.length
|
|
||||||
},
|
|
||||||
|
|
||||||
resetPosCache() {
|
|
||||||
// Scroll to the start of the track lyrics in all cases
|
// Scroll to the start of the track lyrics in all cases
|
||||||
if (this.player.item_id != this.lastItemId && this.$refs.lyricsWrapper)
|
if (this.player.item_id != this.lastItemId && this.$refs.lyrics) {
|
||||||
this.$refs.lyricsWrapper.scrollTo(0, 0)
|
this.$refs.lyrics.scrollTo(0, 0)
|
||||||
|
}
|
||||||
this.lastItemId = this.player.item_id
|
this.lastItemId = this.player.item_id
|
||||||
this.lastIndex = -1
|
this.lastIndex = -1
|
||||||
},
|
},
|
||||||
startedScroll(e) {
|
start_scrolling(e) {
|
||||||
/*
|
/*
|
||||||
* Distinguish scroll event triggered by a user or programmatically
|
* Distinguish scroll event triggered by a user or programmatically
|
||||||
* Programmatically triggered event are ignored
|
* Programmatically triggered event are ignored
|
||||||
*/
|
*/
|
||||||
if (!e.screenX || e.screenX == 0 || !e.screenY || e.screenY == 0) return
|
if (!e.screenX || e.screenX == 0 || !e.screenY || e.screenY == 0) return
|
||||||
this.autoScroll = false
|
this.autoScrolling = false
|
||||||
if (this.scrollTimer) clearTimeout(this.scrollTimer)
|
if (this.scrollTimer) {
|
||||||
|
clearTimeout(this.scrollTimer)
|
||||||
|
}
|
||||||
const t = this
|
const t = this
|
||||||
// Reenable automatic scrolling after 5 seconds
|
// Reenable automatic scrolling after 5 seconds
|
||||||
this.scrollTimer = setTimeout(() => {
|
this.scrollTimer = setTimeout(() => {
|
||||||
t.autoScroll = true
|
t.autoScrolling = true
|
||||||
}, 5000)
|
}, 2000)
|
||||||
},
|
},
|
||||||
|
scroll_to_verse() {
|
||||||
_scrollToElement() {
|
const pane = this.$refs.lyrics
|
||||||
const scrollTouch = this.$refs.lyricsWrapper
|
if (this.verse_index === -1) {
|
||||||
if (this.lyricIndex == -1) {
|
pane.scrollTo(0, 0)
|
||||||
scrollTouch.scrollTo(0, 0)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
const currentVerse = pane.children[this.verse_index]
|
||||||
const currentLyric =
|
const offsetToCenter = pane.offsetHeight >> 1
|
||||||
scrollTouch.children[0].children[this.lyricIndex + 1], // Because of space item
|
if (!this.lyrics || !currentVerse) return
|
||||||
offsetToCenter = scrollTouch.offsetHeight >> 1
|
const top =
|
||||||
if (!this.lyricsArr || !currentLyric) return
|
currentVerse.offsetTop -
|
||||||
|
offsetToCenter +
|
||||||
const currOff = scrollTouch.scrollTop,
|
(currentVerse.offsetHeight >> 1) -
|
||||||
destOff =
|
pane.scrollTop
|
||||||
currentLyric.offsetTop -
|
|
||||||
offsetToCenter +
|
|
||||||
(currentLyric.offsetHeight >> 1)
|
|
||||||
/*
|
/*
|
||||||
* Using scrollBy ensures the scrolling will happen
|
* Using scrollBy ensures the scrolling will happen
|
||||||
* even if the element is visible before scrolling
|
* even if the element is visible before scrolling
|
||||||
*/
|
*/
|
||||||
scrollTouch.scrollBy({
|
pane.scrollBy({
|
||||||
top: destOff - currOff,
|
top,
|
||||||
left: 0,
|
left: 0,
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
split_verse(index) {
|
||||||
|
const verse = this.lyrics[index]
|
||||||
|
let verseDuration = 3 // Default duration for a verse
|
||||||
|
if (index < this.lyrics.length - 1) {
|
||||||
|
verseDuration = this.lyrics[index + 1][1] - verse[1]
|
||||||
|
}
|
||||||
|
const unitDuration = verseDuration / verse[0].length
|
||||||
|
console.log(`${unitDuration}`)
|
||||||
|
// Split verse into words
|
||||||
|
let duration = 0
|
||||||
|
return verse[0].match(/\S+\s*/g).map((word) => {
|
||||||
|
const d = duration
|
||||||
|
duration += word.length * unitDuration
|
||||||
|
return { duration: d, content: word }
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.lyrics-overlay {
|
.lyrics {
|
||||||
position: absolute;
|
top: 0;
|
||||||
top: -2rem;
|
|
||||||
left: calc(50% - 50vw);
|
left: calc(50% - 50vw);
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: calc(100% - 8rem);
|
height: calc(100vh - 26rem);
|
||||||
z-index: 3;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lyrics-wrapper {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1rem;
|
|
||||||
left: calc(50% - 50vw);
|
|
||||||
width: 100vw;
|
|
||||||
height: calc(100% - 9rem);
|
|
||||||
z-index: 1;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
--mask: linear-gradient(
|
||||||
/* Glass effect */
|
180deg,
|
||||||
background: rgba(255, 255, 255, 0.8);
|
transparent 0%,
|
||||||
backdrop-filter: blur(8px);
|
rgba(0, 0, 0, 1) 15%,
|
||||||
-webkit-backdrop-filter: blur(8px);
|
rgba(0, 0, 0, 1) 85%,
|
||||||
backdrop-filter: blur(8px);
|
transparent 100%
|
||||||
|
);
|
||||||
|
-webkit-mask: var(--mask);
|
||||||
|
mask: var(--mask);
|
||||||
}
|
}
|
||||||
.lyrics-wrapper .lyrics {
|
.lyrics div.is-highlighted span {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics .gradient {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 120%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics .gradient ul li {
|
|
||||||
display: inline;
|
|
||||||
animation: pop-color 0s linear forwards;
|
animation: pop-color 0s linear forwards;
|
||||||
}
|
}
|
||||||
|
.lyrics div {
|
||||||
.lyrics-wrapper .lyrics div {
|
|
||||||
line-height: 3rem;
|
line-height: 3rem;
|
||||||
text-align: center;
|
}
|
||||||
font-size: 1rem;
|
.lyrics div:first-child {
|
||||||
|
padding-top: calc(25vh - 2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics .space {
|
.lyrics div:last-child {
|
||||||
height: 20vh;
|
padding-bottom: calc(25vh - 3rem);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -13,19 +13,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics .gradient {
|
|
||||||
color: $success;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics div {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
.lyrics-overlay {
|
|
||||||
box-shadow:
|
|
||||||
0px 40px 40px 0px $white inset,
|
|
||||||
0px -40px 40px 0px $white inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
background-color: $info;
|
background-color: $info;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@ -139,6 +126,9 @@ a.navbar-item {
|
|||||||
border-radius: $radius-large;
|
border-radius: $radius-large;
|
||||||
max-height: calc(100vh - 26rem);
|
max-height: calc(100vh - 26rem);
|
||||||
}
|
}
|
||||||
|
&.is-masked {
|
||||||
|
filter: blur(0.5rem) opacity(0.2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
:artist="track.artist"
|
:artist="track.artist"
|
||||||
:album="track.album"
|
:album="track.album"
|
||||||
class="is-clickable fd-has-shadow fd-cover-big-image"
|
class="is-clickable fd-has-shadow fd-cover-big-image"
|
||||||
|
:class="{ 'is-masked': lyrics_visible }"
|
||||||
@click="open_dialog(track)"
|
@click="open_dialog(track)"
|
||||||
/>
|
/>
|
||||||
<lyrics-pane v-if="lyrics_visible" />
|
<lyrics-pane v-if="lyrics_visible" />
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user