add now playing card settings

+ move left sidebar to separate component

src/composables/mediaNotification.ts

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