Merge signalapp/Signal-Desktop#6724

ts/components/Lightbox.tsx

@@ -26,6 +26,7 @@ import { isGIF } from '../types/Attachment';
 import { useRestoreFocus } from '../hooks/useRestoreFocus';
 import { usePrevious } from '../hooks/usePrevious';
 import { arrow } from '../util/keyboard';
+import { isCmdOrCtrl } from '../hooks/useKeyboardShortcuts';
 
 export type PropsType = {
   children?: ReactNode;
@@ -160,21 +161,24 @@ export function Lightbox({
     setVideoTime(videoElement.currentTime);
   }, [setVideoTime, videoElement]);
 
-  const handleSave = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    if (isViewOnce) {
-      return;
-    }
+  const handleSave = useCallback(
+    (
+      event: KeyboardEvent | React.MouseEvent<HTMLButtonElement, MouseEvent>
+    ) => {
+      if (isViewOnce) {
+        return;
+      }
 
-    event.stopPropagation();
-    event.preventDefault();
+      event.stopPropagation();
+      event.preventDefault();
 
-    const mediaItem = media[selectedIndex];
-    const { attachment, message, index } = mediaItem;
+      const mediaItem = media[selectedIndex];
+      const { attachment, message, index } = mediaItem;
 
-    saveAttachment(attachment, message.sent_at, index + 1);
-  };
+      saveAttachment(attachment, message.sent_at, index + 1);
+    },
+    [isViewOnce, media, saveAttachment, selectedIndex]
+  );
 
   const handleForward = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -211,10 +215,16 @@ export function Lightbox({
           onNext(event);
           break;
 
+        case 's':
+          if (isCmdOrCtrl(event)) {
+            handleSave(event);
+          }
+          break;
+
         default:
       }
     },
-    [closeLightbox, onNext, onPrevious]
+    [closeLightbox, onNext, onPrevious, handleSave]
   );
 
   const onClose = (event: React.MouseEvent<HTMLElement>) => {

ts/hooks/useKeyboardShortcuts.tsx

@@ -14,7 +14,7 @@ import type { ContextMenuTriggerType } from '../components/conversation/MessageC
 
 type KeyboardShortcutHandlerType = (ev: KeyboardEvent) => boolean;
 
-function isCmdOrCtrl(ev: KeyboardEvent): boolean {
+export function isCmdOrCtrl(ev: KeyboardEvent): boolean {
   const { ctrlKey, metaKey } = ev;
   const commandKey = get(window, 'platform') === 'darwin' && metaKey;
   const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;