From 27ad9840d0151648fece276337abdc7046b62c07 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Thu, 6 Mar 2025 10:30:50 +0530 Subject: [PATCH] Reroute so that it works with kbd shortcuts --- .../gallery/components/viewer/FileViewer.tsx | 34 ++++++++-------- .../gallery/components/viewer/photoswipe.ts | 39 ++++++++----------- 2 files changed, 33 insertions(+), 40 deletions(-) diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx index 770af0724b..0414ed582d 100644 --- a/web/packages/gallery/components/viewer/FileViewer.tsx +++ b/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 = ({ >(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( undefined, ); @@ -364,7 +367,6 @@ const FileViewer: React.FC = ({ const handleViewInfo = useCallback( (annotatedFile: FileViewerAnnotatedFile) => { - setActiveAnnotatedFile(annotatedFile); setActiveFileExif( fileInfoExifForFile(annotatedFile.file, (exif) => setActiveFileExif(exif), @@ -381,7 +383,6 @@ const FileViewer: React.FC = ({ // 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 = ({ }; 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 = ({ }); }; - // 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 = ({ ); 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 = ({ } })(); - return { + const annotation: FileViewerFileAnnotation = { fileID, isOwnFile, showFavorite, @@ -543,6 +536,11 @@ const FileViewer: React.FC = ({ showCopyImage, showEditImage, }; + + setActiveAnnotatedFile({ file, annotation }); + setActiveImageURL(itemData.imageURL); + + return annotation; }, [ user, @@ -636,7 +634,7 @@ const FileViewer: React.FC = ({ // Don't handle keydowns if any of the modals are open. return ( openFileInfo || - moreMenuAnchorEl || + !!moreMenuAnchorEl || openImageEditor || openConfirmDelete || openShortcuts diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts index 1ba9f1e057..97ab1801cc 100644 --- a/web/packages/gallery/components/viewer/photoswipe.ts +++ b/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); }, });