can manage auto pay in book viewer

src/pages/viewer/components/BookViewer.tsx

@@ -2,7 +2,7 @@ import { type FC, useRef, useCallback, useState, useEffect, useLayoutEffect, use
 import HTMLFlipBook from 'react-pageflip';
 import { type PageData } from '../types';
 import BookPage from './BookPage';
-import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import { ArrowLeft2, ArrowRight2, Pause, Play } from 'iconsax-react';
 import { getPaperDimensions } from '@/config/paperSizes';
 import type { DocumentSettings } from '@/pages/editor/store/editorStore';
 
@@ -61,6 +61,27 @@ type PageFlipWithFlipController = PageFlipAPI & {
     getFlipController: () => { flip: (p: { x: number; y: number }) => void };
 };
 
+type AutoPlayToggleButtonProps = {
+    isActive: boolean;
+    onToggle: () => void;
+};
+
+const AutoPlayToggleButton: FC<AutoPlayToggleButtonProps> = ({ isActive, onToggle }) => (
+    <button
+        type="button"
+        onClick={onToggle}
+        className="px-3 py-1.5 text-xs md:text-sm font-medium inline-flex items-center justify-center gap-1.5 rounded-full border border-gray-300 hover:bg-gray-100 active:bg-gray-200 transition-all"
+        aria-label={isActive ? 'توقف پخش خودکار' : 'شروع پخش خودکار'}
+    >
+        {isActive ? (
+            <Pause color='black' size={16} className="text-gray-700 md:w-[18px] md:h-[18px]" />
+        ) : (
+            <Play color='black' size={16} className="text-gray-700 md:w-[18px] md:h-[18px]" />
+        )}
+        <span>{isActive ? 'توقف پخش' : 'پخش خودکار'}</span>
+    </button>
+);
+
 /**
  * page-flip داخل flipPrev با x=10 ثابت می‌زند؛ با disableFlipByClick آزمایش گوشه رد می‌شود
  * (چون bookPos.x = 10 - rect.left معمولاً ≤ 0). flipNext همان rect.left را جمع می‌کند.
@@ -84,7 +105,7 @@ function triggerFlipPrev(api: PageFlipWithFlipController | undefined) {
  */
 const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings }) => {
     const bookRef = useRef<FlipBookInstance | null>(null);
-    const pageFlipHandlerRef = useRef<(e: FlipEvent) => void>(() => {});
+    const pageFlipHandlerRef = useRef<(e: FlipEvent) => void>(() => { });
     const [currentPage, setCurrentPage] = useState(0);
     const [isAutoPlayActive, setIsAutoPlayActive] = useState(false);
     const [startPage, setStartPage] = useState(0);
@@ -290,6 +311,11 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
         }
     }, [isAutoPlayActive]);
 
+    const toggleAutoPlay = useCallback(() => {
+        if (pages.length <= 1) return;
+        setIsAutoPlayActive(prev => !prev);
+    }, [pages.length]);
+
     const handleLinkClick = useCallback((linkUrl: string) => {
         if (pages.length <= 1) return;
         if (linkUrl.startsWith('page://')) {
@@ -495,6 +521,8 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                     </span>
                 </div>
 
+
+
                 {hasMultiplePages && (
                     <>
                         {/* دکمه چپ: فارسی = صفحه قبل | لاتین = صفحه بعد */}
@@ -516,6 +544,10 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                         </button>
                     </>
                 )}
+
+                {hasMultiplePages && autoPlay && (
+                    <AutoPlayToggleButton isActive={isAutoPlayActive} onToggle={toggleAutoPlay} />
+                )}
             </div>
         </div>
     );