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

fix(style): fix fullscreen style and in-app-menu

Browse Source
This commit is contained in:
Su-Yong
2024-03-24 01:28:34 +09:00
parent 97695444af
commit ed700c2916
3 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/album-color-theme/style.css
View File

@ -24,12 +24,6 @@ yt-page-navigation-progress {
background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) !important;
}
#img,
#player,
.song-media-controls.style-scope.ytmusic-player {
border-radius: 2% !important;
}
#items {
border-radius: 10px !important;
}

21
src/plugins/in-app-menu/renderer/TitleBar.tsx
View File

@ -1,5 +1,5 @@
import { Menu, MenuItem } from 'electron';
import { createEffect, createResource, createSignal, Index, Match, onMount, Show, Switch } from 'solid-js';
import { createEffect, createResource, createSignal, Index, Match, onCleanup, onMount, Show, Switch } from 'solid-js';
import { css } from 'solid-styled-components';
import { TransitionGroup } from 'solid-transition-group';
@ -38,11 +38,16 @@ const titleStyle = cache(() => css`
user-select: none;
transition: opacity 200ms ease 0s,
transform 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s,
background-color 300ms cubic-bezier(0.2, 0, 0.6, 1) 0s;
&[data-macos="true"] {
padding: 4px 4px 4px 74px;
}
ytmusic-app:has(ytmusic-player[player-ui-state=FULLSCREEN]) ~ &:not([data-show="true"]) {
transform: translateY(calc(-1 * var(--menu-bar-height, 32px)));
}
`);
const separatorStyle = cache(() => css`
@ -162,6 +167,7 @@ export const TitleBar = (props: TitleBarProps) => {
const [ignoreTransition, setIgnoreTransition] = createSignal(false);
const [openTarget, setOpenTarget] = createSignal<HTMLElement | null>(null);
const [menu, setMenu] = createSignal<Menu | null>(null);
const [mouseY, setMouseY] = createSignal(0);
const [data, { refetch }] = createResource(async () => await props.ipc.invoke('get-menu') as Promise<Menu | null>);
const [isMaximized, { refetch: refetchMaximize }] = createResource(async () => await props.ipc.invoke('window-is-maximized') as Promise<boolean>);
@ -224,6 +230,10 @@ export const TitleBar = (props: TitleBarProps) => {
setMenu(await refreshMenuItem(menuData, commandId));
};
const listener = (e: MouseEvent) => {
setMouseY(e.clientY);
};
onMount(() => {
props.ipc.on('close-all-in-app-menu-panel', async () => {
setIgnoreTransition(true);
@ -257,6 +267,9 @@ export const TitleBar = (props: TitleBarProps) => {
setOpenTarget(null);
}
});
// tracking mouse position
window.addEventListener('mousemove', listener);
});
createEffect(() => {
@ -265,8 +278,12 @@ export const TitleBar = (props: TitleBarProps) => {
}
});
onCleanup(() => {
window.removeEventListener('mousemove', listener);
});
return (
<nav data-ytmd-main-panel={true} class={titleStyle()} data-macos={props.isMacOS}>
<nav data-ytmd-main-panel={true} class={titleStyle()} data-macos={props.isMacOS} data-show={mouseY() < 32}>
<IconButton
onClick={() => setCollapsed(!collapsed())}
style={{

7
src/youtube-music.css
View File

@ -65,12 +65,17 @@ tp-yt-paper-item.ytmusic-guide-entry-renderer::before {
border-radius: 8px !important;
}
/* fix video player align */
#av-id {
padding-bottom: 0;
}
#av-id ~ #player.ytmusic-player-page {
#av-id ~ #player.ytmusic-player-page:not([player-ui-state="FULLSCREEN"]) {
margin-top: auto !important;
margin-bottom: auto !important;
max-height: calc(100% - (var(--ytmusic-player-page-vertical-padding) * 2));
}
ytmusic-player[player-ui-state=FULLSCREEN] {
top: calc(var(--menu-bar-height, 32px) * -1) !important;
}