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

1.1.7 - cli, sorting, maximize, bugs...

Browse Source
This commit is contained in:
exttex
2020-11-08 18:01:02 +01:00
parent 8648e6df41
commit 0a467966cb
46 changed files with 940 additions and 426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/client/src/components/AlbumTile.vue
View File

@ -54,6 +54,15 @@
<v-list-item-title>{{$t("Remove from library")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Share -->
<v-list-item dense @click='share'>
<v-list-item-icon>
<v-icon>mdi-share-variant</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Download -->
<v-list-item dense @click='download'>
<v-list-item-icon>
@ -167,6 +176,16 @@ export default {
}
this.album.tracks = tracks;
this.downloadDialog = true;
},
//Copy link
share() {
let copyElem = document.createElement('input');
copyElem.value = `https://deezer.com/album/${this.album.id}`;
document.body.appendChild(copyElem);
copyElem.select();
document.execCommand('copy');
document.body.removeChild(copyElem);
this.$root.globalSnackbar = this.$t('Link copied!');
}
}
};

21
app/client/src/components/ArtistTile.vue
View File

@ -26,7 +26,7 @@
<v-list-item-title>{{$t("Add to library")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Remvoe from library -->
<!-- Remove from library -->
<v-list-item dense @click='library' v-if='artist.library'>
<v-list-item-icon>
<v-icon>mdi-heart-remove</v-icon>
@ -35,6 +35,15 @@
<v-list-item-title>{{$t("Remove from library")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Share -->
<v-list-item dense @click='share'>
<v-list-item-icon>
<v-icon>mdi-share-variant</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
@ -97,6 +106,16 @@ export default {
query: {artist: JSON.stringify(this.artist)}
});
this.$emit('clicked');
},
//Copy link
share() {
let copyElem = document.createElement('input');
copyElem.value = `https://deezer.com/artist/${this.artist.id}`;
document.body.appendChild(copyElem);
copyElem.select();
document.execCommand('copy');
document.body.removeChild(copyElem);
this.$root.globalSnackbar = this.$t('Link copied!');
}
}
}

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

@ -54,12 +54,12 @@ export default {
return {
shown: true,
qualities: [
'Settings quality',
this.$t('Settings quality'),
'MP3 128kbps',
'MP3 320kbps',
'FLAC ~1441kbps'
],
qualityString: 'Settings quality',
qualityString: this.$t('Settings quality'),
autostart: true,
dShow: this.show
}

58
app/client/src/components/LibraryAlbums.vue
View File

@ -5,6 +5,23 @@
<v-progress-circular indeterminate></v-progress-circular>
</v-overlay>
<!-- Sort -->
<div class='px-4 d-flex' style='max-height: 50px;' v-if='!loading'>
<div class='text-overline pt-1 mx-2'>
{{albums.length}} {{$t("Albums")}}
</div>
<div style="max-width: 200px;" class='mx-2'>
<v-select class='px-2' dense solo :items='sortTypes' @change='sort' :label='$t("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-lazy max-height="100" v-for='(album, index) in albums' :key='album.id'>
<AlbumTile :album='album' @remove='removed(index)'></AlbumTile>
</v-lazy>
@ -20,7 +37,16 @@ export default {
data() {
return {
albums: [],
loading: false
loading: false,
//Sort
isReversed: false,
sortTypes: [
this.$t('Date Added'),
this.$t('Name (A-Z)'),
this.$t('Artist (A-Z)')
],
unsorted: null
}
},
methods: {
@ -35,7 +61,35 @@ export default {
},
removed(index) {
this.albums.splice(index, 1);
}
},
//Sort changed
async sort(type) {
let index = this.sortTypes.indexOf(type);
//Copy original
if (!this.unsorted)
this.unsorted = JSON.parse(JSON.stringify(this.albums));
//Using indexes, so it can be translated later
this.isReversed = false;
switch (index) {
//Default
case 0:
this.albums = JSON.parse(JSON.stringify(this.unsorted));
break;
//Name
case 1:
this.albums = this.albums.sort((a, b) => {return a.title.localeCompare(b.title);});
break;
//Artist
case 2:
this.albums = this.albums.sort((a, b) => {return a.artistString.localeCompare(b.artistString);});
break;
}
},
async reverseSort() {
this.isReversed = !this.isReversed;
this.albums.reverse();
},
},
components: {
AlbumTile

51
app/client/src/components/LibraryArtists.vue
View File

@ -5,6 +5,23 @@
<v-progress-circular indeterminate></v-progress-circular>
</v-overlay>
<!-- Sort -->
<div class='px-4 d-flex' style='max-height: 50px;' v-if='!loading'>
<div class='text-overline pt-1 mx-2'>
{{artists.length}} {{$t("Artists")}}
</div>
<div style="max-width: 200px;" class='mx-2'>
<v-select class='px-2' dense solo :items='sortTypes' @change='sort' :label='$t("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-lazy max-height="100" v-for='(artist, index) in artists' :key='artist.id'>
<ArtistTile :artist='artist' @remove='removed(index)'></ArtistTile>
</v-lazy>
@ -23,7 +40,15 @@ export default {
data() {
return {
artists: [],
loading: false
loading: false,
//Sort
isReversed: false,
sortTypes: [
this.$t('Date Added'),
this.$t('Name (A-Z)')
],
unsorted: null
}
},
methods: {
@ -38,6 +63,30 @@ export default {
},
removed(index) {
this.artists.splice(index, 1);
},
//Sort changed
async sort(type) {
let index = this.sortTypes.indexOf(type);
//Copy original
if (!this.unsorted)
this.unsorted = JSON.parse(JSON.stringify(this.artists));
//Using indexes, so it can be translated later
this.isReversed = false;
switch (index) {
//Default
case 0:
this.artists = JSON.parse(JSON.stringify(this.unsorted));
break;
//Name
case 1:
this.artists = this.artists.sort((a, b) => {return a.name.localeCompare(b.name);});
break;
}
},
async reverseSort() {
this.isReversed = !this.isReversed;
this.artists.reverse();
}
},
mounted() {

67
app/client/src/components/LibraryPlaylists.vue
View File

@ -5,17 +5,36 @@
<v-progress-circular indeterminate></v-progress-circular>
</v-overlay>
<!-- Create playlist -->
<v-btn class='ma-2 ml-3' color='primary' @click='popup = true'>
<v-icon left>mdi-playlist-plus</v-icon>
{{$t("Create new playlist")}}
</v-btn>
<div class='d-flex'>
<!-- Create playlist -->
<v-btn class='ma-2 ml-3' color='primary' @click='popup = true'>
<v-icon left>mdi-playlist-plus</v-icon>
{{$t("Create new playlist")}}
</v-btn>
<!-- Sort -->
<div class='mt-1 px-2 d-flex'>
<div class='text-overline pt-1 mx-2'>
{{playlists.length}} {{$t("Playlists")}}
</div>
<div style="max-width: 200px;" class='mx-2'>
<v-select class='px-2' dense solo :items='sortTypes' @change='sort' :label='$t("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>
</div>
<v-dialog max-width="400px" v-model='popup'>
<PlaylistPopup @created='playlistCreated'></PlaylistPopup>
</v-dialog>
<v-lazy max-height="100" v-for='(playlist, index) in playlists' :key='playlist.id'>
<PlaylistTile :playlist='playlist' @remove='removed(index)'></PlaylistTile>
</v-lazy>
@ -36,7 +55,15 @@ export default {
return {
playlists: [],
loading: false,
popup: false
popup: false,
//Sort
isReversed: false,
sortTypes: [
this.$t('Date Added'),
this.$t('Name (A-Z)'),
],
unsorted: null
}
},
methods: {
@ -59,7 +86,31 @@ export default {
//On playlist remove
removed(i) {
this.playlists.splice(i, 1);
}
},
//Sort changed
async sort(type) {
let index = this.sortTypes.indexOf(type);
//Copy original
if (!this.unsorted)
this.unsorted = JSON.parse(JSON.stringify(this.playlists));
//Using indexes, so it can be translated later
this.isReversed = false;
switch (index) {
//Default
case 0:
this.playlists = JSON.parse(JSON.stringify(this.unsorted));
break;
//Name
case 1:
this.playlists = this.playlists.sort((a, b) => {return a.title.localeCompare(b.title);});
break;
}
},
async reverseSort() {
this.isReversed = !this.isReversed;
this.playlists.reverse();
},
},
mounted() {
//Initial load

20
app/client/src/components/PlaylistTile.vue
View File

@ -55,6 +55,16 @@
<v-list-item-title>{{$t('Remove from library')}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Share -->
<v-list-item dense @click='share'>
<v-list-item-icon>
<v-icon>mdi-share-variant</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Download -->
<v-list-item dense @click='download'>
@ -172,6 +182,16 @@ export default {
await this.$axios.put(`/library/playlist?id=${this.playlist.id}`);
this.$root.globalSnackbar = this.$t('Added to library!');
this.playlist.library = true;
},
//Copy link
share() {
let copyElem = document.createElement('input');
copyElem.value = `https://deezer.com/playlist/${this.playlist.id}`;
document.body.appendChild(copyElem);
copyElem.select();
document.execCommand('copy');
document.body.removeChild(copyElem);
this.$root.globalSnackbar = this.$t('Link copied!');
}
},
computed: {

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

@ -1,5 +1,5 @@
<template>
<v-list-item two-line @click='$emit("click")'>
<v-list-item two-line @click='$emit("click")' :ripple='ripple'>
<v-list-item-avatar>
<v-img :src='track.albumArt.thumb'></v-img>
</v-list-item-avatar>
@ -93,6 +93,15 @@
<v-list-item-title>{{$t("Remove from playlist")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Share -->
<v-list-item dense @click='share'>
<v-list-item-icon>
<v-icon>mdi-share-variant</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<!-- Play track mix -->
<v-list-item dense @click='trackMix'>
<v-list-item-icon>
@ -174,6 +183,10 @@ export default {
type: String,
default: null
},
ripple: {
type: Boolean,
default: true
}
},
methods: {
//Add track next to queue
@ -231,6 +244,16 @@ export default {
};
this.$root.replaceQueue(res.data);
this.$root.playIndex(0);
},
//Copy link
share() {
let copyElem = document.createElement('input');
copyElem.value = `https://deezer.com/track/${this.track.id}`;
document.body.appendChild(copyElem);
copyElem.select();
document.execCommand('copy');
document.body.removeChild(copyElem);
this.$root.globalSnackbar = this.$t('Link copied!');
}
}
}