@streamplace/components 0.7.30 → 0.7.34

package/dist/components/chat/chat.js

@@ -81,7 +81,7 @@ const ActionsBar = (0, react_1.memo)(({ item, visible, hoverTimeoutRef, }) => {
                     }
                 }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Ellipsis, { color: "white", size: 16 }) })] }));
 });
-const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
+const ChatLine = (0, react_1.memo)(({ item }) => {
     const setReply = (0, __1.useSetReplyToMessage)();
     const setModMsg = (0, __1.usePlayerStore)((state) => state.setModMessage);
     const swipeableRef = (0, react_1.useRef)(null);
@@ -136,7 +136,7 @@ const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
                 }
             }, children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }) }));
 });
-function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = false, ...props }) {
+function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, ...props }) {
     const chat = (0, __1.useChat)();
     const [isScrolledUp, setIsScrolledUp] = (0, react_1.useState)(false);
     const handleScroll = (event) => {
@@ -151,10 +151,10 @@ function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = fal
         }
     };
     if (!chat)
-        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
+        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chat..." }) }));
     return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.FlatList, { style: [
                     atoms_1.flex.grow[1],
                     atoms_1.flex.shrink[1],
                     { minWidth: 0, maxWidth: "100%" },
-                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16, nestedScrollEnabled: true }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
+                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => (0, jsx_runtime_1.jsx)(ChatLine, { item: item }), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16, nestedScrollEnabled: true }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
 }

package/dist/components/chat/mod-view.js

@@ -26,6 +26,7 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const setModMessage = (0, player_store_1.usePlayerStore)((x) => x.setModMessage);
     const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
+    const isMyStream = (0, player_store_1.useIsMyStream)();
     // get the channel did
     const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
     // get the logged in user's identity
@@ -60,7 +61,7 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                                 hour: "2-digit",
                                                 minute: "2-digit",
                                                 hour12: false,
-                                            }), " ", "@", message.author.handle, ": ", message.record.text] }) }) }) }), channelId === handle && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: isHideLoading || messageRemoved, onPress: () => {
+                                            }), " ", "@", message.author.handle, ": ", message.record.text] }) }) }) }), isMyStream() && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: isHideLoading || messageRemoved, onPress: () => {
                                         if (isHideLoading || messageRemoved)
                                             return;
                                         createHideChat(message.uri)
@@ -89,6 +90,7 @@ var DeleteState;
 function DeleteButton({ message, deleteChatMessage, }) {
     const [confirming, setConfirming] = (0, react_1.useState)(DeleteState.None);
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    const toast = (0, ui_1.useToast)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!message)
                 return;
@@ -99,10 +101,15 @@ function DeleteButton({ message, deleteChatMessage, }) {
             if (confirming === DeleteState.Confirmed) {
                 setConfirming(DeleteState.Deleting);
             }
-            deleteChatMessage(message.uri).then(() => {
+            deleteChatMessage(message.uri)
+                .then(() => {
                 // wait ~a second before resetting state to allow deletion to take effect
                 setTimeout(() => setConfirming(DeleteState.None), 1000);
                 onOpenChange?.(false);
+            })
+                .catch((e) => {
+                toast.show("Couldn't delete the message", e);
+                setConfirming(DeleteState.None);
             });
         }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming === DeleteState.Confirmed
                 ? "Are you sure? Click again to confirm."

package/dist/components/dashboard/chat-panel.js

@@ -9,7 +9,7 @@ const zero = tslib_1.__importStar(require("../../ui"));
 const chat_1 = require("../chat/chat");
 const chat_box_1 = require("../chat/chat-box");
 const { flex, bg, r, borders, p, px, py, text, layout } = zero;
-function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, canModerate = false, shownMessages = 50, }) {
+function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, shownMessages = 50, }) {
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
             flex.values[1],
             bg.neutral[900],
@@ -27,7 +27,7 @@ function ChatPanel({ isLive, isConnected, messagesPerMinute = 0, canModerate = f
                 ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 18, fontWeight: "600" }], children: "Chat" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.row, layout.flex.alignCenter], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                     { width: 6, height: 6, borderRadius: 3 },
                                     isLive && isConnected ? bg.green[500] : bg.gray[500],
-                                ] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12, marginLeft: 8 }], children: [messagesPerMinute, " msg/min"] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1], px[2], { minHeight: 0 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1], { minHeight: 0 }], children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { canModerate: canModerate, shownMessages: shownMessages }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexShrink: 0 }], children: (0, jsx_runtime_1.jsx)(chat_box_1.ChatBox, { emojiData: emoji_data_json_1.default, chatBoxStyle: [
+                                ] }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [text.gray[400], { fontSize: 12, marginLeft: 8 }], children: [messagesPerMinute, " msg/min"] })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1], px[2], { minHeight: 0 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1], { minHeight: 0 }], children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { shownMessages: shownMessages }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ flexShrink: 0 }], children: (0, jsx_runtime_1.jsx)(chat_box_1.ChatBox, { emojiData: emoji_data_json_1.default, chatBoxStyle: [
                                 bg.gray[700],
                                 borders.width.thin,
                                 borders.color.gray[600],

package/dist/livestream-store/chat.js

@@ -102,14 +102,14 @@ const useCreateChatMessage = () => {
 exports.useCreateChatMessage = useCreateChatMessage;
 const useDeleteChatMessage = () => {
     const pdsAgent = (0, xrpc_1.usePDSAgent)();
-    if (!pdsAgent) {
-        throw new Error("No PDS agent found");
-    }
     const userDID = (0, streamplace_store_1.useDID)();
-    if (!userDID) {
-        throw new Error("No user DID found");
-    }
     return async (uri) => {
+        if (!pdsAgent) {
+            throw new Error("No PDS agent found");
+        }
+        if (!userDID) {
+            throw new Error("No user DID found");
+        }
         const rkey = uri.split("/").pop();
         if (!rkey) {
             throw new Error("No rkey found");

package/dist/player-store/player-store.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOffline = exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
+exports.useIsMyStream = exports.useOffline = exports.intoPlayerProtocol = exports.usePlayerProtocol = exports.makePlayerStore = void 0;
 exports.usePlayerContext = usePlayerContext;
 exports.getPlayerStoreById = getPlayerStoreById;
 exports.getFirstPlayerID = getFirstPlayerID;
@@ -9,6 +9,7 @@ exports.usePlayerStore = usePlayerStore;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
 const livestream_store_1 = require("../livestream-store");
+const streamplace_store_1 = require("../streamplace-store");
 const context_1 = require("./context");
 const player_state_1 = require("./player-state");
 const makePlayerStore = (id) => {
@@ -195,3 +196,12 @@ const useOffline = () => {
     return now - Date.parse(segment.startTime) > 10000;
 };
 exports.useOffline = useOffline;
+const useIsMyStream = () => {
+    const myHandle = (0, streamplace_store_1.useStreamplaceStore)((state) => state.handle);
+    const myDid = (0, streamplace_store_1.useStreamplaceStore)((state) => state.oauthSession?.did);
+    const channelId = usePlayerStore((state) => state.src);
+    return () => {
+        return myHandle === channelId || myDid === channelId;
+    };
+};
+exports.useIsMyStream = useIsMyStream;

package/package.json

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

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,
@@ -21,6 +21,7 @@ import {
   layout,
   ResponsiveDropdownMenuContent,
   Text,
+  useToast,
   View,
 } from "../ui";
 
@@ -50,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);
@@ -118,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}
@@ -210,6 +212,7 @@ export function DeleteButton({
 }) {
   const [confirming, setConfirming] = useState<DeleteState>(DeleteState.None);
   const { onOpenChange } = useRootContext();
+  const toast = useToast();
   return (
     <DropdownMenuItem
       onPress={() => {
@@ -221,11 +224,16 @@ export function DeleteButton({
         if (confirming === DeleteState.Confirmed) {
           setConfirming(DeleteState.Deleting);
         }
-        deleteChatMessage(message.uri).then(() => {
-          // wait ~a second before resetting state to allow deletion to take effect
-          setTimeout(() => setConfirming(DeleteState.None), 1000);
-          onOpenChange?.(false);
-        });
+        deleteChatMessage(message.uri)
+          .then(() => {
+            // wait ~a second before resetting state to allow deletion to take effect
+            setTimeout(() => setConfirming(DeleteState.None), 1000);
+            onOpenChange?.(false);
+          })
+          .catch((e) => {
+            toast.show("Couldn't delete the message", e);
+            setConfirming(DeleteState.None);
+          });
       }}
     >
       <Text color="destructive">

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/livestream-store/chat.tsx

@@ -135,14 +135,14 @@ export const useCreateChatMessage = () => {
 
 export const useDeleteChatMessage = () => {
   const pdsAgent = usePDSAgent();
-  if (!pdsAgent) {
-    throw new Error("No PDS agent found");
-  }
   const userDID = useDID();
-  if (!userDID) {
-    throw new Error("No user DID found");
-  }
   return async (uri: string) => {
+    if (!pdsAgent) {
+      throw new Error("No PDS agent found");
+    }
+    if (!userDID) {
+      throw new Error("No user DID found");
+    }
     const rkey = uri.split("/").pop();
     if (!rkey) {
       throw new Error("No rkey found");

package/src/player-store/player-store.tsx

@@ -3,6 +3,7 @@ import { useContext, useEffect, useState } from "react";
 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,
@@ -271,3 +272,12 @@ export const useOffline = () => {
   }
   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;
+  };
+};