remove transition group from queue track list

src/components/LeftSidebar/Playlists.vue

@@ -32,7 +32,6 @@ onMounted(() => {
 
 <style lang="scss">
 .sidebar-playlists {
-  //   outline: solid 1px;
   display: grid;
   grid-template-rows: max-content 1fr;
 

src/components/LeftSidebar/nowPlaying.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="now-playing-card t-center rounded">
     <div>
-      <SongCard :track="queue.currenttrack" />
+      <SongCard :track="currenttrack" />
       <div class="l-track-time">
-        <span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
+        <span class="rounded">{{ formatSeconds(duration.current) }}</span
-        ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
+        ><span class="rounded">{{ formatSeconds(duration.full) }}</span>
       </div>
       <Progress />
     </div>
@@ -13,16 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-import useModalStore from "@/stores/modal";
-import useQueueStore from "@/stores/queue";
 import useQStore from "../../stores/queue";
-import useContextStore from "@/stores/context";
-import MenuSvg from "../../assets/icons/more.svg";
-import trackContext from "@/contexts/track_context";
-
-import { ContextSrc } from "@/composables/enums";
 import { formatSeconds } from "@/utils";
 
 import HotKeys from "./NP/HotKeys.vue";
@@ -30,28 +21,7 @@ import Progress from "./NP/Progress.vue";
 import SongCard from "./NP/SongCard.vue";
 
 const queue = useQStore();
-const contextStore = useContextStore();
+const { currenttrack, duration } = queue;
-const context_on = ref(false);
-
-const showContextMenu = (e: Event) => {
-  e.preventDefault();
-  e.stopPropagation();
-
-  const menus = trackContext(
-    queue.tracklist[queue.current],
-    useModalStore,
-    useQueueStore
-  );
-
-  contextStore.showContextMenu(e, menus, ContextSrc.Track);
-  context_on.value = true;
-
-  contextStore.$subscribe((mutation, state) => {
-    if (!state.visible) {
-      context_on.value = false;
-    }
-  });
-};
 </script>
 <style lang="scss">
 .now-playing-card {
@@ -88,7 +58,6 @@ const showContextMenu = (e: Event) => {
     }
   }
 
-
   .context_on {
     background-color: $accent;
   }

src/components/PlaylistsList/PlaylistCard.vue

@@ -48,8 +48,6 @@ const props = defineProps<{
 
   .bottom {
     margin-top: $smaller;
-    display: grid;
-    justify-items: center;
 
     .name {
       font-weight: 900;

src/components/RightSideBar/Main.vue

@@ -7,13 +7,13 @@
   >
     <div class="grid">
       <div class="r-content">
-        <div class="r-dash" v-show="tabs.current === tabs.tabs.home">
+        <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
           <DashBoard />
         </div>
-        <div class="r-search" v-show="tabs.current === tabs.tabs.search">
+        <div class="r-search" v-if="tabs.current === tabs.tabs.search">
           <Search />
         </div>
-        <div class="r-queue" v-show="tabs.current === tabs.tabs.queue">
+        <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
           <Queue />
         </div>
       </div>

src/components/RightSideBar/Queue.vue

@@ -8,18 +8,16 @@
           @mouseenter="setMouseOver(true)"
           @mouseleave="setMouseOver(false)"
         >
-          <TransitionGroup name="queuelist">
+          <TrackItem
-            <TrackItem
+            v-for="(t, index) in queue.tracklist"
-              v-for="(t, index) in queue.tracklist"
+            :key="index"
-              :key="index"
+            :track="t"
-              :track="t"
+            @playThis="queue.play(index)"
-              @playThis="queue.play(index)"
+            :isCurrent="index === queue.currentindex"
-              :isCurrent="index === queue.current"
+            :isPlaying="queue.playing"
-              :isPlaying="queue.playing"
+            :isQueueTrack="true"
-              :isQueueTrack="true"
+            :index="index"
-              :index="index"
+          />
-            />
-          </TransitionGroup>
         </div>
       </div>
     </div>
@@ -52,21 +50,6 @@ onUpdated(() => {
 </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;
-}
-
-.queuelist-leave-active {
-  transition: none;
-  position: absolute;
-}
-
 .up-next {
   overflow: hidden;
   height: 100%;
@@ -80,7 +63,6 @@ onUpdated(() => {
     position: relative;
     height: 100%;
 
-
     .scrollable-r {
       height: 100%;
       overflow: hidden;

src/composables/mediaNotification.ts

@@ -1,4 +1,3 @@
-import { Track } from "../interfaces.js";
 import { paths } from "../config";
 
 import useQueueStore from "../stores/queue";
@@ -6,54 +5,55 @@ import useQueueStore from "../stores/queue";
 export default () => {
   if ("mediaSession" in navigator) {
     const queue = useQueueStore();
+    const { currenttrack: track } = queue;
 
     navigator.mediaSession.metadata = new window.MediaMetadata({
-      title: queue.currenttrack.title,
+      title: track.title,
-      artist: queue.currenttrack.artists.join(", "),
+      artist: track.artists.join(", "),
       artwork: [
         {
-          src: paths.images.thumb + queue.currenttrack.image,
+          src: paths.images.thumb + track.image,
           sizes: "96x96",
           type: "image/jpeg",
         },
         {
-          src: paths.images.thumb + queue.currenttrack.image,
+          src: paths.images.thumb + track.image,
           sizes: "128x128",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + queue.currenttrack.image,
+          src: paths.images.thumb + track.image,
           sizes: "192x192",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + queue.currenttrack.image,
+          src: paths.images.thumb + track.image,
           sizes: "256x256",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + queue.currenttrack.image,
+          src: paths.images.thumb + track.image,
           sizes: "384x384",
           type: "image/webp",
         },
         {
-          src: paths.images.thumb + queue.currenttrack.image,
+          src: paths.images.thumb + track.image,
           sizes: "512x512",
           type: "image/webp",
         },
       ],
     });
 
-    navigator.mediaSession.setActionHandler("play", function () {
+    navigator.mediaSession.setActionHandler("play", () => {
       queue.playPause();
     });
-    navigator.mediaSession.setActionHandler("pause", function () {
+    navigator.mediaSession.setActionHandler("pause", () => {
       queue.playPause();
     });
-    navigator.mediaSession.setActionHandler("previoustrack", function () {
+    navigator.mediaSession.setActionHandler("previoustrack", () => {
       queue.playPrev();
     });
-    navigator.mediaSession.setActionHandler("nexttrack", function () {
+    navigator.mediaSession.setActionHandler("nexttrack", () => {
       queue.playNext();
     });
   }

src/stores/queue.ts

@@ -32,23 +32,19 @@ export default defineStore("Queue", {
       current: 0,
       full: 0,
     },
-    current: 0,
+    currentindex: 0,
-    next: 0,
-    prev: 0,
     currentid: <string | null>"",
     playing: false,
     from: {} as From,
-    currenttrack: {} as Track,
     tracklist: [] as Track[],
   }),
   actions: {
     play(index: number = 0) {
       if (this.tracklist.length === 0) return;
-      this.current = index;
+      this.currentindex = index;
       const track = this.tracklist[index];
       this.currentid = track.trackid;
       const uri = state.settings.uri + "/file/" + track.hash;
-      this.updateCurrent(index);
 
       new Promise((resolve, reject) => {
         audio.autoplay = true;
@@ -78,7 +74,7 @@ export default defineStore("Queue", {
             NotifType.Error
           );
 
-          if (this.current !== this.tracklist.length - 1) {
+          if (this.currentindex !== this.tracklist.length - 1) {
             setTimeout(() => {
               this.playNext();
             }, 1000);
@@ -87,7 +83,7 @@ export default defineStore("Queue", {
     },
     playPause() {
       if (audio.src === "") {
-        this.play(this.current);
+        this.play(this.currentindex);
       } else if (audio.paused) {
         audio.play();
         this.playing = true;
@@ -97,10 +93,10 @@ export default defineStore("Queue", {
       }
     },
     playNext() {
-      this.play(this.next);
+      this.play(this.nextindex);
     },
     playPrev() {
-      this.play(this.prev);
+      this.play(this.previndex);
     },
     seek(pos: number) {
       try {
@@ -120,35 +116,6 @@ export default defineStore("Queue", {
         this.tracklist = parsed.tracks;
       }
     },
-    updateCurrent(index: number) {
-      this.setCurrent(index);
-      this.updateNext(index);
-      this.updatePrev(index);
-    },
-    updateNext(index: number) {
-      if (index == this.tracklist.length - 1) {
-        this.next = 0;
-        return;
-      }
-
-      this.next = index + 1;
-    },
-    updatePrev(index: number) {
-      if (index === 0) {
-        this.prev = this.tracklist.length - 1;
-        return;
-      }
-
-      this.prev = index - 1;
-    },
-    setCurrent(index: number) {
-      const track = this.tracklist[index];
-
-      this.currenttrack = track;
-      this.current = index;
-      this.currentid = track?.trackid || null;
-      this.duration.full = track?.length || 0;
-    },
     setNewQueue(tracklist: Track[]) {
       if (this.tracklist !== tracklist) {
         this.tracklist = [];
@@ -197,13 +164,11 @@ export default defineStore("Queue", {
     },
     addTrackToQueue(track: Track) {
       this.tracklist.push(track);
-      // writeQueue(this.from, this.tracklist);
-      this.updateNext(this.current);
     },
     playTrackNext(track: Track) {
       const Toast = useNotifStore();
 
-      const nextindex = this.current + 1;
+      const nextindex = this.currentindex + 1;
       const next: Track = this.tracklist[nextindex];
 
       // if track is already next, skip
@@ -214,14 +179,13 @@ export default defineStore("Queue", {
 
       // if tracklist is empty or current track is last, push track
       // else insert track after current track
-      if (this.current == this.tracklist.length - 1) {
+      if (this.currentindex == this.tracklist.length - 1) {
         this.tracklist.push(track);
       } else {
-        this.tracklist.splice(this.current + 1, 0, track);
+        this.tracklist.splice(this.currentindex + 1, 0, track);
       }
 
       // save queue
-      this.updateNext(this.current);
       Toast.showNotification(
         `Added ${track.title} to queue`,
         NotifType.Success
@@ -230,7 +194,7 @@ export default defineStore("Queue", {
     clearQueue() {
       this.tracklist = [] as Track[];
       this.currentid = "";
-      this.current, this.next, (this.prev = 0);
+      this.currentindex = 0;
       this.from = <From>{};
     },
     shuffleQueue() {
@@ -243,34 +207,42 @@ export default defineStore("Queue", {
       const shuffled = shuffle(this.tracklist);
       this.tracklist = shuffled;
 
-      this.current = 0;
+      this.currentindex = 0;
-      this.play(this.current);
+      this.play(this.currentindex);
 
       this.currentid = shuffled[0].trackid;
-      this.next = 1;
-      this.prev = this.tracklist.length - 1;
     },
     removeFromQueue(index: number = 0) {
       this.tracklist.splice(index, 1);
     },
   },
   getters: {
-    getNextTrack(): Track {
+    next(): Track {
-      if (this.current == this.tracklist.length - 1) {
+      if (this.currentindex == this.tracklist.length - 1) {
         return this.tracklist[0];
       } else {
-        return this.tracklist[this.current + 1];
+        return this.tracklist[this.currentindex + 1];
       }
     },
-    getPrevTrack(): Track {
+    prev(): Track {
-      if (this.current === 0) {
+      if (this.currentindex === 0) {
         return this.tracklist[this.tracklist.length - 1];
       } else {
-        return this.tracklist[this.current - 1];
+        return this.tracklist[this.currentindex - 1];
       }
     },
-    getCurrentTrack(): Track {
+    currenttrack(): Track {
-      return this.tracklist[this.current];
+      return this.tracklist[this.currentindex];
+    },
+    previndex(): number {
+      return this.currentindex === 0
+        ? this.tracklist.length - 1
+        : this.currentindex - 1;
+    },
+    nextindex(): number {
+      return this.currentindex === this.tracklist.length - 1
+        ? 0
+        : this.currentindex + 1;
     },
   },
   persist: {