clear last tickets

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,