446 lines
14 KiB
TypeScript
446 lines
14 KiB
TypeScript
import { useState, useEffect, useEffectEvent, useCallback } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useAuthStore } from "@/stores/auth-store";
|
|
import { apiClient } from "@/api/client";
|
|
import type { Particle } from "@/api/types";
|
|
import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
|
|
import { ComposeOverlay } from "@/features/compose/compose-overlay";
|
|
import { PlaybackPageIndicator } from "@/features/particles/playback-page-indicator";
|
|
import { MediaParticleView } from "@/features/particles/media-particle-view";
|
|
import { TextParticleView } from "@/features/particles/text-particle-view";
|
|
import { FallbackParticleView } from "@/features/particles/fallback-particle-view";
|
|
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
|
|
import ControlsIndicator from "@/features/compose/controls-indicator";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import { useNetwork, useNetworks } from "@/hooks/use-networks";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Settings } from "lucide-react";
|
|
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
|
|
import { WindowControls } from "@/components/window-controls";
|
|
import { RelativeTimestamp } from "@/components/relative-timestamp";
|
|
import { useStreamPlayback } from "@/hooks/use-stream-playback";
|
|
import { usePrefetchAdjacentMedia } from "@/hooks/use-prefetch-adjacent-media";
|
|
|
|
function getParticleDisplayName(particle: Particle): string {
|
|
switch (particle.type) {
|
|
case "stream":
|
|
case "folder":
|
|
return particle.properties.name;
|
|
case "quest":
|
|
return particle.properties.title;
|
|
case "paper":
|
|
return particle.properties.title;
|
|
case "file":
|
|
return particle.properties.filename;
|
|
case "text":
|
|
return particle.properties.content.slice(0, 30);
|
|
case "media":
|
|
return particle.type;
|
|
}
|
|
}
|
|
|
|
// --- Exit countdown hook ---
|
|
|
|
const EXIT_DELAY_MS = 5000;
|
|
const EXIT_TICK_MS = 100;
|
|
|
|
type PlaybackStatus = "idle" | "playing" | "ended";
|
|
|
|
function useExitCountdown(
|
|
status: PlaybackStatus,
|
|
composeActive: 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 || composeActive) 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, composeActive]);
|
|
|
|
// Navigate once countdown hits zero
|
|
useEffect(() => {
|
|
if (remainingMs !== null && remainingMs <= 0) {
|
|
handleExit();
|
|
}
|
|
}, [remainingMs]);
|
|
|
|
return remainingMs;
|
|
}
|
|
|
|
// --- StreamView ---
|
|
|
|
interface StreamViewProps {
|
|
streamParticle: Particle & { type: "stream" };
|
|
path: ParticlePath;
|
|
}
|
|
|
|
export function StreamView({ path, streamParticle }: StreamViewProps) {
|
|
const { networkId } = parseParticlePath(path);
|
|
const navigate = useNavigate();
|
|
|
|
const {
|
|
children,
|
|
currentParticle,
|
|
currentIndex,
|
|
status,
|
|
paused,
|
|
next,
|
|
prev,
|
|
goTo,
|
|
goToParticle,
|
|
pause,
|
|
resume,
|
|
} = useStreamPlayback(streamParticle, path);
|
|
|
|
usePrefetchAdjacentMedia(children, currentIndex);
|
|
|
|
const [composeActive, setComposeActive] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
const handleExitNavigate = useCallback(() => {
|
|
navigate(`/${networkId}`);
|
|
}, [navigate, networkId]);
|
|
|
|
const exitRemainingMs = useExitCountdown(
|
|
status,
|
|
composeActive,
|
|
handleExitNavigate,
|
|
);
|
|
|
|
// Reset progress when particle changes
|
|
useEffect(() => {
|
|
setProgress(0);
|
|
}, [currentParticle?.id]);
|
|
|
|
// Pause/resume playback when compose overlay opens/closes
|
|
useEffect(() => {
|
|
if (composeActive) pause();
|
|
else resume();
|
|
}, [composeActive, pause, resume]);
|
|
|
|
// Playback keyboard: arrows, escape
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (composeActive) return;
|
|
|
|
const target = e.target as HTMLElement;
|
|
if (
|
|
target.tagName === "INPUT" ||
|
|
target.tagName === "TEXTAREA" ||
|
|
target.isContentEditable
|
|
) {
|
|
return;
|
|
}
|
|
|
|
switch (e.key) {
|
|
case "ArrowRight":
|
|
case "ArrowDown":
|
|
e.preventDefault();
|
|
next();
|
|
break;
|
|
case "ArrowLeft":
|
|
case "ArrowUp":
|
|
e.preventDefault();
|
|
prev();
|
|
break;
|
|
case "Escape":
|
|
e.preventDefault();
|
|
navigate(`/${networkId}`);
|
|
break;
|
|
case "h": {
|
|
e.preventDefault();
|
|
const roomId = streamParticle.id;
|
|
apiClient.getLivekitToken(roomId).then(({ token, server_url }) => {
|
|
window.electronWindow.openHuddle({ token, serverUrl: server_url });
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
},
|
|
[composeActive, next, prev, navigate, networkId, streamParticle.id],
|
|
);
|
|
|
|
// Click-to-navigate: left 30% = prev, right 70% = next
|
|
// Suppressed when the user has selected text (drag-to-select)
|
|
const handlePlaybackClick = useCallback(
|
|
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
const selection = window.getSelection();
|
|
if (selection && selection.toString().length > 0) return;
|
|
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width;
|
|
if (x < 0.3) prev();
|
|
else if (x > 0.7) next();
|
|
},
|
|
[prev, next],
|
|
);
|
|
|
|
const onLocalParticleCreated = useCallback(
|
|
(particleId: string) => {
|
|
goToParticle(particleId);
|
|
}, [goToParticle]);
|
|
|
|
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>
|
|
<ControlsIndicator type="reply" showEscape={true}>
|
|
<span>
|
|
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
H
|
|
</kbd>{" "}
|
|
huddle
|
|
</span>
|
|
</ControlsIndicator>
|
|
<ComposeOverlay
|
|
networkId={networkId}
|
|
targetPath={path}
|
|
onActiveChange={setComposeActive}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Render particle content inline
|
|
function renderParticle(particle: Particle) {
|
|
switch (particle.type) {
|
|
case "media":
|
|
return (
|
|
<MediaParticleView
|
|
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} />;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex h-screen flex-col bg-black text-white">
|
|
{/* Top gradient safe zone — keeps progress bar & breadcrumbs readable */}
|
|
<div className="pointer-events-none absolute inset-x-0 top-0 z-[5] h-32 bg-gradient-to-b from-black/60 to-transparent" />
|
|
|
|
{/* Bottom gradient safe zone — keeps captions & controls readable */}
|
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-48 bg-gradient-to-t from-black/60 to-transparent" />
|
|
|
|
{/* Progress indicator */}
|
|
<div className="z-10 absolute left-0 right-0">
|
|
<PlaybackPageIndicator
|
|
total={children.length}
|
|
current={currentIndex}
|
|
progress={progress}
|
|
onGoTo={goTo}
|
|
/>
|
|
</div>
|
|
|
|
<div className="z-10 absolute left-0 right-0 mt-3">
|
|
<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"
|
|
onClick={handlePlaybackClick}
|
|
>
|
|
{renderParticle(currentParticle)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<ComposeOverlay
|
|
networkId={networkId}
|
|
targetPath={path}
|
|
onActiveChange={setComposeActive}
|
|
onParticleCreated={onLocalParticleCreated}
|
|
/>
|
|
|
|
{/* Bottom-left: metadata */}
|
|
<div className="absolute bottom-0 left-0 z-10 flex items-center gap-2 px-2 pb-2 text-xs text-white/70">
|
|
{currentParticle && (
|
|
<SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
|
|
)}
|
|
{exitRemainingMs !== null && (
|
|
<span className="rounded-full bg-black/30 px-2 py-1 backdrop-blur-sm">
|
|
Closing in {Math.ceil(exitRemainingMs / 1000)}s
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom-center: controls */}
|
|
<div className="absolute inset-x-0 bottom-0 z-10 flex justify-center pb-3">
|
|
<ControlsIndicator type="reply" showEscape={true}>
|
|
<span>
|
|
<kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
|
|
H
|
|
</kbd>{" "}
|
|
huddle
|
|
</span>
|
|
</ControlsIndicator>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TopBar({ networkId, particle, streamParticle }: { networkId: string; particle: Particle | null; streamParticle: Particle & { type: "stream" } }) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="drag-region flex flex-row px-4 gap-5 items-center">
|
|
<WindowControls />
|
|
|
|
<Breadcrumb className="no-drag rounded-full bg-black/30 backdrop-blur-sm px-3 py-1 mx-auto">
|
|
<BreadcrumbList>
|
|
{streamParticle && (
|
|
<>
|
|
<BreadcrumbItem className="text-xs">
|
|
<BreadcrumbPage>{getParticleDisplayName(streamParticle)}</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</>
|
|
)}
|
|
|
|
{particle && (
|
|
<>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem className="text-xs">
|
|
<BreadcrumbPage><ParticleBreadcrumbContent particle={particle} networkId={networkId} /></BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</>
|
|
)}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="no-drag text-muted-foreground"
|
|
onClick={() => navigate("/settings")}
|
|
>
|
|
<Settings className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NetworkBreadcrumbContent({ networkId }: { networkId: string }) {
|
|
const { data: networks } = useNetworks();
|
|
const network = networks?.find((n) => n.id === networkId);
|
|
const name = network?.name ?? networkId;
|
|
const initials = name.slice(0, 2).toUpperCase();
|
|
|
|
return (
|
|
<span className="flex items-center gap-1.5">
|
|
<Avatar size="sm">
|
|
<AvatarFallback>
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
{name}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle; networkId: string }) {
|
|
const network = useNetwork(networkId);
|
|
const creator = network?.humans?.find((h) => h.id === particle.created_by_human_id);
|
|
const prefix = creator?.email_prefix ?? particle.created_by_human_id;
|
|
const initials = prefix.slice(0, 2).toUpperCase();
|
|
|
|
return (
|
|
<span className="flex
|
|
items-center gap-1.5">
|
|
<Avatar size="sm">
|
|
<AvatarFallback>
|
|
{initials}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
{prefix} - <RelativeTimestamp date={particle.created_at} />
|
|
</span>
|
|
)
|
|
}
|
|
|
|
// Shows a list of avatars of users who have seen the current particle, based on playback markers in the stream particle.
|
|
const SeenIndicator = ({ stream, currentParticle, networkId }: { stream: Particle & { type: "stream" }, currentParticle: Particle, networkId: string }) => {
|
|
const authedUser = useAuthStore((s) => s.user);
|
|
const network = useNetwork(networkId);
|
|
const playbackMarkers = stream.playback_markers ?? {};
|
|
|
|
const seenUserIds = Object.entries(playbackMarkers)
|
|
.filter(([userId, timestamp]) => timestamp.getTime() >= currentParticle.created_at.getTime() && userId !== authedUser?.id)
|
|
.map(([userId, _]) => userId);
|
|
|
|
const seenHumans = seenUserIds
|
|
.map((userId) => network?.humans?.find((h) => h.id === userId))
|
|
.filter((h): h is NonNullable<typeof h> => !!h && h.id !== currentParticle.created_by_human_id);
|
|
|
|
if (seenHumans.length === 0) return null;
|
|
|
|
return (
|
|
<>
|
|
{"Seen by"}
|
|
<AvatarGroup>
|
|
{seenHumans.map((human) => (
|
|
<Tooltip key={human.id}>
|
|
<TooltipTrigger asChild>
|
|
<Avatar size="sm">
|
|
<AvatarFallback>
|
|
{human.email_prefix.slice(0, 2)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Seen by {human.email_prefix}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
))}
|
|
</AvatarGroup>
|
|
</>
|
|
);
|
|
}
|