Added "Quit" button to the webremote screen

with a ios style popup confirmation

src/main/base/wsapi.ts

@@ -230,6 +230,9 @@ export class wsapi {
                     case "get-currentmediaitem":
                         this._win.webContents.executeJavaScript(`wsapi.getPlaybackState()`);
                         break;
+                    case "quit":
+                        electron.app.quit();
+                    break;
                 }
                 ws.send(JSON.stringify(response));
             });

src/web-remote/assets/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

src/web-remote/index.html

@@ -48,8 +48,23 @@
             </template>
             <!-- Player -->
             <transition name="wpfade">
+                <div id="popup-confirm" v-if="screen == 'popup-confirm'">
+                    <div class="overlay" @click="screen = 'player'"></div>
+                    <div class="popup">
+                      <h3>Quit Cider</h3>
+                      <p>Are you sure you want to quit Cider?</p>
+                      <div class="button-holder two-button">
+                        <a href="#" @click="quit()"> Yes</a> 
+                        <a href="#" @click="screen = 'player'">Naah</a>
+                        <div style="clear: both"></div>
+                      </div>
+                    </div>
+                  </div>
                 <div class="md-container md-container_panel player-panel" v-if="screen == 'player'">
                     <div class="player_top">
+                        <div class="quit-button-container">
+                            <button class="md-btn playback-button quit" @click="screen = 'popup-confirm'"></button>
+                        </div>
                         <div class="md-body player-artwork-container">
                             <div class="media-artwork" :class="artworkPlaying()"
                                 :style="{'--artwork': getAlbumArtUrl()}">

src/web-remote/index.js

@@ -559,6 +559,11 @@ var app = new Vue({
                 }
             }
             this.player.currentMediaItem = mediaitem
+        },
+        quit() {
+            socket.send(JSON.stringify({
+                action: "quit"
+                }))
         }
     },
 });

src/web-remote/style.css

@@ -306,6 +306,77 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     background-image: url('./assets/backward.svg');
 }
 
+.playback-button.quit {
+    background-image: url('./assets/x.svg');
+}
+
+.quit-button-container{
+    position: absolute;
+    top: 0px;
+    right: 60px;
+    width: 10px;
+    height: 10px;
+}
+
+.popup-confirm {
+    margin: 0 auto;
+    width:100%;
+    height:100%;
+    position: relative;
+  }
+  
+  .overlay {
+    position: absolute;
+    background: rgba(71, 71, 71, 0.35);
+    top: 0; left: 0; right: 0; bottom: 0
+  }
+  
+  .popup {
+    position: absolute;
+    top: 40%;
+    left: 15%;
+    width:70%;
+    margin: 0px;
+    z-index: 10px;
+    background:rgba(255,255,255,0.85);
+    border-radius: 8px;
+    text-align: center;
+    box-sizing: border-box;
+  }
+  
+  .popup h3 {
+    color: rgb(0, 0, 0);
+    margin: 20px 0 0 0;
+    padding: 0;
+  }
+  
+  .popup p {
+    color: rgb(0, 0, 0);
+    font-weight: 10px;
+    margin: 15px;
+    padding: 0;
+  }
+  
+  .popup .button-holder a {
+    color: #007AFF;
+    text-decoration: none;
+    line-height:45px;
+    font-weight: bold;
+    display: block;
+    border-top: 1px solid #BABABA;
+  }
+  
+  .popup .two-button a{
+    width: 50%;
+    float: left;
+    box-sizing: border-box
+  }
+  
+  .popup .two-button a:first-child {
+    color: #ff0000;
+    border-right: 1px solid #BABABA
+  }
+
 .playback-buttons {
     display: flex;
     align-items: center;