ert

keystone-app/components/CustomVideoPlayer.tsx

@@ -5,8 +5,6 @@ import {
   TouchableOpacity, 
   Text, 
   TouchableWithoutFeedback,
-  PanResponder,
-  Animated
 } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { MaterialIcons } from '@expo/vector-icons';
@@ -15,24 +13,30 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 interface CustomVideoPlayerProps {
   uri: string;
   shouldPlay: boolean;
-  onSingleTap?: () => void;
+  onScrubStart?: () => void;
+  onScrubEnd?: () => void;
 }
 
-export default function CustomVideoPlayer({ uri, shouldPlay, onSingleTap }: CustomVideoPlayerProps) {
+export default function CustomVideoPlayer({ 
+  uri, shouldPlay, onScrubStart, onScrubEnd 
+}: CustomVideoPlayerProps) {
   const insets = useSafeAreaInsets();
   const [isPlaying, setIsPlaying] = useState(shouldPlay);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const [showControls, setShowControls] = useState(true);
-  
-  const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [scrubberWidth, setScrubberWidth] = useState(0);
+
+  const scrubberViewRef = useRef<View>(null);
+  const scrubberPageXRef = useRef(0);
+  const controlsTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const player = useVideoPlayer(uri, (p) => {
     p.loop = true;
     if (shouldPlay) p.play();
   });
 
-  // Sync external shouldPlay with internal state
+  // Sync external shouldPlay
   useEffect(() => {
     if (shouldPlay) {
       player.play();
@@ -48,10 +52,7 @@ export default function CustomVideoPlayer({ uri, shouldPlay, onSingleTap }: Cust
     const interval = setInterval(() => {
       if (player) {
         setCurrentTime(player.currentTime);
-        // expo-video duration is usually available after metadata loads
-        if (player.duration) {
-          setDuration(player.duration);
-        }
+        if (player.duration) setDuration(player.duration);
       }
     }, 250);
     return () => clearInterval(interval);
@@ -62,12 +63,17 @@ export default function CustomVideoPlayer({ uri, shouldPlay, onSingleTap }: Cust
     setShowControls(true);
     if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
     controlsTimeoutRef.current = setTimeout(() => {
-      if (isPlaying) setShowControls(false);
+      setShowControls(false);
     }, 3000);
   };
 
   useEffect(() => {
-    resetControlsTimeout();
+    if (isPlaying) {
+      resetControlsTimeout();
+    } else {
+      if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
+      setShowControls(true);
+    }
     return () => {
       if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
     };
@@ -81,30 +87,33 @@ export default function CustomVideoPlayer({ uri, shouldPlay, onSingleTap }: Cust
       player.play();
       setIsPlaying(true);
     }
-    resetControlsTimeout();
   };
 
   const handleScreenTap = () => {
     if (showControls) {
       setShowControls(false);
-      if (onSingleTap) onSingleTap();
+      if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
     } else {
       resetControlsTimeout();
     }
   };
 
-  // Custom Scrubber Logic
-  const scrubberRef = useRef<View>(null);
-  const [scrubberWidth, setScrubberWidth] = useState(0);
-  
-  const handleSeek = (e: any) => {
+  // Seek using absolute pageX — reliable across nested views
+  const seekFromPageX = (pageX: number) => {
     if (duration <= 0 || scrubberWidth <= 0) return;
-    const locX = e.nativeEvent.locationX;
-    const percentage = Math.max(0, Math.min(1, locX / scrubberWidth));
-    const seekTime = percentage * duration;
+    const relX = pageX - scrubberPageXRef.current;
+    const pct = Math.max(0, Math.min(1, relX / scrubberWidth));
+    const seekTime = pct * duration;
     player.currentTime = seekTime;
     setCurrentTime(seekTime);
-    resetControlsTimeout();
+  };
+
+  // Measure scrubber's absolute screen position
+  const handleScrubberLayout = () => {
+    scrubberViewRef.current?.measureInWindow((x, _y, w, _h) => {
+      scrubberPageXRef.current = x;
+      setScrubberWidth(w);
+    });
   };
 
   const formatTime = (secs: number) => {
@@ -128,7 +137,7 @@ export default function CustomVideoPlayer({ uri, shouldPlay, onSingleTap }: Cust
 
         {/* Custom Controls Overlay */}
         {showControls && (
-          <View style={styles.overlay}>
+          <View style={styles.overlay} pointerEvents="box-none">
             
             {/* Center Play/Pause */}
             <TouchableOpacity 
@@ -143,16 +152,39 @@ export default function CustomVideoPlayer({ uri, shouldPlay, onSingleTap }: Cust
               />
             </TouchableOpacity>
 
-            {/* Bottom Scrubber */}
+            {/* Bottom Scrubber Bar */}
             <View style={[styles.bottomBar, { paddingBottom: insets.bottom + 120 }]}>
               <Text style={styles.timeText}>{formatTime(currentTime)}</Text>
               
+              {/* 
+                Scrubber uses the Responder System with Capture phase
+                to intercept ALL touches before FlatList can steal them.
+                onResponderTerminationRequest={false} prevents FlatList
+                from reclaiming the gesture mid-drag.
+              */}
               <View 
+                ref={scrubberViewRef}
                 style={styles.scrubberContainer}
-                onLayout={(e) => setScrubberWidth(e.nativeEvent.layout.width)}
+                onLayout={handleScrubberLayout}
                 onStartShouldSetResponder={() => true}
-                onResponderGrant={handleSeek}
-                onResponderMove={handleSeek}
+                onStartShouldSetResponderCapture={() => true}
+                onMoveShouldSetResponder={() => true}
+                onMoveShouldSetResponderCapture={() => true}
+                onResponderTerminationRequest={() => false}
+                onResponderGrant={(e) => {
+                  onScrubStart?.();
+                  seekFromPageX(e.nativeEvent.pageX);
+                }}
+                onResponderMove={(e) => {
+                  seekFromPageX(e.nativeEvent.pageX);
+                }}
+                onResponderRelease={() => {
+                  onScrubEnd?.();
+                  resetControlsTimeout();
+                }}
+                onResponderTerminate={() => {
+                  onScrubEnd?.();
+                }}
               >
                 <View style={styles.scrubberTrack}>
                   <View style={[styles.scrubberFill, { width: `${progressPercent}%` }]} />
@@ -186,7 +218,7 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.3)', // Subtle darkening for visibility
+    backgroundColor: 'rgba(0,0,0,0.3)',
   },
   playPauseBtn: {
     width: 80,
@@ -203,7 +235,7 @@ const styles = StyleSheet.create({
     right: 0,
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 24,
+    paddingHorizontal: 16,
   },
   timeText: {
     color: '#fff',
@@ -214,9 +246,9 @@ const styles = StyleSheet.create({
   },
   scrubberContainer: {
     flex: 1,
-    height: 40,
+    height: 44,
     justifyContent: 'center',
-    marginHorizontal: 12,
+    marginHorizontal: 8,
   },
   scrubberTrack: {
     height: 4,
@@ -232,11 +264,11 @@ const styles = StyleSheet.create({
     left: 0,
   },
   scrubberThumb: {
-    width: 14,
-    height: 14,
-    borderRadius: 7,
+    width: 16,
+    height: 16,
+    borderRadius: 8,
     backgroundColor: '#1a73e8',
     position: 'absolute',
-    marginLeft: -7,
-  }
+    marginLeft: -8,
+  },
 });

keystone-app/components/FullScreenSwiper.tsx

@@ -3,14 +3,13 @@ import {
   View, 
   StyleSheet, 
   FlatList, 
-  Dimensions, 
+  Platform,
   PanResponder, 
   Animated,
-  ScrollView
+  useWindowDimensions,
 } from 'react-native';
 import { Image } from 'expo-image';
 import CustomVideoPlayer from './CustomVideoPlayer';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface FullScreenSwiperProps {
   assets: any[];
@@ -19,119 +18,210 @@ interface FullScreenSwiperProps {
   onIndexChange: (index: number) => void;
 }
 
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+/* ── ZoomableImage with Pinch-to-Zoom & Swipe-Down-to-Close ── */
+function ZoomableImage({ 
+  uri, thumbUri, width, height, onSwipeDown, onZoomChange 
+}: { 
+  uri: string; thumbUri?: string; width: number; height: number; 
+  onSwipeDown: () => void; onZoomChange: (zooming: boolean) => void;
+}) {
+  const scale = useRef(new Animated.Value(1)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+  const baseDistance = useRef(0);
+  const currentScale = useRef(1);
+  const lastComputedScale = useRef(1);
 
+  // Refs so PanResponder always sees latest callbacks
+  const onSwipeDownRef = useRef(onSwipeDown);
+  const onZoomChangeRef = useRef(onZoomChange);
+  useEffect(() => { onSwipeDownRef.current = onSwipeDown; }, [onSwipeDown]);
+  useEffect(() => { onZoomChangeRef.current = onZoomChange; }, [onZoomChange]);
+
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: (e) => e.nativeEvent.touches.length >= 2,
+
+    onMoveShouldSetPanResponder: (e, gs) => {
+      if (e.nativeEvent.touches.length >= 2) return true;
+      return Math.abs(gs.dy) > 12 && Math.abs(gs.dy) > Math.abs(gs.dx) * 1.5;
+    },
+
+    // Capture BEFORE FlatList gets it
+    onMoveShouldSetPanResponderCapture: (e, gs) => {
+      if (e.nativeEvent.touches.length >= 2) return true;
+      return Math.abs(gs.dy) > 12 && Math.abs(gs.dy) > Math.abs(gs.dx) * 1.5;
+    },
+
+    onPanResponderGrant: (e) => {
+      const { touches } = e.nativeEvent;
+      if (touches.length >= 2) {
+        const dx = touches[0].pageX - touches[1].pageX;
+        const dy = touches[0].pageY - touches[1].pageY;
+        baseDistance.current = Math.sqrt(dx * dx + dy * dy);
+        onZoomChangeRef.current(true);
+      }
+    },
+
+    onPanResponderMove: (e, gs) => {
+      const { touches } = e.nativeEvent;
+      if (touches.length >= 2) {
+        if (baseDistance.current === 0) {
+          // Second finger just appeared mid-gesture — init pinch
+          const dx = touches[0].pageX - touches[1].pageX;
+          const dy = touches[0].pageY - touches[1].pageY;
+          baseDistance.current = Math.sqrt(dx * dx + dy * dy);
+          onZoomChangeRef.current(true);
+          Animated.timing(translateY, { toValue: 0, duration: 80, useNativeDriver: true }).start();
+        } else {
+          const dx = touches[0].pageX - touches[1].pageX;
+          const dy = touches[0].pageY - touches[1].pageY;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const newScale = Math.max(0.5, Math.min(5, currentScale.current * (dist / baseDistance.current)));
+          scale.setValue(newScale);
+          lastComputedScale.current = newScale;
+        }
+      } else if (touches.length <= 1 && baseDistance.current === 0) {
+        // Single-finger vertical drag → swipe-down-to-close
+        translateY.setValue(gs.dy);
+      }
+    },
+
+    onPanResponderRelease: (_, gs) => {
+      if (baseDistance.current > 0) {
+        // Was pinch-zooming
+        const finalScale = lastComputedScale.current;
+        baseDistance.current = 0;
+        if (finalScale < 1.15) {
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true, bounciness: 0 }).start();
+          currentScale.current = 1;
+          lastComputedScale.current = 1;
+        } else {
+          currentScale.current = finalScale;
+        }
+        onZoomChangeRef.current(false);
+      } else {
+        // Was swiping down
+        if (gs.dy > 100) {
+          onSwipeDownRef.current();
+        } else {
+          Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 0 }).start();
+        }
+      }
+    },
+
+    onPanResponderTerminate: () => {
+      baseDistance.current = 0;
+      Animated.parallel([
+        Animated.spring(scale, { toValue: 1, useNativeDriver: true, bounciness: 0 }),
+        Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 0 }),
+      ]).start();
+      currentScale.current = 1;
+      lastComputedScale.current = 1;
+      onZoomChangeRef.current(false);
+    },
+  })).current;
+
+  return (
+    <Animated.View
+      style={{
+        width, height,
+        justifyContent: 'center',
+        alignItems: 'center',
+        transform: [{ scale }, { translateY }],
+      }}
+      {...panResponder.panHandlers}
+    >
+      <Image
+        source={{ uri }}
+        placeholder={thumbUri ? { uri: thumbUri } : undefined}
+        style={{ width: '100%', height: '100%' }}
+        contentFit="contain"
+        cachePolicy="memory-disk"
+        transition={200}
+        backgroundColor="transparent"
+        allowDownscaling={false}
+      />
+    </Animated.View>
+  );
+}
+
+
+/* ── FullScreenSwiper ──────────────────────────────────────── */
 export default function FullScreenSwiper({ 
-  assets, 
-  initialIndex, 
-  onClose, 
-  onIndexChange 
+  assets, initialIndex, onClose, onIndexChange 
 }: FullScreenSwiperProps) {
-  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
   const [activeIndex, setActiveIndex] = useState(initialIndex);
-  
-  // Swipe Down to Close Animation
-  const panY = useRef(new Animated.Value(0)).current;
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        // Only take over if pulling down significantly and mostly vertically
-        return gestureState.dy > 15 && Math.abs(gestureState.dy) > Math.abs(gestureState.dx) * 2;
-      },
-      onPanResponderMove: Animated.event([null, { dy: panY }], { useNativeDriver: false }),
-      onPanResponderRelease: (_, gestureState) => {
-        if (gestureState.dy > 100) {
-          onClose(); // Threshold passed, close modal
-        } else {
-          // Snap back
-          Animated.spring(panY, {
-            toValue: 0,
-            useNativeDriver: true,
-            bounciness: 0,
-          }).start();
-        }
-      },
-    })
-  ).current;
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+
+  // Keep onIndexChange ref fresh for the viewability callback
+  const onIndexChangeRef = useRef(onIndexChange);
+  useEffect(() => { onIndexChangeRef.current = onIndexChange; }, [onIndexChange]);
 
-  // Viewability tracking for FlatList
   const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
     if (viewableItems.length > 0) {
-      const newIndex = viewableItems[0].index;
-      setActiveIndex(newIndex);
-      onIndexChange(newIndex);
+      const idx = viewableItems[0].index;
+      setActiveIndex(idx);
+      onIndexChangeRef.current(idx);
     }
   }).current;
   const viewabilityConfig = useRef({ itemVisiblePercentThreshold: 50 }).current;
 
-  const renderItem = ({ item, index }: { item: any, index: number }) => {
-    const isVideo = item.mediaType === 'video' || item.filename?.toLowerCase().match(/\.(mp4|mov|avi|webm)$/i);
+  const renderItem = ({ item, index }: { item: any; index: number }) => {
+    const isVideo =
+      item.mediaType === 'video' ||
+      item.filename?.toLowerCase().match(/\.(mp4|mov|avi|webm)$/i);
     const isActive = index === activeIndex;
 
+    if (isVideo) {
+      return (
+        <View style={{ width, height, justifyContent: 'center', backgroundColor: '#000' }}>
+          <CustomVideoPlayer
+            uri={item.uri}
+            shouldPlay={isActive}
+            onScrubStart={() => setScrollEnabled(false)}
+            onScrubEnd={() => setScrollEnabled(true)}
+          />
+        </View>
+      );
+    }
+
     return (
-      <View style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, justifyContent: 'center' }}>
-        {isVideo ? (
-          <View style={{ flex: 1, paddingBottom: insets.bottom + 80 }}>
-            <CustomVideoPlayer 
-              uri={item.uri} 
-              shouldPlay={isActive} 
-            />
-          </View>
-        ) : (
-          <ScrollView
-            maximumZoomScale={3}
-            minimumZoomScale={1}
-            showsHorizontalScrollIndicator={false}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
-            bouncesZoom={true}
-          >
-            <View style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT, paddingBottom: insets.bottom + 80, justifyContent: 'center' }}>
-              <Image
-                source={{ uri: item.uri }}
-                placeholder={{ uri: item.cloudThumbUri }}
-                style={{ flex: 1, width: '100%', height: '100%' }}
-                contentFit="contain"
-                cachePolicy="memory-disk"
-                transition={200}
-                backgroundColor="transparent"
-                allowDownscaling={false}
-              />
-            </View>
-          </ScrollView>
-        )}
-      </View>
+      <ZoomableImage
+        uri={item.uri}
+        thumbUri={item.cloudThumbUri}
+        width={width}
+        height={height}
+        onSwipeDown={onClose}
+        onZoomChange={(zooming) => setScrollEnabled(!zooming)}
+      />
     );
   };
 
   return (
-    <Animated.View 
-      style={[
-        styles.container, 
-        { transform: [{ translateY: panY }] }
-      ]}
-      {...panResponder.panHandlers}
-    >
+    <View style={styles.container}>
       <FlatList
+        key={`swiper-${width}-${height}`}
         data={assets}
         keyExtractor={(item) => item.id}
         renderItem={renderItem}
         horizontal
         pagingEnabled
+        scrollEnabled={scrollEnabled}
         showsHorizontalScrollIndicator={false}
-        initialScrollIndex={initialIndex}
+        initialScrollIndex={activeIndex}
         getItemLayout={(_, index) => ({
-          length: SCREEN_WIDTH,
-          offset: SCREEN_WIDTH * index,
+          length: width,
+          offset: width * index,
           index,
         })}
         onViewableItemsChanged={onViewableItemsChanged}
         viewabilityConfig={viewabilityConfig}
-        windowSize={3} // Keep memory footprint small
+        windowSize={3}
         maxToRenderPerBatch={3}
         removeClippedSubviews={Platform.OS === 'android'}
+        extraData={activeIndex}
       />
-    </Animated.View>
+    </View>
   );
 }
 
@@ -139,5 +229,5 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#000',
-  }
+  },
 });