fix: restore standard gallery viewer for video, optimize caching of cloud only files, improve video preview handler, and fix select/deselect grey tiles

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

@@ -97,12 +97,10 @@ const GalleryRow = React.memo(({
             activeOpacity={0.85}
           >
             <Image
-              source={{ uri: asset.isCloudOnly && asset.cloudThumbUri ? asset.cloudThumbUri : asset.uri }}
+              source={asset.isCloudOnly && isVideo && asset.cloudThumbUri ? asset.cloudThumbUri : asset.uri}
               style={styles.image}
               contentFit="cover"
               cachePolicy="memory-disk"
-              recyclingKey={asset.id}
-              transition={0}
             />
             {isVideo && (
               <View style={styles.videoOverlay}>
@@ -288,42 +286,52 @@ export default function PhotosScreen() {
         if (cached) {
           const parsedAssets: UnifiedAsset[] = JSON.parse(cached);
           
-          // Refresh stale token URLs for cloud-only assets so they load instantly
-          const freshToken = await getToken();
-          if (freshToken) {
-            for (const asset of parsedAssets) {
-              if (asset.isCloudOnly || asset.cloudUri) {
-                // Rebuild URLs with fresh token (strip old token, add new)
-                const refreshUrl = (url: string | undefined) => {
-                  if (!url) return url;
-                  const base = url.split('?token=')[0];
-                  return `${base}?token=${freshToken}`;
-                };
-                asset.uri = refreshUrl(asset.uri) || asset.uri;
-                asset.cloudUri = refreshUrl(asset.cloudUri);
-                asset.cloudThumbUri = refreshUrl(asset.cloudThumbUri);
-              }
-            }
-          }
-          
+          // Paint cached assets immediately for instant UI
           setAllAssets(parsedAssets);
           setSections(groupAssetsByDate(parsedAssets));
           setIsLoading(false); // hide spinner right away
           hasCached = true;
           
-          // Prefetch cloud-only thumbnails in background
-          const cloudThumbUrls = parsedAssets
-            .filter(a => a.isCloudOnly && a.cloudThumbUri)
-            .slice(0, 30) // first 30 cloud thumbnails
-            .map(a => a.cloudThumbUri!);
-          if (cloudThumbUrls.length > 0) {
-            Image.prefetch(cloudThumbUrls).catch(() => {});
-          }
+          // Refresh stale token URLs for cloud-only assets in background
+          getToken().then((freshToken) => {
+            if (freshToken) {
+              const refreshed = parsedAssets.map(asset => {
+                if (asset.isCloudOnly || asset.cloudUri) {
+                  const refreshUrl = (url: string | undefined) => {
+                    if (!url) return url;
+                    const base = url.split('?token=')[0];
+                    return `${base}?token=${freshToken}`;
+                  };
+                  return {
+                    ...asset,
+                    uri: refreshUrl(asset.uri) || asset.uri,
+                    cloudUri: refreshUrl(asset.cloudUri),
+                    cloudThumbUri: refreshUrl(asset.cloudThumbUri),
+                  };
+                }
+                return asset;
+              });
+              setAllAssets(refreshed);
+              setSections(groupAssetsByDate(refreshed));
+              
+              // Prefetch cloud-only thumbnails in background
+              const cloudThumbUrls = refreshed
+                .filter(a => a.isCloudOnly && a.cloudThumbUri)
+                .slice(0, 30)
+                .map(a => a.cloudThumbUri!);
+              if (cloudThumbUrls.length > 0) {
+                Image.prefetch(cloudThumbUrls).catch(() => {});
+              }
+            }
+          }).catch(() => {});
         }
       } catch (e) { console.warn('Cache load error', e); }
 
       // Only show spinner when there is truly no cached data
       if (!hasCached) setIsLoading(true);
+      
+      const token = await getToken();
+      
       // 1. Fetch Local
       const media = await MediaLibrary.getAssetsAsync({
         first: 800,
@@ -334,7 +342,6 @@ export default function PhotosScreen() {
       // 2. Fetch Cloud
       let cloudAssets: any[] = [];
       try {
-        const token = await getToken();
         if (token) {
           const res = await fetch(`${BACKEND_URL}/photos?token=${token}`);
           const data = await res.json();
@@ -372,8 +379,8 @@ export default function PhotosScreen() {
           height: a.height,
           isSynced: isSynced || !!matchCloud,
           isCloudOnly: false,
-          cloudUri: matchCloud ? `${BACKEND_URL}${matchCloud.uri}?token=${await getToken()}` : undefined,
-          cloudThumbUri: matchCloud && matchCloud.thumbUri ? `${BACKEND_URL}${matchCloud.thumbUri}?token=${await getToken()}` : undefined,
+          cloudUri: matchCloud ? `${BACKEND_URL}${matchCloud.uri}?token=${token}` : undefined,
+          cloudThumbUri: matchCloud && matchCloud.thumbUri ? `${BACKEND_URL}${matchCloud.thumbUri}?token=${token}` : undefined,
           cloudId: matchCloud ? matchCloud.id : undefined,
         });
       }
@@ -382,9 +389,9 @@ export default function PhotosScreen() {
         if (!localFilenames.has(c.filename) && !trashedIds.includes(c.id)) {
           unified.push({
             id: c.id, 
-            uri: `${BACKEND_URL}${c.uri}?token=${await getToken()}`,
-            cloudUri: `${BACKEND_URL}${c.uri}?token=${await getToken()}`,
-            cloudThumbUri: c.thumbUri ? `${BACKEND_URL}${c.thumbUri}?token=${await getToken()}` : undefined,
+            uri: `${BACKEND_URL}${c.uri}?token=${token}`,
+            cloudUri: `${BACKEND_URL}${c.uri}?token=${token}`,
+            cloudThumbUri: c.thumbUri ? `${BACKEND_URL}${c.thumbUri}?token=${token}` : undefined,
             cloudId: c.id,
             filename: c.filename,
             mediaType: c.mediaType,
@@ -777,48 +784,55 @@ export default function PhotosScreen() {
             </View>
           </TouchableWithoutFeedback>
 
-          {/* Swipeable viewer — FlatList for smooth swiping, photos get ImageViewer zoom */}
-          <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);
+          {/* Swiping and Zooming via ImageViewer */}
+          <ImageViewer
+            imageUrls={allAssets.map(a => ({ url: a.uri }))}
+            index={viewerIndex ?? 0}
+            onChange={(idx) => {
+              if (idx !== undefined) {
+                setViewerIndex(idx);
+                setIsPlaying(true);
+              }
             }}
-            renderItem={({ item, index }) => (
-              <View style={{ width, height, backgroundColor: '#000' }}>
-                {item.mediaType === 'video' ? (
-                  <View style={{ flex: 1, paddingBottom: insets.bottom + 72 }}>
+            enableSwipeDown={true}
+            onSwipeDown={() => setViewerIndex(null)}
+            renderIndicator={() => <View />}
+            saveToLocalByLongPress={false}
+            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: insets.bottom + 80, justifyContent: 'center' }}
+                    onStartShouldSetResponder={() => true}
+                    onResponderTerminationRequest={() => false}
+                  >
                     <Video
-                      source={{ uri: item.uri }}
-                      style={{ flex: 1 }}
+                      source={{ uri: asset.uri }}
+                      style={{ width: '100%', height: '100%' }}
                       resizeMode={ResizeMode.CONTAIN}
                       useNativeControls
-                      shouldPlay={index === viewerIndex && isPlaying}
+                      shouldPlay={allAssets[viewerIndex ?? 0]?.id === asset.id && isPlaying}
                       isLooping={false}
                       onPlaybackStatusUpdate={(status) => {
                         if (status.isLoaded && status.didJustFinish) setIsPlaying(false);
                       }}
                     />
                   </View>
-                ) : (
-                  <Image
-                    source={{ uri: item.uri }}
-                    style={{ flex: 1, width: '100%' }}
-                    contentFit="contain"
-                    cachePolicy="memory-disk"
-                    transition={0}
-                  />
-                )}
-              </View>
-            )}
+                );
+              }
+              
+              return (
+                <Image
+                  source={uri}
+                  style={{ width: '100%', height: '100%' }}
+                  contentFit="contain"
+                  cachePolicy="memory-disk"
+                />
+              );
+            }}
           />
 
           {/* Viewer action bar */}

keystone-backend/main.py

@@ -237,7 +237,16 @@ def generate_video_thumbnail(video_path: str, thumb_path: str):
         cap = cv2.VideoCapture(video_path)
         if not cap.isOpened():
             return False
-        # Read the first frame
+        
+        # Seek to 1 second or 10% of total frames to avoid black opening frame
+        fps = cap.get(cv2.CAP_PROP_FPS)
+        frame_count = cap.get(cv2.CAP_PROP_FRAME_COUNT)
+        target_frame = 0
+        if fps > 0 and frame_count > 0:
+            target_frame = min(int(fps * 1.0), int(frame_count * 0.1))
+        if target_frame > 0:
+            cap.set(cv2.CAP_PROP_POS_FRAMES, target_frame)
+            
         ret, frame = cap.read()
         cap.release()
         if ret: