142 lines
3.9 KiB
TypeScript
142 lines
3.9 KiB
TypeScript
import { AnimatePresence, motion, Variants } from 'framer-motion';
|
|
import { forwardRef, Ref } from 'react';
|
|
import { useLocation } from 'react-router';
|
|
import styled from 'styled-components';
|
|
import { SidebarPlayQueue, DrawerPlayQueue } from '/@/renderer/features/now-playing';
|
|
import { ResizeHandle } from '/@/renderer/features/shared';
|
|
import { AppRoute } from '/@/renderer/router/routes';
|
|
import { useGeneralSettings, useSidebarStore, useWindowSettings } from '/@/renderer/store';
|
|
import { Platform } from '/@/renderer/types';
|
|
|
|
const RightSidebarContainer = styled(motion.aside)`
|
|
position: relative;
|
|
grid-area: right-sidebar;
|
|
height: 100%;
|
|
background: var(--sidebar-bg);
|
|
border-left: var(--sidebar-border);
|
|
`;
|
|
|
|
const queueSidebarVariants: Variants = {
|
|
closed: (rightWidth) => ({
|
|
transition: { duration: 0.5 },
|
|
width: rightWidth,
|
|
x: 1000,
|
|
zIndex: 120,
|
|
}),
|
|
open: (rightWidth) => ({
|
|
transition: {
|
|
duration: 0.5,
|
|
ease: 'anticipate',
|
|
},
|
|
width: rightWidth,
|
|
x: 0,
|
|
zIndex: 120,
|
|
}),
|
|
};
|
|
|
|
const QueueDrawer = styled(motion.div)`
|
|
background: var(--main-bg);
|
|
border: 3px solid var(--generic-border-color);
|
|
border-radius: 10px;
|
|
`;
|
|
|
|
const queueDrawerVariants: Variants = {
|
|
closed: (windowBarStyle) => ({
|
|
height:
|
|
windowBarStyle === Platform.WINDOWS || Platform.MACOS
|
|
? 'calc(100vh - 205px)'
|
|
: 'calc(100vh - 175px)',
|
|
position: 'absolute',
|
|
right: 0,
|
|
top: '75px',
|
|
transition: {
|
|
duration: 0.4,
|
|
ease: 'anticipate',
|
|
},
|
|
width: '450px',
|
|
x: '50vw',
|
|
}),
|
|
open: (windowBarStyle) => ({
|
|
boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.8)',
|
|
height:
|
|
windowBarStyle === Platform.WINDOWS || Platform.MACOS
|
|
? 'calc(100vh - 205px)'
|
|
: 'calc(100vh - 175px)',
|
|
position: 'absolute',
|
|
right: '20px',
|
|
top: '75px',
|
|
transition: {
|
|
damping: 10,
|
|
delay: 0,
|
|
duration: 0.4,
|
|
ease: 'anticipate',
|
|
mass: 0.5,
|
|
},
|
|
width: '450px',
|
|
x: 0,
|
|
zIndex: 120,
|
|
}),
|
|
};
|
|
|
|
interface RightSidebarProps {
|
|
isResizing: boolean;
|
|
startResizing: (direction: 'left' | 'right') => void;
|
|
}
|
|
|
|
export const RightSidebar = forwardRef(
|
|
({ isResizing: isResizingRight, startResizing }: RightSidebarProps, ref: Ref<HTMLDivElement>) => {
|
|
const { windowBarStyle } = useWindowSettings();
|
|
const { rightWidth, rightExpanded } = useSidebarStore();
|
|
const { sideQueueType } = useGeneralSettings();
|
|
const location = useLocation();
|
|
const showSideQueue = rightExpanded && location.pathname !== AppRoute.NOW_PLAYING;
|
|
|
|
return (
|
|
<AnimatePresence
|
|
key="queue-sidebar"
|
|
presenceAffectsLayout
|
|
initial={false}
|
|
mode="sync"
|
|
>
|
|
{showSideQueue && (
|
|
<>
|
|
{sideQueueType === 'sideQueue' ? (
|
|
<RightSidebarContainer
|
|
key="queue-sidebar"
|
|
animate="open"
|
|
custom={rightWidth}
|
|
exit="closed"
|
|
id="sidebar-queue"
|
|
initial="closed"
|
|
variants={queueSidebarVariants}
|
|
>
|
|
<ResizeHandle
|
|
ref={ref}
|
|
isResizing={isResizingRight}
|
|
placement="left"
|
|
onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
startResizing('right');
|
|
}}
|
|
/>
|
|
<SidebarPlayQueue />
|
|
</RightSidebarContainer>
|
|
) : (
|
|
<QueueDrawer
|
|
key="queue-drawer"
|
|
animate="open"
|
|
custom={windowBarStyle}
|
|
exit="closed"
|
|
id="drawer-queue"
|
|
initial="closed"
|
|
variants={queueDrawerVariants}
|
|
>
|
|
<DrawerPlayQueue />
|
|
</QueueDrawer>
|
|
)}
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
},
|
|
);
|