fix: resolve 404 on thumbnail serve, scrubber pan responder, zooming issues, and swiper alignment

keystone-app/app/_layout.tsx

@@ -1,4 +1,5 @@
 import { Stack } from 'expo-router';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import * as BackgroundFetch from 'expo-background-fetch';
 import { useEffect } from 'react';
@@ -50,8 +51,10 @@ function AppContent() {
 
 export default function Layout() {
   return (
-    <AuthProvider>
-      <AppContent />
-    </AuthProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <AuthProvider>
+        <AppContent />
+      </AuthProvider>
+    </GestureHandlerRootView>
   );
 }

keystone-app/components/CustomVideoPlayer.tsx

@@ -5,11 +5,11 @@ import {
   TouchableOpacity,
   Text,
   TouchableWithoutFeedback,
+  PanResponder,
 } from 'react-native';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { MaterialIcons } from '@expo/vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 interface CustomVideoPlayerProps {
   uri: string;
@@ -114,25 +114,30 @@ export default function CustomVideoPlayer({
   const scrubberViewRef = useRef<View>(null);
 
   /* ── Scrubber gesture ──
-     .runOnJS(true) → callbacks run on JS thread (no worklet needed)
-     .minDistance(0) → activates immediately on touch (tap-to-seek works)
-     This gesture is inside the FlatList item, and RNGH's FlatList
-     properly yields to nested gesture handlers.
+     Uses standard React Native PanResponder to forcefully capture
+     touches and prevent the parent FlatList from scrolling horizontally.
   */
-  const scrubGesture = Gesture.Pan()
-    .runOnJS(true)
-    .minDistance(0)
-    .onStart((e) => {
-      onScrubStart?.();
-      seekFromAbsoluteX(e.absoluteX);
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => {
+        onScrubStart?.();
+        seekFromAbsoluteX(e.nativeEvent.pageX);
+      },
+      onPanResponderMove: (e) => {
+        seekFromAbsoluteX(e.nativeEvent.pageX);
+      },
+      onPanResponderRelease: () => {
+        onScrubEnd?.();
+        resetControlsTimeout();
+      },
+      onPanResponderTerminate: () => {
+        onScrubEnd?.();
+        resetControlsTimeout();
+      },
     })
-    .onUpdate((e) => {
-      seekFromAbsoluteX(e.absoluteX);
-    })
-    .onEnd(() => {
-      onScrubEnd?.();
-      resetControlsTimeout();
-    });
+  ).current;
 
   const formatTime = (secs: number) => {
     const m = Math.floor(secs / 60);
@@ -170,20 +175,18 @@ export default function CustomVideoPlayer({
             <View style={[styles.bottomBar, { paddingBottom: insets.bottom + 120 }]}>
               <Text style={styles.timeText}>{formatTime(currentTime)}</Text>
 
-              {/* Scrubber — wrapped in GestureDetector so RNGH handles
-                  touch negotiation with the parent FlatList */}
-              <GestureDetector gesture={scrubGesture}>
-                <View
-                  ref={scrubberViewRef}
-                  style={styles.scrubberContainer}
-                  onLayout={handleScrubberLayout}
-                >
-                  <View style={styles.scrubberTrack}>
-                    <View style={[styles.scrubberFill, { width: `${progressPercent}%` }]} />
-                    <View style={[styles.scrubberThumb, { left: `${progressPercent}%` }]} />
-                  </View>
+              {/* Scrubber — Using PanResponder ensures FlatList stops scrolling */}
+              <View
+                {...panResponder.panHandlers}
+                ref={scrubberViewRef}
+                style={styles.scrubberContainer}
+                onLayout={handleScrubberLayout}
+              >
+                <View style={styles.scrubberTrack}>
+                  <View style={[styles.scrubberFill, { width: `${progressPercent}%` }]} />
+                  <View style={[styles.scrubberThumb, { left: `${progressPercent}%` }]} />
                 </View>
-              </GestureDetector>
+              </View>
 
               <Text style={styles.timeText}>{formatTime(duration)}</Text>
             </View>

keystone-app/components/FullScreenSwiper.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, Platform, useWindowDimensions, PanResponder } from 'react-native';
 import { Image } from 'expo-image';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { FlatList } from 'react-native-gesture-handler';
@@ -27,7 +27,7 @@ interface FullScreenSwiperProps {
 function ZoomableImage({
   uri, thumbUri, width, height, onSwipeDown, onZoomChange,
 }: {
-  uri: string; thumbUri?: string; width: number; height: number;
+  uri: string; thumbUri?: string; width: number;
   onSwipeDown: () => void; onZoomChange: (zooming: boolean) => void;
 }) {
   const scale = useSharedValue(1);
@@ -90,7 +90,7 @@ function ZoomableImage({
     <GestureDetector gesture={composedGesture}>
       <Animated.View
         style={[
-          { width, height, justifyContent: 'center', alignItems: 'center' },
+          { width, height: '100%', justifyContent: 'center', alignItems: 'center' },
           animatedStyle,
         ]}
       >
@@ -117,7 +117,7 @@ function ZoomableImage({
 export default function FullScreenSwiper({
   assets, initialIndex, onClose, onIndexChange,
 }: FullScreenSwiperProps) {
-  const { width, height } = useWindowDimensions();
+  const { width } = useWindowDimensions();
   const [activeIndex, setActiveIndex] = useState(initialIndex);
   const [scrollEnabled, setScrollEnabled] = useState(true);
 
@@ -141,7 +141,7 @@ export default function FullScreenSwiper({
 
     if (isVideo) {
       return (
-        <View style={{ width, height, justifyContent: 'center', backgroundColor: '#000' }}>
+        <View style={{ width, height: '100%', justifyContent: 'center', backgroundColor: '#000' }}>
           <CustomVideoPlayer
             uri={item.uri}
             shouldPlay={isActive}
@@ -157,7 +157,6 @@ export default function FullScreenSwiper({
         uri={item.uri}
         thumbUri={item.cloudThumbUri}
         width={width}
-        height={height}
         onSwipeDown={onClose}
         onZoomChange={(zooming) => setScrollEnabled(!zooming)}
       />
@@ -167,7 +166,7 @@ export default function FullScreenSwiper({
   return (
     <View style={styles.container}>
       <FlatList
-        key={`swiper-${width}-${height}`}
+        key={`swiper-${width}`}
         data={assets}
         keyExtractor={(item) => item.id}
         renderItem={renderItem}

keystone-app/components/MediaViewer.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import { Image } from 'expo-image';
-import { useVideoPlayer, VideoView } from 'expo-video';
+import CustomVideoPlayer from './CustomVideoPlayer';
 
 interface MediaViewerProps {
   asset: any;
@@ -17,14 +17,14 @@ export default function MediaViewer({ asset, shouldPlay = true, isActive = true
     asset.filename?.toLowerCase().match(/\.(mp4|mov|avi|webm)$/i);
 
   if (isVideo && isActive) {
-    return <VideoWrapper uri={asset.uri} shouldPlay={shouldPlay} />;
+    return <CustomVideoPlayer uri={asset.uri} shouldPlay={shouldPlay} />;
   }
 
   // expo-image natively supports GIFs and handles caching perfectly.
   return (
     <Image
       source={{ uri: asset.uri }}
-      placeholder={{ uri: asset.cloudThumbUri }}
+      placeholder={asset.cloudThumbUri ? { uri: asset.cloudThumbUri } : undefined}
       style={{ flex: 1, width: '100%', height: '100%' }}
       contentFit="contain"
       cachePolicy="memory-disk"
@@ -34,44 +34,3 @@ export default function MediaViewer({ asset, shouldPlay = true, isActive = true
     />
   );
 }
-
-function VideoWrapper({ uri, shouldPlay }: { uri: string; shouldPlay: boolean }) {
-  const player = useVideoPlayer(uri, (p) => {
-    p.loop = true;
-    if (shouldPlay) p.play();
-  });
-
-  useEffect(() => {
-    if (shouldPlay) {
-      player.play();
-    } else {
-      player.pause();
-    }
-  }, [shouldPlay, player]);
-
-  return (
-    <View style={styles.videoContainer}>
-      <VideoView 
-        style={styles.video}
-        player={player}
-        allowsFullscreen
-        allowsPictureInPicture
-        nativeControls={true}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  videoContainer: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  video: {
-    width: '100%',
-    height: '100%',
-  },
-});

keystone-backend/main.py

@@ -258,16 +258,6 @@ async def list_photos(username: str = Depends(verify_jwt_token)):
             
     return {"assets": photos}
 
-@app.get("/photos/serve/{file_path:path}")
-async def serve_photo(
-    file_path: str,
-    username: str = Depends(verify_jwt_token)
-):
-    user_dir = get_user_dir(username)
-    full_path = os.path.join(user_dir, file_path)
-    if not os.path.exists(full_path):
-        raise HTTPException(status_code=404, detail="File not found")
-    return FileResponse(full_path)
 
 def generate_video_thumbnail(video_path: str, thumb_path: str):
     try:
@@ -346,6 +336,17 @@ async def serve_photo_thumb(
         # Fallback to original
         return FileResponse(original_path)
 
+@app.get("/photos/serve/{file_path:path}")
+async def serve_photo(
+    file_path: str,
+    username: str = Depends(verify_jwt_token)
+):
+    user_dir = get_user_dir(username)
+    full_path = os.path.join(user_dir, file_path)
+    if not os.path.exists(full_path):
+        raise HTTPException(status_code=404, detail="File not found")
+    return FileResponse(full_path)
+
 @app.delete("/photos/delete/{file_path:path}")
 async def delete_photo(file_path: str, username: str = Depends(verify_jwt_token)):
     clean_path = os.path.normpath(file_path)