Files
feishin/src/renderer/features/now-playing/routes/now-playing-route.tsx
T
2026-06-29 21:06:32 -07:00

54 lines
1.9 KiB
TypeScript

import { useEffect, useRef, useState } from 'react';
import { ItemListHandle } from '/@/renderer/components/item-list/types';
import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { useAppStore, useAppStoreActions } from '/@/renderer/store';
import { ItemListKey } from '/@/shared/types/types';
const NowPlayingRoute = () => {
const [search, setSearch] = useState<string | undefined>(undefined);
const { setSideBar } = useAppStoreActions();
const tableRef = useRef<ItemListHandle | null>(null);
useEffect(() => {
const wasExpanded = useAppStore.getState().sidebar.rightExpanded;
// On page enter, set rightExpanded to false
setSideBar({ rightExpanded: false });
return () => {
if (wasExpanded) {
// On page exit, set rightExpanded to true if it was previously expanded
setSideBar({ rightExpanded: true });
}
};
}, [setSideBar]);
return (
<AnimatedPage>
<NowPlayingHeader />
<PlayQueueListControls
handleSearch={setSearch}
searchTerm={search}
tableRef={tableRef}
type={ItemListKey.QUEUE_SONG}
/>
<PlayQueue listKey={ItemListKey.QUEUE_SONG} ref={tableRef} searchTerm={search} />
</AnimatedPage>
);
};
const NowPlayingRouteWithBoundary = () => {
return (
<PageErrorBoundary>
<NowPlayingRoute />
</PageErrorBoundary>
);
};
export default NowPlayingRouteWithBoundary;