github-mirrors/radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2025-04-23 22:17:15 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fixed: Improve Movie Details loading

Browse source
This commit is contained in:
Bogdan 2025-03-22 16:32:47 +02:00 • committed by GitHub
parent a0679fcf11
commit 2afb41498d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 53 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

106
frontend/src/Movie/Details/MovieDetails.tsx
View file

@ -49,6 +49,7 @@ import MovieCollectionLabel from 'Movie/MovieCollectionLabel';
import MovieGenres from 'Movie/MovieGenres';
import MoviePoster from 'Movie/MoviePoster';
import MovieInteractiveSearchModal from 'Movie/Search/MovieInteractiveSearchModal';
import useMovie from 'Movie/useMovie';
import MovieFileEditorTable from 'MovieFile/Editor/MovieFileEditorTable';
import ExtraFileTable from 'MovieFile/Extras/ExtraFileTable';
import OrganizePreviewModal from 'Organize/OrganizePreviewModal';
@ -151,38 +152,6 @@ function createMovieCreditsSelector() {
);
}
function createMovieSelector(movieId: number) {
return createSelector(createAllMoviesSelector(), (allMovies) => {
const sortedMovies = [...allMovies].sort(sortByProp('sortTitle'));
const movieIndex = sortedMovies.findIndex((movie) => movie.id === movieId);
if (movieIndex === -1) {
return {
movie: undefined,
nextMovie: undefined,
previousMovie: undefined,
};
}
const movie = sortedMovies[movieIndex];
const nextMovie = sortedMovies[movieIndex + 1] ?? sortedMovies[0];
const previousMovie =
sortedMovies[movieIndex - 1] ?? sortedMovies[sortedMovies.length - 1];
return {
movie,
nextMovie: {
title: nextMovie.title,
titleSlug: nextMovie.titleSlug,
},
previousMovie: {
title: previousMovie.title,
titleSlug: previousMovie.titleSlug,
},
};
});
}
interface MovieDetailsProps {
movieId: number;
}
@ -191,9 +160,9 @@ function MovieDetails({ movieId }: MovieDetailsProps) {
const dispatch = useDispatch();
const history = useHistory();
const { movie, nextMovie, previousMovie } = useSelector(
createMovieSelector(movieId)
);
const movie = useMovie(movieId);
const allMovies = useSelector(createAllMoviesSelector());
const { isMovieFilesFetching, movieFilesError, hasMovieFiles } = useSelector(
createMovieFilesSelector()
);
@ -257,6 +226,33 @@ function MovieDetails({ movieId }: MovieDetailsProps) {
};
}, [movieId, commands]);
const { nextMovie, previousMovie } = useMemo(() => {
const sortedMovies = [...allMovies].sort(sortByProp('sortTitle'));
const movieIndex = sortedMovies.findIndex((movie) => movie.id === movieId);
if (movieIndex === -1) {
return {
nextMovie: undefined,
previousMovie: undefined,
};
}
const nextMovie = sortedMovies[movieIndex + 1] ?? sortedMovies[0];
const previousMovie =
sortedMovies[movieIndex - 1] ?? sortedMovies[sortedMovies.length - 1];
return {
nextMovie: {
title: nextMovie.title,
titleSlug: nextMovie.titleSlug,
},
previousMovie: {
title: previousMovie.title,
titleSlug: previousMovie.titleSlug,
},
};
}, [movieId, allMovies]);
const touchStart = useRef<number | null>(null);
const [isOrganizeModalOpen, setIsOrganizeModalOpen] = useState(false);
const [isManageMoviesModalOpen, setIsManageMoviesModalOpen] = useState(false);
@ -669,25 +665,29 @@ function MovieDetails({ movieId }: MovieDetailsProps) {
</div>
<div className={styles.movieNavigationButtons}>
<IconButton
className={styles.movieNavigationButton}
name={icons.ARROW_LEFT}
size={30}
title={translate('MovieDetailsGoTo', {
title: previousMovie.title,
})}
to={`/movie/${previousMovie.titleSlug}`}
/>
{previousMovie ? (
<IconButton
className={styles.movieNavigationButton}
name={icons.ARROW_LEFT}
size={30}
title={translate('MovieDetailsGoTo', {
title: previousMovie.title,
})}
to={`/movie/${previousMovie.titleSlug}`}
/>
) : null}
<IconButton
className={styles.movieNavigationButton}
name={icons.ARROW_RIGHT}
size={30}
title={translate('MovieDetailsGoTo', {
title: nextMovie.title,
})}
to={`/movie/${nextMovie.titleSlug}`}
/>
{nextMovie ? (
<IconButton
className={styles.movieNavigationButton}
name={icons.ARROW_RIGHT}
size={30}
title={translate('MovieDetailsGoTo', {
title: nextMovie.title,
})}
to={`/movie/${nextMovie.titleSlug}`}
/>
) : null}
</div>
</div>