diff --git a/src/widgets/shared/useAutoOpenTimer.ts b/src/widgets/shared/useAutoOpenTimer.ts new file mode 100644 index 0000000..1eb839e --- /dev/null +++ b/src/widgets/shared/useAutoOpenTimer.ts @@ -0,0 +1,18 @@ +import { useEffect, useState } from "react"; + + +export function useAutoOpenTimer(autoOpenTime: number) { + const [isWidgetHidden, setIsWidgetHidden] = useState(autoOpenTime ? true : false); + + useEffect(function setAutoOpenTimer() { + if (!autoOpenTime) return; + + const timeout = setTimeout(() => setIsWidgetHidden(false), autoOpenTime * 1000); + + return () => { + clearTimeout(timeout); + }; + }, [autoOpenTime]); + + return isWidgetHidden; +} diff --git a/src/widgets/side/QuizSideButton.tsx b/src/widgets/side/QuizSideButton.tsx index 6ea447c..8aa1aea 100644 --- a/src/widgets/side/QuizSideButton.tsx +++ b/src/widgets/side/QuizSideButton.tsx @@ -1,9 +1,10 @@ import lightTheme from "@/utils/themes/light"; -import { Button, ThemeProvider, useMediaQuery } from "@mui/material"; +import { Button, Fade, ThemeProvider, useMediaQuery } from "@mui/material"; import { useState } from "react"; import { createPortal } from "react-dom"; import QuizDialog from "../shared/QuizDialog"; import RunningStripe from "../shared/RunningStripe"; +import { useAutoOpenTimer } from "../shared/useAutoOpenTimer"; import { useQuizCompletionStatus } from "../shared/useQuizCompletionStatus"; @@ -19,6 +20,8 @@ interface Props { dimensions?: { width: string; height: string; }; fullScreen?: boolean; buttonFlash?: boolean; + autoOpenTime?: number; + hideOnMobile?: boolean; } export default function QuizSideButton({ @@ -29,17 +32,22 @@ export default function QuizSideButton({ dimensions, fullScreen = false, buttonFlash = false, + autoOpenTime = 0, + hideOnMobile = false, }: Props) { const [isQuizShown, setIsQuizShown] = useState(false); const isMobile = useMediaQuery("(max-width: 600px)"); const isQuizCompleted = useQuizCompletionStatus(quizId); const [isFlashEnabled, setIsFlashEnabled] = useState(buttonFlash); + const isWidgetHidden = useAutoOpenTimer(autoOpenTime); function openQuiz() { setIsQuizShown(true); setIsFlashEnabled(false); } + if (hideOnMobile && isMobile) return null; + return createPortal( - + + + , document.body );