@oxyhq/services 22.5.0 → 22.6.1

package/src/ui/hooks/useResolvedFileUrls.ts

@@ -0,0 +1,170 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { FileMetadata } from '@oxyhq/core';
+
+/**
+ * The variant-aware batch resolver contract (`@oxyhq/core`).
+ *
+ * `getFileDownloadUrls` takes a per-file `{ fileId, variant }` list and returns
+ * a map keyed by `fileId`; ids that are denied or missing are OMITTED (never an
+ * empty string), and PRIVATE assets resolve to a working scoped-media-token
+ * stream URL. Typed here rather than `Pick<OxyServices, …>` so this file states
+ * the exact contract it depends on.
+ */
+export interface AssetUrlBatchResolver {
+  getFileDownloadUrls(
+    requests: Array<{ fileId: string; variant?: string }>,
+    options?: { expiresIn?: number; context?: string },
+  ): Promise<Record<string, string>>;
+}
+
+/**
+ * Private-safe grid/thumbnail URL resolution.
+ *
+ * The synchronous `oxyServices.getFileDownloadUrl(id, variant)` always yields
+ * the public CDN origin (`cloud.oxy.so/<id>`), which 404s for PRIVATE assets —
+ * and uploads default to private. Thumbnails and previews therefore have to be
+ * resolved through the authenticated batch endpoint, which returns a working
+ * `/assets/:id/stream?…&mt=<scoped media token>` URL for private files.
+ *
+ * This hook resolves an ENTIRE page of files in ONE (chunked) batch request
+ * rather than N per-tile calls, and caches the result in React Query keyed by
+ * the (fileId, variant) set. `staleTime` is deliberately shorter than the
+ * server media-token TTL so a tile never renders a URL whose token has already
+ * expired.
+ *
+ * Optimistic (`temp-…` / `uploading`) entries are NEVER resolved here — an
+ * asset URL must never be built from an id the server does not yet know. Their
+ * preview comes from the locally-picked uri (see {@link fileThumbSource}).
+ */
+
+/** Server media-token lifetime we request for each resolved URL (seconds). */
+const ASSET_URL_TTL_SECONDS = 600; // 10 minutes
+/**
+ * Refresh window. Kept below {@link ASSET_URL_TTL_SECONDS} so React Query
+ * re-resolves in the background before a rendered URL's token can die.
+ */
+const ASSET_URL_STALE_MS = 5 * 60 * 1000; // 5 minutes
+const ASSET_URL_GC_MS = 30 * 60 * 1000;
+/** Server-side batch cap for `POST /assets/batch-access` — chunk beyond this. */
+const BATCH_CAP = 100;
+
+/** React Query prefix — scoped media URLs must never leak across accounts. */
+export const ASSET_DOWNLOAD_URLS_QUERY_KEY = 'assetDownloadUrls' as const;
+
+/**
+ * True when a file is an optimistic placeholder that has not been persisted by
+ * the server yet — either its id is still the client-minted `temp-…` id, or it
+ * carries the `uploading` flag. Mirrors the `temp-` id guard precedent in
+ * `@oxyhq/core`'s `avatarUtils.updateAvatarVisibility`.
+ */
+export function isOptimisticFile(file: Pick<FileMetadata, 'id' | 'metadata'>): boolean {
+  if (typeof file.id === 'string' && file.id.startsWith('temp-')) return true;
+  return file.metadata?.uploading === true;
+}
+
+/** Grid thumbnail variant for a file, or `undefined` when it needs no URL. */
+function thumbVariantFor(file: FileMetadata): string | undefined {
+  if (file.contentType.startsWith('video/')) return 'poster';
+  if (file.contentType.startsWith('image/')) return 'thumb';
+  return undefined;
+}
+
+/**
+ * Locally-picked preview uri stashed on an optimistic entry's metadata by the
+ * upload flow, if present.
+ */
+function localPreviewUri(file: FileMetadata): string | undefined {
+  const uri = (file.metadata as Record<string, unknown> | undefined)?.localPreviewUri;
+  return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
+}
+
+/**
+ * Resolve the image source for a grid tile.
+ *
+ * - Optimistic entry → its locally-picked preview uri (never an asset URL).
+ * - Persisted entry → the private-safe URL from {@link useResolvedFileUrls},
+ *   or `undefined` while it is still resolving / was denied (tile shows a
+ *   placeholder instead of a guaranteed-404 CDN URL).
+ */
+export function fileThumbSource(
+  file: FileMetadata,
+  resolved: ReadonlyMap<string, string>,
+): string | undefined {
+  if (isOptimisticFile(file)) {
+    return localPreviewUri(file);
+  }
+  return resolved.get(file.id);
+}
+
+/**
+ * Batch-resolve private-safe thumbnail URLs for the given files.
+ *
+ * Only image/video, non-optimistic files are resolved (documents render an
+ * icon, optimistic entries render their local preview). Returns a stable
+ * `Map<fileId, url>`; missing entries mean "not resolved yet or access denied".
+ */
+export function useResolvedFileUrls(
+  oxyServices: AssetUrlBatchResolver,
+  files: FileMetadata[],
+  /** Active viewer account id — media tokens are minted per user; must be in the query key. */
+  viewerId?: string | null,
+): ReadonlyMap<string, string> {
+  const viewerKey = viewerId ?? '';
+  const requests = useMemo(() => {
+    const list: Array<{ fileId: string; variant?: string }> = [];
+    for (const file of files) {
+      if (isOptimisticFile(file)) continue;
+      const variant = thumbVariantFor(file);
+      if (!variant) continue;
+      list.push({ fileId: file.id, variant });
+    }
+    return list;
+  }, [files]);
+
+  // A content signature so the query key is stable across renders while the
+  // resolvable set is unchanged (the `files` array is a fresh reference every
+  // render). Sorted so ordering churn does not force a refetch.
+  const signature = useMemo(
+    () => requests.map((r) => `${r.fileId}:${r.variant ?? ''}`).sort().join('|'),
+    [requests],
+  );
+
+  const query = useQuery({
+    queryKey: [ASSET_DOWNLOAD_URLS_QUERY_KEY, viewerKey, signature],
+    enabled: requests.length > 0 && viewerKey.length > 0,
+    staleTime: ASSET_URL_STALE_MS,
+    gcTime: ASSET_URL_GC_MS,
+    // Keep previously-resolved URLs on screen while the SAME viewer's file set
+    // grows (pagination), but never carry another account's scoped media tokens
+    // across a switch — `keepPreviousData` alone would do that.
+    placeholderData: (previousData, previousQuery) => {
+      if (!previousData || !previousQuery) return undefined;
+      const prevViewer = previousQuery.queryKey[1];
+      if (prevViewer !== viewerKey) return undefined;
+      return previousData;
+    },
+    queryFn: async (): Promise<Record<string, string>> => {
+      const merged: Record<string, string> = {};
+      for (let i = 0; i < requests.length; i += BATCH_CAP) {
+        const chunk = requests.slice(i, i + BATCH_CAP);
+        const urls = await oxyServices.getFileDownloadUrls(chunk, {
+          expiresIn: ASSET_URL_TTL_SECONDS,
+        });
+        Object.assign(merged, urls);
+      }
+      return merged;
+    },
+  });
+
+  return useMemo(() => {
+    const map = new Map<string, string>();
+    const data = query.data;
+    if (data) {
+      for (const [id, url] of Object.entries(data)) {
+        if (typeof url === 'string' && url.length > 0) map.set(id, url);
+      }
+    }
+    return map;
+  }, [query.data]);
+}

package/src/ui/screens/FileManagementScreen.tsx

@@ -28,8 +28,8 @@ import { useUploadFile } from '../hooks/mutations/useAccountMutations';
 import {
     formatFileSize,
     getFileIcon,
-    getSafeDownloadUrl,
 } from '../utils/fileManagement';
+import { useResolvedFileUrls, fileThumbSource } from '../hooks/useResolvedFileUrls';
 import { FileViewer } from '../components/fileManagement/FileViewer';
 import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
@@ -356,12 +356,18 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         onClose?.();
     }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
 
-    // Helper to safely request a thumbnail variant only for image mime types.
-    const getSafeDownloadUrlCallback = useCallback(
-        (file: FileMetadata, variant = 'thumb') => {
-            return getSafeDownloadUrl(file, variant, (fileId: string, variant?: string) => oxyServices.getFileDownloadUrl(fileId, variant));
-        },
-        [oxyServices]
+    // Private-safe thumbnail URLs for the currently-shown files, resolved in
+    // ONE batch per page (not N per-tile) and cached by React Query. Uploads
+    // default to private, so the synchronous public-CDN URL would 404 for
+    // every private thumbnail.
+    const resolvedThumbUrls = useResolvedFileUrls(oxyServices, filteredFiles, user?.id);
+
+    // Image source for a grid tile: the resolved private-safe URL for a
+    // persisted file, or the locally-picked preview for an in-flight optimistic
+    // entry. Never builds an asset URL from a `temp-…`/uploading id.
+    const thumbSourceFor = useCallback(
+        (file: FileMetadata): string | undefined => fileThumbSource(file, resolvedThumbUrls),
+        [resolvedThumbUrls],
     );
 
     const bloomTheme = useTheme();
@@ -480,7 +486,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             await Promise.all(
                 photosToLoad.map(async (photo) => {
                     try {
-                        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+                        const downloadUrl = thumbSourceFor(photo);
+                        // URL not resolved yet — skip (do NOT record fallback
+                        // dims) so this photo is re-measured once its private-safe
+                        // URL resolves. Measuring the broken public URL is exactly
+                        // the bug we are fixing.
+                        if (!downloadUrl) {
+                            return;
+                        }
 
                         // Unified approach using Image.getSize (works on all platforms)
                         await new Promise<void>((resolve) => {
@@ -515,7 +528,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } finally {
             setLoadingDimensions(false);
         }
-    }, [getSafeDownloadUrlCallback, photoDimensions]);
+    }, [thumbSourceFor, photoDimensions]);
+
+    // Re-measure photo dimensions when their private-safe URLs resolve. The
+    // justified grid's own trigger fires on the photo SET, not on URL
+    // availability, so newly-resolved private tiles would otherwise keep their
+    // skipped (unmeasured) state and render with fallback geometry.
+    useEffect(() => {
+        if (viewMode !== 'photos') return;
+        const photos = filteredFiles.filter((file) => file.contentType.startsWith('image/'));
+        if (photos.length > 0) {
+            loadPhotoDimensions(photos);
+        }
+    }, [resolvedThumbUrls, viewMode, filteredFiles, loadPhotoDimensions]);
 
     // Create justified rows from photos with responsive algorithm
     const createJustifiedRows = useCallback((photos: FileMetadata[], containerWidth: number) => {
@@ -646,9 +671,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     // Unified download function - works on all platforms
     const handleFileDownload = async (fileId: string, filename: string) => {
         try {
-            // Try to use the download URL with a simple approach
-            // On web, this creates a download link. On mobile, it opens the URL.
-            const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
+            // Resolve an authenticated, private-safe URL. The synchronous
+            // `getFileDownloadUrl` yields the public CDN origin, which 404s for
+            // private assets (the default visibility).
+            const downloadUrl = await oxyServices.getFileDownloadUrlAsync(fileId);
 
             // For web platforms, use link download
             if (typeof window !== 'undefined' && window.document) {
@@ -715,8 +741,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         file.contentType.includes('pdf') ||
                         file.contentType.startsWith('video/') ||
                         file.contentType.startsWith('audio/')) {
-                        // For images, PDFs, videos, and audio, we'll use the URL directly
-                        const downloadUrl = oxyServices.getFileDownloadUrl(file.id);
+                        // For images, PDFs, videos, and audio, we render the URL
+                        // directly. Resolve the authenticated, private-safe URL —
+                        // the synchronous public-CDN URL 404s for private assets.
+                        const downloadUrl = await oxyServices.getFileDownloadUrlAsync(file.id);
                         setFileContent(downloadUrl);
                     } else {
                         // For text files, get the content using authenticated request
@@ -755,7 +783,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     };
 
     const renderSimplePhotoItem = useCallback((photo: FileMetadata, index: number) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        const downloadUrl = thumbSourceFor(photo);
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
@@ -803,10 +831,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
             </TouchableOpacity>
         );
-    }, [oxyServices, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
+    }, [thumbSourceFor, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
 
     const renderJustifiedPhotoItem = useCallback((photo: FileMetadata, width: number, height: number, isLast: boolean) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        const downloadUrl = thumbSourceFor(photo);
 
         return (
             <TouchableOpacity
@@ -843,7 +871,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
             </TouchableOpacity>
         );
-    }, [oxyServices, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
+    }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
 
     // Run initial load once per targetUserId change to avoid accidental loops
     const lastLoadedFor = useRef<string | undefined>(undefined);
@@ -879,7 +907,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             <View style={fileManagementStyles.filePreview}>
                                 {isImage && (
                                     <ExpoImage
-                                        source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                        source={{ uri: thumbSourceFor(file) }}
                                         style={fileManagementStyles.previewImage}
                                         contentFit="cover"
                                         transition={120}
@@ -899,7 +927,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                 {isVideo && (
                                     <View style={fileManagementStyles.videoPreviewWrapper}>
                                         <ExpoImage
-                                            source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                            source={{ uri: thumbSourceFor(file) }}
                                             style={fileManagementStyles.videoPosterImage}
                                             contentFit="cover"
                                             transition={120}
@@ -919,7 +947,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     style={[fileManagementStyles.fallbackIcon, { display: isImage ? 'none' : 'flex' }]}
                                 >
                                     <Ionicons
-                                        name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                                        name={getFileIcon(file.contentType)}
                                         size={32}
                                         color={colors.primary}
                                     />
@@ -934,7 +962,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         ) : (
                             <View style={fileManagementStyles.fileIconContainer}>
                                 <Ionicons
-                                    name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                                    name={getFileIcon(file.contentType)}
                                     size={32}
                                     color={colors.primary}
                                 />
@@ -1016,7 +1044,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
                             <ExpoImage
-                                source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                source={{ uri: thumbSourceFor(file) }}
                                 style={{ width: 36, height: 36 }}
                                 contentFit="cover"
                                 transition={120}
@@ -1032,7 +1060,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }}>
                             <ExpoImage
-                                source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                source={{ uri: thumbSourceFor(file) }}
                                 style={{ width: 36, height: 36 }}
                                 contentFit="cover"
                                 transition={120}
@@ -1102,7 +1130,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 ) : undefined,
             };
         });
-    }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
+    }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
 
     // Scroll to selected file after selection
     useEffect(() => {
@@ -1191,7 +1219,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     }, [lastSelectedFileId]);
 
     const renderPhotoItem = (photo: FileMetadata, index: number) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        const downloadUrl = thumbSourceFor(photo);
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
@@ -1570,7 +1598,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     hasMore={paging.hasMore}
                     loadingMore={paging.loadingMore}
                     reduceMotion={reduceMotion}
-                    getThumbUrl={getSafeDownloadUrlCallback}
+                    getThumbUrl={thumbSourceFor}
                     primaryColor={colors.primary}
                     isOwner={isOwner}
                     onTogglePhoto={toggleSelect}

package/src/ui/screens/__tests__/photoGridLayout.test.ts

@@ -0,0 +1,57 @@
+import {
+    computePhotoGridLayout,
+    PHOTO_GRID_GUTTER,
+    PHOTO_GRID_WIDE_BREAKPOINT,
+} from '../fileManagement/photoGridLayout';
+
+describe('computePhotoGridLayout', () => {
+    it('uses 3 columns below the wide breakpoint', () => {
+        expect(computePhotoGridLayout(390).columns).toBe(3);
+        expect(computePhotoGridLayout(500).columns).toBe(3);
+        expect(computePhotoGridLayout(PHOTO_GRID_WIDE_BREAKPOINT - 1).columns).toBe(3);
+    });
+
+    it('uses 4 columns at/above the wide breakpoint', () => {
+        expect(computePhotoGridLayout(PHOTO_GRID_WIDE_BREAKPOINT).columns).toBe(4);
+        expect(computePhotoGridLayout(700).columns).toBe(4);
+        expect(computePhotoGridLayout(1024).columns).toBe(4);
+    });
+
+    it('floors the tile size so a full row never exceeds the container', () => {
+        // The whole point of the bug fix: geometry derives from the passed
+        // container width, and a full row of tiles + gutters must fit inside it.
+        for (const width of [320, 375, 390, 428, 500, 599, 600, 768, 834, 1024]) {
+            const { columns, cellSize, gutter } = computePhotoGridLayout(width);
+            const rowWidth = columns * cellSize + (columns - 1) * gutter;
+            expect(rowWidth).toBeLessThanOrEqual(width);
+            // ...and the floor is tight (adding one px per tile would overflow).
+            expect((columns * (cellSize + 1)) + (columns - 1) * gutter).toBeGreaterThan(width);
+        }
+    });
+
+    it('derives smaller tiles from a narrow sheet than from a wide screen', () => {
+        // Regression guard for the original bug: a centered dialog (narrow
+        // container) must NOT size tiles from a wider screen width.
+        const narrowSheet = computePhotoGridLayout(500); // 3 cols
+        const wideScreen = computePhotoGridLayout(1200); // 4 cols
+        expect(narrowSheet.cellSize).toBeLessThan(wideScreen.cellSize);
+        // Cross-check the exact arithmetic against the gutter constant.
+        expect(narrowSheet.cellSize).toBe(
+            Math.floor((500 - PHOTO_GRID_GUTTER * 2) / 3),
+        );
+        expect(wideScreen.cellSize).toBe(
+            Math.floor((1200 - PHOTO_GRID_GUTTER * 3) / 4),
+        );
+    });
+
+    it('returns cellSize 0 for a not-yet-measured (<= 0) width', () => {
+        expect(computePhotoGridLayout(0).cellSize).toBe(0);
+        expect(computePhotoGridLayout(-10).cellSize).toBe(0);
+        // Columns still resolve to the narrow default so callers can render.
+        expect(computePhotoGridLayout(0).columns).toBe(3);
+    });
+
+    it('exposes the gutter it used to derive the tile size', () => {
+        expect(computePhotoGridLayout(500).gutter).toBe(PHOTO_GRID_GUTTER);
+    });
+});