From 12d653b312d75c918e2171e14c17859bed7cda3e Mon Sep 17 00:00:00 2001
From: Kasper <kasperkh.kh@gmail.com>
Date: Wed, 30 Dec 2020 19:58:56 +0100
Subject: [PATCH] Removed gapless.js, player now gets the tracklist

Using <audio> instead of gapless.js because of some bugs it has: https://github.com/RelistenNet/gapless.js/issues/15

The player can now see the tracklist, which means the next/previous buttons work, and after a track is finished, the next one starts
---
 package-lock.json               |  6 ---
 package.json                    |  1 -
 src/components/TrackList.svelte | 48 ++++++++++---------
 src/stores/player.js            | 82 +++++++++++++++++++++++----------
 4 files changed, 84 insertions(+), 53 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd19512d..d78e2fa3 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -3755,12 +3755,6 @@
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
-    "gapless.js": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/gapless.js/-/gapless.js-2.2.3.tgz",
-      "integrity": "sha512-9YkVGJxpFIO8MaNXEQr1OywFEQSKWg73+HwiPg3TgolMHaN00MHT59S158Cs+ym9+WWOQmMKiw/rV9eZGECfoA==",
-      "dev": true
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
diff --git a/package.json b/package.json
index 2fd5b340..904b9d36 100755
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "electron-builder": "^22.9.1",
     "eslint": "^7.16.0",
     "eslint-plugin-svelte3": "^3.0.0",
-    "gapless.js": "^2.2.3",
     "music-metadata": "^7.5.2",
     "nollup": "^0.14.4",
     "npm-run-all": "^4.1.5",
diff --git a/src/components/TrackList.svelte b/src/components/TrackList.svelte
index a58b82fe..d47c2eb9 100644
--- a/src/components/TrackList.svelte
+++ b/src/components/TrackList.svelte
@@ -2,22 +2,26 @@
   import VirtualList from '@sveltejs/svelte-virtual-list'
   import { playTrack } from '../stores/player.js'
   export let library
-  $: libTracks = library.tracks
-  let tracks = []
+  $: tracks = library.tracks
+  let ids = []
+  let list = []
   $: {
     console.log(library)
     let i = 0
-    for (const key in libTracks) {
-      if (!Object.prototype.hasOwnProperty.call(libTracks, key)) continue
-      tracks[i] = libTracks[key]
-      tracks[i].id = key
-      tracks[i].duration = Math.round(libTracks[key].duration)
+    for (const key in tracks) {
+      if (!Object.prototype.hasOwnProperty.call(tracks, key)) continue
+      ids[i] = key
+      list[i] = { id: key, index: i }
+      list[i].duration = Math.round(list[i].duration)
       i++
     }
   }
   let selected = new Set()
-  function rowClick(item) {
-    selected = new Set([item.id])
+  function rowClick(id) {
+    selected = new Set([id])
+  }
+  function playRow(index) {
+    playTrack(ids, index)
   }
 </script>
 
@@ -52,7 +56,7 @@
         margin-left: 10px
       .index, .play
         width: 0px
-        min-width: 20px
+        min-width: 40px
         text-align: center
       .play
         display: none
@@ -96,19 +100,19 @@
       div.c.date-added Date Added
       div.c.year Year
     .body
-      VirtualList(height='100%' items='{tracks}' let:item='')
-        .row(on:mousedown='{rowClick(item)}' class:selected='{selected.has(item.id)}')
-          div.c.index 1
-          button.c.index.play(on:click|stopPropagation='{playTrack(item.id)}')
+      VirtualList(height='100%' items='{list}' let:item)
+        .row(on:mousedown='{rowClick(item.id)}' class:selected='{selected.has(item.id)}')
+          div.c.index {item.index + 1}
+          button.c.index.play(on:click|stopPropagation='{playRow(item.index)}')
             svg(height='32', role='img', width='32', viewbox='0 0 24 24')
               polygon(points='21.57 12 5.98 3 5.98 21 21.57 12', fill='currentColor')
-          div.c.name {item.name || ''}
-          div.c.plays {item.playCount || 0}
+          div.c.name {tracks[item.id].name || ''}
+          div.c.plays {tracks[item.id].playCount || 0}
           div.c.time {item.duration || 0}
-          div.c.artist {item.artist || ''}
-          div.c.album {item.album || ''}
-          div.c.comments {item.comments || ''}
-          div.c.genre {item.genre || ''}
-          div.c.date-added {item.dateAdded}
-          div.c.year {item.year || ''}
+          div.c.artist {tracks[item.id].artist || ''}
+          div.c.album {tracks[item.id].album || ''}
+          div.c.comments {tracks[item.id].comments || ''}
+          div.c.genre {tracks[item.id].genre || ''}
+          div.c.date-added {tracks[item.id].dateAdded}
+          div.c.year {tracks[item.id].year || ''}
 </template>
diff --git a/src/stores/player.js b/src/stores/player.js
index e2cded80..e3260e9d 100644
--- a/src/stores/player.js
+++ b/src/stores/player.js
@@ -1,40 +1,74 @@
-import Gapless from 'gapless.js'
 import { writable } from 'svelte/store'
 let library = db.get()
 
 export const currentTime = writable(0)
 export const duration = writable(0)
+let trackList = []
+let trackIndex = null
 
-const gPlayer = new Gapless.Queue({
-  numberOfTracksToPreload: 2,
-  onProgress: (track) => {
-    if (track) {
-      currentTime.set(track.currentTime)
-      duration.set(track.duration)
-    }
-  },
-})
+if (window.audio) window.audio.pause() // for hmr: garbage collect old audio
 
+window.audio = new Audio() // hmr:@keep
+let audio = window.audio
+audio.onerror = (e) => {
+  console.error('audioOnError', e)
+}
+audio.onended = (e) => {
+  const newIndex = trackIndex + 1
+  if (newIndex < trackList.length) {
+    const newId = trackList[newIndex]
+    const trackPath = window.db.getTrackPath(newId, true)
+    audio.src = trackPath
+    audio.play()
+  } else {
+    stop()
+  }
+  trackIndex = newIndex
+}
+audio.ontimeupdate = (e) => {
+  currentTime.set(audio.currentTime)
+  duration.set(audio.duration)
+}
+
+function play(id) {
+  const trackPath = window.db.getTrackPath(id, true)
+  audio.src = trackPath
+  audio.play()
+}
 export function playPause() {
-  gPlayer.togglePlayPause()
+  if (audio.paused) audio.play()
+  else audio.pause()
 }
 export function previous() {
-  gPlayer.playPrevious()
+  const newIndex = trackIndex - 1
+  if (newIndex >= 0) {
+    play(trackList[newIndex])
+  } else {
+    stop()
+  }
+  trackIndex = newIndex
 }
 export function next() {
-  const currentId = gPlayer.currentTrack.metadata.id
-  db.addSkip(currentId)
-  gPlayer.playNext()
-}
-export function playTrack(id) {
-  gPlayer.pauseAll()
-  for (let i = 0; i < gPlayer.tracks.length; i++) {
-    gPlayer.removeTrack(i)
+  const newIndex = trackIndex + 1
+  if (newIndex < trackList.length) {
+    play(trackList[newIndex])
+  } else {
+    stop()
   }
-  const trackPath = window.db.getTrackPath(id, true)
-  gPlayer.addTrack({ trackUrl: trackPath })
-  gPlayer.gotoTrack(0, true)
+  trackIndex = newIndex
+}
+export function stop() {
+  trackList = []
+  trackIndex = null
+  audio.pause()
+  seek(0)
+}
+export function playTrack(list, index) {
+  trackList = list
+  trackIndex = index
+  play(list[index])
 }
 export function seek(to) {
-  gPlayer.currentTrack.seek(to)
+  audio.currentTime = to
+  currentTime.set(to)
 }