Other props

web/apps/photos/src/components/PhotoFrame.tsx

@@ -1,3 +1,4 @@
+import { useModalVisibility } from "@/base/components/utils/modal";
 import { isSameDay } from "@/base/date";
 import { formattedDate } from "@/base/i18n-date";
 import log from "@/base/log";
@@ -179,9 +180,8 @@ const PhotoFrame = ({
     const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false);
     const router = useRouter();
 
-    // const { show: showPhotoSwipe, props: photoSwipeVisibilityProps } =
+    const { show: showFileViewer, props: fileViewerVisibilityProps } =
-    //     useModalVisibility();
+        useModalVisibility();
-    const [open5, setOpen5] = useState(false);
 
     const [displayFiles, setDisplayFiles] = useState<DisplayFile[] | undefined>(
         undefined,
@@ -281,7 +281,7 @@ const PhotoFrame = ({
 
     const handleClose = (needUpdate) => {
         if (process.env.NEXT_PUBLIC_ENTE_WIP_PS5) {
-            setOpen5(false);
+            throw new Error("Not implemented");
         } else {
             setOpen(false);
             needUpdate && syncWithRemote();
@@ -292,8 +292,7 @@ const PhotoFrame = ({
     const onThumbnailClick = (index: number) => () => {
         setCurrentIndex(index);
         if (process.env.NEXT_PUBLIC_ENTE_WIP_PS5) {
-            // showPhotoSwipe();
+            showFileViewer();
-            setOpen5(true);
         } else {
             setOpen(true);
             setIsPhotoSwipeOpen?.(true);
@@ -529,13 +528,14 @@ const PhotoFrame = ({
         <Container>
             {process.env.NEXT_PUBLIC_ENTE_WIP_PS5 && (
                 <FileViewer
+                    {...fileViewerVisibilityProps}
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     /* @ts-ignore TODO(PS): test */
-                    open={open5}
-                    onClose={handleClose}
                     user={galleryContext.user ?? undefined}
                     files={files}
                     initialIndex={currentIndex}
+                    disableDownload={!enableDownload}
+                    onTriggerSyncWithRemote={() => void syncWithRemote()}
                     {...{
                         fileCollectionIDs,
                         allCollectionsNameByID,

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

@@ -69,6 +69,21 @@ export type FileViewerProps = ModalVisibilityProps & {
      * If true then the viewer does not show controls for downloading the file.
      */
     disableDownload?: boolean;
+    /**
+     * Called when there was some update performed within the file viewer that
+     * necessitates us to sync with remote again to fetch the latest updates.
+     *
+     * This is called lazily, and at most once, when the file viewer is closing
+     * if any changes were made in the file info panel of the file viewer for
+     * any of the files that the user was viewing (e.g. if they changed the
+     * caption). Those changes have already been applied to both remote and to
+     * the in-memory file object used by the file viewer; this callback is to
+     * trigger a sync so that our local database also gets up to speed.
+     *
+     * If we're in a context where edits are not possible, e.g. {@link user} is
+     * not defined, then this prop is not used.
+     */
+    onTriggerSyncWithRemote?: () => void;
 } & Pick<
         FileInfoProps,
         | "fileCollectionIDs"
@@ -89,6 +104,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
     disableDownload,
     fileCollectionIDs,
     allCollectionsNameByID,
+    onTriggerSyncWithRemote,
     onSelectCollection,
     onSelectPerson,
 }) => {
@@ -110,9 +126,20 @@ const FileViewer: React.FC<FileViewerProps> = ({
         FileInfoExif | undefined
     >(undefined);
 
+    // If `true`, then we need to trigger a sync with remote when we close.
+    const [needsSync, setNeedsSync] = useState(false);
+
     const { show: showFileInfo, props: fileInfoVisibilityProps } =
         useModalVisibility();
 
+    const handleClose = () => {
+        if (needsSync) {
+            onTriggerSyncWithRemote?.();
+            setNeedsSync(false);
+        }
+        onClose();
+    };
+
     const handleAnnotate = useCallback(
         (file: EnteFile) => {
             const fileID = file.id;
@@ -157,7 +184,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
             files,
             initialIndex,
             disableDownload,
-            onClose,
+            onClose: handleClose,
             onAnnotate: handleAnnotate,
             onViewInfo: handleViewInfo,
         });
@@ -184,6 +211,10 @@ const FileViewer: React.FC<FileViewerProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open, onClose, handleViewInfo]);
 
+    const handleRefreshPhotoswipe = useCallback(() => {
+        pswpRef.current.refreshCurrentSlideContent();
+    }, []);
+
     return (
         <Container>
             <Button>Test</Button>
@@ -191,6 +222,11 @@ const FileViewer: React.FC<FileViewerProps> = ({
                 {...fileInfoVisibilityProps}
                 file={activeAnnotatedFile?.file}
                 exif={activeFileExif}
+                allowEdits={!!activeAnnotatedFile?.annotation.isOwnFile}
+                allowMap={!!user}
+                showCollections={!!user}
+                scheduleUpdate={() => setNeedsSync(true)}
+                refreshPhotoswipe={handleRefreshPhotoswipe}
                 onSelectCollection={handleSelectCollection}
                 onSelectPerson={handleSelectPerson}
                 {...{ fileCollectionIDs, allCollectionsNameByID }}

web/packages/gallery/components/viewer/photoswipe.ts

@@ -444,6 +444,13 @@ export class FileViewerPhotoSwipe {
         this.pswp.close();
     }
 
+    /**
+     * Reload the current slide, asking the data source for its data afresh.
+     */
+    refreshCurrentSlideContent() {
+        this.pswp.refreshSlideContent(this.pswp.currIndex);
+    }
+
     updateFiles(files: EnteFile[]) {
         // TODO(PS)
     }