583 lines
19 KiB
TypeScript
583 lines
19 KiB
TypeScript
import { useState, useEffect, useEffectEvent, useCallback, useRef } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { useAuthStore } from "@/stores/auth-store";
|
||
import { apiClient } from "@/api/client";
|
||
import { isParticleDeleted, type Particle } from "@/api/types";
|
||
import { parseParticlePath, particlePath, toFirestoreDocPath, type ParticlePath } from "@/lib/particle-path";
|
||
import { ComposeOverlay, type ComposeStep } from "@/features/compose/compose-overlay";
|
||
import { useComposeIntentStore } from "@/stores/compose-intent-store";
|
||
import { PlaybackPageIndicator } from "@/features/particles/playback-page-indicator";
|
||
import { MediaParticleView, type MediaParticleHandle } from "@/features/particles/media-particle-view";
|
||
import { TextParticleView } from "@/features/particles/text-particle-view";
|
||
import { FallbackParticleView } from "@/features/particles/fallback-particle-view";
|
||
import { DeletedParticleView } from "@/features/particles/deleted-particle-view";
|
||
import { VideoAudioToggle } from "@/components/video-audio-toggle";
|
||
import { useMediaSettingsStore } from "@/stores/media-settings-store";
|
||
import { KeybindingsOverlay, type KeybindingGroup } from "@/components/keybindings-overlay";
|
||
import { useNetwork } from "@/hooks/use-networks";
|
||
import { toggleParticleReaction } from "@/lib/firestore-particles";
|
||
import { ReactionBar } from "@/features/particles/reaction-bar";
|
||
import { TextReactionInput } from "@/features/particles/text-reaction-input";
|
||
import { TopBar } from "@/features/particles/stream-top-bar";
|
||
import { useStreamPlayback } from "@/hooks/use-stream-playback";
|
||
import { usePrefetchAdjacentMedia } from "@/hooks/use-prefetch-adjacent-media";
|
||
import { usePresencePositions } from "@/hooks/use-presence-positions";
|
||
import { StreamPresenceProvider, useStreamPresence, useStreamComposing, useStreamComposingBroadcast, type ComposingMode } from "@/features/particles/stream-presence-context";
|
||
import { ComposingIndicator } from "@/components/composing-indicator";
|
||
import { cn } from "@/lib/utils";
|
||
import { useMount } from "react-use";
|
||
import { usePlaybackPauseStore, selectIsPaused } from "@/stores/playback-pause-store";
|
||
import { usePlaybackKeys } from "@/hooks/use-playback-keys";
|
||
import { useStreamNavigationKeys } from "@/hooks/use-stream-navigation-keys";
|
||
import { useStreamActionKeys } from "@/hooks/use-stream-action-keys";
|
||
import { platform } from "@/lib/platform";
|
||
import { requireDesktop } from "@/lib/platform/desktop-only";
|
||
|
||
function getReactions(particle: Particle): Record<string, string[]> | undefined {
|
||
if (isParticleDeleted(particle)) return undefined;
|
||
if (particle.type === "media" || particle.type === "text") return particle.reactions;
|
||
return undefined;
|
||
}
|
||
|
||
// --- Exit countdown hook ---
|
||
|
||
const EXIT_DELAY_MS = 5000;
|
||
const EXIT_TICK_MS = 100;
|
||
|
||
type PlaybackStatus = "idle" | "playing" | "ended";
|
||
|
||
function useExitCountdown(
|
||
status: PlaybackStatus,
|
||
disabled: boolean,
|
||
onExit: () => void,
|
||
) {
|
||
const [remainingMs, setRemainingMs] = useState<number | null>(null);
|
||
|
||
const handleExit = useEffectEvent(() => {
|
||
onExit();
|
||
});
|
||
|
||
// Start/cancel countdown based on playback status
|
||
useEffect(() => {
|
||
if (status === "ended") {
|
||
setRemainingMs(EXIT_DELAY_MS);
|
||
} else {
|
||
setRemainingMs(null);
|
||
}
|
||
}, [status]);
|
||
|
||
// Tick the countdown down (pauses when compose is active)
|
||
useEffect(() => {
|
||
if (remainingMs === null || remainingMs <= 0 || disabled) return;
|
||
|
||
const interval = setInterval(() => {
|
||
setRemainingMs((prev) => {
|
||
if (prev === null) return null;
|
||
const next = prev - EXIT_TICK_MS;
|
||
return next <= 0 ? 0 : next;
|
||
});
|
||
}, EXIT_TICK_MS);
|
||
|
||
return () => clearInterval(interval);
|
||
}, [remainingMs !== null && remainingMs > 0, disabled]);
|
||
|
||
// Navigate once countdown hits zero
|
||
useEffect(() => {
|
||
if (remainingMs !== null && remainingMs <= 0) {
|
||
handleExit();
|
||
}
|
||
}, [remainingMs]);
|
||
|
||
return remainingMs;
|
||
}
|
||
|
||
// --- Keybindings ---
|
||
|
||
const STREAM_VIEW_KEYBINDINGS: KeybindingGroup[] = [
|
||
{
|
||
label: "Navigation",
|
||
bindings: [
|
||
{ keys: ["←", "→", "↑", "↓"], description: "Previous / next particle" },
|
||
{ keys: ["Esc"], description: "Back to network" },
|
||
],
|
||
},
|
||
{
|
||
label: "Playback",
|
||
bindings: [
|
||
{ keys: ["Space"], description: "Toggle pause" },
|
||
{ keys: ["Hold", "Space"], description: "Pause while held" },
|
||
{ keys: ["Hold", "Shift"], description: "1.5× speed" },
|
||
{ keys: ["Shift", "←", "→"], description: "Seek ±5s" },
|
||
],
|
||
},
|
||
{
|
||
label: "Compose",
|
||
bindings: [
|
||
{ keys: ["Hold", "`"], description: "Reply" },
|
||
{ keys: ["S"], description: "Screen record" },
|
||
{ keys: ["T"], description: "Text compose" },
|
||
{ keys: ["V"], description: "Toggle video / audio" },
|
||
{ keys: ["H"], description: "Join huddle" },
|
||
],
|
||
},
|
||
{
|
||
label: "Reactions",
|
||
bindings: [
|
||
{ keys: ["1-7"], description: "Toggle emoji reaction" },
|
||
{ keys: ["R"], description: "Quick text reply" },
|
||
],
|
||
},
|
||
];
|
||
|
||
// --- StreamView ---
|
||
|
||
interface StreamViewProps {
|
||
streamParticle: Particle & { type: "stream" };
|
||
path: ParticlePath;
|
||
}
|
||
|
||
export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||
const { networkId } = parseParticlePath(path);
|
||
|
||
return (
|
||
<StreamPresenceProvider networkId={networkId} streamId={streamParticle.id}>
|
||
<StreamViewInner path={path} streamParticle={streamParticle} />
|
||
</StreamPresenceProvider>
|
||
);
|
||
}
|
||
|
||
function StreamViewInner({ path, streamParticle }: StreamViewProps) {
|
||
const { networkId } = parseParticlePath(path);
|
||
const navigate = useNavigate();
|
||
|
||
useMount(() => {
|
||
platform.autoplay.dismiss();
|
||
});
|
||
|
||
const {
|
||
children,
|
||
currentParticle,
|
||
currentIndex,
|
||
status,
|
||
next,
|
||
prev,
|
||
goTo,
|
||
goToParticle
|
||
} = useStreamPlayback(streamParticle, path);
|
||
|
||
usePrefetchAdjacentMedia(children, currentIndex);
|
||
|
||
const authedUser = useAuthStore((s) => s.user);
|
||
const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
|
||
const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);
|
||
const network = useNetwork(networkId);
|
||
const presenceBySegment = usePresencePositions(
|
||
streamParticle.playback_markers,
|
||
children,
|
||
network?.humans,
|
||
authedUser?.id,
|
||
);
|
||
|
||
// --- Stream presence (realtime via pusher) ---
|
||
const { onlineHumanIds } = useStreamPresence();
|
||
const { composingUsers } = useStreamComposing();
|
||
const { startComposing, stopComposing } = useStreamComposingBroadcast();
|
||
|
||
const mediaRef = useRef<MediaParticleHandle>(null);
|
||
|
||
const handleToggleReaction = useCallback((emoji: string) => {
|
||
if (!authedUser || !currentParticle) return;
|
||
if (isParticleDeleted(currentParticle)) return;
|
||
|
||
|
||
const currentParticleDocPath = currentParticle
|
||
? toFirestoreDocPath(particlePath(networkId, [streamParticle.id, currentParticle.id]))
|
||
: null;
|
||
if (!currentParticleDocPath) return;
|
||
|
||
const reactions = getReactions(currentParticle);
|
||
toggleParticleReaction(currentParticleDocPath, emoji, authedUser.id, reactions);
|
||
}, [authedUser, currentParticle]);
|
||
|
||
const [composeActive, setComposeActive] = useState(false);
|
||
const [composeStep, setComposeStep] = useState<ComposeStep>("idle");
|
||
const paused = usePlaybackPauseStore(selectIsPaused);
|
||
const [progress, setProgress] = useState(0);
|
||
const [showKeybindings, setShowKeybindings] = useState(false);
|
||
const [textReactionOpen, setTextReactionOpen] = useState(false);
|
||
|
||
const handleSubmitTextReaction = useCallback((text: string) => {
|
||
handleToggleReaction(text);
|
||
}, [handleToggleReaction]);
|
||
|
||
const { fastPlayback } = usePlaybackKeys({ mediaRef });
|
||
|
||
useStreamNavigationKeys({
|
||
next,
|
||
prev,
|
||
currentIndex,
|
||
childrenLength: children.length,
|
||
mediaRef,
|
||
});
|
||
|
||
const handleOpenHuddle = useCallback(() => {
|
||
if (!requireDesktop("Huddle")) return;
|
||
apiClient.getLivekitToken(networkId, streamParticle.id).then(({ token, server_url }) => {
|
||
platform.huddle.open({ token, serverUrl: server_url });
|
||
});
|
||
navigate(`/${networkId}`);
|
||
}, [networkId, streamParticle.id, navigate]);
|
||
|
||
const handleToggleRecordingMode = useCallback(() => {
|
||
setRecordingMode(recordingMode === "video" ? "audio" : "video");
|
||
}, [recordingMode, setRecordingMode]);
|
||
|
||
const handleToggleKeybindings = useCallback(() => {
|
||
setShowKeybindings((v) => !v);
|
||
}, []);
|
||
|
||
useStreamActionKeys({
|
||
onToggleReaction: handleToggleReaction,
|
||
onOpenHuddle: handleOpenHuddle,
|
||
onToggleRecordingMode: handleToggleRecordingMode,
|
||
onToggleKeybindings: handleToggleKeybindings,
|
||
onOpenTextReaction: () => setTextReactionOpen(true),
|
||
});
|
||
|
||
// Broadcast composing state to other viewers
|
||
useEffect(() => {
|
||
const stepToMode: Record<string, ComposingMode | null> = {
|
||
idle: null,
|
||
submitting: null,
|
||
recording: "recording",
|
||
typing: "typing",
|
||
reviewing: "typing",
|
||
configuring: "typing",
|
||
picking: "screen",
|
||
};
|
||
const mode = stepToMode[composeStep] ?? null;
|
||
if (mode) {
|
||
startComposing(mode);
|
||
} else {
|
||
stopComposing();
|
||
}
|
||
}, [composeStep, startComposing, stopComposing]);
|
||
|
||
// Show/hide chrome on mouse activity (YouTube-style)
|
||
const [showControls, setShowControls] = useState(true);
|
||
const idleTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
|
||
const handleMouseActivity = useCallback(() => {
|
||
setShowControls(true);
|
||
clearTimeout(idleTimerRef.current);
|
||
idleTimerRef.current = setTimeout(() => setShowControls(false), 3000);
|
||
}, []);
|
||
useEffect(() => () => clearTimeout(idleTimerRef.current), []);
|
||
|
||
// 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 particle changes
|
||
useEffect(() => {
|
||
setProgress(0);
|
||
}, [currentParticle?.id]);
|
||
|
||
const handleParticleCreated = useCallback((particleId: string) => {
|
||
if (currentIndex === -1) return;
|
||
|
||
// When local user is at children.length - 1, and they send a new particle,
|
||
// we want to navigate to the new particle immediately so the user is considered caught up in the stream.
|
||
// In other cases (e.g. when user is in the middle of the stream and new particles are added),
|
||
// we don't want to disrupt their current position by jumping them to the end of the stream.
|
||
// NOTE: at this point, `children` contains stale data from the time when compose was sending, so it doesn't include the new particle yet.
|
||
if (currentIndex === children.length - 1) {
|
||
goToParticle(particleId);
|
||
}
|
||
}, [children, goToParticle, currentIndex]);
|
||
|
||
if (children.length === 0) {
|
||
return (
|
||
<div className="flex h-full flex-col items-center justify-center gap-4 bg-black text-white">
|
||
<p className="text-muted-foreground text-sm">
|
||
No particles in this stream yet
|
||
</p>
|
||
<StreamViewControls
|
||
showEscape
|
||
onOpenKeybindings={() => setShowKeybindings(true)}
|
||
/>
|
||
<ComposeOverlay
|
||
networkId={networkId}
|
||
targetPath={path}
|
||
onActiveChange={setComposeActive}
|
||
disabled={streamParticle.status === "closed"}
|
||
onParticleCreated={handleParticleCreated}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Render particle content inline
|
||
function renderParticle(particle: Particle) {
|
||
if (isParticleDeleted(particle)) {
|
||
return (
|
||
<DeletedParticleView
|
||
key={particle.id}
|
||
particle={particle}
|
||
networkId={networkId}
|
||
paused={paused}
|
||
onEnded={next}
|
||
/>
|
||
);
|
||
}
|
||
switch (particle.type) {
|
||
case "media":
|
||
return (
|
||
<MediaParticleView
|
||
ref={mediaRef}
|
||
key={particle.id}
|
||
particle={particle}
|
||
streamPath={path}
|
||
paused={paused}
|
||
onEnded={next}
|
||
onProgress={setProgress}
|
||
/>
|
||
);
|
||
case "text":
|
||
return (
|
||
<TextParticleView
|
||
key={particle.id}
|
||
particle={particle}
|
||
streamPath={path}
|
||
paused={paused}
|
||
onEnded={next}
|
||
onProgress={setProgress}
|
||
/>
|
||
);
|
||
default:
|
||
return <FallbackParticleView particle={particle} networkId={networkId} />;
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className="relative flex h-screen flex-col overflow-hidden bg-black text-white [--stream-safe-top:4rem] [--stream-safe-bottom:5rem]"
|
||
onMouseMove={handleMouseActivity}
|
||
onMouseLeave={() => setShowControls(false)}
|
||
>
|
||
{/* Top gradient safe zone */}
|
||
<div className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-32 bg-gradient-to-b from-black/60 to-transparent" />
|
||
|
||
{/* TopBar — always visible */}
|
||
<div className="z-10 absolute left-0 right-0 pt-2">
|
||
<TopBar networkId={networkId} particle={currentParticle} streamParticle={streamParticle} />
|
||
</div>
|
||
|
||
{/* Main playback area */}
|
||
<div className="flex-1 overflow-hidden">
|
||
{currentParticle && (
|
||
<div className="relative flex h-full w-full cursor-pointer items-center justify-center">
|
||
{renderParticle(currentParticle)}
|
||
|
||
<div className="pointer-events-none absolute right-4 top-14 z-20 flex flex-col items-end gap-1.5">
|
||
{fastPlayback && (
|
||
<div className="rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
|
||
1.5x
|
||
</div>
|
||
)}
|
||
{paused && (
|
||
<div className="rounded-full bg-black/40 px-2.5 py-1 text-xs font-medium text-white/70 backdrop-blur-sm">
|
||
Paused
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Reaction bar — always visible */}
|
||
{currentParticle && !isParticleDeleted(currentParticle) && (
|
||
<div className="absolute right-4 top-1/2 z-10 flex -translate-y-1/2 flex-col items-end gap-2">
|
||
<ReactionBar
|
||
reactions={getReactions(currentParticle)}
|
||
currentHumanId={authedUser?.id ?? ""}
|
||
humans={network?.humans}
|
||
onToggle={handleToggleReaction}
|
||
onOpenTextReaction={() => setTextReactionOpen(true)}
|
||
/>
|
||
<TextReactionInput
|
||
open={textReactionOpen}
|
||
onSubmit={handleSubmitTextReaction}
|
||
onClose={() => setTextReactionOpen(false)}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Composing indicator — left edge, always visible */}
|
||
<ComposingIndicator users={composingUsers} networkHumans={network?.humans} />
|
||
|
||
<ComposeOverlay
|
||
networkId={networkId}
|
||
targetPath={path}
|
||
onActiveChange={setComposeActive}
|
||
onStepChange={setComposeStep}
|
||
disabled={streamParticle.status === "closed"}
|
||
onParticleCreated={handleParticleCreated}
|
||
/>
|
||
|
||
{/* Bottom gradient safe zone for keyboard hints */}
|
||
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-1/4 bg-gradient-to-t from-black/60 to-transparent" />
|
||
|
||
{/* BottomBar */}
|
||
<BottomBar
|
||
visible={controlsVisible}
|
||
total={children.length}
|
||
current={currentIndex}
|
||
progress={progress}
|
||
onGoTo={goTo}
|
||
presenceBySegment={presenceBySegment}
|
||
onlineHumanIds={onlineHumanIds}
|
||
exitRemainingMs={exitRemainingMs}
|
||
onOpenKeybindings={() => setShowKeybindings(true)}
|
||
/>
|
||
|
||
<KeybindingsOverlay
|
||
open={showKeybindings}
|
||
onClose={() => setShowKeybindings(false)}
|
||
groups={STREAM_VIEW_KEYBINDINGS}
|
||
title="Stream View"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BottomBar({
|
||
visible,
|
||
total,
|
||
current,
|
||
progress,
|
||
onGoTo,
|
||
presenceBySegment,
|
||
onlineHumanIds,
|
||
exitRemainingMs,
|
||
onOpenKeybindings,
|
||
}: {
|
||
visible: boolean;
|
||
total: number;
|
||
current: number;
|
||
progress: number;
|
||
onGoTo: (index: number) => void;
|
||
presenceBySegment: Map<number, import("@/hooks/use-presence-positions").HumanPresence[]>;
|
||
onlineHumanIds: Set<string>;
|
||
exitRemainingMs: number | null;
|
||
onOpenKeybindings: () => void;
|
||
}) {
|
||
return (
|
||
<div className={cn(
|
||
"absolute inset-x-0 bottom-0 z-10 transition-all duration-300",
|
||
visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2 pointer-events-none",
|
||
)}>
|
||
{/* Presence avatars — above the blurred background */}
|
||
<PlaybackPageIndicator
|
||
total={total}
|
||
current={current}
|
||
progress={progress}
|
||
onGoTo={onGoTo}
|
||
presenceBySegment={presenceBySegment}
|
||
onlineHumanIds={onlineHumanIds}
|
||
layer="avatars"
|
||
/>
|
||
{/* Blurred background container — tracks + controls */}
|
||
<div className="pb-3">
|
||
<PlaybackPageIndicator
|
||
total={total}
|
||
current={current}
|
||
progress={progress}
|
||
onGoTo={onGoTo}
|
||
layer="tracks"
|
||
/>
|
||
<div className="flex items-center justify-center px-3 pt-2 gap-2">
|
||
{exitRemainingMs !== null && (
|
||
<div className="flex justify-center">
|
||
<span className="rounded-full bg-black/30 px-2 text-xs text-white/70 backdrop-blur-sm">
|
||
Closing in {Math.ceil(exitRemainingMs / 1000)}s
|
||
</span>
|
||
</div>
|
||
)}
|
||
<StreamViewControls
|
||
showEscape
|
||
onOpenKeybindings={onOpenKeybindings}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StreamViewControls({
|
||
showEscape,
|
||
onOpenKeybindings,
|
||
}: {
|
||
showEscape?: boolean;
|
||
onOpenKeybindings: () => void;
|
||
}) {
|
||
const requestIntent = useComposeIntentStore((s) => s.request);
|
||
return (
|
||
<div className="flex items-center gap-4 text-sm text-white/50">
|
||
{showEscape && (
|
||
<span>
|
||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||
Esc
|
||
</kbd>{" "}
|
||
back
|
||
</span>
|
||
)}
|
||
<VideoAudioToggle />
|
||
<button
|
||
type="button"
|
||
onClick={() => requestIntent("record")}
|
||
className="cursor-pointer rounded transition-colors hover:text-white/80"
|
||
title="Reply with a recording (or hold `)"
|
||
>
|
||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||
Hold `
|
||
</kbd>{" "}
|
||
to reply
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => requestIntent("text")}
|
||
className="cursor-pointer rounded transition-colors hover:text-white/80"
|
||
title="Reply with text (or press T)"
|
||
>
|
||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||
T
|
||
</kbd>{" "}
|
||
text
|
||
</button>
|
||
<span>
|
||
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
||
H
|
||
</kbd>{" "}
|
||
huddle
|
||
</span>
|
||
<kbd
|
||
role="button"
|
||
onClick={onOpenKeybindings}
|
||
className="cursor-pointer rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs transition-colors hover:text-white/80"
|
||
title="Show all shortcuts"
|
||
>
|
||
?
|
||
</kbd>
|
||
</div>
|
||
);
|
||
}
|