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 ( <> No data is currently playing... ); } return ( <> {!playTrackList && <>No playing} {playTrackList && playTrackList?.map((data) => ( onSelectItem(data)} contextMenu={[ { name: 'Edit', onClick: () => { navigate(`edit-track/${data}`); }, }, { name: 'Remove from playlist', onClick: () => { removeTrack(data); }, }, ]} /> ))} } /> } /> ); };