Clickable pin in miniplayer to toggle ontop behaviour.

currently an emoji span. gracefully resets windowontop on exit.

src/main/base/store.ts

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

src/renderer/index.js

@@ -3328,17 +3328,24 @@ const app = new Vue({
                 ipcRenderer.send('unmaximize');
                 ipcRenderer.send('windowmin', 250, 250)
                 ipcRenderer.send('windowresize', 300, 300, false)
-                if (this.cfg.visual.miniplayer_ontop) {
-                    ipcRenderer.send('windowontop', true)
-                }
                 app.appMode = 'mini';
             } 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

@@ -4794,6 +4794,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">

src/renderer/views/pages/settings.ejs

@@ -524,14 +524,6 @@
                     </select>
                 </div>
             </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Miniplayer always on top
-                </div>
-                <div class="md-option-segment md-option-segment_auto" >
-                    <input type="checkbox"  v-model="app.cfg.visual.miniplayer_ontop" switch/>
-                </div>
-            </div>
         </div>
             <div style="opacity: 0.5; pointer-events: none">
                 <div class="md-option-header">