mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-11 18:41:47 +00:00
fix: remove xo, migration to eslint
This commit is contained in:
JellyBrick
@ -1,23 +1,23 @@
|
||||
const path = require("path");
|
||||
|
||||
const electronLocalshortcut = require("electron-localshortcut");
|
||||
|
||||
const { injectCSS } = require("../utils");
|
||||
const path = require('node:path');
|
||||
|
||||
const electronLocalshortcut = require('electron-localshortcut');
|
||||
const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
|
||||
|
||||
const { injectCSS } = require('../utils');
|
||||
|
||||
setupTitlebar();
|
||||
|
||||
//tracks menu visibility
|
||||
// Tracks menu visibility
|
||||
|
||||
module.exports = (win) => {
|
||||
// css for custom scrollbar + disable drag area(was causing bugs)
|
||||
injectCSS(win.webContents, path.join(__dirname, "style.css"));
|
||||
// Css for custom scrollbar + disable drag area(was causing bugs)
|
||||
injectCSS(win.webContents, path.join(__dirname, 'style.css'));
|
||||
|
||||
win.once("ready-to-show", () => {
|
||||
attachTitlebarToWindow(win);
|
||||
win.once('ready-to-show', () => {
|
||||
attachTitlebarToWindow(win);
|
||||
|
||||
electronLocalshortcut.register(win, "`", () => {
|
||||
win.webContents.send("toggleMenu");
|
||||
});
|
||||
});
|
||||
electronLocalshortcut.register(win, '`', () => {
|
||||
win.webContents.send('toggleMenu');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,74 +1,78 @@
|
||||
const { ipcRenderer } = require("electron");
|
||||
const config = require("../../config");
|
||||
const { Titlebar, Color } = require("custom-electron-titlebar");
|
||||
const { isEnabled } = require("../../config/plugins");
|
||||
function $(selector) { return document.querySelector(selector); }
|
||||
const { ipcRenderer } = require('electron');
|
||||
const { Titlebar, Color } = require('custom-electron-titlebar');
|
||||
|
||||
const config = require('../../config');
|
||||
const { isEnabled } = require('../../config/plugins');
|
||||
|
||||
function $(selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
module.exports = (options) => {
|
||||
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: config.get("options.hideMenu") ? null : undefined
|
||||
});
|
||||
bar.updateTitle(" ");
|
||||
document.title = "Youtube Music";
|
||||
const visible = () => Boolean($('.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: config.get('options.hideMenu') ? null : undefined,
|
||||
});
|
||||
bar.updateTitle(' ');
|
||||
document.title = 'Youtube Music';
|
||||
|
||||
const toggleMenu = () => {
|
||||
if (visible()) {
|
||||
bar.updateMenu(null);
|
||||
} else {
|
||||
bar.refreshMenu();
|
||||
}
|
||||
};
|
||||
const toggleMenu = () => {
|
||||
if (visible()) {
|
||||
bar.updateMenu(null);
|
||||
} else {
|
||||
bar.refreshMenu();
|
||||
}
|
||||
};
|
||||
|
||||
$('.cet-window-icon').addEventListener('click', toggleMenu);
|
||||
ipcRenderer.on("toggleMenu", toggleMenu);
|
||||
$('.cet-window-icon').addEventListener('click', toggleMenu);
|
||||
ipcRenderer.on('toggleMenu', toggleMenu);
|
||||
|
||||
ipcRenderer.on("refreshMenu", () => {
|
||||
if (visible()) {
|
||||
bar.refreshMenu();
|
||||
}
|
||||
});
|
||||
ipcRenderer.on('refreshMenu', () => {
|
||||
if (visible()) {
|
||||
bar.refreshMenu();
|
||||
}
|
||||
});
|
||||
|
||||
if (isEnabled("picture-in-picture")) {
|
||||
ipcRenderer.on("pip-toggle", (_, pipEnabled) => {
|
||||
bar.refreshMenu();
|
||||
});
|
||||
}
|
||||
if (isEnabled('picture-in-picture')) {
|
||||
ipcRenderer.on('pip-toggle', (_, pipEnabled) => {
|
||||
bar.refreshMenu();
|
||||
});
|
||||
}
|
||||
|
||||
// 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();
|
||||
const playPageObserver = new MutationObserver(setNavbarMargin);
|
||||
playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] })
|
||||
setupSearchOpenObserver();
|
||||
setupMenuOpenObserver();
|
||||
}, { once: true, passive: true })
|
||||
// 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();
|
||||
const playPageObserver = new MutationObserver(setNavbarMargin);
|
||||
playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] });
|
||||
setupSearchOpenObserver();
|
||||
setupMenuOpenObserver();
|
||||
}, { once: true, passive: true });
|
||||
};
|
||||
|
||||
function setupSearchOpenObserver() {
|
||||
const searchOpenObserver = new MutationObserver(mutations => {
|
||||
$('#nav-bar-background').style.webkitAppRegion =
|
||||
mutations[0].target.opened ? 'no-drag' : 'drag';
|
||||
});
|
||||
searchOpenObserver.observe($('ytmusic-search-box'), { attributeFilter: ["opened"] })
|
||||
const searchOpenObserver = new MutationObserver((mutations) => {
|
||||
$('#nav-bar-background').style.webkitAppRegion
|
||||
= mutations[0].target.opened ? 'no-drag' : 'drag';
|
||||
});
|
||||
searchOpenObserver.observe($('ytmusic-search-box'), { attributeFilter: ['opened'] });
|
||||
}
|
||||
|
||||
function setupMenuOpenObserver() {
|
||||
const menuOpenObserver = new MutationObserver(mutations => {
|
||||
$('#nav-bar-background').style.webkitAppRegion =
|
||||
Array.from($('.cet-menubar').childNodes).some(c => c.classList.contains('open')) ?
|
||||
'no-drag' : 'drag';
|
||||
});
|
||||
menuOpenObserver.observe($('.cet-menubar'), { subtree: true, attributeFilter: ["class"] })
|
||||
const menuOpenObserver = new MutationObserver((mutations) => {
|
||||
$('#nav-bar-background').style.webkitAppRegion
|
||||
= [...$('.cet-menubar').childNodes].some((c) => c.classList.contains('open'))
|
||||
? 'no-drag' : 'drag';
|
||||
});
|
||||
menuOpenObserver.observe($('.cet-menubar'), { subtree: true, attributeFilter: ['class'] });
|
||||
}
|
||||
|
||||
function setNavbarMargin() {
|
||||
$('#nav-bar-background').style.right =
|
||||
$('ytmusic-app-layout').playerPageOpen_ ?
|
||||
'0px' :
|
||||
'12px';
|
||||
$('#nav-bar-background').style.right
|
||||
= $('ytmusic-app-layout').playerPageOpen_
|
||||
? '0px'
|
||||
: '12px';
|
||||
}
|
||||
|
||||
@ -1,105 +1,107 @@
|
||||
/* increase font size for menu and menuItems */
|
||||
.titlebar,
|
||||
.menubar-menu-container .action-label {
|
||||
font-size: 14px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* fixes nav-bar-background opacity bug, reposition it, and allows clicking scrollbar through it */
|
||||
#nav-bar-background {
|
||||
opacity: 1 !important;
|
||||
pointer-events: none !important;
|
||||
top: 30px !important;
|
||||
height: 75px !important;
|
||||
opacity: 1 !important;
|
||||
pointer-events: none !important;
|
||||
top: 30px !important;
|
||||
height: 75px !important;
|
||||
}
|
||||
|
||||
/* fix top gap between nav-bar and browse-page */
|
||||
#browse-page {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
/* fix navbar hiding library items */
|
||||
ytmusic-section-list-renderer[page-type="MUSIC_PAGE_TYPE_LIBRARY_CONTENT_LANDING_PAGE"],
|
||||
ytmusic-section-list-renderer[page-type="MUSIC_PAGE_TYPE_PRIVATELY_OWNED_CONTENT_LANDING_PAGE"] {
|
||||
top: 50px;
|
||||
position: relative;
|
||||
top: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* remove window dragging for nav bar (conflict with titlebar drag) */
|
||||
ytmusic-nav-bar,
|
||||
.tab-titleiron-icon,
|
||||
ytmusic-pivot-bar-item-renderer {
|
||||
-webkit-app-region: unset !important;
|
||||
-webkit-app-region: unset !important;
|
||||
}
|
||||
|
||||
/* move up item selection renderers */
|
||||
ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer,
|
||||
ytmusic-tabs.stuck {
|
||||
top: calc(var(--ytmusic-nav-bar-height) - 15px) !important;
|
||||
top: calc(var(--ytmusic-nav-bar-height) - 15px) !important;
|
||||
}
|
||||
|
||||
/* fix weird positioning in search screen*/
|
||||
ytmusic-header-renderer.ytmusic-search-page {
|
||||
position: unset !important;
|
||||
position: unset !important;
|
||||
}
|
||||
|
||||
/* Move navBar downwards */
|
||||
ytmusic-nav-bar[slot="nav-bar"] {
|
||||
top: 17px !important;
|
||||
top: 17px !important;
|
||||
}
|
||||
|
||||
/* fix page progress bar position*/
|
||||
yt-page-navigation-progress,
|
||||
#progress.yt-page-navigation-progress {
|
||||
top: 30px !important;
|
||||
top: 30px !important;
|
||||
}
|
||||
|
||||
/* custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background-color: #030303;
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-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 {
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
border: 2px solid rgba(0, 0, 0, 0);
|
||||
|
||||
background: #3a3a3a;
|
||||
background-clip: padding-box;
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
background: #3a3a3a;
|
||||
background-clip: padding-box;
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical:active {
|
||||
background: #4d4c4c; /* some darker color when you click it */
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
background: #4d4c4c; /* some darker color when you click it */
|
||||
border-radius: 100px;
|
||||
-moz-border-radius: 100px;
|
||||
-webkit-border-radius: 100px;
|
||||
}
|
||||
|
||||
.cet-menubar-menu-container .cet-action-item {
|
||||
background-color: inherit
|
||||
background-color: inherit
|
||||
}
|
||||
|
||||
/** hideMenu toggler **/
|
||||
.cet-window-icon {
|
||||
-webkit-app-region: no-drag;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.cet-window-icon img {
|
||||
-webkit-user-drag: none;
|
||||
filter: invert(50%);
|
||||
-webkit-user-drag: none;
|
||||
filter: invert(50%);
|
||||
}
|
||||
|
||||
/** make navbar draggable **/
|
||||
#nav-bar-background {
|
||||
-webkit-app-region: drag;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
ytmusic-nav-bar input,
|
||||
@ -107,5 +109,5 @@ ytmusic-nav-bar span,
|
||||
ytmusic-nav-bar [role="button"],
|
||||
ytmusic-nav-bar yt-icon,
|
||||
tp-yt-iron-dropdown {
|
||||
-webkit-app-region: no-drag;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user