From 4eaeaafa7c54c0521caf542b2ed48a9d9d970556 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Thu, 19 Jan 2023 01:30:32 +0200 Subject: [PATCH 1/7] add menu icon to in-app-menu --- menu.js | 2 +- plugins/in-app-menu/back.js | 16 +++------------- plugins/in-app-menu/front.js | 22 +++++++++++++++------- plugins/in-app-menu/menu.js | 14 -------------- 4 files changed, 19 insertions(+), 35 deletions(-) delete mode 100644 plugins/in-app-menu/menu.js diff --git a/menu.js b/menu.js index 068393f6..18b2e750 100644 --- a/menu.js +++ b/menu.js @@ -163,7 +163,7 @@ const mainMenuTemplate = (win) => { if (item.checked && !config.get("options.hideMenuWarned")) { dialog.showMessageBox(win, { type: 'info', title: 'Hide Menu Enabled', - message: "Menu will be hidden on next launch, use 'Alt' to show it (or 'Escape' if using in-app-menu)" + message: "Menu will be hidden on next launch, use [Alt] to show it (or backtick [`] if using in-app-menu)" }); } }, diff --git a/plugins/in-app-menu/back.js b/plugins/in-app-menu/back.js index b75e8a32..133d5a29 100644 --- a/plugins/in-app-menu/back.js +++ b/plugins/in-app-menu/back.js @@ -2,14 +2,12 @@ const path = require("path"); const electronLocalshortcut = require("electron-localshortcut"); -const config = require("../../config"); const { injectCSS } = require("../utils"); const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main'); setupTitlebar(); //tracks menu visibility -let visible = !config.get("options.hideMenu"); module.exports = (win) => { // css for custom scrollbar + disable drag area(was causing bugs) @@ -18,16 +16,8 @@ module.exports = (win) => { win.once("ready-to-show", () => { attachTitlebarToWindow(win); - //register keyboard shortcut && hide menu if hideMenu is enabled - if (config.get("options.hideMenu")) { - electronLocalshortcut.register(win, "Esc", () => { - setMenuVisibility(!visible); - }); - } + electronLocalshortcut.register(win, "`", () => { + win.webContents.send("refreshMenu", true); + }); }); - - function setMenuVisibility(value) { - visible = value; - win.webContents.send("refreshMenu", visible); - } }; diff --git a/plugins/in-app-menu/front.js b/plugins/in-app-menu/front.js index da5841f9..b7fcdbc6 100644 --- a/plugins/in-app-menu/front.js +++ b/plugins/in-app-menu/front.js @@ -7,6 +7,7 @@ function $(selector) { return document.querySelector(selector); } module.exports = (options) => { let visible = !config.get("options.hideMenu"); const bar = new Titlebar({ + icon: "https://cdn-icons-png.flaticon.com/512/5358/5358672.png", backgroundColor: Color.fromHex("#050505"), itemBackgroundColor: Color.fromHex("#1d1d1d"), svgColor: Color.WHITE, @@ -15,19 +16,28 @@ module.exports = (options) => { bar.updateTitle(" "); document.title = "Youtube Music"; - const hideIcon = hide => $('.cet-window-icon').style.display = hide ? 'none' : 'flex'; + const icon = $('.cet-window-icon'); - if (options.hideIcon) hideIcon(true); + icon.style.webkitAppRegion = 'no-drag'; - ipcRenderer.on("refreshMenu", (_, showMenu) => { - if (showMenu === undefined && !visible) return; - if (showMenu === false) { + icon.firstChild.style.webkitUserDrag = 'none'; + icon.firstChild.style.filter = 'invert(50%)'; + + const updateMenu = () => { + if (visible) { bar.updateMenu(null); visible = false; } else { bar.refreshMenu(); visible = true; } + }; + + icon.addEventListener('click', updateMenu); + + ipcRenderer.on("refreshMenu", (_, fromBack) => { + if (fromBack === undefined && !visible) return; + updateMenu(); }); if (isEnabled("picture-in-picture")) { @@ -36,8 +46,6 @@ module.exports = (options) => { }); } - ipcRenderer.on("hideIcon", (_, hide) => hideIcon(hide)); - // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it) document.addEventListener('apiLoaded', () => { setNavbarMargin(); diff --git a/plugins/in-app-menu/menu.js b/plugins/in-app-menu/menu.js deleted file mode 100644 index dbfd88a3..00000000 --- a/plugins/in-app-menu/menu.js +++ /dev/null @@ -1,14 +0,0 @@ -const { setOptions } = require("../../config/plugins"); - -module.exports = (win, options) => [ - { - label: "Hide Icon", - type: "checkbox", - checked: options.hideIcon, - click: (item) => { - win.webContents.send("hideIcon", item.checked); - options.hideIcon = item.checked; - setOptions("in-app-menu", options); - }, - } -]; From 5909af42d259a176a57b0c96b8a42f1f4bba9a15 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Thu, 19 Jan 2023 02:05:16 +0200 Subject: [PATCH 2/7] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 1a410bd1..fd117c26 100644 --- a/readme.md +++ b/readme.md @@ -116,7 +116,7 @@ winget install th-ch.YouTubeMusic - **Auto confirm when paused** (Always Enabled): disable the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) popup that pause music after a certain time -> If using `Hide Menu` option - you can show the menu with the `alt` key (or `escape` if using the in-app-menu plugin) +> If `Hide Menu` option is on - you can show the menu with the alt key (or \` [backtick] if using the in-app-menu plugin) ## Themes From 1eb0269434a3012ab32f9fefd814362b8474eb45 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Thu, 19 Jan 2023 02:32:57 +0200 Subject: [PATCH 3/7] Differentiate between refresh/toggle menu + visible now checks the actual state to fix PiP bugs --- plugins/in-app-menu/back.js | 2 +- plugins/in-app-menu/front.js | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/plugins/in-app-menu/back.js b/plugins/in-app-menu/back.js index 133d5a29..d0a54605 100644 --- a/plugins/in-app-menu/back.js +++ b/plugins/in-app-menu/back.js @@ -17,7 +17,7 @@ module.exports = (win) => { attachTitlebarToWindow(win); electronLocalshortcut.register(win, "`", () => { - win.webContents.send("refreshMenu", true); + win.webContents.send("toggleMenu"); }); }); }; diff --git a/plugins/in-app-menu/front.js b/plugins/in-app-menu/front.js index b7fcdbc6..9f93195f 100644 --- a/plugins/in-app-menu/front.js +++ b/plugins/in-app-menu/front.js @@ -5,13 +5,13 @@ const { isEnabled } = require("../../config/plugins"); function $(selector) { return document.querySelector(selector); } module.exports = (options) => { - let visible = !config.get("options.hideMenu"); + let visible = () => !!$('.cet-menubar').firstChild; const bar = new Titlebar({ icon: "https://cdn-icons-png.flaticon.com/512/5358/5358672.png", backgroundColor: Color.fromHex("#050505"), itemBackgroundColor: Color.fromHex("#1d1d1d"), svgColor: Color.WHITE, - menu: visible ? undefined : null + menu: config.get("options.hideMenu") ? null : undefined }); bar.updateTitle(" "); document.title = "Youtube Music"; @@ -23,21 +23,21 @@ module.exports = (options) => { icon.firstChild.style.webkitUserDrag = 'none'; icon.firstChild.style.filter = 'invert(50%)'; - const updateMenu = () => { - if (visible) { + const toggleMenu = () => { + if (visible()) { bar.updateMenu(null); - visible = false; } else { bar.refreshMenu(); - visible = true; } }; - icon.addEventListener('click', updateMenu); + icon.addEventListener('click', toggleMenu); + ipcRenderer.on("toggleMenu", toggleMenu); - ipcRenderer.on("refreshMenu", (_, fromBack) => { - if (fromBack === undefined && !visible) return; - updateMenu(); + ipcRenderer.on("refreshMenu", () => { + if (visible()) { + bar.refreshMenu(); + } }); if (isEnabled("picture-in-picture")) { From 96b1b6962963f0013d35225d0232ad2da17fedf4 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Thu, 19 Jan 2023 02:33:43 +0200 Subject: [PATCH 4/7] hide menu in PiP+in-app-menu if hideMenu is enabled --- plugins/picture-in-picture/adaptors/in-app-menu.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/plugins/picture-in-picture/adaptors/in-app-menu.js b/plugins/picture-in-picture/adaptors/in-app-menu.js index a96ae967..0da110bc 100644 --- a/plugins/picture-in-picture/adaptors/in-app-menu.js +++ b/plugins/picture-in-picture/adaptors/in-app-menu.js @@ -1,5 +1,6 @@ const { Menu, app } = require("electron"); const { setApplicationMenu } = require("../../../menu"); +const config = require("../../../config"); module.exports = (win, options, setOptions, togglePip, isInPip) => { if (isInPip) { @@ -31,6 +32,11 @@ module.exports = (win, options, setOptions, togglePip, isInPip) => { ], }, ])); + if (config.get("options.hideMenu")) { + setImmediate(() => { + win.webContents.send("toggleMenu"); + }); + } } else { setApplicationMenu(win); } From 236034a1f9e12a42db0bbf5ef1a261855f66b36e Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Thu, 19 Jan 2023 17:32:47 +0200 Subject: [PATCH 5/7] bump custom-electron-titlebar --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b93cd5cf..95d59f41 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "butterchurn-presets": "^2.4.7", "chokidar": "^3.5.3", "custom-electron-prompt": "^1.5.1", - "custom-electron-titlebar": "^4.1.5", + "custom-electron-titlebar": "^4.1.6", "discord-rpc": "^4.0.1", "electron-better-web-request": "^1.0.1", "electron-debug": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index d512fc27..34e638aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1758,10 +1758,10 @@ custom-electron-prompt@^1.5.1: resolved "https://registry.yarnpkg.com/custom-electron-prompt/-/custom-electron-prompt-1.5.1.tgz#24a63a7829c2ebcd2d898a312f9dff65785c2da7" integrity sha512-d/az6lkIdnBUf3TwQNP1sW5Jpe5PWw5xklC4F8B7/5t0RdH1OUwqO7Z/NyX7+2Iq/fyuXMiwkQxRQCqEjzIYZw== -custom-electron-titlebar@^4.1.5: - version "4.1.5" - resolved "https://registry.yarnpkg.com/custom-electron-titlebar/-/custom-electron-titlebar-4.1.5.tgz#5032759ee5594fd618a62cff0de46150fd8e2b24" - integrity sha512-KpVmO+Fz34zNw/jYbOD6YwxPr6h2hgZmNbjy0AvhlXiH4dxeZJXDlMcBX08NqsESymMQvIWwsGaA//YGW1bXjA== +custom-electron-titlebar@^4.1.6: + version "4.1.6" + resolved "https://registry.yarnpkg.com/custom-electron-titlebar/-/custom-electron-titlebar-4.1.6.tgz#5853c76fbe1ab6ab764e9075df84ec9cf9780015" + integrity sha512-AGULUZMxhEZDpl0Z1jfZzXgQEdhAPe8YET0dYQA/19t8oCrTFzF2PzdvJNCmxGU4Ai3jPWVeCPKg4vM7ffU0Mg== dashdash@^1.12.0: version "1.14.1" From 70361afbaf12188c466c4d3b51ef80675ed3240f Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Sun, 22 Jan 2023 19:25:29 +0200 Subject: [PATCH 6/7] use css instead of js --- plugins/in-app-menu/front.js | 9 +-------- plugins/in-app-menu/style.css | 9 +++++++++ 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/plugins/in-app-menu/front.js b/plugins/in-app-menu/front.js index 9f93195f..68f76311 100644 --- a/plugins/in-app-menu/front.js +++ b/plugins/in-app-menu/front.js @@ -16,13 +16,6 @@ module.exports = (options) => { bar.updateTitle(" "); document.title = "Youtube Music"; - const icon = $('.cet-window-icon'); - - icon.style.webkitAppRegion = 'no-drag'; - - icon.firstChild.style.webkitUserDrag = 'none'; - icon.firstChild.style.filter = 'invert(50%)'; - const toggleMenu = () => { if (visible()) { bar.updateMenu(null); @@ -31,7 +24,7 @@ module.exports = (options) => { } }; - icon.addEventListener('click', toggleMenu); + $('.cet-window-icon').addEventListener('click', toggleMenu); ipcRenderer.on("toggleMenu", toggleMenu); ipcRenderer.on("refreshMenu", () => { diff --git a/plugins/in-app-menu/style.css b/plugins/in-app-menu/style.css index 3805e119..e76e9df7 100644 --- a/plugins/in-app-menu/style.css +++ b/plugins/in-app-menu/style.css @@ -80,3 +80,12 @@ yt-page-navigation-progress, .cet-menubar-menu-container .cet-action-item { background-color: inherit } + +.cet-window-icon { + -webkit-app-region: no-drag; +} + +.cet-window-icon img { + -webkit-user-drag: none; + filter: invert(50%); +} From c4ced889b55d162c0efccbf6c48dabe55615652b Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Tue, 28 Feb 2023 20:35:10 +0200 Subject: [PATCH 7/7] resolve merge error --- .../adaptors/in-app-menu.js | 43 ------------------- 1 file changed, 43 deletions(-) delete mode 100644 plugins/picture-in-picture/adaptors/in-app-menu.js diff --git a/plugins/picture-in-picture/adaptors/in-app-menu.js b/plugins/picture-in-picture/adaptors/in-app-menu.js deleted file mode 100644 index 0da110bc..00000000 --- a/plugins/picture-in-picture/adaptors/in-app-menu.js +++ /dev/null @@ -1,43 +0,0 @@ -const { Menu, app } = require("electron"); -const { setApplicationMenu } = require("../../../menu"); -const config = require("../../../config"); - -module.exports = (win, options, setOptions, togglePip, isInPip) => { - if (isInPip) { - Menu.setApplicationMenu(Menu.buildFromTemplate([ - { - label: "App", - submenu: [ - { - label: "Exit Picture in Picture", - click: togglePip, - }, - { - label: "Always on top", - type: "checkbox", - checked: options.alwaysOnTop, - click: (item) => { - setOptions({ alwaysOnTop: item.checked }); - win.setAlwaysOnTop(item.checked); - }, - }, - { - label: "Restart", - click: () => { - app.relaunch(); - app.quit(); - }, - }, - { role: "quit" }, - ], - }, - ])); - if (config.get("options.hideMenu")) { - setImmediate(() => { - win.webContents.send("toggleMenu"); - }); - } - } else { - setApplicationMenu(win); - } -};