-
- {loading ? "Loading..." : title}
-
+
+
+ {loading ? "Loading..." : title}
+
+
+
@@ -60,9 +130,7 @@ function VodPage() {
{(author?.displayName || author?.handle) && (
@
)}
-
- {author?.handle || user}
-
+ {author?.handle || user}
{duration && (
diff --git a/js/web/src/routes/__root.tsx b/js/web/src/routes/__root.tsx
index 384f5043b..71df09bba 100644
--- a/js/web/src/routes/__root.tsx
+++ b/js/web/src/routes/__root.tsx
@@ -1,35 +1,134 @@
import Header from "@/components/header";
import SidebarComponent from "@/components/sidebar";
-import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { useState } from "react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { FullscreenProvider } from "@/contexts/fullscreen-context";
+import {
+ createRootRoute,
+ Outlet,
+ useRouterState,
+} from "@tanstack/react-router";
+import { Component, type ReactNode, useEffect, useState } from "react";
import { SidebarInset, SidebarProvider } from "../components/ui/sidebar";
+import { getStoredPreference, syncThemeClass } from "../hooks/use-color-scheme";
+
+/** Routes that should render without sidebar/header chrome. */
+const POPOUT_PREFIXES = ["/chat-popout/"];
export const Route = createRootRoute({
component: RootLayout,
+ pendingComponent: RouteLoadingSkeleton,
});
+// --- Error boundary ---
+
+interface ErrorBoundaryState {
+ error: Error | null;
+}
+
+class ErrorBoundary extends Component<
+ { children: ReactNode },
+ ErrorBoundaryState
+> {
+ state: ErrorBoundaryState = { error: null };
+
+ static getDerivedStateFromError(error: Error) {
+ return { error };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo) {
+ console.error("Unhandled render error:", error, info);
+ }
+
+ render() {
+ if (this.state.error) {
+ return (
+
+
+ Something went wrong
+
+
+ {this.state.error.message || "An unexpected error occurred."}
+
+
+
+ );
+ }
+ return this.props.children;
+ }
+}
+
+// --- Root layout ---
+
+function RouteLoadingSkeleton() {
+ return (
+
+ );
+}
+
function RootLayout() {
+ const pathname = useRouterState({
+ select: (s) => s.resolvedLocation?.pathname ?? "",
+ });
+ const isPopout = POPOUT_PREFIXES.some((p) => pathname.startsWith(p));
+
const [open, setOpen] = useState(() => {
if (typeof localStorage === "undefined") return true;
return localStorage.getItem("streamplace:nav-open") !== "false";
});
- return (
-
{
- setOpen(o);
- localStorage.setItem("streamplace:nav-open", String(o));
- }}
- className="h-svh"
- >
-
-
-
-
+ // Re-sync theme when system preference changes (only matters if pref is "system").
+ useEffect(() => {
+ const mql = window.matchMedia("(prefers-color-scheme: dark)");
+ const onChange = () => {
+ if (getStoredPreference() === "system") {
+ syncThemeClass();
+ }
+ };
+ mql.addEventListener("change", onChange);
+ return () => mql.removeEventListener("change", onChange);
+ }, []);
+
+ // Popout routes get no chrome — just providers and the outlet.
+ if (isPopout) {
+ return (
+
+
-
-
-
+
+
+ );
+ }
+
+ return (
+
+
+
+ {
+ setOpen(o);
+ localStorage.setItem("streamplace:nav-open", String(o));
+ }}
+ className="h-svh"
+ >
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/js/web/src/routes/chat-popout.$user.tsx b/js/web/src/routes/chat-popout.$user.tsx
new file mode 100644
index 000000000..d1fc8a37c
--- /dev/null
+++ b/js/web/src/routes/chat-popout.$user.tsx
@@ -0,0 +1,183 @@
+// Standalone chat popout window. Minimal chrome — just the chat panel
+// and input, no player, no sidebar, no header.
+//
+// Query parameters (useful for OBS browser sources):
+// reverse=true Show newest messages at top
+// reverse=false Show newest messages at bottom (default)
+// hideAfter=N Hide the chat after N seconds
+// hideChatBox=true Hide the chat input (read-only)
+// hidePinnedComments=true Hide pinned comment notifications
+import { ChatInput } from "@/components/stream/chat-input";
+import { ChatPanel } from "@/components/stream/chat-panel";
+import { StreamNotifications } from "@/components/stream/stream-notifications";
+import { getStreamplaceUrl } from "@/lib/streamplace-url";
+import {
+ handleWebSocketMessages,
+ makeLivestreamStore,
+ type LivestreamStore,
+} from "@streamplace/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+
+export const Route = createFileRoute("/chat-popout/$user")({
+ validateSearch: (
+ search: Record
,
+ ): {
+ reverse?: boolean;
+ hideAfter?: number;
+ hideChatBox?: boolean;
+ hidePinnedComments?: boolean;
+ } => {
+ const toBool = (v: unknown): boolean | undefined => {
+ if (v === undefined || v === null) return undefined;
+ if (typeof v === "boolean") return v;
+ return String(v).toLowerCase() === "true";
+ };
+ const toNum = (v: unknown): number | undefined => {
+ if (typeof v === "number" && !isNaN(v)) return v;
+ if (typeof v === "string" && !isNaN(Number(v))) return Number(v);
+ return undefined;
+ };
+ const result: {
+ reverse?: boolean;
+ hideAfter?: number;
+ hideChatBox?: boolean;
+ hidePinnedComments?: boolean;
+ } = {};
+ const reverse = toBool(search.reverse);
+ if (reverse !== undefined) result.reverse = reverse;
+ const hideAfter = toNum(search.hideAfter);
+ if (hideAfter !== undefined) result.hideAfter = hideAfter;
+ const hideChatBox = toBool(search.hideChatBox);
+ if (hideChatBox !== undefined) result.hideChatBox = hideChatBox;
+ const hidePinnedComments = toBool(search.hidePinnedComments);
+ if (hidePinnedComments !== undefined)
+ result.hidePinnedComments = hidePinnedComments;
+ return result;
+ },
+ component: ChatPopoutPage,
+});
+
+function ChatPopoutPage() {
+ const { user } = Route.useParams();
+ const { reverse, hideAfter, hideChatBox, hidePinnedComments } =
+ Route.useSearch();
+ const reverseVal = reverse ?? false;
+ const hideChatBoxVal = hideChatBox ?? false;
+ const hidePinnedCommentsVal = hidePinnedComments ?? false;
+ const store = useRef(null);
+ const [initialized, setInitialized] = useState(false);
+ const [hidden, setHidden] = useState(false);
+
+ useEffect(() => {
+ const s = makeLivestreamStore();
+ store.current = s;
+ setInitialized(true);
+ }, []);
+
+ // hideAfter timer
+ useEffect(() => {
+ if (!hideAfter || hideAfter <= 0) return;
+ const timer = setTimeout(() => setHidden(true), hideAfter * 1000);
+ return () => clearTimeout(timer);
+ }, [hideAfter]);
+
+ useEffect(() => {
+ if (!store.current) return;
+
+ const wsUrl = `${getStreamplaceUrl()}/api/websocket/${user}`;
+
+ let ws: WebSocket | null = null;
+ let reconnectTimeout: ReturnType | null = null;
+ let currentConnectId = 0;
+ let mounted = true;
+
+ const scheduleReconnect = () => {
+ if (!mounted || reconnectTimeout) return;
+ reconnectTimeout = setTimeout(connect, 3000);
+ };
+
+ const connect = () => {
+ if (reconnectTimeout) {
+ clearTimeout(reconnectTimeout);
+ reconnectTimeout = null;
+ }
+
+ const connectId = ++currentConnectId;
+
+ ws = new WebSocket(wsUrl);
+
+ ws.onopen = () => {};
+
+ let messageBuffer: any[] = [];
+ let flushTimer: ReturnType | null = null;
+ const flush = () => {
+ flushTimer = null;
+ const batch = messageBuffer;
+ messageBuffer = [];
+ store.current?.setState((s) => handleWebSocketMessages(s, batch));
+ };
+
+ ws.onmessage = (event) => {
+ if (connectId !== currentConnectId) return;
+ try {
+ const messages = JSON.parse(event.data);
+ const list = Array.isArray(messages) ? messages : [messages];
+ messageBuffer.push(...list);
+ if (!flushTimer) {
+ flushTimer = setTimeout(flush, 0);
+ }
+ } catch {}
+ };
+
+ ws.onclose = () => {
+ if (connectId !== currentConnectId) return;
+ store.current?.setState((s) => ({ ...s, websocketConnected: false }));
+ scheduleReconnect();
+ };
+
+ ws.onerror = () => {
+ if (connectId !== currentConnectId) return;
+ store.current?.setState((s) => ({ ...s, websocketConnected: false }));
+ ws?.close();
+ scheduleReconnect();
+ };
+ };
+
+ connect();
+
+ return () => {
+ mounted = false;
+ if (flushTimer) clearTimeout(flushTimer);
+ if (reconnectTimeout) clearTimeout(reconnectTimeout);
+ ws?.close();
+ };
+ }, [user]);
+
+ if (!initialized || !store.current) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {!hidePinnedCommentsVal &&
}
+
+
+
+ {!hideChatBoxVal && (
+
+
+
+ )}
+
@@ -43,7 +37,7 @@ function HomePage() {
return (
- {error && streams === null && (
+ {error && !streams && (
Could not load streams. You might be offline.
@@ -231,38 +225,47 @@ function HomePage() {
r="2"
>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -286,7 +289,7 @@ function HomePage() {
)}
- {streams === null && !loading && (
+ {!streams && !isLoading && !error && (
The video layer for everything.
diff --git a/js/web/src/routes/search.tsx b/js/web/src/routes/search.tsx
new file mode 100644
index 000000000..b5fe4d08e
--- /dev/null
+++ b/js/web/src/routes/search.tsx
@@ -0,0 +1,163 @@
+// Search page. Searches actors via searchActorsTypeahead and shows
+// results as profile cards linking to their streams.
+import useAvatars from "@/hooks/use-avatars";
+import { usePDSAgent } from "@/lib/store/hooks";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { Search } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface SearchResult {
+ did: string;
+ handle: string;
+ displayName?: string;
+}
+
+export const Route = createFileRoute("/search")({
+ validateSearch: (
+ search: Record,
+ ): { q: string | undefined } => ({
+ q: typeof search.q === "string" ? search.q : undefined,
+ }),
+ component: SearchPage,
+});
+
+function SearchPage() {
+ const { q: initialQ } = Route.useSearch();
+ const navigate = useNavigate({ from: Route.fullPath });
+ const agent = usePDSAgent();
+ const [query, setQuery] = useState(initialQ ?? "");
+ const [results, setResults] = useState([]);
+ const [searching, setSearching] = useState(false);
+ const timeoutRef = useRef | null>(null);
+ const inputRef = useRef(null);
+
+ const dids = results.map((r) => r.did);
+ const avatars = useAvatars(dids);
+
+ const searchActors = useCallback(
+ async (q: string) => {
+ if (!agent || !q.trim()) {
+ setResults([]);
+ return;
+ }
+ try {
+ setSearching(true);
+ const response = await agent.place.stream.live.searchActorsTypeahead({
+ q,
+ limit: 20,
+ });
+ setResults(
+ response.data.actors.map((a: any) => ({
+ did: a.did,
+ handle: a.handle,
+ displayName: a.displayName,
+ })),
+ );
+ } catch (error) {
+ console.error("Search failed:", error);
+ setResults([]);
+ } finally {
+ setSearching(false);
+ }
+ },
+ [agent],
+ );
+
+ // Sync initial query param into the input and trigger a search.
+ useEffect(() => {
+ if (initialQ) {
+ searchActors(initialQ);
+ }
+ inputRef.current?.focus();
+ }, [initialQ, searchActors]);
+
+ const handleChange = (value: string) => {
+ setQuery(value);
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ if (value.trim()) {
+ timeoutRef.current = setTimeout(() => {
+ searchActors(value);
+ navigate({ search: { q: value }, replace: true });
+ }, 300);
+ } else {
+ setResults([]);
+ navigate({ search: { q: undefined }, replace: true });
+ }
+ };
+
+ return (
+
+
+
+ handleChange(e.target.value)}
+ placeholder="Search for streamers..."
+ className="w-full h-10 pl-9 pr-4 rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+ />
+
+
+ {searching && results.length === 0 && (
+
+ )}
+
+ {!searching && query.trim() && results.length === 0 && (
+
+
+ No results for “{query}”
+
+
+ )}
+
+ {results.length > 0 && (
+
+ {results.map((actor) => (
+
+ {avatars[actor.did]?.avatar ? (
+
+ ) : (
+
+ {(
+ actor.displayName?.[0] ||
+ actor.handle[0] ||
+ "?"
+ ).toUpperCase()}
+
+ )}
+
+
+ {actor.displayName || actor.handle}
+
+
+ @{actor.handle}
+
+
+
+ ))}
+
+ )}
+
+ {!query.trim() && (
+
+
+
+ Find streamers by name or handle
+
+
+ )}
+