Refactor video history storage with namespaced keys and backward compatibility

This change improves LocalStorage organization by using namespaced keys for video details while maintaining full backward compatibility for existing clients.

## Changes:
- Video details now stored as `view_history/<uuid>` instead of plain `<uuid>`
- Maintains existing `view_history` array structure (stores UUIDs only)
- Implements lazy migration strategy with automatic fallback to old format
- All CRUD operations support both old and new storage formats
- Added comprehensive cleanup for both formats during deletions

## Backward Compatibility:
- Existing clients: Continue working seamlessly with gradual migration
- New clients: Use improved storage format from start
- No data loss: All existing view history preserved during transition
- Migration happens transparently during normal app usage

## Technical Details:
- Added fallback logic in queryFn to read from old format when new format unavailable
- updateHistory checks old format if new format entry not found, then migrates
- clearHistory and clearInstanceHistory clean up both storage formats
- deleteVideoFromHistory removes entries from both formats
- All migration code marked with TODO comments for easy removal in July 2025

## Benefits:
- Better LocalStorage organization with namespaced video data
- Reduced storage key collisions
- Easier debugging with structured key names
- Gradual, seamless migration without user impact

Author: ar9708

OwnTube.tv/hooks/useViewHistory.ts

@@ -30,9 +30,41 @@ export const useViewHistory = (queryArg?: { enabled?: boolean; maxItems?: number
     queryFn: async () => {
       const history: string[] | undefined = await readFromAsyncStorage(STORAGE.VIEW_HISTORY);
 
-      const entries = await multiGetFromAsyncStorage(history || []);
+      // Try the new format first, fall back to the old format for backward compatibility
+      const newFormatKeys = (history || []).map((uuid) => `view_history/${uuid}`);
 
-      return Object.fromEntries((entries || []).map(([key, value]) => [key, JSON.parse(value || "")]));
+      // TODO(clean-up): Remove in July 2025 when all clients are migrated
+      const oldFormatKeys = history || [];
+
+      const newEntries = await multiGetFromAsyncStorage(newFormatKeys);
+
+      // TODO(clean-up): Remove in July 2025 when all clients are migrated
+      const oldEntries = await multiGetFromAsyncStorage(oldFormatKeys);
+
+      const result: ViewHistoryBase = {};
+
+      // Process new format entries
+      newEntries?.forEach(([key, value]) => {
+        if (value) {
+          const uuid = key.replace("view_history/", "");
+          result[uuid] = JSON.parse(value);
+        }
+      });
+
+      // TODO(clean-up): Remove in July 2025 when all clients are migrated
+      // Process old format entries (fallback) and migrate them
+      for (const [uuid, value] of oldEntries || []) {
+        if (value && !result[uuid]) {
+          const entry = JSON.parse(value);
+          result[uuid] = entry;
+
+          // Lazy migration: move old entry to new format
+          await writeToAsyncStorage(`view_history/${uuid}`, entry);
+          await deleteFromAsyncStorage([uuid]);
+        }
+      }
+
+      return result;
     },
     staleTime: 0,
     select: (data) =>
@@ -50,12 +82,23 @@ export const useViewHistory = (queryArg?: { enabled?: boolean; maxItems?: number
       if (!history?.includes(data.uuid)) {
         const updatedHistory = [data.uuid, ...(history || [])];
         const staleEntries = updatedHistory.slice(maxItems);
-        deleteFromAsyncStorage(staleEntries);
+        await deleteFromAsyncStorage(staleEntries.map((uuid) => `view_history/${uuid}`));
 
         await writeToAsyncStorage(STORAGE.VIEW_HISTORY, updatedHistory.slice(0, maxItems));
       }
 
-      const videoToUpdate = await readFromAsyncStorage(data.uuid);
+      const videoKey = `view_history/${data.uuid}`;
+      let videoToUpdate = await readFromAsyncStorage(videoKey);
+
+      // TODO(clean-up): Remove in July 2025 when all clients are migrated
+      // Fallback: check the old format if not found in the new format
+      if (!videoToUpdate) {
+        videoToUpdate = await readFromAsyncStorage(data.uuid);
+        // If found in old format, clean it up after migration
+        if (videoToUpdate) {
+          await deleteFromAsyncStorage([data.uuid]);
+        }
+      }
 
       const updatedVideoEntry = {
         ...(videoToUpdate || {}),
@@ -64,7 +107,7 @@ export const useViewHistory = (queryArg?: { enabled?: boolean; maxItems?: number
         timestamp: data.timestamp ?? 0,
       };
 
-      await writeToAsyncStorage(data.uuid, updatedVideoEntry);
+      await writeToAsyncStorage(videoKey, updatedVideoEntry);
     },
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: ["viewHistory"] });
@@ -75,7 +118,11 @@ export const useViewHistory = (queryArg?: { enabled?: boolean; maxItems?: number
     mutationFn: async () => {
       const history: string[] = await readFromAsyncStorage(STORAGE.VIEW_HISTORY);
 
-      await deleteFromAsyncStorage(history);
+      // Delete both new and old format entries
+      await deleteFromAsyncStorage(history.map((uuid) => `view_history/${uuid}`));
+
+      // TODO(clean-up): Remove in July 2025 when all clients are migrated
+      await deleteFromAsyncStorage(history); // old format cleanup
       await deleteFromAsyncStorage([STORAGE.VIEW_HISTORY]);
     },
     onSuccess: () => {
@@ -90,16 +137,26 @@ export const useViewHistory = (queryArg?: { enabled?: boolean; maxItems?: number
       const toKeep: string[] = [];
 
       for (const uuid of history) {
-        const entry: ViewHistoryEntry = await readFromAsyncStorage(uuid);
+        let entry: ViewHistoryEntry = await readFromAsyncStorage(`view_history/${uuid}`);
 
-        if (entry.backend === backend) {
+        // TODO(clean-up): Remove in July 2025 when all clients are migrated
+        // Fallback to the old format if it is not found in the new format
+        if (!entry) {
+          entry = await readFromAsyncStorage(uuid);
+        }
+
+        if (entry?.backend === backend) {
           toDelete.push(uuid);
         } else {
           toKeep.push(uuid);
         }
       }
 
-      await deleteFromAsyncStorage(toDelete);
+      // Delete both new and old format entries
+      await deleteFromAsyncStorage(toDelete.map((uuid) => `view_history/${uuid}`));
+
+      // TODO(clean-up): Remove in July 2025 when all clients are migrated
+      await deleteFromAsyncStorage(toDelete); // old format cleanup
       await writeToAsyncStorage(STORAGE.VIEW_HISTORY, toKeep);
     },
     onSuccess: () => {
@@ -120,7 +177,11 @@ export const useViewHistory = (queryArg?: { enabled?: boolean; maxItems?: number
       STORAGE.VIEW_HISTORY,
       history.filter((entry) => entry !== uuid),
     );
-    await deleteFromAsyncStorage([uuid]);
+    // Delete both new and old format entries
+    await deleteFromAsyncStorage([
+      `view_history/${uuid}`,
+      uuid, // TODO(clean-up): Remove in July 2025 when all clients are migrated
+    ]);
     await queryClient.invalidateQueries({ queryKey: ["viewHistory"] });
   };