add transition to queue track list

src/assets/scss/Global/state.scss

@@ -1,7 +1,6 @@
 
 .now-playing-track-indicator {
   background-image: url(../../assets/icons/playing.gif);
-  transition: all 0.3s ease-in-out;
   height: 2rem;
   width: 2rem;
   border-radius: 50%;

src/assets/scss/Global/variants.scss

@@ -1,4 +1,8 @@
 // paddings
+.pad-smaller {
+  padding: $smaller;
+}
+
 .pad-small {
   padding: $small;
 }

src/components/FolderView/SongList.vue

@@ -92,22 +92,26 @@ function updateQueue(track: Track) {
 
   switch (routename) {
     case "FolderView":
-      queue.playFromFolder(props.path, props.tracks);
+      queue.playFromFolder(props.path || "", props.tracks);
       queue.play(index);
       break;
     case "AlbumView":
       const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
 
       queue.playFromAlbum(
-        track.album,
-        track.albumartist,
-        track.albumhash,
+        track.album || "",
+        track.albumartist || "",
+        track.albumhash || "",
         album.tracks
       );
       queue.play(tindex);
       break;
     case "PlaylistView":
-      queue.playFromPlaylist(props.pname, props.playlistid, props.tracks);
+      queue.playFromPlaylist(
+        props.pname || "",
+        props.playlistid || "",
+        props.tracks
+      );
       queue.play(index);
       break;
   }

src/components/RightSideBar/Queue.vue

@@ -4,19 +4,21 @@
       <UpNext :next="queue.tracklist[queue.next]" :playNext="queue.playNext" />
       <div class="scrollable-r bg-black rounded">
         <QueueActions />
-        <div
-          class="inner"
-          @mouseenter="setMouseOver(true)"
-          @mouseleave="setMouseOver(false)"
-        >
-          <TrackItem
-            v-for="(t, index) in queue.tracklist"
-            :key="t.trackid"
-            :track="t"
-            @playThis="queue.play(index)"
-            :isCurrent="index === queue.current"
-            :isPlaying="queue.playing"
-          />
+        <div class="inner">
+          <TransitionGroup
+            name="queuelist"
+            @mouseenter="setMouseOver(true)"
+            @mouseleave="setMouseOver(false)"
+          >
+            <TrackItem
+              v-for="(t, index) in queue.tracklist"
+              :key="t.trackid"
+              :track="t"
+              @playThis="queue.play(index)"
+              :isCurrent="index === queue.current"
+              :isPlaying="queue.playing"
+            />
+          </TransitionGroup>
         </div>
       </div>
       <PlayingFrom :from="queue.from" />
@@ -45,11 +47,30 @@ function setMouseOver(val: boolean) {
 onUpdated(() => {
   if (mouseover.value) return;
 
-  focusElem("currentInQueue");
+  setTimeout(() => {
+    focusElem("currentInQueue");
+  }, 1000);
 });
 </script>
 
 <style lang="scss">
+.queuelist-move, /* apply transition to moving elements */
+.queuelist-enter-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.queuelist-enter-from,
+.queuelist-leave-to {
+  opacity: 0;
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.queuelist-leave-active {
+  transition: none;
+  position: absolute;
+}
+
 .up-next {
   overflow: hidden;
   height: 100%;

src/components/shared/SongItem.vue

@@ -114,7 +114,7 @@ const showContextMenu = (e: Event) => {
 
 const props = defineProps<{
   track: Track;
-  index: Number;
+  index?: number;
   isPlaying: Boolean;
   isCurrent: Boolean;
   isHighlighted: Boolean;

src/components/shared/TrackItem.vue

@@ -10,12 +10,8 @@
     ]"
     @contextmenu="showContextMenu"
   >
-    <div
-      class="album-art image rounded"
-      :style="{
-        backgroundImage: `url(&quot;${imguri + props.track.image}&quot;)`,
-      }"
-    >
+    <div class="album-art">
+      <img :src="paths.images.thumb + track.image" alt="" class="rounded" />
       <div
         class="now-playing-track-indicator image"
         v-if="props.isCurrent"
@@ -120,10 +116,17 @@ const playThis = (track: Track) => {
     align-items: center;
     justify-content: center;
 
+    margin-right: $small;
+    position: relative;
+
+    .now-playing-track-indicator {
+      position: absolute;
+    }
+  }
+
+  img {
     width: 3rem;
     height: 3rem;
-    margin: 0 0.5rem 0 0;
-    background-image: url(../../assets/images/null.webp);
   }
 
   .title {

src/stores/queue.ts

@@ -192,7 +192,7 @@ export default defineStore("Queue", {
       this.from = <fromFolder>{
         type: FromOptions.folder,
         path: fpath,
-        name: fpath.split("/").splice(-1).join(""),
+        name: fpath?.split("/").splice(-1).join(""),
       };
       this.setNewQueue(tracks);
     },

src/utils/useFormatSeconds.ts

@@ -3,8 +3,11 @@
  * @param seconds The seconds to convert
  * @param long Whether to provide the time in the long format
  */
-export default function formatSeconds(seconds: number, long?: boolean) {
-  if (seconds == undefined) {
+export default function formatSeconds(
+  seconds: number | undefined,
+  long?: boolean
+) {
+  if (seconds === undefined) {
     return "00:00";
   }