feat: add discord RPC

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "main": "src/index.js",
   "scripts": {
@@ -85,6 +85,7 @@
   "dependencies": {
     "@electron/remote": "^2.0.7",
     "anitomyscript": "^2.0.4",
+    "discord-rpc": "^4.0.1",
     "electron-log": "^4.4.6",
     "electron-updater": "^4.6.5",
     "matroska-subtitles": "github:ThaUnknown/matroska-subtitles#patch",

src/renderer/src/lib/Menubar.svelte

@@ -1,3 +1,8 @@
+<script context="module">
+  import { writable } from 'svelte/store'
+  export const title = writable('Miru')
+</script>
+
 <script>
   const { getCurrentWindow } = require('@electron/remote')
   const window = getCurrentWindow()
@@ -8,7 +13,7 @@
   <div class="w-full h-full bg-dark z-10 d-flex">
     <div class="d-flex w-full draggable h-full align-items-center">
       <img src="./logo.ico" alt="ico" />
-      {document.title}
+      {$title}
     </div>
     <div class="controls d-flex h-full pointer">
       <div class="d-flex align-items-center" on:click={() => window.minimize()}>

src/renderer/src/lib/pages/Player.svelte

@@ -1,20 +1,28 @@
 <script context="module">
   import { set } from './Settings.svelte'
   import { playAnime } from '../RSSView.svelte'
+  import { title } from '../Menubar.svelte'
+  const { Client } = require('discord-rpc')
+  const discord = new Client({
+    transport: 'ipc'
+  })
   export let media = null
   let fileMedia = null
   let hadImage = false
   export function updateMedia(fileMed) {
+    if (discord.user && !fileMedia) {
+      setDiscordRPC(fileMed)
+    }
     fileMedia = fileMed
     media = fileMedia.media
     const name = [fileMedia.mediaTitle, fileMedia.episodeNumber, fileMedia.episodeTitle, 'Miru'].filter(i => i).join(' - ')
-    document.title = name || 'Miru'
+    title.set(name)
 
     fileMedia.episodeThumbnail = !!fileMedia.episodeThumbnail
     const metadata =
       fileMedia.episodeThumbnail || fileMedia.mediaCover
         ? new MediaMetadata({
-            title: name || 'Miru',
+            title: name,
             artwork: [
               {
                 src: fileMedia.episodeThumbnail || fileMedia.mediaCover,
@@ -23,12 +31,43 @@
               }
             ]
           })
-        : new MediaMetadata({
-            title: name || 'Miru'
-          })
+        : new MediaMetadata({ title: name })
     if (fileMedia.parseObject?.release_group) metadata.artist = fileMedia.parseObject.release_group
     navigator.mediaSession.metadata = metadata
   }
+  function setDiscordRPC(fileMedia) {
+    if (fileMedia && !process.env.NODE_ENV !== 'development ') {
+      discord.request('SET_ACTIVITY', {
+        pid: process.pid,
+        activity: {
+          details: fileMedia.media.title.userPreferred,
+          state: 'Watching Episode' + (!fileMedia.media.episodes ? ` ${fileMedia.episodeNumber}` : ''),
+          timestamps: {
+            start: Date.now()
+          },
+          party: {
+            size: fileMedia.episodeNumber && fileMedia.media.episodes && [fileMedia.episodeNumber, fileMedia.media.episodes]
+          },
+          assets: {
+            large_text: fileMedia.media.title.userPreferred,
+            large_image: fileMedia.media.coverImage.extraLarge,
+            small_image: 'logo',
+            small_text: 'https://github.com/ThaUnknown/miru'
+          },
+          instance: true
+        }
+      })
+    }
+  }
+  discord.on('ready', () => {
+    setDiscordRPC(fileMedia)
+  })
+  function loginRPC() {
+    discord.login({ clientId: '954855428355915797' }).catch(() => {
+      setTimeout(loginRPC, 5000)
+    })
+  }
+  loginRPC()
 </script>
 
 <script>