[web] Format comments

web-src/src/App.vue

@@ -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.
+       * When the app becomes active, force an update of all information,
-      // There are two relevant events (focus and visibilitychange), so we throttle
+       * because we may have missed notifications while the app was inactive.
-      // the updates to avoid multiple redundant updates
+       * There are two relevant events - focus and visibilitychange, so we
-      var update_throttled = false
+       * 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') {

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,
+      let start = 0
-        end = la.length - 1
+      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,