From b924bef6510516c5f4691a53ee9e5de08cb6ca58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Onur=20G=C3=BCm=C3=BC=C5=9F?= <10urgumus@gmail.com>
Date: Sat, 22 Jan 2022 18:48:04 +0300
Subject: [PATCH] Added "Quit" button to the webremote screen

with a ios style popup confirmation
---
 src/main/base/wsapi.ts      |  3 ++
 src/web-remote/assets/x.svg |  1 +
 src/web-remote/index.html   | 15 ++++++++
 src/web-remote/index.js     |  5 +++
 src/web-remote/style.css    | 71 +++++++++++++++++++++++++++++++++++++
 5 files changed, 95 insertions(+)
 create mode 100644 src/web-remote/assets/x.svg

diff --git a/src/main/base/wsapi.ts b/src/main/base/wsapi.ts
index 8b114428..f7338c96 100644
--- a/src/main/base/wsapi.ts
+++ b/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));
             });
diff --git a/src/web-remote/assets/x.svg b/src/web-remote/assets/x.svg
new file mode 100644
index 00000000..f509571f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/web-remote/index.html b/src/web-remote/index.html
index 1b93e454..6f0739b2 100644
--- a/src/web-remote/index.html
+++ b/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()}">
diff --git a/src/web-remote/index.js b/src/web-remote/index.js
index 7b520f8c..9f5fd3da 100644
--- a/src/web-remote/index.js
+++ b/src/web-remote/index.js
@@ -559,6 +559,11 @@ var app = new Vue({
                 }
             }
             this.player.currentMediaItem = mediaitem
+        },
+        quit() {
+            socket.send(JSON.stringify({
+                action: "quit"
+                }))
         }
     },
 });
diff --git a/src/web-remote/style.css b/src/web-remote/style.css
index 57c83dc3..25617df0 100644
--- a/src/web-remote/style.css
+++ b/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;