refactor interfaces and references

src/assets/scss/Global/app-grid.scss

@@ -9,7 +9,7 @@ $g-border: solid 1px $gray5;
     "l-sidebar content r-sidebar"
     "bottombar bottombar bottombar";
 
-  gap: 0 1.5rem;
+  // gap: 0 1.5rem;
   height: 100%;
   border: $g-border;
   border-top: none;
@@ -24,6 +24,15 @@ $g-border: solid 1px $gray5;
   padding-right: calc($medium);
 
   overflow: hidden;
+  margin-right: $smaller !important;
+}
+
+.vue-recycle-scroller__item-wrapper {
+  overflow: visible !important;
+}
+
+.vue-recycle-scroller {
+  padding-left: 1.25rem;
 }
 
 .r-sidebar {
@@ -50,8 +59,8 @@ $g-border: solid 1px $gray5;
 }
 
 .content-page {
+  margin-left: 1.25rem;
   margin-right: -$medium;
-  padding-right: calc(1rem - $small + 2px);
 }
 
 // ====== MODIFIERS =======

src/assets/scss/Global/index.scss

@@ -11,8 +11,16 @@
   box-sizing: border-box;
 }
 
+#vue-recycle-scroller__item-wrapper {
+  overflow: visible !important;
+}
+
 html {
   cursor: default !important;
+
+  & > * {
+    overflow: visible !important;
+  }
 }
 
 html.loading,
@@ -36,7 +44,6 @@ body {
   #app {
     width: 100%;
     height: 100%;
-
   }
 
   a {

src/assets/scss/moz.scss

@@ -9,7 +9,6 @@
   // applies to playlist list page
   .content-page {
     margin-right: calc(0rem - ($medium + 4px));
-    padding-right: calc(1rem - 3px) !important;
   }
 
   // virtual scroller pages: folder, playlist, album

src/components/AlbumView/ArtistAlbums.vue

@@ -13,9 +13,6 @@
 <script setup lang="ts">
 import AlbumCard from "../shared/AlbumCard.vue";
 
-import useAlbumStore from "@/stores/pages/album";
-import { content_width } from "@/stores/content-width";
-import { computed, onBeforeMount } from "vue";
 import { AlbumInfo } from "@/interfaces";
 
 defineProps<{
@@ -29,7 +26,7 @@ defineProps<{
 <style lang="scss">
 .albums-from-artist {
   overflow: hidden;
-  padding-top: 1rem;
+  padding-top: 2rem;
 
   h3 {
     display: grid;
@@ -45,7 +42,7 @@ defineProps<{
   .cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    gap: 2rem 0
+    gap: 2rem 0;
   }
 }
 </style>

src/components/AlbumView/GenreBanner.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="genres-banner">
-    <div v-for="genre in genres" class="rounded pad-sm">{{ genre }}</div>
+    <div class="rounded pad-sm">
+      {{ album.info.genres.length ? "Genres" : "No genres" }}
+    </div>
+    <div v-for="genre in album.info.genres" class="rounded pad-sm">
+      {{ genre }}
+    </div>
   </div>
 </template>
 
@@ -8,7 +13,7 @@
 import { onMounted } from "vue";
 import useAlbumStore from "@/stores/pages/album";
 
-const genres = ["Genres", "RNB", "Alternative", "Genres", "RNB", "Alternative"];
+const album = useAlbumStore();
 
 onMounted(() => {
   // onMounted, fetch data to be used in the component below this one.

src/components/AlbumView/Header.vue

@@ -1,4 +1,9 @@
 <template>
+  <div
+    class="album-header-ambient rounded"
+    style="height: 100%; width: 100%"
+    :style="{ boxShadow: album.colors ? `0 .5rem 2rem ${album.colors[0]}` : '' }"
+  ></div>
   <div
     class="a-header rounded"
     ref="albumheaderthing"
@@ -32,7 +37,12 @@
         <div class="bottom">
           <div class="stats ellip">
             <div class="border rounded-sm pad-sm">
-              {{ album.albumartist }} • {{ album.date }} • {{ album.count }}
+              <ArtistName
+                :artists="album.albumartists.map((a) => a.name)"
+                :albumartists="''"
+                :small="true"
+              />
+              &nbsp;• {{ album.date }} • {{ album.count }}
               {{ album.count === 1 ? "Track" : "Tracks" }} •
               {{ formatSeconds(album.duration, true) }}
             </div>
@@ -49,7 +59,6 @@
       </div>
     </div>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -63,6 +72,7 @@ import { formatSeconds, useVisibility } from "@/utils";
 import { isLight } from "../../composables/colors/album";
 import { playSources } from "../../composables/enums";
 import { AlbumInfo } from "../../interfaces";
+import ArtistName from "@/components/shared/ArtistName.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
@@ -74,6 +84,9 @@ const albumheaderthing = ref<any>(null);
 const imguri = paths.images;
 const nav = useNavStore();
 
+defineEmits<{
+  (event: "playThis"): void;
+}>();
 
 /**
  * Calls the `toggleShowPlay` method which toggles the play button in the nav.
@@ -89,7 +102,12 @@ useVisibility(albumheaderthing, handleVisibilityState);
 </script>
 
 <style lang="scss">
-
+.album-header-ambient {
+  width: 20rem;
+  position: absolute;
+  z-index: -100 !important;
+  opacity: 0.25;
+}
 
 .a-header {
   display: grid;
@@ -98,7 +116,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
   padding: 1rem;
   height: $banner-height;
   background-color: $black;
-  overflow: hidden;
   align-items: flex-end;
 
   .big-img {
@@ -168,10 +185,12 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
       .stats {
         font-weight: bold;
-        font-size: 0.8rem;
         margin-bottom: 0.75rem;
+        font-size: 0.8rem;
 
         div {
+          font-size: 0.8rem;
+          display: flex;
           width: fit-content;
           cursor: text;
         }

src/components/AlbumsExplorer/AlbumList.vue

@@ -17,7 +17,7 @@
         <div class="play"></div>
         <div class="album-art image rounded"></div>
         <div class="name ellip">{{ album.title }}</div>
-        <div class="artist ellip">{{ album.albumartist }}</div>
+        <div class="artist ellip">{{ album.albumartists }}</div>
       </router-link>
     </div>
   </div>

src/components/AlbumsExplorer/TopAlbums.vue

@@ -11,7 +11,7 @@
         <div class="image rounded"></div>
         <div class="info">
           <div class="name ellip">{{ album.title }}</div>
-          <div class="artist ellip">{{ album.albumartist }}</div>
+          <div class="artist ellip">{{ album.albumartists }}</div>
           <div class="separator"></div>
           <div class="top">
             <div class="play-icon"></div>

src/components/BottomBar.vue

@@ -34,7 +34,7 @@
               </div>
               <ArtistName
                 :artists="queue.currenttrack?.artist || []"
-                :albumartist="
+                :albumartists="
                   queue.currenttrack?.albumartist || 'Welcome to alice'
                 "
                 class="artist"
@@ -63,14 +63,14 @@
 </template>
 
 <script setup lang="ts">
+import { Routes } from "@/composables/enums";
 import { paths } from "@/config";
 import { formatSeconds } from "@/utils";
-import { Routes } from "@/composables/enums";
 
-import useQStore from "@/stores/queue";
-import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
 import Progress from "@/components/LeftSidebar/NP/Progress.vue";
+import ArtistName from "@/components/shared/ArtistName.vue";
+import useQStore from "@/stores/queue";
 
 import HeartSvg from "@/assets/icons/heart.svg";
 // import PlusSvg from "@/assets/icons/plus.svg";

src/components/ContextMenu.vue

@@ -30,38 +30,9 @@ const context = useContextStore();
 const settings = useSettingsStore();
 const contextMenuRef = ref<HTMLElement>();
 
-// let clickCount = 0;
-
-// onClickOutside(
-//   contextMenuRef,
-//   (e) => {
-//     console.log(clickCount);
-
-//     if (!context.visible) {
-//       // clickCount = 0;
-//       return;
-//     }
-
-//     clickCount++;
-
-//     if (context.visible && clickCount === 1) {
-//       context.hideContextMenu();
-//       e.stopImmediatePropagation();
-//       clickCount = 0;
-//     }
-//   },
-//   {
-//     capture: false,
-//   }
-// );
-
 let watcher: any = null;
 
 context.$subscribe((mutation, state) => {
-  // let watchers = [];
-  // console.log("watchers count: " + watchers.length)
-  // let wat: any = () => {};
-
   if (state.visible) {
     setTimeout(() => {
       if (watcher !== null) {
@@ -71,7 +42,6 @@ context.$subscribe((mutation, state) => {
         contextMenuRef,
         (e) => {
           e.stopImmediatePropagation();
-          console.log("clicked outside ref");
           context.hideContextMenu();
         },
         {

src/components/Contextmenu/ContextItem.vue

@@ -38,11 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { createPopper, Instance } from "@popperjs/core";
+import { ref } from "vue";
 
-import { Option } from "@/interfaces";
 import { contextChildrenShowMode } from "@/composables/enums";
+import { Option } from "@/interfaces";
 
 const props = defineProps<{
   option: Option;
@@ -155,7 +155,7 @@ function runChildAction(action: () => void) {
 
   .children {
     transform: scale(0);
-    overflow: auto;
+    overflow: hidden;
     max-height: calc(100vh - 10rem);
   }
 

src/components/FolderView/FolderItem.vue

@@ -1,14 +1,14 @@
 <template>
   <router-link :to="{ name: Routes.folder, params: { path: folder.path } }">
     <div class="f-item">
-      <div class="icon">
-        <FolderSvg v-if="!folder.is_sym" />
-        <SymLinkSvg v-if="folder.is_sym" />
-      </div>
+      <!-- <div class="icon"> -->
+      <FolderSvg v-if="!folder.is_sym" />
+      <SymLinkSvg v-if="folder.is_sym" />
+      <!-- </div> -->
       <div class="info">
         <div class="f-item-text ellip">{{ folder.name }}</div>
-        <div class="separator no-border"></div>
-        <div class="f-item-count">{{ folder.trackcount }} tracks</div>
+        <!-- <div class="separator no-border"></div> -->
+        <!-- <div class="f-item-count">{{ folder.has_tracks }} tracks</div> -->
       </div>
     </div>
   </router-link>
@@ -31,9 +31,8 @@ defineProps<{
   height: 5rem;
   display: grid;
   grid-template-columns: max-content 1fr;
-  padding-right: 1rem;
   align-items: center;
-  background-color: $gray5;
+  background-color: $gray;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
 
@@ -41,24 +40,17 @@ defineProps<{
     height: 4rem;
   }
 
-  .icon {
-    margin: 0 0.75rem;
+  svg {
+    margin: 0 $small 0 1rem;
   }
 
-  .info {
-    .f-item-count {
-      font-size: 0.8rem;
-      color: rgb(219, 217, 217);
-    }
-
-    .f-item-text {
-      text-align: left;
-    }
+  .f-item-text {
+    margin-right: 1rem;
   }
 
   &:hover {
-    background: #0575e6;
-    background: linear-gradient(to top right, #021b79, #0575e6);
+    background: $gray3;
+    // background: linear-gradient(to top right, #021b79, #0575e6);
     background-size: 105% 105%;
     background-position-x: -$small;
 

src/components/FolderView/FolderList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items" class="rounded">
+    <div id="f-items" class="rounded lislt-mode">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -22,8 +22,24 @@ defineProps<{
 <style lang="scss">
 #f-items {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   gap: 1.5rem;
   margin-bottom: 1.75rem;
 }
+
+#f-items.list-mode {
+  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  gap: 0;
+
+  .f-item {
+    // background-color: $red;
+    height: 4rem;
+    border-radius: $small;
+    background-color: transparent;
+  }
+
+  .f-item:hover {
+    background-color: $gray !important;
+  }
+}
 </style>

src/components/FolderView/SongList.vue

@@ -28,7 +28,7 @@
         "
         @playThis="updateQueue(track.index !== undefined ? track.index : index)"
         :isCurrentPlaying="queue.playing"
-        :isCurrent="queue.currentid == track.id"
+        :isCurrent="queue.currenttrackhash == track.trackhash"
       />
     </div>
     <div class="copyright" v-if="copyright && copyright">

src/components/LeftSidebar/NP/SongCard.vue

@@ -27,7 +27,7 @@ import { paths } from "@/config";
 import { Track } from "@/interfaces";
 
 defineProps<{
-  track: Track | null;
+  track: Track | undefined;
 }>();
 
 const imguri = paths.images.thumb.large;

src/components/PlaylistView/Header.vue

@@ -44,8 +44,8 @@ import { playSources } from "@/composables/enums";
 import { formatSeconds, useVisibility } from "@/utils";
 import { paths } from "../../config";
 
-import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import { storeToRefs } from "pinia";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const modal = useModalStore();
 const nav = useNavStore();

src/components/RightSideBar/Queue.vue

@@ -8,6 +8,7 @@
     <RecycleScroller
       class="scroller"
       id="queue-scrollable"
+      style="height: 100%"
       :items="scrollerItems"
       :item-size="itemHeight"
       key-field="id"
@@ -72,8 +73,8 @@ onBeforeUnmount(() => {
   height: 100%;
   overflow: hidden;
 
-  .scroller {
-    height: 100%;
+  .vue-recycle-scroller {
+    padding: 0 !important;
   }
 }
 </style>

src/components/RightSideBar/Queue/upNext.vue

@@ -15,11 +15,8 @@
 
 <script setup lang="ts">
 import { paths } from "@/config";
-import { Track } from "@/interfaces";
-import { putCommas } from "@/utils";
 import useQueueStore from "@/stores/queue";
 
-import { showTrackContextMenu as showContext } from "@/composables/context";
 import { ref } from "vue";
 
 const context_on = ref(false);

src/components/RightSideBar/Search/Main.vue

@@ -14,9 +14,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import useSearchStore from "@/stores/search";
 import Tab from "./Tab.vue";
 import TabsWrapper from "./TabsWrapper.vue";
-import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
 defineProps<{

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -3,7 +3,7 @@
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
-        :key="`${album.albumartist}-${album.title}`"
+        :key="`${album.albumartists}-${album.title}`"
         :album="album"
       />
     </div>
@@ -13,8 +13,6 @@
 
 <script setup lang="ts">
 import useSearchStore from "../../../stores/search";
-import PCard from "../../playlists/PlaylistCard.vue";
-import LoadMore from "./LoadMore.vue";
 
 const search = useSearchStore();
 

src/components/RightSideBar/Search/TracksGrid.vue

@@ -4,9 +4,11 @@
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.id"
-        :isCurrent="queue.currentid === track.id"
+        :isCurrent="queue.currenttrackhash === track.trackhash"
         :isHighlighted="false"
-        :isCurrentPlaying="queue.currentid === track.id && queue.playing"
+        :isCurrentPlaying="
+          queue.currenttrackhash === track.trackhash && queue.playing
+        "
         :track="track"
         @playThis="updateQueue(index)"
         :index="index + 1"

src/components/nav/NavBar.vue

@@ -79,6 +79,7 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
+  padding: 0 1.25rem;
 
   .left {
     display: grid;

src/components/nav/Titles/Folder.vue

@@ -58,7 +58,7 @@ onUpdated(() => {
 
     .fname-wrapper {
       width: 100%;
-      overflow: auto;
+      overflow: hidden;
     }
 
     .fname {
@@ -82,7 +82,7 @@ onUpdated(() => {
       .paths {
         display: flex;
         gap: $smaller;
-        overflow: auto;
+        overflow: hidden;
         height: 100%;
         scrollbar-width: none;
 

src/components/shared/AlbumCard.vue

@@ -9,7 +9,7 @@
     <img class="rounded" :src="imguri + album.image" alt="" />
     <div>
       <h4 class="title ellip" v-tooltip>{{ album.title }}</h4>
-      <div class="artist ellip">{{ album.albumartist }}</div>
+      <div class="artist ellip">{{ album.albumartists[0].name }}</div>
     </div>
   </router-link>
 </template>

src/components/shared/ArtistName.vue

@@ -8,7 +8,7 @@
     }"
   >
     <div v-if="artists === null || artists.length === 0">
-      <span>{{ albumartist }}</span>
+      <span>{{ albumartists }}</span>
     </div>
     <div v-else>
       <span v-for="artist in putCommas(artists)" :key="artist">{{
@@ -23,7 +23,7 @@ import { putCommas } from "@/utils";
 
 const props = defineProps<{
   artists: string[] | null;
-  albumartist: string | undefined;
+  albumartists: string | null;
   small?: boolean;
   smaller?: boolean;
 }>();

src/components/shared/SongItem.vue

@@ -27,13 +27,13 @@
         <div class="isSmallArtists" style="display: none">
           <ArtistName
             :artists="track.artist"
-            :albumartist="track.albumartist"
+            :albumartists="track.albumartist"
           />
         </div>
       </div>
     </div>
     <div class="song-artists">
-      <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
+      <ArtistName :artists="track.artist" :albumartists="track.albumartist" />
     </div>
     <router-link
       v-if="!hide_album"

src/components/shared/TrackItem.vue

@@ -26,7 +26,7 @@
       <div class="artist">
         <ArtistName
           :artists="track.artist"
-          :albumartist="track.albumartist"
+          :albumartists="track.albumartist"
           :smaller="true"
         />
       </div>
@@ -64,7 +64,7 @@ const props = defineProps<{
 const queue = useQueueStore();
 const context_on = ref(false);
 
-function showMenu(e: Event) {
+function showMenu(e: MouseEvent) {
   showContext(e, props.track, context_on);
 }
 

src/composables/enums.ts

@@ -43,7 +43,7 @@ export const FuseTrackOptions = {
     { name: "title", weight: 1 },
     { name: "album", weight: 0.7 },
     { name: "artists", weight: 0.5 },
-    { name: "albumartist", weight: 0.25 },
+    { name: "albumartists", weight: 0.25 },
   ],
 };
 

src/composables/fetch/album.ts

@@ -67,14 +67,15 @@ const getAlbumBio = async (hash: string) => {
 };
 
 const getAlbumsFromArtist = async (
-  albumartist: string,
+  albumartists: string,
   limit: number = 2,
   exclude: string
 ) => {
+  console.log(albumartists)
   const { data } = await useAxios({
     url: albumsByArtistUrl,
     props: {
-      albumartist: albumartist,
+      albumartists: albumartists,
       limit: limit,
       exclude: exclude,
     },
@@ -88,8 +89,9 @@ const getAlbumsFromArtist = async (
 };
 
 export {
-  getAlbumData as getAlbumTracks,
-  getAlbumArtists,
-  getAlbumBio,
-  getAlbumsFromArtist,
+    getAlbumData as getAlbumTracks,
+    getAlbumArtists,
+    getAlbumBio,
+    getAlbumsFromArtist,
 };
+

src/composables/usePlayFrom.ts

@@ -33,7 +33,6 @@ export default function play(
 
       useQueue.playFromAlbum(
         a_store.info.title,
-        a_store.info.albumartist,
         a_store.info.albumhash,
         a_store.allTracks
       );

src/interfaces.ts

@@ -10,7 +10,7 @@ export interface Track extends AlbumDisc {
   title: string;
   album?: string;
   artist: string[];
-  albumartist?: string;
+  albumartist: string;
   albumhash?: string;
   folder?: string;
   filepath?: string;
@@ -29,7 +29,7 @@ export interface Track extends AlbumDisc {
 export interface Folder {
   name: string;
   path: string;
-  trackcount: number;
+  has_tracks: number;
   subdircount: number;
   is_sym: boolean;
 }
@@ -37,7 +37,11 @@ export interface Folder {
 export interface AlbumInfo {
   albumid: string;
   title: string;
-  albumartist: string;
+  albumartists: {
+    name: string;
+    hash: string;
+    image: string;
+  }[];
   count: number;
   duration: number;
   date: string;
@@ -51,6 +55,7 @@ export interface AlbumInfo {
   is_soundtrack: boolean;
   is_single: boolean;
   is_EP: boolean;
+  genres: string[];
 }
 
 export interface Artist {
@@ -92,7 +97,6 @@ export interface fromAlbum {
   type: FromOptions.album;
   name: string;
   albumhash: string;
-  albumartist: string;
 }
 export interface fromPlaylist {
   type: FromOptions.playlist;

src/layouts/HeaderAndVList.vue

@@ -50,9 +50,9 @@
                 ? t.data.index + 1
                 : t.index + 1
             "
-            :isCurrent="queue.currentid === t.data.id"
+            :isCurrent="queue.currenttrackhash === t.data.trackhash"
             :isCurrentPlaying="
-              queue.currentid === t.data.id && queue.playing
+              queue.currenttrackhash === t.data.trackhash && queue.playing
             "
             @playThis="
               updateQueue(

src/stores/pages/album.ts

@@ -68,12 +68,13 @@ export default defineStore("album", {
       this.info = album.info;
     },
     async fetchArtistAlbums() {
-      const albumartist = this.info.albumartist;
-      const cardWidth = 8 * 16;
+      const albumartists = this.info.albumartists;
+      const cardWidth = 10 * 16;
       const visible_cards = Math.floor(content_width.value / cardWidth);
+      const albumartisthashes = albumartists.map((artist) => artist.hash);
 
       this.albumArtists = await getAlbumsFromArtist(
-        albumartist,
+        albumartisthashes.join(),
         visible_cards,
         this.info.albumhash
       );

src/stores/queue.ts

@@ -7,11 +7,11 @@ import { FromOptions } from "../composables/enums";
 import updateMediaNotif from "../composables/mediaNotification";
 
 import {
-    fromAlbum,
-    fromFolder,
-    fromPlaylist,
-    fromSearch,
-    Track
+  fromAlbum,
+  fromFolder,
+  fromPlaylist,
+  fromSearch,
+  Track,
 } from "../interfaces";
 
 function shuffle(tracks: Track[]) {
@@ -45,6 +45,7 @@ export default defineStore("Queue", {
     play(index: number = 0) {
       if (this.tracklist.length === 0) return;
       this.currentindex = index;
+      console.log(this.tracklist.length);
 
       if (!this.mousover) {
         this.queueScrollFunction(this.currentindex - 1);
@@ -145,6 +146,7 @@ export default defineStore("Queue", {
       }
     },
     playFromFolder(fpath: string, tracks: Track[]) {
+      console.log("play from folder");
       this.from = <fromFolder>{
         type: FromOptions.folder,
         path: fpath,
@@ -152,17 +154,11 @@ export default defineStore("Queue", {
       };
       this.setNewQueue(tracks);
     },
-    playFromAlbum(
-      aname: string,
-      albumartist: string,
-      albumhash: string,
-      tracks: Track[]
-    ) {
+    playFromAlbum(aname: string, albumhash: string, tracks: Track[]) {
       this.from = <fromAlbum>{
         type: FromOptions.album,
         name: aname,
         albumhash: albumhash,
-        albumartist: albumartist,
       };
 
       this.setNewQueue(tracks);
@@ -292,8 +288,8 @@ export default defineStore("Queue", {
     currenttrack(): Track | undefined {
       return this.tracklist[this.currentindex];
     },
-    currentid(): string {
-      return this.currenttrack?.id || "";
+    currenttrackhash(): string {
+      return this.currenttrack?.trackhash || "";
     },
     previndex(): number {
       return this.currentindex === 0

src/utils/useCreateTrackProps.ts

@@ -5,8 +5,8 @@ export default function createTrackProps(track: Track) {
   return {
     track,
     index: track.index + 1,
-    isCurrent: queue().currentid === track.id,
+    isCurrent: queue().currenttrackhash === track.trackhash,
     isCurrentPlaying:
-      queue().currentid === track.id && queue().playing,
+      queue().currenttrackhash === track.trackhash && queue().playing,
   };
 }

src/views/AlbumView/index.vue

@@ -7,14 +7,15 @@
       key-field="id"
       v-slot="{ item }"
     >
-      <component
-        :is="item.component"
-        v-bind="item.props"
-        :style="{ maxHeight: `${item.size}px` }"
-        @playThis="
-          playFromAlbum(item.props.track.index - item.props.track.disc)
-        "
-      />
+      <div :style="{ maxHeight: `${item.size}px` }">
+        <component
+          :is="item.component"
+          v-bind="item.props"
+          @playThis="
+            playFromAlbum(item.props.track.index - item.props.track.disc)
+          "
+        />
+      </div>
     </RecycleScroller>
   </div>
 </template>
@@ -112,8 +113,9 @@ const scrollerItems = computed(() => {
 });
 
 function playFromAlbum(index: number) {
-  const { title, albumartist, albumhash } = album.info;
-  queue.playFromAlbum(title, albumartist, albumhash, album.allTracks);
+  
+  const { title, albumartists, albumhash } = album.info;
+  queue.playFromAlbum(title, albumhash, album.allTracks);
   queue.play(index);
 }
 
@@ -128,6 +130,7 @@ onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
 onBeforeRouteLeave(() => {
   setTimeout(() => {
     album.resetQuery();
+    album.resetAlbumArtists();
   }, 500);
 });
 </script>
@@ -135,7 +138,7 @@ onBeforeRouteLeave(() => {
 <style lang="scss">
 .album-virtual-scroller {
   height: 100%;
-
+  overflow: visible;
   .songlist-item {
     grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem 2.5rem;
   }

src/views/FolderView.vue

@@ -62,9 +62,9 @@ class songItem {
     this.props = {
       track,
       index: track.index + 1,
-      isCurrent: queue.currentid === track.id,
+      isCurrent: queue.currenttrackhash === track.trackhash,
       isCurrentPlaying:
-        queue.currentid === track.id && queue.playing,
+        queue.currenttrackhash === track.trackhash && queue.playing,
     };
   }
 }
@@ -111,3 +111,11 @@ onBeforeRouteLeave(() => {
   setTimeout(() => folder.resetQuery(), 500);
 });
 </script>
+
+
+<style lang="scss">
+// .folder-view {
+//   background-color: $red;
+//   padding-left: 0 !important;
+// }
+</style>

src/views/PlaylistView/index.vue

@@ -58,8 +58,8 @@ const scrollerItems = computed(() => {
         props: {
           track: track,
           index: track.index + 1,
-          isCurrent: queue.currentid === track.id,
-          isCurrentPlaying: queue.currentid === track.id && queue.playing,
+          isCurrent: queue.currenttrackhash === track.trackhash,
+          isCurrentPlaying: queue.currenttrackhash === track.trackhash && queue.playing,
         },
         size: 64,
       };

src/views/QueueView.vue

@@ -16,9 +16,9 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currentid === item.track.id"
+        :isCurrent="queue.currenttrackhash === item.track.trackhash"
         :isCurrentPlaying="
-          queue.currentid === item.track.id && queue.playing
+          queue.currenttrackhash === item.track.trackhash && queue.playing
         "
         @playThis="playFromQueue(index)"
       />
@@ -29,10 +29,10 @@
 <script setup lang="ts">
 import { computed, onMounted } from "vue";
 
+import SongItem from "@/components/shared/SongItem.vue";
+import { isMedium, isSmall } from "@/stores/content-width";
 import useQStore from "@/stores/queue";
 import { createTrackProps } from "@/utils";
-import SongItem from "@/components/shared/SongItem.vue";
-import { isSmall, isMedium } from "@/stores/content-width";
 
 const itemHeight = 64;
 const queue = useQStore();

src/views/SearchView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-view">
+  <div class="search-view content-page">
     <div class="scrollable">
       <Main :isOnSearchPage="true" />
     </div>
@@ -15,10 +15,11 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
   height: 100%;
   padding-top: 0;
   margin-right: -1rem;
+  background-color: red !important;
 
   .scrollable {
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
   }
 
   .artists-results {

src/views/SearchView/albums.vue

@@ -16,15 +16,15 @@ const search = useSearchStore();
 </script>
 
 <style lang="scss">
-// .search-albums-view.grid-page {
-//   max-height: 100%;
-//   display: grid;
-//   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-//   gap: 1.75rem 0;
+.search-albums-view.grid-page {
+  // max-height: 100%;
+  // display: grid;
+  // grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  // gap: 1.75rem 0;
 
-//   padding-bottom: 4rem;
-//   padding-right: $medium;
+  // padding-bottom: 4rem;
+  padding-right: $small;
 
-//   overflow: auto;
-// }
+  overflow: auto;
+}
 </style>

src/views/SearchView/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-view">
+  <div class="search-view content-page">
     <div class="tabs">
       <button
         v-for="page in pages"
@@ -180,9 +180,6 @@ onMounted(() => {
     gap: 1.75rem 0;
 
     padding-bottom: 4rem;
-    padding-right: 1rem;
-
-    overflow: auto;
   }
 
   button.load-more {

src/views/SearchView/tracks.vue

@@ -12,8 +12,8 @@
 
 <script setup lang="ts">
 import Layout from "@/layouts/HeaderAndVList.vue";
-import useSearchStore from "@/stores/search";
 import useQueueStore from "@/stores/queue";
+import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
 const queue = useQueueStore();

src/views/SettingsView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="settingspage">
+  <div class="settingspage content-page">
     <Content :current="0" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Content from "../components/SettingsView/Content.vue";
-</script>
+</script>z