Merge pull request #205 from calumcl/mini-player-ontop

settings toggle for miniplayer to appear on top of windows.

src/main/base/store.ts

@@ -60,7 +60,8 @@ export class ConfigStore {
             "animated_artwork_qualityLevel": 1,
             "bg_artwork_rotation": false,
             "hw_acceleration": "default", // default, webgpu, disabled
-            "showuserinfo": true
+            "showuserinfo": true,
+            "miniplayer_top_toggle": true
         },
         "lyrics": {
             "enable_mxm": false,

src/main/base/win.ts

@@ -430,6 +430,10 @@ export class Win {
             this.win.setMinimumSize(width,height);
         })
 
+        electron.ipcMain.on("windowontop", (event, ontop) => {
+            this.win.setAlwaysOnTop(ontop);
+        });
+
         // Set scale
         electron.ipcMain.on("windowresize", (event, width, height, lock = false) => {          
             this.win.setContentSize(width, height);

src/renderer/index.js

@@ -3357,9 +3357,20 @@ const app = new Vue({
             } else {
                 ipcRenderer.send('windowmin', 844, 410)
                 ipcRenderer.send('windowresize', this.tmpWidth, this.tmpHeight, false)
+                ipcRenderer.send('windowontop', false)
+                this.cfg.visual.miniplayer_top_toggle = true;
                 app.appMode = 'player';
             }
         },
+        pinMiniPlayer() {
+            if (this.cfg.visual.miniplayer_top_toggle) {
+                ipcRenderer.send('windowontop', true)
+                this.cfg.visual.miniplayer_top_toggle = false
+            } else {
+                ipcRenderer.send('windowontop', false)
+                this.cfg.visual.miniplayer_top_toggle = true;
+            }
+        },
         formatTimezoneOffset: (e = new Date) => {
             let leadingZeros = (e, s = 2) => {
                 let n = "" + e;

src/renderer/style.less

@@ -4799,6 +4799,24 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     -webkit-app-region: no-drag;
   }
 
+  .player-pin {
+    z-index: 3;
+    position: absolute;
+    min-width: 20px; 
+    min-height: 20px;
+    top: 5px;
+    right: 30px;
+    -webkit-app-region: no-drag;
+  }
+  
+  #mini-pin{
+    display: none;
+  }
+
+  .player-pin:hover #mini-pin {
+    display: block;
+  }
+
   .playback-button--small {
     opacity: 0.7;
   }

src/renderer/views/components/miniplayer.ejs

@@ -1,7 +1,10 @@
 <script type="text/x-template" id="mini-view">
     <div class="mini-view" tabindex="0">
         <div class="background">
-        </div>  
+        </div>
+        <div class="player-pin" title="Pin to Top" @click="app.pinMiniPlayer()">
+            <span id="mini-pin">📌</span>
+        </div>
         <div class="player-exit" title="Close" @click="app.miniPlayer(false)">
             <svg fill="#323232e3" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
                  aria-role="presentation" focusable="false">