(feat: add keyboard shortcuts for media previews)

langgenius · Dec 9, 2024 · c9f11ce · c9f11ce
1 parent 44019a5
commit c9f11ce
Show file tree

Hide file tree

Showing 5 changed files with 782 additions and 734 deletions.
diff --git a/web/app/components/base/file-uploader/audio-preview.tsx b/web/app/components/base/file-uploader/audio-preview.tsx
@@ -15,7 +15,7 @@ const AudioPreview: FC<AudioPreviewProps> = ({
   onCancel,
 }) => {
   useKeyboardShortcuts({
-      esc: onCancel
+    esc: onCancel,
   })
 
   return createPortal(

diff --git a/web/app/components/base/file-uploader/pdf-preview.tsx b/web/app/components/base/file-uploader/pdf-preview.tsx
@@ -52,12 +52,12 @@ const PdfPreview: FC<PdfPreviewProps> = ({
       tabIndex={-1}
     >
       <div
-          className='h-[95vh] w-[100vw] max-w-full max-h-full overflow-hidden'
-          style={{ transform: `scale(${scale})`, transformOrigin: 'center', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        className='h-[95vh] w-[100vw] max-w-full max-h-full overflow-hidden'
+        style={{ transform: `scale(${scale})`, transformOrigin: 'center', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
       >
         <PdfLoader
-            url={url}
-            beforeLoad={<div className='flex justify-center items-center h-64'><Loading type='app' /></div>}
+          url={url}
+          beforeLoad={<div className='flex justify-center items-center h-64'><Loading type='app' /></div>}
         >
           {(pdfDocument) => {
             return (

diff --git a/web/app/components/base/image-uploader/image-preview.tsx b/web/app/components/base/image-uploader/image-preview.tsx
@@ -194,11 +194,11 @@ const ImagePreview: FC<ImagePreviewProps> = ({
   }, [handleMouseUp])
 
   useKeyboardShortcuts({
-      esc: onCancel,
-      up: zoomIn,
-      down: zoomOut,
-      left: onPrev ? onPrev : () => {},
-      right: onNext ? onNext : () => {},
+    esc: onCancel,
+    up: zoomIn,
+    down: zoomOut,
+    left: onPrev || (() => {}),
+    right: onNext || (() => {}),
   })
 
   return createPortal(

diff --git a/web/hooks/use-keyboard-short.ts b/web/hooks/use-keyboard-short.ts
@@ -1,9 +1,8 @@
 import { useHotkeys } from 'react-hotkeys-hook'
 
-
 export function useKeyboardShortcuts(shortcuts: { [x: string]: any }) {
-  Object.keys(shortcuts).forEach(key => {
+  Object.keys(shortcuts).forEach((key) => {
     const action = shortcuts[key]
     useHotkeys(key, action)
   })
-}
+}