diff --git a/src/components/player/atoms/TIDBSubmissionSuccessPopout.tsx b/src/components/player/atoms/TIDBSubmissionSuccessPopout.tsx index 83f241dd..cf166ddb 100644 --- a/src/components/player/atoms/TIDBSubmissionSuccessPopout.tsx +++ b/src/components/player/atoms/TIDBSubmissionSuccessPopout.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; import { Icon, Icons } from "@/components/Icon"; @@ -8,6 +9,29 @@ import { useOverlayStack } from "@/stores/interface/overlayStack"; export function TIDBSubmissionSuccessPopout() { const { t } = useTranslation(); const currentOverlay = useOverlayStack((s) => s.currentOverlay); + const setCurrentOverlay = useOverlayStack((s) => s.setCurrentOverlay); + const timeoutRef = useRef | undefined>(); + + useEffect(() => { + if (currentOverlay === "tidb-submission-success") { + // Clear any existing timeout + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + + // Auto-dismiss after 3 seconds (same as volume popout) + timeoutRef.current = setTimeout(() => { + setCurrentOverlay(null); + }, 3e3); + } + + // Cleanup timeout on unmount or when overlay changes + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }; + }, [currentOverlay, setCurrentOverlay]); return (