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

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,122 +6,122 @@ import styled from 'styled-components';
import { Button, TextTitle } from '/@/renderer/components';
import { PlayQueue } from '/@/renderer/features/now-playing';
import {
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
useFullScreenPlayerStore,
useFullScreenPlayerStoreActions,
} from '/@/renderer/store/full-screen-player.store';
import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
const QueueContainer = styled.div`
position: relative;
display: flex;
height: 100%;
position: relative;
display: flex;
height: 100%;
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
--ag-background-color: rgba(0, 0, 0, 0%) !important;
--ag-odd-row-background-color: rgba(0, 0, 0, 0%) !important;
}
.ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important;
--ag-background-color: rgba(0, 0, 0, 0%) !important;
--ag-odd-row-background-color: rgba(0, 0, 0, 0%) !important;
}
.ag-header {
display: none !important;
}
.ag-header {
display: none !important;
}
`;
const ActiveTabIndicator = styled(motion.div)`
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--main-fg);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: var(--main-fg);
`;
const HeaderItemWrapper = styled.div`
position: relative;
z-index: 2;
position: relative;
z-index: 2;
`;
const GridContainer = styled.div`
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: 1fr;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
grid-template-columns: 1fr;
`;
export const FullScreenPlayerQueue = () => {
const { activeTab } = useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
const { activeTab } = useFullScreenPlayerStore();
const { setStore } = useFullScreenPlayerStoreActions();
const headerItems = [
{
active: activeTab === 'queue',
icon: <RiFileMusicLine size="1.5rem" />,
label: 'Up Next',
onClick: () => setStore({ activeTab: 'queue' }),
},
{
active: activeTab === 'related',
icon: <HiOutlineQueueList size="1.5rem" />,
label: 'Related',
onClick: () => setStore({ activeTab: 'related' }),
},
{
active: activeTab === 'lyrics',
icon: <RiFileTextLine size="1.5rem" />,
label: 'Lyrics',
onClick: () => setStore({ activeTab: 'lyrics' }),
},
];
const headerItems = [
{
active: activeTab === 'queue',
icon: <RiFileMusicLine size="1.5rem" />,
label: 'Up Next',
onClick: () => setStore({ activeTab: 'queue' }),
},
{
active: activeTab === 'related',
icon: <HiOutlineQueueList size="1.5rem" />,
label: 'Related',
onClick: () => setStore({ activeTab: 'related' }),
},
{
active: activeTab === 'lyrics',
icon: <RiFileTextLine size="1.5rem" />,
label: 'Lyrics',
onClick: () => setStore({ activeTab: 'lyrics' }),
},
];
return (
<GridContainer className="full-screen-player-queue-container">
<Group
grow
align="center"
position="center"
>
{headerItems.map((item) => (
<HeaderItemWrapper key={`tab-${item.label}`}>
<Button
fullWidth
uppercase
fw="600"
pos="relative"
size="lg"
sx={{
alignItems: 'center',
color: item.active
? 'var(--main-fg) !important'
: 'var(--main-fg-secondary) !important',
letterSpacing: '1px',
}}
variant="subtle"
onClick={item.onClick}
return (
<GridContainer className="full-screen-player-queue-container">
<Group
grow
align="center"
position="center"
>
{item.label}
</Button>
{item.active ? <ActiveTabIndicator layoutId="underline" /> : null}
</HeaderItemWrapper>
))}
</Group>
{activeTab === 'queue' ? (
<QueueContainer>
<PlayQueue type="fullScreen" />
</QueueContainer>
) : activeTab === 'related' ? (
<Center>
<Group>
<RiInformationFill size="2rem" />
<TextTitle
order={3}
weight={700}
>
COMING SOON
</TextTitle>
</Group>
</Center>
) : activeTab === 'lyrics' ? (
<Lyrics />
) : null}
</GridContainer>
);
{headerItems.map((item) => (
<HeaderItemWrapper key={`tab-${item.label}`}>
<Button
fullWidth
uppercase
fw="600"
pos="relative"
size="lg"
sx={{
alignItems: 'center',
color: item.active
? 'var(--main-fg) !important'
: 'var(--main-fg-secondary) !important',
letterSpacing: '1px',
}}
variant="subtle"
onClick={item.onClick}
>
{item.label}
</Button>
{item.active ? <ActiveTabIndicator layoutId="underline" /> : null}
</HeaderItemWrapper>
))}
</Group>
{activeTab === 'queue' ? (
<QueueContainer>
<PlayQueue type="fullScreen" />
</QueueContainer>
) : activeTab === 'related' ? (
<Center>
<Group>
<RiInformationFill size="2rem" />
<TextTitle
order={3}
weight={700}
>
COMING SOON
</TextTitle>
</Group>
</Center>
) : activeTab === 'lyrics' ? (
<Lyrics />
) : null}
</GridContainer>
);
};