Handle

web/packages/gallery/components/viewer/FileViewer.tsx

@@ -35,7 +35,7 @@ import {
 } from "@/new/photos/components/ImageEditorOverlay";
 import { Button, Menu, MenuItem, styled } from "@mui/material";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { fileInfoExifForFile } from "./data-source";
+import { fileInfoExifForFile, updateItemDataAlt } from "./data-source";
 import {
     FileViewerPhotoSwipe,
     moreButtonID,
@@ -395,7 +395,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
     ]);
 
     const handleUpdateCaption = useCallback((updatedFile: EnteFile) => {
-        console.log("TODO", updatedFile);
+        updateItemDataAlt(updatedFile);
         psRef.current!.refreshCurrentSlideContent();
     }, []);
 

web/packages/gallery/components/viewer/data-source.ts

@@ -301,6 +301,19 @@ export const forgetFailedItemDataForFileID = (fileID: number) => {
     }
 };
 
+/**
+ * Update the alt attribute of the {@link ItemData}, if any, associated with the
+ * given {@link EnteFile}.
+ *
+ * @param updatedFile The file whose caption was updated.
+ */
+export const updateItemDataAlt = (updatedFile: EnteFile) => {
+    const itemData = _state.itemDataByFileID.get(updatedFile.id);
+    if (itemData) {
+        itemData.alt = fileCaption(updatedFile);
+    }
+};
+
 /**
  * Forget item data for the all files whose fetch had failed.
  *