fix ArtistName component width calculation in vTooltip

+ add tracklist breakpoints to virtual scroll page layout

src/components/FolderView/SongList.vue

@@ -157,25 +157,6 @@ function getTrackList() {
       background-color: $gray4;
       color: $white !important;
     }
-
-    .highlighted {
-      color: $white !important;
-      animation: blinker 1.5s ease 1s;
-    }
-
-    @keyframes blinker {
-      25% {
-        background-color: $gray4;
-      }
-
-      50% {
-        background-color: transparent;
-      }
-
-      75% {
-        background-color: $gray4;
-      }
-    }
   }
 }
 

src/components/LeftSidebar/NP/SongCard.vue

@@ -31,6 +31,7 @@
       <ArtistName
         :artists="track?.artist || []"
         :albumartist="track?.albumartist || 'Play something'"
+        :small="true"
         class="artists"
       />
     </div>
@@ -106,9 +107,8 @@ const imguri = paths.images.thumb.large;
     font-weight: 900;
     margin: 0 auto;
   }
-
+  
   .artists {
-    font-size: 0.85rem;
     opacity: 0.5;
     margin: 0 auto;
 

src/components/shared/ArtistName.vue

@@ -1,9 +1,16 @@
 <template>
-  <div v-tooltip style="width: auto">
-    <div class="ellip" v-if="artists === null || artists.length === 0">
+  <div
+    v-tooltip
+    style="width: fit-content"
+    class="ellip"
+    :style="{
+      fontSize: small ? '0.85rem' : smaller ? 'small' : '',
+    }"
+  >
+    <div v-if="artists === null || artists.length === 0">
       <span>{{ albumartist }}</span>
     </div>
-    <div class="ellip" v-else>
+    <div v-else>
       <span v-for="artist in putCommas(artists)" :key="artist">{{
         artist
       }}</span>
@@ -17,5 +24,7 @@ import { putCommas } from "@/utils";
 const props = defineProps<{
   artists: string[] | null;
   albumartist: string | undefined;
+  small?: boolean;
+  smaller?: boolean;
 }>();
 </script>

src/components/shared/TrackItem.vue

@@ -28,7 +28,11 @@
       </div>
       <hr />
       <div class="artist">
-        <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
+        <ArtistName
+          :artists="track.artist"
+          :albumartist="track.albumartist"
+          :smaller="true"
+        />
       </div>
     </div>
     <div
@@ -140,7 +144,6 @@ const playThis = (track: Track) => {
   }
 
   .artist {
-    font-size: small;
     opacity: 0.67;
     width: fit-content;
   }

src/directives/vTooltip.ts

@@ -46,11 +46,11 @@ function hideTooltip() {
   tooltip.style.visibility = "hidden";
 }
 
-function getFullWidth(el: HTMLElement) {
-  // display el as inline-block to get the correct width
+function getElFullWidth(el: HTMLElement) {
   el.style.display = "inline-block";
   el.style.visibility = "hidden";
   document.getElementsByTagName("body")[0].appendChild(el);
+
   const width = el.offsetWidth;
   el.remove();
 
@@ -58,7 +58,7 @@ function getFullWidth(el: HTMLElement) {
 }
 
 export default (el: HTMLElement) => {
-  const fullWidth = getFullWidth(el.cloneNode(true) as HTMLElement);
+  const fullWidth = getElFullWidth(el.cloneNode(true) as HTMLElement);
   if (fullWidth <= el.offsetWidth) return;
 
   if (!tooltip) {
@@ -89,13 +89,4 @@ export default (el: HTMLElement) => {
       hideTooltip();
     });
   });
-};
-
-// } as Directive;
-
-// beforeUnmount(el: HTMLElement) {
-//   // hideTooltip();
-
-//   el.removeEventListener("mouseover", () => {});
-//   el.removeEventListener("mouseout", () => {});
-// },
+};

src/layouts/HeaderAndVList.vue

@@ -6,7 +6,15 @@
       :style="{ paddingTop: !no_header ? headerHeight - 64 + 16 + 'px' : 0 }"
       @scroll="handleScroll"
     >
-      <div v-bind="wrapperProps" class="scrollable">
+      <div
+        v-bind="wrapperProps"
+        class="scrollable"
+        ref="scrollable"
+        :class="{
+          isSmall: isSmall,
+          isMedium: isMedium,
+        }"
+      >
         <div class="header rounded" style="height: 64px" v-if="!no_header">
           <div
             ref="header"
@@ -29,7 +37,9 @@
               : t.index + 1
           "
           :isCurrent="queue.currentid === t.data.trackid"
-          :isCurrentPlaying="queue.currentid === t.data.trackid && queue.playing"
+          :isCurrentPlaying="
+            queue.currentid === t.data.trackid && queue.playing
+          "
           @playThis="
             updateQueue(t.data.index !== undefined ? t.data.index : t.index)
           "
@@ -59,9 +69,23 @@ const emit = defineEmits<{
 }>();
 
 const queue = useQStore();
-const header = ref<HTMLElement>();
 const source = computed(() => props.tracks);
+
+// element refs + sizes
+const header = ref<HTMLElement>();
+const scrollable = ref<HTMLElement>();
+
 const { height: headerHeight } = useElementSize(header);
+const { width } = useElementSize(scrollable);
+
+const brk = {
+  sm: 500,
+  md: 800,
+};
+
+const isSmall = computed(() => width.value < brk.sm);
+const isMedium = computed(() => width.value > brk.sm && width.value < brk.md);
+// ---
 
 const {
   list: tracks,
@@ -96,6 +120,34 @@ function handleScroll(e: Event) {
     scrollbar-width: thin;
   }
 
+  .scrollable.isSmall {
+    .songlist-item {
+      grid-template-columns: 1.5rem 2fr 2rem 2.5rem;
+    }
+
+    .song-artists,
+    .song-album {
+      display: none !important;
+    }
+
+    .isSmallArtists {
+      display: unset !important;
+      font-size: small;
+      color: $white;
+      opacity: 0.67;
+    }
+  }
+
+  .scrollable.isMedium {
+    .songlist-item {
+      grid-template-columns: 1.5rem 2fr 1fr 2rem 2.5rem;
+    }
+
+    .song-album {
+      display: none !important;
+    }
+  }
+
   .header {
     position: relative;