Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 10:42:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use lazy carousel for editor picks

Browse source
This commit is contained in:
Pas 2025-02-28 22:33:29 -07:00
parent e93eaa78e3
commit df7c5b65ed
2 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/pages/discover/components/LazyMediaCarousel.tsx
View file

@ -14,6 +14,8 @@ interface LazyMediaCarouselProps {
carouselRefs: React.MutableRefObject<{ carouselRefs: React.MutableRefObject<{
[key: string]: HTMLDivElement | null; [key: string]: HTMLDivElement | null;
}>; }>;
preloadedMedia?: Media[];
title?: string;
} }
export function LazyMediaCarousel({ export function LazyMediaCarousel({
@ -22,6 +24,8 @@ export function LazyMediaCarousel({
mediaType, mediaType,
isMobile, isMobile,
carouselRefs, carouselRefs,
preloadedMedia,
title,
}: LazyMediaCarouselProps) { }: LazyMediaCarouselProps) {
const [medias, setMedias] = useState<Media[]>([]); const [medias, setMedias] = useState<Media[]>([]);
@ -30,22 +34,24 @@ export function LazyMediaCarousel({
{ rootMargin: "200px" }, // Load when within 200px of viewport { rootMargin: "200px" }, // Load when within 200px of viewport
); );
// Use the lazy loading hook to fetch data when visible // Use the lazy loading hook only if we don't have preloaded media
const { media, isLoading } = useLazyTMDBData( const { media, isLoading } = useLazyTMDBData(
genre || null, !preloadedMedia ? genre || null : null,
category || null, !preloadedMedia ? category || null : null,
mediaType, mediaType,
isIntersecting, isIntersecting,
); );
// Update medias when data is loaded // Update medias when data is loaded or preloaded
useEffect(() => { useEffect(() => {
if (media.length > 0) { if (preloadedMedia) {
setMedias(preloadedMedia);
} else if (media.length > 0) {
setMedias(media); setMedias(media);
} }
}, [media]); }, [media, preloadedMedia]);
const categoryName = category?.name || genre?.name || ""; const categoryName = title || category?.name || genre?.name || "";
// Test intersection observer // Test intersection observer
// useEffect(() => { // useEffect(() => {

16
src/pages/discover/discoverContent.tsx
View file

@ -291,17 +291,17 @@ export function DiscoverContent() {
const renderEditorPicksContent = () => { const renderEditorPicksContent = () => {
return ( return (
<> <>
<MediaCarousel <LazyMediaCarousel
medias={editorPicksMovies} preloadedMedia={editorPicksMovies}
category="Editor Picks Movies" title="Editor Picks Movies"
isTVShow={false} mediaType="movie"
isMobile={isMobile} isMobile={isMobile}
carouselRefs={carouselRefs} carouselRefs={carouselRefs}
/> />
<MediaCarousel <LazyMediaCarousel
medias={editorPicksTVShows} preloadedMedia={editorPicksTVShows}
category="Editor Picks Shows" title="Editor Picks Shows"
isTVShow mediaType="tv"
isMobile={isMobile} isMobile={isMobile}
carouselRefs={carouselRefs} carouselRefs={carouselRefs}
/> />