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

1.1.11 - UI changes, volume curve etc

Browse Source
This commit is contained in:
exttex
2020-12-13 19:24:25 +01:00
parent 74f049ac71
commit 5c40db1242
35 changed files with 537 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,11 +79,12 @@
</v-list-item-action>
</v-list-item>
<v-card v-if='card' max-width='175px' max-height='210px' @click='click'>
<!-- Card version -->
<v-card v-if='card' max-width='175px' max-height='230px' @click='click' color='transparent' elevation='0'>
<v-hover v-slot:default='{hover}'>
<div>
<v-img :src='album.art.thumb'>
<v-img :src='album.art.thumb' class='rounded-lg'>
</v-img>
<v-overlay absolute :value='hover' opacity='0.5'>
@ -95,8 +96,8 @@
</div>
</v-hover>
<div class='pa-2 text-subtitle-2 text-center text-truncate'>{{album.title}}</div>
<div class='px-2 pt-2 pb-1 text-subtitle-2 text-center text-truncate'>{{album.title}}</div>
<div class='pb-1 px-2 text-caption text-center text-truncate'>{{album.artistString}}</div>
</v-card>

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

@ -51,7 +51,7 @@
</v-list-item>
<!-- Card version -->
<v-card max-height='200px' max-width='200px' v-if='card' @click='click'>
<v-card max-height='200px' width='180px' v-if='card' @click='click' color='transparent' elevation='0'>
<div class='d-flex justify-center'>
<v-avatar size='150' class='ma-1'>
<v-img :src='artist.picture.thumb'>
@ -82,7 +82,7 @@ export default {
tiny: {
type: Boolean,
default: false
}
},
},
methods: {
async library() {

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

@ -20,11 +20,21 @@
<v-icon v-if='!isReversed'>mdi-sort-variant</v-icon>
</v-btn>
</div>
<!-- Search -->
<v-text-field
dense
:label='$t("Search")'
solo
class='mx-2 mt-1'
v-model='searchQuery'
></v-text-field>
</div>
<v-lazy max-height="100" v-for='(album, index) in albums' :key='album.id'>
<AlbumTile :album='album' @remove='removed(index)'></AlbumTile>
</v-lazy>
<div class='d-flex justify-center flex-wrap'>
<v-lazy max-height="230" v-for='album in filtered' :key='album.id' class='ma-2'>
<AlbumTile :album='album' @remove='removed(album.id)' card></AlbumTile>
</v-lazy>
</div>
</v-list>
</template>
@ -34,6 +44,9 @@ import AlbumTile from '@/components/AlbumTile.vue';
export default {
name: 'LibraryAlbums',
components: {
AlbumTile
},
data() {
return {
albums: [],
@ -46,7 +59,8 @@ export default {
this.$t('Name (A-Z)'),
this.$t('Artist (A-Z)')
],
unsorted: null
unsorted: null,
searchQuery: null
}
},
methods: {
@ -59,8 +73,8 @@ export default {
}
this.loading = false;
},
removed(index) {
this.albums.splice(index, 1);
removed(id) {
this.albums.splice(this.albums.findIndex(a => a.id == id), 1);
},
//Sort changed
async sort(type) {
@ -91,12 +105,18 @@ export default {
this.albums.reverse();
},
},
components: {
AlbumTile
},
mounted() {
//Initial load
this.load();
},
computed: {
//Search
filtered() {
if (!this.searchQuery)
return this.albums;
return this.albums.filter(a => a.title.toLowerCase().includes(this.searchQuery.toLowerCase()));
}
}
}
</script>

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

@ -20,11 +20,21 @@
<v-icon v-if='!isReversed'>mdi-sort-variant</v-icon>
</v-btn>
</div>
<!-- Search -->
<v-text-field
dense
:label='$t("Search")'
solo
class='mx-2 mt-1'
v-model='searchQuery'
></v-text-field>
</div>
<v-lazy max-height="100" v-for='(artist, index) in artists' :key='artist.id'>
<ArtistTile :artist='artist' @remove='removed(index)'></ArtistTile>
</v-lazy>
<div class='d-flex flex-wrap justify-center'>
<v-lazy max-height="200" v-for='artist in filtered' :key='artist.id' class='my-2 ml-3'>
<ArtistTile :artist='artist' @remove='removed(artist.id)' card></ArtistTile>
</v-lazy>
</div>
</v-list>
</template>
@ -48,7 +58,8 @@ export default {
this.$t('Date Added'),
this.$t('Name (A-Z)')
],
unsorted: null
unsorted: null,
searchQuery: null
}
},
methods: {
@ -61,8 +72,8 @@ export default {
}
this.loading = false;
},
removed(index) {
this.artists.splice(index, 1);
removed(id) {
this.artists.splice(this.artists.findIndex(a => a.id == id), 1);
},
//Sort changed
async sort(type) {
@ -92,6 +103,15 @@ export default {
mounted() {
//Initial load
this.load();
},
computed: {
//Search
filtered() {
if (!this.searchQuery)
return this.artists;
return this.artists.filter(a => a.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
}
}
}
</script>

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

@ -6,12 +6,6 @@
</v-overlay>
<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'>
@ -28,16 +22,34 @@
</v-btn>
</div>
</div>
<!-- Search -->
<v-text-field
dense
:label='$t("Search")'
solo
class='mx-2 mt-1'
v-model='searchQuery'
></v-text-field>
</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>
<div class='d-flex justify-center flex-wrap'>
<!-- Add playlist card -->
<v-card width='175px' height='175px' class='ma-2 d-flex justify-center align-center flex-column text-center rounded-lg' outlined @click='popup = true'>
<v-icon large>
mdi-playlist-plus
</v-icon>
<br>
<p class='text-h6 font-weight-bold'>{{$t("Create new playlist")}}</p>
</v-card>
<v-lazy max-height="220" v-for='playlist in filtered' :key='playlist.id' class='ma-2'>
<PlaylistTile :playlist='playlist' @remove='removed(playlist.id)' card cardTitle></PlaylistTile>
</v-lazy>
</div>
</v-list>
</template>
@ -63,7 +75,8 @@ export default {
this.$t('Date Added'),
this.$t('Name (A-Z)'),
],
unsorted: null
unsorted: null,
searchQuery: null
}
},
methods: {
@ -84,8 +97,8 @@ export default {
this.load();
},
//On playlist remove
removed(i) {
this.playlists.splice(i, 1);
removed(id) {
this.playlists.splice(this.playlists.findIndex(p => p.id == id), 1);
},
//Sort changed
async sort(type) {
@ -115,6 +128,15 @@ export default {
mounted() {
//Initial load
this.load();
},
computed: {
//Search playlists
filtered() {
if (!this.searchQuery)
return this.playlists;
return this.playlists.filter(p => p.title.toLowerCase().includes(this.searchQuery.toLowerCase()));
}
}
}
</script>

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

@ -14,14 +14,22 @@
<v-icon v-if='!isReversed'>mdi-sort-variant</v-icon>
</v-btn>
</div>
<!-- Search -->
<v-text-field
dense
:label='$t("Search")'
solo
class='mx-2 mt-1'
v-model='searchQuery'
></v-text-field>
</div>
<v-list :height='height' class='overflow-y-auto'>
<v-lazy
v-for='(track, index) in tracks'
v-for='(track, index) in filtered'
:key='index + "t" + track.id'
max-height="100"
><TrackTile :track='track' @click='play(index)' @remove='removedTrack(index)'>
><TrackTile :track='track' @click='play(track.id)' @remove='removedTrack(track.id)'>
</TrackTile>
</v-lazy>
@ -52,7 +60,8 @@ export default {
this.$t('Album (A-Z)')
],
tracksUnsorted: null,
isReversed: false
isReversed: false,
searchQuery: null
}
},
props: {
@ -97,14 +106,14 @@ export default {
this.loading = false;
},
//Play track
async play(index) {
async play(id) {
this.$root.queue.source = {
text: 'Loved tracks',
source: 'playlist',
data: this.$root.profile.favoritesPlaylist
};
this.$root.replaceQueue(this.tracks);
this.$root.playIndex(index);
this.$root.playIndex(this.tracks.findIndex(t => t.id == id));
//Load all tracks
if (this.tracks.length < this.count) {
@ -151,12 +160,22 @@ export default {
this.isReversed = !this.isReversed;
this.tracks.reverse();
},
removedTrack(index) {
this.tracks.splice(index, 1);
removedTrack(id) {
this.tracks.splice(this.tracks.findIndex(t => t.id == id), 1);
this.$root.libraryTracks.splice(this.$root.libraryTracks.indexOf(id), 1);
}
},
mounted() {
this.initialLoad();
},
computed: {
//Search
filtered() {
if (!this.searchQuery)
return this.tracks;
return this.tracks.filter(t => t.title.toLowerCase().includes(this.searchQuery.toLowerCase()));
}
}
}

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

@ -82,11 +82,11 @@
</v-list-item>
<!-- Card -->
<v-card v-if='card' max-width='175px' max-height='175px' @click='click' rounded>
<v-card v-if='card' max-width='175px' max-height='220px' @click='click' color='transparent' elevation='0'>
<v-hover v-slot:default='{hover}'>
<div>
<v-img :src='playlist.image.thumb'>
<v-img :src='playlist.image.thumb' class='rounded-lg'>
</v-img>
<v-overlay absolute :value='hover' opacity='0.5'>
@ -95,6 +95,8 @@
</v-btn>
</v-overlay>
<div v-if='cardTitle' class='px-2 pt-2 pb-1 text-subtitle-2 text-center text-truncate'>{{playlist.title}}</div>
</div>
</v-hover>
</v-card>
@ -124,6 +126,10 @@ export default {
card: {
type: Boolean,
default: false
},
cardTitle: {
type: Boolean,
default: false
}
},
methods: {

2
app/client/src/components/SmartTrackList.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<v-card max-width='175px' max-height='210px' @click='play' :loading='loading'>
<v-card max-width='175px' max-height='210px' @click='play' :loading='loading' elevation='0' color='transparent'>
<v-img :src='stl.cover.thumb'>
</v-img>

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

@ -255,6 +255,11 @@ export default {
document.body.removeChild(copyElem);
this.$root.globalSnackbar = this.$t('Link copied!');
}
},
watch: {
'$root.libraryTracks'() {
this.isLibrary = this.$root.libraryTracks.includes(this.track.id);
}
}
}
</script>