mirror of
https://github.com/owntone/owntone-server.git
synced 2024-12-28 08:05:56 -05:00
[web] Cosmetic changes for the lyrics pane. Also changed the current lyric playing model against the text wrap bug on smaller screen.
This commit is contained in:
parent
5e370e479a
commit
ee1bd1ebda
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="lyrics-overlay"></div>
|
||||||
<div
|
<div
|
||||||
ref="lyricsWrapper"
|
ref="lyricsWrapper"
|
||||||
class="lyrics-wrapper"
|
class="lyrics-wrapper"
|
||||||
@ -8,13 +9,22 @@
|
|||||||
@wheel.passive="startedScroll"
|
@wheel.passive="startedScroll"
|
||||||
>
|
>
|
||||||
<div class="lyrics">
|
<div class="lyrics">
|
||||||
<p
|
<div
|
||||||
v-for="(item, key) in lyricsArr"
|
v-for="(item, key) in lyricsArr"
|
||||||
:key="item"
|
:key="item"
|
||||||
:class="key == lyricIndex && is_sync && 'gradient'"
|
:class="key == lyricIndex && is_sync && 'gradient'"
|
||||||
>
|
>
|
||||||
|
<ul v-if="key == lyricIndex && is_sync">
|
||||||
|
<template v-for="timedWord in splitLyric" :key="timedWord.delay">
|
||||||
|
<li :style="{ animationDuration: timedWord.delay + 's' }">
|
||||||
|
{{ timedWord.text }}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
<template v-if="key != lyricIndex || !is_sync">
|
||||||
{{ item[0] }}
|
{{ item[0] }}
|
||||||
</p>
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -37,14 +47,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
player() {
|
|
||||||
return this.$store.state.player
|
|
||||||
},
|
|
||||||
|
|
||||||
is_sync() {
|
is_sync() {
|
||||||
return this.lyricsArr.length && this.lyricsArr[0].length > 1
|
return this.lyricsArr.length && this.lyricsArr[0].length > 1
|
||||||
},
|
},
|
||||||
|
|
||||||
lyricIndex() {
|
lyricIndex() {
|
||||||
// We have to perform a dichotomic search in the time array to find the index that's matching
|
// 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 curTime = this.player.item_progress_ms / 1000
|
||||||
@ -92,6 +97,25 @@ export default {
|
|||||||
},
|
},
|
||||||
lyricsArr() {
|
lyricsArr() {
|
||||||
return this.$store.getters.lyrics
|
return this.$store.getters.lyrics
|
||||||
|
},
|
||||||
|
player() {
|
||||||
|
return this.$store.state.player
|
||||||
|
},
|
||||||
|
splitLyric() {
|
||||||
|
if (this.lyricIndex == 0 || !this.lyricsArr.length) 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]
|
||||||
|
const lyricDur = this.lyricDuration / lyric.length
|
||||||
|
|
||||||
|
// Split lyrics in words
|
||||||
|
const parsedWords = lyric.match(/\S+\s*/g)
|
||||||
|
let duration = 0
|
||||||
|
return parsedWords.map((w) => {
|
||||||
|
let d = duration
|
||||||
|
duration += (w.length + 1) * lyricDur
|
||||||
|
return { delay: d, text: w }
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
@ -135,59 +159,54 @@ export default {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Then prepare the animated gradient too
|
// Then prepare the animated gradient too
|
||||||
currentLyric.style.animationDuration = this.lyricDuration + 's'
|
// currentLyric.style.animationDuration = this.lyricDuration + 's'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.lyrics-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: -1rem;
|
||||||
|
left: calc(50% - 50vw);
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100% - 9rem);
|
||||||
|
z-index: 3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.lyrics-wrapper {
|
.lyrics-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -1rem;
|
top: -1rem;
|
||||||
left: calc(50% - 40vw);
|
left: calc(50% - 50vw);
|
||||||
right: calc(50% - 40vw);
|
width: 100vw;
|
||||||
bottom: 0;
|
height: calc(100% - 9rem);
|
||||||
max-height: calc(100% - 9rem);
|
z-index: 1;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
/* Glass effect */
|
/* Glass effect */
|
||||||
background: rgba(255, 255, 255, 0.8);
|
background: rgba(255, 255, 255, 0.8);
|
||||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
backdrop-filter: blur(8px);
|
||||||
backdrop-filter: blur(3px);
|
-webkit-backdrop-filter: blur(8px);
|
||||||
-webkit-backdrop-filter: blur(3px);
|
backdrop-filter: blur(8px);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
}
|
||||||
.lyrics-wrapper .lyrics {
|
.lyrics-wrapper .lyrics {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.lyrics-wrapper .lyrics .gradient {
|
|
||||||
-webkit-background-clip: text;
|
.lyrics-wrapper .lyrics .gradient ul li {
|
||||||
-webkit-text-fill-color: transparent;
|
display: inline;
|
||||||
background-clip: text;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
animation: slide-right 1 linear;
|
animation: pop-color 0s linear forwards;
|
||||||
background-size: 200% 100%;
|
|
||||||
|
|
||||||
background-image: -webkit-linear-gradient(left, #080 50%, #000 50%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes slide-right {
|
.lyrics-wrapper .lyrics div {
|
||||||
0% {
|
|
||||||
background-position: 100% 0%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position: 0% 0%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.lyrics-wrapper .lyrics p {
|
|
||||||
line-height: 3rem;
|
line-height: 3rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: #000;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -3,6 +3,24 @@
|
|||||||
@import 'bulma/bulma.sass';
|
@import 'bulma/bulma.sass';
|
||||||
@import 'bulma-switch';
|
@import 'bulma-switch';
|
||||||
|
|
||||||
|
/* Lyrics animation */
|
||||||
|
@keyframes pop-color {
|
||||||
|
0% {
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
color: $success;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lyrics-wrapper .lyrics div {
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
.lyrics-overlay {
|
||||||
|
box-shadow: 0px 100px 100px 0px $white inset,
|
||||||
|
0px -100px 100px 0px $white inset;
|
||||||
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
background-color: $info;
|
background-color: $info;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
Loading…
Reference in New Issue
Block a user