added several dev improvements

.vscode/settings.json

@@ -5,6 +5,7 @@
     "hifi",
     "playpause",
     "rescrobbler",
+    "Songwhip",
     "trackid",
     "tracklist",
     "widevine",

CHANGELOG.md

@@ -4,6 +4,13 @@ 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.4.0
+
+- [DEV]:
+  - added a logger to log into STDout
+  - added "watchStart" which will automatically restart electron when it detects a source code change
+  - added "listen.tidal.com-parsing-scripts" folder with a script to verify whether all elements (in the main preload.ts) are present on the page
+
 ## 5.3.0
 
 - SPKChaosPhoenix updated the beautiful Tokyo Night theme:

listen.tidal.com-parsing-scripts/verifyElements.js

@@ -0,0 +1,43 @@
+// for some dumb reason `listen.tidal.com` has disabled console.log
+// we can simply return an array with values though...
+// run this on a playlist or mix page and observe the result
+// NOTE: play & pause can't live together so one or the other will throw an error
+(() => {
+  let elements = {
+    play: '*[data-test="play"]',
+    pause: '*[data-test="pause"]',
+    next: '*[data-test="next"]',
+    previous: 'button[data-test="previous"]',
+    title: '*[data-test^="footer-track-title"]',
+    artists: '*[data-test^="grid-item-detail-text-title-artist"]',
+    home: '*[data-test="menu--home"]',
+    back: '[title^="Back"]',
+    forward: '[title^="Next"]',
+    search: '[class^="searchField"]',
+    shuffle: '*[data-test="shuffle"]',
+    repeat: '*[data-test="repeat"]',
+    account: '*[data-test^="profile-image-button"]',
+    media: '*[data-test="current-media-imagery"]',
+    image: "img",
+    current: '*[data-test="current-time"]',
+    duration: '*[data-test="duration"]',
+    bar: '*[data-test="progress-bar"]',
+    footer: "#footerPlayer",
+    mediaItem: "[data-type='mediaItem']",
+    album_header_title: '.header-details [data-test="title"]',
+    currentlyPlaying: "[class^='isPlayingIcon'], [data-test-is-playing='true']",
+    album_name_cell: '[class^="album"]',
+    tracklist_row: '[data-test="tracklist-row"]',
+    volume: '*[data-test="volume"]',
+  };
+
+  let results = [];
+
+  Object.entries(elements).forEach(([key, value]) => {
+    const returnValue = document.querySelector(`${value}`);
+    if (!returnValue) {
+      results.push(`element ${key} not found`);
+    }
+  });
+  return results;
+})();

package-lock.json

@@ -31,6 +31,7 @@
         "eslint": "^8.39.0",
         "js-yaml": "^4.1.0",
         "markdown-toc": "^1.2.0",
+        "nodemon": "^3.0.1",
         "prettier": "^2.8.8",
         "stylelint": "^15.10.1",
         "stylelint-config-standard": "^33.0.0",
@@ -3425,7 +3426,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
       }
@@ -4093,6 +4093,25 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4114,7 +4133,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -6127,6 +6145,113 @@
         "node": ">=10"
       }
     },
+    "node_modules/nodemon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.0.1.tgz",
+      "integrity": "sha512-g9AZ7HmkhQkqXkRc20w+ZfQ73cHLbE8hnPbtaFbFtCumZsjyMhKk9LajQ07U5Ux28lvFjZ5X7HvWR1xzU8jHVw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^3.2.7",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/nodemon/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/nodemon/node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/nodemon/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/noms": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/noms/-/noms-0.0.0.tgz",
@@ -6781,6 +6906,12 @@
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
       "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
     },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -8367,6 +8498,33 @@
       "integrity": "sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ==",
       "dev": true
     },
+    "node_modules/touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "dev": true,
+      "dependencies": {
+        "nopt": "~1.0.10"
+      },
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/touch/node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "dev": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -8517,6 +8675,12 @@
         "node": ">=12.20"
       }
     },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true
+    },
     "node_modules/unique-filename": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz",

package.json

@@ -4,7 +4,8 @@
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "ts-dist/main.js",
   "scripts": {
-    "start": "electron .",
+    "start": "electron --inspect=0.0.0.0:5858 .",
+    "watchStart": "nodemon dist -x \"npm run start\"",
     "compile": "tsc && npm run sass-and-copy",
     "watch": "tsc-watch --onSuccess \"npm run sass-and-copy\"",
     "copy-files": "copyfiles -u 1 --exclude './src/**/*.ts' --exclude './src/**/*.scss' \"./src/**/*\" ts-dist",
@@ -57,6 +58,7 @@
     "eslint": "^8.39.0",
     "js-yaml": "^4.1.0",
     "markdown-toc": "^1.2.0",
+    "nodemon": "^3.0.1",
     "prettier": "^2.8.8",
     "stylelint": "^15.10.1",
     "stylelint-config-standard": "^33.0.0",

src/constants/globalEvents.ts

@@ -10,4 +10,5 @@ export const globalEvents = {
   showSettings: "showSettings",
   storeChanged: "storeChanged",
   error: "error",
+  log: "log",
 };

src/features/logger.ts

@@ -0,0 +1,33 @@
+import { IpcMain, IpcRenderer } from "electron";
+import { globalEvents } from "../constants/globalEvents";
+
+export class Logger {
+  /**
+   *
+   * @param ipcRenderer renderer IPC client so we can send messages to the main thread
+   */
+  constructor(private ipcRenderer: IpcRenderer) {}
+
+  /**
+   * Subscribe to watch for logs from the IPC client
+   * @param ipcMain main thread IPC client so we can subscribe to events
+   */
+  public static watch(ipcMain: IpcMain) {
+    ipcMain.on(globalEvents.log, (event, content, object) => {
+      console.log(content, JSON.stringify(object, null, 2));
+    });
+  }
+
+  /**
+   * Log content to STDOut
+   * @param content
+   * @param object js(on) object that will be prettyPrinted
+   */
+  public log(content: string, object: object = {}) {
+    if (this.ipcRenderer) {
+      this.ipcRenderer.send(globalEvents.log, { content, object });
+    } else {
+      console.log(`${content} \n ${JSON.stringify(object, null, 2)}`);
+    }
+  }
+}

src/main.ts

@@ -26,6 +26,7 @@ import {
 import { settings } from "./constants/settings";
 import { addTray, refreshTray } from "./scripts/tray";
 import { MediaInfo } from "./models/mediaInfo";
+import { Logger } from "./features/logger";
 const tidalUrl = "https://listen.tidal.com";
 
 initialize();
@@ -220,3 +221,5 @@ ipcMain.on(globalEvents.storeChanged, () => {
 ipcMain.on(globalEvents.error, (event) => {
   console.log(event);
 });
+
+Logger.watch(ipcMain);

src/pages/settings/preload.ts

@@ -1,4 +1,4 @@
-import remote, { app } from "@electron/remote";
+import { app } from "@electron/remote";
 import { ipcRenderer, shell } from "electron";
 import fs from "fs";
 import { globalEvents } from "../../constants/globalEvents";
@@ -107,8 +107,8 @@ function hide() {
  * Restart tidal-hifi after changes
  */
 function restart() {
-  remote.app.relaunch();
+  app.relaunch();
-  remote.app.exit();
+  app.exit();
 }
 
 /**