navigate to playback

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)}