Bug fixes, better lyrics, sorting
This commit is contained in:
exttex
parent
83860ff052
commit
80f6cbf870
14 changed files with 186 additions and 34 deletions
|
|
@ -1,19 +1,35 @@
|
|||
<template>
|
||||
<v-list :height='height' class='overflow-y-auto' v-scroll.self='scroll'>
|
||||
<v-lazy
|
||||
v-for='(track, index) in tracks'
|
||||
:key='index + "t" + track.id'
|
||||
max-height="100"
|
||||
><TrackTile :track='track' @click='play(index)' @remove='removedTrack(index)'>
|
||||
</TrackTile>
|
||||
</v-lazy>
|
||||
|
||||
<div class='text-center' v-if='loading'>
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
<div v-scroll.self='scroll'>
|
||||
<div class='px-4 pt-2 d-flex' style='max-height: 50px;'>
|
||||
<div class='text-overline px-2 pt-1'>
|
||||
{{count}} TRACKS.
|
||||
</div>
|
||||
<div style="max-width: 200px;" class='d-flex mx-2'>
|
||||
<v-select class='px-2' dense solo :items='sortTypes' @change='sort' label='Sort By'>
|
||||
</v-select>
|
||||
</div>
|
||||
<div class='px-2' @click='reverseSort'>
|
||||
<v-btn icon>
|
||||
<v-icon v-if='isReversed'>mdi-sort-reverse-variant</v-icon>
|
||||
<v-icon v-if='!isReversed'>mdi-sort-variant</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</v-list>
|
||||
<v-list :height='height' class='overflow-y-auto'>
|
||||
<v-lazy
|
||||
v-for='(track, index) in tracks'
|
||||
:key='index + "t" + track.id'
|
||||
max-height="100"
|
||||
><TrackTile :track='track' @click='play(index)' @remove='removedTrack(index)'>
|
||||
</TrackTile>
|
||||
</v-lazy>
|
||||
|
||||
<div class='text-center' v-if='loading'>
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</div>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -28,7 +44,15 @@ export default {
|
|||
return {
|
||||
loading: false,
|
||||
tracks: [],
|
||||
count: 0
|
||||
count: 0,
|
||||
sortTypes: [
|
||||
'Date Added',
|
||||
'Name (A-Z)',
|
||||
'Artist (A-Z)',
|
||||
'Album (A-Z)'
|
||||
],
|
||||
tracksUnsorted: null,
|
||||
isReversed: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -88,8 +112,44 @@ export default {
|
|||
this.$root.replaceQueue(this.tracks);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
//Sort changed
|
||||
async sort(type) {
|
||||
let index = this.sortTypes.indexOf(type);
|
||||
//Preload all tracks
|
||||
if (this.tracks.length < this.count)
|
||||
await this.loadAll();
|
||||
//Copy original
|
||||
if (!this.tracksUnsorted)
|
||||
this.tracksUnsorted = JSON.parse(JSON.stringify(this.tracks));
|
||||
|
||||
//Using indexes, so it can be translated later
|
||||
this.isReversed = false;
|
||||
switch (index) {
|
||||
//Default
|
||||
case 0:
|
||||
this.tracks = JSON.parse(JSON.stringify(this.tracksUnsorted));
|
||||
break;
|
||||
//Name
|
||||
case 1:
|
||||
this.tracks = this.tracks.sort((a, b) => {return a.title.localeCompare(b.title);});
|
||||
break;
|
||||
//Artist
|
||||
case 2:
|
||||
this.tracks = this.tracks.sort((a, b) => {return a.artistString.localeCompare(b.artistString);});
|
||||
break;
|
||||
//Album
|
||||
case 3:
|
||||
this.tracks = this.tracks.sort((a, b) => {return a.album.title.localeCompare(b.album.title);});
|
||||
break;
|
||||
}
|
||||
},
|
||||
async reverseSort() {
|
||||
//Preload tracks if not sorted yet
|
||||
if (this.tracks.length < this.count)
|
||||
await this.sort(0);
|
||||
this.isReversed = !this.isReversed;
|
||||
this.tracks.reverse();
|
||||
},
|
||||
removedTrack(index) {
|
||||
this.tracks.splice(index, 1);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
</div>
|
||||
|
||||
<div v-if='!loading && lyrics && lyrics.lyrics.length > 0' class='text-center'>
|
||||
<div v-for='(lyric, index) in lyrics.lyrics' :key='lyric.offset' class='my-8 mx-4'>
|
||||
<div
|
||||
v-for='(lyric, index) in lyrics.lyrics'
|
||||
:key='lyric.offset'
|
||||
class='my-6 mx-4 pa-2 rounded'
|
||||
:class='{"grey darken-3": playingNow(index)}'
|
||||
@click='seekTo(index)'>
|
||||
<span
|
||||
class='my-8'
|
||||
:class='{"text-h6 font-weight-regular": !playingNow(index), "text-h5 font-weight-bold": playingNow(index)}'
|
||||
|
|
@ -27,7 +32,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-if='!loading && !lyrics && lyrics.text.length == 0 && lyrics.lyrics.length == 0' class='pa-4 text-center'>
|
||||
<div v-if='!loading && (!lyrics || (lyrics.text.length == 0 && lyrics.lyrics.length == 0))' class='pa-4 text-center'>
|
||||
<span class='red--text text-h5'>
|
||||
Error loading lyrics or lyrics not found!
|
||||
</span>
|
||||
|
|
@ -94,10 +99,15 @@ export default {
|
|||
//Roughly middle
|
||||
let offset = window.innerHeight / 2 - 500;
|
||||
|
||||
if (!this.$refs["l"+this.currentLyricIndex]) return;
|
||||
this.$refs.content.scrollTo({
|
||||
top: this.$refs["l"+this.currentLyricIndex][0].offsetTop + offset,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
},
|
||||
//Seek to lyric in song
|
||||
seekTo(i) {
|
||||
this.$root.seek(this.lyrics.lyrics[i].offset);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ export default {
|
|||
addLibrary() {
|
||||
this.isLibrary = true;
|
||||
this.$root.libraryTracks.push(this.track.id);
|
||||
this.$axios.put(`/library/tracks?id=${this.track.id}`);
|
||||
this.$axios.put(`/library/track?id=${this.track.id}`);
|
||||
},
|
||||
goAlbum() {
|
||||
this.$emit('redirect')
|
||||
|
|
@ -196,7 +196,7 @@ export default {
|
|||
async removeLibrary() {
|
||||
this.isLibrary = false;
|
||||
this.$root.libraryTracks.splice(this.$root.libraryTracks.indexOf(this.track.id), 1);
|
||||
await this.$axios.delete(`/library/tracks?id=${this.track.id}`);
|
||||
await this.$axios.delete(`/library/track?id=${this.track.id}`);
|
||||
this.$emit('remove');
|
||||
},
|
||||
//Remove from playlist
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue