This commit is contained in:
Arjun Patel
2026-06-11 10:44:59 -07:00
parent dd850d28d1
commit 1cf144bce3
2 changed files with 17 additions and 11 deletions
@@ -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}
/>
<ComposeOverlay
networkId={networkId}
@@ -508,6 +510,7 @@ function StreamViewInner({ path, streamParticle }: StreamViewProps) {
exitRemainingMs={exitRemainingMs}
onOpenKeybindings={() => setShowKeybindings(true)}
onOpenHuddle={handleOpenHuddle}
onExit={handleExitNavigate}
/>
<KeybindingsOverlay
@@ -531,6 +534,7 @@ function BottomBar({
exitRemainingMs,
onOpenKeybindings,
onOpenHuddle,
onExit,
}: {
visible: boolean;
total: number;
@@ -545,6 +549,7 @@ function BottomBar({
exitRemainingMs: number | null;
onOpenKeybindings: () => void;
onOpenHuddle: () => void;
onExit: () => void;
}) {
return (
<div
@@ -586,6 +591,7 @@ function BottomBar({
showEscape
onOpenKeybindings={onOpenKeybindings}
onOpenHuddle={onOpenHuddle}
onExit={onExit}
/>
</div>
</div>
@@ -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 (
<div className="flex items-center gap-4 text-sm text-white/50">
{showEscape && (
<KeyHint
keys="Esc"
onClick={() => navigate(-1)}
onClick={onExit}
title="Back to network (or press Esc)"
>
back
@@ -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<MediaParticleHandle | null>;
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]);
}