refactor: extract various constants

frontend/src/preview/DocumentViewerLayout.tsx

@@ -3,6 +3,7 @@ import type { JSX } from 'react';
 import DocumentInfoPanel from '../documents/DocumentInfoPanel';
 import { DownloadIcon } from '../ui/icons';
 import PdfViewer from './PdfViewer';
+import { AUDIO_EXTENSIONS, VIDEO_EXTENSIONS } from '../constants/preview';
 
 interface DocumentLike {
   id?: string;
@@ -48,29 +49,6 @@ interface DocumentViewerLayoutProps {
   layoutMode?: LayoutMode;
 }
 
-const AUDIO_EXTENSIONS = new Set([
-  'aac',
-  'aiff',
-  'flac',
-  'm4a',
-  'mp3',
-  'ogg',
-  'oga',
-  'opus',
-  'wav',
-  'weba',
-]);
-
-const VIDEO_EXTENSIONS = new Set([
-  'avi',
-  'mkv',
-  'mov',
-  'mp4',
-  'm4v',
-  'webm',
-  'wmv',
-]);
-
 const getFileExtension = (filename?: string | null) => {
   if (!filename) {
     return '';

frontend/src/preview/PdfViewer.tsx

@@ -17,6 +17,13 @@ import type {
   PDFDocumentProxy,
   RenderTask,
 } from 'pdfjs-dist/types/src/display/api';
+import {
+  FAST_SCROLL_DWELL_THRESHOLD_MS,
+  FAST_SCROLL_VELOCITY_THRESHOLD,
+  MAX_PIXEL_RATIO,
+  RERENDER_DELTA,
+  SCROLL_VELOCITY_MIN_DELTA,
+} from '../constants/preview';
 GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
   import.meta.url,
@@ -45,12 +52,6 @@ interface RenderQueueRequest {
   cancel: () => void;
 }
 
-const RERENDER_DELTA = 48;
-const MAX_PIXEL_RATIO = 2;
-const FAST_SCROLL_VELOCITY_THRESHOLD = 0.8; // px/ms ~ 800px/s
-const FAST_SCROLL_DWELL_THRESHOLD_MS = 120;
-const SCROLL_VELOCITY_MIN_DELTA = 0.05;
-
 const getAvailableViewportSize = (viewportNode: Element, stackNode: Element) => {
   const viewportStyle = window.getComputedStyle(viewportNode);
   const viewportPaddingX = parseFloat(viewportStyle.paddingLeft || '0')

frontend/src/preview/useViewerLayoutMode.ts

@@ -1,7 +1,11 @@
 import { MutableRefObject, useLayoutEffect, useState } from 'react';
+import {
+  DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO,
+  MIN_STACKED_BREAKPOINT,
+  PORTRAIT_RATIO_STYLE_ID,
+} from '../constants/preview';
 
-export const DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO = 0.4;
-const PORTRAIT_RATIO_STYLE_ID = 'document-viewer-portrait-ratio-style';
+export { DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO };
 
 const ensurePortraitRatioStyle = () => {
   const cssValue = String(DOCUMENT_VIEWER_PORTRAIT_HEIGHT_RATIO);
@@ -19,8 +23,6 @@ const ensurePortraitRatioStyle = () => {
   }
 };
 
-const MIN_STACKED_BREAKPOINT = 480;
-
 const computeStackedLayoutBreakpoint = () => Math.max(window.innerWidth / 2, MIN_STACKED_BREAKPOINT);
 
 export const useViewerLayoutMode = (