Skip to content

Commit

Permalink
Removed gapless.js, player now gets the tracklist
Browse files Browse the repository at this point in the history
Using <audio> instead of gapless.js because of some bugs it has: RelistenNet/gapless.js#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
  • Loading branch information
probablykasper committed Dec 30, 2020
1 parent c2f4f72 commit 12d653b
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 53 deletions.
6 changes: 0 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
48 changes: 26 additions & 22 deletions src/components/TrackList.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -52,7 +56,7 @@
margin-left: 10px
.index, .play
width: 0px
min-width: 20px
min-width: 40px
text-align: center
.play
display: none
Expand Down Expand Up @@ -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>
82 changes: 58 additions & 24 deletions src/stores/player.js
Original file line number Diff line number Diff line change
@@ -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)
}

0 comments on commit 12d653b

Please sign in to comment.