MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-15 00:35:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1683 from X-Ryl669/LyricsCosmetic

Browse Source 
[web] Fix pause blinking bug on lyrics pane
This commit is contained in:
Alain Nussbaumer 2023-11-17 21:05:50 +01:00 committed by GitHub
commit e01764d849
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/assets/index.css
View File

File diff suppressed because one or more lines are too long

20
web-src/src/components/LyricsPane.vue
View File

@ -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;
} }

7
web-src/src/mystyles.scss
View File

@ -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 {