diff --git a/js/desktop/src/features/particles/stream-view.tsx b/js/desktop/src/features/particles/stream-view.tsx index 4f10acb..2352f7d 100644 --- a/js/desktop/src/features/particles/stream-view.tsx +++ b/js/desktop/src/features/particles/stream-view.tsx @@ -260,12 +260,17 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) { const { fastPlayback } = usePlaybackKeys({ mediaRef }); + const handleExitNavigate = useCallback(() => { + navigate(`/${networkId}`); + }, [navigate, networkId]); + useStreamNavigationKeys({ next, prev, currentIndex, childrenLength: children.length, mediaRef, + onExit: handleExitNavigate, }); const handleOpenHuddle = useCallback(() => { @@ -326,10 +331,6 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) { // Always show controls when compose is active or exit countdown is visible const controlsVisible = showControls || composeActive || status === 'ended'; - const handleExitNavigate = useCallback(() => { - navigate(`/${networkId}`); - }, [navigate, networkId]); - const exitRemainingMs = useExitCountdown(status, paused, handleExitNavigate); // Reset progress when the particle changes. @@ -364,6 +365,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) { showEscape onOpenKeybindings={() => setShowKeybindings(true)} onOpenHuddle={handleOpenHuddle} + onExit={handleExitNavigate} /> setShowKeybindings(true)} onOpenHuddle={handleOpenHuddle} + onExit={handleExitNavigate} /> void; onOpenHuddle: () => void; + onExit: () => void; }) { return (
@@ -597,19 +603,20 @@ function StreamViewControls({ showEscape, onOpenKeybindings, onOpenHuddle, + onExit, }: { showEscape?: boolean; onOpenKeybindings: () => void; onOpenHuddle: () => void; + onExit: () => void; }) { - const navigate = useNavigate(); const requestIntent = useComposeIntentStore((s) => s.request); return (
{showEscape && ( navigate(-1)} + onClick={onExit} title="Back to network (or press Esc)" > back diff --git a/js/desktop/src/hooks/use-stream-navigation-keys.ts b/js/desktop/src/hooks/use-stream-navigation-keys.ts index 93bab12..e90209f 100644 --- a/js/desktop/src/hooks/use-stream-navigation-keys.ts +++ b/js/desktop/src/hooks/use-stream-navigation-keys.ts @@ -1,5 +1,4 @@ import { useEffect, type RefObject } from 'react'; -import { useNavigate } from 'react-router-dom'; import type { MediaParticleHandle } from '@/features/particles/media-particle-view'; import { isTypingTarget } from '@/lib/keyboard'; @@ -11,6 +10,7 @@ interface UseStreamNavigationKeysOptions { currentIndex: number; childrenLength: number; mediaRef: RefObject; + onExit: () => void; } /** @@ -23,9 +23,8 @@ export function useStreamNavigationKeys({ currentIndex, childrenLength, mediaRef, + onExit, }: UseStreamNavigationKeysOptions) { - const navigate = useNavigate(); - useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (isTypingTarget(e)) return; @@ -53,12 +52,12 @@ export function useStreamNavigationKeys({ break; case 'Escape': e.preventDefault(); - navigate(-1); + onExit(); break; } }; window.addEventListener('keydown', onKeyDown); return () => window.removeEventListener('keydown', onKeyDown); - }, [next, prev, currentIndex, childrenLength, mediaRef, navigate]); + }, [next, prev, currentIndex, childrenLength, mediaRef, onExit]); }