update book viewer auto play

src/pages/viewer/components/BookPage.tsx

@@ -8,6 +8,9 @@ type BookPageProps = {
   pageWidth?: number;
   pageHeight?: number;
   onLinkClick?: (linkUrl: string) => void;
+  backgroundType?: 'color' | 'image';
+  backgroundColor?: string;
+  backgroundImageUrl?: string;
 };
 
 /**
@@ -18,7 +21,7 @@ type BookPageProps = {
  * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
  */
 const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
-  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick }, ref) => {
+  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType = 'color', backgroundColor = '#ffffff', backgroundImageUrl = '' }, ref) => {
     // تابع برای تبدیل opacity به رنگ (مثل editor)
     // در editor، getColorWithOpacity انتظار opacity 0-100 دارد
     // در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
@@ -477,6 +480,16 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
     const width = pageWidth ?? 794 * scale;
     const height = pageHeight ?? 1123 * scale;
 
+    const bgStyle: React.CSSProperties =
+      backgroundType === 'image' && backgroundImageUrl
+        ? {
+            backgroundImage: `url(${backgroundImageUrl})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+          }
+        : { backgroundColor: backgroundColor || '#ffffff' };
+
     return (
       <div
         ref={ref}
@@ -485,7 +498,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
         data-density="soft"
         style={{
           position: 'relative',
-          backgroundColor: '#ffffff',
+          ...bgStyle,
           overflow: 'hidden',
           boxSizing: 'border-box',
           width: `${width}px`,