Merge pull request #638 from streamplace/eli/chat-mod-fixes

chat: fix & unify detection of canModerate

js/app/components/live-dashboard/bento-grid.tsx

···
 
   // Calculate derived values
   const isConnected = ingestConnectionState === "connected";
-  const canModerate = isLive && isConnected;
 
   // Calculate uptime
   const getUptime = useCallback((): string => {
···
               isLive={isLive}
               isConnected={isConnected}
               messagesPerMinute={messagesPerMinute}
-              canModerate={canModerate}
             />
           </View>
           <View

js/app/components/mobile/chat.tsx

···
   let agent = usePDSAgent();
 
   const navigation = useNavigation();
-  let canModerate = profile?.handle === handle;
 
   return (
     <View
···
       ]}
     >
       <View style={[flex.values[1]]}>
-        <Chat canModerate={canModerate} />
+        <Chat />
       </View>
       <View style={[layout.flex.column, gap.all[2]]}>
         {agent?.did ? (

js/app/src/screens/chat-popout.native.tsx

···
           </View>
         </View>
         <View style={[zero.flex.values[1], zero.p[4]]}>
-          <Chat canModerate={profile?.handle === user} />
+          <Chat />
           {profile && <ChatBox emojiData={emojiData} isPopout={true} />}
         </View>
       </View>

js/app/src/screens/chat-popout.tsx

···
   useEffect(() => {
     setSrc(user);
   }, [user]);
+
   return (
     <View style={[{ position: "relative" }, zero.flex.values[1], zero.m[2]]}>
       <View
···
           { position: "absolute", width: "100%", minHeight: "100%", bottom: 0 },
         ]}
       >
-        <Chat canModerate={profile?.handle === user} />
+        <Chat />
         {profile && <ChatBox emojiData={emojiData} isPopout={true} />}
       </View>
     </View>

js/components/src/components/chat/chat.tsx

···
   },
 );
 
-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 = () => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setIsHovered(true);
+  };
+
+  const handleHoverOut = () => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsHovered(false);
+    }, 50);
+  };
 
-    const handleHoverIn = () => {
+  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);
···
   if (!chat)
     return (
       <View style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }]}>
-        <Text>Loading chaat...</Text>
+        <Text>Loading chat...</Text>
       </View>
     );
 
···
         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}

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

···
 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,
···
   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);
···
             </DropdownMenuGroup>
 
             {/* TODO: Checking for non-owner moderators */}
-            {channelId === handle && (
+            {isMyStream() && (
               <DropdownMenuGroup title={`Moderation actions`}>
                 <DropdownMenuItem
                   disabled={isHideLoading || messageRemoved}

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

···
   isLive: boolean;
   isConnected: boolean;
   messagesPerMinute?: number;
-  canModerate?: boolean;
   shownMessages?: number;
 }
 
···
   isLive,
   isConnected,
   messagesPerMinute = 0,
-  canModerate = false,
   shownMessages = 50,
 }: ChatPanelProps) {
   return (
···
       </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

js/components/src/player-store/player-store.tsx

···
 import { ChatMessageViewHydrated } from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
 import { useLivestreamStore } from "../livestream-store";
+import { useStreamplaceStore } from "../streamplace-store";
 import { PlayerContext } from "./context";
 import {
   IngestMediaSource,
···
   }
   return now - Date.parse(segment.startTime) > 10000;
 };
+
+export const useIsMyStream = () => {
+  const myHandle = useStreamplaceStore((state) => state.handle);
+  const myDid = useStreamplaceStore((state) => state.oauthSession?.did);
+  const channelId = usePlayerStore((state) => state.src);
+  return () => {
+    return myHandle === channelId || myDid === channelId;
+  };
+};