From 0bef54c51c6a58df66677d5ddab836fee65bc7e4 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 1 Jul 2026 11:20:55 +0330
Subject: [PATCH] pages list in editor

---
 .../catalogue/components/CatalogPreview.tsx   |  2 +-
 src/pages/viewer/components/BookPage.tsx      | 61 +++++++++++++++++--
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/src/pages/catalogue/components/CatalogPreview.tsx b/src/pages/catalogue/components/CatalogPreview.tsx
index 187e3f2..c1cacab 100644
--- a/src/pages/catalogue/components/CatalogPreview.tsx
+++ b/src/pages/catalogue/components/CatalogPreview.tsx
@@ -90,7 +90,7 @@ const CatalogPreview: FC<Props> = ({ item, page, size, className, selected }) =>
           height: pageHeight,
         }}
       >
-        <BookPage page={firstPage} scale={1} pageWidth={pageWidth} pageHeight={pageHeight} disableEntranceAnimations showPaperShadow={false} />
+        <BookPage page={firstPage} scale={1} pageWidth={pageWidth} pageHeight={pageHeight} disableEntranceAnimations staticMedia showPaperShadow={false} />
       </div>
     </div>
   );
diff --git a/src/pages/viewer/components/BookPage.tsx b/src/pages/viewer/components/BookPage.tsx
index 6deea19..278544e 100644
--- a/src/pages/viewer/components/BookPage.tsx
+++ b/src/pages/viewer/components/BookPage.tsx
@@ -38,6 +38,8 @@ const getRasterObjectStyle = (
 
 type RenderObjectOptions = {
   skipEntrance?: boolean;
+  /** در پیش‌نمایش (لیست صفحات و کاتالوگ) رسانه تعاملی نباشد */
+  staticMedia?: boolean;
 };
 
 type BookPageProps = {
@@ -56,8 +58,10 @@ type BookPageProps = {
   backgroundImageUrl?: string;
   /** فاز انیمیشن ورود — از BookViewer کنترل می‌شود */
   entrancePhase?: EntrancePhase;
-  /** در پیش‌نمایش کاتالوگ انیمیشن ورود غیرفعال باشد */
+  /** در پیش‌نمایش کاتالوگ انیمی션 ورود غیرفعال باشد */
   disableEntranceAnimations?: boolean;
+  /** ویدیو/صوت فقط به‌صورت کاور — بدون کنترل و بدون کلیک */
+  staticMedia?: boolean;
   /** سایهٔ لبهٔ کاغذ (گرادیان داخل DOM — سازگار با iOS قدیمی) */
   showPaperShadow?: boolean;
   /** ورق سخت به‌جای clip-path برای iOS قدیمی */
@@ -78,7 +82,7 @@ type BookPageProps = {
  * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
  */
 const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
-  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false, showPaperShadow = true, useHardPage = false, idSuffix = '' }, ref) => {
+  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false, staticMedia = false, showPaperShadow = true, useHardPage = false, idSuffix = '' }, ref) => {
     const phase: EntrancePhase = disableEntranceAnimations ? 'settled' : entrancePhase;
     // تابع برای تبدیل opacity به رنگ (مثل editor)
     // در editor، getColorWithOpacity انتظار opacity 0-100 دارد
@@ -243,6 +247,35 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
           );
 
         case 'video':
+          if (options.staticMedia) {
+            return (
+              <video
+                key={obj.id || index}
+                src={obj.videoUrl || ''}
+                muted
+                playsInline
+                preload="metadata"
+                style={applyStyle(
+                  {
+                    ...baseStyle,
+                    width: obj.width ? `${obj.width * scale}px` : 'auto',
+                    height: obj.height ? `${obj.height * scale}px` : 'auto',
+                    objectFit: 'contain',
+                    zIndex: index,
+                    pointerEvents: 'none',
+                  },
+                  obj,
+                  index,
+                )}
+                onLoadedMetadata={(e) => {
+                  const video = e.currentTarget;
+                  if (video.currentTime === 0) {
+                    video.currentTime = 0.1;
+                  }
+                }}
+              />
+            );
+          }
           return (
             <video
               key={obj.id || index}
@@ -273,6 +306,26 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
           );
 
         case 'audio':
+          if (options.staticMedia) {
+            return (
+              <div
+                key={obj.id || index}
+                style={applyStyle(
+                  {
+                    ...baseStyle,
+                    width: obj.width ? `${obj.width * scale}px` : `${320 * scale}px`,
+                    height: obj.height ? `${obj.height * scale}px` : `${56 * scale}px`,
+                    backgroundColor: '#f3f4f6',
+                    borderRadius: `${4 * scale}px`,
+                    zIndex: index,
+                    pointerEvents: 'none',
+                  },
+                  obj,
+                  index,
+                )}
+              />
+            );
+          }
           return (
             <audio
               key={obj.id || index}
@@ -837,7 +890,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
         : null;
 
       if (!maskShape) {
-        return renderObjectContent(obj, index);
+        return renderObjectContent(obj, index, { staticMedia });
       }
 
       const layout = getMaskedLayout(obj, maskShape, scale);
@@ -847,7 +900,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
       const content = renderObjectContent(
         { ...obj, x: (obj.x || 0) - unionLeft, y: (obj.y || 0) - unionTop },
         index,
-        { skipEntrance: true },
+        { skipEntrance: true, staticMedia },
       );
 
       if (!content) return null;