58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import { Flex, Text } from '@chakra-ui/react';
|
|
import { LuMusic2, LuPlay } from 'react-icons/lu';
|
|
|
|
import { Track } from '@/back-api';
|
|
import { Covers } from '@/components/Cover';
|
|
import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
|
|
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
|
|
|
export type DisplayTrackProps = {
|
|
track: Track;
|
|
onClick?: () => void;
|
|
contextMenu?: MenuElement[];
|
|
};
|
|
export const DisplayTrack = ({
|
|
track,
|
|
onClick,
|
|
contextMenu,
|
|
}: DisplayTrackProps) => {
|
|
const { trackActive } = useActivePlaylistService();
|
|
return (
|
|
<Flex direction="row" width="full" height="full">
|
|
<Covers
|
|
data={track?.covers}
|
|
size="50"
|
|
height="full"
|
|
/* TODO: iconEmpty={
|
|
trackActive?.id === track.id ? LuPlay : LuMusic2
|
|
} */
|
|
onClick={onClick}
|
|
/>
|
|
<Flex
|
|
direction="column"
|
|
width="full"
|
|
height="full"
|
|
paddingLeft="5px"
|
|
overflowX="hidden"
|
|
onClick={onClick}
|
|
>
|
|
<Text
|
|
as="span"
|
|
alignContent="left"
|
|
fontSize="20px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
// TODO: noOfLines={[1, 2]}
|
|
marginY="auto"
|
|
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
|
>
|
|
[{track.track}] {track.name}
|
|
</Text>
|
|
</Flex>
|
|
<ContextMenu elements={contextMenu} />
|
|
</Flex>
|
|
);
|
|
};
|