From e7537e4a2bf0459e7cf965b75736b09a0e4c6b61 Mon Sep 17 00:00:00 2001 From: Core <64542347+coredev-uk@users.noreply.github.com> Date: Sun, 6 Feb 2022 08:12:22 +0000 Subject: [PATCH] Menubar Moved to Plugin --- src/main/base/browserwindow.ts | 133 ++-------------------- src/main/base/utils.ts | 2 + src/main/plugins/menubar.ts | 197 +++++++++++++++++++++++++++++++++ src/main/plugins/thumbar.ts | 2 +- 4 files changed, 207 insertions(+), 127 deletions(-) create mode 100644 src/main/plugins/menubar.ts diff --git a/src/main/base/browserwindow.ts b/src/main/base/browserwindow.ts index 655bd67e..9c701a04 100644 --- a/src/main/base/browserwindow.ts +++ b/src/main/base/browserwindow.ts @@ -1,5 +1,5 @@ import {join} from "path"; -import {app, BrowserWindow as bw, ipcMain, shell, ShareMenu, Menu, nativeImage} from "electron"; +import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell} from "electron"; import * as windowStateKeeper from "electron-window-state"; import * as express from "express"; import * as getPort from "get-port"; @@ -13,8 +13,6 @@ 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 { @@ -198,9 +196,9 @@ export class BrowserWindow { res.render("main", this.EnvironmentVariables); }); - app.get("/api/playback/:action", (req, res)=>{ + app.get("/api/playback/:action", (req, res) => { const action = req.params.action; - switch(action) { + switch (action) { case "playpause": BrowserWindow.win.webContents.executeJavaScript("wsapi.togglePlayPause()") res.send("Play/Pause toggle") @@ -546,9 +544,9 @@ export class BrowserWindow { BrowserWindow.win.webContents.send('send-remote-pair-url', url); }) if (process.platform === "darwin") { - app.setUserActivity('com.CiderCollective.remote.pair', { - ip: `${BrowserWindow.getIP()}` - }, `http://${BrowserWindow.getIP()}:${this.remotePort}`); + app.setUserActivity('com.CiderCollective.remote.pair', { + ip: `${BrowserWindow.getIP()}` + }, `http://${BrowserWindow.getIP()}:${this.remotePort}`); } // Get previews for normalization ipcMain.on("getPreviewURL", (_event, url) => { @@ -580,7 +578,7 @@ export class BrowserWindow { }) ipcMain.on('share-menu', async (_event, url) => { - if ( process.platform != 'darwin') return; + if (process.platform != 'darwin') return; //https://www.electronjs.org/docs/latest/api/share-menu console.log('[Share Sheet - App.ts]', url) const options = { @@ -593,11 +591,6 @@ export class BrowserWindow { }) - - - - - /* ********************************************************************************************* * Window Events * **********************************************************************************************/ @@ -662,118 +655,6 @@ 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 ciderIcon = nativeImage.createFromPath(path.join(__dirname, '../../src/renderer/assets/logocute.png')) - 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', - accelerator: 'CommandOrControl+Shift+D', - click: async () => { - const { shell } = require('electron') - await shell.openExternal('https://discord.gg/applemusic') - } - }, - { - label: 'Donate', - accelerator: 'CommandOrControl+D', - icon: ciderIcon, - click: async () => { - const { shell } = require('electron') - await shell.openExternal('https://opencollective.com/ciderapp/') - } - }, - { - 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) - } /** diff --git a/src/main/base/utils.ts b/src/main/base/utils.ts index 5197a6eb..96b937d0 100644 --- a/src/main/base/utils.ts +++ b/src/main/base/utils.ts @@ -12,6 +12,8 @@ export class utils { */ private static paths: any = { srcPath: path.join(__dirname, "../../src"), + rendererPath: path.join(__dirname, "../../src/renderer"), + mainPath: path.join(__dirname, "../../src/main"), resourcePath: path.join(__dirname, "../../resources"), i18nPath: path.join(__dirname, "../../src/i18n"), ciderCache: path.resolve(app.getPath("userData"), "CiderCache"), diff --git a/src/main/plugins/menubar.ts b/src/main/plugins/menubar.ts new file mode 100644 index 00000000..3477a5d7 --- /dev/null +++ b/src/main/plugins/menubar.ts @@ -0,0 +1,197 @@ +import {app, Menu, shell} from "electron"; + +export default class Thumbar { + /** + * Private variables for interaction in plugins + */ + private _win: any; + private _app: any; + private _store: any; + + /** + * Base Plugin Details (Eventually implemented into a GUI in settings) + */ + public name: string = 'Menubar Plugin'; + public description: string = 'Creates the menubar'; + public version: string = '1.0.0'; + public author: string = 'Core / Quack'; + + /** + * Thumbnail Toolbar Assets + * NATIVE-IMAGE DOESN'T SUPPORT SVG + private icons: { [key: string]: Electron.NativeImage } = { + remoteIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/smartphone.svg')).toPNG(), + soundIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/headphones.svg')).toPNG(), + aboutIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/info.svg')).toPNG(), + settingsIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/settings.svg')).toPNG(), + logoutIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'views/svg/log-out.svg')).toPNG(), + ciderIcon: nativeImage.createFromPath(join(utils.getPath('rendererPath'), 'assets/logocute.png')).toPNG(), + } + */ + + /** + * Menubar Assets + * @private + */ + private isMac: boolean = process.platform === 'darwin'; + private menubarTemplate: any = [ + { + label: app.name, + submenu: [ + { + label: 'Web Remote', + accelerator: 'CommandOrControl+Shift+W', + sublabel: 'Opens in external window', + click: () => this._win.webContents.executeJavaScript(`ipcRenderer.invoke('showQR')`) + }, //accelerator + { + label: 'Audio Settings', + accelerator: 'CommandOrControl+Shift+A', + click: () => this._win.webContents.executeJavaScript(`app.modals.audioSettings = true`) + }, + { + label: 'About', + accelerator: 'CommandOrControl+Shift+B', + click: () => this._win.webContents.executeJavaScript(`app.appRoute('about'`) + }, + { + label: 'Settings', + accelerator: 'CommandOrControl+,', + click: () => this._win.webContents.executeJavaScript(`app.appRoute('settings')`) + }, + { + label: 'Logout', + accelerator: 'CommandOrControl+Shift+O', + click: () => this._win.webContents.executeJavaScript(`app.unauthorize()`) + }, + {type: 'separator'}, + {role: 'quit'} + ] + }, + { + label: 'View', + submenu: [ + {role: 'reload'}, + {role: 'forceReload'}, + {role: 'toggleDevTools'}, + {type: 'separator'}, + {role: 'resetZoom'}, + {role: 'zoomIn'}, + {role: 'zoomOut'}, + {type: 'separator'}, + {role: 'togglefullscreen'} + ] + }, + { + label: 'Window', + submenu: [ + {role: 'minimize'}, + {role: 'zoom'}, + ...(this.isMac ? [ + {type: 'separator'}, + {role: 'front'}, + {type: 'separator'}, + {role: 'window'} + ] : [ + {role: 'close'} + ]) + ] + }, + { + label: 'Support', + role: 'help', + submenu: [ + { + label: 'Discord', + click: () => shell.openExternal("https://discord.gg/AppleMusic").catch(console.error) + }, + { + label: 'GitHub Wiki', + click: () => shell.openExternal("https://github.com/ciderapp/Cider/wiki/Troubleshooting").catch(console.error) + }, + { + label: 'About', + click: () => this._win.webContents.executeJavaScript(`app.appRoute('about')`) + }, + {type: 'separator'}, + { + label: 'Report a...', + submenu: [ + { + label: 'Bug', + click: () => shell.openExternal("https://github.com/ciderapp/Cider/issues/new?assignees=&labels=bug%2Ctriage&template=bug_report.yaml&title=%5BBug%5D%3A+").catch(console.error) + }, + { + label: 'Feature Request', + click: () => shell.openExternal("https://github.com/ciderapp/Cider/issues/new?assignees=&labels=enhancement%2Ctriage&template=feature_request.yaml&title=%5BEnhancement%5D%3A+").catch(console.error) + }, + { + label: 'Translation Report/Request', + click: () => shell.openExternal("https://github.com/ciderapp/Cider/issues/new?assignees=&labels=%F0%9F%8C%90+Translations&template=translation.yaml&title=%5BTranslation%5D%3A+").catch(console.error) + }, + ] + }, + {type: 'separator'}, + { + label: 'View License', + click: () => shell.openExternal("https://github.com/ciderapp/Cider/blob/main/LICENSE").catch(console.error) + }, + {type: 'separator'}, + { + label: 'Toggle Developer Tools', + accelerator: 'Option+CommandOrControl+I', + click: () => this._win.webContents.openDevTools() + }, + { + label: 'Open Configuration File in Editor', + click: () => this._store.openInEditor() + } + ] + } + ] + + /******************************************************************************************* + * Public Methods + * ****************************************************************************************/ + + /** + * Runs on plugin load (Currently run on application start) + */ + constructor(app: any, store: any) { + this._app = app; + this._store = store + console.debug(`[Plugin][${this.name}] Loading Complete.`); + } + + /** + * Runs on app ready + */ + onReady(win: Electron.BrowserWindow): void { + this._win = win; + Menu.setApplicationMenu(Menu.buildFromTemplate(this.menubarTemplate)) + } + + /** + * Runs on app stop + */ + onBeforeQuit(): void { + console.debug(`[Plugin][${this.name}] Stopped.`); + } + + /** + * Runs on playback State Change + * @param attributes Music Attributes (attributes.status = current state) + */ + onPlaybackStateDidChange(attributes: object): void { + + } + + /** + * Runs on song change + * @param attributes Music Attributes + */ + onNowPlayingItemDidChange(attributes: object): void { + + } + +} diff --git a/src/main/plugins/thumbar.ts b/src/main/plugins/thumbar.ts index 4644920e..2ba1f1a9 100644 --- a/src/main/plugins/thumbar.ts +++ b/src/main/plugins/thumbar.ts @@ -20,7 +20,7 @@ export default class Thumbar { /** * Thumbnail Toolbar Assets */ - private icons: { pause: Electron.NativeImage, play: Electron.NativeImage, next: Electron.NativeImage, previous: Electron.NativeImage } = { + private icons: { [key: string]: Electron.NativeImage } = { pause: nativeImage.createFromPath(join(utils.getPath('resourcePath'), 'icons/thumbar', `${nativeTheme.shouldUseDarkColors ? 'light' : 'dark'}_pause.png`)), play: nativeImage.createFromPath(join(utils.getPath('resourcePath'), 'icons/thumbar', `${nativeTheme.shouldUseDarkColors ? 'light' : 'dark'}_play.png`)), next: nativeImage.createFromPath(join(utils.getPath('resourcePath'), 'icons/thumbar', `${nativeTheme.shouldUseDarkColors ? 'light' : 'dark'}_next.png`)),