smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-10 10:11:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(in-app-menu): add toggle-menu

Browse Source
This commit is contained in:
JellyBrick
2023-10-07 22:16:54 +09:00
parent 0bcfdbf39c
commit d45ca960b4
4 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/menu.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M3 17h12a1 1 0 0 1 .117 1.993L15 19H3a1 1 0 0 1-.117-1.993L3 17h12H3Zm0-6h18a1 1 0 0 1 .117 1.993L21 13H3a1 1 0 0 1-.117-1.993L3 11h18H3Zm0-6h15a1 1 0 0 1 .117 1.993L18 7H3a1 1 0 0 1-.117-1.993L3 5h15H3Z" fill="#ffffff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 338 B

19
assets/youtube-music.svg
View File

@ -1,13 +1,6 @@
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 176 176" enable-background="new 0 0 176 176" xml:space="preserve"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32">
<metadata> <circle fill="red" cx="88" cy="88" r="88"/>
<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"> <path fill="#FFF"
<slices/> d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/>
<sliceSourceBounds bottomLeftOrigin="true" height="176" width="176" x="8" y="-184"/> <path fill="#FFF" d="M72 111l39-24-39-22z"/>
</sfw> </svg>
</metadata>
<g id="XMLID_167_">
<circle id="XMLID_791_" fill="#FF0000" cx="88" cy="88" r="88"/>
<path id="XMLID_42_" fill="#FFFFFF" d="M88,46c23.1,0,42,18.8,42,42s-18.8,42-42,42s-42-18.8-42-42S64.9,46,88,46 M88,42 c-25.4,0-46,20.6-46,46s20.6,46,46,46s46-20.6,46-46S113.4,42,88,42L88,42z"/>
<polygon id="XMLID_274_" fill="#FFFFFF" points="72,111 111,87 72,65 "/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 902 B

After

Width:  |  Height:  |  Size: 353 B

23
plugins/in-app-menu/front.ts
View File

@ -2,8 +2,9 @@ import { ipcRenderer, Menu } from 'electron';
import { createPanel } from './menu/panel'; import { createPanel } from './menu/panel';
import logo from '../../assets/youtube-music.svg'; import logo from '../../assets/menu.svg';
import { isEnabled } from '../../config/plugins'; import { isEnabled } from '../../config/plugins';
import config from '../../config';
function $<E extends Element = Element>(selector: string) { function $<E extends Element = Element>(selector: string) {
return document.querySelector<E>(selector); return document.querySelector<E>(selector);
@ -12,11 +13,28 @@ function $<E extends Element = Element>(selector: string) {
const isMacOS = navigator.userAgent.includes('Macintosh'); const isMacOS = navigator.userAgent.includes('Macintosh');
export default () => { export default () => {
let hideMenu = config.get('options.hideMenu');
const titleBar = document.createElement('title-bar'); const titleBar = document.createElement('title-bar');
const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background'); const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
if (isMacOS) titleBar.style.setProperty('--offset-left', '70px'); if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
logo.classList.add('title-bar-icon'); logo.classList.add('title-bar-icon');
const logoClick = () => {
hideMenu = !hideMenu;
let visibilityStyle: string;
if (hideMenu) {
visibilityStyle = 'hidden';
} else {
visibilityStyle = 'visible';
}
const menus = document.querySelectorAll<HTMLElement>('menu-button');
menus.forEach((menu) => {
menu.style.visibility = visibilityStyle;
});
};
logo.onclick = logoClick;
ipcRenderer.on('toggleMenu', logoClick);
if (!isMacOS) titleBar.appendChild(logo); if (!isMacOS) titleBar.appendChild(logo);
document.body.appendChild(titleBar); document.body.appendChild(titleBar);
@ -47,6 +65,9 @@ export default () => {
menu.append(menuItem.label); menu.append(menuItem.label);
titleBar.appendChild(menu); titleBar.appendChild(menu);
if (hideMenu) {
menu.style.visibility = 'hidden';
}
}); });
}; };
updateMenu(); updateMenu();

8
plugins/in-app-menu/menu/panel.ts
View File

@ -29,7 +29,7 @@ export const createPanel = (
} else { } else {
const nativeImageIcon = typeof item.icon === 'string' ? nativeImage.createFromPath(item.icon) : item.icon; const nativeImageIcon = typeof item.icon === 'string' ? nativeImage.createFromPath(item.icon) : item.icon;
const iconURL = nativeImageIcon?.toDataURL(); const iconURL = nativeImageIcon?.toDataURL();
if (iconURL) iconWrapper.style.background = `url(${iconURL})`; if (iconURL) iconWrapper.style.background = `url(${iconURL})`;
} }
}; };
@ -37,7 +37,7 @@ export const createPanel = (
const radioGroups: [MenuItem, HTMLElement][] = []; const radioGroups: [MenuItem, HTMLElement][] = [];
items.map((item) => { items.map((item) => {
if (item.type === 'separator') return panel.appendChild(document.createElement('menu-separator')); if (item.type === 'separator') return panel.appendChild(document.createElement('menu-separator'));
const menu = document.createElement('menu-item'); const menu = document.createElement('menu-item');
const iconWrapper = document.createElement('menu-icon'); const iconWrapper = document.createElement('menu-icon');
@ -48,7 +48,7 @@ export const createPanel = (
menu.addEventListener('click', async () => { menu.addEventListener('click', async () => {
await ipcRenderer.invoke('menu-event', item.commandId); await ipcRenderer.invoke('menu-event', item.commandId);
const menuItem = await ipcRenderer.invoke('get-menu-by-id', item.commandId) as MenuItem | null; const menuItem = await ipcRenderer.invoke('get-menu-by-id', item.commandId) as MenuItem | null;
if (menuItem) { if (menuItem) {
updateIconState(iconWrapper, menuItem); updateIconState(iconWrapper, menuItem);
@ -64,7 +64,7 @@ export const createPanel = (
} }
} }
}); });
if (item.type === 'radio') { if (item.type === 'radio') {
radioGroups.push([item, iconWrapper]); radioGroups.push([item, iconWrapper]);
} }