pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set fullscreen player over right sidebar

Browse source
This commit is contained in:
jeffvli 2023-05-10 03:08:55 -07:00
parent 87abd0c6f5
commit f9e410a1f5
1 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -10,14 +10,16 @@ import {
useCurrentSong, useCurrentSong,
useFullScreenPlayerStore, useFullScreenPlayerStore,
useFullScreenPlayerStoreActions, useFullScreenPlayerStoreActions,
useWindowSettings,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { useFastAverageColor } from '../../../hooks/use-fast-average-color'; import { useFastAverageColor } from '../../../hooks/use-fast-average-color';
import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image'; import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue'; import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
import { TableConfigDropdown } from '/@/renderer/components/virtual-table'; import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
import { Platform } from '/@/renderer/types';
const Container = styled(motion.div)` const Container = styled(motion.div)`
z-index: 100; z-index: 200;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem;
@ -124,8 +126,10 @@ const Controls = () => {
}; };
const containerVariants: Variants = { const containerVariants: Variants = {
closed: { closed: (custom) => {
height: 'calc(100vh - 90px)', const { windowBarStyle } = custom;
return {
height: windowBarStyle !== Platform.WEB ? 'calc(100vh - 120px)' : 'calc(100vh - 90px)',
position: 'absolute', position: 'absolute',
top: '100vh', top: '100vh',
transition: { transition: {
@ -134,12 +138,13 @@ const containerVariants: Variants = {
}, },
width: '100vw', width: '100vw',
y: -100, y: -100,
};
}, },
open: (custom) => { open: (custom) => {
const { dynamicBackground, background } = custom; const { dynamicBackground, background, windowBarStyle } = custom;
return { return {
background: dynamicBackground ? background : 'var(--main-bg)', background: dynamicBackground ? background : 'var(--main-bg)',
height: 'calc(100vh - 90px)', height: windowBarStyle !== Platform.WEB ? 'calc(100vh - 120px)' : 'calc(100vh - 90px)',
left: 0, left: 0,
position: 'absolute', position: 'absolute',
top: 0, top: 0,
@ -161,6 +166,7 @@ const containerVariants: Variants = {
export const FullScreenPlayer = () => { export const FullScreenPlayer = () => {
const { dynamicBackground } = useFullScreenPlayerStore(); const { dynamicBackground } = useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions(); const { setStore } = useFullScreenPlayerStoreActions();
const { windowBarStyle } = useWindowSettings();
const location = useLocation(); const location = useLocation();
const isOpenedRef = useRef<boolean | null>(null); const isOpenedRef = useRef<boolean | null>(null);
@ -179,7 +185,7 @@ export const FullScreenPlayer = () => {
return ( return (
<Container <Container
animate="open" animate="open"
custom={{ background, dynamicBackground }} custom={{ background, dynamicBackground, windowBarStyle }}
exit="closed" exit="closed"
initial="closed" initial="closed"
variants={containerVariants} variants={containerVariants}