129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
import { Route, Routes, useNavigate } from 'react-router-dom';
|
|
|
|
import { EmptyEnd } from '@/components/EmptyEnd';
|
|
import { PageLayout } from '@/components/Layout/PageLayout';
|
|
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
|
import { TopBar } from '@/components/TopBar/TopBar';
|
|
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
|
|
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
|
|
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
|
import { useColorThemeValue } from '@/theme/ThemeContext';
|
|
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
|
|
import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';
|
|
import { Flex } from '@/ui';
|
|
|
|
export const OnAirPage = () => {
|
|
const { playInList } = useActivePlaylistService();
|
|
const { playTrackList, trackOffset, setNewPlaylist } = useActivePlaylistService();
|
|
const navigate = useNavigate();
|
|
const onSelectItem = (trackId: number) => {
|
|
let currentPlay = 0;
|
|
if (!playTrackList) {
|
|
console.log('Fail to get list of on air...');
|
|
return;
|
|
}
|
|
for (let iii = 0; iii < playTrackList.length; iii++) {
|
|
if (playTrackList[iii] === trackId) {
|
|
currentPlay = iii;
|
|
}
|
|
}
|
|
playInList(currentPlay, playTrackList);
|
|
};
|
|
const removeTrack = (trackId: number) => {
|
|
let elementToRemoveOffset = 0;
|
|
if (!playTrackList) {
|
|
console.log('Fail to remove element of on air...');
|
|
return;
|
|
}
|
|
const newList: number[] = [];
|
|
for (let iii = 0; iii < playTrackList.length; iii++) {
|
|
if (playTrackList[iii] === trackId) {
|
|
elementToRemoveOffset = iii;
|
|
} else {
|
|
newList.push(playTrackList[iii])
|
|
}
|
|
}
|
|
let newPlayed = trackOffset;
|
|
if (newPlayed != undefined) {
|
|
if (elementToRemoveOffset < newPlayed) {
|
|
newPlayed = newPlayed - 1;
|
|
}
|
|
playInList(newPlayed, newList);
|
|
} else {
|
|
setNewPlaylist(newList);
|
|
}
|
|
};
|
|
|
|
console.log(`playTrackList = ${JSON.stringify(playTrackList, null, 2)}`);
|
|
if (!playTrackList) {
|
|
return (
|
|
<>
|
|
<TopBar title="Album detail" />
|
|
<PageLayoutInfoCenter>
|
|
No data is currently playing...
|
|
</PageLayoutInfoCenter>
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<TopBar title="On Air ...">
|
|
</TopBar>
|
|
<PageLayout>
|
|
<Flex
|
|
direction="column"
|
|
gap={BASE_WRAP_SPACING}
|
|
style={{
|
|
margin: "0 auto",
|
|
padding: "20px",
|
|
width: "80%",
|
|
}}
|
|
>
|
|
{!playTrackList && <>No playing</>}
|
|
{playTrackList && playTrackList?.map((data) => (
|
|
<Flex
|
|
key={data}
|
|
style={{
|
|
minWidth: "100%",
|
|
//height:"60px",
|
|
border: "1px",
|
|
borderColor: "brand.900",
|
|
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
|
padding: "5px",
|
|
// _hover: {
|
|
// boxShadow: 'outline-over',
|
|
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
|
// }
|
|
}}
|
|
>
|
|
<DisplayTrackFullId
|
|
trackId={data}
|
|
onClick={() => onSelectItem(data)}
|
|
contextMenu={[
|
|
{
|
|
name: 'Edit',
|
|
onClick: () => {
|
|
navigate(`edit-track/${data}`);
|
|
},
|
|
},
|
|
{
|
|
name: 'Remove from playlist',
|
|
onClick: () => {
|
|
removeTrack(data);
|
|
},
|
|
},
|
|
]}
|
|
/>
|
|
</Flex>
|
|
))}
|
|
<EmptyEnd />
|
|
</Flex>
|
|
<Routes>
|
|
<Route path="edit-track/:trackId" element={<TrackEditPopUp />} />
|
|
<Route path="edit-album/:albumId" element={<AlbumEditPopUp />} />
|
|
</Routes>
|
|
</PageLayout>
|
|
</>
|
|
);
|
|
};
|