From 185677448c6945115a70f2b761f793f53ecc9b86 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Tue, 5 May 2026 18:19:26 -0500
Subject: [PATCH] popout all(?) widgets

---
 js/app/src/linking-config.ts                  |  8 +++
 js/app/src/navigation-types.ts                |  4 ++
 js/app/src/screens/popout-info-widget.tsx     | 51 ++++++++++++++++
 js/app/src/screens/popout-livestream.tsx      | 44 ++++++++++++++
 js/app/src/screens/popout-multistream.tsx     | 36 ++++++++++++
 js/app/src/screens/popout-stream-monitor.tsx  | 54 +++++++++++++++++
 js/app/src/shell.tsx                          | 24 ++++++++
 .../content/docs/features/live-dashboard.md   | 58 +++++++++++++++++++
 8 files changed, 279 insertions(+)
 create mode 100644 js/app/src/screens/popout-info-widget.tsx
 create mode 100644 js/app/src/screens/popout-livestream.tsx
 create mode 100644 js/app/src/screens/popout-multistream.tsx
 create mode 100644 js/app/src/screens/popout-stream-monitor.tsx
 create mode 100644 js/docs/src/content/docs/features/live-dashboard.md

diff --git a/js/app/src/linking-config.ts b/js/app/src/linking-config.ts
index b5c49d7d..e9041dc8 100644
--- a/js/app/src/linking-config.ts
+++ b/js/app/src/linking-config.ts
@@ -123,6 +123,10 @@ export const SCREEN_PATHS = {
   InfoWidgetEmbed: "info-widget",
   LegacyStream: "legacy/:user",
   DanmuOBS: "widgets/:user/danmu",
+  PopoutStreamMonitor: "widgets/stream-monitor",
+  PopoutInfoWidget: "widgets/info",
+  PopoutMultistream: "widgets/multistream",
+  PopoutLivestream: "widgets/livestream",
 } as const;
 
 /**
@@ -222,6 +226,10 @@ export const streamplaceLinkingOptions: LinkingOptions<ReactNavigation.RootParam
         InfoWidgetEmbed: SCREEN_PATHS.InfoWidgetEmbed,
         LegacyStream: SCREEN_PATHS.LegacyStream,
         DanmuOBS: SCREEN_PATHS.DanmuOBS,
+        PopoutStreamMonitor: SCREEN_PATHS.PopoutStreamMonitor,
+        PopoutInfoWidget: SCREEN_PATHS.PopoutInfoWidget,
+        PopoutMultistream: SCREEN_PATHS.PopoutMultistream,
+        PopoutLivestream: SCREEN_PATHS.PopoutLivestream,
       },
     },
   };
diff --git a/js/app/src/navigation-types.ts b/js/app/src/navigation-types.ts
index 939e88e5..45994177 100644
--- a/js/app/src/navigation-types.ts
+++ b/js/app/src/navigation-types.ts
@@ -49,6 +49,10 @@ export type RootStackParamList = {
   DanmuOBS: { user: string };
   AVSync: undefined;
   LegacyStream: { user: string };
+  PopoutStreamMonitor: undefined;
+  PopoutInfoWidget: undefined;
+  PopoutMultistream: undefined;
+  PopoutLivestream: undefined;
 };
 
 // Helper type for screen props
diff --git a/js/app/src/screens/popout-info-widget.tsx b/js/app/src/screens/popout-info-widget.tsx
new file mode 100644
index 00000000..6ef99930
--- /dev/null
+++ b/js/app/src/screens/popout-info-widget.tsx
@@ -0,0 +1,51 @@
+import {
+  Dashboard,
+  LivestreamProvider,
+  PlayerProvider,
+  zero,
+} from "@streamplace/components";
+import Loading from "components/loading/loading";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { useStore } from "store";
+import { useIsReady, useUserProfile } from "store/hooks";
+
+const { flex, layout, p } = zero;
+
+export default function PopoutInfoWidget() {
+  const isReady = useIsReady();
+  const userProfile = useUserProfile();
+  const openLoginModal = useStore((state) => state.openLoginModal);
+  const hideSidebar = useStore((x) => x.setSidebarHidden);
+  const showSidebar = useStore((x) => x.setSidebarUnhidden);
+
+  useEffect(() => {
+    hideSidebar();
+    return () => {
+      showSidebar();
+    };
+  }, [showSidebar]);
+
+  if (!isReady) return <Loading />;
+  if (!userProfile) {
+    openLoginModal({ name: "PopoutInfoWidget" });
+    return <Loading />;
+  }
+
+  return (
+    <LivestreamProvider src={userProfile.did}>
+      <PlayerProvider>
+        <View
+          style={[
+            flex.values[1],
+            layout.flex.alignCenter,
+            layout.flex.justifyCenter,
+            p[1],
+          ]}
+        >
+          <Dashboard.InformationWidget />
+        </View>
+      </PlayerProvider>
+    </LivestreamProvider>
+  );
+}
diff --git a/js/app/src/screens/popout-livestream.tsx b/js/app/src/screens/popout-livestream.tsx
new file mode 100644
index 00000000..cb36b9d0
--- /dev/null
+++ b/js/app/src/screens/popout-livestream.tsx
@@ -0,0 +1,44 @@
+import {
+  LivestreamProvider,
+  PlayerProvider,
+  zero,
+} from "@streamplace/components";
+import LivestreamPanel from "components/live-dashboard/livestream-panel";
+import Loading from "components/loading/loading";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { useStore } from "store";
+import { useIsReady, useUserProfile } from "store/hooks";
+
+const { flex, p } = zero;
+
+export default function PopoutLivestream() {
+  const isReady = useIsReady();
+  const userProfile = useUserProfile();
+  const openLoginModal = useStore((state) => state.openLoginModal);
+  const hideSidebar = useStore((x) => x.setSidebarHidden);
+  const showSidebar = useStore((x) => x.setSidebarUnhidden);
+
+  useEffect(() => {
+    hideSidebar();
+    return () => {
+      showSidebar();
+    };
+  }, [showSidebar]);
+
+  if (!isReady) return <Loading />;
+  if (!userProfile) {
+    openLoginModal({ name: "PopoutLivestream" });
+    return <Loading />;
+  }
+
+  return (
+    <LivestreamProvider src={userProfile.did}>
+      <PlayerProvider>
+        <View style={[flex.values[1], p[1]]}>
+          <LivestreamPanel />
+        </View>
+      </PlayerProvider>
+    </LivestreamProvider>
+  );
+}
diff --git a/js/app/src/screens/popout-multistream.tsx b/js/app/src/screens/popout-multistream.tsx
new file mode 100644
index 00000000..83566b77
--- /dev/null
+++ b/js/app/src/screens/popout-multistream.tsx
@@ -0,0 +1,36 @@
+import { zero } from "@streamplace/components";
+import MultistreamStatus from "components/live-dashboard/multistream-status";
+import Loading from "components/loading/loading";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { useStore } from "store";
+import { useIsReady, useUserProfile } from "store/hooks";
+
+const { flex } = zero;
+
+export default function PopoutMultistream() {
+  const isReady = useIsReady();
+  const userProfile = useUserProfile();
+  const openLoginModal = useStore((state) => state.openLoginModal);
+  const hideSidebar = useStore((x) => x.setSidebarHidden);
+  const showSidebar = useStore((x) => x.setSidebarUnhidden);
+
+  useEffect(() => {
+    hideSidebar();
+    return () => {
+      showSidebar();
+    };
+  }, [showSidebar]);
+
+  if (!isReady) return <Loading />;
+  if (!userProfile) {
+    openLoginModal({ name: "PopoutMultistream" });
+    return <Loading />;
+  }
+
+  return (
+    <View style={[flex.values[1]]}>
+      <MultistreamStatus />
+    </View>
+  );
+}
diff --git a/js/app/src/screens/popout-stream-monitor.tsx b/js/app/src/screens/popout-stream-monitor.tsx
new file mode 100644
index 00000000..39f8b409
--- /dev/null
+++ b/js/app/src/screens/popout-stream-monitor.tsx
@@ -0,0 +1,54 @@
+import {
+  LivestreamProvider,
+  PlayerProvider,
+  zero,
+} from "@streamplace/components";
+import StreamMonitor from "components/live-dashboard/stream-monitor";
+import Loading from "components/loading/loading";
+import { useLiveUser } from "hooks/useLiveUser";
+import { useEffect } from "react";
+import { View } from "react-native";
+import { useStore } from "store";
+import { useIsReady, useUserProfile } from "store/hooks";
+
+const { flex } = zero;
+
+function PopoutStreamMonitorInner() {
+  const isLive = useLiveUser();
+  const profile = useUserProfile();
+  const hideSidebar = useStore((x) => x.setSidebarHidden);
+  const showSidebar = useStore((x) => x.setSidebarUnhidden);
+
+  useEffect(() => {
+    hideSidebar();
+    return () => {
+      showSidebar();
+    };
+  }, [showSidebar]);
+
+  return (
+    <View style={[flex.values[1]]}>
+      <StreamMonitor isLive={isLive} userProfile={profile} />
+    </View>
+  );
+}
+
+export default function PopoutStreamMonitor() {
+  const isReady = useIsReady();
+  const userProfile = useUserProfile();
+  const openLoginModal = useStore((state) => state.openLoginModal);
+
+  if (!isReady) return <Loading />;
+  if (!userProfile) {
+    openLoginModal({ name: "PopoutStreamMonitor" });
+    return <Loading />;
+  }
+
+  return (
+    <LivestreamProvider src={userProfile.did}>
+      <PlayerProvider>
+        <PopoutStreamMonitorInner />
+      </PlayerProvider>
+    </LivestreamProvider>
+  );
+}
diff --git a/js/app/src/shell.tsx b/js/app/src/shell.tsx
index 4768de4d..48c9ba87 100644
--- a/js/app/src/shell.tsx
+++ b/js/app/src/shell.tsx
@@ -60,6 +60,10 @@ import LiveDashboard from "src/screens/live-dashboard";
 import MobileGoLive from "src/screens/mobile-go-live";
 import MobileStream from "src/screens/mobile-stream";
 import MultiScreen from "src/screens/multi";
+import PopoutInfoWidget from "src/screens/popout-info-widget";
+import PopoutLivestream from "src/screens/popout-livestream";
+import PopoutMultistream from "src/screens/popout-multistream";
+import PopoutStreamMonitor from "src/screens/popout-stream-monitor";
 import SupportScreen from "src/screens/support";
 import { useStore } from "store";
 import {
@@ -594,6 +598,26 @@ export default function Shell() {
             component={DanmuOBSScreen}
             options={{ headerShown: false }}
           />
+          <RootStack.Screen
+            name="PopoutStreamMonitor"
+            component={PopoutStreamMonitor}
+            options={{ headerShown: false }}
+          />
+          <RootStack.Screen
+            name="PopoutInfoWidget"
+            component={PopoutInfoWidget}
+            options={{ headerShown: false }}
+          />
+          <RootStack.Screen
+            name="PopoutMultistream"
+            component={PopoutMultistream}
+            options={{ headerShown: false }}
+          />
+          <RootStack.Screen
+            name="PopoutLivestream"
+            component={PopoutLivestream}
+            options={{ headerShown: false }}
+          />
         </RootStack.Navigator>
       </Animated.View>
       <LoginModal
diff --git a/js/docs/src/content/docs/features/live-dashboard.md b/js/docs/src/content/docs/features/live-dashboard.md
new file mode 100644
index 00000000..6a5efed2
--- /dev/null
+++ b/js/docs/src/content/docs/features/live-dashboard.md
@@ -0,0 +1,58 @@
+---
+title: Live Dashboard
+description: Monitor and manage your stream from the live dashboard
+---
+
+The live dashboard is your control center while you're streaming. Navigate to it from the pop-up or sidebar once you've started broadcasting, or go directly to `/live`.
+
+It shows:
+
+- Stream Monitor: a live preview of your ingest feed with connection quality and stream title
+- Information Widget: current bitrate, resolution, FPS, codec, and viewer count with a bitrate history chart
+- Multistream Status: toggle individual multistream destinations on and off
+- Chat Panel: live chat with message input
+- Stream Settings: announce or update your livestream, manage metadata, and moderate
+
+The layout adjusts to your screen width. On wide screens all panels are visible at once, and on narrower screens it stacks vertically with a button to open chat in a separate window.
+
+## Widget popouts
+
+Each dashboard widget is also available as a standalone page, useful for floating browser windows while you stream: for example, keeping stream settings in a small window on a second monitor.
+
+All popout pages require you to be logged in. If you aren't, the login flow will run in the same window before loading the widget.
+
+### Stream Monitor
+
+```
+https://stream.place/widgets/stream-monitor
+```
+
+Shows the live preview of your ingest feed, connection quality indicator, and stream title. You can toggle between the live feed and a thumbnail snapshot.
+
+### Information Widget
+
+```
+https://stream.place/widgets/info
+```
+
+Shows bitrate, resolution, FPS, codec, and viewer count, with a rolling bitrate history chart.
+
+### Multistream Status
+
+```
+https://stream.place/widgets/multistream
+```
+
+Lists all your configured multistream destinations with their current status, and lets you toggle each one on or off without going back to the main dashboard.
+
+### Stream Settings
+
+```
+https://stream.place/widgets/livestream
+```
+
+The full stream settings panel: announce a new livestream, update the title or metadata, and end the stream. Equivalent to the Stream Settings column in the main dashboard.
+
+### Chat
+
+Chat has its own popout with additional options for customization. See the [Chat Popout](/features/chat-popout) page for details.
-- 
2.51.2