From 0340b64b0453391e932ebe647ec0a80cfee855fa Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 5 Jan 2022 05:45:55 +0300
Subject: [PATCH] client: migrate to solid dark mode

---
 .gitignore                                    |   2 +
 .../app/__pycache__/__init__.cpython-38.pyc   | Bin 618 -> 0 bytes
 src/assets/css/_variables.scss                |   2 +-
 src/assets/css/global.scss                    |  33 +++++++--
 src/assets/icons/playing.gif                  | Bin 0 -> 5613 bytes
 src/assets/icons/playing.webp                 | Bin 0 -> 2076 bytes
 src/components/FolderView/FolderList.vue      |  17 +----
 src/components/FolderView/SongList.vue        |  39 ++++++-----
 src/components/LeftSidebar/PinnedStuff.vue    |  65 ++----------------
 .../RightSideBar/Recommendation.vue           |   4 +-
 src/components/RightSideBar/UpNext.vue        |  18 ++++-
 src/components/Search.vue                     |   2 +-
 src/composables/playAudio.js                  |   9 +--
 src/composables/state.js                      |   3 +
 src/views/FolderView.vue                      |   7 +-
 15 files changed, 89 insertions(+), 112 deletions(-)
 delete mode 100644 server/app/__pycache__/__init__.cpython-38.pyc
 create mode 100644 src/assets/icons/playing.gif
 create mode 100644 src/assets/icons/playing.webp

diff --git a/.gitignore b/.gitignore
index 403adbc..c680394 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+__pycache__
\ No newline at end of file
diff --git a/server/app/__pycache__/__init__.cpython-38.pyc b/server/app/__pycache__/__init__.cpython-38.pyc
deleted file mode 100644
index edfc3453a803b9f7b3b98c9c9172162d086ead76..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 618
zcmYjPy>8nu5ay30(}IJ#$x~=(w6{eN*L9ZwDG)nDwGfg>yR=0~r6k8KoXJ`94qfvC
zeHgBt@(LM(9#yo+0eAR#Ki?gXygoV#5y;Q+uhd|Ke!Ig<p>Q|{ZO*_5ByfQ=PB3<u
z6hza60;a;dLy0GS;ctj}E4>3s0vW6aA`pXnm(AuV8a@ICim>%R6=|~p;7vbY&2#7d
zCj@{8It6Xc!L+Ew2YicKvPTDC+M_jHdjbn0=sf{uPxytegWJEc!5*(!-xXqe1YOys
zr9y6h3`KU@d@EEdBVxn(Y<e|Y@Qc}(gngVWCLbpA*&{5#jYrd3J>eKo*qMUYMlRJZ
z8X7m7Wt^9(mYf^68XM$Qxl}7VTAE68oz}G~R~DIp3mzM}QcWuj&x%ggMwP84Sq=T6
zMcwB-AoChhpWek^D=p*vMitv#oL54|x@%Ovd$aBS!z|4=vJ^2C$DFHDwVa>U-))#1
znYNOH-v_eh7!1M;GZJ8e$#dY3@R*nr@VfbRs!Glm?jeNCy47XG5`XEQq`zVk_L%3D
rY5Gg{g~t68Gj<fzbY(yF3*%Z^_Fh+_E99A5WaA1(ctqJNh6DTu#3GWm

diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index c8a9f62..60f7e4b 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -1,6 +1,6 @@
 // colors
 
-$card-dark: #131313b2;
+$card-dark: #000203;
 $red: #df4646;
 $blue: rgb(5, 80, 150);
 $green: rgb(67, 148, 67);
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index b575a66..37a5a0b 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -20,7 +20,6 @@ body {
 .heading {
   font-size: small;
   font-weight: bold;
-  color: #ffffffb2;
   display: flex;
   align-items: center;
 }
@@ -84,7 +83,7 @@ a {
   padding-top: 0.5rem;
   margin: 0.5rem 0 0.5rem 0.5rem;
   border-radius: 0.5rem;
-  background-color: #131313b2;
+  background-color: $card-dark;
 }
 
 .collapsed .l-sidebar {
@@ -129,11 +128,11 @@ a {
   margin-bottom: 0.5em;
 }
 
-@media (max-width: 70em) {
-  .r-sidebar {
-    display: none;
-  }
-}
+// @media (max-width: 70em) {
+//   .r-sidebar {
+//     display: none;
+//   }
+// }
 
 .image {
   background-position: center;
@@ -220,3 +219,23 @@ a {
     background-position: 0% 38%;
   }
 }
+
+.now-playing-track {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  background-color: #fff;
+  margin-top: 0rem;
+  background-size: 60%;
+}
+
+.active {
+  background-image: url(../../assets/icons/playing.gif);
+  transition: all 0.3s ease-in-out;
+}
+
+.not_active {
+  background-image: url(../../assets/icons/playing.webp);
+  transition: all 0.3s ease-in-out;
+
+}
\ No newline at end of file
diff --git a/src/assets/icons/playing.gif b/src/assets/icons/playing.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e49caf86d717eb8f1f4b1b9ec39f020bf9556d4d
GIT binary patch
literal 5613
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
CF%X>q

literal 0
HcmV?d00001

diff --git a/src/assets/icons/playing.webp b/src/assets/icons/playing.webp
new file mode 100644
index 0000000000000000000000000000000000000000..9d1923eff163dcfa7cdf1be9762bb8008b01621d
GIT binary patch
literal 2076
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

literal 0
HcmV?d00001

diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index 106f644..e718ec2 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="f-container rounded" :class="{ no_f: !folders.length }">
-    <p v-if="folders.length">folders in this directory</p>
     <div id="f-items" v-if="folders.length">
       <router-link
         :to="{ name: 'FolderView', params: { path: folder.path } }"
@@ -13,9 +12,6 @@
         </div>
       </router-link>
     </div>
-    <div v-else>
-      <p>No folders in this directory</p>
-    </div>
   </div>
 </template>
 
@@ -27,26 +23,19 @@ export default {
 
 <style lang="scss">
 .f-container {
-  margin-bottom: 1rem;
-  background: rgba(31, 30, 30, 0.521);
+  margin-top: $small;
   padding: 1rem;
 }
 
 .no_f {
-  background-image: url(../../assets/icons/info.svg);
-  background-repeat: no-repeat;
-  background-position: 1rem;
-  background-size: 2rem 2rem;
-  padding-left: 4rem;
+  display: none;
 }
 
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   grid-gap: 1rem;
-  border-top: 1px solid var(--separator);
   gap: 1rem;
-  padding-top: 1rem;
 }
 
 .f-container p {
@@ -65,7 +54,7 @@ export default {
   background-repeat: no-repeat;
   background-position: 1rem;
   background-size: 10% 100%;
-  background-color: rgba(80, 80, 80, 0.247);
+  background-color: rgb(22, 36, 85);
   transition: all 0.2s ease;
 
   .f-item-count {
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 880521d..4b72b24 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -26,7 +26,13 @@
                 :style="{
                   backgroundImage: `url(&quot;${song.image}&quot;)`,
                 }"
-              ></div>
+              >
+                <div
+                  class="now-playing-track image"
+                  v-if="current._id.$oid == song._id.$oid"
+                  :class="{ active: is_playing, not_active: !is_playing }"
+                ></div>
+              </div>
               <div>
                 <span class="ellip">{{ song.title }}</span>
               </div>
@@ -129,7 +135,7 @@ export default {
 
     const playAudio = audio.playAudio;
     const current = ref(perks.current);
-    const search_query = ref(state.search_query)
+    const search_query = ref(state.search_query);
 
     const searchSongs = computed(() => {
       return song_list.value.filter((song) => {
@@ -149,6 +155,7 @@ export default {
       putCommas,
       current,
       search_query,
+      is_playing: state.is_playing,
     };
   },
 };
@@ -165,15 +172,20 @@ export default {
 .table {
   width: 100%;
   height: 100%;
-  background-color: rgba(56, 56, 56, 0.363);
   overflow-y: auto;
 
   &::-webkit-scrollbar {
     display: none;
   }
 
-  .current {
-    color: rgb(255, 238, 0);
+  .current * {
+    color: rgb(0, 110, 255);
+  }
+
+  .current:hover {
+    * {
+      color: rgb(255, 255, 255);
+    }
   }
 }
 
@@ -182,6 +194,8 @@ export default {
   height: 3rem;
   margin-right: 1rem;
   background-image: url(../../assets/icons/file.svg);
+  display: grid;
+  place-items: center;
 }
 
 .folder .table .flex {
@@ -196,18 +210,8 @@ export default {
 }
 td,
 th {
-  padding: 8px;
+  padding: $small;
   text-align: left;
-  outline: none;
-  border: none;
-}
-
-th {
-  height: 3rem;
-}
-
-tr:nth-child(even) {
-  background-color: rgba(29, 29, 29, 0.767);
 }
 
 th {
@@ -216,8 +220,7 @@ th {
 }
 
 td .artist {
-  font-weight: lighter;
-  margin-right: 0.5rem;
+  margin-right: 0.2rem;
 }
 
 .folder .table table {
diff --git a/src/components/LeftSidebar/PinnedStuff.vue b/src/components/LeftSidebar/PinnedStuff.vue
index 93e9a4f..fe63392 100644
--- a/src/components/LeftSidebar/PinnedStuff.vue
+++ b/src/components/LeftSidebar/PinnedStuff.vue
@@ -62,17 +62,7 @@ export default {
 
 <style lang="scss">
 #pinned-container {
-  background: #000000; /* fallback for old browsers */
-  background: -webkit-linear-gradient(
-    to bottom,
-    #434343,
-    #000000
-  ); /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(
-    to bottom,
-    #434343,
-    #000000
-  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background: #6e2c00;
 
   border-top: none;
   margin: $small;
@@ -90,7 +80,7 @@ export default {
 #pinned-container .nav-button {
   border-radius: $small;
   color: rgba(255, 255, 255, 0.671);
-  // margin-top: $small;
+  padding-left: $small;
 }
 
 #pinned-container .nav-button:hover {
@@ -98,38 +88,8 @@ export default {
 }
 
 #pinned-container .nav-button .nav-icon {
-  height: 20px;
-  width: 20px;
-}
-
-#pinned-container #album-button #album-icon {
-  background-image: url(../../assets/icons/album.svg);
-}
-
-#pinned-container #home-button #text {
-  margin-top: 5px;
-}
-
-#pinned-container #artists-button #artists-icon {
-  background-image: url(../../assets/icons/artist.svg);
-}
-
-#pinned-container #playlists-button #playlists-icon {
-  background-image: url(../../assets/icons/playlist.svg);
-}
-
-#pinned-container #mixes-button #mixes-icon {
-  background-image: url(../../assets/icons/mix.svg);
-}
-
-#pinned-container #folders-button #folders-icon {
-  background-image: url(../../assets/icons/folder.svg);
-}
-
-#pinned-container #pinned-button #pinned-icon {
-  background-image: url(../../assets/icons/pin.svg);
-  width: 20px;
-  height: 20px;
+  height: 1.3rem;
+  width: 1.3rem;
 }
 
 #pinned-container #pinned-button #text {
@@ -143,21 +103,4 @@ export default {
   background-color: transparent;
 }
 
-#pinned-container #folders-button #text {
-  margin-top: 5px;
-}
-
-#pinned-container hr {
-  color: transparent;
-}
-
-#pinned-container .separator {
-  color: var(--separator);
-}
-
-#pinned-container {
-  transition-timing-function: linear;
-  transition-property: width;
-  transition-duration: 20s;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/RightSideBar/Recommendation.vue b/src/components/RightSideBar/Recommendation.vue
index 88d6207..ee5ae47 100644
--- a/src/components/RightSideBar/Recommendation.vue
+++ b/src/components/RightSideBar/Recommendation.vue
@@ -35,10 +35,10 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .r-tracks {
   margin-top: 0.5rem;
-  background-color: #131313b2;
+  background-color: $card-dark;
   padding: 0.5rem;
 }
 
diff --git a/src/components/RightSideBar/UpNext.vue b/src/components/RightSideBar/UpNext.vue
index 90ceabc..8cd24f1 100644
--- a/src/components/RightSideBar/UpNext.vue
+++ b/src/components/RightSideBar/UpNext.vue
@@ -37,7 +37,13 @@
               :style="{
                 backgroundImage: `url(&quot;${song.image}&quot;)`,
               }"
-            ></div>
+            >
+              <div
+                class="now-playing-track image"
+                v-if="current._id.$oid == song._id.$oid"
+                :class="{ active: is_playing, not_active: !is_playing }"
+              ></div>
+            </div>
             <div class="tags">
               <p class="title ellip">{{ song.title }}</p>
               <hr />
@@ -58,6 +64,7 @@
 import { ref, toRefs } from "@vue/reactivity";
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
+import state from "@/composables/state.js";
 import { watch } from "@vue/runtime-core";
 
 export default {
@@ -94,6 +101,7 @@ export default {
     return {
       collapse,
       is_expanded,
+      is_playing: state.is_playing,
       playNext,
       playThis,
       putCommas,
@@ -128,7 +136,7 @@ export default {
 .up-next {
   padding: 0.5rem;
   margin-top: 1rem;
-  background-color: #131313b2;
+  background-color: $card-dark;
   border-radius: 0.5rem;
 }
 
@@ -190,7 +198,7 @@ export default {
 
 .up-next .all-items .scrollable {
   overflow-y: auto;
-  background-color: rgba(2, 6, 14, 0.425);
+  width: 100%;
   border-radius: 0.5rem;
 }
 
@@ -216,6 +224,10 @@ export default {
 }
 
 .up-next .all-items .album-art {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   width: 3rem;
   height: 3rem;
   margin: 0 0.5rem 0 0;
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 9a70315..ec218c7 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -261,7 +261,7 @@ export default {
   border-radius: $small;
   margin: 0.5rem 0 0 0;
   padding: 1rem $small 0 0;
-  background-color: #000000;
+  background-color: $card-dark;
   overflow: hidden;
 
   .item {
diff --git a/src/composables/playAudio.js b/src/composables/playAudio.js
index 1a811d4..c9efb3e 100644
--- a/src/composables/playAudio.js
+++ b/src/composables/playAudio.js
@@ -2,10 +2,11 @@ import { ref } from "@vue/reactivity";
 
 import perks from "./perks";
 import media from "./mediaNotification.js";
+import state from "./state.js";
 
 const audio = ref(new Audio()).value;
 const pos = ref(0);
-const playing = ref(false);
+const playing = ref(state.is_playing);
 
 const url = "http://127.0.0.1:8901/";
 
@@ -19,7 +20,7 @@ const playAudio = (path) => {
   })
     .then(() => {
       audio.play();
-      playing.value = true;
+      state.is_playing.value = true;
 
       audio.ontimeupdate = () => {
         pos.value = (audio.currentTime / audio.duration) * 1000;
@@ -57,11 +58,11 @@ function playPause() {
 }
 
 audio.addEventListener("play", () => {
-  playing.value = true;
+  state.is_playing.value = true;
 });
 
 audio.addEventListener("pause", () => {
-  playing.value = false;
+  state.is_playing.value = false;
 });
 
 audio.addEventListener("ended", () => {
diff --git a/src/composables/state.js b/src/composables/state.js
index a40b1b8..2677e87 100644
--- a/src/composables/state.js
+++ b/src/composables/state.js
@@ -32,6 +32,8 @@ const filters = ref([]);
 const magic_flag = ref(false);
 const loading = ref(false);
 
+const is_playing = ref(false);
+
 
 export default {
   search_query,
@@ -41,4 +43,5 @@ export default {
   filters,
   magic_flag,
   loading,
+  is_playing,
 };
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 2d4141c..fd68a34 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -5,6 +5,7 @@
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
+    <div class="separator"></div>
       <SongList :songs="songs" />
     </div>
   </div>
@@ -78,7 +79,7 @@ export default {
 #f-view-parent {
   position: relative;
   height: 100%;
-  background-color: #131313b2;
+  background-color: $card-dark;
   padding-left: $small;
   padding-right: $small;
   padding-top: 5rem;
@@ -96,5 +97,9 @@ export default {
   overflow-y: scroll;
   height: calc(100% - $small);
   padding-right: $small;
+
+  .separator {
+    margin: 0 1rem 0 1rem;
+  }
 }
 </style>
\ No newline at end of file