From 28c4039887b096ea4e090d3a6f0a59b145a8992d Mon Sep 17 00:00:00 2001
From: Eli Mallon <eli@aquareum.tv>
Date: Sat, 12 Apr 2025 13:46:01 -0700
Subject: [PATCH] chat: fix chat popup in prod

---
 hack/firehose-proxy.sh              |  8 ++++
 js/app/components/chat/chat-box.tsx | 70 ++++++++++++++++-------------
 2 files changed, 48 insertions(+), 30 deletions(-)
 create mode 100755 hack/firehose-proxy.sh

diff --git a/hack/firehose-proxy.sh b/hack/firehose-proxy.sh
new file mode 100755
index 000000000..8a87fd476
--- /dev/null
+++ b/hack/firehose-proxy.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+set -euo pipefail
+
+upstream="${1:-"wss://bsky.network"}"
+echo "listening on port 8765"
+
+websocat --binary -E ws-l:0.0.0.0:8765 $upstream/xrpc/com.atproto.sync.subscribeRepos
\ No newline at end of file
diff --git a/js/app/components/chat/chat-box.tsx b/js/app/components/chat/chat-box.tsx
index 7c98b0f40..0dc5de2c0 100644
--- a/js/app/components/chat/chat-box.tsx
+++ b/js/app/components/chat/chat-box.tsx
@@ -5,7 +5,10 @@ import {
   selectIsReady,
   selectUserProfile,
 } from "features/bluesky/blueskySlice";
-import { usePlayerLivestream } from "features/player/playerSlice";
+import {
+  LivestreamViewHydrated,
+  usePlayerLivestream,
+} from "features/player/playerSlice";
 import {
   chatWarn,
   selectChatWarned,
@@ -26,6 +29,7 @@ export default function ChatBox({ isPopout }: { isPopout?: boolean }) {
   const livestream = useAppSelector(usePlayerLivestream());
   const textAreaRef = useRef<Input>(null);
   const dispatch = useAppDispatch();
+  const navigate = useNavigation();
   const submit = () => {
     if (!isWeb) {
       Keyboard.dismiss();
@@ -49,7 +53,19 @@ export default function ChatBox({ isPopout }: { isPopout?: boolean }) {
 
   return (
     <View position="relative">
-      {loggedOut && <Login />}
+      {loggedOut && (
+        <View flexDirection="row" justifyContent="center">
+          <Button
+            backgroundColor="$accentColor"
+            onPress={() => {
+              navigate.navigate("Login");
+            }}
+          >
+            Log in to chat
+          </Button>
+          <PopoutButton livestream={livestream} isPopout={isPopout} />
+        </View>
+      )}
       {!loggedOut && (
         <Form
           zIndex={1}
@@ -112,22 +128,7 @@ export default function ChatBox({ isPopout }: { isPopout?: boolean }) {
               buttonProps={{ backgroundColor: "transparent" }}
               text={(color) => <Palette size={16} color={color} />}
             />
-            {isWeb && !isPopout && (
-              <Button
-                flexShrink={0}
-                backgroundColor="transparent"
-                disabled={loggedOut}
-                onPress={() => {
-                  window.open(
-                    "http://127.0.0.1:38080/chat-popout/iame.li",
-                    "_blank",
-                    "popup=true",
-                  );
-                }}
-              >
-                <SquareArrowOutUpRight size={16} />
-              </Button>
-            )}
+            <PopoutButton livestream={livestream} isPopout={isPopout} />
             <Button
               flexShrink={0}
               backgroundColor="transparent"
@@ -145,18 +146,27 @@ export default function ChatBox({ isPopout }: { isPopout?: boolean }) {
   );
 }
 
-const Login = () => {
-  const navigate = useNavigation();
+const PopoutButton = ({
+  livestream,
+  isPopout,
+}: {
+  livestream: LivestreamViewHydrated | null;
+  isPopout?: boolean;
+}) => {
+  if (!isWeb || isPopout) {
+    return <></>;
+  }
   return (
-    <View alignItems="center">
-      <Button
-        backgroundColor="$accentColor"
-        onPress={() => {
-          navigate.navigate("Login");
-        }}
-      >
-        Log in to chat
-      </Button>
-    </View>
+    <Button
+      flexShrink={0}
+      backgroundColor="transparent"
+      onPress={() => {
+        const u = new URL(window.location.href);
+        u.pathname = `/chat-popout/${livestream?.author?.did}`;
+        window.open(u.toString(), "_blank", "popup=true");
+      }}
+    >
+      <SquareArrowOutUpRight size={16} />
+    </Button>
   );
 };
-- 
2.51.2