115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
import { Suspense } from 'react';
|
|
|
|
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';
|
|
import { useSpecificAlbum } from '@/service/Album';
|
|
import { useSpecificArtists } from '@/service/Artist';
|
|
import { useSpecificGender } from '@/service/Gender';
|
|
|
|
export type DisplayTrackProps = {
|
|
track: Track;
|
|
onClick?: () => void;
|
|
contextMenu?: MenuElement[];
|
|
};
|
|
export const DisplayTrackFull = ({
|
|
track,
|
|
onClick,
|
|
contextMenu,
|
|
}: DisplayTrackProps) => {
|
|
const { trackActive } = useActivePlaylistService();
|
|
const { dataAlbum } = useSpecificAlbum(track?.albumId);
|
|
const { dataGender } = useSpecificGender(track?.genderId);
|
|
const { dataArtists } = useSpecificArtists(track?.artists);
|
|
return (
|
|
<Flex direction="row" width="full" height="full"
|
|
data-testid="display-track-full">
|
|
<Covers
|
|
data={track?.covers}
|
|
size="60px"
|
|
marginY="auto"
|
|
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}
|
|
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
|
>
|
|
{track.name} {track.track && ` [${track.track}]`}
|
|
</Text>
|
|
{dataAlbum && (
|
|
<Text
|
|
as="span"
|
|
alignContent="left"
|
|
fontSize="15px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
//noOfLines={1}
|
|
marginY="auto"
|
|
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
|
>
|
|
<Text as="span" fontWeight="normal">Album:</Text> {dataAlbum.name}
|
|
</Text>
|
|
)}
|
|
{dataArtists && (
|
|
<Text
|
|
as="span"
|
|
alignContent="left"
|
|
fontSize="15px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
//noOfLines={1}
|
|
marginY="auto"
|
|
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
|
>
|
|
<Text as="span" fontWeight="normal">Artist(s):</Text> {dataArtists.map((data) => data.name).join(', ')}
|
|
</Text>
|
|
)}
|
|
{dataGender && (
|
|
<Text
|
|
as="span"
|
|
alignContent="left"
|
|
fontSize="15px"
|
|
fontWeight="bold"
|
|
userSelect="none"
|
|
marginRight="auto"
|
|
overflow="hidden"
|
|
//noOfLines={1}
|
|
marginY="auto"
|
|
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
|
>
|
|
<Text as="span" fontWeight="normal">Gender:</Text> {dataGender.name}
|
|
</Text>
|
|
)}
|
|
</Flex>
|
|
<ContextMenu elements={contextMenu}
|
|
data-testid="display-track-full_context-menu" />
|
|
</Flex>
|
|
);
|
|
};
|