From 41012a1bf3067eccd3a64a13f5cbefe0115fac84 Mon Sep 17 00:00:00 2001
From: Amaru8 <greenolivgameplay@gmail.com>
Date: Sat, 9 Apr 2022 12:23:44 +0200
Subject: [PATCH] Implemented fully-functional Private Session icon

---
 src/renderer/style.css                   | 13 +++++++++----
 src/renderer/style.less                  | 14 ++++++++++----
 src/renderer/views/app/chrome-bottom.ejs |  5 ++++-
 src/renderer/views/app/chrome-top.ejs    |  6 ++++--
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/renderer/style.css b/src/renderer/style.css
index cb63a23e..e8001474 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -11279,15 +11279,21 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
 }
 .app-chrome .app-chrome-item > .app-playback-controls .lossless-icon {
   background-image: url("assets/lossless.svg") !important;
-  right: 0px;
 }
 .app-chrome .app-chrome-item > .app-playback-controls .ppe-icon {
   background-image: url("assets/ppe.svg") !important;
-  right: 0px;
+  margin-left: 0.5em !important;
+  flex: 1;
 }
 .app-chrome .app-chrome-item > .app-playback-controls .private-icon {
   background-image: url("assets/private.svg") !important;
-  left: 3px;
+  margin-left: 0.5em !important;
+  flex: 1;
+}
+.chrome-icon-container {
+  display: flex;
+  position: absolute;
+  right: 0px;
 }
 .app-chrome .app-chrome-item > .app-playback-controls .audio-type {
   filter: contrast(0);
@@ -11295,7 +11301,6 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
   background-size: contain;
   height: 15px;
   width: 15px;
-  position: absolute;
   margin-bottom: 15px;
 }
 .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 2fb27103..7d50fab8 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1187,17 +1187,24 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
 
   .lossless-icon {
     background-image: url("./assets/lossless.svg") !important;
-    right: 0px;
   }
 
   .ppe-icon {
     background-image: url("./assets/ppe.svg") !important;
-    right: 0px;
+    margin-left: 0.5em !important;
+    flex: 1;
   }
 
   .private-icon {
     background-image: url("./assets/private.svg") !important;
-    left: 3px;
+    margin-left: 0.5em !important;
+    flex: 1;
+  }
+
+  .chrome-icon-container {
+    display: flex;
+    position: absolute;
+    right: 0px;
   }
 
   .audio-type {
@@ -1206,7 +1213,6 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
     background-size: contain;
     height: 15px;
     width: 15px;
-    position: absolute;
     margin-bottom: 15px;
   }
 }
diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index ec2ac3f7..fb6b37bd 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -15,7 +15,10 @@
                                  v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
                                  style="display: inline-block"></div>
                         </div>
-                        <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
+                        <div class="chrome-icon-container">
+                            <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
+                            <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
+                        </div>
                         <div class="song-artist-album">
                             <div class="song-artist-album-content"
                                  :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 7890940a..9d2ca250 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -66,6 +66,10 @@
                         <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                     </div>
                     <div class="playback-info">
+                        <div class="chrome-icon-container">
+                            <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
+                            <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
+                        </div>
                         <div class="song-name"
                              :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
                             {{ mk.nowPlayingItem["attributes"]["name"] }}
@@ -73,8 +77,6 @@
                                  v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
                                  style="display: inline-block"></div>
                         </div>
-                        <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
-                        <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
                         <div class="song-artist-album">
                             <div class="song-artist-album-content"
                                  :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"