feat: added proper updates through the mediasession api. fixes #198

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### New features
 
+- Added proper updates through the MediaSession API
 - You can now add custom CSS in the "advanced" settings tab
 - You can now configure the updateFrequency in the settings window
   - Default value is set to 500 and will overwrite the hardcoded value of 100

src/preload.js

@@ -323,14 +323,14 @@ function updateMediaInfo(options, notify) {
   if (options) {
     ipcRenderer.send(globalEvents.updateInfo, options);
     if (store.get(settings.notifications) && notify) {
-      new Notification({ title: options.title, body: options.message, icon: options.icon }).show();
+      new Notification({ title: options.title, body: options.artists, icon: options.icon }).show();
     }
     if (player) {
       player.metadata = {
         ...player.metadata,
         ...{
           "xesam:title": options.title,
-          "xesam:artist": [options.message],
+          "xesam:artist": [options.artists],
           "xesam:album": options.album,
           "mpris:artUrl": options.image,
           "mpris:length": convertDuration(options.duration) * 1000 * 1000,
@@ -361,6 +361,23 @@ function getTrackID() {
   return window.location;
 }
 
+function updateMediaSession(options) {
+  if ("mediaSession" in navigator) {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: options.title,
+      artist: options.artists,
+      album: options.album,
+      artwork: [
+        {
+          src: options.icon,
+          sizes: "640x640",
+          type: "image/png",
+        },
+      ],
+    });
+  }
+}
+
 /**
  * Watch for song changes and update title + notify
  */
@@ -377,7 +394,7 @@ setInterval(function () {
   const currentStatus = getCurrentlyPlayingStatus();
   const options = {
     title,
-    message: artistsString,
+    artists: artistsString,
     album: album,
     status: currentStatus,
     url: getTrackURL(),
@@ -386,7 +403,7 @@ setInterval(function () {
     "app-name": appName,
   };
 
-  const titleOrArtistChanged = currentSong !== songDashArtistTitle;
+  const titleOrArtistsChanged = currentSong !== songDashArtistTitle;
 
   // update title, url and play info with new info
   setTitle(songDashArtistTitle);
@@ -415,7 +432,10 @@ setInterval(function () {
     }
   }).then(
     () => {
-      updateMediaInfo(options, titleOrArtistChanged);
+      updateMediaInfo(options, titleOrArtistsChanged);
+      if (titleOrArtistsChanged) {
+        updateMediaSession(options);
+      }
     },
     () => {}
   );

src/scripts/discord.js

@@ -26,8 +26,8 @@ const observer = (event, arg) => {
         ...idleStatus,
         ...{
           details: `Listening to ${mediaInfoModule.mediaInfo.title}`,
-          state: mediaInfoModule.mediaInfo.artist
+          state: mediaInfoModule.mediaInfo.artists
-            ? mediaInfoModule.mediaInfo.artist
+            ? mediaInfoModule.mediaInfo.artists
             : "unknown artist(s)",
           startTimestamp: parseInt(now),
           endTimestamp: parseInt(remaining),
@@ -43,7 +43,7 @@ const observer = (event, arg) => {
         ...idleStatus,
         ...{
           details: `Watching ${mediaInfoModule.mediaInfo.title}`,
-          state: mediaInfoModule.mediaInfo.artist,
+          state: mediaInfoModule.mediaInfo.artists,
           startTimestamp: parseInt(now),
           endTimestamp: parseInt(remaining),
         },

src/scripts/express.js

@@ -24,7 +24,7 @@ expressModule.run = function(mainWindow) {
 
   const expressApp = express();
   expressApp.get("/", (req, res) => res.send("Hello World!"));
-  expressApp.get("/current", (req, res) => res.json(mediaInfo));
+  expressApp.get("/current", (req, res) => res.json({ ...mediaInfo, artist: mediaInfo.artists }));
   expressApp.get("/image", (req, res) => {
     var stream = fs.createReadStream(mediaInfo.icon);
     stream.on("open", function () {

src/scripts/mediaInfo.js

@@ -2,14 +2,14 @@ const statuses = require("./../constants/statuses");
 
 const mediaInfo = {
   title: "",
-  artist: "",
+  artists: "",
   album: "",
   icon: "",
   status: statuses.paused,
   url: "",
   current: "",
   duration: "",
-  image: "tidal-hifi-icon"
+  image: "tidal-hifi-icon",
 };
 const mediaInfoModule = {
   mediaInfo,
@@ -20,7 +20,7 @@ const mediaInfoModule = {
  */
 mediaInfoModule.update = function (arg) {
   mediaInfo.title = propOrDefault(arg.title);
-  mediaInfo.artist = propOrDefault(arg.message);
+  mediaInfo.artists = propOrDefault(arg.artists);
   mediaInfo.album = propOrDefault(arg.album);
   mediaInfo.icon = propOrDefault(arg.icon);
   mediaInfo.url = propOrDefault(arg.url);