MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-28 08:05:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1686 from X-Ryl669/FixFirstLyricBug

Browse Source 
[web] Add spacing before first and after last lyric.
This commit is contained in:
Alain Nussbaumer 2023-11-21 16:20:41 +01:00 committed by GitHub
commit d2c4131d01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 65 additions and 36 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

58
htdocs/assets/index.js
View File

File diff suppressed because one or more lines are too long

3
htdocs/index.html
View File

@ -17,9 +17,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OwnTone</title> <title>OwnTone</title>
<script type="module" crossorigin src="./assets/index.js"></script> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>
</html> </html>

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

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