add experimental remove from queue action

+ show albumartist on TrackItem if artists == ""
+ add action to reset playlist page artists to prevent content flashes
+ remove use of defaultTrackItem

src/components/FolderView/SongList.vue

@@ -19,7 +19,7 @@
           @updateQueue="updateQueue"
           :isPlaying="queue.playing"
           :isCurrent="queue.currentid == track.trackid"
-          :isHighlighted="($route.query.highlight as string) == track.uniq_hash"
+          :isHighlighted="($route.query.highlight as string) == track.hash"
         />
       </div>
     </div>
@@ -39,12 +39,12 @@ import { onBeforeRouteUpdate, useRoute } from "vue-router";
 
 import SongItem from "../shared/SongItem.vue";
 
+import { Routes } from "@/composables/enums";
+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 { Track } from "@/interfaces";
-import useQStore from "@/stores/queue";
-import useAlbumStore from "@/stores/pages/album";
-import { Routes } from "@/composables/enums";
 
 const queue = useQStore();
 const album = useAlbumStore();

src/components/LeftSidebar/NP/SongCard.vue

@@ -6,13 +6,13 @@
           :to="{
             name: 'AlbumView',
             params: {
-              hash: track.albumhash,
+              hash: track?.albumhash ? track.albumhash : ' ',
             },
           }"
         >
           <div class="art">
             <img
-              :src="imguri + track.image"
+              :src="imguri + track?.image"
               alt=""
               class="l-image rounded force-lm"
               loading="lazy"
@@ -20,23 +20,27 @@
           </div>
         </router-link>
 
-        <div id="bitrate" v-if="track.bitrate">
+        <div id="bitrate" v-if="track?.bitrate">
           <span v-if="track.bitrate > 1500">MASTER</span>
           <span v-else-if="track.bitrate > 330">FLAC</span>
           <span v-else>MP3</span>
           • {{ track.bitrate }}
         </div>
-        <div class="title ellip">{{ props.track.title }}</div>
+        <div class="title ellip">{{ props.track?.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="props.track.artists[0] !== ''">
-          <span
-            v-for="artist in putCommas(props.track.artists)"
-            :key="artist"
-            >{{ artist }}</span
-          >
+        <div
+          class="artists ellip"
+          v-if="track?.artists && track?.artists[0] !== ''"
+        >
+          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
+        <div class="artists" v-else-if="track?.artists">
+          <span>{{ track.albumartist }}</span>
         </div>
         <div class="artists" v-else>
-          <span>{{ props.track.albumartist }}</span>
+          <span>Meh</span>
         </div>
       </div>
     </div>
@@ -50,6 +54,6 @@ import { Track } from "../../../interfaces";
 const imguri = paths.images.thumb;
 
 const props = defineProps<{
-  track: Track;
+  track: Track | null;
 }>();
 </script>

src/components/RightSideBar/Queue.vue

@@ -17,6 +17,8 @@
               @playThis="queue.play(index)"
               :isCurrent="index === queue.current"
               :isPlaying="queue.playing"
+              :isQueueTrack="true"
+              :index="index"
             />
           </TransitionGroup>
         </div>
@@ -88,7 +90,6 @@ onUpdated(() => {
     grid-template-rows: max-content 1fr max-content;
     gap: $small;
 
-
     .scrollable-r {
       height: 100%;
       overflow: hidden;

src/components/RightSideBar/Queue/upNext.vue

@@ -6,14 +6,15 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="nextup abs">next up</div>
-    <img :src="paths.images.thumb + track.image" class="rounded" />
+    <img :src="paths.images.thumb + track?.image" class="rounded" />
     <div class="tags">
-      <div class="title ellip">{{ track.title }}</div>
-      <div class="artist ellip">
+      <div class="title ellip">{{ track?.title || "Don't click here" }}</div>
+      <div class="artist ellip" v-if="track">
         <span v-for="artist in putCommas(track.artists)" :key="artist">{{
           artist
         }}</span>
       </div>
+      <span v-else class="artist">nothing will happen</span>
     </div>
   </div>
 </template>
@@ -27,14 +28,16 @@ import { showTrackContextMenu as showContext } from "@/composables/context";
 import { ref } from "vue";
 
 const props = defineProps<{
-  track: Track;
+  track: Track | null;
   playNext: () => void;
 }>();
 
 const context_on = ref(false);
 
 function showMenu(e: Event) {
-  showContext(e, props.track, context_on);
+  if (props.track) {
+    showContext(e, props.track, context_on);
+  }
 }
 </script>
 

src/components/shared/SongItem.vue

@@ -8,7 +8,7 @@
         highlighted: isHighlighted,
       },
     ]"
-    v-bind:class="`track-${track.uniq_hash}`"
+    v-bind:class="`track-${track.hash}`"
     @dblclick="emitUpdate(track)"
     @contextmenu.prevent="showMenu"
   >
@@ -75,10 +75,10 @@ import { ref } from "vue";
 
 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 { showTrackContextMenu as showContext } from "@/composables/context";
 
 const context_on = ref(false);
 const imguri = paths.images.thumb;

src/components/shared/TrackItem.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     class="track-item"
-    @click="playThis(props.track)"
+    @click="playThis(track)"
     :class="[
       {
-        currentInQueue: props.isCurrent,
+        currentInQueue: isCurrent,
       },
       { contexton: context_on },
     ]"
@@ -14,21 +14,33 @@
       <img :src="paths.images.thumb + track.image" alt="" class="rounded" />
       <div
         class="now-playing-track-indicator image"
-        v-if="props.isCurrent"
-        :class="{ last_played: !props.isPlaying }"
+        v-if="isCurrent"
+        :class="{ last_played: !isPlaying }"
       ></div>
     </div>
     <div class="tags">
       <div class="title ellip">
-        {{ props.track.title }}
+        {{ track.title }}
       </div>
       <hr />
-      <div class="artist ellip">
-        <span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
-          artist
-        }}</span>
+      <div class="artist">
+        <div class="ellip" v-if="track.artists[0] !== ''">
+          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+            artist
+          }}</span>
+        </div>
+        <div class="ellip" v-else>
+          <span>{{ track.albumartist }}</span>
+        </div>
       </div>
     </div>
+    <div
+      class="remove-track flex"
+      @click.stop="queue.removeFromQueue(index)"
+      v-if="isQueueTrack"
+    >
+      <DelSvg />
+    </div>
   </div>
 </template>
 
@@ -39,13 +51,18 @@ import { paths } from "@/config";
 import { putCommas } from "@/utils";
 import { Track } from "@/interfaces";
 import { showTrackContextMenu as showContext } from "@/composables/context";
+import DelSvg from "@/assets/icons/plus.svg";
+import useQueueStore from "@/stores/queue";
 
 const props = defineProps<{
   track: Track;
   isCurrent: boolean;
   isPlaying: boolean;
+  isQueueTrack?: boolean;
+  index?: number;
 }>();
 
+const queue = useQueueStore();
 const context_on = ref(false);
 
 function showMenu(e: Event) {
@@ -73,11 +90,26 @@ const playThis = (track: Track) => {
 
 .track-item {
   display: grid;
-  grid-template-columns: min-content 1fr;
+  grid-template-columns: min-content 1fr max-content;
   align-items: center;
   padding: $small 1rem;
 
+  .remove-track {
+    opacity: 0;
+    transition: all 0.25s ease;
+    transform: translateX(1rem) rotate(45deg);
+
+    &:hover {
+      opacity: 1 !important;
+    }
+  }
+
   &:hover {
+    .remove-track {
+      opacity: 0.5;
+      transform: translateX(0) rotate(45deg);
+    }
+
     cursor: pointer;
     background: linear-gradient(37deg, $gray4, $gray3, $gray3);
   }
@@ -87,10 +119,6 @@ const playThis = (track: Track) => {
     margin: 0.1rem;
   }
 
-  // .tags {
-  //   border: solid 1px;
-  // }
-
   .album-art {
     display: flex;
     align-items: center;