diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index f6c63c38d..9f22ae2d0 100644 --- a/ts/components/Lightbox.tsx +++ b/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 - ) => { - if (isViewOnce) { - return; - } + const handleSave = useCallback( + ( + event: KeyboardEvent | React.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 @@ -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) => { diff --git a/ts/hooks/useKeyboardShortcuts.tsx b/ts/hooks/useKeyboardShortcuts.tsx index f32fb6942..5c81e26cd 100644 --- a/ts/hooks/useKeyboardShortcuts.tsx +++ b/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;