feat: added wayland support. fixes #262 #157

CHANGELOG.md

@@ -4,9 +4,10 @@ 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).
 
-## [next]
+## [5.6.0]
 
-- Made it clear in the readme that this tidal-hifi client supports High & Max audio settings. fixes #261
+- Added support for Wayland (on by default) fixes [#262](https://github.com/Mastermindzh/tidal-hifi/issues/262) and [#157](https://github.com/Mastermindzh/tidal-hifi/issues/157)
+- Made it clear in the readme that this tidal-hifi client supports High & Max audio settings. fixes [#261](https://github.com/Mastermindzh/tidal-hifi/issues/261)
 - Fixed bug with theme files from user directory trying to load: "an error occurred reading the theme file"
 - Fixed: config flags not being set correctly
 - [DEV]:
@@ -30,7 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - SPKChaosPhoenix updated the beautiful Tokyo Night theme:
 
-![](./docs/images/tokyo-night.png)
+![tidal with the tokyo night theme applied](./docs/images/tokyo-night.png)
 
 ## 5.2.0
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tidal-hifi",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tidal-hifi",
-      "version": "5.5.0",
+      "version": "5.6.0",
       "license": "MIT",
       "dependencies": {
         "@electron/remote": "^2.0.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tidal-hifi",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "Tidal on Electron with widevine(hifi) support",
   "main": "ts-dist/main.js",
   "scripts": {

src/constants/flags.ts

@@ -1,4 +1,9 @@
-export const flags: { [key: string]: { flag: string; value?: string } } = {
+export const flags: { [key: string]: { flag: string; value?: string }[] } = {
-  gpuRasterization: { flag: "enable-gpu-rasterization", value: undefined },
+  gpuRasterization: [{ flag: "enable-gpu-rasterization", value: undefined }],
-  disableHardwareMediaKeys: { flag: "disable-features", value: "HardwareMediaKeyHandling" },
+  disableHardwareMediaKeys: [{ flag: "disable-features", value: "HardwareMediaKeyHandling" }],
+  enableWaylandSupport: [
+    { flag: "enable-features", value: "UseOzonePlatform" },
+    { flag: "ozone-platform-hint", value: "auto" },
+    { flag: "enable-features", value: "WaylandWindowDecorations" },
+  ],
 };

src/constants/settings.ts

@@ -30,6 +30,7 @@ export const settings = {
     root: "flags",
     disableHardwareMediaKeys: "flags.disableHardwareMediaKeys",
     gpuRasterization: "flags.gpuRasterization",
+    enableWaylandSupport: "flags.enableWaylandSupport",
   },
   menuBar: "menuBar",
   minimizeOnClose: "minimizeOnClose",

src/features/flags/flags.ts

@@ -20,10 +20,10 @@ export function setManagedFlagsFromSettings(app: App) {
   if (flagsFromSettings) {
     for (const [key, value] of Object.entries(flagsFromSettings)) {
       if (value) {
-        const { flag, value } = flags[key];
+        flags[key].forEach((flag) => {
-
+          Logger.log(`enabling command line option ${flag.flag} with value ${flag.value}`);
-        Logger.log(`enabling command line option ${flag} with value ${value}`);
+          setFlag(app, flag.flag, flag.value);
-        setFlag(app, flag, value);
+        });
       }
     }
   }

src/pages/settings/preload.ts

@@ -3,6 +3,7 @@ import { ipcRenderer, shell } from "electron";
 import fs from "fs";
 import { globalEvents } from "../../constants/globalEvents";
 import { settings } from "../../constants/settings";
+import { Logger } from "../../features/logger";
 import { settingsStore } from "./../../scripts/settings";
 import { getOptions, getOptionsHeader, getThemeListFromDirectory } from "./theming";
 
@@ -28,7 +29,8 @@ let adBlock: HTMLInputElement,
   updateFrequency: HTMLInputElement,
   enableListenBrainz: HTMLInputElement,
   ListenBrainzAPI: HTMLInputElement,
-  ListenBrainzToken: HTMLInputElement;
+  ListenBrainzToken: HTMLInputElement,
+  enableWaylandSupport: HTMLInputElement;
 
 function getThemeFiles() {
   const selectElement = document.getElementById("themesList") as HTMLSelectElement;
@@ -71,29 +73,34 @@ function handleFileUploads() {
  * Sync the UI forms with the current settings
  */
 function refreshSettings() {
-  adBlock.checked = settingsStore.get(settings.adBlock);
+  try {
-  api.checked = settingsStore.get(settings.api);
+    adBlock.checked = settingsStore.get(settings.adBlock);
-  customCSS.value = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
+    api.checked = settingsStore.get(settings.api);
-  disableBackgroundThrottle.checked = settingsStore.get(settings.disableBackgroundThrottle);
+    customCSS.value = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
-  disableHardwareMediaKeys.checked = settingsStore.get(settings.flags.disableHardwareMediaKeys);
+    disableBackgroundThrottle.checked = settingsStore.get(settings.disableBackgroundThrottle);
-  enableCustomHotkeys.checked = settingsStore.get(settings.enableCustomHotkeys);
+    disableHardwareMediaKeys.checked = settingsStore.get(settings.flags.disableHardwareMediaKeys);
-  enableDiscord.checked = settingsStore.get(settings.enableDiscord);
+    enableCustomHotkeys.checked = settingsStore.get(settings.enableCustomHotkeys);
-  gpuRasterization.checked = settingsStore.get(settings.flags.gpuRasterization);
+    enableDiscord.checked = settingsStore.get(settings.enableDiscord);
-  menuBar.checked = settingsStore.get(settings.menuBar);
+    enableWaylandSupport.checked = settingsStore.get(settings.flags.enableWaylandSupport);
-  minimizeOnClose.checked = settingsStore.get(settings.minimizeOnClose);
+    gpuRasterization.checked = settingsStore.get(settings.flags.gpuRasterization);
-  mpris.checked = settingsStore.get(settings.mpris);
+    menuBar.checked = settingsStore.get(settings.menuBar);
-  notifications.checked = settingsStore.get(settings.notifications);
+    minimizeOnClose.checked = settingsStore.get(settings.minimizeOnClose);
-  playBackControl.checked = settingsStore.get(settings.playBackControl);
+    mpris.checked = settingsStore.get(settings.mpris);
-  port.value = settingsStore.get(settings.apiSettings.port);
+    notifications.checked = settingsStore.get(settings.notifications);
-  singleInstance.checked = settingsStore.get(settings.singleInstance);
+    playBackControl.checked = settingsStore.get(settings.playBackControl);
-  skipArtists.checked = settingsStore.get(settings.skipArtists);
+    port.value = settingsStore.get(settings.apiSettings.port);
-  theme.value = settingsStore.get(settings.theme);
+    singleInstance.checked = settingsStore.get(settings.singleInstance);
-  skippedArtists.value = settingsStore.get<string, string[]>(settings.skippedArtists).join("\n");
+    skipArtists.checked = settingsStore.get(settings.skipArtists);
-  trayIcon.checked = settingsStore.get(settings.trayIcon);
+    theme.value = settingsStore.get(settings.theme);
-  updateFrequency.value = settingsStore.get(settings.updateFrequency);
+    skippedArtists.value = settingsStore.get<string, string[]>(settings.skippedArtists).join("\n");
-  enableListenBrainz.checked = settingsStore.get(settings.ListenBrainz.enabled);
+    trayIcon.checked = settingsStore.get(settings.trayIcon);
-  ListenBrainzAPI.value = settingsStore.get(settings.ListenBrainz.api);
+    updateFrequency.value = settingsStore.get(settings.updateFrequency);
-  ListenBrainzToken.value = settingsStore.get(settings.ListenBrainz.token);
+    enableListenBrainz.checked = settingsStore.get(settings.ListenBrainz.enabled);
+    ListenBrainzAPI.value = settingsStore.get(settings.ListenBrainz.api);
+    ListenBrainzToken.value = settingsStore.get(settings.ListenBrainz.token);
+  } catch (error) {
+    Logger.log("Refreshing settings failed.", error);
+  }
 }
 
 /**
@@ -146,7 +153,9 @@ window.addEventListener("DOMContentLoaded", () => {
       }
       // Live update the view for ListenBrainz input, hide if disabled/show if enabled
       if (source.value === "on" && source.id === "enableListenBrainz") {
-        source.checked ? document.getElementById("listenbrainz__options").removeAttribute("hidden") : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
+        source.checked
+          ? document.getElementById("listenbrainz__options").removeAttribute("hidden")
+          : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
       }
       ipcRenderer.send(globalEvents.storeChanged);
     });
@@ -181,6 +190,7 @@ window.addEventListener("DOMContentLoaded", () => {
   disableHardwareMediaKeys = get("disableHardwareMediaKeys");
   enableCustomHotkeys = get("enableCustomHotkeys");
   enableDiscord = get("enableDiscord");
+  enableWaylandSupport = get("enableWaylandSupport");
   gpuRasterization = get("gpuRasterization");
   menuBar = get("menuBar");
   minimizeOnClose = get("minimizeOnClose");
@@ -199,7 +209,9 @@ window.addEventListener("DOMContentLoaded", () => {
   ListenBrainzToken = get("ListenBrainzToken");
 
   refreshSettings();
-  enableListenBrainz.checked ? document.getElementById("listenbrainz__options").removeAttribute("hidden") : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
+  enableListenBrainz.checked
+    ? document.getElementById("listenbrainz__options").removeAttribute("hidden")
+    : document.getElementById("listenbrainz__options").setAttribute("hidden", "true");
 
   addInputListener(adBlock, settings.adBlock);
   addInputListener(api, settings.api);
@@ -208,6 +220,7 @@ window.addEventListener("DOMContentLoaded", () => {
   addInputListener(disableHardwareMediaKeys, settings.flags.disableHardwareMediaKeys);
   addInputListener(enableCustomHotkeys, settings.enableCustomHotkeys);
   addInputListener(enableDiscord, settings.enableDiscord);
+  addInputListener(enableWaylandSupport, settings.flags.enableWaylandSupport);
   addInputListener(gpuRasterization, settings.flags.gpuRasterization);
   addInputListener(menuBar, settings.menuBar);
   addInputListener(minimizeOnClose, settings.minimizeOnClose);

src/pages/settings/settings.html

@@ -258,44 +258,57 @@
                 <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
               </div>
             </div>
-            <div class="group">
+          </div>
-              <p class="group__title">Flags</p>
+          <div class="group">
-              <div class="group__option">
+            <p class="group__title">Flags</p>
-                <div class="group__description">
+            <div class="group__option">
-                  <h4>Disable hardware built-in media keys</h4>
+              <div class="group__description">
-                  <p>
+                <h4>Disable hardware built-in media keys</h4>
-                    Also prevents certain desktop environments from recognizing the chrome MPRIS
+                <p>
-                    client separately from the custom MPRIS client.
+                  Also prevents certain desktop environments from recognizing the chrome MPRIS
-                  </p>
+                  client separately from the custom MPRIS client.
-                </div>
+                </p>
-                <label class="switch">
-                  <input id="disableHardwareMediaKeys" type="checkbox" />
-                  <span class="switch__slider"></span>
-                </label>
-              </div>
-              <div class="group__option">
-                <div class="group__description">
-                  <h4>Enable GPU rasterization</h4>
-                  <p>Move a part of the rendering to the GPU for increased performance.</p>
-                </div>
-                <label class="switch">
-                  <input id="gpuRasterization" type="checkbox" />
-                  <span class="switch__slider"></span>
-                </label>
-              </div>
-              <div class="group__option">
-                <div class="group__description">
-                  <h4>Disable Background Throttling</h4>
-                  <p>
-                    Makes app more responsive while in the background, at the cost of performance.
-                  </p>
-                </div>
-                <label class="switch">
-                  <input id="disableBackgroundThrottle" type="checkbox" />
-                  <span class="switch__slider"></span>
-                </label>
               </div>
+              <label class="switch">
+                <input id="disableHardwareMediaKeys" type="checkbox" />
+                <span class="switch__slider"></span>
+              </label>
             </div>
+            <div class="group__option">
+              <div class="group__description">
+                <h4>Enable GPU rasterization</h4>
+                <p>Move a part of the rendering to the GPU for increased performance.</p>
+              </div>
+              <label class="switch">
+                <input id="gpuRasterization" type="checkbox" />
+                <span class="switch__slider"></span>
+              </label>
+            </div>
+            <div class="group__option">
+              <div class="group__description">
+                <h4>Disable Background Throttling</h4>
+                <p>
+                  Makes app more responsive while in the background, at the cost of performance.
+                </p>
+              </div>
+              <label class="switch">
+                <input id="disableBackgroundThrottle" type="checkbox" />
+                <span class="switch__slider"></span>
+              </label>
+            </div>
+            <div class="group__option">
+              <div class="group__description">
+                <h4>Wayland support</h4>
+                <p>
+                  Adds a couple of Electron flags to help Tidal-hifi run smoothly on the Wayland window system.
+                </p>
+              </div>
+              <label class="switch">
+                <input id="enableWaylandSupport" type="checkbox" />
+                <span class="switch__slider"></span>
+              </label>
+            </div>
+          </div>
         </section>
 
         <section id="theming-section" class="tabs__section">

src/scripts/settings.ts

@@ -24,8 +24,9 @@ export const settingsStore = new Store({
       token: "",
     },
     flags: {
-      gpuRasterization: true,
       disableHardwareMediaKeys: false,
+      enableWaylandSupport: true,
+      gpuRasterization: true,
     },
     menuBar: true,
     minimizeOnClose: false,