mirror of
https://github.com/owntone/owntone-server.git
synced 2025-01-15 00:35:03 -05:00
Merge pull request #1683 from X-Ryl669/LyricsCosmetic
[web] Fix pause blinking bug on lyrics pane
This commit is contained in:
commit
e01764d849
File diff suppressed because one or more lines are too long
@ -14,14 +14,14 @@
|
|||||||
:key="item"
|
:key="item"
|
||||||
:class="key == lyricIndex && is_sync && 'gradient'"
|
:class="key == lyricIndex && is_sync && 'gradient'"
|
||||||
>
|
>
|
||||||
<ul v-if="key == lyricIndex && is_sync">
|
<ul v-if="key == lyricIndex && is_sync && is_playing">
|
||||||
<template v-for="timedWord in splitLyric" :key="timedWord.delay">
|
<template v-for="timedWord in splitLyric" :key="timedWord.delay">
|
||||||
<li :style="{ animationDuration: timedWord.delay + 's' }">
|
<li :style="{ animationDuration: timedWord.delay + 's' }">
|
||||||
{{ timedWord.text }}
|
{{ timedWord.text }}
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
<template v-if="key != lyricIndex || !is_sync">
|
<template v-if="key != lyricIndex || !is_sync || !is_playing">
|
||||||
{{ item[0] }}
|
{{ item[0] }}
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@ -47,6 +47,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
is_playing() {
|
||||||
|
return this.player.state === 'play'
|
||||||
|
},
|
||||||
is_sync() {
|
is_sync() {
|
||||||
return this.lyricsArr.length && this.lyricsArr[0].length > 1
|
return this.lyricsArr.length && this.lyricsArr[0].length > 1
|
||||||
},
|
},
|
||||||
@ -102,7 +105,7 @@ export default {
|
|||||||
return this.$store.state.player
|
return this.$store.state.player
|
||||||
},
|
},
|
||||||
splitLyric() {
|
splitLyric() {
|
||||||
if (this.lyricIndex == 0 || !this.lyricsArr.length) return {}
|
if (!this.lyricsArr.length) return {}
|
||||||
|
|
||||||
// Need to split evenly the transition in the lyrics's word (based on the word size / lyrics size)
|
// 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]
|
const lyric = this.lyricsArr[this.lyricIndex][0]
|
||||||
@ -168,10 +171,10 @@ export default {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.lyrics-overlay {
|
.lyrics-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1rem;
|
top: -2rem;
|
||||||
left: calc(50% - 50vw);
|
left: calc(50% - 50vw);
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: calc(100% - 9rem);
|
height: calc(100% - 8rem);
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
@ -197,10 +200,13 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics .gradient ul li {
|
.lyrics-wrapper .lyrics .gradient {
|
||||||
display: inline;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lyrics-wrapper .lyrics .gradient ul li {
|
||||||
|
display: inline;
|
||||||
animation: pop-color 0s linear forwards;
|
animation: pop-color 0s linear forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,12 +13,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lyrics-wrapper .lyrics .gradient {
|
||||||
|
color: $success;
|
||||||
|
}
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics div {
|
.lyrics-wrapper .lyrics div {
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
.lyrics-overlay {
|
.lyrics-overlay {
|
||||||
box-shadow: 0px 100px 100px 0px $white inset,
|
box-shadow: 0px 40px 40px 0px $white inset, 0px -40px 40px 0px $white inset;
|
||||||
0px -100px 100px 0px $white inset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
|
Loading…
Reference in New Issue
Block a user