kbd fin

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

@@ -642,14 +642,22 @@ const FileViewer: React.FC<FileViewerProps> = ({
         openShortcuts,
     ]);
 
+    const canCopyImage = useCallback(
+        () =>
+            activeAnnotatedFile?.annotation.showCopyImage &&
+            activeAnnotatedFile.itemData.imageURL,
+        [activeAnnotatedFile],
+    );
+
     const performKeyAction = useCallback(
         (action): FileViewerPhotoSwipeDelegate["performKeyAction"] => {
             switch (action) {
                 case "delete":
-                    handleConfirmDelete?.();
+                    if (activeAnnotatedFile?.annotation.showDelete)
+                        handleConfirmDelete?.();
                     break;
                 case "copy":
-                    if (activeImageURL) handleCopyImage();
+                    if (canCopyImage()) handleCopyImage();
                     break;
                 case "toggle-fullscreen":
                     handleToggleFullscreen();
@@ -658,10 +666,10 @@ const FileViewer: React.FC<FileViewerProps> = ({
         },
         [
             handleConfirmDelete,
-            activeAnnotatedFile,
-            activeImageURL,
             handleCopyImage,
             handleToggleFullscreen,
+            activeAnnotatedFile,
+            canCopyImage,
         ],
     );
 
@@ -794,18 +802,15 @@ const FileViewer: React.FC<FileViewerProps> = ({
                         <DeleteIcon />
                     </MoreMenuItem>
                 )}
-                {activeAnnotatedFile?.annotation.showCopyImage &&
+                {canCopyImage() && (
-                    activeImageURL && (
+                    <MoreMenuItem onClick={handleCopyImage}>
-                        <MoreMenuItem onClick={handleCopyImage}>
+                        <MoreMenuItemTitle>
-                            <MoreMenuItemTitle>
+                            {/*TODO */ pt("Copy as PNG")}
-                                {/*TODO */ pt("Copy as PNG")}
+                        </MoreMenuItemTitle>
-                            </MoreMenuItemTitle>
+                        {/* Tweak icon size to visually fit better with neighbours */}
-                            {/* Tweak icon size to visually fit better with neighbours */}
+                        <ContentCopyIcon sx={{ "&&": { fontSize: "18px" } }} />
-                            <ContentCopyIcon
+                    </MoreMenuItem>
-                                sx={{ "&&": { fontSize: "18px" } }}
+                )}
-                            />
-                        </MoreMenuItem>
-                    )}
                 {activeAnnotatedFile?.annotation.showEditImage && (
                     <MoreMenuItem onClick={handleEditImage}>
                         <MoreMenuItemTitle>
@@ -930,7 +935,7 @@ const Shortcuts: React.FC<ModalVisibilityProps> = ({ open, onClose }) => (
             <Shortcut action="Zoom" shortcut="Mouse scroll, Pinch" />
             <Shortcut action="Zoom preset" shortcut="Z, Tap inside image" />
             <Shortcut action="Toggle controls" shortcut="Tap outside image" />
-            <Shortcut action="Pan" shortcut="WASD, Drag" />
+            <Shortcut action="Pan" shortcut="W / A / S / D, Drag" />
             <Shortcut action="Toggle favorite" shortcut="L" />
             <Shortcut action="View info" shortcut="I" />
             <Shortcut action="Download" shortcut="K" />

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

@@ -304,7 +304,7 @@ export class FileViewerPhotoSwipe {
 
         const currentAnnotatedFile = () => {
             const file = currentFile();
-            const annotatedFile = _currentAnnotatedFile;
+            let annotatedFile = _currentAnnotatedFile;
             if (!annotatedFile || annotatedFile.file.fileID != file.id) {
                 annotatedFile = onAnnotate(file, pswp.currSlide.content.data);
                 _currentAnnotatedFile = annotatedFile;
@@ -733,8 +733,9 @@ export class FileViewerPhotoSwipe {
 
             const e: KeyboardEvent = pswpEvent.originalEvent;
 
+            const key = e.key;
             // Even though we ignore shift, Caps lock might still be on.
-            const key = e.key.toLowerCase();
+            const lkey = e.key.toLowerCase();
 
             // Keep the keybindings such that they don't use modifiers, because
             // these are more likely to interfere with browser shortcuts.
@@ -747,17 +748,23 @@ export class FileViewerPhotoSwipe {
 
             let cb: (() => void) | undefined;
             if (e.shiftKey || e.altKey || e.metaKey || e.ctrlKey) {
-                // Ignore except using Ctrl/Cmd-D for copy.
+                // Ignore except using Ctrl/Cmd-C for copy.
-                if ((e.metaKey || e.ctrlKey) && key == "c") {
+                if ((e.metaKey || e.ctrlKey) && lkey == "c") {
                     cb = handleCopy;
                 }
             } else {
                 switch (key) {
+                    case "Backspace":
+                    case "Delete":
+                        cb = handleDelete;
+                        break;
+                }
+                switch (lkey) {
                     case "w":
                     case "a":
                     case "s":
                     case "d":
-                        cb = panner(key);
+                        cb = panner(lkey);
                         break;
                     case "l":
                         cb = handleToggleFavoriteIfEnabled;
@@ -768,10 +775,6 @@ export class FileViewerPhotoSwipe {
                     case "k":
                         cb = handleDownloadIfEnabled;
                         break;
-                    case "Backspace":
-                    case "Delete":
-                        cb = handleDelete;
-                        break;
                     case "f":
                         cb = handleToggleFullscreen;
                         break;