Add Discord rich presence support

package.json

@@ -26,6 +26,7 @@
     "@electron-toolkit/utils": "^3.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@types/graceful-fs": "^4.1.6",
+    "@xhayper/discord-rpc": "^1.2.0",
     "electron-updater": "^6.3.9",
     "fastest-levenshtein": "^1.0.16",
     "get-audio-duration": "^4.0.1",

src/RequestAPI.d.ts

@@ -41,6 +41,9 @@ export type RequestAPI = {
   "dir::autoGetOsuDir": () => Optional<string>;
   "dir::submit": (dir: string) => void;
 
+  "discord::play": (song: Song, duration?: number) => void;
+  "discord::pause": (song: Song) => void;
+
   "error::dismissed": () => void;
 
   "parse::search": (query: string) => SearchQuery;

src/main/router/discord-router.ts

@@ -0,0 +1,78 @@
+import { Client, SetActivity } from "@xhayper/discord-rpc";
+import { Router } from "../lib/route-pass/Router";
+
+const client = new Client({ clientId: "1292942523425099826" });
+
+client.on("ready", () => client.user?.setActivity(defaultPresence));
+
+client.login();
+
+const defaultPresence: SetActivity = {
+  details: "Idle",
+  largeImageKey: "logo",
+  type: 2, // listening
+  buttons: [{ label: "Check out osu!radio", url: "https://github.com/Team-BTMC/osu-radio" }]
+};
+
+Router.respond("discord::play", async (_evt, song, duration) => {
+  const startTimestamp = new Date(new Date().getTime() - (duration ? duration * 1000 : 0));
+  const endTimestamp = startTimestamp.getTime() + song.duration * 1000;
+
+  const response = await fetch(
+    `https://assets.ppy.sh/beatmaps/${song.beatmapSetID}/covers/[email protected]`,
+    { method: "HEAD" }
+  );
+
+  let largeImageKey = `https://assets.ppy.sh/beatmaps/${song.beatmapSetID}/covers/[email protected]`;
+  if (response.status === 404) {
+    largeImageKey = "logo";
+  }
+
+  const presence: SetActivity = {
+    details: song.title,
+    state: song.artist,
+    type: 2, // listening
+    startTimestamp: startTimestamp,
+    endTimestamp: endTimestamp,
+    largeImageKey: largeImageKey,
+    buttons: [{ label: "Check out osu!radio", url: "https://github.com/Team-BTMC/osu-radio" }]
+  };
+
+  if (song.beatmapSetID) {
+    presence.buttons?.push({
+      label: "Go to this map on osu!",
+      url: `https://osu.ppy.sh/beatmapsets/${song.beatmapSetID}`
+    });
+  }
+
+  client.user?.setActivity(presence);
+});
+
+Router.respond("discord::pause", async (_evt, song) => {
+  const response = await fetch(
+    `https://assets.ppy.sh/beatmaps/${song.beatmapSetID}/covers/[email protected]`,
+    { method: "HEAD" }
+  );
+
+  let largeImageKey = `https://assets.ppy.sh/beatmaps/${song.beatmapSetID}/covers/[email protected]`;
+  if (response.status === 404) {
+    largeImageKey = "logo";
+  }
+  const presence: SetActivity = {
+    details: song.title,
+    state: song.artist,
+    type: 2, // listening
+    largeImageKey: largeImageKey,
+    largeImageText: "Paused",
+    buttons: [{ label: "Check out osu!radio", url: "https://github.com/Team-BTMC/osu-radio" }]
+  };
+
+  if (song.beatmapSetID) {
+    presence.buttons?.push({
+      label: "Go to this map on osu!",
+      url: `https://osu.ppy.sh/beatmapsets/${song.beatmapSetID}`
+    });
+  }
+
+  client.user?.setActivity(presence);
+});

src/main/router/import.ts

@@ -1,12 +1,13 @@
 // This file serves as router initializer only. Reason being that main.ts had massive wall of import statements. Now
 // it is just single file
 
+import "./dev-router";
 import "./dir-router";
+import "./discord-router";
 import "./error-router";
+import "./local-volume-router";
+import "./parser-router";
 import "./queue-router";
 import "./resource-router";
-import "./songs-pool-router";
-import "./parser-router";
-import "./local-volume-router";
 import "./settings-router";
-import "./dev-router";
+import "./songs-pool-router";

src/renderer/src/lib/Music.ts

@@ -101,8 +101,15 @@ export async function play(): Promise<void> {
     setMedia(current.media);
   }
 
+  const current = await getCurrent();
+  if (current === undefined) {
+    return;
+  }
+
   const m = media();
 
+  await window.api.request("discord::play", current.song, player.currentTime);
+
   if (m !== undefined && player.src !== m) {
     player.src = m;
   }
@@ -114,7 +121,14 @@ export async function play(): Promise<void> {
   setIsPlaying(true);
 }
 
-export function pause() {
+export async function pause() {
+  const song = await getCurrent();
+  if (song === undefined) {
+    return;
+  }
+
+  await window.api.request("discord::pause", song.song);
+
   setIsPlaying(false);
   player.pause();
 }
@@ -166,7 +180,7 @@ export async function setMediaSession(song: Song) {
 
     const actionHandlers = {
       play: () => togglePlay(),
-      pause: pause,
+      pause: () => pause(),
       previoustrack: previous,
       nexttrack: next
     };
@@ -237,25 +251,32 @@ export async function togglePlay(force?: boolean): Promise<void> {
       return;
     }
 
-    pause();
+    await pause();
     return;
   }
 
   if (isPlaying() === true) {
-    pause();
+    await pause();
     return;
   }
 
   await play();
 }
 
-export function seek(range: ZeroToOne): void {
+export async function seek(range: ZeroToOne): Promise<void> {
   if (isNaN(player.duration)) {
     return;
   }
 
   player.currentTime = range * player.duration;
 
+  const song = await getCurrent();
+  if (!song) {
+    return;
+  }
+
+  await window.api.request("discord::play", song.song, player.currentTime);
+
   setDuration(player.duration);
   setTimestamp(player.currentTime);
 }
@@ -316,6 +337,7 @@ window.api.listen("queue::songChanged", async (s) => {
   }
   setMedia(resource.value);
   setSong(s);
+  await window.api.request("discord::play", s);
   await play();
 });