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,8 +161,9 @@ export function Lightbox({
     setVideoTime(videoElement.currentTime);
   }, [setVideoTime, videoElement]);
 
-  const handleSave = (
+  const handleSave = useCallback(
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+    (
+      event: KeyboardEvent | React.MouseEvent<HTMLButtonElement, MouseEvent>
     ) => {
       if (isViewOnce) {
         return;
@@ -174,7 +176,9 @@ export function Lightbox({
       const { attachment, message, index } = mediaItem;
 
       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;