@streamplace/components 0.9.7 → 0.9.10

package/src/components/chat/chat.tsx

@@ -26,6 +26,7 @@ import {
 import { bg, flex, layout, mr, px, py } from "../../lib/theme/atoms";
 import { RenderChatMessage } from "./chat-message";
 import { ModView } from "./mod-view";
+import { ProfileCardProvider } from "./user-profile-card";
 
 function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
   const styleAnimation = useAnimatedStyle(() => {
@@ -141,77 +142,65 @@ const ActionsBar = memo(
   },
 );
 
-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 ChatLine = memo(
+  ({
+    item,
+    isHovered,
+    onHoverIn,
+    onHoverOut,
+    hoverTimeoutRef,
+  }: {
+    item: ChatMessageViewHydrated;
+    isHovered?: boolean;
+    onHoverIn?: () => void;
+    onHoverOut?: () => void;
+    hoverTimeoutRef?: React.MutableRefObject<NodeJS.Timeout | null>;
+  }) => {
+    const setReply = useSetReplyToMessage();
+    const setModMsg = usePlayerStore((state) => state.setModMessage);
+    const swipeableRef = useRef<SwipeableMethods | null>(null);
 
-  const handleHoverIn = () => {
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    if (item.author.did === "did:sys:system") {
+      return (
+        <SystemMessage
+          variant={getSystemMessageType(item) || SystemMessageType.notification}
+          timestamp={new Date(item.record.createdAt)}
+          title={item.record.text}
+          facets={item.record.facets}
+        />
+      );
     }
-    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
-        variant={getSystemMessageType(item) || SystemMessageType.notification}
-        timestamp={new Date(item.record.createdAt)}
-        title={item.record.text}
-        facets={item.record.facets}
-      />
-    );
-  }
+    if (Platform.OS === "web") {
+      return (
+        <View
+          style={[
+            py[1],
+            px[2],
+            {
+              position: "relative",
+              borderRadius: 8,
+              minWidth: 0,
+              maxWidth: "100%",
+            },
+            isHovered && bg.gray[950],
+          ]}
+          onPointerEnter={onHoverIn}
+          onPointerLeave={onHoverOut}
+        >
+          <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
+            <RenderChatMessage item={item} />
+          </Pressable>
+          <ActionsBar
+            item={item}
+            visible={!!isHovered}
+            hoverTimeoutRef={hoverTimeoutRef!}
+          />
+        </View>
+      );
+    }
 
-  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>
-    );
-  }
-
-  return (
-    <>
       <Swipeable
         containerStyle={[py[1]]}
         friction={2}
@@ -238,9 +227,9 @@ const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
       >
         <RenderChatMessage item={item} />
       </Swipeable>
-    </>
-  );
-});
+    );
+  },
+);
 
 export function Chat({
   shownMessages = SHOWN_MSGS,
@@ -254,6 +243,24 @@ export function Chat({
   const chat = useChat();
   const [isScrolledUp, setIsScrolledUp] = useState(false);
   const flatListRef = useRef<FlatList>(null);
+  const [hoveredMessageUri, setHoveredMessageUri] = useState<string | null>(
+    null,
+  );
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleHoverIn = (uri: string) => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setHoveredMessageUri(uri);
+  };
+
+  const handleHoverOut = () => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setHoveredMessageUri(null);
+    }, 50);
+  };
 
   // Animation for scroll-to-bottom button
   const buttonOpacity = useSharedValue(0);
@@ -261,7 +268,7 @@ export function Chat({
 
   useEffect(() => {
     buttonOpacity.value = withTiming(isScrolledUp ? 1 : 0, { duration: 200 });
-    buttonTranslateY.value = withTiming(isScrolledUp ? 0 : 20, {
+    buttonTranslateY.value = withTiming(isScrolledUp ? 0 : 50, {
       duration: 200,
     });
   }, [isScrolledUp]);
@@ -309,25 +316,35 @@ export function Chat({
         },
       ].concat(propsStyle || [])}
     >
-      <FlatList
-        ref={flatListRef}
-        style={[
-          flex.grow[1],
-          flex.shrink[1],
-          { minWidth: 0, maxWidth: "100%" },
-        ]}
-        data={chat.slice(0, shownMessages)}
-        inverted={true}
-        keyExtractor={keyExtractor}
-        renderItem={({ item, index }) => <ChatLine item={item} />}
-        removeClippedSubviews={true}
-        maxToRenderPerBatch={10}
-        initialNumToRender={10}
-        updateCellsBatchingPeriod={50}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
-        nestedScrollEnabled={true}
-      />
+      <ProfileCardProvider>
+        <FlatList
+          ref={flatListRef}
+          style={[
+            flex.grow[1],
+            flex.shrink[1],
+            { minWidth: 0, maxWidth: "100%" },
+          ]}
+          data={chat.slice(0, shownMessages)}
+          inverted={true}
+          keyExtractor={keyExtractor}
+          renderItem={({ item }) => (
+            <ChatLine
+              item={item}
+              isHovered={hoveredMessageUri === item.uri}
+              onHoverIn={() => handleHoverIn(item.uri)}
+              onHoverOut={handleHoverOut}
+              hoverTimeoutRef={hoverTimeoutRef}
+            />
+          )}
+          removeClippedSubviews={true}
+          maxToRenderPerBatch={10}
+          initialNumToRender={10}
+          updateCellsBatchingPeriod={50}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          nestedScrollEnabled={true}
+        />
+      </ProfileCardProvider>
       <Reanimated.View
         style={[
           {
@@ -345,7 +362,7 @@ export function Chat({
           onPress={scrollToBottom}
           style={[
             {
-              pointerEvents: "auto",
+              pointerEvents: isScrolledUp ? "auto" : "none",
               backgroundColor: theme.colors.primary,
               opacity: 0.9,
               borderRadius: 20,

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

@@ -4,46 +4,37 @@ 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[];
+  m: string;
+  k: string[];
+  s: Skin[];
 }
 
 export interface Skin {
-  unified: string;
-  native: string;
-}
-
-export interface Sheet {
-  cols: number;
-  rows: number;
+  n: string;
 }
 
 interface EmojiSuggestionsProps {
   emojis: Emoji[];
   onSelect: (emoji: Emoji) => void;
   highlightedIndex: number;
+  skinTone?: number;
+}
+
+export function getSkinNative(emoji: Emoji, skinTone: number = 0): string {
+  return (emoji.s[skinTone] ?? emoji.s[0]).n;
 }
 
 export function EmojiSuggestions({
   emojis,
   onSelect,
   highlightedIndex,
+  skinTone = 0,
 }: EmojiSuggestionsProps) {
   if (!emojis || emojis.length === 0) {
     return null;
@@ -83,10 +74,10 @@ export function EmojiSuggestions({
             ]}
           >
             <Text style={{ fontSize: 16, marginRight: 8 }}>
-              {emoji.skins[0]?.native}
+              {getSkinNative(emoji, skinTone)}
             </Text>
             <Text style={{ color: "white", fontSize: 14 }}>
-              <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.name}
+              <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.m}
             </Text>
           </Pressable>
         ))}

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

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import { Main } from "streamplace/src/lexicons/types/place/stream/richtext/facet";
 import { SystemMessageType } from "../../lib/system-messages";
-import { colors, flex, gap, layout, ml, pb, pl, px, w } from "../../ui";
+import { bg, colors, flex, gap, layout, ml, pb, pl, px, r, w } from "../../ui";
 import { Code, Text } from "../ui/text";
 import { RichTextMessage } from "./chat-message";
 
@@ -18,8 +18,18 @@ export function SystemMessage({
   timestamp,
   facets,
 }: SystemMessageProps) {
+  const isError = variant === SystemMessageType.command_error;
+
   return (
-    <View style={[w.percent[100], px[2], pb[2]]}>
+    <View
+      style={[
+        w.percent[100],
+        px[2],
+        pb[2],
+        isError && bg.red[950],
+        isError && r.md,
+      ]}
+    >
       <Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
         SYSTEM MESSAGE
       </Code>

package/src/components/chat/teleport-modal.tsx

@@ -0,0 +1,310 @@
+import { Check, X } from "lucide-react-native";
+import React, { useEffect, useMemo, useState } from "react";
+import { Image, Pressable, ScrollView, View } from "react-native";
+import { PlaceStreamLivestream } from "streamplace";
+import { useAvatars, zero } from "../..";
+import { useStreamplaceStore } from "../../streamplace-store";
+import { Button, Input, ResponsiveDialog, Text, useTheme } from "../ui";
+
+interface TeleportModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (targetHandle: string, countdownSeconds: number) => void;
+}
+
+export const TeleportModal: React.FC<TeleportModalProps> = ({
+  open,
+  onOpenChange,
+  onSubmit,
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedStream, setSelectedStream] =
+    useState<PlaceStreamLivestream.LivestreamView | null>(null);
+  const [countdownSeconds, setCountdownSeconds] = useState("10");
+
+  const { theme } = useTheme();
+
+  const liveUsersCache = useStreamplaceStore((state) => state.liveUsers);
+  const liveUsersLoading = useStreamplaceStore(
+    (state) => state.liveUsersLoading,
+  );
+
+  const [liveUsers, setLiveUsers] = useState(liveUsersCache);
+
+  useEffect(() => {
+    setLiveUsers(liveUsersCache);
+  }, [liveUsersCache]);
+
+  const profiles = useAvatars(liveUsers?.map((u) => u.author?.did || "") || []);
+
+  const filteredStreams = useMemo(() => {
+    if (!liveUsers) return [];
+    if (!searchQuery.trim()) return liveUsers;
+
+    const query = searchQuery.toLowerCase();
+    // filter by handle or stream title
+    return liveUsers.filter(
+      (stream) =>
+        stream.author?.handle?.toLowerCase().includes(query) ||
+        stream.record.title?.toString().toLowerCase().includes(query),
+    );
+  }, [liveUsers, searchQuery]);
+
+  const handleCancel = () => {
+    setSearchQuery("");
+    setSelectedStream(null);
+    setCountdownSeconds("10");
+    onOpenChange(false);
+  };
+
+  const handleSubmit = () => {
+    if (!selectedStream?.author?.handle) return;
+
+    const countdown = parseInt(countdownSeconds, 10);
+    if (isNaN(countdown) || countdown < 5 || countdown > 300) {
+      return;
+    }
+
+    onSubmit(selectedStream.author.handle, countdown);
+    handleCancel();
+  };
+
+  return (
+    <ResponsiveDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      showCloseButton={false}
+      variant="default"
+      size="xl"
+      dismissible={false}
+    >
+      <View style={[zero.py[2]]}>
+        <View style={[zero.layout.flex.row, zero.layout.flex.justify.between]}>
+          <View style={[zero.mb[4], zero.gap.all[1], zero.layout.flex.column]}>
+            <Text size="2xl">Teleport to another live streamer</Text>
+            <Text color="muted">
+              Select a streamer to teleport your viewers to their stream.
+            </Text>
+          </View>
+          <Pressable onPress={handleCancel} style={[{ padding: 8 }]}>
+            <X color={theme.colors.mutedForeground} />
+          </Pressable>
+        </View>
+        <View style={[zero.mb[4]]}>
+          <Input
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+            placeholder="Search by handle..."
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+        </View>
+
+        {liveUsersLoading && !liveUsers ? (
+          <View style={[zero.py[8], { alignItems: "center" }]}>
+            <Text color="muted">Loading live users...</Text>
+          </View>
+        ) : filteredStreams.length === 0 ? (
+          <View style={[zero.py[8], { alignItems: "center" }]}>
+            <Text color="muted">
+              {searchQuery
+                ? "No matching live users found"
+                : "No live users found"}
+            </Text>
+          </View>
+        ) : (
+          <ScrollView style={[{ maxHeight: 400 }]}>
+            <View
+              style={[
+                {
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  gap: 12,
+                },
+              ]}
+            >
+              {filteredStreams.map((stream) => {
+                const isSelected = selectedStream?.uri === stream.uri;
+                const profile = profiles[stream.author?.did];
+
+                return (
+                  <Pressable
+                    key={stream.uri}
+                    onPress={() => setSelectedStream(stream)}
+                    style={[
+                      {
+                        width: "49.2%",
+                        minWidth: 200,
+                      },
+                    ]}
+                  >
+                    <View
+                      style={[
+                        {
+                          backgroundColor: theme.colors.muted,
+                          borderRadius: 12,
+                          overflow: "hidden",
+                          borderWidth: 2,
+                          borderColor: isSelected
+                            ? theme.colors.primary
+                            : "transparent",
+                        },
+                      ]}
+                    >
+                      <View
+                        style={[
+                          {
+                            width: "100%",
+                            aspectRatio: 16 / 9,
+                            backgroundColor: theme.colors.card,
+                            position: "relative",
+                          },
+                        ]}
+                      >
+                        <Image
+                          source={{
+                            uri:
+                              "/api/playback/" +
+                              stream.author.did +
+                              "/stream.jpg",
+                          }}
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                          }}
+                          resizeMode="cover"
+                        />
+                        {isSelected && (
+                          <View
+                            style={[
+                              {
+                                position: "absolute",
+                                top: 8,
+                                right: 8,
+                                backgroundColor: theme.colors.primary,
+                                borderRadius: 999,
+                                width: 24,
+                                height: 24,
+                                alignItems: "center",
+                                justifyContent: "center",
+                                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.6)",
+                              },
+                            ]}
+                          >
+                            <Check size={16} color="white" />
+                          </View>
+                        )}
+                        {stream.viewerCount && (
+                          <View
+                            style={[
+                              {
+                                position: "absolute",
+                                top: 8,
+                                left: 8,
+                                backgroundColor: "rgba(0, 0, 0, 0.75)",
+                                borderRadius: 999,
+                                paddingHorizontal: 8,
+                                paddingVertical: 4,
+                              },
+                            ]}
+                          >
+                            <Text style={[{ fontSize: 12, color: "white" }]}>
+                              {stream.viewerCount.count} viewer
+                              {stream.viewerCount.count !== 1 ? "s" : ""}
+                            </Text>
+                          </View>
+                        )}
+                      </View>
+                      <View
+                        style={[
+                          {
+                            padding: 12,
+                            flexDirection: "row",
+                            gap: 8,
+                            alignItems: "center",
+                          },
+                        ]}
+                      >
+                        <View
+                          style={[
+                            {
+                              width: 40,
+                              height: 40,
+                              borderRadius: 20,
+                              overflow: "hidden",
+                              backgroundColor: theme.colors.card,
+                              flexShrink: 0,
+                            },
+                          ]}
+                        >
+                          {profile?.avatar ? (
+                            <Image
+                              source={{
+                                uri: profile.avatar,
+                              }}
+                              style={{ width: "100%", height: "100%" }}
+                              resizeMode="cover"
+                            />
+                          ) : (
+                            <View
+                              style={{
+                                width: "100%",
+                                height: "100%",
+                                backgroundColor: theme.colors.muted,
+                              }}
+                            />
+                          )}
+                        </View>
+
+                        {/* Text */}
+                        <View style={[{ flex: 1, minWidth: 0 }]}>
+                          <Text numberOfLines={1} ellipsizeMode="tail">
+                            {stream.author?.handle}
+                          </Text>
+                          {stream.record.title ? (
+                            <Text
+                              numberOfLines={1}
+                              ellipsizeMode="tail"
+                              style={[
+                                {
+                                  fontSize: 12,
+                                  color: theme.colors.textMuted,
+                                },
+                              ]}
+                            >
+                              {stream.record.title as any}
+                            </Text>
+                          ) : null}
+                        </View>
+                      </View>
+                    </View>
+                  </Pressable>
+                );
+              })}
+            </View>
+          </ScrollView>
+        )}
+      </View>
+      <View
+        style={[
+          zero.mt[8],
+          zero.layout.flex.row,
+          zero.layout.flex.justify.end,
+          zero.gap.all[2],
+        ]}
+      >
+        <Button width="min" variant="secondary" onPress={handleCancel}>
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          width="min"
+          variant="primary"
+          onPress={handleSubmit}
+          disabled={!selectedStream}
+        >
+          <Text>Teleport</Text>
+        </Button>
+      </View>
+    </ResponsiveDialog>
+  );
+};