mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-12 11:01:45 +00:00
Merge pull request #215 from th-ch/menu-options
In-app-menu plugin - rename plugin & configure menu builder
This commit is contained in:
th-ch
GitHub
76
plugins/in-app-menu/back.js
Normal file
76
plugins/in-app-menu/back.js
Normal file
@ -0,0 +1,76 @@
|
||||
const path = require("path");
|
||||
|
||||
const { Menu } = require("electron");
|
||||
const electronLocalshortcut = require("electron-localshortcut");
|
||||
|
||||
const config = require("../../config");
|
||||
const { setApplicationMenu } = require("../../menu");
|
||||
const { injectCSS } = require("../utils");
|
||||
|
||||
//check that menu doesn't get created twice
|
||||
let done = false;
|
||||
// win hook for fixing menu
|
||||
let win;
|
||||
|
||||
const originalBuildMenu = Menu.buildFromTemplate;
|
||||
// This function natively gets called on all submenu so no more reason to use recursion
|
||||
Menu.buildFromTemplate = (template) => {
|
||||
// Fix checkboxes and radio buttons
|
||||
updateCheckboxesAndRadioButtons(win, template);
|
||||
|
||||
// return as normal
|
||||
return originalBuildMenu(template);
|
||||
};
|
||||
|
||||
module.exports = (winImport) => {
|
||||
win = winImport;
|
||||
|
||||
// css for custom scrollbar + disable drag area(was causing bugs)
|
||||
injectCSS(win.webContents, path.join(__dirname, "style.css"));
|
||||
|
||||
win.on("ready-to-show", () => {
|
||||
// (apparently ready-to-show is called twice)
|
||||
if (done) {
|
||||
return;
|
||||
}
|
||||
done = true;
|
||||
|
||||
setApplicationMenu(win);
|
||||
|
||||
//register keyboard shortcut && hide menu if hideMenu is enabled
|
||||
if (config.get("options.hideMenu")) {
|
||||
switchMenuVisibility(win);
|
||||
electronLocalshortcut.register(win, "Esc", () => {
|
||||
switchMenuVisibility(win);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let visible = true;
|
||||
function switchMenuVisibility(win) {
|
||||
visible = !visible;
|
||||
win.webContents.send("updateMenu", visible);
|
||||
}
|
||||
|
||||
function checkCheckbox(win, item) {
|
||||
//check item
|
||||
item.checked = !item.checked;
|
||||
//update menu (closes it)
|
||||
win.webContents.send("updateMenu", true);
|
||||
}
|
||||
|
||||
// Update checkboxes/radio buttons
|
||||
function updateCheckboxesAndRadioButtons(win, template) {
|
||||
for (let item of template) {
|
||||
// Change onClick of checkbox+radio
|
||||
if ((item.type === "checkbox" || item.type === "radio") && !item.fixed) {
|
||||
let originalOnclick = item.click;
|
||||
item.click = (itemClicked) => {
|
||||
originalOnclick(itemClicked);
|
||||
checkCheckbox(win, itemClicked);
|
||||
};
|
||||
item.fixed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
24
plugins/in-app-menu/front.js
Normal file
24
plugins/in-app-menu/front.js
Normal file
@ -0,0 +1,24 @@
|
||||
const { remote, ipcRenderer } = require("electron");
|
||||
|
||||
const customTitlebar = require("custom-electron-titlebar");
|
||||
|
||||
module.exports = () => {
|
||||
const bar = new customTitlebar.Titlebar({
|
||||
backgroundColor: customTitlebar.Color.fromHex("#050505"),
|
||||
itemBackgroundColor: customTitlebar.Color.fromHex("#121212"),
|
||||
});
|
||||
bar.updateTitle(" ");
|
||||
document.title = "Youtube Music";
|
||||
|
||||
ipcRenderer.on("updateMenu", function (event, menu) {
|
||||
if (menu) {
|
||||
bar.updateMenu(remote.Menu.getApplicationMenu());
|
||||
} else {
|
||||
try {
|
||||
bar.updateMenu(null);
|
||||
} catch (e) {
|
||||
//will always throw type error - null isn't menu, but it works
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -1,21 +1,22 @@
|
||||
/* increase font size for menu and menuItems */
|
||||
.titlebar, .menubar-menu-container .action-label{
|
||||
font-size: 14px !important;
|
||||
.titlebar,
|
||||
.menubar-menu-container .action-label {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* allow submenu's to show correctly */
|
||||
.menubar-menu-container{
|
||||
overflow-y: visible !important;
|
||||
.menubar-menu-container {
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
/* fixes scrollbar positioning relative to nav bar */
|
||||
#nav-bar-background.ytmusic-app-layout {
|
||||
right: 15px !important;
|
||||
right: 15px !important;
|
||||
}
|
||||
/* remove window dragging for nav bar (conflict with titlebar drag) */
|
||||
ytmusic-nav-bar,
|
||||
ytmusic-nav-bar,
|
||||
.tab-titleiron-icon,
|
||||
ytmusic-pivot-bar-item-renderer {
|
||||
-webkit-app-region : unset;
|
||||
-webkit-app-region: unset;
|
||||
}
|
||||
|
||||
/* Move navBar downwards and make it opaque */
|
||||
@ -28,34 +29,41 @@ ytmusic-search-box.ytmusic-nav-bar {
|
||||
}
|
||||
|
||||
.center-content.ytmusic-nav-bar {
|
||||
background: #030303;
|
||||
background: #030303;
|
||||
}
|
||||
yt-page-navigation-progress,
|
||||
yt-page-navigation-progress,
|
||||
#progress.yt-page-navigation-progress,
|
||||
ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer,
|
||||
ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_]
|
||||
#header.ytmusic-item-section-renderer,
|
||||
ytmusic-header-renderer.ytmusic-search-page {
|
||||
top: 90px !important;
|
||||
top: 90px !important;
|
||||
}
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background-color: #030303;
|
||||
-webkit-border-radius: 100px;
|
||||
width: 12px;
|
||||
background-color: #030303;
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
}
|
||||
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
|
||||
::-webkit-scrollbar:hover {
|
||||
background-color: rgba(15, 15, 15, 0.699);
|
||||
background-color: rgba(15, 15, 15, 0.699);
|
||||
}
|
||||
|
||||
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
|
||||
::-webkit-scrollbar-thumb:vertical {
|
||||
background-clip: padding-box;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
|
||||
background: rgb(49, 0, 0);
|
||||
-webkit-border-radius: 100px;
|
||||
background: rgb(49, 0, 0);
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:vertical:active {
|
||||
background: rgb(56, 0, 0); /* Some darker color when you click it */
|
||||
-webkit-border-radius: 100px;
|
||||
}
|
||||
background: rgb(56, 0, 0); /* Some darker color when you click it */
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
const { injectCSS } = require('../utils');
|
||||
const { Menu } = require('electron');
|
||||
const path = require('path');
|
||||
const electronLocalshortcut = require("electron-localshortcut");
|
||||
const config = require('../../config');
|
||||
const { setApplicationMenu } = require("../../menu");
|
||||
|
||||
//override Menu.buildFromTemplate, making it also fix the template
|
||||
const originBuildMenu = Menu.buildFromTemplate;
|
||||
//this function natively gets called on all submenu so no more reason to use recursion
|
||||
Menu.buildFromTemplate = function (template) {
|
||||
//fix checkbox and roles
|
||||
fixMenu(template);
|
||||
//return as normal
|
||||
return originBuildMenu(template);
|
||||
}
|
||||
|
||||
//win hook for fixing menu
|
||||
let win;
|
||||
|
||||
//check that menu doesn't get created twice
|
||||
let done = false;
|
||||
|
||||
module.exports = winImport => {
|
||||
win = winImport;
|
||||
// css for custom scrollbar + disable drag area(was causing bugs)
|
||||
injectCSS(win.webContents, path.join(__dirname, 'style.css'));
|
||||
win.on('ready-to-show', () => {
|
||||
// (apparently ready-to-show is called twice)
|
||||
if (done) {
|
||||
return
|
||||
}
|
||||
done = true;
|
||||
|
||||
//refresh menu to fix it
|
||||
setApplicationMenu(win);
|
||||
|
||||
//register keyboard shortcut && hide menu if hideMenu is enabled
|
||||
if (config.get('options.hideMenu')) {
|
||||
switchMenuVisibility();
|
||||
electronLocalshortcut.register(win, 'Esc', () => {
|
||||
switchMenuVisibility();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let visible = true;
|
||||
function switchMenuVisibility() {
|
||||
visible=!visible;
|
||||
win.webContents.send('updateMenu',visible)
|
||||
}
|
||||
|
||||
//go over each item in menu
|
||||
function fixMenu(template) {
|
||||
for (let item of template) {
|
||||
//change onClick of checkbox+radio if not fixed
|
||||
if ((item.type === 'checkbox' || item.type === 'radio') && !item.fixed) {
|
||||
let ogOnclick = item.click;
|
||||
item.click = (itemClicked) => {
|
||||
ogOnclick(itemClicked);
|
||||
checkCheckbox(itemClicked);
|
||||
};
|
||||
item.fixed = true;
|
||||
}
|
||||
//customize roles (will be deleted soon)
|
||||
else if (item.role != null) {
|
||||
fixRoles(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//custom menu doesn't support roles, so they get injected manually
|
||||
function fixRoles(MenuItem) {
|
||||
switch (MenuItem.role) {
|
||||
case 'reload':
|
||||
MenuItem.label = 'Reload';
|
||||
MenuItem.click = () => { win.webContents.reload(); }
|
||||
break;
|
||||
case 'forceReload':
|
||||
MenuItem.label = 'Force Reload';
|
||||
MenuItem.click = () => { win.webContents.reloadIgnoringCache(); }
|
||||
break;
|
||||
case 'zoomIn':
|
||||
MenuItem.label = 'Zoom In';
|
||||
MenuItem.click = () => { win.webContents.setZoomLevel(win.webContents.getZoomLevel() + 1); }
|
||||
break;
|
||||
case 'zoomOut':
|
||||
MenuItem.label = 'Zoom Out';
|
||||
MenuItem.click = () => { win.webContents.setZoomLevel(win.webContents.getZoomLevel() - 1); }
|
||||
break;
|
||||
case 'resetZoom':
|
||||
MenuItem.label = 'Reset Zoom';
|
||||
MenuItem.click = () => { win.webContents.setZoomLevel(0); }
|
||||
break;
|
||||
default:
|
||||
console.log(`Error fixing MenuRoles: "${MenuItem.role}" was not expected`);
|
||||
}
|
||||
delete MenuItem.role;
|
||||
}
|
||||
|
||||
function checkCheckbox(item) {
|
||||
//check item
|
||||
item.checked = !item.checked;
|
||||
//update menu (closes it)
|
||||
win.webContents.send('updateMenu', true);
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
const customTitlebar = require('custom-electron-titlebar');
|
||||
const {remote, ipcRenderer} = require('electron');
|
||||
|
||||
module.exports = () => {
|
||||
const myBar = new customTitlebar.Titlebar({
|
||||
backgroundColor: customTitlebar.Color.fromHex('#050505'),
|
||||
itemBackgroundColor: customTitlebar.Color.fromHex('#121212')
|
||||
});
|
||||
myBar.updateTitle(' ');
|
||||
document.title = 'Youtube Music';
|
||||
|
||||
ipcRenderer.on('updateMenu', function (event, menu) {
|
||||
if (menu) {
|
||||
myBar.updateMenu(remote.Menu.getApplicationMenu());
|
||||
} else {
|
||||
try {
|
||||
myBar.updateMenu(null);
|
||||
} catch (e) {
|
||||
//will always throw type error - null isn't menu, but it works
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user