vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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 { windowBarStyle } = useWindowSettings();
const showImage = useAppStore((state) => state.sidebar.image);
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return [];
@@ -131,17 +132,18 @@ export const Sidebar = () => {
)}
</Accordion>
</ScrollArea>
<motion.div className={styles.serverSelectorWrapper} layout>
<ServerSelector />
</motion.div>
<SidebarImage />
<AnimatePresence initial={false} mode="popLayout">
<motion.div className={styles.serverSelectorWrapper} key="server-selector" layout>
<ServerSelector />
</motion.div>
{showImage && <SidebarImage />}
</AnimatePresence>
</div>
);
};
const SidebarImage = () => {
const { t } = useTranslation();
const showImage = useAppStore((state) => state.sidebar.image);
const leftWidth = useAppStore((state) => state.sidebar.leftWidth);
const { setSideBar } = useAppStoreActions();
const currentSong = usePlayerSong();
@@ -176,66 +178,58 @@ const SidebarImage = () => {
};
return (
<AnimatePresence initial={false} mode="popLayout">
{showImage && (
<motion.div
animate={{ opacity: 1, y: 0 }}
className={styles.imageContainer}
exit={{ opacity: 0, y: 200 }}
initial={{ opacity: 0, y: 200 }}
key="sidebar-image"
onClick={expandFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
style={
{
'--sidebar-image-height': leftWidth,
} as CSSProperties
}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
{upsizedImageUrl ? (
<img
className={styles.sidebarImage}
loading="eager"
src={upsizedImageUrl}
/>
) : (
<ImageUnloader />
)}
</Tooltip>
<ActionIcon
icon="arrowDownS"
iconProps={{
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
setSideBar({ image: false });
}}
opacity={0.8}
radius="md"
style={{
cursor: 'default',
position: 'absolute',
right: '1rem',
top: '1rem',
}}
tooltip={{
label: t('common.collapse', {
postProcess: 'titleCase',
}),
openDelay: 500,
}}
/>
</motion.div>
)}
</AnimatePresence>
<motion.div
animate={{ opacity: 1, y: 0 }}
className={styles.imageContainer}
exit={{ opacity: 0, y: 200 }}
initial={{ opacity: 0, y: 200 }}
key="sidebar-image"
onClick={expandFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
style={
{
'--sidebar-image-height': leftWidth,
} as CSSProperties
}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
{upsizedImageUrl ? (
<img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />
) : (
<ImageUnloader />
)}
</Tooltip>
<ActionIcon
icon="arrowDownS"
iconProps={{
size: 'lg',
}}
onClick={(e) => {
e.stopPropagation();
setSideBar({ image: false });
}}
opacity={0.8}
radius="md"
style={{
cursor: 'default',
position: 'absolute',
right: '1rem',
top: '1rem',
}}
tooltip={{
label: t('common.collapse', {
postProcess: 'titleCase',
}),
openDelay: 500,
}}
/>
</motion.div>
);
};