diff --git a/web-src/src/App.vue b/web-src/src/App.vue index c146d604..7515f86a 100644 --- a/web-src/src/App.vue +++ b/web-src/src/App.vue @@ -91,10 +91,10 @@ export default { created() { this.connect() - // Start the progress bar on app start + // Start the progress bar on app start this.$Progress.start() - // Hook the progress bar to start before we move router-view + // Hook the progress bar to start before we move router-view this.$router.beforeEach((to, from, next) => { if (to.meta.show_progress && !(to.path === from.path && to.hash)) { if (to.meta.progress !== undefined) { @@ -106,7 +106,7 @@ export default { next() }) - // Hook the progress bar to finish after we've finished moving router-view + // Hook the progress bar to finish after we've finished moving router-view this.$router.afterEach((to, from) => { if (to.meta.show_progress) { this.$Progress.finish() @@ -156,8 +156,10 @@ export default { }` if (import.meta.env.DEV && import.meta.env.VITE_OWNTONE_URL) { - // If we are running in development mode, construct the websocket url - // from the host of the environment variable VITE_OWNTONE_URL + /* + * If we are running in development mode, construct the websocket + * url from the host of the environment variable VITE_OWNTONE_URL + */ const owntoneUrl = new URL(import.meta.env.VITE_OWNTONE_URL) wsUrl = `${protocol + owntoneUrl.hostname}:${ vm.$store.state.config.websocket_port @@ -201,11 +203,13 @@ export default { // vm.$store.dispatch('add_notification', { text: 'Connection closed', type: 'danger', timeout: 2000 }) } - // When the app becomes active, force an update of all information, because we - // may have missed notifications while the app was inactive. - // There are two relevant events (focus and visibilitychange), so we throttle - // the updates to avoid multiple redundant updates - var update_throttled = false + /* + * When the app becomes active, force an update of all information, + * because we may have missed notifications while the app was inactive. + * There are two relevant events - focus and visibilitychange, so we + * throttle the updates to avoid multiple redundant updates. + */ + let update_throttled = false function update_info() { if (update_throttled) { @@ -227,8 +231,10 @@ export default { }, 500) } - // These events are fired when the window becomes active in different ways - // When this happens, we should update 'now playing' info etc + /* + * These events are fired when the window becomes active in different + * ways. When this happens, we should update 'now playing' info, etc. + */ window.addEventListener('focus', update_info) document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') { diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue index 9b76b817..8421ab31 100644 --- a/web-src/src/components/LyricsPane.vue +++ b/web-src/src/components/LyricsPane.vue @@ -35,16 +35,19 @@ export default { name: 'LyricsPane', data() { - // Non reactive - // Used as a cache to speed up finding the lyric index in the array for the current time + /* + * Non reactive. Used as a cache to speed up the finding of lyrics + * index in the array for the current time. + */ this.lastIndex = -1 - // Fired upon scrolling, that's disabling the auto scrolling for 5s + // Fired upon scrolling, thus disabling the auto scrolling for 5 seconds this.scrollTimer = null this.lastItemId = -1 // Reactive return { scroll: {}, - autoScroll: true // stop scroll to element when touch + // Stops scrolling when a touch event is detected + autoScroll: true } }, computed: { @@ -55,18 +58,22 @@ export default { return this.lyricsArr.length && this.lyricsArr[0].length > 1 }, lyricIndex() { - // We have to perform a dichotomic search in the time array to find the index that's matching + /* + * A dichotomous search is performed in + * 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() - return -1 // Bail out for non synchronized lyrics + // Bail out for non synchronized lyrics + return -1 } if ( this.player.item_id != this.lastItemId || (this.lastIndexValid() && la[this.lastIndex][1] > curTime) ) { - // Song changed or time scrolled back, let's reset the cache + // Reset the cache when the track has changed or has been rewind this.resetPosCache() } // Check the cached value to avoid searching the times @@ -75,10 +82,10 @@ export default { if (this.lastIndex < la.length - 2 && la[this.lastIndex + 2][1] > curTime) return this.lastIndex + 1 - // Not found in the next 2 items, so start dichotomic 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, - end = la.length - 1 + let start = 0 + let end = la.length - 1 while (start <= end) { i = ((end + start) / 2) | 0 if (la[i][1] <= curTime && la.length > i + 1 && la[i + 1][1] > curTime) @@ -89,9 +96,9 @@ export default { return i }, lyricDuration() { - // Ignore unsynchronized lyrics. + // Ignore unsynchronized lyrics 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 lyrics and until their end if ( this.lyricIndex == -1 && this.player.item_progress_ms / 1000 < this.lyricsArr[0][1] @@ -111,15 +118,15 @@ export default { splitLyric() { 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) + // 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 in words + // Split lyrics into words const parsedWords = lyric.match(/\S+\s*/g) let duration = 0 return parsedWords.map((w) => { - let d = duration + const d = duration duration += (w.length + 1) * lyricDur return { delay: d, text: w } }) @@ -127,7 +134,10 @@ export default { }, watch: { lyricIndex() { - // Scroll current lyric in the center of the view unless user manipulated + /* + * Scroll current lyrics in the center of the view + * unless manipulated by user + */ this.autoScroll && this._scrollToElement() this.lastIndex = this.lyricIndex } @@ -138,7 +148,7 @@ export default { }, resetPosCache() { - // Scroll to the start of the track's lyric in all cases + // Scroll to the start of the track lyrics in all cases if (this.player.item_id != this.lastItemId && this.$refs.lyricsWrapper) this.$refs.lyricsWrapper.scrollTo(0, 0) @@ -146,12 +156,15 @@ export default { this.lastIndex = -1 }, startedScroll(e) { - // Ugly trick to check if a scroll event comes from the user or from JS - if (!e.screenX || e.screenX == 0 || !e.screenY || e.screenY == 0) return // Programmatically triggered event are ignored here + /* + * Distinguish scroll event triggered by a user or programmatically + * Programmatically triggered event are ignored + */ + if (!e.screenX || e.screenX == 0 || !e.screenY || e.screenY == 0) return this.autoScroll = false if (this.scrollTimer) clearTimeout(this.scrollTimer) let t = this - // Re-enable automatic scrolling after 5s + // Reenable automatic scrolling after 5 seconds this.scrollTimer = setTimeout(function () { t.autoScroll = true }, 5000) @@ -173,8 +186,10 @@ export default { currentLyric.offsetTop - offsetToCenter + (currentLyric.offsetHeight >> 1) - // Using scrollBy ensure that scrolling will happen - // even if the element is visible before scrolling + /* + * Using scrollBy ensures the scrolling will happen + * even if the element is visible before scrolling + */ scrollTouch.scrollBy({ top: destOff - currOff, left: 0,