use reactive songlist element size to show song details selectively

src/App.vue

@@ -5,13 +5,18 @@
   <div id="app-grid">
     <LeftSidebar />
     <NavBar />
-    <div id="acontent" class="rounded">
+    <div
+      id="acontent"
+      class="rounded"
+      :style="{
+        marginBottom: !settings.use_alt_np ? '-1rem' : '0',
+      }"
+    >
       <router-view />
     </div>
     <NowPlayingRight />
     <SearchInput />
     <RightSideBar />
-    <!-- <Tabs /> -->
   </div>
 </template>
 
@@ -27,7 +32,6 @@ import handleShortcuts from "@/composables/useKeyboard";
 
 import Modal from "@/components/modal.vue";
 import NavBar from "@/components/nav/NavBar.vue";
-// import Tabs from "@/components/RightSideBar/Tabs.vue";
 import ContextMenu from "@/components/contextMenu.vue";
 import Notification from "@/components/Notification.vue";
 
@@ -35,6 +39,7 @@ import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import NowPlayingRight from "@/components/RightSideBar/NowPlayingRight.vue";
 import LeftSidebar from "./components/LeftSidebar/index.vue";
+import useSettingsStore from "@/stores/settings";
 
 import { readLocalStorage, writeLocalStorage } from "@/utils";
 
@@ -42,6 +47,7 @@ const queue = useQStore();
 const router = useRouter();
 const modal = useModalStore();
 const context_store = useContextStore();
+const settings = useSettingsStore();
 const app_dom = document.getElementById("app") as HTMLElement;
 
 queue.readQueue();

src/components/FolderView/SongList.vue

@@ -1,38 +1,46 @@
 <template>
-  <div class="folder">
-    <div class="table rounded" v-if="tracks.length">
-      <div class="header">
-        <div class="disc-number" v-if="disc">Disc {{ disc }}</div>
-        <div class="disc-number" v-if="$route.name === Routes.folder">
-          In this folder
-        </div>
-      </div>
-      <div class="songlist">
-        <SongItem
-          v-for="track in getTrackList()"
-          :key="track.trackid"
-          :track="track"
-          :index="track.index"
-          @updateQueue="updateQueue"
-          :isPlaying="queue.playing"
-          :isCurrent="queue.currentid == track.trackid"
-          :isHighlighted="($route.query.highlight as string) == track.hash"
-        />
+  <div
+    class="table rounded"
+    v-if="tracks.length"
+    ref="tracklistElem"
+    :class="{
+      isSmall: isSmall,
+      isMedium: isMedium,
+    }"
+  >
+    <div class="header">
+      <div class="disc-number" v-if="disc">Disc {{ disc }}</div>
+      <div class="disc-number" v-if="$route.name === Routes.folder">
+        In this folder
       </div>
     </div>
-    <div v-else-if="tracks.length === 0">
-      <div class="no-results">
-        <div class="text">No tracks here</div>
-      </div>
+    <div class="songlist">
+      <SongItem
+        v-for="track in getTrackList()"
+        :key="track.trackid"
+        :track="track"
+        :index="track.index"
+        @updateQueue="updateQueue"
+        :isPlaying="queue.playing"
+        :isCurrent="queue.currentid == track.trackid"
+        :isHighlighted="($route.query.highlight as string) == track.hash"
+      />
     </div>
     <div class="copyright" v-if="copyright && copyright()">
       {{ copyright() }}
     </div>
   </div>
+  <div v-else-if="tracks.length === 0">
+    <div class="no-results">
+      <div class="text">No tracks here</div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, onUpdated, ref } from "vue";
 import { onBeforeRouteUpdate, useRoute } from "vue-router";
+import { useElementSize } from "@vueuse/core";
 
 import SongItem from "../shared/SongItem.vue";
 
@@ -41,7 +49,7 @@ import { Track } from "@/interfaces";
 import useAlbumStore from "@/stores/pages/album";
 import useQStore from "@/stores/queue";
 import { focusElem } from "@/utils";
-import { onMounted, onUpdated, ref } from "vue";
+import { computed } from "@vue/reactivity";
 
 const queue = useQStore();
 const album = useAlbumStore();
@@ -60,6 +68,17 @@ const route = useRoute();
 const routename = route.name as string;
 const highlightid = ref(route.query.highlight as string | null);
 
+const tracklistElem = ref<HTMLElement | null>(null);
+const { width, height } = useElementSize(tracklistElem);
+
+const brk = {
+  sm: 500,
+  md: 800,
+};
+
+const isSmall = computed(() => width.value < brk.sm);
+const isMedium = computed(() => width.value > brk.sm && width.value < brk.md);
+
 function highlightTrack(t_hash: string) {
   focusElem(`track-${t_hash}`, 500, "center");
 }
@@ -229,4 +248,37 @@ function getTrackList() {
     }
   }
 }
+
+.table.isSmall {
+  .songlist-item {
+    grid-template-columns: 1.5rem 1.5fr 2rem 2.5rem;
+  }
+
+  .song-artists,
+  .song-album {
+    display: none !important;
+  }
+
+  .isSmallArtists {
+    display: unset !important;
+    font-size: small;
+    opacity: 0.7;
+  }
+}
+
+.table.isMedium {
+  .songlist-item {
+    grid-template-columns: 1.5rem 1.5fr 1fr 2rem 2.5rem;
+  }
+
+  .song-album {
+    display: none !important;
+  }
+}
+
+// .table.isLarge {
+//   .songlist-item {
+//     grid-template-columns: 1.5rem 1.5fr 1fr 1fr 2rem 2.5rem;
+//   }
+// }
 </style>

src/components/shared/ArtistName.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="ellip" v-if="artists[0] !== ''">
+    <span v-for="artist in putCommas(artists)" :key="artist">{{ artist }}</span>
+  </div>
+  <div class="ellip" v-else>
+    <span>{{ albumartist }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { putCommas } from "@/utils";
+
+defineProps<{
+  artists: string[];
+  albumartist: string | undefined;
+}>();
+</script>

src/components/shared/SongItem.vue

@@ -27,24 +27,20 @@
           :class="{ last_played: !isPlaying }"
         ></div>
       </div>
-      <div @click="emitUpdate(track)">
-        <div class="title ellip">
+      <div>
+        <div class="title ellip" @click="emitUpdate(track)">
           {{ track.title }}
         </div>
+        <div class="isSmallArtists" style="display: none;">
+          <ArtistName
+            :artists="track.artists"
+            :albumartist="track.albumartist"
+          />
+        </div>
       </div>
     </div>
     <div class="song-artists">
-      <div class="ellip" v-if="track.artists[0] !== ''">
-        <span
-          class="artist"
-          v-for="artist in putCommas(track.artists)"
-          :key="artist"
-          >{{ artist }}</span
-        >
-      </div>
-      <div class="ellip" v-else>
-        <span class="artist">{{ track.albumartist }}</span>
-      </div>
+      <ArtistName :artists="track.artists" :albumartist="track.albumartist" />
     </div>
     <router-link
       class="song-album ellip"
@@ -78,7 +74,8 @@ import OptionSvg from "@/assets/icons/more.svg";
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
 import { Track } from "@/interfaces";
-import { formatSeconds, putCommas } from "@/utils";
+import { formatSeconds } from "@/utils";
+import ArtistName from "./ArtistName.vue";
 
 const context_on = ref(false);
 const imguri = paths.images.thumb;
@@ -110,26 +107,26 @@ function showMenu(e: Event) {
   display: grid;
   grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr 2rem 2.5rem;
   align-items: center;
-  justify-items: flex-start;
+  justify-content: flex-start;
   height: 3.75rem;
   gap: 1rem;
   user-select: none;
 
-  @include for-desktop-down {
-    grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
+  // @include for-desktop-down {
+  //   grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
 
-    .song-album {
-      display: none !important;
-    }
+  //   .song-album {
+  //     display: none !important;
+  //   }
 
-    .song-duration {
-      display: none !important;
-    }
-  }
+  //   .song-duration {
+  //     display: none !important;
+  //   }
+  // }
 
-  @include tablet-portrait {
-    grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
-  }
+  // @include tablet-portrait {
+  //   grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem;
+  // }
 
   &:hover {
     background-color: $gray4;
@@ -162,7 +159,7 @@ function showMenu(e: Event) {
   }
 
   .song-duration {
-    font-size: 0.9rem;
+    font-size: small;
     text-align: left;
 
     .ellip {
@@ -236,9 +233,9 @@ function showMenu(e: Event) {
   td:nth-child(2) {
     border-radius: 0 $small $small 0;
 
-    @include phone-only {
-      border-radius: $small;
-    }
+    // @include phone-only {
+    //   border-radius: $small;
+    // }
   }
 }
 </style>