tedkulp/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2026-04-19 21:46:43 -04:00
Code Issues Projects Releases Wiki Activity

Improve Series Details loading

Browse Source
This commit is contained in:
Bogdan
2025-03-21 18:22:14 +02:00
committed by Mark McDowall
parent 2e66cd2a1e
commit 1a8ba51260
1 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Series/Details/SeriesDetails.tsx
+56 -55
View File
@@ -41,6 +41,7 @@ import { Image, Statistics } from 'Series/Series';
import SeriesGenres from 'Series/SeriesGenres'; import SeriesGenres from 'Series/SeriesGenres';
import SeriesPoster from 'Series/SeriesPoster'; import SeriesPoster from 'Series/SeriesPoster';
import { getSeriesStatusDetails } from 'Series/SeriesStatus'; import { getSeriesStatusDetails } from 'Series/SeriesStatus';
import useSeries from 'Series/useSeries';
import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName'; import QualityProfileName from 'Settings/Profiles/Quality/QualityProfileName';
import { executeCommand } from 'Store/Actions/commandActions'; import { executeCommand } from 'Store/Actions/commandActions';
import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions'; import { clearEpisodes, fetchEpisodes } from 'Store/Actions/episodeActions';
@@ -125,40 +126,6 @@ function createEpisodeFilesSelector() {
); );
} }
function createSeriesSelector(seriesId: number) {
return createSelector(createAllSeriesSelector(), (allSeries) => {
const sortedSeries = [...allSeries].sort(sortByProp('sortTitle'));
const seriesIndex = sortedSeries.findIndex(
(series) => series.id === seriesId
);
if (seriesIndex === -1) {
return {
series: undefined,
nextSeries: undefined,
previousSeries: undefined,
};
}
const series = sortedSeries[seriesIndex];
const nextSeries = sortedSeries[seriesIndex + 1] ?? sortedSeries[0];
const previousSeries =
sortedSeries[seriesIndex - 1] ?? sortedSeries[sortedSeries.length - 1];
return {
series,
nextSeries: {
title: nextSeries.title,
titleSlug: nextSeries.titleSlug,
},
previousSeries: {
title: previousSeries.title,
titleSlug: previousSeries.titleSlug,
},
};
});
}
interface ExpandedState { interface ExpandedState {
allExpanded: boolean; allExpanded: boolean;
allCollapsed: boolean; allCollapsed: boolean;
@@ -171,9 +138,10 @@ interface SeriesDetailsProps {
function SeriesDetails({ seriesId }: SeriesDetailsProps) { function SeriesDetails({ seriesId }: SeriesDetailsProps) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { series, nextSeries, previousSeries } = useSelector(
createSeriesSelector(seriesId) const series = useSeries(seriesId);
); const allSeries = useSelector(createAllSeriesSelector());
const { const {
isEpisodesFetching, isEpisodesFetching,
isEpisodesPopulated, isEpisodesPopulated,
@@ -236,6 +204,35 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
}; };
}, [seriesId, commands]); }, [seriesId, commands]);
const { nextSeries, previousSeries } = useMemo(() => {
const sortedSeries = [...allSeries].sort(sortByProp('sortTitle'));
const seriesIndex = sortedSeries.findIndex(
(series) => series.id === seriesId
);
if (seriesIndex === -1) {
return {
nextSeries: undefined,
previousSeries: undefined,
};
}
const nextSeries = sortedSeries[seriesIndex + 1] ?? sortedSeries[0];
const previousSeries =
sortedSeries[seriesIndex - 1] ?? sortedSeries[sortedSeries.length - 1];
return {
nextSeries: {
title: nextSeries.title,
titleSlug: nextSeries.titleSlug,
},
previousSeries: {
title: previousSeries.title,
titleSlug: previousSeries.titleSlug,
},
};
}, [seriesId, allSeries]);
const [isOrganizeModalOpen, setIsOrganizeModalOpen] = useState(false); const [isOrganizeModalOpen, setIsOrganizeModalOpen] = useState(false);
const [isManageEpisodesOpen, setIsManageEpisodesOpen] = useState(false); const [isManageEpisodesOpen, setIsManageEpisodesOpen] = useState(false);
const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false); const [isEditSeriesModalOpen, setIsEditSeriesModalOpen] = useState(false);
@@ -610,25 +607,29 @@ function SeriesDetails({ seriesId }: SeriesDetailsProps) {
</div> </div>
<div className={styles.seriesNavigationButtons}> <div className={styles.seriesNavigationButtons}>
<IconButton {previousSeries ? (
className={styles.seriesNavigationButton} <IconButton
name={icons.ARROW_LEFT} className={styles.seriesNavigationButton}
size={30} name={icons.ARROW_LEFT}
title={translate('SeriesDetailsGoTo', { size={30}
title: previousSeries.title, title={translate('SeriesDetailsGoTo', {
})} title: previousSeries.title,
to={`/series/${previousSeries.titleSlug}`} })}
/> to={`/series/${previousSeries.titleSlug}`}
/>
) : null}
<IconButton {nextSeries ? (
className={styles.seriesNavigationButton} <IconButton
name={icons.ARROW_RIGHT} className={styles.seriesNavigationButton}
size={30} name={icons.ARROW_RIGHT}
title={translate('SeriesDetailsGoTo', { size={30}
title: nextSeries.title, title={translate('SeriesDetailsGoTo', {
})} title: nextSeries.title,
to={`/series/${nextSeries.titleSlug}`} })}
/> to={`/series/${nextSeries.titleSlug}`}
/>
) : null}
</div> </div>
</div> </div>