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 } } = {
-  gpuRasterization: { flag: "enable-gpu-rasterization", value: undefined },
-  disableHardwareMediaKeys: { flag: "disable-features", value: "HardwareMediaKeyHandling" },
+export const flags: { [key: string]: { flag: string; value?: string }[] } = {
+  gpuRasterization: [{ flag: "enable-gpu-rasterization", value: undefined }],
+  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];
-
-        Logger.log(`enabling command line option ${flag} with value ${value}`);
-        setFlag(app, flag, value);
+        flags[key].forEach((flag) => {
+          Logger.log(`enabling command line option ${flag.flag} with value ${flag.value}`);
+          setFlag(app, flag.flag, 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,6 +73,7 @@ function handleFileUploads() {
  * Sync the UI forms with the current settings
  */
 function refreshSettings() {
+  try {
     adBlock.checked = settingsStore.get(settings.adBlock);
     api.checked = settingsStore.get(settings.api);
     customCSS.value = settingsStore.get<string, string[]>(settings.customCSS).join("\n");
@@ -78,6 +81,7 @@ function refreshSettings() {
     disableHardwareMediaKeys.checked = settingsStore.get(settings.flags.disableHardwareMediaKeys);
     enableCustomHotkeys.checked = settingsStore.get(settings.enableCustomHotkeys);
     enableDiscord.checked = settingsStore.get(settings.enableDiscord);
+    enableWaylandSupport.checked = settingsStore.get(settings.flags.enableWaylandSupport);
     gpuRasterization.checked = settingsStore.get(settings.flags.gpuRasterization);
     menuBar.checked = settingsStore.get(settings.menuBar);
     minimizeOnClose.checked = settingsStore.get(settings.minimizeOnClose);
@@ -94,6 +98,9 @@ function refreshSettings() {
     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,6 +258,7 @@
                 <input id="updateFrequency" type="number" class="text-input" name="updateFrequency" />
               </div>
             </div>
+          </div>
           <div class="group">
             <p class="group__title">Flags</p>
             <div class="group__option">
@@ -295,6 +296,18 @@
                 <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>
 

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,