@streamplace/components 0.7.32 → 0.7.35

package/dist/streamplace-store/graph.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateFollowRecord = useCreateFollowRecord;
+exports.useDeleteFollowRecord = useDeleteFollowRecord;
+exports.useGraphManager = useGraphManager;
+const react_1 = require("react");
+const streamplace_store_1 = require("./streamplace-store");
+const xrpc_1 = require("./xrpc");
+function useCreateFollowRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const createFollow = async (subjectDID) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        try {
+            const record = {
+                $type: "app.bsky.graph.follow",
+                subject: subjectDID,
+                createdAt: new Date().toISOString(),
+            };
+            const result = await agent.com.atproto.repo.createRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                record,
+            });
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return { createFollow, isLoading };
+}
+function useDeleteFollowRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const deleteFollow = async (followRecordUri) => {
+        if (!agent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        try {
+            const result = await agent.com.atproto.repo.deleteRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                rkey: followRecordUri.split("/").pop(),
+            });
+            return result;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return { deleteFollow, isLoading };
+}
+function useGraphManager(subjectDID) {
+    const agent = (0, xrpc_1.usePDSAgent)();
+    const [isFollowing, setIsFollowing] = (0, react_1.useState)(null);
+    const [followUri, setFollowUri] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const userDID = agent?.did;
+    const streamplaceUrl = (0, streamplace_store_1.useStreamplaceStore)((state) => state.url);
+    const fetchFollowStatus = async () => {
+        if (!userDID || !subjectDID || !streamplaceUrl) {
+            setIsFollowing(null);
+            setFollowUri(null);
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${streamplaceUrl}/xrpc/place.stream.graph.getFollowingUser?subjectDID=${encodeURIComponent(subjectDID)}&userDID=${encodeURIComponent(userDID)}`, {
+                credentials: "include",
+            });
+            if (!res.ok) {
+                const errorText = await res.text();
+                throw new Error(`Failed to fetch follow status: ${errorText}`);
+            }
+            const data = await res.json();
+            if (data.follow) {
+                setIsFollowing(true);
+                setFollowUri(data.follow.uri);
+            }
+            else {
+                setIsFollowing(false);
+                setFollowUri(null);
+            }
+        }
+        catch (err) {
+            setError(`Could not determine follow state: ${err instanceof Error ? err.message : `Unknown error: ${err}`}`);
+            setIsFollowing(null);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!userDID || !subjectDID) {
+            setIsFollowing(null);
+            setFollowUri(null);
+            setError(null);
+            return;
+        }
+        fetchFollowStatus();
+    }, [userDID, subjectDID, streamplaceUrl]);
+    const follow = async () => {
+        if (!agent || !subjectDID) {
+            throw new Error("Cannot follow: not logged in or no subject DID");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        setIsLoading(true);
+        setError(null);
+        const previousState = isFollowing;
+        setIsFollowing(true); // Optimistic
+        try {
+            const record = {
+                $type: "app.bsky.graph.follow",
+                subject: subjectDID,
+                createdAt: new Date().toISOString(),
+            };
+            const result = await agent.com.atproto.repo.createRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                record,
+            });
+            setFollowUri(result.data.uri);
+            setIsFollowing(true);
+        }
+        catch (err) {
+            setIsFollowing(previousState);
+            const errorMsg = `Failed to follow: ${err instanceof Error ? err.message : "Unknown error"}`;
+            setError(errorMsg);
+            throw new Error(errorMsg);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const unfollow = async () => {
+        if (!agent || !subjectDID) {
+            throw new Error("Cannot unfollow: not logged in or no subject DID");
+        }
+        if (!agent.did) {
+            throw new Error("No user DID found, assuming not logged in");
+        }
+        if (!followUri) {
+            throw new Error("Cannot unfollow: no follow URI found");
+        }
+        setIsLoading(true);
+        setError(null);
+        const previousState = isFollowing;
+        const previousUri = followUri;
+        setIsFollowing(false); // Optimistic
+        setFollowUri(null);
+        try {
+            await agent.com.atproto.repo.deleteRecord({
+                repo: agent.did,
+                collection: "app.bsky.graph.follow",
+                rkey: followUri.split("/").pop(),
+            });
+            setIsFollowing(false);
+            setFollowUri(null);
+        }
+        catch (err) {
+            setIsFollowing(previousState);
+            setFollowUri(previousUri);
+            const errorMsg = `Failed to unfollow: ${err instanceof Error ? err.message : "Unknown error"}`;
+            setError(errorMsg);
+            throw new Error(errorMsg);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return {
+        isFollowing,
+        followUri,
+        isLoading,
+        error,
+        follow,
+        unfollow,
+        refresh: fetchFollowStatus,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.32",
+  "version": "0.7.35",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -54,5 +54,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "8c9f6186d1e718bcc4dfe84fe8c681680dddcf0e"
+  "gitHead": "eaefc85434e81e296c7248f6e6965a2f31d50ff8"
 }

package/src/components/chat/chat.tsx

@@ -136,124 +136,112 @@ const ActionsBar = memo(
   },
 );
 
-const ChatLine = memo(
-  ({
-    item,
-    canModerate,
-  }: {
-    item: ChatMessageViewHydrated;
-    canModerate: boolean;
-  }) => {
-    const setReply = useSetReplyToMessage();
-    const setModMsg = usePlayerStore((state) => state.setModMessage);
-    const swipeableRef = useRef<SwipeableMethods | null>(null);
-    const [isHovered, setIsHovered] = useState(false);
-    const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
+  const setReply = useSetReplyToMessage();
+  const setModMsg = usePlayerStore((state) => state.setModMessage);
+  const swipeableRef = useRef<SwipeableMethods | null>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-    const handleHoverIn = () => {
+  const handleHoverIn = () => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setIsHovered(true);
+  };
+
+  const handleHoverOut = () => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsHovered(false);
+    }, 50);
+  };
+
+  useEffect(() => {
+    return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
       }
-      setIsHovered(true);
-    };
-
-    const handleHoverOut = () => {
-      hoverTimeoutRef.current = setTimeout(() => {
-        setIsHovered(false);
-      }, 50);
     };
+  }, []);
 
-    useEffect(() => {
-      return () => {
-        if (hoverTimeoutRef.current) {
-          clearTimeout(hoverTimeoutRef.current);
-        }
-      };
-    }, []);
-
-    if (item.author.did === "did:sys:system") {
-      return (
-        <SystemMessage
-          timestamp={new Date(item.record.createdAt)}
-          title={item.record.text}
-        />
-      );
-    }
-
-    if (Platform.OS === "web") {
-      return (
-        <View
-          style={[
-            py[1],
-            px[2],
-            {
-              position: "relative",
-              borderRadius: 8,
-              minWidth: 0,
-              maxWidth: "100%",
-            },
-            isHovered && bg.gray[950],
-          ]}
-          onPointerEnter={handleHoverIn}
-          onPointerLeave={handleHoverOut}
-        >
-          <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
-            <RenderChatMessage item={item} />
-          </Pressable>
-          <ActionsBar
-            item={item}
-            visible={isHovered}
-            hoverTimeoutRef={hoverTimeoutRef}
-          />
-        </View>
-      );
-    }
+  if (item.author.did === "did:sys:system") {
+    return (
+      <SystemMessage
+        timestamp={new Date(item.record.createdAt)}
+        title={item.record.text}
+      />
+    );
+  }
 
+  if (Platform.OS === "web") {
     return (
-      <>
-        <Swipeable
-          containerStyle={[py[1]]}
-          friction={2}
-          enableTrackpadTwoFingerGesture
-          rightThreshold={40}
-          leftThreshold={40}
-          renderRightActions={
-            Platform.OS === "android" ? undefined : RightAction
-          }
-          renderLeftActions={Platform.OS === "android" ? undefined : LeftAction}
-          overshootFriction={9}
-          ref={swipeableRef}
-          onSwipeableOpen={(r) => {
-            if (r === (Platform.OS === "android" ? "right" : "left")) {
-              setReply(item);
-            }
-            if (r === (Platform.OS === "android" ? "left" : "right")) {
-              setModMsg(item);
-            }
-            // close this swipeable
-            const swipeable = swipeableRef.current;
-            if (swipeable) {
-              swipeable.close();
-            }
-          }}
-        >
+      <View
+        style={[
+          py[1],
+          px[2],
+          {
+            position: "relative",
+            borderRadius: 8,
+            minWidth: 0,
+            maxWidth: "100%",
+          },
+          isHovered && bg.gray[950],
+        ]}
+        onPointerEnter={handleHoverIn}
+        onPointerLeave={handleHoverOut}
+      >
+        <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
           <RenderChatMessage item={item} />
-        </Swipeable>
-      </>
+        </Pressable>
+        <ActionsBar
+          item={item}
+          visible={isHovered}
+          hoverTimeoutRef={hoverTimeoutRef}
+        />
+      </View>
     );
-  },
-);
+  }
+
+  return (
+    <>
+      <Swipeable
+        containerStyle={[py[1]]}
+        friction={2}
+        enableTrackpadTwoFingerGesture
+        rightThreshold={40}
+        leftThreshold={40}
+        renderRightActions={Platform.OS === "android" ? undefined : RightAction}
+        renderLeftActions={Platform.OS === "android" ? undefined : LeftAction}
+        overshootFriction={9}
+        ref={swipeableRef}
+        onSwipeableOpen={(r) => {
+          if (r === (Platform.OS === "android" ? "right" : "left")) {
+            setReply(item);
+          }
+          if (r === (Platform.OS === "android" ? "left" : "right")) {
+            setModMsg(item);
+          }
+          // close this swipeable
+          const swipeable = swipeableRef.current;
+          if (swipeable) {
+            swipeable.close();
+          }
+        }}
+      >
+        <RenderChatMessage item={item} />
+      </Swipeable>
+    </>
+  );
+});
 
 export function Chat({
   shownMessages = SHOWN_MSGS,
   style: propsStyle,
-  canModerate = false,
   ...props
 }: ComponentProps<typeof View> & {
   shownMessages?: number;
   style?: ComponentProps<typeof View>["style"];
-  canModerate?: boolean;
 }) {
   const chat = useChat();
   const [isScrolledUp, setIsScrolledUp] = useState(false);
@@ -276,7 +264,7 @@ export function Chat({
   if (!chat)
     return (
       <View style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }]}>
-        <Text>Loading chaat...</Text>
+        <Text>Loading chat...</Text>
       </View>
     );
 
@@ -295,9 +283,7 @@ export function Chat({
         data={chat.slice(0, shownMessages)}
         inverted={true}
         keyExtractor={keyExtractor}
-        renderItem={({ item, index }) => (
-          <ChatLine item={item} canModerate={canModerate} />
-        )}
+        renderItem={({ item, index }) => <ChatLine item={item} />}
         removeClippedSubviews={true}
         maxToRenderPerBatch={10}
         initialNumToRender={10}

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

@@ -1,7 +1,7 @@
 import { TriggerRef, useRootContext } from "@rn-primitives/dropdown-menu";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { gap, mr, w } from "../../lib/theme/atoms";
-import { usePlayerStore } from "../../player-store";
+import { useIsMyStream, usePlayerStore } from "../../player-store";
 import {
   useCreateBlockRecord,
   useCreateHideChatRecord,
@@ -51,6 +51,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
   const setModMessage = usePlayerStore((x) => x.setModMessage);
   const deleteChatMessage = useDeleteChatMessage();
+  const isMyStream = useIsMyStream();
 
   // get the channel did
   const channelId = usePlayerStore((state) => state.src);
@@ -119,7 +120,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
             </DropdownMenuGroup>
 
             {/* TODO: Checking for non-owner moderators */}
-            {channelId === handle && (
+            {isMyStream() && (
               <DropdownMenuGroup title={`Moderation actions`}>
                 <DropdownMenuItem
                   disabled={isHideLoading || messageRemoved}

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

@@ -10,7 +10,6 @@ interface ChatPanelProps {
   isLive: boolean;
   isConnected: boolean;
   messagesPerMinute?: number;
-  canModerate?: boolean;
   shownMessages?: number;
 }
 
@@ -18,7 +17,6 @@ export default function ChatPanel({
   isLive,
   isConnected,
   messagesPerMinute = 0,
-  canModerate = false,
   shownMessages = 50,
 }: ChatPanelProps) {
   return (
@@ -59,7 +57,7 @@ export default function ChatPanel({
       </View>
       <View style={[flex.values[1], px[2], { minHeight: 0 }]}>
         <View style={[flex.values[1], { minHeight: 0 }]}>
-          <Chat canModerate={canModerate} shownMessages={shownMessages} />
+          <Chat shownMessages={shownMessages} />
         </View>
         <View style={[{ flexShrink: 0 }]}>
           <ChatBox

package/src/components/dashboard/header.tsx

@@ -1,5 +1,5 @@
-import { Car, Radio, Users } from "lucide-react-native";
-import { Text, View } from "react-native";
+import { AlertCircle, Car, Radio, Users } from "lucide-react-native";
+import { Pressable, Text, View } from "react-native";
 import * as zero from "../../ui";
 
 const { bg, r, borders, px, py, text, layout, gap } = zero;
@@ -103,6 +103,8 @@ interface HeaderProps {
   bitrate?: string;
   timeBetweenSegments?: number;
   connectionStatus?: "excellent" | "good" | "poor" | "offline";
+  problemsCount?: number;
+  onProblemsPress?: () => void;
 }
 
 export default function Header({
@@ -113,6 +115,8 @@ export default function Header({
   bitrate = "0 mbps",
   timeBetweenSegments = 0,
   connectionStatus = "offline",
+  problemsCount = 0,
+  onProblemsPress,
 }: HeaderProps) {
   const getConnectionQuality = (): "good" | "warning" | "error" => {
     if (timeBetweenSegments <= 1500) return "good";
@@ -139,7 +143,37 @@ export default function Header({
           <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
             {streamTitle}
           </Text>
-          <StatusIndicator status={connectionStatus} isLive={isLive} />
+          <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[3]]}>
+            <StatusIndicator status={connectionStatus} isLive={isLive} />
+            {problemsCount > 0 && (
+              <Pressable onPress={onProblemsPress}>
+                <View
+                  style={[
+                    layout.flex.row,
+                    layout.flex.alignCenter,
+                    gap.all[1],
+                    px[2],
+                    py[1],
+                    r.md,
+                    bg.orange[900],
+                    borders.width.thin,
+                    borders.color.orange[700],
+                    { marginVertical: -8 },
+                  ]}
+                >
+                  <AlertCircle size={14} color="#fb923c" />
+                  <Text
+                    style={[
+                      text.orange[400],
+                      { fontSize: 11, fontWeight: "600" },
+                    ]}
+                  >
+                    {problemsCount} {problemsCount === 1 ? "Issue" : "Issues"}
+                  </Text>
+                </View>
+              </Pressable>
+            )}
+          </View>
         </View>
       </View>
 

package/src/components/dashboard/index.tsx

@@ -2,4 +2,4 @@ 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";
+export { default as Problems, ProblemsWrapperRef } from "./problems";