modify queue page to use the correct track component

src/components/FolderView/SongList.vue

@@ -122,11 +122,11 @@ function updateQueue(track: Track) {
   );
 
   switch (routename) {
-    case "FolderView":
+    case Routes.folder:
       queue.playFromFolder(props.path || "", props.tracks);
       queue.play(index);
       break;
-    case "AlbumView":
+    case Routes.album:
       const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
 
       queue.playFromAlbum(
@@ -137,7 +137,7 @@ function updateQueue(track: Track) {
       );
       queue.play(tindex);
       break;
-    case "PlaylistView":
+    case Routes.playlist:
       queue.playFromPlaylist(
         props.pname || "",
         props.playlistid || "",

src/components/RightSideBar/Queue.vue

@@ -3,20 +3,15 @@
     <div class="r-grid">
       <div class="scrollable-r rounded">
         <QueueActions />
-        <div
+        <div class="inner">
-          class="inner"
+          <TrackComponent
-          @mouseenter="setMouseOver(true)"
-          @mouseleave="setMouseOver(false)"
-        >
-          <TrackItem
             v-for="(t, index) in queue.tracklist"
             :key="index"
             :track="t"
-            @playThis="queue.play(index)"
+            :index="index + 1"
-            :isCurrent="index === queue.currentindex"
             :isPlaying="queue.playing"
-            :isQueueTrack="true"
+            :isHighlighted="false"
-            :index="index"
+            :isCurrent="index === queue.currentindex"
           />
         </div>
       </div>
@@ -25,14 +20,27 @@
 </template>
 
 <script setup lang="ts">
-import { onUpdated, ref } from "vue";
+import { computed, onUpdated, ref } from "vue";
 
 import useQStore from "@/stores/queue";
 import { focusElem } from "@/utils";
 
 import TrackItem from "../shared/TrackItem.vue";
+import SongItem from "../shared/SongItem.vue";
 import QueueActions from "./Queue/QueueActions.vue";
 
+const props = defineProps<{
+  isOnQueuePage?: boolean;
+}>();
+
+const TrackComponent = computed(() => {
+  if (props.isOnQueuePage) {
+    return SongItem;
+  }
+
+  return TrackItem;
+});
+
 const queue = useQStore();
 const mouseover = ref(false);
 

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,24 +1,14 @@
 <template>
   <div id="tracks-results">
     <div v-if="search.tracks.value.length">
-      <div v-if="use_song_item">
+      <div>
-        <SongItem
+        <TrackComponent
-          v-for="track in search.tracks.value"
+          v-for="(track, index) in search.tracks.value"
           :key="track.trackid"
           :isCurrent="queue.currentid == track.trackid"
           :isHighlighted="false"
           :isPlaying="queue.playing"
           :track="track"
-        />
-      </div>
-      <div v-else>
-        <TrackItem
-          v-for="(track, index) in search.tracks.value"
-          :key="track.trackid"
-          :track="track"
-          :isPlaying="queue.playing"
-          :isCurrent="queue.currentid == track.trackid"
-          :isSearchTrack="true"
           @PlayThis="updateQueue(index)"
         />
       </div>
@@ -34,6 +24,7 @@ import TrackItem from "@/components/shared/TrackItem.vue";
 import SongItem from "@/components/shared/SongItem.vue";
 import useQStore from "../../../stores/queue";
 import useSearchStore from "../../../stores/search";
+import { computed } from "vue";
 
 const queue = useQStore();
 const search = useSearchStore();
@@ -47,6 +38,14 @@ const props = defineProps<{
   isOnSearchPage?: boolean;
 }>();
 
+const TrackComponent = computed(() => {
+  if (props.isOnSearchPage) {
+    return SongItem;
+  }
+
+  return TrackItem;
+});
+
 let use_song_item: boolean = false;
 
 if (props.isOnSearchPage) {

src/views/QueueView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="queue-view">
-    <Queue />
+    <Queue :isOnQueuePage="true" />
   </div>
 </template>