Download un-sync fix, playback history

app/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

app/client/src/components/LibraryHistory.vue

@@ -0,0 +1,58 @@
+<template>
+<div>
+
+    <div v-if='loading'>
+        <v-progress-circular indeterminate class='ma-4'></v-progress-circular>
+    </div>
+
+    <v-list v-if='!loading'>
+        <v-lazy v-for='(track, index) in tracks' :key='track.id' max-height='100'>
+            <TrackTile :track='track' @click='play(index)'></TrackTile>
+        </v-lazy>
+    </v-list>
+
+</div>
+</template>
+
+<script>
+
+import TrackTile from '@/components/TrackTile.vue';
+
+export default {
+    name: 'LibraryHistory',
+    components: {
+        TrackTile
+    },
+    data() {
+        return {
+            loading: true,
+            tracks: []
+        }
+    },
+    methods: {
+        async load() {
+            this.loading = true;
+
+            //Fetch
+            let res = await this.$axios.get('/history');
+            if (res.data) this.tracks = res.data;
+
+            this.loading = false;
+        },
+        //Load as queue and play
+        play(index) {
+            this.$root.queue.source = {
+                text: 'History',
+                source: 'history',
+                data: null
+            };
+            this.$root.replaceQueue(this.tracks);
+            this.$root.playIndex(index);
+        }
+    },
+    mounted() {
+        //Load on start
+        this.load();
+    }
+}
+</script>

app/client/src/views/DownloadsPage.vue

@@ -54,11 +54,11 @@
                     <v-list-item-title>{{download.track.title}}</v-list-item-title>
                     <v-list-item-subtitle>{{download.track.artistString}}</v-list-item-subtitle>
                 </v-list-item-content>
-                <v-liste-item-action>
+                <v-list-item-action>
                     <v-btn icon @click='deleteDownload(index)'>
                         <v-icon>mdi-delete</v-icon>
                     </v-btn>
-                </v-liste-item-action>
+                </v-list-item-action>
             </v-list-item>
         </div>
     </v-list>
@@ -79,7 +79,6 @@ export default {
         //Remove download from queue
         async deleteDownload(i) {
             await this.$axios.delete(`/downloads/${i}`);
-            this.$root.getDownloads();
         }
     }
 }

app/client/src/views/Library.vue

@@ -15,6 +15,9 @@
         <v-tab key='playlists'>
             Playlists
         </v-tab>
+        <v-tab key='history'>
+            History
+        </v-tab>
     </v-tabs>
 
     <v-tabs-items v-model='tab'>
@@ -37,6 +40,11 @@
         <v-tab-item key='playlists'>
             <LibraryPlaylists></LibraryPlaylists>
         </v-tab-item>
+
+        <!-- History -->
+        <v-tab-item key='history'>
+            <LibraryHistory></LibraryHistory>
+        </v-tab-item>
     </v-tabs-items>
 
 </div>
@@ -47,11 +55,12 @@ import LibraryTracks from '@/components/LibraryTracks.vue';
 import LibraryAlbums from '@/components/LibraryAlbums.vue';
 import LibraryArtists from '@/components/LibraryArtists.vue';
 import LibraryPlaylists from '@/components/LibraryPlaylists.vue';
+import LibraryHistory from '@/components/LibraryHistory.vue';
 
 export default {
     name: 'Library',
     components: {
-        LibraryTracks, LibraryAlbums, LibraryArtists, LibraryPlaylists
+        LibraryTracks, LibraryAlbums, LibraryArtists, LibraryPlaylists, LibraryHistory
     },
         props: {
         routeTab: {