vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-09 20:29:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix sidebar image animate out

Browse Source
This commit is contained in:
jeffvli
2025-11-28 20:06:37 -08:00
parent c376f3add3
commit 2101b2e1c7
1 changed files with 60 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/sidebar/components/sidebar.tsx
+60 -66
View File
@@ -59,6 +59,7 @@ export const Sidebar = () => {
const { sidebarItems } = useGeneralSettings(); const { sidebarItems } = useGeneralSettings();
const { windowBarStyle } = useWindowSettings(); const { windowBarStyle } = useWindowSettings();
const showImage = useAppStore((state) => state.sidebar.image);
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => { const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return []; if (!sidebarItems) return [];
@@ -131,17 +132,18 @@ export const Sidebar = () => {
)} )}
</Accordion> </Accordion>
</ScrollArea> </ScrollArea>
<motion.div className={styles.serverSelectorWrapper} layout> <AnimatePresence initial={false} mode="popLayout">
<ServerSelector /> <motion.div className={styles.serverSelectorWrapper} key="server-selector" layout>
</motion.div> <ServerSelector />
<SidebarImage /> </motion.div>
{showImage && <SidebarImage />}
</AnimatePresence>
</div> </div>
); );
}; };
const SidebarImage = () => { const SidebarImage = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const showImage = useAppStore((state) => state.sidebar.image);
const leftWidth = useAppStore((state) => state.sidebar.leftWidth); const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
const { setSideBar } = useAppStoreActions(); const { setSideBar } = useAppStoreActions();
const currentSong = usePlayerSong(); const currentSong = usePlayerSong();
@@ -176,66 +178,58 @@ const SidebarImage = () => {
}; };
return ( return (
<AnimatePresence initial={false} mode="popLayout"> <motion.div
{showImage && ( animate={{ opacity: 1, y: 0 }}
<motion.div className={styles.imageContainer}
animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 200 }}
className={styles.imageContainer} initial={{ opacity: 0, y: 200 }}
exit={{ opacity: 0, y: 200 }} key="sidebar-image"
initial={{ opacity: 0, y: 200 }} onClick={expandFullScreenPlayer}
key="sidebar-image" onContextMenu={handleToggleContextMenu}
onClick={expandFullScreenPlayer} role="button"
onContextMenu={handleToggleContextMenu} style={
role="button" {
style={ '--sidebar-image-height': leftWidth,
{ } as CSSProperties
'--sidebar-image-height': leftWidth, }
} as CSSProperties transition={{ duration: 0.3, ease: 'easeInOut' }}
} >
transition={{ duration: 0.3, ease: 'easeInOut' }} <Tooltip
> label={t('player.toggleFullscreenPlayer', {
<Tooltip postProcess: 'sentenceCase',
label={t('player.toggleFullscreenPlayer', { })}
postProcess: 'sentenceCase', openDelay={500}
})} >
openDelay={500} {upsizedImageUrl ? (
> <img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />
{upsizedImageUrl ? ( ) : (
<img <ImageUnloader />
className={styles.sidebarImage} )}
loading="eager" </Tooltip>
src={upsizedImageUrl} <ActionIcon
/> icon="arrowDownS"
) : ( iconProps={{
<ImageUnloader /> size: 'lg',
)} }}
</Tooltip> onClick={(e) => {
<ActionIcon e.stopPropagation();
icon="arrowDownS" setSideBar({ image: false });
iconProps={{ }}
size: 'lg', opacity={0.8}
}} radius="md"
onClick={(e) => { style={{
e.stopPropagation(); cursor: 'default',
setSideBar({ image: false }); position: 'absolute',
}} right: '1rem',
opacity={0.8} top: '1rem',
radius="md" }}
style={{ tooltip={{
cursor: 'default', label: t('common.collapse', {
position: 'absolute', postProcess: 'titleCase',
right: '1rem', }),
top: '1rem', openDelay: 500,
}} }}
tooltip={{ />
label: t('common.collapse', { </motion.div>
postProcess: 'titleCase',
}),
openDelay: 500,
}}
/>
</motion.div>
)}
</AnimatePresence>
); );
}; };