remove folder banner

src/assets/scss/_variables.scss

@@ -1,6 +1,5 @@
 // colors
 
-$body: #202124;
 $separator: #ffffff2f;
 $highlight-blue: #006eff;
 $darkestblue: #234ece;
@@ -26,6 +25,7 @@ $gray2: rgb(99, 99, 102);
 $gray3: rgb(72, 72, 74);
 $gray4: rgb(58, 58, 60);
 $gray5: rgb(44, 44, 46);
+$body: $gray;
 
 $red: #ff453a;
 $blue: #0a84ff;
@@ -44,7 +44,7 @@ $accent: $gray1;
 $secondary: $gray5;
 $danger: $red;
 $track-hover: $gray4;
-$context: $gray;
+$context: black;
 $playlist-card-bg: #46474C;
 
 // SVG COLORS

src/components/FolderView/FolderItem.vue

@@ -46,7 +46,7 @@ defineProps<{
   .info {
     .f-item-count {
       font-size: 0.8rem;
-      color: rgba(219, 217, 217, 0.63);
+      color: rgb(219, 217, 217);
     }
 
     .f-item-text {

src/components/RightSideBar/SearchInput.vue

@@ -15,12 +15,15 @@
       <button
         @click="tabs.switchToQueue"
         v-if="tabs.current !== tabs.tabs.queue"
+        name="switch to queue tab"
       >
         <QueueSvg />
       </button>
       <button
         @click="tabs.switchToSearch"
         v-if="tabs.current !== tabs.tabs.search"
+        name="switch to search tab"
+
       >
         <SearchSvg />
       </button>

src/config.ts

@@ -1,9 +1,12 @@
+const baseImgUrl = "http://0.0.0.0:1971"
+
 const paths = {
   api: "",
   images: {
-    thumb: "http://0.0.0.0:1971/t/",
-    artist: "http://0.0.0.0:1971/a/",
-    playlist: "http://0.0.0.0:1971/p/"
+    thumb: `${baseImgUrl}/t/`,
+    artist: `${baseImgUrl}/a/`,
+    playlist: `${baseImgUrl}/p/`,
+    raw: `${baseImgUrl}/raw/`
   },
 };
 

src/stores/pages/folder.ts

@@ -19,6 +19,7 @@ export default defineStore("FolderDirs&Tracks", {
       const { tracks, folders } = await fetchThem(path);
 
       [this.path, this.allDirs, this.allTracks] = [path, folders, tracks];
+
     },
     resetQuery() {
       this.query = "";

src/stores/queue.ts

@@ -76,20 +76,27 @@ export default defineStore("Queue", {
 
           if (this.currentindex !== this.tracklist.length - 1) {
             setTimeout(() => {
+              if (!this.playing) return;
               this.playNext();
-            }, 1000);
+            }, 5000);
           }
         });
     },
     playPause() {
       if (audio.src === "") {
         this.play(this.currentindex);
-      } else if (audio.paused) {
+      }
+
+      if (audio.paused) {
         audio.play();
-        this.playing = true;
       } else {
         audio.pause();
+      }
+
+      if (this.playing) {
         this.playing = false;
+      } else {
+        this.playing = true;
       }
     },
     playNext() {

src/stores/queue/actions.ts

@@ -1,16 +0,0 @@
-export function handlePlayPause(
-  currentIndex: number,
-  audio: HTMLAudioElement,
-  state: boolean,
-  play: (index: number) => void
-) {
-  if (audio.src === "") {
-    play(currentIndex);
-  } else if (audio.paused) {
-    audio.play();
-    state = true;
-  } else {
-    audio.pause();
-    state = false;
-  }
-}

src/views/FolderView.vue

@@ -1,17 +1,6 @@
 <template>
   <div id="f-view-parent">
     <div id="scrollable" ref="scrollable">
-      <div class="banner shadow-lg rounded">
-        <div class="text abs rounded pad-medium">
-          <h3><FolderSvg /> {{ getFolderName($route) }}</h3>
-        </div>
-        <img
-          src="@/assets/images/folderbg.webp"
-          alt=""
-          class="rounded"
-          loading="lazy"
-        />
-      </div>
       <FolderList :folders="folder.dirs" v-if="folder.dirs.length" />
       <SongList
         :tracks="folder.tracks"
@@ -27,17 +16,14 @@ import { ref } from "@vue/reactivity";
 import {
   onBeforeRouteLeave,
   onBeforeRouteUpdate,
-  RouteLocationNormalized,
 } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
-import FolderSvg from "@/assets/icons/folder.svg";
 
 import useFolderStore from "@/stores/pages/folder";
 import useQueueStore from "@/stores/queue";
 import useLoaderStore from "@/stores/loader";
-import { isSameRoute } from "@/composables/perks";
 
 const loader = useLoaderStore();
 const folder = useFolderStore();
@@ -45,11 +31,6 @@ const queue = useQueueStore();
 
 const scrollable = ref<any>(null);
 
-function getFolderName(route: RouteLocationNormalized) {
-  const path = route.params.path as string;
-  return path.split("/").pop();
-}
-
 function playFromPage(index: number) {
   queue.playFromFolder(folder.path, folder.allTracks);
   queue.play(index);
@@ -78,64 +59,10 @@ onBeforeRouteLeave(() => {
 #f-view-parent {
   position: relative;
   overflow: hidden;
-
-  .h {
-    font-size: 2rem;
-    font-weight: bold;
-  }
 }
 
 #scrollable {
-  scrollbar-color: grey transparent;
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: 1rem;
-
-  .banner {
-    position: relative;
-    height: max-content;
-    height: $banner-height;
-    pointer-events: none;
-    user-select: none;
-    width: 100%;
-    background-color: $accent;
-
-    .text {
-      bottom: 1rem;
-      left: 1rem;
-      width: max-content;
-      max-width: calc(100% - 2rem);
-      background-color: $black;
-
-      @include for-desktop-down {
-        right: 1rem;
-      }
-
-      h3 {
-        margin: $small;
-        display: grid;
-        grid-template-columns: max-content 1fr;
-        align-items: center;
-        justify-content: center;
-        gap: $small;
-      }
-    }
-
-    img {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-      object-position: bottom right;
-      transition: all 0.25s ease;
-    }
-  }
-
-  @include phone-only {
-    padding-right: 0;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
 }
 </style>