Playback error fix, downloading on windows crash fix, logging POC

app/client/src/components/DownloadDialog.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 
-    <v-dialog v-model='show' max-width='420'>
+    <v-dialog v-model='dShow' max-width='420'>
         <v-card>
 
             <v-card-title class='headline'>
@@ -57,6 +57,7 @@ export default {
             ],
             qualityString: 'Settings quality',
             autostart: true,
+            dShow: this.show
         }
     },
     methods: {
@@ -98,6 +99,15 @@ export default {
             return duration * this.$root.settings.downloadsQuality;
 
         }
+    },
+    watch: {
+        //Prevent errors on closing with mouse
+        show() {
+            this.dShow = this.show;
+        },
+        dShow() {
+            if (!this.dShow) this.$emit('close');
+        }
     }
 }
 </script>

app/client/src/components/Lyrics.vue

@@ -49,7 +49,7 @@ export default {
             try {
 
                 let res = await this.$axios.get(`/lyrics/${this.songId}`);
-                if (res.data) this.lyrics = res.data;
+                if (res.data && res.data.lyrics.length > 0) this.lyrics = res.data;
             
             } catch (e) {true;}
             this.loading = false;

app/client/src/main.js

@@ -94,7 +94,10 @@ new Vue({
                 source: 'none',
                 data: 'none'
             }
-        }
+        },
+
+        //Used to prevent double listen logging
+        logListenId: null
     },
     methods: {
         // PLAYBACK METHODS
@@ -106,6 +109,8 @@ new Vue({
             if (!this.audio || this.state != 1) return;
             this.audio.play();
             this.state = 2;
+
+            this.logListen();
         },
         pause() {
             if (!this.audio || this.state != 2) return;
@@ -217,6 +222,7 @@ new Vue({
                     //Play
                     this.state = 2;
                     this.audio.play();
+                    this.logListen();
                     await this.savePlaybackInfo();
                     return;
                 }
@@ -326,6 +332,16 @@ new Vue({
         async cacheLibrary() {
             let res = await this.$axios.get(`/playlist/${this.profile.favoritesPlaylist}?full=idk`);
             this.libraryTracks = res.data.tracks.map((t) => t.id);
+        },
+
+        //Log song listened to deezer, only if allowed
+        async logListen() {
+            if (!this.settings.logListen) return;
+            if (this.logListenId == this.track.id) return;
+            if (!this.track || !this.track.id) return;
+
+            this.logListenId = this.track.id;
+            await this.$axios.put(`/log/${this.track.id}`);
         }
     },
     async created() {

app/client/src/views/DownloadsPage.vue

@@ -20,8 +20,8 @@
     </v-card>
 
     <h1 class='pb-2'>Queue:</h1>
-    <div class='text-h6 pb-2 d-flex'>Total: {{$root.downloads.length}}
-        <v-btn @click='$root.toggleDownload' class='ml-2' color='primary'>
+    <div class='text-h6 mr-4 pb-2 d-flex'>Total: {{$root.downloads.length}}
+        <v-btn @click='$root.toggleDownload' class='ml-4' color='primary'>
             <div v-if='$root.downloading'>
                 <v-icon>mdi-stop</v-icon>
                 Stop
@@ -32,15 +32,20 @@
             </div>
         </v-btn>
         <!-- Open dir -->
-        <v-btn @click='openDir' class='ml-2' v-if='$root.settings.electron'>
+        <v-btn @click='openDir' class='ml-4' v-if='$root.settings.electron'>
             <v-icon>mdi-folder</v-icon>
             Show folder
         </v-btn>
+        <!-- Delete all -->
+        <v-btn @click='deleteDownload(-1)' class='ml-4' color='red'>
+            <v-icon>mdi-delete</v-icon>
+            Clear queue
+        </v-btn>
     </div>
 
     <!-- Downloads -->
     <v-list dense>
-        <div v-for='download in $root.downloads' :key='download.id'>
+        <div v-for='(download, index) in $root.downloads' :key='download.id'>
             <v-list-item dense>
                 <v-list-item-avatar>
                     <v-img :src='download.track.albumArt.thumb'></v-img>
@@ -49,6 +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-btn icon @click='deleteDownload(index)'>
+                        <v-icon>mdi-delete</v-icon>
+                    </v-btn>
+                </v-liste-item-action>
             </v-list-item>
         </div>
     </v-list>
@@ -65,6 +75,11 @@ export default {
         openDir() {
             const {ipcRenderer} = window.require('electron');
             ipcRenderer.send('openDownloadsDir');
+        },
+        //Remove download from queue
+        async deleteDownload(i) {
+            await this.$axios.delete(`/downloads/${i}`);
+            this.$root.getDownloads();
         }
     }
 }

app/client/src/views/Settings.vue

@@ -57,6 +57,17 @@
             hint='Variables: %title%, %artists%, %artist%, %feats%, %trackNumber%, %0trackNumber%, %album%'
         ></v-text-field>
 
+        <!-- Log listening -->
+        <v-list-item>
+            <v-list-item-action>
+                <v-checkbox v-model='$root.settings.logListen'></v-checkbox>
+            </v-list-item-action>
+            <v-list-item-content>
+                <v-list-item-title>Log track listens to Deezer</v-list-item-title>
+                <v-list-item-subtitle>This allows listening history, flow and recommendations to work properly.</v-list-item-subtitle>
+            </v-list-item-content>
+        </v-list-item>
+
         <!-- Minimize to tray -->
         <v-list-item v-if='$root.settings.electron'>
             <v-list-item-action>