client: add media session notification

src/composables/mediaNotification.js

@@ -0,0 +1,62 @@
+import perks from "./perks.js";
+import playAudio from "./playAudio.js";
+
+let showMediaNotif = () => {
+  if ("mediaSession" in navigator) {
+    navigator.mediaSession.metadata = new window.MediaMetadata({
+      title: perks.current.value.title,
+      artist: perks.current.value.artists,
+      artwork: [
+        {
+          src: perks.current.value.image,
+          sizes: "96x96",
+          type: "image/jpeg",
+        },
+        {
+          src: perks.current.value.image,
+          sizes: "128x128",
+          type: "image/png",
+        },
+        {
+          src: perks.current.value.image,
+          sizes: "192x192",
+          type: "image/png",
+        },
+        {
+          src: perks.current.value.image,
+          sizes: "256x256",
+          type: "image/png",
+        },
+        {
+          src: perks.current.value.image,
+          sizes: "384x384",
+          type: "image/png",
+        },
+        {
+          src: perks.current.value.image,
+          sizes: "512x512",
+          type: "image/png",
+        },
+      ],
+    });
+
+    navigator.mediaSession.setActionHandler("play", function () {
+      playAudio.playPause();
+    });
+    navigator.mediaSession.setActionHandler("pause", function () {
+      playAudio.playPause();
+    });
+    navigator.mediaSession.setActionHandler("seekbackward", function () {});
+    navigator.mediaSession.setActionHandler("seekforward", function () {});
+    navigator.mediaSession.setActionHandler("previoustrack", function () {
+      playAudio.playPrev();
+    });
+    navigator.mediaSession.setActionHandler("nexttrack", function () {
+      playAudio.playNext();
+    });
+  }
+};
+
+export default {
+  showMediaNotif,
+};

src/composables/perks.js

@@ -1,6 +1,8 @@
 import { ref } from "@vue/reactivity";
 import { watch } from "@vue/runtime-core";
 
+import media from './mediaNotification.js'
+
 const current = ref({
   title: "Nothing played yet",
   artists: ["... blah blah blah"],
@@ -80,6 +82,7 @@ const readQueue = () => {
 };
 
 watch(current, (new_current, old_current) => {
+  media.showMediaNotif()
   localStorage.setItem("current", JSON.stringify(new_current));
 
   const index = queue.value.findIndex(
@@ -91,10 +94,8 @@ watch(current, (new_current, old_current) => {
     prev.value = queue.value[queue.value.length - 2];
   } else if (index == 0) {
     next.value = queue.value[1];
-    // prev.value = queue.value[queue.value.length - 1];
   } else {
     next.value = queue.value[index + 1];
-    // prev.value = queue.value[index - 1];
   }
 
   prev.value = old_current;
@@ -109,7 +110,8 @@ watch(current, (new_current, old_current) => {
         inline: "center",
       });
     }
-  }, 100);
+  }, 1000);
 });
 
+
 export default { putCommas, doThat, readQueue, current, queue, next, prev };

src/composables/playAudio.js

@@ -1,6 +1,7 @@
 import { ref } from "@vue/reactivity";
 
 import perks from "./perks";
+import media from "./mediaNotification.js"
 
 const audio = ref(new Audio()).value;
 const pos = ref(0);
@@ -32,6 +33,7 @@ const playAudio = (path) => {
 function playNext() {
   playAudio(perks.next.value.filepath);
   perks.current.value = perks.next.value;
+  media.showMediaNotif()
 }
 
 function playPrev() {