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

Fix ref issue

Browse source
This commit is contained in:
jeffvli 2023-06-09 00:09:46 -07:00 • committed by Jeff
parent 14a6766072
commit 01608fa875
3 changed files with 51 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -152,7 +152,7 @@ export const FullScreenPlayerImage = () => {
<ImageContainer> <ImageContainer>
<AnimatePresence <AnimatePresence
initial={false} initial={false}
mode="popLayout" mode="sync"
> >
{imageState.current === 0 && ( {imageState.current === 0 && (
<ImageWithPlaceholder <ImageWithPlaceholder
@ -168,11 +168,7 @@ export const FullScreenPlayerImage = () => {
variants={imageVariants} variants={imageVariants}
/> />
)} )}
</AnimatePresence>
<AnimatePresence
initial={false}
mode="popLayout"
>
{imageState.current === 1 && ( {imageState.current === 1 && (
<ImageWithPlaceholder <ImageWithPlaceholder
key={imageKey} key={imageKey}

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

@ -69,55 +69,53 @@ const Controls = () => {
useHotkeys([['Escape', handleToggleFullScreenPlayer]]); useHotkeys([['Escape', handleToggleFullScreenPlayer]]);
return ( return (
<> <Group
<Group p="1rem"
p="1rem" pos="absolute"
pos="absolute" spacing="sm"
spacing="sm" sx={{
sx={{ left: 0,
left: 0, top: 10,
top: 10, }}
}} >
<Button
compact
size="sm"
tooltip={{ label: 'Minimize' }}
variant="subtle"
onClick={handleToggleFullScreenPlayer}
> >
<Button <RiArrowDownSLine size="2rem" />
compact </Button>
size="sm" <Popover position="bottom-start">
tooltip={{ label: 'Minimize' }} <Popover.Target>
variant="subtle" <Button
onClick={handleToggleFullScreenPlayer} compact
> size="sm"
<RiArrowDownSLine size="2rem" /> tooltip={{ label: 'Configure' }}
</Button> variant="subtle"
<Popover position="bottom-start"> >
<Popover.Target> <RiSettings3Line size="1.5rem" />
<Button </Button>
compact </Popover.Target>
size="sm" <Popover.Dropdown>
tooltip={{ label: 'Configure' }} <Option>
variant="subtle" <Option.Label>Dynamic Background</Option.Label>
> <Option.Control>
<RiSettings3Line size="1.5rem" /> <Switch
</Button> defaultChecked={dynamicBackground}
</Popover.Target> onChange={(e) =>
<Popover.Dropdown> setStore({
<Option> dynamicBackground: e.target.checked,
<Option.Label>Dynamic Background</Option.Label> })
<Option.Control> }
<Switch />
defaultChecked={dynamicBackground} </Option.Control>
onChange={(e) => </Option>
setStore({ <TableConfigDropdown type="fullScreen" />
dynamicBackground: e.target.checked, </Popover.Dropdown>
}) </Popover>
} </Group>
/>
</Option.Control>
</Option>
<TableConfigDropdown type="fullScreen" />
</Popover.Dropdown>
</Popover>
</Group>
</>
); );
}; };

8
src/renderer/layouts/default-layout/full-screen-overlay.tsx
View file

@ -6,10 +6,8 @@ export const FullScreenOverlay = () => {
const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore(); const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
return ( return (
<> <AnimatePresence initial={false}>
<AnimatePresence initial={false}> {isFullScreenPlayerExpanded && <FullScreenPlayer />}
{isFullScreenPlayerExpanded && <FullScreenPlayer />} </AnimatePresence>
</AnimatePresence>
</>
); );
}; };