@streamplace/components 0.7.2 → 0.7.7

package/src/components/chat/chat.tsx

@@ -1,5 +1,5 @@
-import { Reply, ShieldEllipsis } from "lucide-react-native";
-import { ComponentProps, memo, useRef } from "react";
+import { Ellipsis, Reply, ShieldEllipsis } from "lucide-react-native";
+import { ComponentProps, memo, useEffect, useRef, useState } from "react";
 import { FlatList, Platform, Pressable } from "react-native";
 import Swipeable, {
   SwipeableMethods,
@@ -10,13 +10,14 @@ import Reanimated, {
 } from "react-native-reanimated";
 import { ChatMessageViewHydrated } from "streamplace";
 import {
+  SystemMessage,
   Text,
   useChat,
   usePlayerStore,
   useSetReplyToMessage,
   View,
 } from "../../";
-import { flex, py, w } from "../../lib/theme/atoms";
+import { bg, flex, px, py, w } from "../../lib/theme/atoms";
 import { RenderChatMessage } from "./chat-message";
 import { ModView } from "./mod-view";
 
@@ -48,57 +49,205 @@ function LeftAction(prog: SharedValue<number>, drag: SharedValue<number>) {
   );
 }
 
+// ios/android, 25, else 100 msgs
 const SHOWN_MSGS =
-  Platform.OS === "android" || Platform.OS === "ios" ? 100 : 25;
+  Platform.OS === "ios" || Platform.OS === "android" ? 25 : 100;
 
 const keyExtractor = (item: ChatMessageViewHydrated, index: number) => {
   return `${item.uri}`;
 };
 
-const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
-  const setReply = useSetReplyToMessage();
-  const setModMsg = usePlayerStore((state) => state.setModMessage);
-  const swipeableRef = useRef<SwipeableMethods | null>(null);
-  return (
-    <Pressable onLongPress={() => setModMsg(item)}>
-      <Swipeable
-        containerStyle={[py[1]]}
-        friction={2}
-        enableTrackpadTwoFingerGesture
-        rightThreshold={40}
-        renderRightActions={Platform.OS === "android" ? undefined : RightAction}
-        renderLeftActions={Platform.OS === "android" ? undefined : LeftAction}
-        overshootFriction={9}
-        ref={(ref) => {
-          swipeableRef.current = ref;
-        }}
-        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();
-          }
-        }}
+// Actions bar for larger screens
+const ActionsBar = memo(
+  ({
+    item,
+    visible,
+    hoverTimeoutRef,
+  }: {
+    item: ChatMessageViewHydrated;
+    visible: boolean;
+    hoverTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
+  }) => {
+    const setReply = useSetReplyToMessage();
+    const setModMsg = usePlayerStore((state) => state.setModMessage);
+
+    if (!visible) return null;
+
+    return (
+      <View
+        style={[
+          {
+            position: "absolute",
+            top: -14,
+            right: 8,
+            flexDirection: "row",
+            backgroundColor: "rgba(180,180,180, 0.5)",
+            borderRadius: 6,
+            borderWidth: 1,
+            padding: 1,
+            gap: 4,
+            zIndex: 10,
+          },
+        ]}
       >
-        <RenderChatMessage item={item} />
-      </Swipeable>
-    </Pressable>
-  );
-});
+        <Pressable
+          onPress={() => setReply(item)}
+          style={[
+            {
+              padding: 6,
+              borderRadius: 4,
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+            },
+          ]}
+          onHoverIn={() => {
+            // Keep the actions bar visible when hovering over it
+            if (hoverTimeoutRef.current) {
+              clearTimeout(hoverTimeoutRef.current);
+              hoverTimeoutRef.current = null;
+            }
+          }}
+        >
+          <Reply color="white" size={16} />
+        </Pressable>
+        <Pressable
+          onPress={() => setModMsg(item)}
+          style={[
+            {
+              padding: 6,
+              borderRadius: 4,
+              backgroundColor: "rgba(255, 255, 255, 0.1)",
+            },
+          ]}
+          onHoverIn={() => {
+            // Keep the actions bar visible when hovering over it
+            if (hoverTimeoutRef.current) {
+              clearTimeout(hoverTimeoutRef.current);
+              hoverTimeoutRef.current = null;
+            }
+          }}
+        >
+          <Ellipsis color="white" size={16} />
+        </Pressable>
+      </View>
+    );
+  },
+);
+
+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 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);
+        }
+      };
+    }, []);
+
+    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 },
+            isHovered && bg.gray[950],
+          ]}
+          onPointerEnter={handleHoverIn}
+          onPointerLeave={handleHoverOut}
+        >
+          <Pressable>
+            <RenderChatMessage item={item} />
+          </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={(ref) => {
+            swipeableRef.current = ref;
+          }}
+          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();
 
@@ -113,10 +262,12 @@ export function Chat({
     <View style={[flex.shrink[1]].concat(propsStyle || [])}>
       <FlatList
         style={[flex.grow[1], flex.shrink[1], w.percent[100]]}
-        data={chat}
+        data={chat.slice(0, shownMessages)}
         inverted={true}
         keyExtractor={keyExtractor}
-        renderItem={({ item, index }) => <ChatLine item={item} />}
+        renderItem={({ item, index }) => (
+          <ChatLine item={item} canModerate={canModerate} />
+        )}
         removeClippedSubviews={true}
         maxToRenderPerBatch={10}
         initialNumToRender={10}

package/src/components/chat/emoji-suggestions.tsx

@@ -0,0 +1,94 @@
+import { Pressable } from "react-native";
+import { Code, Text, View } from "../..";
+import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
+
+export interface EmojiData {
+  categories: Category[];
+  emojis: { [key: string]: Emoji };
+  aliases: { [key: string]: string };
+  sheet: Sheet;
+}
+
+export interface Category {
+  id: string;
+  emojis: string[];
+}
+
+export interface Emoji {
+  id: string;
+  name: string;
+  keywords: string[];
+  skins: Skin[];
+  version: number;
+  emoticons?: string[];
+}
+
+export interface Skin {
+  unified: string;
+  native: string;
+}
+
+export interface Sheet {
+  cols: number;
+  rows: number;
+}
+
+interface EmojiSuggestionsProps {
+  emojis: Emoji[];
+  onSelect: (emoji: Emoji) => void;
+  highlightedIndex: number;
+}
+
+export function EmojiSuggestions({
+  emojis,
+  onSelect,
+  highlightedIndex,
+}: EmojiSuggestionsProps) {
+  if (!emojis || emojis.length === 0) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        bg.gray[800],
+        layout.position.absolute,
+        left[0],
+        right[0],
+        zIndex[50],
+        {
+          bottom: "100%",
+          borderRadius: 8,
+          boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+          maxHeight: 200,
+          overflow: "auto",
+        },
+      ]}
+    >
+      {emojis.map((emoji, index) => (
+        <Pressable
+          key={emoji.id}
+          onPress={() => onSelect(emoji)}
+          style={[
+            {
+              padding: 8,
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor:
+                index === highlightedIndex
+                  ? "rgba(255, 255, 255, 0.1)"
+                  : "transparent",
+            },
+          ]}
+        >
+          <Text style={{ fontSize: 16, marginRight: 8 }}>
+            {emoji.skins[0]?.native}
+          </Text>
+          <Text style={{ color: "white", fontSize: 14 }}>
+            <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.name}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}

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

@@ -1,11 +1,18 @@
-import { TriggerRef } from "@rn-primitives/dropdown-menu";
-import { forwardRef, useEffect, useRef } from "react";
-import { gap, mr } from "../../lib/theme/atoms";
+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 { useCreateBlockRecord } from "../../streamplace-store/block";
+import {
+  useCreateBlockRecord,
+  useCreateHideChatRecord,
+} from "../../streamplace-store/block";
 import { usePDSAgent } from "../../streamplace-store/xrpc";
 
+import { Linking } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { useStreamplaceStore } from "../../streamplace-store";
 import {
+  atoms,
   DropdownMenu,
   DropdownMenuGroup,
   DropdownMenuItem,
@@ -15,7 +22,8 @@ import {
   Text,
   View,
 } from "../ui";
-import { RenderChatMessage } from "./chat-message";
+
+const BSKY_FRONTEND_DOMAIN = "bsky.app";
 
 type ModViewProps = {
   onClose?: () => void;
@@ -33,7 +41,14 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   const message = usePlayerStore((state) => state.modMessage);
 
   let agent = usePDSAgent();
-  let createBlockRecord = useCreateBlockRecord();
+  let [messageRemoved, setMessageRemoved] = useState(false);
+  let { createBlock, isLoading: isBlockLoading } = useCreateBlockRecord();
+  let { createHideChat, isLoading: isHideLoading } = useCreateHideChatRecord();
+
+  // get the channel did
+  const channelId = usePlayerStore((state) => state.src);
+  // get the logged in user's identity
+  const handle = useStreamplaceStore((state) => state.handle);
 
   if (!agent?.did) {
     <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
@@ -44,6 +59,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   useEffect(() => {
     if (message) {
       console.log("opening mod view");
+      setMessageRemoved(false);
       triggerRef.current?.open();
     } else {
       console.log("closing mod view");
@@ -52,7 +68,9 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
   }, [message]);
 
   return (
-    <DropdownMenu>
+    <DropdownMenu
+      style={[layout.flex.row, layout.flex.alignCenter, gap.all[2], w[80]]}
+    >
       <DropdownMenuTrigger ref={triggerRef}>
         {/* Hidden trigger */}
         <View />
@@ -62,53 +80,88 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
           <>
             <DropdownMenuGroup>
               <DropdownMenuItem>
-                <View style={[layout.flex.column, mr[5], { gap: 6 }]}>
-                  <RenderChatMessage item={message} />
+                <View
+                  style={[
+                    layout.flex.column,
+                    mr[5],
+                    { gap: 6, maxWidth: "100%" },
+                  ]}
+                >
+                  <Text
+                    style={{
+                      fontVariant: ["tabular-nums"],
+                      color: atoms.colors.gray[300],
+                    }}
+                  >
+                    {new Date(message.record.createdAt).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      hour12: false,
+                    })}{" "}
+                    @{message.author.handle}: {message.record.text}
+                  </Text>
                 </View>
               </DropdownMenuItem>
             </DropdownMenuGroup>
 
-            <DropdownMenuGroup title={`Moderation actions`}>
-              {/* <DropdownMenuItem
-                  onPress={
-                    onDeleteMessage
-                      ? () => onDeleteMessage(modMessage)
-                      : undefined
-                  }
+            {/* TODO: Checking for non-owner moderators */}
+            {channelId === handle && (
+              <DropdownMenuGroup title={`Moderation actions`}>
+                <DropdownMenuItem
+                  disabled={isHideLoading || messageRemoved}
+                  onPress={() => {
+                    if (isHideLoading || messageRemoved) return;
+                    createHideChat(message.uri)
+                      .then((r) => setMessageRemoved(true))
+                      .catch((e) => console.error(e));
+                  }}
                 >
-                  <Text customColor={colors.ios.systemTeal}>
-                    Delete message
+                  <Text
+                    color={
+                      isHideLoading || messageRemoved ? "muted" : "destructive"
+                    }
+                  >
+                    {isHideLoading
+                      ? "Removing..."
+                      : messageRemoved
+                        ? "Message removed"
+                        : "Remove this message"}
                   </Text>
                 </DropdownMenuItem>
-                <DropdownMenuSeparator />
                 <DropdownMenuItem
-                  onPress={
-                    onBanUser
-                      ? () => onBanUser(modMessage.author.handle)
-                      : undefined
-                  }
+                  disabled={message.author.did === agent?.did || isBlockLoading}
+                  onPress={() => {
+                    createBlock(message.author.did)
+                      .then((r) => console.log(r))
+                      .catch((e) => console.error(e));
+                  }}
                 >
-                  <Text color="destructive">
-                    Ban user @{modMessage.author.handle}
-                  </Text>
-                </DropdownMenuItem> */}
+                  {message.author.did === agent?.did ? (
+                    <Text color="muted">
+                      Block yourself (you can't block yourself)
+                    </Text>
+                  ) : (
+                    <Text color="destructive">
+                      {isBlockLoading
+                        ? "Blocking..."
+                        : `Block user @${message.author.handle} from this channel`}
+                    </Text>
+                  )}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            )}
+
+            <DropdownMenuGroup title={`User actions`}>
               <DropdownMenuItem
-                disabled={message.author.did === agent?.did}
                 onPress={() => {
-                  console.log("Creating block record");
-                  createBlockRecord(message.author.did)
-                    .then((r) => console.log(r))
-                    .catch((e) => console.error(e));
+                  Linking.openURL(
+                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${channelId}`,
+                  );
                 }}
               >
-                <Text color="destructive">
-                  {message.author.did === agent?.did ? (
-                    <>Block yourself (you can't block yourself)</>
-                  ) : (
-                    <>Block user @{message.author.handle} from this channel</>
-                  )}
-                </Text>
+                <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
               </DropdownMenuItem>
+              <ReportButton message={message} />
             </DropdownMenuGroup>
           </>
         )}
@@ -116,3 +169,29 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
     </DropdownMenu>
   );
 });
+
+export function ReportButton({
+  message,
+}: {
+  message: ChatMessageViewHydrated;
+}) {
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+  const { onOpenChange } = useRootContext();
+  return (
+    <DropdownMenuItem
+      onPress={() => {
+        if (!message) return;
+        onOpenChange?.(false);
+        setReportModalOpen(true);
+        setReportSubject({
+          $type: "com.atproto.repo.strongRef",
+          uri: message.uri,
+          cid: message.cid,
+        });
+      }}
+    >
+      <Text color="warning">Report chat...</Text>
+    </DropdownMenuItem>
+  );
+}

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

@@ -0,0 +1,38 @@
+import { View } from "react-native";
+import { flex, gap, layout, ml, pb, pl, px, w } from "../../ui";
+import { atoms } from "../ui";
+import { Code, Text } from "../ui/text";
+
+interface SystemMessageProps {
+  title: string;
+  timestamp: Date;
+}
+
+export function SystemMessage({ title, timestamp }: SystemMessageProps) {
+  return (
+    <View style={[w.percent[100], px[2], pb[2]]}>
+      <Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
+        SYSTEM MESSAGE
+      </Code>
+      <View style={[gap.all[2], layout.flex.row]}>
+        <Text
+          style={{
+            fontVariant: ["tabular-nums"],
+            color: atoms.colors.gray[300],
+          }}
+        >
+          {timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })}
+        </Text>
+        <Text weight="bold" color="default" style={[flex.shrink[1]]}>
+          {title}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default SystemMessage;

package/src/components/icons/bluesky-icon.tsx

@@ -0,0 +1,9 @@
+import Svg, { Path } from "react-native-svg";
+
+export function BlueskyIcon({ size = 20, color = "#000" }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 600 530" fill={color}>
+      <Path d="M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z" />
+    </Svg>
+  );
+}

package/src/components/keep-awake.native.tsx

@@ -0,0 +1,13 @@
+import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
+import { useEffect } from "react";
+
+export function KeepAwake() {
+  // useKeepAwake();
+  useEffect(() => {
+    activateKeepAwakeAsync();
+    return () => {
+      deactivateKeepAwake();
+    };
+  }, []);
+  return <></>;
+}

package/src/components/keep-awake.tsx

@@ -0,0 +1,3 @@
+export function KeepAwake() {
+  return <></>;
+}