new version + readme updates

Merge new updates to master

CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.2.0
+
+- The discord integration now adds a time remaining field based on the song duration
+- All fields (current, remaining, and url are also available in the API*)
+- the artist field is now correctly identified
+
+* current time only updates on play/pause.
+
+## 2.1.1
+
+- The discord integration now doesn't send an update every 15 seconds it sends an update whenever the media info changes
+- consolidated updating the media info changes with the status changes into a single global event
+
 ## 2.1.0
 
 - [Mar0xy](https://github.com/Mar0xy) added Discord integration.

README.md

@@ -18,6 +18,7 @@ The web version of [listen.tidal.com](listen.tidal.com) running in electron with
   - [Using source](#using-source)
 - [features](#features)
 - [Integrations](#integrations)
+  - [not included](#not-included)
   - [Known bugs](#known-bugs)
 - [Why](#why)
 - [Why not extend existing projects?](#why-not-extend-existing-projects)
@@ -39,13 +40,13 @@ Various packaged versions of the software are available on the [releases](https:
 
 To install with `snap` you need to download the pre-packaged snap-package from this repository, found under releases:
 
-1. Download:
+1. Download
 
 ```sh
 wget <URI> #for instance: https://github.com/Mastermindzh/tidal-hifi/releases/download/1.0/tidal-hifi_1.0.0_amd64.snap
 ```
 
-2. Install:
+2. Install
 
 ```sh
 snap install --dangerous <path> #for instance: tidal-hifi_1.0.0_amd64.snap
@@ -63,7 +64,7 @@ trizen tidal-hifi
 
 To install and work with the code on this project follow these steps:
 
-- git clone https://github.com/Mastermindzh/tidal-hifi.git
+- git clone [https://github.com/Mastermindzh/tidal-hifi.git](https://github.com/Mastermindzh/tidal-hifi.git)
 - cd tidal-hifi
 - npm install
 - npm start
@@ -74,10 +75,23 @@ To install and work with the code on this project follow these steps:
 - Notifications
 - Custom hotkeys ([source](https://defkey.com/tidal-desktop-shortcuts))
 - API for status and playback
+- Custom [integrations](#integrations)
 - [Settings feature](./docs/settings.png) to disable certain functionality. (`ctrl+=`)
 
 ## Integrations
 
+Tidal-hifi comes with several integrations out of the box.
+You can find these in the settings menu (`ctrl + =` by default) under the "integrations" tab.
+
+![integrations menu, showing a list of integrations](./docs/integrations.png)
+
+It currently includes:
+
+- mpris - mpris media player controls/status
+- Discord - Shows what you're listening to on Discord.
+
+### not included
+
 - [i3 blocks config](https://github.com/Mastermindzh/dotfiles/commit/9714b2fa1d670108ce811d5511fd3b7a43180647) - My dotfiles where I use this app to fetch currently playing music (direct commit)
 
 ### Known bugs

build/linux/arch/.SRCINFO

@@ -1,6 +1,6 @@
 pkgbase = tidal-hifi-git
 	pkgdesc = The web version of listen.tidal.com running in electron with hifi support thanks to widevine.
-	pkgver = 2.0.0
+	pkgver = 2.1.1
 	pkgrel = 1
 	url = https://github.com/Mastermindzh/tidal-hifi
 	arch = x86_64
@@ -11,9 +11,9 @@ pkgbase = tidal-hifi-git
 	depends = nss
 	depends = gtk3
 	provides = tidal-hifi
-	source = https://github.com/Mastermindzh/tidal-hifi/archive/2.0.0.zip
+	source = https://github.com/Mastermindzh/tidal-hifi/archive/2.1.1.zip
 	source = tidal-hifi.desktop
-	sha512sums = 68fce020128b637fd37383a5afae71d2e4f3eec2d6b4bfcd7f410dcec18c91327d163deb21750e2251967a31f83b2b16092d11d3ff500a1fecd8c595448f380e
+	sha512sums = 510c94d9db8573103ee900dcd75b0416ea06ea62af7ed21818d2a5a77ab009a2737c852e7e20b97f846e14b07754a9e5a36ac5b9d0cd0a2a8d0aff3bbc75e622
 	sha512sums = 35f38ac308b871c1822d7f6f760f2fb54c3748cf769822cb0f0dfb90f0f5754ba9316da5e903a0d2e9839de3a43ec76f238f3f2e44021956fa1da19142081349
 
 pkgname = tidal-hifi-git

build/linux/arch/PKGBUILD

@@ -2,7 +2,7 @@
 
 _pkgname=tidal-hifi
 pkgname="$_pkgname-git"
-pkgver=2.0.0
+pkgver=2.1.1
 pkgrel=1
 pkgdesc="The web version of listen.tidal.com running in electron with hifi support thanks to widevine."
 arch=("x86_64")
@@ -15,11 +15,9 @@ provides=("$_pkgname")
 
 source=("https://github.com/Mastermindzh/tidal-hifi/archive/$pkgver.zip"
         "${_pkgname}.desktop")
-sha512sums=('68fce020128b637fd37383a5afae71d2e4f3eec2d6b4bfcd7f410dcec18c91327d163deb21750e2251967a31f83b2b16092d11d3ff500a1fecd8c595448f380e'
+sha512sums=('510c94d9db8573103ee900dcd75b0416ea06ea62af7ed21818d2a5a77ab009a2737c852e7e20b97f846e14b07754a9e5a36ac5b9d0cd0a2a8d0aff3bbc75e622'
             '35f38ac308b871c1822d7f6f760f2fb54c3748cf769822cb0f0dfb90f0f5754ba9316da5e903a0d2e9839de3a43ec76f238f3f2e44021956fa1da19142081349')
 
-
-
 cdToPkg(){
     cd "tidal-hifi-$pkgver"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tidal-hifi",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "src/main.js",
   "scripts": {
@@ -33,11 +33,11 @@
   },
   "devDependencies": {
     "@mastermindzh/prettier-config": "^1.0.0",
-    "electron": "git+https://github.com/castlabs/electron-releases.git#v8.5.2-wvvmp",
+    "dot-prop": ">=4.2.1",
+    "electron": "git+https://github.com/castlabs/electron-releases.git#v10.4.3-wvvmp",
     "electron-builder": "^21.2.0",
     "electron-reload": "^1.5.0",
-    "prettier": "^2.0.4",
-    "dot-prop": ">=4.2.1"
+    "prettier": "^2.0.4"
   },
   "prettier": "@mastermindzh/prettier-config"
 }

src/constants/globalEvents.js

@@ -7,7 +7,6 @@ const globalEvents = {
   updateInfo: "update-info",
   hideSettings: "hideSettings",
   showSettings: "showSettings",
-  updateStatus: "update-status",
   storeChanged: "storeChanged",
   error: "error",
 };

src/main.js

@@ -17,7 +17,6 @@ const mediaInfoModule = require("./scripts/mediaInfo");
 const discordModule = require("./scripts/discord");
 const globalEvents = require("./constants/globalEvents");
 
-
 let mainWindow;
 let icon = path.join(__dirname, "../assets/icon.png");
 
@@ -45,6 +44,7 @@ function createWindow(options = {}) {
       preload: path.join(__dirname, "preload.js"),
       plugins: true,
       devTools: true, // I like tinkering, others might too
+      enableRemoteModule: true,
     },
   });
 
@@ -98,7 +98,6 @@ app.on("activate", function () {
 });
 
 // IPC
-
 ipcMain.on(globalEvents.updateInfo, (event, arg) => {
   mediaInfoModule.update(arg);
 });
@@ -110,15 +109,12 @@ ipcMain.on(globalEvents.showSettings, (event, arg) => {
   showSettingsWindow();
 });
 
-ipcMain.on(globalEvents.updateStatus, (event, arg) => {
-  mediaInfoModule.updateStatus(arg);
-});
 ipcMain.on(globalEvents.storeChanged, (event, arg) => {
   mainWindow.setMenuBarVisibility(store.get(settings.menuBar));
 
-  if(store.get(settings.enableDiscord) && !discordModule.rpc) {
+  if (store.get(settings.enableDiscord) && !discordModule.rpc) {
     discordModule.initRPC();
-  } else if(!store.get(settings.enableDiscord) && discordModule.rpc) {
+  } else if (!store.get(settings.enableDiscord) && discordModule.rpc) {
     discordModule.unRPC();
   }
 });

src/preload.js

@@ -1,4 +1,4 @@
-const { setTitle, getTitle } = require("./scripts/window-functions");
+const { setTitle } = require("./scripts/window-functions");
 const { dialog, process } = require("electron").remote;
 const { store, settings } = require("./scripts/settings");
 const { ipcRenderer } = require("electron");
@@ -11,6 +11,11 @@ const notifier = require("node-notifier");
 const notificationPath = `${app.getPath("userData")}/notification.jpg`;
 let currentSong = "";
 let player;
+let currentPlayStatus = statuses.paused;
+let progressBarTime;
+let currentTimeChanged = false;
+let currentTime;
+let currentURL = undefined;
 
 const elements = {
   play: '*[data-test="play"]',
@@ -18,7 +23,7 @@ const elements = {
   next: '*[data-test="next"]',
   previous: 'button[data-test="previous"]',
   title: '*[data-test^="footer-track-title"]',
-  artists: '*[class^="css-14o5h2y"]',
+  artists: '*[class^="elemental__text elemental__text css-oxcos"]',
   home: '*[data-test="menu--home"]',
   back: '[class^="backwardButton"]',
   forward: '[class^="forwardButton"]',
@@ -30,7 +35,9 @@ const elements = {
   settings: '*[data-test^="open-settings"]',
   media: '*[data-test="current-media-imagery"]',
   image: "img",
-  url: 'a[href*="/track/"]',
+  current: '*[data-test="current-time"]',
+  duration: '*[data-test="duration-time"]',
+  bar: '*[data-test="progress-bar"]',
 
   /**
    * Get an element from the dom
@@ -200,9 +207,9 @@ function addIPCEventListeners() {
 /**
  * Update the current status of tidal (e.g playing or paused)
  */
-function updateStatus() {
+function getCurrentlyPlayingStatus() {
   let pause = elements.get("pause");
-  let status;
+  let status = undefined;
 
   // if pause button is visible tidal is playing
   if (pause) {
@@ -210,73 +217,126 @@ function updateStatus() {
   } else {
     status = statuses.paused;
   }
+  return status;
+}
+
+/**
+ * Update Tidal-hifi's media info
+ *
+ * @param {*} options
+ */
+function updateMediaInfo(options, notify) {
+  if (options) {
+    ipcRenderer.send(globalEvents.updateInfo, options);
+    store.get(settings.notifications) && notify && notifier.notify(options);
 
-  if (status) {
-    ipcRenderer.send(globalEvents.updateStatus, status);
     if (player) {
-      player.playbackStatus = status == statuses.paused ? "Paused" : "Playing";
+      player.metadata = {
+        ...player.metadata,
+        ...{
+          "xesam:title": options.title,
+          "xesam:artist": [options.artists],
+          "mpris:artUrl": options.image,
+        },
+      };
+      player.playbackStatus = options.status == statuses.paused ? "Paused" : "Playing";
     }
   }
 }
 
+/**
+ * Checks if Tidal is playing a video or song by grabbing the "a" element from the title.
+ * If it's a song it sets the track URL as currentURL, If it's a video it will set currentURL to undefined.
+ */
+function updateURL() {
+  const URLelement = elements.get("title").querySelector("a");
+  switch (URLelement) {
+    case null:
+      currentURL = undefined;
+      break;
+    default:
+      const id = URLelement.href.replace(/[^0-9]/g, "");
+      currentURL = `https://tidal.com/browse/track/${id}`;
+      break;
+  }
+}
+
 /**
  * Watch for song changes and update title + notify
  */
 setInterval(function () {
   const title = elements.getText("title");
-  const url = elements.get("url").href.replace(/[^0-9]/g, "");
   const artists = elements.getText("artists");
+  const current = elements.getText("current");
+  const duration = elements.getText("duration");
+  const progressBarcurrentTime = elements.get("bar").getAttribute("aria-valuenow");
   const songDashArtistTitle = `${title} - ${artists}`;
+  const currentStatus = getCurrentlyPlayingStatus();
+  const options = {
+    title,
+    message: artists,
+    status: currentStatus,
+    url: currentURL,
+    current: current,
+    duration: duration,
+  };
 
-  updateStatus();
+  const playStatusChanged = currentStatus !== currentPlayStatus;
+  const progressBarTimeChanged = progressBarcurrentTime !== progressBarTime;
+  const titleOrArtistChanged = currentSong !== songDashArtistTitle;
 
-  if (getTitle() !== songDashArtistTitle) {
+  if (titleOrArtistChanged || playStatusChanged || progressBarTimeChanged || currentTimeChanged) {
+    // update title, url and play info with new info
     setTitle(songDashArtistTitle);
+    updateURL();
+    currentSong = songDashArtistTitle;
+    currentPlayStatus = currentStatus;
 
-    if (currentSong !== songDashArtistTitle) {
-      currentSong = songDashArtistTitle;
-      const image = elements.getSongIcon();
-
-      const options = {
-        title,
-        message: artists,
-        url: `https://tidal.com/browse/track/${url}`,
-      };
-      new Promise((resolve, reject) => {
-        if (image.startsWith("http")) {
-          downloadFile(image, notificationPath).then(
-            () => {
-              options.icon = notificationPath;
-              resolve();
-            },
-            () => {
-              // if the image can't be downloaded then continue without it
-              resolve();
-            }
-          );
-        } else {
-          // if the image can't be found on the page continue without it
-          resolve();
-        }
-      }).then(
-        () => {
-          ipcRenderer.send(globalEvents.updateInfo, options);
-          store.get(settings.notifications) && notifier.notify(options);
-
-          if (player) {
-            player.metadata = {
-              ...player.metadata,
-              ...{
-                "xesam:title": title,
-                "xesam:artist": [artists],
-                "mpris:artUrl": image,
-              },
-            };
-          }
-        },
-        () => {}
-      );
+    // check progress bar value and make sure current stays up to date after switch
+    if(progressBarTime != progressBarcurrentTime && !titleOrArtistChanged) {
+      progressBarTime = progressBarcurrentTime;
+      currentTime = options.current;
+      options.duration = duration;
+      currentTimeChanged = true;
     }
+
+    if(currentTimeChanged) {
+      if(options.current == currentTime && currentStatus != "paused") return;
+      currentTime = options.current;
+      currentTimeChanged = false;
+    }
+
+    // make sure current is set to 0 if title changes
+    if(titleOrArtistChanged) {
+      options.current = "0:00";
+      currentTime = options.current;
+      progressBarTime = progressBarcurrentTime;
+    }
+
+    const image = elements.getSongIcon();
+
+    new Promise((resolve) => {
+      if (image.startsWith("http")) {
+        downloadFile(image, notificationPath).then(
+          () => {
+            options.icon = notificationPath;
+            resolve();
+          },
+          () => {
+            // if the image can't be downloaded then continue without it
+            resolve();
+          }
+        );
+      } else {
+        // if the image can't be found on the page continue without it
+        resolve();
+      }
+    }).then(
+      () => {
+        updateMediaInfo(options, titleOrArtistChanged);
+      },
+      () => {}
+    );
   }
 }, 200);
 

src/scripts/discord.js

@@ -1,52 +1,81 @@
 const discordrpc = require("discord-rpc");
-const clientId = '833617820704440341';
+const { app, ipcMain } = require("electron");
+const globalEvents = require("../constants/globalEvents");
+const clientId = "833617820704440341";
 const mediaInfoModule = require("./mediaInfo");
-
 const discordModule = [];
 
-let discord;
+function timeToSeconds(timeArray) {
+  let minutes = (timeArray[0] * 1);
+  let seconds = (minutes * 60) + (timeArray[1] * 1);
+  return seconds;
+}
+
 let rpc;
+const observer = (event, arg) => {
+  if (mediaInfoModule.mediaInfo.status == "paused" && rpc) {
+    rpc.setActivity(idleStatus);
+  } else if (rpc) {
+    const currentSeconds = timeToSeconds(mediaInfoModule.mediaInfo.current.split(":"));
+    const durationSeconds = timeToSeconds(mediaInfoModule.mediaInfo.duration.split(":"));
+    const date = new Date();
+    const now = date.getTime() / 1000 | 0;
+    const remaining = date.setSeconds(date.getSeconds() + (durationSeconds - currentSeconds));
+    if (mediaInfoModule.mediaInfo.url) {
+      rpc.setActivity({
+        ...idleStatus,
+        ...{
+          details: `Listening to ${mediaInfoModule.mediaInfo.title}`,
+          state: mediaInfoModule.mediaInfo.artist,
+          startTimestamp: parseInt(now),
+          endTimestamp: parseInt(remaining),
+          buttons: [{ label: "Play on Tidal", url: mediaInfoModule.mediaInfo.url }],
+        },
+      });
+    } else {
+      rpc.setActivity({
+        ...idleStatus,
+        ...{
+          details: `Watching ${mediaInfoModule.mediaInfo.title}`,
+          state: mediaInfoModule.mediaInfo.artist,
+          startTimestamp: parseInt(now),
+          endTimestamp: parseInt(remaining),
+        },
+      });
+    }
+  }
+};
 
 const idleStatus = {
-    details: `Browsing Tidal`,
-    largeImageKey: 'tidal-hifi-icon',
-    largeImageText: 'Tidal HiFi 2.0.0',
-    instance: false,
-}
+  details: `Browsing Tidal`,
+  largeImageKey: "tidal-hifi-icon",
+  largeImageText: `Tidal HiFi ${app.getVersion()}`,
+  instance: false,
+};
 
+/**
+ * Set up the discord rpc and listen on globalEvents.updateInfo
+ */
 discordModule.initRPC = function () {
-    rpc = new discordrpc.Client({ transport: 'ipc' });
-    rpc.login({ clientId }).catch(console.error);
-    discordModule.rpc = rpc;
+  rpc = new discordrpc.Client({ transport: "ipc" });
+  rpc.login({ clientId }).catch(console.error);
+  discordModule.rpc = rpc;
 
-    rpc.on('ready', () => {
-        rpc.setActivity(idleStatus);
-    })
-
-    discord = setInterval(() => {
-        if (mediaInfoModule.mediaInfo.status == 'paused' && rpc) {
-            rpc.setActivity(idleStatus);
-        } else if (rpc) {
-            rpc.setActivity({
-                details: `Listening to ${mediaInfoModule.mediaInfo.title}`,
-                state: mediaInfoModule.mediaInfo.artist,
-                largeImageKey: 'tidal-hifi-icon',
-                largeImageText: 'Tidal HiFi 2.0.0',
-                buttons: [
-                    { label: "Play on Tidal", url: mediaInfoModule.mediaInfo.url }
-                ],
-                instance: false,
-            });
-        }
-    }, 15e3);
-}
+  rpc.on("ready", () => {
+    rpc.setActivity(idleStatus);
+  });
+  ipcMain.on(globalEvents.updateInfo, observer);
+};
 
+/**
+ * Remove any RPC connection with discord and remove the event listener on globalEvents.updateInfo
+ */
 discordModule.unRPC = function () {
-    clearInterval(discord);
-    rpc.clearActivity();
-    rpc.destroy();
-    rpc = false;
-    discordModule.rpc = rpc;
-}
+  rpc.clearActivity();
+  rpc.destroy();
+  rpc = false;
+  discordModule.rpc = rpc;
+  ipcMain.removeListener(globalEvents.updateInfo, observer);
+};
 
 module.exports = discordModule;

src/scripts/mediaInfo.js

@@ -5,7 +5,9 @@ const mediaInfo = {
   artist: "",
   icon: "",
   status: statuses.paused,
-  url: ""
+  url: "",
+  current: "",
+  duration: ""
 };
 const mediaInfoModule = {
   mediaInfo,
@@ -14,20 +16,14 @@ const mediaInfoModule = {
 /**
  * Update artist and song info in the mediaInfo constant
  */
-mediaInfoModule.update = function(arg) {
+mediaInfoModule.update = function (arg) {
   mediaInfo.title = propOrDefault(arg.title);
   mediaInfo.artist = propOrDefault(arg.message);
   mediaInfo.icon = propOrDefault(arg.icon);
   mediaInfo.url = propOrDefault(arg.url);
-};
-
-/**
- * Update tidal's status in the mediaInfo constant
- */
-mediaInfoModule.updateStatus = function(status) {
-  if (Object.values(statuses).includes(status)) {
-    mediaInfo.status = status;
-  }
+  mediaInfo.status = propOrDefault(arg.status);
+  mediaInfo.current = propOrDefault(arg.current);
+  mediaInfo.duration = propOrDefault(arg.duration);
 };
 
 /**