add now playing card settings

+ move left sidebar to separate component

src/components/BottomBar/BottomBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar bg-black pad-medium rounded">
+  <div class="b-bar bg-black pad-medium rounded" v-if="settings.use_right_np">
     <div class="info">
       <img
         :src="paths.images.thumb + queue.currenttrack?.image"
@@ -22,15 +22,10 @@
       </div>
     </div>
     <Progress />
-    <!-- <div class="ex-hotkeys">
-      <HotKeys />
-    </div> -->
     <div class="time">
-      <span class="current">{{ formatSeconds(queue.currentTime) }}</span>
+      <span class="current">{{ formatSeconds(queue.duration.current) }}</span>
       <HotKeys />
-      <span class="full">{{
-        formatSeconds(queue.fullTime || queue.currenttrack.length)
-      }}</span>
+      <span class="full">{{ formatSeconds(queue.currenttrack.length) }}</span>
     </div>
   </div>
 </template>
@@ -40,11 +35,13 @@ import "@/assets/scss/BottomBar/BottomBar.scss";
 import { formatSeconds, putCommas } from "@/utils";
 import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
+import useSettingsStore from "@/stores/settings";
 
 import { paths } from "@/config";
 import useQStore from "@/stores/queue";
 
 const queue = useQStore();
+const settings = useSettingsStore();
 </script>
 
 <style lang="scss">
@@ -66,14 +63,6 @@ const queue = useQStore();
     }
   }
 
-  .ex-hotkeys {
-    position: absolute;
-    width: 10rem;
-    right: 1rem;
-    top: 1rem;
-    border-radius: $small;
-  }
-
   .info {
     display: grid;
     grid-template-columns: max-content 1fr;

src/components/LeftSidebar/NP/Progress.vue

@@ -7,6 +7,11 @@
     :max="q.duration.full"
     step="0.1"
     @change="seek()"
+    :style="{
+      backgroundSize: `${
+        (q.duration.current / (q.currenttrack.length || 0)) * 100
+      }% 100%`,
+    }"
   />
 </template>
 
@@ -15,9 +20,9 @@ import useQStore from "../../../stores/queue";
 
 const q = useQStore();
 const seek = () => {
-  const elem = <HTMLFormElement>document.getElementById("progress");
+  const elem = document.getElementById("progress") as HTMLInputElement;
   const value = elem.value;
 
-  q.seek(value);
+  q.seek(value as unknown as number);
 };
 </script>

src/components/LeftSidebar/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="l-sidebar rounded">
+    <div class="withlogo">
+      <Logo />
+      <Navigation />
+    </div>
+
+    <nowPlaying v-if="settings.use_side_np" />
+    <!-- <Playlists /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import Logo from "@/components/Logo.vue";
+import Navigation from "@/components/LeftSidebar/Navigation.vue";
+import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
+// import Playlists from "./components/LeftSidebar/Playlists.vue";
+
+import useSettingsStore from "@/stores/settings";
+
+const settings = useSettingsStore();
+</script>
+
+<style lang="scss"></style>

src/components/RightSideBar/NowPlaying.vue

@@ -1,161 +0,0 @@
-<template>
-  <div class="now-playing bg-black shadow-lg">
-    <div class="art-tags">
-      <div class="duration">{{ formatSeconds(current.length) }}</div>
-      <div
-        :style="{
-          backgroundImage: `url(&quot;${current.image}&quot;)`,
-        }"
-        class="album-art image bg-black"
-      ></div>
-      <div class="t-a">
-        <p id="title" class="ellipsis">{{ current.title }}</p>
-        <div class="separator no-bg-black"></div>
-        <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
-          <span v-for="artist in putCommas(current.artists)" :key="artist">{{
-            artist
-          }}</span>
-        </div>
-        <div v-else id="artist">
-          <span>{{ current.albumartist }}</span>
-        </div>
-        <div id="type">
-          <span v-if="current.bitrate > 330"
-            >FLAC • {{ current.bitrate }} Kbps</span
-          >
-          <span v-else>MP3 | {{ current.bitrate }} Kbps</span>
-        </div>
-      </div>
-    </div>
-    <div class="progress">
-      <div class="prog">
-        <Progress />
-      </div>
-    </div>
-    <div class="c-wrapper rounded">
-      <div class="controls">
-        <div class="shuffle">
-          <div class="image"></div>
-          <div class="image"></div>
-        </div>
-        <HotKeys />
-        <div class="fav">
-          <div class="image"></div>
-          <div class="image"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref } from "@vue/reactivity";
-
-import playAudio from "@/composables/playAudio.js";
-import { formatSeconds, putCommas } from "@/utils";
-
-import HotKeys from "../shared/HotKeys.vue";
-import Progress from "../shared/Progress.vue";
-
-export default {
-  setup() {
-    const current = ref(perks.current);
-    const putCommas = perks.putCommas;
-
-    const { playNext } = playAudio;
-    const { playPrev } = playAudio;
-    const { playPause } = playAudio;
-    const isPlaying = playAudio.playing;
-
-    const seek = () => {
-      playAudio.seek(document.getElementById("progress").value);
-    };
-
-    return {
-      current,
-      putCommas,
-      playNext,
-      playPrev,
-      playPause,
-      seek,
-      isPlaying,
-      formatSeconds: perks.formatSeconds,
-    };
-  },
-  components: { Progress, HotKeys },
-};
-</script>
-
-<style lang="scss">
-.now-playing {
-  border-radius: 0.5rem;
-  height: 13.5rem;
-  padding: 0.5rem;
-  // background: rgba(255, 255, 255, 0.055);
-  display: grid;
-  grid-template-rows: 3fr 1fr;
-
-  .progress {
-    display: flex;
-
-    .prog {
-      width: 100%;
-      display: grid;
-      align-items: center;
-    }
-  }
-
-  .art-tags {
-    display: flex;
-    align-items: center;
-    position: relative;
-
-    .t-a {
-      #title {
-        margin: 0;
-        width: 20rem;
-        color: #fff;
-      }
-
-      #artist {
-        font-size: 0.8rem;
-        width: 20rem;
-        color: $highlight-blue;
-      }
-    }
-
-    .duration {
-      position: absolute;
-      bottom: $small;
-      right: 0;
-      font-size: 0.9rem;
-    }
-
-    #type {
-      font-size: $medium;
-      color: $red;
-      padding: $smaller;
-      border-radius: $smaller;
-      position: absolute;
-      bottom: 0.1rem;
-      border: solid 1px $red;
-    }
-
-    .album-art {
-      width: 7rem;
-      height: 7rem;
-      border-radius: 0.5rem;
-      margin-right: 0.5rem;
-      background-image: url("../../assets/images/null.webp");
-    }
-  }
-
-  .c-wrapper {
-    background-color: $bbb;
-    height: 3.5rem;
-    padding: 0 $small;
-    display: grid;
-    align-items: center;
-  }
-}
-</style>

src/components/RightSideBar/SearchInput.vue

@@ -4,15 +4,12 @@
       id="ginner"
       tabindex="0"
       class="bg-black rounded"
-      :class="{ 'search-focused': focused }"
     >
       <input
         id="globalsearch"
         v-model="search.query"
         placeholder="Search your library"
         type="search"
-        @focus="focused = true"
-        @blur="focused = false"
       />
       <SearchSvg />
     </div>
@@ -24,7 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import useSearchStore from "../../stores/search";
 import SearchSvg from "../../assets/icons/search.svg";
 import QueueSvg from "../../assets/icons/queue.svg";
@@ -32,7 +28,6 @@ import useTabStore from "../../stores/tabs";
 
 const search = useSearchStore();
 const tabs = useTabStore();
-const focused = ref(false);
 </script>
 
 <style lang="scss">

src/components/SettingsView/Components/Switch.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="switch rounded"
-    @click="toggled = !toggled"
-    :class="{ toggled: toggled }"
-  >
+  <div class="switch rounded" :class="{ toggled: state }">
     <div class="circle circular"></div>
   </div>
 </template>
@@ -11,7 +7,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const toggled = ref(false);
+defineProps<{
+  state: boolean;
+}>();
 </script>
 
 <style lang="scss">

src/components/SettingsView/Content.vue

@@ -4,46 +4,6 @@
       v-for="(group, index) in settingGroups[current].groups"
       :key="index"
       :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
-    /><Group
-      v-for="(group, index) in settingGroups[current].groups"
-      :key="index"
-      :group="group"
     />
   </div>
 </template>
@@ -61,9 +21,6 @@ defineProps<{
 .settingscontent {
   width: 100%;
   max-width: 40rem;
-  padding-right: 1rem;
   margin: 0 auto;
-
-
 }
 </style>

src/components/SettingsView/Group.vue

@@ -9,14 +9,20 @@
         <div class="title">
           {{ setting.title }}
         </div>
-        <div class="options"><Switch /></div>
+        <div class="options">
+          <Switch
+            v-if="setting.type == SettingType.switch"
+            @click="setting.action()"
+            :state="setting.source()"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { SettingGroup } from "@/interfaces/settings";
+import { SettingGroup, SettingType } from "@/interfaces/settings";
 import Switch from "./Components/Switch.vue";
 
 defineProps<{
@@ -30,6 +36,10 @@ defineProps<{
   gap: $small;
   margin-top: 2rem;
 
+  &:first-child {
+    margin-top: 0;
+  }
+
   h4 {
     margin: $small auto;
   }
@@ -39,6 +49,11 @@ defineProps<{
     font-size: 0.9rem;
   }
 
+  .setting {
+    display: grid;
+    gap: 1rem;
+  }
+
   .setting > * {
     display: grid;
     grid-template-columns: 1fr max-content;