fix: gallery row memo caching bug, video native controls overlap, and re-add ImageViewer for photo zooming

keystone-app/app/(tabs)/index.tsx

@@ -33,7 +33,7 @@ import { useAuth } from '../../components/AuthContext';
 
 export const TRASHED_ASSETS_KEY = '@trashed_assets';
 export const CACHED_ASSETS_KEY = '@cached_assets';
-
+//https://dpv007-keystone.hf.space
 const { width, height } = Dimensions.get('window');
 const NUM_COLUMNS = 4;
 const SPACING = 2;
@@ -149,6 +149,7 @@ const GalleryRow = React.memo(({
     </View>
   );
 }, (prev, next) => {
+  if (prev.row !== next.row) return false;
   if (prev.isSelecting !== next.isSelecting) return false;
   // If no selection changes affect this row, we can skip render
   const prevSelected = prev.row.map(a => prev.selectedIds.has(a.id));
@@ -737,45 +738,52 @@ export default function PhotosScreen() {
             </View>
           </TouchableWithoutFeedback>
 
-          {/* Custom swipeable viewer — handles both photos and full-screen video */}
-          <FlatList
-            ref={viewerRef}
-            data={allAssets}
-            horizontal
-            pagingEnabled
-            initialScrollIndex={viewerIndex ?? 0}
-            getItemLayout={(_, index) => ({ length: width, offset: width * index, index })}
-            keyExtractor={item => item.id}
-            showsHorizontalScrollIndicator={false}
-            onMomentumScrollEnd={(e) => {
-              const newIndex = Math.round(e.nativeEvent.contentOffset.x / width);
-              setViewerIndex(newIndex);
-              setIsPlaying(true);
+          {/* ImageViewer handles zooming for photos and swiping for everything */}
+          <ImageViewer
+            imageUrls={allAssets.map(a => ({ url: a.uri }))}
+            index={viewerIndex || 0}
+            onChange={(idx) => {
+              if (idx !== undefined) {
+                setViewerIndex(idx);
+                setIsPlaying(true);
+              }
             }}
-            renderItem={({ item, index }) => {
-              const isCurrentVideo = item.mediaType === 'video';
-              return (
-                <View style={{ width, height: '100%', backgroundColor: '#000', justifyContent: 'center' }}>
-                  {isCurrentVideo ? (
+            enableSwipeDown
+            onSwipeDown={() => setViewerIndex(null)}
+            renderIndicator={() => <View />}
+            renderImage={(props) => {
+              const uri = props.source.uri;
+              const asset = allAssets.find(a => a.uri === uri);
+              
+              if (asset?.mediaType === 'video') {
+                return (
+                  <View 
+                    style={{ width, height, paddingBottom: 80, justifyContent: 'center' }}
+                    onStartShouldSetResponder={() => true}
+                    onResponderTerminationRequest={() => false}
+                  >
                     <Video
-                      source={{ uri: item.uri }}
-                      style={{ width, height: '100%' }}
+                      source={{ uri: asset.uri }}
+                      style={{ width: '100%', height: '100%' }}
                       resizeMode={ResizeMode.CONTAIN}
-                      useNativeControls={true}
-                      shouldPlay={isPlaying && viewerIndex === index}
+                      useNativeControls
+                      shouldPlay={allAssets[viewerIndex ?? 0]?.id === asset.id && isPlaying}
+                      isLooping
                       onPlaybackStatusUpdate={(status) => {
                         if (status.isLoaded && status.didJustFinish) setIsPlaying(false);
                       }}
                     />
-                  ) : (
-                    <Image
-                      source={{ uri: item.uri }}
-                      style={{ width, height: '100%' }}
-                      contentFit="contain"
-                      cachePolicy="memory-disk"
-                    />
-                  )}
-                </View>
+                  </View>
+                );
+              }
+              
+              return (
+                <Image
+                  source={{ uri }}
+                  style={{ width: '100%', height: '100%' }}
+                  contentFit="contain"
+                  cachePolicy="memory-disk"
+                />
               );
             }}
           />