antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve visibility of fullscreen player buttons

Browse source
This commit is contained in:
jeffvli 2025-06-25 19:53:49 -07:00
parent 6782cd0dcc
commit 0afbe4c0a2
1 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { useHotkeys } from '@mantine/hooks'; import { useHotkeys } from '@mantine/hooks';
import { motion, Variants } from 'motion/react'; import { motion, Variants } from 'motion/react';
import { CSSProperties, useLayoutEffect, useRef } from 'react'; import { CSSProperties, useLayoutEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router'; import { useLocation } from 'react-router';
@ -32,7 +32,11 @@ import { Platform } from '/@/shared/types/types';
const mainBackground = 'var(--theme-colors-background)'; const mainBackground = 'var(--theme-colors-background)';
const Controls = () => { interface ControlsProps {
isPageHovered: boolean;
}
const Controls = ({ isPageHovered }: ControlsProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { const {
dynamicBackground, dynamicBackground,
@ -77,7 +81,7 @@ const Controls = () => {
iconProps={{ size: 'lg' }} iconProps={{ size: 'lg' }}
onClick={handleToggleFullScreenPlayer} onClick={handleToggleFullScreenPlayer}
tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }} tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }}
variant="subtle" variant={isPageHovered ? 'default' : 'subtle'}
/> />
<Popover position="bottom-start"> <Popover position="bottom-start">
<Popover.Target> <Popover.Target>
@ -85,7 +89,7 @@ const Controls = () => {
icon="settings" icon="settings"
iconProps={{ size: 'lg' }} iconProps={{ size: 'lg' }}
tooltip={{ label: t('common.configure', { postProcess: 'titleCase' }) }} tooltip={{ label: t('common.configure', { postProcess: 'titleCase' }) }}
variant="subtle" variant={isPageHovered ? 'default' : 'subtle'}
/> />
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown>
@ -410,6 +414,8 @@ export const FullScreenPlayer = () => {
const { setStore } = useFullScreenPlayerStoreActions(); const { setStore } = useFullScreenPlayerStoreActions();
const { windowBarStyle } = useWindowSettings(); const { windowBarStyle } = useWindowSettings();
const [isPageHovered, setIsPageHovered] = useState(false);
const location = useLocation(); const location = useLocation();
const isOpenedRef = useRef<boolean | null>(null); const isOpenedRef = useRef<boolean | null>(null);
@ -441,10 +447,12 @@ export const FullScreenPlayer = () => {
custom={{ background, backgroundImage, dynamicBackground, windowBarStyle }} custom={{ background, backgroundImage, dynamicBackground, windowBarStyle }}
exit="closed" exit="closed"
initial="closed" initial="closed"
onMouseEnter={() => setIsPageHovered(true)}
onMouseLeave={() => setIsPageHovered(false)}
transition={{ duration: 2 }} transition={{ duration: 2 }}
variants={containerVariants} variants={containerVariants}
> >
<Controls /> <Controls isPageHovered={isPageHovered} />
{dynamicBackground && ( {dynamicBackground && (
<div <div
className={styles.backgroundImageOverlay} className={styles.backgroundImageOverlay}