From 108182ab0154606d01e6de3537314e59b9133c08 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Sun, 1 Jan 2023 19:21:53 +0300
Subject: [PATCH] extract queue songlist into a reusable component

~ getting ready to implement "see all" in favorite page
---
 src/components/FolderView/SongList.vue | 188 -------------------------
 src/components/shared/SongList.vue     |  36 +++++
 src/views/QueueView.vue                |  43 +-----
 3 files changed, 40 insertions(+), 227 deletions(-)
 delete mode 100644 src/components/FolderView/SongList.vue
 create mode 100644 src/components/shared/SongList.vue

diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
deleted file mode 100644
index 991a0dfc..00000000
--- a/src/components/FolderView/SongList.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-  <div
-    class="table"
-    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 class="songlist">
-      <SongItem
-        v-for="(track, index) in tracks"
-        :key="track.id"
-        :track="track"
-        :index="
-          on_album_page
-            ? track.track
-            : track.index !== undefined
-            ? track.index + 1
-            : index + 1
-        "
-        @playThis="updateQueue(track.index !== undefined ? track.index : index)"
-      />
-    </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 { computed } from "@vue/reactivity";
-import { useElementSize } from "@vueuse/core";
-import { ref } from "vue";
-
-import SongItem from "../shared/SongItem.vue";
-
-import { Track } from "@/interfaces";
-import { Routes } from "@/router/routes";
-import useQStore from "@/stores/queue";
-
-const queue = useQStore();
-
-const props = defineProps<{
-  tracks: Track[];
-  path?: string;
-  pname?: string;
-  id?: string;
-  on_album_page?: boolean;
-  disc?: string | number;
-  copyright?: string | null;
-}>();
-
-const emit = defineEmits<{
-  (e: "playFromPage", index: number): void;
-}>();
-
-const tracklistElem = ref<HTMLElement | null>(null);
-const { width } = 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 updateQueue(index: number) {
-  emit("playFromPage", index);
-}
-
-/**
- * Used to show handle track indexes.
- */
-function getTrackList() {
-  if (props.on_album_page) {
-    const tracks = props.tracks.map((track) => {
-      track.index = track.track;
-      return track;
-    });
-
-    return tracks;
-  }
-
-  return props.tracks;
-}
-</script>
-
-<style lang="scss">
-.no-results {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 1rem;
-}
-
-.copyright {
-  font-size: 0.8rem;
-  margin-top: 1rem;
-  text-align: center;
-  opacity: 0.5;
-}
-
-.table {
-  height: 100%;
-  overflow-y: hidden;
-  padding: $small 0;
-
-  .header {
-    margin: $small;
-
-    .disc-number {
-      font-size: small;
-      font-weight: bold;
-      margin: $small 1.5rem;
-      color: $gray1;
-    }
-  }
-
-  .current {
-    a {
-      color: inherit;
-    }
-    color: $red;
-  }
-
-  .current:hover {
-    * {
-      color: rgb(255, 255, 255);
-    }
-  }
-
-  .songlist {
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .contexton {
-      background-color: $gray4;
-      color: $white !important;
-    }
-  }
-}
-
-.table.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;
-  }
-}
-
-.table.isMedium {
-  .songlist-item {
-    grid-template-columns: 1.5rem 2fr 1fr 2rem 2.5rem;
-  }
-
-  .song-album {
-    display: none !important;
-  }
-}
-</style>
diff --git a/src/components/shared/SongList.vue b/src/components/shared/SongList.vue
new file mode 100644
index 00000000..21b6b3ca
--- /dev/null
+++ b/src/components/shared/SongList.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="queue-view-virtual-scroller v-scroll-page"
+    :class="{ isSmall, isMedium }"
+    style="height: 100%"
+  >
+    <RecycleScroller
+      class="scroller"
+      id="songlist-scroller"
+      style="height: 100%"
+      :items="tracks.map((track) => ({ track, id: Math.random() }))"
+      :item-size="itemHeight"
+      key-field="id"
+      v-slot="{ item, index }"
+    >
+      <SongItem
+        :track="item.track"
+        :index="index + 1"
+        @playThis="handlePlay(index)"
+      />
+    </RecycleScroller>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SongItem from "@/components/shared/SongItem.vue";
+import { isMedium, isSmall } from "@/stores/content-width";
+import { Track } from "@/interfaces";
+
+defineProps<{
+  tracks: Track[];
+  handlePlay: (index: number) => void;
+}>();
+
+const itemHeight = 64;
+</script>
\ No newline at end of file
diff --git a/src/views/QueueView.vue b/src/views/QueueView.vue
index 70ab53f5..79f27628 100644
--- a/src/views/QueueView.vue
+++ b/src/views/QueueView.vue
@@ -1,54 +1,19 @@
 <template>
-  <div
-    class="queue-view-virtual-scroller v-scroll-page"
-    :class="{ isSmall, isMedium }"
-    style="height: 100%"
-  >
-    <RecycleScroller
-      class="scroller"
-      id="queue-page-scrollable"
-      style="height: 100%"
-      :items="scrollerItems"
-      :item-size="itemHeight"
-      key-field="id"
-      v-slot="{ item, index }"
-    >
-      <SongItem
-        :track="item.track"
-        :index="index + 1"
-        @playThis="playFromQueue(index)"
-      />
-    </RecycleScroller>
-  </div>
+  <SongList :tracks="queue.tracklist" :handlePlay="playFromQueue" />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
-
-import SongItem from "@/components/shared/SongItem.vue";
-import { isMedium, isSmall } from "@/stores/content-width";
+import { onMounted } from "vue";
 import useQStore from "@/stores/queue";
-import { createTrackProps } from "@/utils";
+import SongList from "@/components/shared/SongList.vue";
 
-const itemHeight = 64;
 const queue = useQStore();
-
-const scrollerItems = computed(() => {
-  return queue.tracklist.map((track) => {
-    return {
-      track,
-      id: Math.random(),
-      props: createTrackProps(track),
-    };
-  });
-});
-
 function playFromQueue(index: number) {
   queue.play(index);
 }
 
 function scrollToCurrent() {
-  const scrollable = document.getElementById("queue-page-scrollable");
+  const scrollable = document.getElementById("songlist-scroller");
   const itemHeight = 64;
   const top = (queue.currentindex - 1) * itemHeight;