From 80f6cbf8704745d98b841f1f6de27550fbb7fec8 Mon Sep 17 00:00:00 2001
From: exttex <exttex@protonmail.com>
Date: Mon, 28 Sep 2020 18:17:23 +0200
Subject: [PATCH] Bug fixes, better lyrics, sorting

---
 app/assets/pause.png                        | Bin 0 -> 370 bytes
 app/assets/play.png                         | Bin 0 -> 552 bytes
 app/assets/skip-next.png                    | Bin 0 -> 479 bytes
 app/assets/skip-previous.png                | Bin 0 -> 524 bytes
 app/background.js                           |  55 +++++++++++-
 app/client/src/App.vue                      |   7 +-
 app/client/src/components/LibraryTracks.vue |  90 ++++++++++++++++----
 app/client/src/components/Lyrics.vue        |  14 ++-
 app/client/src/components/TrackTile.vue     |   4 +-
 app/client/src/main.js                      |  41 +++++++--
 app/package.json                            |   2 +-
 app/src/deezer.js                           |   2 +-
 app/src/integrations.js                     |   3 +-
 package.json                                |   2 +-
 14 files changed, 186 insertions(+), 34 deletions(-)
 create mode 100644 app/assets/pause.png
 create mode 100644 app/assets/play.png
 create mode 100644 app/assets/skip-next.png
 create mode 100644 app/assets/skip-previous.png

diff --git a/app/assets/pause.png b/app/assets/pause.png
new file mode 100644
index 0000000000000000000000000000000000000000..53298839719c626b409736e9f2f6c6bfe6449a7a
GIT binary patch
literal 370
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J{n@{+=$5AsP4HUf9Un;K0M;IPYJznI)sp!Oe`uKO>{$*%>ZG
z=Cd0c_p@J*vi@HF{M`E*M+aZ*kb&Vty7;aH4vQ%|4*!8htCqM%l%yn<q*^5xr2;7i
zBLgD?T?0#9Ba0A2V=F^LD^o*l0|P4qgQ@RM7@}y%%}>cptHiD0$>xGypaw~h4Z-<o
qCFO}lsSM@i<$9TU*~Q6;1*v-ZMd`EO*+>BuF?hQAxvX<aXaWG03THY1

literal 0
HcmV?d00001

diff --git a/app/assets/play.png b/app/assets/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..48abc15cd94d9441a455082f13a62092b8183458
GIT binary patch
literal 552
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J@>b7+F1C978hhy}h!~*Tqr9?IAlyKue15LWUJgI%2&s?i02+
za7RSl5aV!dNY`a*y}|Fetijy4vfOOv^2X|OqW?`)JtwJnZaSXO+nmuqjiKUj>K1Qr
zhCh!ak6-lL%Gk;u<6ga$<p7_)Men!Oyc#tR^=@rcU9jO`<(6!3hMLEM?HA7hRc%z;
zuGBD5ZM)F|0sEc3j4u9p?F~+6o|N%uoSAiJquSf~w=-wSiS54j^Y{E6kzZox9yz^c
zo{rXi%?GmK-QDFJKMo4_9eN_oWVVAtbUn|FM|QV%swK3CuUS-^%`|QPF+aw_%QqAi
z%A};3j?FlBs-bXMVcLO;%NE8DbZ#kvT>ovFz00!O)r=eJR{=vwwZt`|BqgyV)hf9t
z6-Y4{85kMp8d&NYS%erGTNxT!8JKAs7+4t?NUZ#E8%0BIeoAIqC2kFwUmVhb8YDqB
t1m~xflqVLYGL)B>>t*I;7bhncr0V4trO$q6BL!5%;OXk;vd$@?2>=9_!4m)g

literal 0
HcmV?d00001

diff --git a/app/assets/skip-next.png b/app/assets/skip-next.png
new file mode 100644
index 0000000000000000000000000000000000000000..41aa1ba94abe3fa608247d64210bd245b689a402
GIT binary patch
literal 479
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J{n@dpunnLo)8Yy}r<wxlrQRL#N47ES#IRNgZYKIl!^zf@s7-
zZIhKR*<u?Q4Kj52f}Jldf5pOAXi|InH_r$Ey6OM#*4|GE3I&4wZMyH=Y~HsAvm9WT
zo6P*6K{Rb8W3%}kb@l^t-Z4wrc*<q~nd<W<F|%dgQDHw|EjNkzfwcaNWo$fg8$I|M
z^lkbj3;sSo`uv%F+`<>rEq)nG{Z{UlQ%!2$`J&LOY++}d=HltUc=O!r6qa+ZShZ@^
zE(LeN{59{wBm%bp{h?ao8c~vxSdwa$T$Bo=7>o>z40H`Fb&V`S42`V}4XlhTv<(cb
z3=EzYzCVhhAvZrIGp!Q0hABGXl|T)WARB`7(@M${i&7cN%ggmL^RkPR6AM!H@{7`E
Tzq647Dq`?-^>bP0l+XkK(dU~4

literal 0
HcmV?d00001

diff --git a/app/assets/skip-previous.png b/app/assets/skip-previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cad0cc5b7991784ea6c762f82d91395ae5a38c2
GIT binary patch
literal 524
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J{n@FFjoxLo)8Yy}s9%*-@Y^vDw2zK}ogj5!0OpYlWq(+a0*K
zG`KLXJHTt9q*nH<hlTT_#a6cy^}AfHukHExW_e})_jhUTix+8h0nwuj7Pd2c4@Y}3
z`h2u}!u(U5@y-KQd*}BV#f&{0vr1KFb3KrZ|F<BU(Iz30|1MWT+g9ch^@iv@kG=<d
zzRQ`=)SoQ%-isl8#^c{pp6wPmpge84*}YbVc^fRZ|14%%H(UDqF<1G8b7$?*FI;i<
zrzG#!%KDVV*mHqOYtCAqY3-Twxa7pi>V-E?o~mBTGt*N4tKxUL_h(r_4qK$5*P$C?
zzjUQps{SINr&UW_BT7;dOH!?pi&B9UgOP!efv$n2u8~EEp|O>LrIo3<wt<0_fq_bT
zl0Axs-29Zxv`X9>LalB!12ss3YzWRzD=AMbN@XZ7FW1Y=%Pvk%EJ)SMFG`>N&PEET
Oh{4m<&t;ucLK6V(J-6Th

literal 0
HcmV?d00001

diff --git a/app/background.js b/app/background.js
index f46cd55..4010d63 100644
--- a/app/background.js
+++ b/app/background.js
@@ -7,6 +7,7 @@ let tray;
 let settings;
 
 let shouldExit = false;
+let playing = false;
 
 //Get path to asset
 function assetPath(a) {
@@ -74,26 +75,38 @@ async function createWindow() {
         return false;
     });
 
+    //Thumbnail Toolbars
+    setThumbarButtons();
 }
 
 //Create window
 app.on('ready', async () => {
     createWindow();
 
-    //Create tray
+    //Create Tray
     tray = new Tray(assetPath("icon-taskbar.png"));
     tray.on('double-click', () => win.show());
     tray.on('click', () => win.show());
 
-    //Tray menu
+    setTray();
+});
+
+//Update tray context menu
+function setTray() {
     const contextMenu = Menu.buildFromTemplate([
         {
             label: 'Restore', 
             type: 'normal',
             click: () => win.show()
         },
+        playing ?
         {
-            label: 'Play/Pause',
+            label: 'Pause',
+            type: 'normal',
+            click: () => win.webContents.send('togglePlayback')
+        }
+        : {
+            label: 'Play',
             type: 'normal',
             click: () => win.webContents.send('togglePlayback')
         },
@@ -117,6 +130,42 @@ app.on('ready', async () => {
         }
     ]);
     tray.setContextMenu(contextMenu);
+}
+
+//Update Thumbnail Toolbars (Windows)
+function setThumbarButtons() {
+    win.setThumbarButtons([
+        {
+            tooltip: 'Skip Previous',
+            icon: assetPath('skip-previous.png'),
+            click: () => win.webContents.send('skipPrev')
+        },
+        //Play/Pause
+        playing ?
+        {
+            tooltip: 'Pause',
+            icon: assetPath('pause.png'),
+            click: () => win.webContents.send('togglePlayback')
+        } :
+        {
+            tooltip: 'Play',
+            icon: assetPath('play.png'),
+            click: () => win.webContents.send('togglePlayback')
+        },
+        //Skip next
+        {
+            tooltip: 'Skip Next',
+            icon: assetPath('skip-next.png'),
+            click: () => win.webContents.send('skipNext')
+        },
+    ]);
+}
+
+//Playing state change from UI
+ipcMain.on('playing', (event, args) => {
+    playing = args;
+    setThumbarButtons();
+    setTray();
 });
 
 //Update settings from ui
diff --git a/app/client/src/App.vue b/app/client/src/App.vue
index 78bb1df..ecb1933 100644
--- a/app/client/src/App.vue
+++ b/app/client/src/App.vue
@@ -371,8 +371,8 @@ export default {
     });
 
     // /search
-    document.addEventListener('keypress', (event) => {
-      if (event.keyCode != 47) return;
+    document.addEventListener('keypress', (e) => {
+      if (e.keyCode != 47) return;
       this.$refs.searchBar.focus();
       setTimeout(() => {
         if (this.searchQuery.startsWith('/')) this.searchQuery = this.searchQuery.substring(1);
@@ -394,6 +394,9 @@ export default {
       if (this.$root.audio) this.$root.audio.volume = this.volume;
       this.$root.volume = this.volume;
     },
+    '$root.volume'() {
+      this.volume = this.$root.volume;
+    },
     //Update position
     '$root.position'() {
       this.position = (this.$root.position / this.$root.duration()) * 100;
diff --git a/app/client/src/components/LibraryTracks.vue b/app/client/src/components/LibraryTracks.vue
index 682d213..1f69d44 100644
--- a/app/client/src/components/LibraryTracks.vue
+++ b/app/client/src/components/LibraryTracks.vue
@@ -1,19 +1,35 @@
 <template>
-<v-list :height='height' class='overflow-y-auto' v-scroll.self='scroll'>
-    <v-lazy
-        v-for='(track, index) in tracks'
-        :key='index + "t" + track.id'
-        max-height="100"
-    ><TrackTile :track='track' @click='play(index)' @remove='removedTrack(index)'>
-        </TrackTile>
-    </v-lazy>
-
-    <div class='text-center' v-if='loading'>
-        <v-progress-circular indeterminate></v-progress-circular>
+<div v-scroll.self='scroll'>
+    <div class='px-4 pt-2 d-flex' style='max-height: 50px;'>
+        <div class='text-overline px-2 pt-1'>
+            {{count}} TRACKS.
+        </div>
+        <div style="max-width: 200px;" class='d-flex mx-2'>
+            <v-select class='px-2' dense solo :items='sortTypes' @change='sort' label='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-list>
+    <v-list :height='height' class='overflow-y-auto'>
+        <v-lazy
+            v-for='(track, index) in tracks'
+            :key='index + "t" + track.id'
+            max-height="100"
+        ><TrackTile :track='track' @click='play(index)' @remove='removedTrack(index)'>
+            </TrackTile>
+        </v-lazy>
+
+        <div class='text-center' v-if='loading'>
+            <v-progress-circular indeterminate></v-progress-circular>
+        </div>
+    </v-list>
+</div>
 </template>
 
 <script>
@@ -28,7 +44,15 @@ export default {
         return {
             loading: false,
             tracks: [],
-            count: 0
+            count: 0,
+            sortTypes: [
+                'Date Added',
+                'Name (A-Z)',
+                'Artist (A-Z)',
+                'Album (A-Z)'
+            ],
+            tracksUnsorted: null,
+            isReversed: false
         }
     },
     props: {
@@ -88,8 +112,44 @@ export default {
                     this.$root.replaceQueue(this.tracks);
                 });
             }
-
+        },
+        //Sort changed
+        async sort(type) {
+            let index = this.sortTypes.indexOf(type);
+            //Preload all tracks
+            if (this.tracks.length < this.count) 
+                await this.loadAll();
+            //Copy original
+            if (!this.tracksUnsorted)
+                this.tracksUnsorted = JSON.parse(JSON.stringify(this.tracks));
             
+            //Using indexes, so it can be translated later
+            this.isReversed = false;
+            switch (index) {
+                //Default
+                case 0:
+                    this.tracks = JSON.parse(JSON.stringify(this.tracksUnsorted));
+                    break;
+                //Name
+                case 1:
+                    this.tracks = this.tracks.sort((a, b) => {return a.title.localeCompare(b.title);});
+                    break;
+                //Artist
+                case 2:
+                    this.tracks = this.tracks.sort((a, b) => {return a.artistString.localeCompare(b.artistString);});
+                    break;
+                //Album
+                case 3:
+                    this.tracks = this.tracks.sort((a, b) => {return a.album.title.localeCompare(b.album.title);});
+                    break;
+            }
+        },
+        async reverseSort() {
+            //Preload tracks if not sorted yet
+            if (this.tracks.length < this.count) 
+                await this.sort(0);
+            this.isReversed = !this.isReversed;
+            this.tracks.reverse();
         },
         removedTrack(index) {
             this.tracks.splice(index, 1);
diff --git a/app/client/src/components/Lyrics.vue b/app/client/src/components/Lyrics.vue
index 1b78969..634108d 100644
--- a/app/client/src/components/Lyrics.vue
+++ b/app/client/src/components/Lyrics.vue
@@ -5,7 +5,12 @@
     </div>
     
     <div v-if='!loading && lyrics && lyrics.lyrics.length > 0' class='text-center'>
-        <div v-for='(lyric, index) in lyrics.lyrics' :key='lyric.offset' class='my-8 mx-4'>
+        <div 
+        v-for='(lyric, index) in lyrics.lyrics' 
+        :key='lyric.offset' 
+        class='my-6 mx-4 pa-2 rounded' 
+        :class='{"grey darken-3": playingNow(index)}'
+        @click='seekTo(index)'>
             <span 
             class='my-8'
             :class='{"text-h6 font-weight-regular": !playingNow(index), "text-h5 font-weight-bold": playingNow(index)}'
@@ -27,7 +32,7 @@
     </div>
 
     <!-- Error -->
-    <div v-if='!loading && !lyrics && lyrics.text.length == 0 && lyrics.lyrics.length == 0' class='pa-4 text-center'>
+    <div v-if='!loading && (!lyrics || (lyrics.text.length == 0 && lyrics.lyrics.length == 0))' class='pa-4 text-center'>
         <span class='red--text text-h5'>
             Error loading lyrics or lyrics not found!
         </span>
@@ -94,10 +99,15 @@ export default {
             //Roughly middle
             let offset = window.innerHeight / 2 - 500;
 
+            if (!this.$refs["l"+this.currentLyricIndex]) return;
             this.$refs.content.scrollTo({
                 top: this.$refs["l"+this.currentLyricIndex][0].offsetTop + offset,
                 behavior: 'smooth'
             });
+        },
+        //Seek to lyric in song
+        seekTo(i) {
+            this.$root.seek(this.lyrics.lyrics[i].offset);
         }
     },
     mounted() {
diff --git a/app/client/src/components/TrackTile.vue b/app/client/src/components/TrackTile.vue
index d5b7e73..0c2d681 100644
--- a/app/client/src/components/TrackTile.vue
+++ b/app/client/src/components/TrackTile.vue
@@ -177,7 +177,7 @@ export default {
         addLibrary() {
             this.isLibrary = true;
             this.$root.libraryTracks.push(this.track.id);
-            this.$axios.put(`/library/tracks?id=${this.track.id}`);
+            this.$axios.put(`/library/track?id=${this.track.id}`);
         },
         goAlbum() {
             this.$emit('redirect')
@@ -196,7 +196,7 @@ export default {
         async removeLibrary() {
             this.isLibrary = false;
             this.$root.libraryTracks.splice(this.$root.libraryTracks.indexOf(this.track.id), 1);
-            await this.$axios.delete(`/library/tracks?id=${this.track.id}`);
+            await this.$axios.delete(`/library/track?id=${this.track.id}`);
             this.$emit('remove');
         },
         //Remove from playlist
diff --git a/app/client/src/main.js b/app/client/src/main.js
index 9c472a8..c2ff3a9 100644
--- a/app/client/src/main.js
+++ b/app/client/src/main.js
@@ -213,6 +213,8 @@ new Vue({
             this.configureAudio();
             this.state = 1;
             if (autoplay) this.play();
+            //MediaSession
+            this.updateMediaSession();
             
             //Loads more tracks if end of list
             this.loadSTL();
@@ -275,6 +277,7 @@ new Vue({
                     //Play
                     this.state = 2;
                     this.audio.play();
+                    this.updateMediaSession();
                     await this.savePlaybackInfo();
                     return;
                 }
@@ -282,7 +285,6 @@ new Vue({
                 this.skip(1);
                 this.savePlaybackInfo();
             });
-            this.updateMediaSession();
         },
         //Update media session with current track metadata
         updateMediaSession() {
@@ -417,6 +419,12 @@ new Vue({
                 state: this.state,
                 track: this.track 
             });
+
+            //Update in electron 
+            if (this.settings.electron) {
+                const {ipcRenderer} = window.require('electron');
+                ipcRenderer.send('playing', this.state == 2);
+            }
         }
     },
     async created() {
@@ -511,17 +519,40 @@ new Vue({
             //Don't handle keystrokes in text fields
             if (e.target.tagName == "INPUT") return;
             //K toggle playback
-            //e.keyCode === 32 
-            if (e.keyCode === 75 || e.keyCode === 107) this.$root.toggle();
+            if (e.code == "KeyK" || e.code == "Space") this.$root.toggle();
             //L +10s (from YT)
-            if (e.keyCode === 108 || e.keyCode === 76) this.$root.seek((this.position + 10000));
+            if (e.code == "KeyL") this.$root.seek((this.position + 10000));
             //J -10s (from YT)
-            if (e.keyCode === 106 || e.keyCode === 74) this.$root.seek((this.position - 10000));
+            if (e.code == "KeyJ") this.$root.seek((this.position - 10000));
+            //-> +5s (from YT)
+            if (e.code == "ArrowRight") this.$root.seek((this.position + 5000));
+            //<- -5s (from YT)
+            if (e.code == "ArrowLeft") this.$root.seek((this.position - 5000));
+            // ^ v - Volume 
+            if (e.code == 'ArrowUp' && this.audio) {
+                if ((this.audio.volume + 0.05) > 1) {
+                    this.audio.volume = 1.00;
+                    this.volume = 1.00;
+                    return;
+                }
+                this.audio.volume += 0.05;
+                this.volume = this.audio.volume;
+            }
+            if (e.code == 'ArrowDown' && this.audio) {
+                if ((this.audio.volume - 0.05) < 0) {
+                    this.audio.volume = 0.00;
+                    this.volume = 0.00;
+                    return;
+                }
+                this.audio.volume -= 0.05;
+                this.volume = this.audio.volume;
+            }
         });
     },
     watch: {
         //Watch state for integrations
         state() {
+            this.updateMediaSession();
             this.updateState();
         }
     },
diff --git a/app/package.json b/app/package.json
index f5da151..fed0935 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "freezer",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "main": "background.js",
   "scripts": {
diff --git a/app/src/deezer.js b/app/src/deezer.js
index 13a8511..d7aa065 100644
--- a/app/src/deezer.js
+++ b/app/src/deezer.js
@@ -192,7 +192,7 @@ class DeezerAPI {
                 url: `/stream/${info}?q=9`
             }
         } catch (e) {
-            logger.warning('Qualiy fallback: ' + e);
+            logger.warn('Qualiy fallback: ' + e);
             //Fallback
             //9 - FLAC
             //3 - MP3 320
diff --git a/app/src/integrations.js b/app/src/integrations.js
index b96379d..40dc1e7 100644
--- a/app/src/integrations.js
+++ b/app/src/integrations.js
@@ -80,7 +80,7 @@ class Integrations extends EventEmitter {
                 //Always accept join requests
                 this.discordRPC.subscribe('ACTIVITY_JOIN_REQUEST', (user) => {
                     this.discordRPC.sendJoinInvite(user.user).catch((e) => {
-                        logger.warning('Unable to accept Discord invite: ' + e);
+                        logger.warn('Unable to accept Discord invite: ' + e);
                     });
                 });
                 //Joined
@@ -93,7 +93,6 @@ class Integrations extends EventEmitter {
         });
         //Connect to discord
         this.discordRPC.login({clientId: CLIENTID}).catch(() => {
-            logger.info('Error connecting to Discord!');
             //Wait 5s to retry
             setTimeout(() => {
                 if (!this.discordReady)
diff --git a/package.json b/package.json
index c03f32f..3c2786a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "freezer",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "scripts": {
     "pack": "electron-builder --dir",