added a custom menu and enabled the menu by default

README.md

@@ -43,8 +43,8 @@ To install and work with the code on this project follow these steps:
 - Notifications
 - Shortcuts ([source](https://defkey.com/tidal-desktop-shortcuts))
 - API for status and playback
-- [Settings feature](./docs/settings.png) to disable certain functionality.
-- Tray player (coming soon)
+- [Settings feature](./docs/settings.png) to disable certain functionality. (`ctrl+/`)
+- Tray(/mini) player (coming soon)
 
 ## Integrations
 

src/main.js

@@ -8,6 +8,7 @@ const {
   hideSettingsWindow,
 } = require("./scripts/settings");
 const { addTray, refreshTray } = require("./scripts/tray");
+const { addMenu } = require("./scripts/menu");
 
 const path = require("path");
 const tidalUrl = "https://listen.tidal.com";
@@ -79,6 +80,7 @@ function addGlobalShortcuts() {
 // Some APIs can only be used after this event occurs.
 app.on("ready", () => {
   createWindow();
+  addMenu();
   createSettingsWindow();
   addGlobalShortcuts();
   addTray({ icon });

src/pages/settings/preload.js

@@ -19,6 +19,14 @@ function refreshSettings() {
   menuBar.checked = store.get(settings.menuBar);
 }
 
+/**
+ * Open an url in the default browsers
+ */
+window.openExternal = function(url) {
+  const { shell } = require("electron");
+  shell.openExternal(url);
+};
+
 /**
  * hide the settings window
  */
@@ -58,6 +66,10 @@ window.addEventListener("DOMContentLoaded", () => {
     refreshSettings();
   });
 
+  ipcRenderer.on("goToTab", (event, tab) => {
+    document.getElementById(tab).click();
+  });
+
   notifications = get("notifications");
   playBackControl = get("playBackControl");
   api = get("apiCheckbox");

src/pages/settings/settings.html

@@ -31,6 +31,9 @@
             <!-- Tab 2 -->
             <input type="radio" name="tabset" id="tab2" />
             <label for="tab2">Api</label>
+            <!-- Tab 3 -->
+            <input type="radio" name="tabset" id="tab3" />
+            <label for="tab3">About</label>
 
             <div class="tab-panels">
                 <section id="general" class="tab-panel">
@@ -98,8 +101,17 @@
                     </div>
                     <button onClick="restart()">Restart Tidal-hifi</button>
                 </section>
+                <section id="general" class="tab-panel">
+                  <div class="section">
+                    <img style="width: 100px; height: auto; display: block; margin: 0 auto; margin-bottom: 20px; margin-top: 20px;" src = "./icon.png">
+                    <p style="max-width: 350px; display:block; margin: 0 auto; text-align: center;">
+                      <a href ="javascript:openExternal('https://github.com/Mastermindzh/tidal-hifi');">Tidal-hifi</a> is made by <a href ="javascript:openExternal('https://www.rickvanlieshout.com')">Rick van Lieshout</a>.<br />
+                      It uses <a href="javascript:openExternal('https://castlabs.com/');">castlabs</a> versions of Electron for widevine support.
+                    </p>
 
                   </div>
+                </section>
+            </div>
         </div>
     </div>
 </body>
@@ -222,6 +234,7 @@
 
     .body::-webkit-scrollbar-track {
         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
         border-radius: 5px;
         background-color: 2a2a2a;
     }
@@ -234,6 +247,7 @@
     .body::-webkit-scrollbar-thumb {
         border-radius: 10px;
         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
         background-color: #5a5a5a;
     }
     /* Tabs */
@@ -383,5 +397,4 @@
       background-color: rgba(229,238,255,.3);
     }
 </style>
-
 </html>

src/scripts/menu.js

@@ -0,0 +1,107 @@
+const { Menu } = require("electron");
+const { showSettingsWindow } = require("./settings");
+const isMac = process.platform === "darwin";
+
+const settingsMenuEntry = {
+  label: "Settings",
+  click() {
+    showSettingsWindow();
+  },
+  accelerator: "Control+/",
+};
+
+const mainMenu = [
+  ...(isMac
+    ? [
+        {
+          label: app.name,
+          submenu: [
+            { role: "about" },
+            settingsMenuEntry,
+            { type: "separator" },
+            { role: "services" },
+            { type: "separator" },
+            { role: "hide" },
+            { role: "hideothers" },
+            { role: "unhide" },
+            { type: "separator" },
+            { role: "quit" },
+          ],
+        },
+      ]
+    : []),
+  // { role: 'fileMenu' }
+  {
+    label: "File",
+    submenu: [settingsMenuEntry, isMac ? { role: "close" } : { role: "quit" }],
+  },
+  // { role: 'editMenu' }
+  {
+    label: "Edit",
+    submenu: [
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      ...(isMac
+        ? [
+            { role: "pasteAndMatchStyle" },
+            { role: "delete" },
+            { role: "selectAll" },
+            { type: "separator" },
+            {
+              label: "Speech",
+              submenu: [{ role: "startspeaking" }, { role: "stopspeaking" }],
+            },
+          ]
+        : [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }]),
+      { type: "separator" },
+      settingsMenuEntry,
+    ],
+  },
+  // { role: 'viewMenu' }
+  {
+    label: "View",
+    submenu: [
+      { role: "reload" },
+      { role: "forcereload" },
+      { type: "separator" },
+      { role: "resetzoom" },
+      { role: "zoomin" },
+      { role: "zoomout" },
+      { type: "separator" },
+      { role: "togglefullscreen" },
+    ],
+  },
+  // { role: 'windowMenu' }
+  {
+    label: "Window",
+    submenu: [
+      { role: "minimize" },
+      ...(isMac
+        ? [{ type: "separator" }, { role: "front" }, { type: "separator" }, { role: "window" }]
+        : [{ role: "close" }]),
+    ],
+  },
+  settingsMenuEntry,
+  {
+    label: "About",
+    click() {
+      showSettingsWindow("tab3");
+    },
+  },
+];
+
+const menuModule = { mainMenu };
+
+menuModule.getMenu = function() {
+  return Menu.buildFromTemplate(mainMenu);
+};
+
+menuModule.addMenu = function() {
+  Menu.setApplicationMenu(menuModule.getMenu());
+};
+
+module.exports = menuModule;

src/scripts/settings.js

@@ -10,7 +10,7 @@ const store = new Store({
     notifications: true,
     api: true,
     playBackControl: true,
-    menuBar: false,
+    menuBar: true,
     apiSettings: {
       port: 47836,
     },
@@ -52,7 +52,9 @@ settingsModule.createSettingsWindow = function() {
   settingsModule.settingsWindow = settingsWindow;
 };
 
-settingsModule.showSettingsWindow = function() {
+settingsModule.showSettingsWindow = function(tab = "tab1") {
+  settingsWindow.webContents.send("goToTab", tab);
+
   // refresh data just before showing the window
   settingsWindow.webContents.send("refreshData");
   settingsWindow.show();

src/scripts/tray.js

@@ -1,4 +1,5 @@
-const { Tray, Menu } = require("electron");
+const { Tray } = require("electron");
+const { getMenu } = require("./menu");
 const trayModule = {};
 let tray;
 
@@ -7,14 +8,12 @@ trayModule.addTray = function(options = { icon: "" }) {
 };
 
 trayModule.refreshTray = function() {
-  const contextMenu = Menu.buildFromTemplate([
-    { label: "Item1", type: "radio" },
-    { label: "Item2", type: "radio" },
-    { label: "Item3", type: "radio", checked: true },
-    { label: "Item4", type: "radio" },
-  ]);
-  tray.setToolTip("This is my application.");
-  tray.setContextMenu(contextMenu);
+  tray.on("click", function(e) {
+    // do nothing on click
+  });
+
+  tray.setToolTip("Tidal-hifi");
+  tray.setContextMenu(getMenu());
 };
 
 module.exports = trayModule;