side widget: add quiz auto open timer

src/widgets/side/QuizSideButton.tsx

@@ -1,6 +1,6 @@
 import lightTheme from "@/utils/themes/light";
 import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import QuizDialog from "../shared/QuizDialog";
 import RunningStripe from "../shared/RunningStripe";
@@ -20,7 +20,14 @@ interface Props {
     dimensions?: { width: string; height: string; };
     fullScreen?: boolean;
     buttonFlash?: boolean;
+    /**
+     * Скрывать виджет первые X секунд
+     */
     autoOpenTime?: number;
+    /**
+     * Открыть квиз через X секунд
+     */
+    autoShowQuizTime?: number;
     hideOnMobile?: boolean;
 }
 
@@ -33,6 +40,7 @@ export default function QuizSideButton({
     fullScreen = false,
     buttonFlash = false,
     autoOpenTime = 0,
+    autoShowQuizTime = 0,
     hideOnMobile = false,
 }: Props) {
     const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
@@ -40,8 +48,22 @@ export default function QuizSideButton({
     const isQuizCompleted = useQuizCompletionStatus(quizId);
     const [isFlashEnabled, setIsFlashEnabled] = useState<boolean>(buttonFlash);
     const isWidgetHidden = useAutoOpenTimer(autoOpenTime);
+    const preventQuizAutoShowRef = useRef<boolean>(false);
+
+    useEffect(function setAutoShowQuizTimer() {
+        if (!autoShowQuizTime) return;
+
+        const timeout = setTimeout(() => {
+            if (!preventQuizAutoShowRef.current) setIsQuizShown(true);
+        }, autoShowQuizTime * 1000);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [autoShowQuizTime]);
 
     function openQuiz() {
+        preventQuizAutoShowRef.current = true;
         setIsQuizShown(true);
         setIsFlashEnabled(false);
     }