Merge pull request #331 from Mastermindzh/feature/electron-28-and-like-api-call

5.8.0
2024-11-22 13:32:42 +01:00 · 2024-01-07 16:01:17 +01:00 · 2024-01-07 16:01:17 +01:00 · 5bd28913da
commit 5bd28913da
parent 98f75418eb 5240f1eeeb
18 changed files with 1310 additions and 2409 deletions
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -5,6 +5,9 @@
  "extends": [
    "stylelint-config-standard-scss"
  ],
+  "ignoreFiles": [
+    "src/themes/**.scss"
+  ],
  "rules": {
    "prettier/prettier": true,
    "scss/at-extend-no-missing-placeholder": null,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,6 +4,22 @@ 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).

+## [5.8.0]
+
+- Updated Electron to 28.1.1 (fixes [325](https://github.com/Mastermindzh/tidal-hifi/issues/325))
+- Updated dependencies to latest
+  - added theme files to stylelint ignore
+  - fixed other stylelint errors
+
+- Added functionality to favorite a song (fixes [#323](https://github.com/Mastermindzh/tidal-hifi/issues/323))
+  - Added a hotkey to favorite ("Add to collection") songs: Control+a
+  - Added the "favorite" field in the `mediaInfo` and the API `/current` endpoint
+  - Added an endpoint to toggle favoriting a song: `http://localhost:47836/favorite/toggle`
+
+- Fixed wrong "end time stamp" for currently playing song (fixes [#282](https://github.com/Mastermindzh/tidal-hifi/issues/282))
+  - Affected the API + all integrations
+  - As requested we also added toggle to sync the timestamps to Discord (default = true)
+
 ## [5.7.1]

 - Fixed mpris not being set up correctly due to capitalization of the instance name.
--- a/build/electron-builder.base.yml
+++ b/build/electron-builder.base.yml
@ -1,7 +1,7 @@
 appId: com.rickvanlieshout.tidal-hifi
-electronVersion: 24.1.2
+electronVersion: 28.1.1
 electronDownload:
-  version: 24.1.2+wvcus
+  version: 28.1.1+wvcus
  mirror: https://github.com/castlabs/electron-releases/releases/download/v
 snap:
  plugs:
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,12 +1,13 @@
 {
  "name": "tidal-hifi",
-  "version": "5.7.1",
+  "version": "5.8.0",
  "description": "Tidal on Electron with widevine(hifi) support",
  "main": "ts-dist/main.js",
  "scripts": {
    "start": "electron --inspect=0.0.0.0:5858 .",
    "watchStart": "nodemon dist -x \"npm run start\"",
    "compile": "tsc && npm run sass-and-copy",
+    "deps": "npm run watch",
    "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
    "copy-files": "copyfiles -u 1 --exclude './src/**/*.ts' --exclude './src/**/*.scss' \"./src/**/*\" ts-dist",
    "copy-themes-dev": "copyfiles -u 1 \"./themes/*\" node_modules/electron/dist/resources",
@ -38,38 +39,38 @@
  "homepage": "https://github.com/Mastermindzh/tidal-hifi",
  "license": "MIT",
  "dependencies": {
-    "@electron/remote": "^2.1.0",
-    "axios": "^1.6.4",
+    "@electron/remote": "^2.1.1",
+    "axios": "^1.6.5",
    "discord-rpc": "^4.0.1",
    "electron-store": "^8.1.0",
    "express": "^4.18.2",
-    "hotkeys-js": "^3.12.1",
+    "hotkeys-js": "^3.13.3",
    "mpris-service": "^2.1.2",
    "request": "^2.88.2",
-    "sass": "^1.69.5"
+    "sass": "^1.69.7"
  },
  "devDependencies": {
    "@mastermindzh/prettier-config": "^1.0.0",
-    "@types/discord-rpc": "^4.0.5",
-    "@types/express": "^4.17.17",
-    "@types/node": "^20.4.4",
-    "@types/request": "^2.48.8",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
+    "@types/discord-rpc": "^4.0.8",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.10.6",
+    "@types/request": "^2.48.12",
+    "@typescript-eslint/eslint-plugin": "^6.18.0",
+    "@typescript-eslint/parser": "^6.18.0",
    "copyfiles": "^2.4.1",
-    "electron": "git+https://github.com/castlabs/electron-releases.git#v24.1.2+wvcus",
-    "electron-builder": "^24.4.0",
-    "eslint": "^8.45.0",
+    "electron": "git+https://github.com/castlabs/electron-releases#v28.1.1+wvcus",
+    "electron-builder": "^24.9.1",
+    "eslint": "^8.56.0",
    "js-yaml": "^4.1.0",
    "markdown-toc": "^1.2.0",
-    "nodemon": "^3.0.1",
-    "prettier": "^3.0.0",
-    "stylelint": "^15.10.2",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-prettier": "^4.0.0",
+    "nodemon": "^3.0.2",
+    "prettier": "^3.1.1",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-prettier": "^5.0.0",
    "tsc-watch": "^6.0.4",
-    "typescript": "^5.1.6"
+    "typescript": "^5.3.3"
  },
  "prettier": "@mastermindzh/prettier-config"
 }
--- a/scripts/verifyElements.js
+++ b/scripts/verifyElements.js
@ -16,11 +16,12 @@
    search: '[class^="searchField"]',
    shuffle: '*[data-test="shuffle"]',
    repeat: '*[data-test="repeat"]',
-    account: '*[data-test^="profile-image-button"]',
+    account: '*[class^="profileOptions"]',
+    settings: '*[data-test^="open-settings"]',
    media: '*[data-test="current-media-imagery"]',
    image: "img",
    current: '*[data-test="current-time"]',
-    duration: '*[data-test="duration"]',
+    duration: '*[class^=playbackControlsContainer] *[data-test="duration"]',
    bar: '*[data-test="progress-bar"]',
    footer: "#footerPlayer",
    mediaItem: "[data-type='mediaItem']",
@ -29,6 +30,7 @@
    album_name_cell: '[class^="album"]',
    tracklist_row: '[data-test="tracklist-row"]',
    volume: '*[data-test="volume"]',
+    favorite: '*[data-test="footer-favorite-button"]',
  };

  let results = [];
--- a/src/constants/globalEvents.ts
+++ b/src/constants/globalEvents.ts
@ -12,4 +12,5 @@ export const globalEvents = {
  error: "error",
  whip: "whip",
  log: "log",
+  toggleFavorite: "toggleFavorite",
 };
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@ -23,6 +23,7 @@ export const settings = {
  discord: {
    detailsPrefix: "discord.detailsPrefix",
    buttonText: "discord.buttonText",
+    includeTimestamps: "discord.includeTimestamps",
  },
  ListenBrainz: {
    root: "ListenBrainz",
--- a/src/models/mediaInfo.ts
+++ b/src/models/mediaInfo.ts
@ -10,4 +10,5 @@ export interface MediaInfo {
  current: string;
  duration: string;
  image: string;
+  favorite: boolean;
 }
--- a/src/models/options.ts
+++ b/src/models/options.ts
@ -9,4 +9,5 @@ export interface Options {
  "app-name": string;
  image: string;
  icon: string;
+  favorite: boolean;
 }
--- a/src/pages/settings/preload.ts
+++ b/src/pages/settings/preload.ts
@ -48,6 +48,7 @@ let adBlock: HTMLInputElement,
  listenbrainz_delay: HTMLInputElement,
  enableWaylandSupport: HTMLInputElement,
  discord_details_prefix: HTMLInputElement,
+  discord_include_timestamps: HTMLInputElement,
  discord_button_text: HTMLInputElement;

 addCustomCss(app);
@ -135,6 +136,7 @@ function refreshSettings() {
    ListenBrainzToken.value = settingsStore.get(settings.ListenBrainz.token);
    listenbrainz_delay.value = settingsStore.get(settings.ListenBrainz.delay);
    discord_details_prefix.value = settingsStore.get(settings.discord.detailsPrefix);
+    discord_include_timestamps.checked = settingsStore.get(settings.discord.includeTimestamps);
    discord_button_text.value = settingsStore.get(settings.discord.buttonText);

    // set state of all switches with additional settings
@ -246,6 +248,7 @@ window.addEventListener("DOMContentLoaded", () => {
  ListenBrainzAPI = get("ListenBrainzAPI");
  ListenBrainzToken = get("ListenBrainzToken");
  discord_details_prefix = get("discord_details_prefix");
+  discord_include_timestamps = get("discord_include_timestamps");
  listenbrainz_delay = get("listenbrainz_delay");
  discord_button_text = get("discord_button_text");

@ -280,5 +283,6 @@ window.addEventListener("DOMContentLoaded", () => {
  addInputListener(ListenBrainzToken, settings.ListenBrainz.token);
  addInputListener(listenbrainz_delay, settings.ListenBrainz.delay);
  addInputListener(discord_details_prefix, settings.discord.detailsPrefix);
+  addInputListener(discord_include_timestamps, settings.discord.includeTimestamps);
  addInputListener(discord_button_text, settings.discord.buttonText);
 });
--- a/src/pages/settings/settings.html
+++ b/src/pages/settings/settings.html
@ -216,6 +216,17 @@
              </label>
            </div>
            <div id="discord_options">
+              <div class="group__option" class="hidden">
+                <div class="group__description">
+                  <h4>Include timestamps</h4>
+                  <p>Show current/end playtime in the Discord client</p>
+                </div>
+                <label class="switch">
+                  <input id="discord_include_timestamps" type="checkbox" />
+                  <span class="switch__slider"></span>
+                </label>
+              </div>
+
              <div class="group__option" class="hidden">
                <div class="group__description">
                  <h4>Details prefix</h4>
@ -389,7 +400,7 @@
          <img alt="tidal icon" class="about-section__icon" src="./icon.png" />
          <h4>TIDAL Hi-Fi</h4>
          <div class="about-section__version">
-            <a href="">5.7.1</a>
+            <a href="https://github.com/Mastermindzh/tidal-hifi/releases/tag/5.8.0">5.8.0</a>
          </div>
          <div class="about-section__links">
            <a href="https://github.com/mastermindzh/tidal-hifi/" class="about-section__button">Github <i
--- a/src/pages/settings/settings.scss
+++ b/src/pages/settings/settings.scss
@ -323,16 +323,19 @@ html {
    max-width: 500px;
    margin: -15px auto 0;
  }
+
  &__table {
    width: 120px;
-    margin: 0 auto 0;
+    margin: 0 auto;

    td {
      text-align: left;
    }
  }
+
  &__version {
-    margin: -10px 0px 30px 0px;
+    margin: -10px 0 30px;
+
    a {
      background-color: $tidal-grey-darker;
      border: none;
@ -349,6 +352,7 @@ html {
  &__links {
    width: 300px;
    margin: 0 auto;
+
    a {
      border-radius: 10px;
      border: none;
@ -418,10 +422,11 @@ html {
  align-items: center;
  width: 100%;
  max-width: 100%;
-  padding: 25px 0 25px 0px;
+  padding: 25px 0;
  border: 1px dashed $tidal-grey;
  border-radius: 3px;
  transition: 0.2s;
+
  &.is-active {
    background-color: $black;
  }
@ -459,6 +464,7 @@ html {
  width: 100%;
  cursor: pointer;
  opacity: 0;
+
  &:focus {
    outline: none;
  }
--- a/src/preload.ts
+++ b/src/preload.ts
@ -45,7 +45,7 @@ const elements = {
  media: '*[data-test="current-media-imagery"]',
  image: "img",
  current: '*[data-test="current-time"]',
-  duration: '*[data-test="duration"]',
+  duration: '*[class^=playbackControlsContainer] *[data-test="duration"]',
  bar: '*[data-test="progress-bar"]',
  footer: "#footerPlayer",
  mediaItem: "[data-type='mediaItem']",
@ -54,6 +54,7 @@ const elements = {
  album_name_cell: '[class^="album"]',
  tracklist_row: '[data-test="tracklist-row"]',
  volume: '*[data-test="volume"]',
+  favorite: '*[data-test="footer-favorite-button"]',
  /**
   * Get an element from the dom
   * @param {*} key key in elements object to fetch
@ -131,6 +132,10 @@ const elements = {
    return this.get("volume").getAttribute("aria-checked") === "false"; // it's muted if aria-checked is false
  },

+  isFavorite: function () {
+    return this.get("favorite").getAttribute("aria-checked") === "true";
+  },
+
  /**
   * Shorthand function to get the text of a dom element
   * @param {*} key key in elements object to fetch
@ -208,6 +213,10 @@ function addHotKeys() {
      handleLogout();
    });

+    addHotkey("Control+a", function () {
+      elements.click("favorite");
+    });
+
    addHotkey("Control+h", function () {
      elements.click("home");
    });
@ -306,6 +315,9 @@ function addIPCEventListeners() {
        case globalEvents.pause:
          elements.click("pause");
          break;
+        case globalEvents.toggleFavorite:
+          elements.click("favorite");
+          break;
        default:
          break;
      }
@ -516,6 +528,7 @@ setInterval(function () {
    "app-name": appName,
    image: "",
    icon: "",
+    favorite: elements.isFavorite(),
  };

  const titleOrArtistsChanged = currentSong !== songDashArtistTitle;
--- a/src/scripts/discord.ts
+++ b/src/scripts/discord.ts
@ -30,30 +30,38 @@ const observer = () => {
      settingsStore.get<string, string>(settings.discord.detailsPrefix) ?? "Listening to ";
    const buttonText =
      settingsStore.get<string, string>(settings.discord.buttonText) ?? "Play on TIDAL";
-    if (mediaInfo.url) {
-      rpc.setActivity({
+    const includeTimestamps =
+      settingsStore.get<string, boolean>(settings.discord.includeTimestamps) ?? true;
+
+    let activity = {
      ...idleStatus,
+      ...{
+        startTimestamp: includeTimestamps ? now : undefined,
+        endTimestamp: includeTimestamps ? remaining : undefined,
+      },
+    };
+    if (mediaInfo.url) {
+      activity = {
+        ...activity,
        ...{
          details: `${detailsPrefix}${mediaInfo.title}`,
          state: mediaInfo.artists ? mediaInfo.artists : "unknown artist(s)",
-          startTimestamp: now,
-          endTimestamp: remaining,
          largeImageKey: mediaInfo.image,
          largeImageText: mediaInfo.album ? mediaInfo.album : `${idleStatus.largeImageText}`,
          buttons: [{ label: buttonText, url: mediaInfo.url }],
        },
-      });
+      };
    } else {
-      rpc.setActivity({
-        ...idleStatus,
+      activity = {
+        ...activity,
        ...{
          details: `Watching ${mediaInfo.title}`,
          state: mediaInfo.artists,
-          startTimestamp: now,
-          endTimestamp: remaining,
        },
-      });
+      };
    }
+
+    rpc.setActivity(activity);
  }
 };

--- a/src/scripts/express.ts
+++ b/src/scripts/express.ts
@ -40,6 +40,9 @@ export const startExpress = (mainWindow: BrowserWindow) => {

  if (settingsStore.get(settings.playBackControl)) {
    expressApp.get("/play", (req, res) => handleGlobalEvent(res, globalEvents.play));
+    expressApp.post("/favorite/toggle", (req, res) =>
+      handleGlobalEvent(res, globalEvents.toggleFavorite)
+    );
    expressApp.get("/pause", (req, res) => handleGlobalEvent(res, globalEvents.pause));
    expressApp.get("/next", (req, res) => handleGlobalEvent(res, globalEvents.next));
    expressApp.get("/previous", (req, res) => handleGlobalEvent(res, globalEvents.previous));
--- a/src/scripts/mediaInfo.ts
+++ b/src/scripts/mediaInfo.ts
@ -11,6 +11,7 @@ export const mediaInfo = {
  current: "",
  duration: "",
  image: "tidal-hifi-icon",
+  favorite: false,
 };

 export const updateMediaInfo = (arg: MediaInfo) => {
@ -23,6 +24,7 @@ export const updateMediaInfo = (arg: MediaInfo) => {
  mediaInfo.current = propOrDefault(arg.current);
  mediaInfo.duration = propOrDefault(arg.duration);
  mediaInfo.image = propOrDefault(arg.image);
+  mediaInfo.favorite = arg.favorite;
 };

 /**
--- a/src/scripts/settings.ts
+++ b/src/scripts/settings.ts
@ -21,6 +21,7 @@ export const settingsStore = new Store({
    discord: {
      detailsPrefix: "Listening to ",
      buttonText: "Play on Tidal",
+      includeTimestamps: true,
    },
    ListenBrainz: {
      enabled: false,
@ -61,6 +62,13 @@ export const settingsStore = new Store({
        migrationStore.get(settings.ListenBrainz.delay) ?? 5000
      );
    },
+    "5.8.0": (migrationStore) => {
+      console.log("running migrations for 5.8.0");
+      migrationStore.set(
+        settings.discord.includeTimestamps,
+        migrationStore.get(settings.discord.includeTimestamps) ?? true
+      );
+    },
  },
 });