navigate to playback

src/screens/Library/components/BackTracks.js

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { FlatList, Image, Text, View, useWindowDimensions } from "react-native";
+import { FlatList, Image, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
 import { Style } from "../../../styles";
 import CardContainer from "./CardContainer";
@@ -28,6 +30,7 @@ const BackTracks = () => {
             keyExtractor={(item) => item.id}
             renderItem={({ item }) => (
               <View style={{ width: itemWidth }} key={item.id}>
+                <Pressable onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}>
                   <Image
                     source={{ uri: item.coverUrl || "" }}
                     style={{
@@ -36,6 +39,7 @@ const BackTracks = () => {
                       borderRadius: 10,
                     }}
                   />
+                </Pressable>
               </View>
             )}
           />

src/screens/Playbacks.js

@@ -1,4 +1,4 @@
-import { useIsFocused } from "@react-navigation/native";
+import { useIsFocused, useRoute } from "@react-navigation/native";
 import { useAudioPlayer } from "expo-audio";
 import { BlurView } from "expo-blur";
 import { VideoView, useVideoPlayer } from "expo-video";
@@ -422,6 +422,9 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
 
 const Playbacks = () => {
   const [activeIndex, setActiveIndex] = useState(0);
+  const carouselRef = useRef(null);
+  const route = useRoute();
+  const focusProjectId = route?.params?.projectId || route?.params?.focusId || null;
   const userCache = useRef(new Map());
   const { getUserByUid } = useUser() || {};
   const isFocused = useIsFocused();
@@ -444,9 +447,30 @@ const Playbacks = () => {
     [playbacks?.length, loadMore]
   );
 
+  // When a specific playback id is provided via navigation params,
+  // try to focus it by scrolling the carousel to its index.
+  const triedLoadMoreRef = useRef(0);
+  useEffect(() => {
+    if (!focusProjectId) return;
+    const idx = playbacks.findIndex((p) => p?.id === focusProjectId);
+    if (idx >= 0) {
+      setActiveIndex(idx);
+      // give time for first render before scrolling
+      setTimeout(() => {
+        try {
+          carouselRef.current?.scrollTo?.({ index: idx, animated: false });
+        } catch (e) {}
+      }, 50);
+    } else if (loadMore && triedLoadMoreRef.current < 6) {
+      triedLoadMoreRef.current += 1;
+      loadMore();
+    }
+  }, [focusProjectId, playbacks, loadMore]);
+
   return (
     <View style={{ flex: 1, backgroundColor: "black" }}>
       <Carousel
+        ref={carouselRef}
         data={playbacks}
         vertical
         height={responsiveHeight(100)}