Added macOS MenuBar (+ accel, actions, git links)

src/main/base/browserwindow.ts

@@ -1,5 +1,5 @@
 import {join} from "path";
-import {app, BrowserWindow as bw, ipcMain, shell, ShareMenu} from "electron";
+import {app, BrowserWindow as bw, ipcMain, shell, ShareMenu, Menu, nativeImage} from "electron";
 import * as windowStateKeeper from "electron-window-state";
 import * as express from "express";
 import * as getPort from "get-port";
@@ -14,6 +14,9 @@ import {wsapi} from "./wsapi";
 import {jsonc} from "jsonc";
 import {AppImageUpdater, NsisUpdater} from "electron-updater";
 import {utils} from './utils';
+import * as path from "path";
+
+
 
 export class BrowserWindow {
     public static win: any | undefined = null;
@@ -542,6 +545,11 @@ export class BrowserWindow {
             shell.openExternal(`https://cider.sh/pair-remote?url=${Buffer.from(encodeURI(url)).toString('base64')}`).catch(console.error);
         })
 
+        ipcMain.on('get-remote-pair-url', (_event, _) => {
+            let url = `http://${BrowserWindow.getIP()}:${this.remotePort}`;
+            BrowserWindow.win.webContents.send('send-remote-pair-url', url);
+        })
+
         // Get previews for normalization
         ipcMain.on("getPreviewURL", (_event, url) => {
 
@@ -654,6 +662,107 @@ export class BrowserWindow {
             shell.openExternal(x.url).catch(console.error);
             return {action: "deny"};
         });
+
+        /* *********************************************************************************************
+         * Menu
+         * **********************************************************************************************/
+        //@ts-ignore
+        console.log(path.join(__dirname, '../../src/renderer/views/svg/smartphone.svg'))
+        const isMac = process.platform === 'darwin';
+        //TODO: Figure out the icons
+        const remoteIcon = nativeImage.createFromPath(path.join(__dirname, '../../src/renderer/views/svg/smartphone.svg')).toPNG()
+        const soundIcon = nativeImage.createFromPath(path.join(__dirname, '../../src/renderer/views/svg/headphones.svg')).toPNG()
+        const aboutIcon = nativeImage.createFromPath(path.join(__dirname, '../../src/renderer/views/svg/info.svg')).toPNG()
+        const settingsIcon = nativeImage.createFromPath(path.join(__dirname, '../../src/renderer/views/svg/settings.svg')).toPNG()
+        const logoutIcon = nativeImage.createFromPath(path.join(__dirname, '../../src/renderer/views/svg/log-out.svg')).toPNG()
+        const template = [
+            // { role: 'appMenu' }
+            ...(isMac ? [{
+                label: app.name,
+                submenu: [
+                    { label: 'Web Remote', accelerator: 'CommandOrControl+W', sublabel: 'Opens in external window', click: () => BrowserWindow.win.webContents.executeJavaScript(`ipcRenderer.invoke('showQR')`)}, //accelerator
+                    { label: 'Audio Settings', accelerator: 'CommandOrControl+Shift+A', click: () => BrowserWindow.win.webContents.executeJavaScript(`app.modals.audioSettings = true`)},
+                    { label: 'About', accelerator: 'CommandOrControl+Shift+B', click: () => BrowserWindow.win.webContents.executeJavaScript(`app.appRoute('about'`)},
+                    { label: 'Settings', accelerator: 'CommandOrControl+,', click: () => BrowserWindow.win.webContents.executeJavaScript(`app.appRoute('settings')`)},
+                    { label: 'Logout', accelerator: 'CommandOrControl+Shift+O', click: () => BrowserWindow.win.webContents.executeJavaScript(`app.unauthorize(); document.location.reload()`)},
+                    { type: 'separator' },
+                    { role: 'quit' }
+                ]
+            }] : []),
+            // { role: 'viewMenu' }
+            {
+                label: 'View',
+                submenu: [
+                    { role: 'reload' },
+                    { role: 'forceReload' },
+                    { role: 'toggleDevTools' },
+                    { type: 'separator' },
+                    { role: 'resetZoom' },
+                    { role: 'zoomIn' },
+                    { role: 'zoomOut' },
+                    { type: 'separator' },
+                    { role: 'togglefullscreen' }
+                ]
+            },
+            // { role: 'windowMenu' }
+            {
+                label: 'Window',
+                submenu: [
+                    { role: 'minimize' },
+                    { role: 'zoom' },
+                    ...(isMac ? [
+                        { type: 'separator' },
+                        { role: 'front' },
+                        { type: 'separator' },
+                        { role: 'window' }
+                    ] : [
+                        { role: 'close' }
+                    ])
+                ]
+            },
+            {
+                role: 'help',
+                submenu: [
+                    {
+                        label: 'Discord',
+                        click: async () => {
+                            const { shell } = require('electron')
+                            await shell.openExternal('https://discord.gg/applemusic')
+                        }
+                    },
+                    {
+                        label: 'Report a...',
+                        submenu: [
+                            {
+                                label: 'Bug',
+                                click: async () => {
+                                    const {shell} = require('electron')
+                                    await shell.openExternal("https://github.com/ciderapp/Cider/issues/new?assignees=&labels=bug%2Ctriage&template=bug_report.yaml&title=%5BBug%5D%3A+")
+                                }
+                            },
+                            {
+                                label: 'Feature Request',
+                                click: async () => {
+                                    const {shell} = require('electron')
+                                    await shell.openExternal("https://github.com/ciderapp/Cider/issues/new?assignees=&labels=enhancement%2Ctriage&template=feature_request.yaml&title=%5BEnhancement%5D%3A+")
+                                }
+                            },
+                            {
+                                label: 'Translation Report/Request',
+                                click: async () => {
+                                    const {shell} = require('electron')
+                                    await shell.openExternal("https://github.com/ciderapp/Cider/issues/new?assignees=&labels=%F0%9F%8C%90+Translations&template=translation.yaml&title=%5BTranslation%5D%3A+")
+                                }
+                            },
+                        ]
+                    },
+                ]
+            }
+        ]
+        //@ts-ignore
+        const menu = Menu.buildFromTemplate(template)
+        Menu.setApplicationMenu(menu)
+
     }
 
     /**

src/renderer/index.js

@@ -1005,7 +1005,7 @@ const app = new Vue({
             })
         },
         copyToClipboard(str) {
-            if (navigator.userAgent.includes('Darwin')) {
+            if (navigator.userAgent.includes('Darwin') || navigator.appVersion.indexOf("Mac")!=-1) {
                 this.darwinShare(str)
             } else {
                 notyf.success(app.getLz('term.share.success'))

src/renderer/views/app/sidebar.ejs

@@ -92,7 +92,7 @@
                         {{$root.getLz('app.name')}}
                     </div>
                 </button>
-                <button class="usermenu-item" @click="showWebRemoteQR()">
+                <button class="usermenu-item" @click="appRoute('remote-pair')">
                     <div class="row nopadding">
                         <div class="col nopadding">
                             <span class="usermenu-item-icon"><%- include("../svg/smartphone.svg") %></span>

src/renderer/views/pages/remote-pair.ejs

@@ -0,0 +1,21 @@
+<script type="text/x-template" id="remote-pair">
+    <div style="display:flex;width:100%;height:100%;padding-top: var(--navigationBarHeight);position:absolute;top:0;left:0;">
+        <webview id="foo" src="https://music.apple.com/includes/commerce/account/settings?product=music&isFullscreen=true&isModal=false" style="display:inline-flex; width:100%;"></webview>
+    </div>
+</script>
+<script>
+    Vue.component('apple-account-settings', {
+        template: '#apple-account-settings',
+        async mounted() {
+            ipcRenderer.send('get-remote-pair-url')
+            ipcRenderer.on('send-remote-pair-url', (event, url) => {
+                this.url = url
+                app.webview.src = url
+                document.getElementById('foo').src = url;
+            })
+        },
+        methods: {
+
+        }
+    });
+</script>