clear last tickets

src/screens/Playbacks/Playbacks.js

@@ -1,5 +1,5 @@
 import { useIsFocused, useRoute } from "@react-navigation/native";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 import { responsiveHeight } from "react-native-responsive-dimensions";
@@ -9,16 +9,30 @@ import PlaybackItem from "./components/PlaybackItem";
 
 const Playbacks = () => {
   const [activeIndex, setActiveIndex] = useState(0);
-  const carouselRef = useRef(null);
   const userCache = useRef(new Map());
   const isFocused = useIsFocused();
-  const { data: playbacks = [], loadMore } = useDataFromRef({
+  const route = useRoute();
+  const focusProjectId =
+    route?.params?.projectId || route?.params?.focusId || null;
+  const { data: rawPlaybacks = [], loadMore } = useDataFromRef({
     ref: projectsRef.where("playbackUrl", "!=", null),
     simpleRef: false,
     listener: false,
     usePagination: true,
     batchSize: 6,
   });
+  const focusIndex = useMemo(() => {
+    if (!focusProjectId) return -1;
+    return rawPlaybacks.findIndex((p) => p?.id === focusProjectId);
+  }, [focusProjectId, rawPlaybacks]);
+
+  const playbacks = useMemo(() => {
+    if (focusIndex < 0) return rawPlaybacks;
+    const target = rawPlaybacks[focusIndex];
+    const before = rawPlaybacks.slice(0, focusIndex);
+    const after = rawPlaybacks.slice(focusIndex + 1);
+    return [target, ...after, ...before];
+  }, [focusIndex, rawPlaybacks]);
 
   const onSnap = useCallback(
     (index) => {
@@ -31,6 +45,17 @@ const Playbacks = () => {
   );
 
   const triedLoadMoreRef = useRef(0);
+  const focusLoadAttemptsRef = useRef(0);
+  const hasAppliedFocusRef = useRef(false);
+
+  useEffect(() => {
+    focusLoadAttemptsRef.current = 0;
+    hasAppliedFocusRef.current = false;
+    if (!focusProjectId) {
+      setActiveIndex(0);
+    }
+  }, [focusProjectId]);
+
   useEffect(() => {
     if (loadMore && triedLoadMoreRef.current < 6) {
       triedLoadMoreRef.current += 1;
@@ -38,10 +63,22 @@ const Playbacks = () => {
     }
   }, [loadMore, playbacks]);
 
+  useEffect(() => {
+    if (!focusProjectId) return;
+    if (focusIndex >= 0 && !hasAppliedFocusRef.current) {
+      hasAppliedFocusRef.current = true;
+      setActiveIndex(0);
+      return;
+    }
+    if (loadMore && focusLoadAttemptsRef.current < 6) {
+      focusLoadAttemptsRef.current += 1;
+      loadMore();
+    }
+  }, [focusIndex, focusProjectId, loadMore, playbacks]);
+
   return (
     <View style={{ flex: 1, backgroundColor: "black" }}>
       <Carousel
-        ref={carouselRef}
         data={playbacks}
         vertical
         height={responsiveHeight(100)}

src/screens/Playbacks/Playbacks.web.js

@@ -32,7 +32,7 @@ const Playbacks = () => {
   const { getUserByUid } = useUser() || {};
   const isFocused = useIsFocused();
   const {
-    data: playbacks = [],
+    data: rawPlaybacks = [],
     loadMore,
     hasMore,
     loading,
@@ -43,6 +43,18 @@ const Playbacks = () => {
     usePagination: true,
     batchSize: 6,
   });
+  const focusIndex = useMemo(() => {
+    if (!focusProjectId) return -1;
+    return rawPlaybacks.findIndex((p) => p?.id === focusProjectId);
+  }, [focusProjectId, rawPlaybacks]);
+
+  const playbacks = useMemo(() => {
+    if (focusIndex < 0) return rawPlaybacks;
+    const target = rawPlaybacks[focusIndex];
+    const before = rawPlaybacks.slice(0, focusIndex);
+    const after = rawPlaybacks.slice(focusIndex + 1);
+    return [target, ...after, ...before];
+  }, [focusIndex, rawPlaybacks]);
 
   const activePlayback = playbacks?.[activeIndex] || null;
   const activeVideoUrl = activePlayback?.playbackUrl || null;
@@ -167,22 +179,32 @@ const Playbacks = () => {
   }, [activeVideoUrl]);
 
   const triedLoadMoreRef = useRef(0);
+  const hasAppliedFocusRef = useRef(false);
+  const focusLoadAttemptsRef = useRef(0);
+
+  useEffect(() => {
+    hasAppliedFocusRef.current = false;
+    focusLoadAttemptsRef.current = 0;
+  }, [focusProjectId]);
+
   useEffect(() => {
     if (!focusProjectId) return;
-    const idx = playbacks.findIndex((p) => p?.id === focusProjectId);
-    if (idx >= 0) {
-      lastActiveIndexRef.current = idx;
-      setActiveIndex(idx);
-      setTimeout(() => {
+    if (focusIndex >= 0 && !hasAppliedFocusRef.current) {
+      hasAppliedFocusRef.current = true;
+      lastActiveIndexRef.current = 0;
+      setActiveIndex(0);
+      requestAnimationFrame(() => {
         try {
-          listRef.current?.scrollToIndex?.({ index: idx, animated: false });
+          listRef.current?.scrollToOffset?.({ offset: 0, animated: false });
         } catch (_e) {}
-      }, 50);
-    } else if (loadMore && triedLoadMoreRef.current < 6) {
-      triedLoadMoreRef.current += 1;
+      });
+      return;
+    }
+    if (loadMore && focusLoadAttemptsRef.current < 6) {
+      focusLoadAttemptsRef.current += 1;
       loadMore();
     }
-  }, [focusProjectId, playbacks, loadMore]);
+  }, [focusIndex, focusProjectId, loadMore, playbacks]);
 
   // === FlatList (one real page per item) ===
   // keep active index in sync with scroll
@@ -208,21 +230,6 @@ const Playbacks = () => {
     [windowHeight, handleActiveIndexChange],
   );
 
-  // programmatic jump to focus item
-  useEffect(() => {
-    if (!focusProjectId) return;
-    const idx = playbacks.findIndex((p) => p?.id === focusProjectId);
-    if (idx >= 0) {
-      lastActiveIndexRef.current = idx;
-      setActiveIndex(idx);
-      setTimeout(() => {
-        try {
-          listRef.current?.scrollToIndex?.({ index: idx, animated: false });
-        } catch (_e) {}
-      }, 50);
-    }
-  }, [focusProjectId, playbacks]);
-
   const getItemLayout = useCallback(
     (_data, index) => ({
       length: windowHeight,