diff --git a/src/screens/Playbacks.js b/src/screens/Playbacks.js index 7c6629c..e9e9b50 100644 --- a/src/screens/Playbacks.js +++ b/src/screens/Playbacks.js @@ -1,13 +1,21 @@ import { useAudioPlayer } from "expo-audio"; import { BlurView } from "expo-blur"; import { VideoView, useVideoPlayer } from "expo-video"; -import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import React, { + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; 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 } 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"; import { useUser } from "../providers/UserDataProvider"; import { Palette } from "../styles"; import { FONT_FAMILY } from "../styles/Fonts"; @@ -33,7 +41,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => { const [owner, setOwner] = useState( item?.userId && userCache?.current?.get(item.userId) ? userCache.current.get(item.userId) - : null, + : null ); useEffect(() => { let cancelled = false; @@ -59,6 +67,25 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => { }; }, [item?.userId, userCache, getUserByUid]); + // Live sync owner from Firestore to reflect follow changes elsewhere + useEffect(() => { + const uid = item?.userId; + if (!uid) return; + const unsub = usersRef.doc(uid).onSnapshot( + (doc) => { + if (doc?.exists) { + const data = { id: doc.id, ...doc.data() }; + setOwner(data); + try { + userCache?.current?.set(uid, data); + } catch (e) {} + } + }, + () => {}, + ); + return () => unsub?.(); + }, [item?.userId, userCache]); + // Follow state derived from owner.followedBy const [isFollowing, setIsFollowing] = useState(false); useEffect(() => { @@ -171,7 +198,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => { }} > - + { + navigate(Routes.SingerProfile, { userId: item?.userId }); + }} + > {owner?.profilePictureURL ? ( { fontFamily: FONT_FAMILY.InterMedium, }} > - {isFollowing ? "Suivi" : "Suivre"} + {isFollowing ? "Ne plus suivre" : "Suivre"}