CactiChameleon9/freezerpc
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Bug fixes, better lyrics, sorting

Browse Source
This commit is contained in:
exttex
2020-09-28 18:17:23 +02:00
parent 83860ff052
commit 80f6cbf870
14 changed files with 186 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/client/src/App.vue
View File

@ -371,8 +371,8 @@ export default {
});
// /search
document.addEventListener('keypress', (event) => {
if (event.keyCode != 47) return;
document.addEventListener('keypress', (e) => {
if (e.keyCode != 47) return;
this.$refs.searchBar.focus();
setTimeout(() => {
if (this.searchQuery.startsWith('/')) this.searchQuery = this.searchQuery.substring(1);
@ -394,6 +394,9 @@ export default {
if (this.$root.audio) this.$root.audio.volume = this.volume;
this.$root.volume = this.volume;
},
'$root.volume'() {
this.volume = this.$root.volume;
},
//Update position
'$root.position'() {
this.position = (this.$root.position / this.$root.duration()) * 100;

90
app/client/src/components/LibraryTracks.vue
View File

@ -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);

14
app/client/src/components/Lyrics.vue
View File

@ -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() {

4
app/client/src/components/TrackTile.vue
View File

@ -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

41
app/client/src/main.js
View File

@ -213,6 +213,8 @@ new Vue({
this.configureAudio();
this.state = 1;
if (autoplay) this.play();
//MediaSession
this.updateMediaSession();
//Loads more tracks if end of list
this.loadSTL();
@ -275,6 +277,7 @@ new Vue({
//Play
this.state = 2;
this.audio.play();
this.updateMediaSession();
await this.savePlaybackInfo();
return;
}
@ -282,7 +285,6 @@ new Vue({
this.skip(1);
this.savePlaybackInfo();
});
this.updateMediaSession();
},
//Update media session with current track metadata
updateMediaSession() {
@ -417,6 +419,12 @@ new Vue({
state: this.state,
track: this.track
});
//Update in electron
if (this.settings.electron) {
const {ipcRenderer} = window.require('electron');
ipcRenderer.send('playing', this.state == 2);
}
}
},
async created() {
@ -511,17 +519,40 @@ new Vue({
//Don't handle keystrokes in text fields
if (e.target.tagName == "INPUT") return;
//K toggle playback
//e.keyCode === 32
if (e.keyCode === 75 || e.keyCode === 107) this.$root.toggle();
if (e.code == "KeyK" || e.code == "Space") this.$root.toggle();
//L +10s (from YT)
if (e.keyCode === 108 || e.keyCode === 76) this.$root.seek((this.position + 10000));
if (e.code == "KeyL") this.$root.seek((this.position + 10000));
//J -10s (from YT)
if (e.keyCode === 106 || e.keyCode === 74) this.$root.seek((this.position - 10000));
if (e.code == "KeyJ") this.$root.seek((this.position - 10000));
//-> +5s (from YT)
if (e.code == "ArrowRight") this.$root.seek((this.position + 5000));
//<- -5s (from YT)
if (e.code == "ArrowLeft") this.$root.seek((this.position - 5000));
// ^ v - Volume
if (e.code == 'ArrowUp' && this.audio) {
if ((this.audio.volume + 0.05) > 1) {
this.audio.volume = 1.00;
this.volume = 1.00;
return;
}
this.audio.volume += 0.05;
this.volume = this.audio.volume;
}
if (e.code == 'ArrowDown' && this.audio) {
if ((this.audio.volume - 0.05) < 0) {
this.audio.volume = 0.00;
this.volume = 0.00;
return;
}
this.audio.volume -= 0.05;
this.volume = this.audio.volume;
}
});
},
watch: {
//Watch state for integrations
state() {
this.updateMediaSession();
this.updateState();
}
},