Reroute so that it works with kbd shortcuts

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

@@ -62,7 +62,11 @@ import React, {
     useRef,
     useState,
 } from "react";
-import { fileInfoExifForFile, updateItemDataAlt } from "./data-source";
+import {
+    fileInfoExifForFile,
+    updateItemDataAlt,
+    type ItemData,
+} from "./data-source";
 import {
     FileViewerPhotoSwipe,
     moreButtonID,
@@ -306,8 +310,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
     >(undefined);
 
     // With semantics similar to `activeAnnotatedFile`, this is the imageURL
-    // associated with the `activeAnnotatedFile`, if any. However, unlike
-    // `activeAnnotatedFile`, this is only set when the more menu is activated.
+    // associated with the `activeAnnotatedFile`, if any.
     const [activeImageURL, setActiveImageURL] = useState<string | undefined>(
         undefined,
     );
@@ -364,7 +367,6 @@ const FileViewer: React.FC<FileViewerProps> = ({
 
     const handleViewInfo = useCallback(
         (annotatedFile: FileViewerAnnotatedFile) => {
-            setActiveAnnotatedFile(annotatedFile);
             setActiveFileExif(
                 fileInfoExifForFile(annotatedFile.file, (exif) =>
                     setActiveFileExif(exif),
@@ -381,7 +383,6 @@ const FileViewer: React.FC<FileViewerProps> = ({
     // download button in the PhotoSwipe bar.
     const handleDownloadBarAction = useCallback(
         (annotatedFile: FileViewerAnnotatedFile) => {
-            setActiveAnnotatedFile(annotatedFile);
             onDownload!(annotatedFile.file);
         },
         [onDownload],
@@ -397,15 +398,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
     };
 
     const handleMore = useCallback(
-        (
-            annotatedFile: FileViewerAnnotatedFile,
-            imageURL: string | undefined,
-            buttonElement: HTMLElement,
-        ) => {
-            setActiveAnnotatedFile(annotatedFile);
-            setActiveImageURL(imageURL);
-            setMoreMenuAnchorEl(buttonElement);
-        },
+        (buttonElement: HTMLElement) => setMoreMenuAnchorEl(buttonElement),
         [],
     );
 
@@ -455,7 +448,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
         });
     };
 
-    // Not memoized since it uses the frequently changing `activeAnnotatedFile`.
+    // Not memoized since it uses the frequently changing `activeImageURL`.
     const handleCopyImage = useCallback(() => {
         handleMoreMenuCloseIfNeeded();
         // Safari does not copy if we do not call `navigator.clipboard.write`
@@ -493,7 +486,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
     );
 
     const handleAnnotate = useCallback(
-        (file: EnteFile): FileViewerFileAnnotation => {
+        (file: EnteFile, itemData: ItemData): FileViewerFileAnnotation => {
             const fileID = file.id;
             const isOwnFile = file.ownerID == user?.id;
 
@@ -534,7 +527,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
                 }
             })();
 
-            return {
+            const annotation: FileViewerFileAnnotation = {
                 fileID,
                 isOwnFile,
                 showFavorite,
@@ -543,6 +536,11 @@ const FileViewer: React.FC<FileViewerProps> = ({
                 showCopyImage,
                 showEditImage,
             };
+
+            setActiveAnnotatedFile({ file, annotation });
+            setActiveImageURL(itemData.imageURL);
+
+            return annotation;
         },
         [
             user,
@@ -636,7 +634,7 @@ const FileViewer: React.FC<FileViewerProps> = ({
         // Don't handle keydowns if any of the modals are open.
         return (
             openFileInfo ||
-            moreMenuAnchorEl ||
+            !!moreMenuAnchorEl ||
             openImageEditor ||
             openConfirmDelete ||
             openShortcuts

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

@@ -13,6 +13,7 @@ import {
     forgetFailedItemDataForFileID,
     itemDataForFile,
     updateFileInfoExifIfNeeded,
+    type ItemData,
 } from "./data-source";
 import {
     type FileViewerAnnotatedFile,
@@ -123,8 +124,18 @@ type FileViewerPhotoSwipeOptions = Pick<
     /**
      * Called whenever the slide is initially displayed or changes, to obtain
      * various derived data for the file that is about to be displayed.
+     *
+     * @param file The current {@link EnteFile}. This is the same value as the
+     * corresponding value in the current index of {@link getFiles} returned by
+     * the delegate.
+     *
+     * @param itemData This is the best currently available {@link ItemData}
+     * corresponding to the current file.
      */
-    onAnnotate: (file: EnteFile) => FileViewerFileAnnotation;
+    onAnnotate: (
+        file: EnteFile,
+        itemData: ItemData,
+    ) => FileViewerFileAnnotation;
     /**
      * Called when the user activates the info action on a file.
      */
@@ -134,23 +145,11 @@ type FileViewerPhotoSwipeOptions = Pick<
      */
     onDownload: (annotatedFile: FileViewerAnnotatedFile) => void;
     /**
-     * Called when the user activates the more action on a file.
-     *
-     * @param annotatedFile The current (annotated) file.
-     *
-     * @param imageURL If the current file has an associated non-thumbnail image
-     * that is being shown in the viewer, then this is set to the (object) URL
-     * of the image being shown. Specifically, this is the same as the
-     * {@link imageURL} attribute of the {@link ItemData} associated with the
-     * current file.
+     * Called when the user activates the more action.
      *
      * @param buttonElement The more button DOM element.
      */
-    onMore: (
-        annotatedFile: FileViewerAnnotatedFile,
-        imageURL: string | undefined,
-        buttonElement: HTMLElement,
-    ) => void;
+    onMore: (buttonElement: HTMLElement) => void;
 };
 
 /**
@@ -224,7 +223,7 @@ export class FileViewerPhotoSwipe {
      * each time the slide changes, and cached until the next slide change.
      *
      * Instead of accessing this property directly, code should funnel through
-     * the `activeFileAnnotation` helper function defined in the constructor
+     * the `currentAnnotatedFile` helper function defined in the constructor
      * scope.
      */
     private activeFileAnnotation: FileViewerFileAnnotation | undefined;
@@ -312,7 +311,7 @@ export class FileViewerPhotoSwipe {
             const file = currentFile();
             let annotation = this.activeFileAnnotation;
             if (annotation?.fileID != file.id) {
-                annotation = onAnnotate(file);
+                annotation = onAnnotate(file, pswp.currSlide.content.data);
                 this.activeFileAnnotation = annotation;
             }
             return {
@@ -671,11 +670,7 @@ export class FileViewerPhotoSwipe {
                     // See also: `resetMoreMenuButtonOnMenuClose`.
                     buttonElement.setAttribute("aria-controls", moreMenuID);
                     buttonElement.setAttribute("aria-expanded", true);
-                    onMore(
-                        currentAnnotatedFile(),
-                        pswp.currSlide.content.data.imageURL,
-                        buttonElement,
-                    );
+                    onMore(buttonElement);
                 },
             });