cover

src/pages/catalogue/components/CatalogPreview.tsx

@@ -1,18 +1,12 @@
 import { type FC, useMemo } from 'react'
 import BookPage from '@/pages/viewer/components/BookPage'
 import { transformViewerDataToPages } from '@/pages/viewer/utils/dataTransformer'
+import { getPaperDimensions } from '@/config/paperSizes'
 import type { CatalogItemType } from '../types/Types'
 import type { PageData } from '@/pages/viewer/types'
 
 const PREVIEW_WIDTH = 64
 const PREVIEW_HEIGHT = 89
-const PAGE_BASE_WIDTH = 794
-const PAGE_BASE_HEIGHT = 1123
-
-const PREVIEW_SCALE = Math.min(
-  PREVIEW_WIDTH / PAGE_BASE_WIDTH,
-  PREVIEW_HEIGHT / PAGE_BASE_HEIGHT
-)
 
 function getFirstPageFromContent(content: string | undefined): PageData | null {
   if (!content) return null
@@ -36,6 +30,16 @@ const CatalogPreview: FC<Props> = ({ item }) => {
     [item.content]
   )
 
+  const { pageWidth, pageHeight, previewScale } = useMemo(() => {
+    const { width, height } = getPaperDimensions(item.size ?? 'a4')
+    const scale = Math.min(PREVIEW_WIDTH / width, PREVIEW_HEIGHT / height)
+    return {
+      pageWidth: width,
+      pageHeight: height,
+      previewScale: scale,
+    }
+  }, [item.size])
+
   if (!firstPage) {
     return (
       <div
@@ -58,17 +62,17 @@ const CatalogPreview: FC<Props> = ({ item }) => {
         style={{
           top: 0,
           right: 0,
-          transform: `scale(${PREVIEW_SCALE})`,
+          transform: `scale(${previewScale})`,
           transformOrigin: 'top right',
-          width: PAGE_BASE_WIDTH,
-          height: PAGE_BASE_HEIGHT,
+          width: pageWidth,
+          height: pageHeight,
         }}
       >
         <BookPage
           page={firstPage}
           scale={1}
-          pageWidth={PAGE_BASE_WIDTH}
-          pageHeight={PAGE_BASE_HEIGHT}
+          pageWidth={pageWidth}
+          pageHeight={pageHeight}
         />
       </div>
     </div>