client: migrate to solid dark mode

.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+__pycache__

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);

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;
+
+}

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 {

src/components/FolderView/SongList.vue

@@ -26,7 +26,13 @@
                 :style="{
                   backgroundImage: `url("${song.image}")`,
                 }"
-              ></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 {

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>

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;
 }
 

src/components/RightSideBar/UpNext.vue

@@ -37,7 +37,13 @@
               :style="{
                 backgroundImage: `url("${song.image}")`,
               }"
-            ></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;

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 {

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", () => {

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,
 };

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>