[web] Add lyrics player to the webinterface

Update icons.js
Add icons in alphabetical order.
Change comment to remove reference to external website
Remove extra line feeds

Co-Authored-by: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>

web-src/src/components/LyricsPane.vue

@@ -0,0 +1,193 @@
+<template>
+  <div
+    ref="lyricsWrapper"
+    class="lyrics-wrapper"
+    @touchstart="autoScroll = false"
+    @touchend="autoScroll = true"
+    @scroll.passive="startedScroll"
+    @wheel.passive="startedScroll"
+  >
+    <div class="lyrics">
+      <p
+        v-for="(item, key) in lyricsArr"
+        :key="item"
+        :class="key == lyricIndex && is_sync && 'gradient'"
+      >
+        {{ item[0] }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+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
+    this.lastIndex = 0
+    // Fired upon scrolling, that's disabling the auto scrolling for 5s
+    this.scrollTimer = null
+    this.lastItemId = -1
+    // Reactive
+    return {
+      scroll: {},
+      // lineHeight: 42,
+      autoScroll: true // stop scroll to element when touch
+    }
+  },
+  computed: {
+    player() {
+      return this.$store.state.player
+    },
+
+    is_sync() {
+      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
+      const curTime = this.player.item_progress_ms / 1000
+      const la = this.lyricsArr
+      if (la.length && la[0].length === 1) return 0 // Bail out for non synchronized lyrics
+      if (
+        this.player.item_id != this.lastItemId ||
+        (this.lastIndex < la.length && la[this.lastIndex][1] > curTime)
+      ) {
+        // Song changed or time scrolled back, let's reset the cache
+        this.resetPosCache()
+      }
+      // Check the cached value to avoid searching the times
+      if (this.lastIndex < la.length - 1 && la[this.lastIndex + 1][1] > curTime)
+        return this.lastIndex
+      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
+      let i
+      let start = 0,
+        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)
+          break
+        if (la[i][1] < curTime) start = i + 1
+        else end = i - 1
+      }
+      return i
+    },
+    lyricDuration() {
+      // 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
+      if (
+        !this.lyricIndex &&
+        this.player.item_progress_ms / 1000 < this.lyricsArr[0][1]
+      )
+        return this.lyricsArr[0][1]
+      return this.lyricIndex < this.lyricsArr.length - 1
+        ? this.lyricsArr[this.lyricIndex + 1][1] -
+            this.lyricsArr[this.lyricIndex][1]
+        : 3600
+    },
+    lyricsArr() {
+      return this.$store.getters.lyrics
+    }
+  },
+  watch: {
+    lyricIndex() {
+      // Scroll current lyric in the center of the view unless user manipulated
+      this.autoScroll && this._scrollToElement()
+      this.lastIndex = this.lyricIndex
+    }
+  },
+  methods: {
+    resetPosCache() {
+      this.lastItemId = this.player.item_id
+      this.lastIndex = 0
+    },
+    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
+      this.autoScroll = false
+      if (this.scrollTimer) clearTimeout(this.scrollTimer)
+      let t = this
+      // Re-enable automatic scrolling after 5s
+      this.scrollTimer = setTimeout(function () {
+        t.autoScroll = true
+      }, 5000)
+    },
+
+    _scrollToElement() {
+      let scrollTouch = this.$refs.lyricsWrapper,
+        currentLyric = scrollTouch.children[0].children[this.lyricIndex],
+        offsetToCenter = scrollTouch.offsetHeight >> 1
+      if (!this.lyricsArr || !currentLyric) return
+
+      let currOff = scrollTouch.scrollTop,
+        destOff = currentLyric.offsetTop - offsetToCenter
+      // Using scrollBy ensure that scrolling will happen
+      // even if the element is visible before scrolling
+      scrollTouch.scrollBy({
+        top: destOff - currOff,
+        left: 0,
+        behavior: 'smooth'
+      })
+
+      // Then prepare the animated gradient too
+      currentLyric.style.animationDuration = this.lyricDuration + 's'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lyrics-wrapper {
+  position: absolute;
+  top: -1rem;
+  left: calc(50% - 40vw);
+  right: calc(50% - 40vw);
+  bottom: 0;
+  max-height: calc(100% - 9rem);
+  overflow: auto;
+
+  /* Glass effect */
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.lyrics-wrapper .lyrics {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.lyrics-wrapper .lyrics .gradient {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: bold;
+  font-size: 120%;
+  animation: slide-right 1 linear;
+  background-size: 200% 100%;
+
+  background-image: -webkit-linear-gradient(left, #080 50%, #000 50%);
+}
+
+@keyframes slide-right {
+  0% {
+    background-position: 100% 0%;
+  }
+  100% {
+    background-position: 0% 0%;
+  }
+}
+
+.lyrics-wrapper .lyrics p {
+  line-height: 3rem;
+  text-align: center;
+  font-size: 1rem;
+  color: #000;
+}
+</style>

web-src/src/components/NavbarBottom.vue

@@ -100,6 +100,7 @@
                 <player-button-repeat class="button" />
                 <player-button-shuffle class="button" />
                 <player-button-consume class="button" />
+                <player-button-lyrics class="button" />
               </div>
             </div>
           </div>
@@ -176,6 +177,7 @@
             <player-button-repeat class="button" />
             <player-button-shuffle class="button" />
             <player-button-consume class="button" />
+            <player-button-lyrics class="button" />
           </div>
         </div>
         <hr class="my-3" />
@@ -268,6 +270,7 @@ import { mdiCancel } from '@mdi/js'
 import NavbarItemLink from './NavbarItemLink.vue'
 import NavbarItemOutput from './NavbarItemOutput.vue'
 import PlayerButtonConsume from '@/components/PlayerButtonConsume.vue'
+import PlayerButtonLyrics from '@/components/PlayerButtonLyrics.vue'
 import PlayerButtonNext from '@/components/PlayerButtonNext.vue'
 import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause.vue'
 import PlayerButtonPrevious from '@/components/PlayerButtonPrevious.vue'
@@ -284,6 +287,7 @@ export default {
     NavbarItemLink,
     NavbarItemOutput,
     PlayerButtonConsume,
+    PlayerButtonLyrics,
     PlayerButtonNext,
     PlayerButtonPlayPause,
     PlayerButtonPrevious,

web-src/src/components/PlayerButtonLyrics.vue

@@ -0,0 +1,46 @@
+<template>
+  <a :class="{ 'is-active': is_active }" @click="toggle_lyrics">
+    <mdicon
+      v-if="!is_active"
+      class="icon"
+      name="script-text-outline"
+      :size="icon_size"
+      :title="$t('player.button.toggle-lyrics')"
+    />
+    <mdicon
+      v-if="is_active"
+      class="icon"
+      name="script-text-play"
+      :size="icon_size"
+      :title="$t('player.button.toggle-lyrics')"
+    />
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'PlayerButtonLyrics',
+
+  props: {
+    icon_size: {
+      type: Number,
+      default: 16
+    }
+  },
+
+  computed: {
+    is_active() {
+      return this.$store.getters.lyrics_pane
+    }
+  },
+
+  methods: {
+    toggle_lyrics() {
+      this.$store.state.lyrics.lyrics_pane =
+        !this.$store.state.lyrics.lyrics_pane
+    }
+  }
+}
+</script>
+
+<style></style>