Plumb

web/packages/new/photos/components/FileViewer5.tsx

@@ -15,7 +15,7 @@ if (process.env.NEXT_PUBLIC_ENTE_WIP_PS5) {
 
 import type { EnteFile } from "@/media/file.js";
 import { Button, styled } from "@mui/material";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { FileViewerPhotoSwipe } from "./FileViewerPhotoSwipe";
 
 export interface FileViewerProps {
@@ -57,6 +57,10 @@ const FileViewer: React.FC<FileViewerProps> = ({
 }) => {
     const pswpRef = useRef<FileViewerPhotoSwipe | undefined>();
 
+    const handleViewInfo = useCallback((file: EnteFile) => {
+        console.log("view-info", file);
+    }, []);
+
     useEffect(() => {
         if (!open) {
             // The close state will be handled by the cleanup function.
@@ -66,8 +70,9 @@ const FileViewer: React.FC<FileViewerProps> = ({
         const pswp = new FileViewerPhotoSwipe({
             files,
             initialIndex,
-            onClose,
             disableDownload,
+            onClose,
+            onViewInfo: handleViewInfo,
         });
         pswpRef.current = pswp;
 

web/packages/new/photos/components/FileViewerPhotoSwipe.tsx

@@ -88,6 +88,10 @@ type FileViewerPhotoSwipeOptions = FileViewerProps & {
      * Called when the file viewer is closed.
      */
     onClose: () => void;
+    /**
+     * Called when the user activates the info action on a file.
+     */
+    onViewInfo: (file: EnteFile) => void;
 };
 
 /**
@@ -151,8 +155,9 @@ export class FileViewerPhotoSwipe {
     constructor({
         files,
         initialIndex,
-        onClose,
         disableDownload,
+        onClose,
+        onViewInfo,
     }: FileViewerPhotoSwipeOptions) {
         this.files = files;
         this.opts = { disableDownload };
@@ -343,7 +348,7 @@ export class FileViewerPhotoSwipe {
                         return;
                     }
 
-                    console.log("info", file);
+                    onViewInfo(file);
                 },
             });
         });