diff --git a/src/screens/Playbacks.js b/src/screens/Playbacks.js index e9e9b50..e34ba0d 100644 --- a/src/screens/Playbacks.js +++ b/src/screens/Playbacks.js @@ -1,3 +1,4 @@ +import { useIsFocused } from "@react-navigation/native"; import { useAudioPlayer } from "expo-audio"; import { BlurView } from "expo-blur"; import { VideoView, useVideoPlayer } from "expo-video"; @@ -12,7 +13,12 @@ import { Image, Platform, Pressable, Text, View } from "react-native"; import Carousel from "react-native-reanimated-carousel"; import { responsiveHeight } from "react-native-responsive-dimensions"; import { icons, img } from "../assets"; -import { arrayRemove, arrayUnion, projectsRef, usersRef } from "../config/firebase"; +import { + arrayRemove, + arrayUnion, + projectsRef, + usersRef, +} from "../config/firebase"; import useDataFromRef from "../hooks/useDataFromRef"; import { Routes } from "../navigation"; import { navigate } from "../navigation/NavigationService"; @@ -37,7 +43,6 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => { ); const [likesCount, setLikesCount] = useState(initialLikedBy.length); - // Fetch owner profile (cached) const [owner, setOwner] = useState( item?.userId && userCache?.current?.get(item.userId) ? userCache.current.get(item.userId) @@ -81,7 +86,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => { } catch (e) {} } }, - () => {}, + () => {} ); return () => unsub?.(); }, [item?.userId, userCache]); @@ -358,19 +363,20 @@ const Playbacks = () => { const [activeIndex, setActiveIndex] = useState(0); const userCache = useRef(new Map()); const { getUserByUid } = useUser() || {}; + const isFocused = useIsFocused(); const { data: playbacks = [], loadMore } = useDataFromRef({ ref: projectsRef.where("playbackUrl", "!=", null), simpleRef: false, listener: false, usePagination: true, - batchSize: 2, + batchSize: 6, }); const onSnap = useCallback( (index) => { setActiveIndex(index); - // Pré-charge la suite 2 par 2 - if (index >= (playbacks?.length || 0) - 2) { + // Pré-charge la suite 6 par 6 + if (index >= (playbacks?.length || 0) - 6) { loadMore?.(); } }, @@ -392,7 +398,7 @@ const Playbacks = () => { item={item} userCache={userCache} getUserByUid={getUserByUid} - isActive={index === activeIndex} + isActive={isFocused && index === activeIndex} /> )} />