diff --git a/js/src/features/particles/stream-view.tsx b/js/src/features/particles/stream-view.tsx index fb7a293..8fd88e7 100644 --- a/js/src/features/particles/stream-view.tsx +++ b/js/src/features/particles/stream-view.tsx @@ -100,7 +100,7 @@ function useExitCountdown( composeActive: boolean, onExit: () => void, ) { - const [exitProgress, setExitProgress] = useState(null); + const [remainingMs, setRemainingMs] = useState(null); const handleExit = useEffectEvent(() => { onExit(); @@ -109,35 +109,35 @@ function useExitCountdown( // Start/cancel countdown based on playback status useEffect(() => { if (status === "ended") { - setExitProgress(0); + setRemainingMs(EXIT_DELAY_MS); } else { - setExitProgress(null); + setRemainingMs(null); } }, [status]); - // Tick the countdown forward (pauses when compose is active) + // Tick the countdown down (pauses when compose is active) useEffect(() => { - if (exitProgress === null || composeActive) return; + if (remainingMs === null || remainingMs <= 0 || composeActive) return; const interval = setInterval(() => { - setExitProgress((prev) => { + setRemainingMs((prev) => { if (prev === null) return null; - const next = prev + EXIT_TICK_MS / EXIT_DELAY_MS; - return next >= 1 ? 1 : next; + const next = prev - EXIT_TICK_MS; + return next <= 0 ? 0 : next; }); }, EXIT_TICK_MS); return () => clearInterval(interval); - }, [exitProgress !== null, composeActive]); + }, [remainingMs !== null && remainingMs > 0, composeActive]); - // Navigate once countdown completes + // Navigate once countdown hits zero useEffect(() => { - if (exitProgress !== null && exitProgress >= 1) { + if (remainingMs !== null && remainingMs <= 0) { handleExit(); } - }, [exitProgress]); + }, [remainingMs]); - return exitProgress; + return remainingMs; } // --- StreamView --- @@ -161,7 +161,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) { navigate(`/${networkId}`); }, [navigate, networkId]); - const exitProgress = useExitCountdown( + const exitRemainingMs = useExitCountdown( state.status, composeActive, handleExitNavigate, @@ -336,7 +336,6 @@ export function StreamView({ path, streamParticle }: StreamViewProps) { current={state.currentIndex} progress={progress} onGoTo={goTo} - exitProgress={exitProgress} /> @@ -372,6 +371,15 @@ export function StreamView({ path, streamParticle }: StreamViewProps) { onActiveChange={setComposeActive} /> + {/* Exit countdown */} + {exitRemainingMs !== null && ( +
+ + Closing in {Math.ceil(exitRemainingMs / 1000)}s + +
+ )} + {/* Bottom overlay: stream info + reply */}
diff --git a/js/src/features/playback/playback-page-indicator.tsx b/js/src/features/playback/playback-page-indicator.tsx index 21b8e91..3246fe2 100644 --- a/js/src/features/playback/playback-page-indicator.tsx +++ b/js/src/features/playback/playback-page-indicator.tsx @@ -5,7 +5,6 @@ interface PlaybackPageIndicatorProps { current: number; progress: number; onGoTo: (index: number) => void; - exitProgress?: number | null; } export function PlaybackPageIndicator({ @@ -13,7 +12,6 @@ export function PlaybackPageIndicator({ current, progress, onGoTo, - exitProgress, }: PlaybackPageIndicatorProps) { if (total === 0) return null; @@ -53,26 +51,6 @@ export function PlaybackPageIndicator({ /> ))} - - {/* Exit countdown segment */} - {exitProgress != null && ( -
-
-
-
- )}
); }