106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { ReactElement } from 'react';
|
|
|
|
import { Box, Flex, Text } from '@chakra-ui/react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
|
|
import { EmptyEnd } from '@/components/EmptyEnd';
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { TopBar } from '@/components/TopBar/TopBar';
|
|
import { DisplayTrack } from '@/components/track/DisplayTrack';
|
|
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
|
|
import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
|
|
import { alphabet } from '@/scene/track/TrackSelectionPage';
|
|
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
|
import { useTrackService, useTracksWithStartName } from '@/service/Track';
|
|
import { useThemeMode } from '@/utils/theme-tools';
|
|
|
|
export const TracksStartLetterDetailPage = () => {
|
|
const { startLetter } = useParams();
|
|
const { mode } = useThemeMode();
|
|
const { isLoading, tracksStartsWith } = useTracksWithStartName(
|
|
startLetter !== '^^'
|
|
? startLetter
|
|
? [startLetter.toLowerCase(), startLetter.toUpperCase()]
|
|
: 'ZZZZ'
|
|
: [...alphabet, ...alphabet.map((str) => str.toUpperCase())],
|
|
startLetter === '^^'
|
|
);
|
|
const { playInList } = useActivePlaylistService();
|
|
const onSelectItem = (trackId: number) => {
|
|
//navigate(`/artist/${artistIdInt}/gender/${genderId}`);
|
|
let currentPlay = 0;
|
|
const listTrackId: number[] = [];
|
|
if (!tracksStartsWith) {
|
|
console.log('Fail to get tracks...');
|
|
return;
|
|
}
|
|
for (let iii = 0; iii < tracksStartsWith.length; iii++) {
|
|
listTrackId.push(tracksStartsWith[iii].id);
|
|
if (tracksStartsWith[iii].id === trackId) {
|
|
currentPlay = iii;
|
|
}
|
|
}
|
|
playInList(currentPlay, listTrackId);
|
|
};
|
|
console.log(
|
|
`Redraw ... isLoading=${isLoading} data=${tracksStartsWith?.length} ... ${Date()}`
|
|
);
|
|
return (
|
|
<>
|
|
<TopBar title="All Tracks" />
|
|
<PageLayout>
|
|
<Flex
|
|
direction="column"
|
|
gap="20px"
|
|
marginX="auto"
|
|
padding="20px"
|
|
width="80%"
|
|
>
|
|
{isLoading &&
|
|
[1, 2, 3, 4]?.map((data) => (
|
|
<Box
|
|
minWidth="100%"
|
|
//height="60px"
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={mode('#FFFFFF88', '#00000088')}
|
|
key={data}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: mode('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
>
|
|
<DisplayTrackSkeleton />
|
|
</Box>
|
|
))}
|
|
{!isLoading &&
|
|
tracksStartsWith?.map((data) => (
|
|
<Box
|
|
minWidth="100%"
|
|
//height="60px"
|
|
border="1px"
|
|
borderColor="brand.900"
|
|
backgroundColor={mode('#FFFFFF88', '#00000088')}
|
|
key={data.id}
|
|
padding="5px"
|
|
as="button"
|
|
_hover={{
|
|
boxShadow: 'outline-over',
|
|
bgColor: mode('#FFFFFFF7', '#000000F7'),
|
|
}}
|
|
>
|
|
<DisplayTrackFull
|
|
track={data}
|
|
onClick={() => onSelectItem(data.id)}
|
|
/>
|
|
</Box>
|
|
))}
|
|
<EmptyEnd />
|
|
</Flex>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|