@streamplace/components 0.7.9 → 0.7.13

package/src/components/chat/chat-box.tsx

@@ -246,6 +246,15 @@ export function ChatBox({
       reply: replyTo || undefined,
     });
     setSubmitting(false);
+
+    // if we press "send" button, we want the same action as pressing "Enter"
+    // if we're already focused no need to do extra work
+    if (textAreaRef.current && !textAreaRef.current.isFocused()) {
+      textAreaRef.current.focus();
+      requestAnimationFrame(() => {
+        textAreaRef.current?.focus();
+      });
+    }
   };
   useEffect(() => {
     if (replyTo && textAreaRef.current) {
@@ -327,7 +336,10 @@ export function ChatBox({
           numberOfLines={1}
           value={message}
           enterKeyHint="send"
-          onSubmitEditing={submit}
+          onSubmitEditing={(e) => {
+            e.preventDefault();
+            submit();
+          }}
           multiline={false}
           onChangeText={(text) => {
             setMessage(text);
@@ -346,6 +358,9 @@ export function ChatBox({
                 if (filteredEmojis.length > 0) {
                   handleEmojiSelect(filteredEmojis[highlightedIndex]);
                 }
+              } else {
+                k.preventDefault();
+                submit();
               }
             } else if (k.nativeEvent.key === "ArrowUp") {
               if (showSuggestions || showEmojiSuggestions) {
@@ -376,6 +391,9 @@ export function ChatBox({
             }
           }}
           style={[chatBoxStyle]}
+          // "submit" won't blur on enter
+          submitBehavior="submit"
+          placeholder="Type a message..."
         />
         <Button
           disabled={submitting}

package/src/components/chat/chat-message.tsx

@@ -7,16 +7,7 @@ import { memo, useCallback } from "react";
 import { Linking, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { RichtextSegment, segmentize } from "../../lib/facet";
-import {
-  borders,
-  flex,
-  gap,
-  ml,
-  mr,
-  opacity,
-  pl,
-  w,
-} from "../../lib/theme/atoms";
+import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
 import { atoms, colors, layout } from "../ui";
 
 interface Facet {
@@ -121,7 +112,7 @@ export const RenderChatMessage = memo(
             style={[
               gap.all[2],
               layout.flex.row,
-              w.percent[100],
+              { minWidth: 0, maxWidth: "100%" },
               borders.left.width.medium,
               borders.left.color.gray[700],
               ml[4],
@@ -129,7 +120,14 @@ export const RenderChatMessage = memo(
               opacity[80],
             ]}
           >
-            <Text numberOfLines={1} style={[flex.shrink[1], mr[4]]}>
+            <Text
+              numberOfLines={1}
+              style={[
+                flex.shrink[1],
+                mr[4],
+                { minWidth: 0, overflow: "hidden" },
+              ]}
+            >
               <Text
                 style={{
                   color: getRgbColor((item.replyTo.chatProfile as any).color),
@@ -149,7 +147,13 @@ export const RenderChatMessage = memo(
             </Text>
           </View>
         )}
-        <View style={[gap.all[2], layout.flex.row, w.percent[100]]}>
+        <View
+          style={[
+            gap.all[2],
+            layout.flex.row,
+            { minWidth: 0, maxWidth: "100%" },
+          ]}
+        >
           {showTime && (
             <Text
               style={{
@@ -160,7 +164,11 @@ export const RenderChatMessage = memo(
               {formatTime(item.record.createdAt)}
             </Text>
           )}
-          <Text weight="bold" color="default" style={[flex.shrink[1]]}>
+          <Text
+            weight="bold"
+            color="default"
+            style={[flex.shrink[1], { minWidth: 0, overflow: "hidden" }]}
+          >
             <Text
               style={[
                 {

package/src/components/chat/chat.tsx

@@ -17,7 +17,7 @@ import {
   useSetReplyToMessage,
   View,
 } from "../../";
-import { bg, flex, px, py, w } from "../../lib/theme/atoms";
+import { bg, flex, px, py } from "../../lib/theme/atoms";
 import { RenderChatMessage } from "./chat-message";
 import { ModView } from "./mod-view";
 
@@ -87,6 +87,8 @@ const ActionsBar = memo(
             padding: 1,
             gap: 4,
             zIndex: 10,
+            maxWidth: 120,
+            flexShrink: 0,
           },
         ]}
       >
@@ -184,13 +186,18 @@ const ChatLine = memo(
           style={[
             py[1],
             px[2],
-            { position: "relative", borderRadius: 8 },
+            {
+              position: "relative",
+              borderRadius: 8,
+              minWidth: 0,
+              maxWidth: "100%",
+            },
             isHovered && bg.gray[950],
           ]}
           onPointerEnter={handleHoverIn}
           onPointerLeave={handleHoverOut}
         >
-          <Pressable>
+          <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
             <RenderChatMessage item={item} />
           </Pressable>
           <ActionsBar
@@ -253,15 +260,23 @@ export function Chat({
 
   if (!chat)
     return (
-      <View style={[flex.shrink[1]]}>
+      <View style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }]}>
         <Text>Loading chaat...</Text>
       </View>
     );
 
   return (
-    <View style={[flex.shrink[1]].concat(propsStyle || [])}>
+    <View
+      style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(
+        propsStyle || [],
+      )}
+    >
       <FlatList
-        style={[flex.grow[1], flex.shrink[1], w.percent[100]]}
+        style={[
+          flex.grow[1],
+          flex.shrink[1],
+          { minWidth: 0, maxWidth: "100%" },
+        ]}
         data={chat.slice(0, shownMessages)}
         inverted={true}
         keyExtractor={keyExtractor}

package/src/components/chat/mod-view.tsx

@@ -45,6 +45,10 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   let { createBlock, isLoading: isBlockLoading } = useCreateBlockRecord();
   let { createHideChat, isLoading: isHideLoading } = useCreateHideChatRecord();
 
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+  const setModMessage = usePlayerStore((x) => x.setModMessage);
+
   // get the channel did
   const channelId = usePlayerStore((state) => state.src);
   // get the logged in user's identity
@@ -56,13 +60,15 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
     </View>;
   }
 
+  const cleanup = () => {
+    setModMessage(null);
+  };
+
   useEffect(() => {
     if (message) {
-      console.log("opening mod view");
       setMessageRemoved(false);
       triggerRef.current?.open();
     } else {
-      console.log("closing mod view");
       triggerRef.current?.close();
     }
   }, [message]);
@@ -70,6 +76,11 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   return (
     <DropdownMenu
       style={[layout.flex.row, layout.flex.alignCenter, gap.all[2], w[80]]}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          cleanup();
+        }
+      }}
     >
       <DropdownMenuTrigger ref={triggerRef}>
         {/* Hidden trigger */}
@@ -155,13 +166,17 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               <DropdownMenuItem
                 onPress={() => {
                   Linking.openURL(
-                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${channelId}`,
+                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`,
                   );
                 }}
               >
                 <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
               </DropdownMenuItem>
-              <ReportButton message={message} />
+              <ReportButton
+                message={message}
+                setReportModalOpen={setReportModalOpen}
+                setReportSubject={setReportSubject}
+              />
             </DropdownMenuGroup>
           </>
         )}
@@ -172,11 +187,13 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
 
 export function ReportButton({
   message,
+  setReportModalOpen,
+  setReportSubject,
 }: {
   message: ChatMessageViewHydrated;
+  setReportModalOpen: (open: boolean) => void;
+  setReportSubject: (subject: any) => void;
 }) {
-  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
-  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
   const { onOpenChange } = useRootContext();
   return (
     <DropdownMenuItem
@@ -188,6 +205,7 @@ export function ReportButton({
           $type: "com.atproto.repo.strongRef",
           uri: message.uri,
           cid: message.cid,
+          context: message,
         });
       }}
     >

package/src/components/dashboard/chat-panel.tsx

@@ -0,0 +1,80 @@
+import { Text, View } from "react-native";
+import emojiData from "../../assets/emoji-data.json";
+import * as zero from "../../ui";
+import { Chat } from "../chat/chat";
+import { ChatBox } from "../chat/chat-box";
+
+const { flex, bg, r, borders, p, px, py, text, layout } = zero;
+
+interface ChatPanelProps {
+  isLive: boolean;
+  isConnected: boolean;
+  messagesPerMinute?: number;
+  canModerate?: boolean;
+  shownMessages?: number;
+}
+
+export default function ChatPanel({
+  isLive,
+  isConnected,
+  messagesPerMinute = 0,
+  canModerate = false,
+  shownMessages = 50,
+}: ChatPanelProps) {
+  return (
+    <View
+      style={[
+        flex.values[1],
+        bg.neutral[900],
+        borders.width.thin,
+        borders.color.neutral[700],
+        layout.flex.column,
+        r.lg,
+      ]}
+    >
+      <View
+        style={[
+          layout.flex.row,
+          layout.flex.spaceBetween,
+          layout.flex.alignCenter,
+          borders.bottom.width.thin,
+          borders.bottom.color.neutral[700],
+          p[4],
+        ]}
+      >
+        <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
+          Chat
+        </Text>
+        <View style={[layout.flex.row, layout.flex.alignCenter]}>
+          <View
+            style={[
+              { width: 6, height: 6, borderRadius: 3 },
+              isLive && isConnected ? bg.green[500] : bg.gray[500],
+            ]}
+          />
+          <Text style={[text.gray[400], { fontSize: 12, marginLeft: 8 }]}>
+            {messagesPerMinute} msg/min
+          </Text>
+        </View>
+      </View>
+      <View style={[flex.values[1], px[2], { minHeight: 0 }]}>
+        <View style={[flex.values[1], { minHeight: 0 }]}>
+          <Chat canModerate={canModerate} shownMessages={shownMessages} />
+        </View>
+        <View style={[{ flexShrink: 0 }]}>
+          <ChatBox
+            emojiData={emojiData}
+            chatBoxStyle={[
+              bg.gray[700],
+              borders.width.thin,
+              borders.color.gray[600],
+              r.md,
+              p[3],
+              !isConnected && { opacity: 0.6 },
+            ]}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/components/dashboard/header.tsx

@@ -0,0 +1,170 @@
+import { Car, Radio, Users } from "lucide-react-native";
+import { Text, View } from "react-native";
+import * as zero from "../../ui";
+
+const { bg, r, borders, px, py, text, layout, gap } = zero;
+
+interface MetricItemProps {
+  icon: any;
+  label: string;
+  value: string;
+  status?: "good" | "warning" | "error";
+}
+
+function MetricItem({ icon: Icon, label, value, status }: MetricItemProps) {
+  const statusColors = {
+    good: text.green[400],
+    warning: text.yellow[400],
+    error: text.red[400],
+  };
+
+  const statusColor = status ? statusColors[status] : text.gray[300];
+
+  return (
+    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+      <Icon size={16} color="#9ca3af" />
+      <View style={[layout.flex.column]}>
+        <Text style={[text.gray[400], { fontSize: 11, fontWeight: "500" }]}>
+          {label}
+        </Text>
+        <Text style={[statusColor, { fontSize: 13, fontWeight: "600" }]}>
+          {value}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+interface StatusIndicatorProps {
+  status: "excellent" | "good" | "poor" | "offline";
+  isLive: boolean;
+}
+
+function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
+  const getStatusColor = () => {
+    if (!isLive) return bg.gray[500];
+    switch (status) {
+      case "excellent":
+        return bg.green[500];
+      case "good":
+        return bg.yellow[500];
+      case "poor":
+        return bg.orange[500];
+      case "offline":
+        return bg.red[500];
+      default:
+        return bg.gray[500];
+    }
+  };
+
+  const getStatusText = () => {
+    if (!isLive) return "OFFLINE";
+    switch (status) {
+      case "excellent":
+        return "EXCELLENT";
+      case "good":
+        return "GOOD";
+      case "poor":
+        return "POOR";
+      case "offline":
+        return "OFFLINE";
+      default:
+        return "UNKNOWN";
+    }
+  };
+
+  return (
+    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+      <View
+        style={[
+          { width: 8, height: 8, borderRadius: 4 },
+          getStatusColor(),
+          !isLive && { opacity: 0.6 },
+        ]}
+      />
+      <Text
+        style={[
+          text.white,
+          { fontSize: 12, fontWeight: "700", letterSpacing: 0.5 },
+          !isLive && text.gray[400],
+        ]}
+      >
+        {getStatusText()}
+      </Text>
+    </View>
+  );
+}
+
+interface HeaderProps {
+  isLive: boolean;
+  streamTitle?: string;
+  viewers?: number;
+  uptime?: string;
+  bitrate?: string;
+  timeBetweenSegments?: number;
+  connectionStatus?: "excellent" | "good" | "poor" | "offline";
+}
+
+export default function Header({
+  isLive,
+  streamTitle = "Live Stream",
+  viewers = 0,
+  uptime = "00:00:00",
+  bitrate = "0 mbps",
+  timeBetweenSegments = 0,
+  connectionStatus = "offline",
+}: HeaderProps) {
+  const getConnectionQuality = (): "good" | "warning" | "error" => {
+    if (timeBetweenSegments <= 1500) return "good";
+    if (timeBetweenSegments <= 3000) return "warning";
+    return "error";
+  };
+
+  return (
+    <View
+      style={[
+        px[4],
+        py[3],
+        r.lg,
+        layout.flex.row,
+        layout.flex.spaceBetween,
+        bg.neutral[900],
+        borders.width.thin,
+        borders.color.neutral[700],
+      ]}
+    >
+      {/* Left side - Stream title and status */}
+      <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[4]]}>
+        <View>
+          <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
+            {streamTitle}
+          </Text>
+          <StatusIndicator status={connectionStatus} isLive={isLive} />
+        </View>
+      </View>
+
+      {/* Right side - Stream metrics */}
+      <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[6]]}>
+        {isLive && (
+          <>
+            <MetricItem
+              icon={Users}
+              label="Viewers"
+              value={viewers.toLocaleString()}
+            />
+            <MetricItem icon={Car} label="Bitrate" value={bitrate} />
+          </>
+        )}
+
+        {!isLive && (
+          <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+            <Radio size={16} color="#6b7280" />
+            <Text style={[text.gray[400], { fontSize: 13 }]}>
+              Stream offline
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/dashboard/index.tsx

@@ -0,0 +1,5 @@
+export { default as ChatPanel } from "./chat-panel";
+export { default as Header } from "./header";
+export { default as InformationWidget } from "./information-widget";
+export { default as ModActions } from "./mod-actions";
+export { default as Problems } from "./problems";