fix indices on album page

+ fix playing on album page
+ fix songItem responsiveness on all virtual scroll pages

src/App.vue

@@ -80,13 +80,7 @@ onStartTyping((e) => {
   elem.value = "";
 });
 
-function updateContentElemSize({
-  width,
-  height,
-}: {
-  width: number;
-  height: number;
-}) {
+function updateContentElemSize({ width }: { width: number }) {
   content_width.value = width;
 }
 

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

@@ -54,16 +54,6 @@ $g-border: solid 1px $gray5;
   padding-right: calc(1rem - $small + 2px);
 }
 
-.v-scroll-page {
-  width: calc(100% + $medium) !important;
-
-  .scroller {
-    height: 100%;
-    width: 100%;
-    padding-right: $small !important;
-  }
-}
-
 // ====== MODIFIERS =======
 
 #app-grid.extendWidth {
@@ -95,3 +85,43 @@ $g-border: solid 1px $gray5;
   border-right: none;
   border-left: none;
 }
+
+.v-scroll-page {
+  width: calc(100% + $medium) !important;
+
+  .scroller {
+    height: 100%;
+    width: 100%;
+    padding-right: $small !important;
+  }
+}
+
+.v-scroll-page.isSmall {
+  // hide album and artists columns
+  .songlist-item {
+    grid-template-columns: 1.5rem 2fr 2.5rem 2.5rem;
+  }
+
+  .song-artists,
+  .song-album {
+    display: none !important;
+  }
+
+  .isSmallArtists {
+    display: unset !important;
+    font-size: small;
+    color: $white;
+    opacity: 0.67;
+  }
+}
+
+.v-scroll-page.isMedium {
+  // hide album column
+  .songlist-item {
+    grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem 2.5rem;
+  }
+
+  .song-album {
+    display: none !important;
+  }
+}

src/components/AlbumView/Header.vue

@@ -10,7 +10,7 @@
         : '',
     }"
   >
-    <div class="big-img no-scroll" :class="{ imgSmall: widthIsSmall }">
+    <div class="big-img no-scroll" :class="{ imgSmall: albumHeaderSmall }">
       <img :src="imguri.thumb.large + album.image" class="rounded" />
     </div>
     <div
@@ -44,7 +44,7 @@
           />
         </div>
       </div>
-      <div class="art" v-if="!widthIsSmall">
+      <div class="art" v-if="!albumHeaderSmall">
         <img
           :src="imguri.artist + album.artistimg"
           class="shadow-lg circular"
@@ -59,7 +59,7 @@
 import { ref } from "vue";
 
 import { paths } from "@/config";
-import { isSmall as widthIsSmall } from "@/stores/content-width";
+import { albumHeaderSmall } from "@/stores/content-width";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
 import { formatSeconds, useVisibility } from "@/utils";

src/components/shared/SongItem.vue

@@ -36,7 +36,7 @@
       <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
     </div>
     <router-link
-      v-if="!no_album"
+      v-if="!hide_album"
       class="song-album ellip"
       v-tooltip
       :to="{
@@ -65,7 +65,7 @@ import { ref } from "vue";
 
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
-import { AlbumDisc, Track } from "@/interfaces";
+import { Track } from "@/interfaces";
 import { formatSeconds } from "@/utils";
 
 import HeartSvg from "@/assets/icons/heart.svg";
@@ -83,7 +83,7 @@ const props = defineProps<{
   index: Number | String;
   isCurrent: Boolean;
   isCurrentPlaying: Boolean;
-  no_album?: Boolean;
+  hide_album?: Boolean;
 }>();
 
 const emit = defineEmits<{

src/layouts/HeaderAndVList.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- JUST A COMMENT: 64 is single item height, 24 is gap height -->
+  <!-- 64 is single item height, 24 is gap height -->
   <div class="header-list-layout">
     <div
       id="v-page-scrollable"
@@ -42,7 +42,7 @@
             style="height: 60px"
             :key="t.data.trackid"
             :track="t.data"
-            :no_album="on_album_page"
+            :hide_album="on_album_page"
             :index="
               on_album_page
                 ? t.data.track
@@ -74,11 +74,11 @@ import { useElementSize, useVirtualList } from "@vueuse/core";
 import { computed, onMounted, ref, watch } from "vue";
 
 import { Track } from "@/interfaces";
-import useQStore from "@/stores/queue";
 import useAlbumStore from "@/stores/pages/album";
+import useQStore from "@/stores/queue";
 
-import SongItem from "@/components/shared/SongItem.vue";
 import AlbumDiscBar from "@/components/AlbumView/AlbumDiscBar.vue";
+import SongItem from "@/components/shared/SongItem.vue";
 
 // EMITS & PROPS
 const emit = defineEmits<{

src/stores/content-width.ts

@@ -4,8 +4,22 @@ import { ref } from "@vue/reactivity";
 const content_width = ref(0);
 const window_width = ref(0);
 
+const brk = {
+  small: 600,
+  medium: 950,
+  album_header_small: 700,
+};
+
 const isSmall = computed(() => {
-  return content_width.value < 700;
+  return content_width.value <= brk.small;
 });
 
-export { content_width, window_width, isSmall };
+const isMedium = computed(() => {
+  return content_width.value > brk.small && content_width.value <= brk.medium;
+});
+
+const albumHeaderSmall = computed(() => {
+  return content_width.value <= brk.album_header_small;
+});
+
+export { content_width, window_width, isSmall, isMedium, albumHeaderSmall };

src/views/AlbumView/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="album-virtual-scroller v-scroll-page">
+  <div class="album-virtual-scroller v-scroll-page" :class="{ isSmall }">
     <RecycleScroller
       class="scroller"
       :items="scrollerItems"
@@ -10,29 +10,32 @@
       <component
         :is="item.component"
         v-bind="item.props"
-        @playThis="playFromAlbum(item.props.index - item.props.track.disc - 1)"
+        @playThis="
+          playFromAlbum(item.props.track.index - item.props.track.disc)
+        "
       />
     </RecycleScroller>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  onBeforeRouteLeave,
-  onBeforeRouteUpdate,
-  RouteLocationNormalized,
-} from "vue-router";
 import { computed } from "@vue/reactivity";
+import {
+onBeforeRouteLeave,
+onBeforeRouteUpdate,
+RouteLocationNormalized
+} from "vue-router";
 
 import { Track } from "@/interfaces";
 import { createTrackProps } from "@/utils";
 
-import useQueueStore from "@/stores/queue";
 import useAlbumStore from "@/stores/pages/album";
+import useQueueStore from "@/stores/queue";
 
+import AlbumDiscBar from "@/components/AlbumView/AlbumDiscBar.vue";
 import Header from "@/components/AlbumView/Header.vue";
 import SongItem from "@/components/shared/SongItem.vue";
-import AlbumDiscBar from "@/components/AlbumView/AlbumDiscBar.vue";
+import { isSmall } from "@/stores/content-width";
 
 const album = useAlbumStore();
 const queue = useQueueStore();
@@ -40,7 +43,7 @@ const queue = useQueueStore();
 interface ScrollerItem {
   id: string;
   component: typeof Header | typeof SongItem;
-  props: Record<string, unknown>;
+  props: any;
   size: number;
 }
 
@@ -54,7 +57,7 @@ class songItem {
     this.id = Math.random();
     this.props = track.is_album_disc_number
       ? { album_disc: track }
-      : createTrackProps(track);
+      : { ...createTrackProps(track), hide_album: true, index: track.track };
     this.component = track.is_album_disc_number ? AlbumDiscBar : SongItem;
   }
 }
@@ -100,8 +103,13 @@ onBeforeRouteLeave(() => {
 <style lang="scss">
 .album-virtual-scroller {
   height: 100%;
+
   .scroller {
     padding-bottom: $content-padding-bottom;
   }
+
+  .songlist-item {
+    grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem 2.5rem;
+  }
 }
 </style>

src/views/FolderView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="folder-view v-scroll-page">
+  <div class="folder-view v-scroll-page" :class="{ isSmall, isMedium }">
     <DynamicScroller
       :items="scrollerItems"
       :min-item-size="64"
@@ -32,6 +32,7 @@ import { Track } from "@/interfaces";
 import useQueueStore from "@/stores/queue";
 import useLoaderStore from "@/stores/loader";
 import useFolderStore from "@/stores/pages/folder";
+import { isSmall, isMedium } from "@/stores/content-width";
 
 import SongItem from "@/components/shared/SongItem.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
@@ -41,18 +42,18 @@ const folder = useFolderStore();
 const queue = useQueueStore();
 
 interface ScrollerItem {
-  id: string;
+  id: string | number;
   component: typeof FolderList | typeof SongItem;
   props: any;
 }
 
 class songItem {
-  id: string;
+  id: number;
   props: any;
   component = SongItem;
 
   constructor(track: Track) {
-    this.id = track.trackid;
+    this.id = Math.random();
     this.props = {
       track,
       index: track.index + 1,

src/views/PlaylistView/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="playlist-virtual-scroller v-scroll-page">
+  <div
+    class="playlist-virtual-scroller v-scroll-page"
+    :class="{ isSmall, isMedium }"
+  >
     <RecycleScroller
       class="scroller"
       :items="scrollerItems"
@@ -22,6 +25,7 @@ import { onBeforeRouteLeave } from "vue-router";
 
 import useQueueStore from "@/stores/queue";
 import usePlaylistStore from "@/stores/pages/playlist";
+import { isSmall, isMedium } from "@/stores/content-width";
 
 import Header from "@/components/PlaylistView/Header.vue";
 import SongItem from "@/components/shared/SongItem.vue";
@@ -81,7 +85,7 @@ onBeforeRouteLeave(() => {
 .playlist-virtual-scroller {
   height: 100%;
   width: 100%;
-  
+
   .scroller {
     height: 100%;
     width: 100%;