Merge pull request #158 from gms10ur/upcoming

Saving of hide/show user info & minor ui tweaks

src/main/base/store.ts

@@ -55,7 +55,8 @@ export class ConfigStore {
             "animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
             "animated_artwork_qualityLevel": 1,
             "bg_artwork_rotation": false,
-            "hw_acceleration": "default" // default, webgpu, disabled
+            "hw_acceleration": "default", // default, webgpu, disabled
+            "showuserinfo": true
         },
         "lyrics": {
             "enable_mxm": false,

src/renderer/index.js

@@ -257,7 +257,7 @@ const app = new Vue({
         tmpVar: [],
         notification: false,
         chrome: {
-            hideUserInfo: ipcRenderer.sendSync("is-dev"),
+            hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
             artworkReady: false,
             userinfo: {
                 "id": "",
@@ -496,6 +496,11 @@ const app = new Vue({
             this.$forceUpdate()
             if (this.isDev) {
                 this.mk.privateEnabled = true
+                // Hide UserInfo if Dev mode
+                this.chrome.hideUserInfo = true
+            } else {
+                // Get Hide User from Settings
+                this.chrome.hideUserInfo = !this.cfg.visual.showuserinfo
             }
             if (this.cfg.visual.hw_acceleration == "disabled") {
                 document.body.classList.add("no-gpu")
@@ -3242,6 +3247,15 @@ const app = new Vue({
             return 0 !== s && (h = s > 0 ? "-" : "+"),
                 `${h}${leadingZeros(n, 2)}:${leadingZeros(d, 2)}`
         },
+        toggleHideUserInfo() {
+            if(this.chrome.hideUserInfo) {
+                this.cfg.visual.showuserinfo = true
+                this.chrome.hideUserInfo = false
+            } else {
+                this.cfg.visual.showuserinfo = false
+                this.chrome.hideUserInfo = true
+            }
+        }
 
     }
 })
@@ -3506,4 +3520,4 @@ async function webGPU() {
 webGPU().then()
 
 let screenWidth = screen.width;
-let screenHeight = screen.height;
+let screenHeight = screen.height;

src/renderer/style.less

@@ -2026,9 +2026,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .md-btn {
   background: rgba(100, 100, 100, 0.5);
-  padding: 4px 12px;
+  padding: 6px 12px;
   border-radius: 4px;
-  font-size: 13px;
+  font-size: 16px;
   border: 1px solid rgb(100 100 100 / 35%);
   color: #eee;
   box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
@@ -2062,6 +2062,40 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+.md-ico-play {
+  content:url("./assets/playPng.png");
+  width: 10px;
+  height: 12px; 
+  margin-right: 1px;
+  align-self: center;
+}
+
+.md-ico-shuffle {
+  content:url("./assets/shufflePng.png");
+  width: 15px;
+  height: 13px; 
+  margin-right: 1px;
+  align-self: center;
+}
+
+.md-ico-remove {
+  content:url("./assets/feather/x-circlePng.png");
+  width: 16px;
+  height: 16px; 
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+
+.md-ico-add {
+  content:url("./assets/feather/plus.svg");
+  width: 16px;
+  height: 16px; 
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+
 .md-select {
   width: 100%;
   padding: 6px;

src/renderer/views/main.ejs

@@ -221,7 +221,7 @@
                     <transition name="wpfade">
                         <div class="usermenu-container" v-if="chrome.menuOpened">
                             <div class="usermenu-body">
-                                <button class="usermenu-item" @click="chrome.hideUserInfo = !chrome.hideUserInfo">
+                                <button class="usermenu-item" @click="toggleHideUserInfo()">
                                     <div class="row nopadding">
                                         <div class="col nopadding">
                                             Show Personal Info
@@ -315,7 +315,7 @@
                                 <template v-if="chrome.userinfo.id">
                                     <div class="fullname text-overflow-elipsis">{{ chrome.userinfo.attributes.name }}
                                     </div>
-                                    <div class="handle-text text-overflow-elipsis">@{{ chrome.userinfo.attributes.handle
+                                    <div class="handle-text text-overflow-elipsis">{{ chrome.userinfo.attributes.handle
                                         }}
                                     </div>
                                 </template>

src/renderer/views/pages/cider-playlist.ejs

@@ -62,20 +62,20 @@
                                 </div>
                             </template>
                             <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
-                                <button class="md-btn" style="min-width: 120px;"
+                                <button class="md-btn" style="min-width: 100px;"
-                                        @click="app.mk.shuffleMode = 0; play()">
+                                        @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                     Play
                                 </button>
-                                <button class="md-btn" style="min-width: 120px;"
+                                <button class="md-btn" style="min-width: 100px;"
-                                        @click="app.mk.shuffleMode = 1;play()">
+                                        @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                     Shuffle
                                 </button>
-                                <button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
+                                <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
-                                        @click="confirmButton()">
+                                        @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                     {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
                                 </button>
-                                <button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
+                                <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
-                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
+                                        @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
                                     Confirm?
                                 </button>
                                 <button class="more-btn-round" style="float:right;" @click="menu">
@@ -98,20 +98,20 @@
                     </div>
                     <div class="col-auto flex-center">
                         <div>
-                            <button class="md-btn" style="min-width: 120px;"
+                            <button class="md-btn" style="min-width: 100px;"
-                                    @click="app.mk.shuffleMode = 0; play()">
+                                    @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                 Play
                             </button>
-                            <button class="md-btn" style="min-width: 120px;"
+                            <button class="md-btn" style="min-width: 100px;"
-                                    @click="app.mk.shuffleMode = 1;play()">
+                                    @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                 Shuffle
                             </button>
-                            <button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
+                            <button class="md-btn" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
-                                    @click="confirmButton()">
+                                    @click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
                                 {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
                             </button>
-                            <button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
+                            <button class="md-btn" style="min-width: 180px;" v-if="confirm==true"
-                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
+                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img class="md-ico-remove">
                                 Confirm?
                             </button>
                         </div>
@@ -482,4 +482,4 @@
 
         }
     })
-</script>
+</script>

src/renderer/views/pages/settings.ejs

@@ -103,6 +103,14 @@
                     </select>
                 </div>
             </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Show Personal Info
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" v-model="app.cfg.visual.showuserinfo" v-on:change="toggleUserInfo" switch/>
+                </div>
+            </div>
             <div class="md-option-header">
                 <span>Lyrics</span>
             </div>
@@ -605,6 +613,9 @@
             },
             changeAudioQuality : function(){
                 app.mk.bitrate = app.cfg.audio.quality
+            },
+            toggleUserInfo : function(){
+                app.chrome.hideUserInfo = !app.cfg.visual.showuserinfo
             }
         }
     })