diff --git a/app/client/src/App.vue b/app/client/src/App.vue index cd2a321..33ae2f6 100644 --- a/app/client/src/App.vue +++ b/app/client/src/App.vue @@ -139,7 +139,7 @@ - + mdi-arrow-left @@ -478,7 +478,6 @@ export default { }, watch: { volume() { - if (this.$root.audio) this.$root.audio.volume = this.volume; this.$root.volume = this.volume; }, '$root.volume'() { diff --git a/app/client/src/components/AlbumTile.vue b/app/client/src/components/AlbumTile.vue index fd637b9..9ae81c5 100644 --- a/app/client/src/components/AlbumTile.vue +++ b/app/client/src/components/AlbumTile.vue @@ -79,11 +79,12 @@ - + +
- + @@ -95,8 +96,8 @@
- -
{{album.title}}
+
{{album.title}}
+
{{album.artistString}}
diff --git a/app/client/src/components/ArtistTile.vue b/app/client/src/components/ArtistTile.vue index 30185ab..68f1547 100644 --- a/app/client/src/components/ArtistTile.vue +++ b/app/client/src/components/ArtistTile.vue @@ -51,7 +51,7 @@ - +
@@ -82,7 +82,7 @@ export default { tiny: { type: Boolean, default: false - } + }, }, methods: { async library() { diff --git a/app/client/src/components/LibraryAlbums.vue b/app/client/src/components/LibraryAlbums.vue index ba18a50..e4cdf02 100644 --- a/app/client/src/components/LibraryAlbums.vue +++ b/app/client/src/components/LibraryAlbums.vue @@ -20,11 +20,21 @@ mdi-sort-variant
+ + - - - +
+ + + +
@@ -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())); + } } } \ No newline at end of file diff --git a/app/client/src/components/LibraryArtists.vue b/app/client/src/components/LibraryArtists.vue index 813804a..a00cd69 100644 --- a/app/client/src/components/LibraryArtists.vue +++ b/app/client/src/components/LibraryArtists.vue @@ -20,11 +20,21 @@ mdi-sort-variant
+ + - - - +
+ + + +
@@ -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())); + } } } \ No newline at end of file diff --git a/app/client/src/components/LibraryPlaylists.vue b/app/client/src/components/LibraryPlaylists.vue index 6417cdc..4759335 100644 --- a/app/client/src/components/LibraryPlaylists.vue +++ b/app/client/src/components/LibraryPlaylists.vue @@ -6,12 +6,6 @@
- - - mdi-playlist-plus - {{$t("Create new playlist")}} - -
@@ -28,16 +22,34 @@
- + +
- - - +
+ + + + mdi-playlist-plus + +
+

{{$t("Create new playlist")}}

+
+ + + + +
@@ -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())); + } } } \ No newline at end of file diff --git a/app/client/src/components/LibraryTracks.vue b/app/client/src/components/LibraryTracks.vue index b3163d8..d512c1c 100644 --- a/app/client/src/components/LibraryTracks.vue +++ b/app/client/src/components/LibraryTracks.vue @@ -14,14 +14,22 @@ mdi-sort-variant + + + > @@ -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())); + } } } diff --git a/app/client/src/components/PlaylistTile.vue b/app/client/src/components/PlaylistTile.vue index df33e92..4f6f987 100644 --- a/app/client/src/components/PlaylistTile.vue +++ b/app/client/src/components/PlaylistTile.vue @@ -82,11 +82,11 @@ - +
- + @@ -95,6 +95,8 @@ +
{{playlist.title}}
+
@@ -124,6 +126,10 @@ export default { card: { type: Boolean, default: false + }, + cardTitle: { + type: Boolean, + default: false } }, methods: { diff --git a/app/client/src/components/SmartTrackList.vue b/app/client/src/components/SmartTrackList.vue index e67c01a..391454a 100644 --- a/app/client/src/components/SmartTrackList.vue +++ b/app/client/src/components/SmartTrackList.vue @@ -1,7 +1,7 @@