miniplayer ui fix

src/main/base/win.ts

@@ -408,7 +408,7 @@ export class Win {
 
         // Set scale
         electron.ipcMain.on("windowresize", (event, width, height, lock = false) => {          
-            this.win.setMinimumSize(300,300);
+            this.win.setMinimumSize(250,250);
             this.win.setContentSize(width, height);
             this.win.setResizable(!lock);
         });
@@ -417,6 +417,11 @@ export class Win {
         electron.ipcMain.on('setFullScreen', (event, flag) => {
             this.win.setFullScreen(flag)
         })
+        //Fullscreen
+        electron.ipcMain.on('detachDT', (event, _) => {
+            this.win.webContents.openDevTools({ mode: 'detach' });
+        })
+        
 
         function getIp() {
             let ip = false;

src/renderer/index.js

@@ -3279,9 +3279,10 @@ const app = new Vue({
         },
         miniPlayer(flag) {
             if (flag) {
-                this.tmpWidth = screen.width;
-                this.tmpHeight = screen.height;
-                ipcRenderer.send('windowresize', 350, 350, false)
+                this.tmpWidth = window.innerWidth;
+                this.tmpHeight = window.innerHeight;
+                ipcRenderer.send('setFullScreen', false);
+                ipcRenderer.send('windowresize', 250, 250, false)
                 app.appMode = 'mini';
             } else {
                 ipcRenderer.send('windowresize', this.tmpWidth, this.tmpHeight, false)
@@ -3607,3 +3608,11 @@ document.addEventListener('keydown', function(event) {
         } catch (e) { }
     }
 });
+
+document.addEventListener('keydown', function(event) {
+    if (event.ctrlKey && event.keyCode == 122) {
+        try {
+            ipcRenderer.send('detachDT','')
+        } catch (e) { }
+    }
+});

src/renderer/style.less

@@ -4713,6 +4713,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     background-color: rgba(200, 200, 200, 0.7);
   }
 
+  .player-exit {
+    z-index: 3;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    -webkit-app-region: no-drag;
+  }
+
   .playback-button--small {
     opacity: 0.7;
   }
@@ -4932,15 +4940,28 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex-direction: column;
 
     .artwork {
-      width: 50vh;
-      height: 50vh;
-      -webkit-app-region: no-drag;
+      width: 100%;
+      height: 100%;
+
+      .mediaitem-artwork{
+        border-radius: unset;
+      }
     }
 
     .controls-parents {
-      width: 50vh;
+      width: 100%;
+      position: absolute;
+      background: black;
+      bottom: 0px;
+      z-index: 3;
+      opacity: 0;
+      padding: 3%;
+      &:hover {
+        opacity : 1;
+      }
     }
     
+
     .app-playback-controls {
       -webkit-app-region: no-drag;
 
@@ -5005,7 +5026,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       @bgColor: transparent;
       //height: 16px;
       position: absolute;
-      bottom: -1.5vh;
+      bottom: -3.5vh;
       left: 0px;
       background: @bgColor;
 
@@ -5059,7 +5080,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
 
     .control-buttons {
-      margin-top: 2vh;
+      margin-top: 3.5vh;
       display: inline-flex;
       width: 100%;
       justify-content: center;

src/renderer/views/components/miniplayer.ejs

@@ -2,6 +2,14 @@
     <div class="mini-view" tabindex="0">
         <div class="background">
         </div>  
+        <div class="player-exit" title="Close" @click="app.miniPlayer(false)">
+            <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
+                 aria-role="presentation" focusable="false">
+                <path
+                        d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
+                        fill-rule="nonzero"/>
+            </svg>
+        </div>  
         <div class="col artwork-col">
             <div class="artwork"  @click="app.miniPlayer(false)">
                 <mediaitem-artwork