last fixes, home and videos

src/screens/Playbacks/Playbacks.web.js

@@ -9,6 +9,7 @@ import React, {
 import {
   FlatList,
   Image,
+  Pressable,
   StyleSheet,
   View,
   useWindowDimensions,
@@ -85,7 +86,7 @@ const Playbacks = () => {
         loadMore?.();
       }
     },
-    [playbacks?.length, loadMore]
+    [playbacks?.length, loadMore],
   );
 
   const syncBackgroundVideo = useCallback(({ currentTime, isPlaying }) => {
@@ -193,7 +194,7 @@ const Playbacks = () => {
         handleActiveIndexChange(idx);
       } catch (_e) {}
     },
-    [windowHeight, handleActiveIndexChange]
+    [windowHeight, handleActiveIndexChange],
   );
 
   const onScroll = useCallback(
@@ -204,7 +205,7 @@ const Playbacks = () => {
         handleActiveIndexChange(idx);
       } catch (_e) {}
     },
-    [windowHeight, handleActiveIndexChange]
+    [windowHeight, handleActiveIndexChange],
   );
 
   // programmatic jump to focus item
@@ -228,7 +229,7 @@ const Playbacks = () => {
       offset: windowHeight * index,
       index,
     }),
-    [windowHeight]
+    [windowHeight],
   );
 
   const total = playbacks.length;
@@ -272,6 +273,47 @@ const Playbacks = () => {
     return `${activeIndex + 1}/${total}`;
   }, [total, activeIndex, hasMore, loading]);
 
+  const scrollToPlayback = useCallback(
+    (direction) => {
+      if (!direction || !listRef.current) return;
+      const totalItems = playbacks.length;
+      if (totalItems <= 0) return;
+      const targetIndex = Math.max(
+        0,
+        Math.min(activeIndex + direction, totalItems - 1),
+      );
+      if (targetIndex === activeIndex) {
+        if (direction > 0 && hasMore) {
+          loadMore?.();
+        }
+        return;
+      }
+      const targetOffset = targetIndex * windowHeight;
+      try {
+        listRef.current.scrollToOffset({
+          offset: targetOffset,
+          animated: true,
+        });
+      } catch (_e) {
+        try {
+          listRef.current.scrollToIndex({
+            index: targetIndex,
+            animated: true,
+          });
+        } catch (__e) {}
+      }
+      handleActiveIndexChange(targetIndex);
+    },
+    [
+      activeIndex,
+      handleActiveIndexChange,
+      hasMore,
+      loadMore,
+      playbacks.length,
+      windowHeight,
+    ],
+  );
+
   return (
     <View style={styles.screen}>
       {activeVideoUrl ? (
@@ -324,16 +366,23 @@ const Playbacks = () => {
         scrollEventThrottle={16}
       />
       {showIndicators && (
-        <View style={styles.indicatorContainer} pointerEvents="none">
-          <Image
-            source={icons.chevronDown}
-            resizeMode="contain"
-            style={[
-              styles.indicatorArrow,
-              styles.indicatorArrowUp,
-              !canScrollUp && styles.indicatorArrowDisabled,
-            ]}
-          />
+        <View style={styles.indicatorContainer} pointerEvents="box-none">
+          <Pressable
+            onPress={() => scrollToPlayback(-1)}
+            hitSlop={12}
+            disabled={!canScrollUp}
+            style={styles.indicatorArrowTouch}
+          >
+            <Image
+              source={icons.chevronDown}
+              resizeMode="contain"
+              style={[
+                styles.indicatorArrow,
+                styles.indicatorArrowUp,
+                !canScrollUp && styles.indicatorArrowDisabled,
+              ]}
+            />
+          </Pressable>
           <View style={styles.indicatorDotsWrapper}>
             {indicatorItems.map((item, index) => (
               <View
@@ -357,14 +406,21 @@ const Playbacks = () => {
           {/* {indicatorLabel ? (
             <Text style={styles.indicatorLabel}>{indicatorLabel}</Text>
           ) : null} */}
-          <Image
-            source={icons.chevronDown}
-            resizeMode="contain"
-            style={[
-              styles.indicatorArrow,
-              !canScrollDown && styles.indicatorArrowDisabled,
-            ]}
-          />
+          <Pressable
+            onPress={() => scrollToPlayback(1)}
+            hitSlop={12}
+            disabled={!canScrollDown}
+            style={styles.indicatorArrowTouch}
+          >
+            <Image
+              source={icons.chevronDown}
+              resizeMode="contain"
+              style={[
+                styles.indicatorArrow,
+                !canScrollDown && styles.indicatorArrowDisabled,
+              ]}
+            />
+          </Pressable>
         </View>
       )}
     </View>
@@ -377,11 +433,8 @@ export default Playbacks;
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    // overscrollBehavior: "none",
-    // position: "relative",
   },
   backgroundVideoWrapper: {
-    // ...StyleSheet.absoluteFillObject,
     height: "100%",
     width: "100%",
     position: "absolute",
@@ -437,6 +490,10 @@ const styles = StyleSheet.create({
     tintColor: Palette.white,
     opacity: 0.8,
   },
+  indicatorArrowTouch: {
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+  },
   indicatorArrowUp: {
     transform: [{ rotate: "180deg" }],
   },