@streamplace/components 0.9.9 → 0.9.10

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>
+  );
+};

package/src/components/chat/user-profile-card.tsx

@@ -0,0 +1,275 @@
+import { ProfileViewBasic } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { TriggerRef } from "@rn-primitives/dropdown-menu";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Image, Platform, Pressable, View } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { useAvatars } from "../../hooks/useAvatars";
+import { useLivestreamStore } from "../../livestream-store";
+import { useUrl } from "../../streamplace-store";
+import { useTheme } from "../../ui";
+import { formatHandleWithAt } from "../../utils/format-handle";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "../ui/dropdown";
+import { Text } from "../ui/text";
+import { Badge } from "./badge";
+
+interface BadgeMeta {
+  label: string;
+  description: string;
+  issuedBy?: string;
+}
+
+const BADGE_META: Record<string, BadgeMeta> = {
+  "place.stream.badge.defs#mod": {
+    label: "Moderator",
+    description: "This user is a moderator.",
+    issuedBy: "{issuer} for {streamer}",
+  },
+  "place.stream.badge.defs#streamer": {
+    label: "Streamer",
+    description: "This user is the streamer.",
+  },
+  "place.stream.badge.defs#vip": {
+    label: "VIP",
+    description: "This user is a very important person.",
+  },
+};
+
+interface OpenCardContextValue {
+  openUri: string | null;
+  setOpenUri: (uri: string | null) => void;
+}
+
+const OpenCardContext = createContext<OpenCardContextValue>({
+  openUri: null,
+  setOpenUri: () => {},
+});
+
+export const ProfileCardProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [openUri, setOpenUri] = useState<string | null>(null);
+  return (
+    <OpenCardContext.Provider value={{ openUri, setOpenUri }}>
+      {children}
+    </OpenCardContext.Provider>
+  );
+};
+
+const BadgeRow = ({
+  badge,
+  serviceDid,
+}: {
+  badge: NonNullable<ChatMessageViewHydrated["badges"]>[number];
+  serviceDid: string;
+}) => {
+  const streamer = useLivestreamStore((x) => x.livestream?.author);
+  const isServiceIssued = badge.issuer === serviceDid;
+  const issuerDids = useMemo(
+    () => (isServiceIssued ? [] : [badge.issuer]),
+    [isServiceIssued, badge.issuer],
+  );
+  const issuerProfiles = useAvatars(issuerDids);
+  const meta = BADGE_META[badge.badgeType];
+
+  if (!meta) return null;
+
+  let issuerLabel = isServiceIssued
+    ? "Streamplace"
+    : issuerProfiles[badge.issuer]?.handle
+      ? `@${issuerProfiles[badge.issuer].handle}`
+      : badge.issuer;
+  if (meta.issuedBy) {
+    issuerLabel = meta.issuedBy
+      .replace("{issuer}", issuerLabel)
+      .replace(
+        "{streamer}",
+        streamer?.handle ? formatHandleWithAt(streamer) : "the streamer",
+      );
+  }
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        paddingLeft: 6,
+      }}
+    >
+      <Badge badgeType={badge.badgeType} size={32} />
+      <View style={{ flex: 1, gap: 2 }}>
+        <Text size="xs">{meta.label}</Text>
+        <Text size="xs" color="muted">
+          Issued by {issuerLabel}
+        </Text>
+        <Text size="xs" color="muted">
+          {meta.description}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export const UserProfileCard = ({
+  uri,
+  author,
+  badges,
+  children,
+}: {
+  uri: string;
+  author: ProfileViewBasic;
+  badges: ChatMessageViewHydrated["badges"];
+  children: React.ReactNode;
+}) => {
+  const { theme } = useTheme();
+  const nodeUrl = useUrl();
+  const serviceDid = nodeUrl
+    ? `did:web:${nodeUrl.replace(/^https?:\/\//, "")}`
+    : null;
+
+  const { openUri, setOpenUri } = useContext(OpenCardContext);
+  const isOpen = openUri === uri;
+  const thisRef = useRef<TriggerRef>(null);
+  const [hovered, setHovered] = useState(false);
+
+  const profiles = useAvatars(author.did ? [author.did] : []);
+  const profile = profiles[author.did];
+
+  useEffect(() => {
+    isOpen ? thisRef.current?.open() : thisRef.current?.close();
+  }, [isOpen]);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpenUri(open ? uri : null);
+    },
+    [uri, setOpenUri],
+  );
+
+  const serviceBadges = useMemo(
+    () => badges?.filter((b) => serviceDid && b.issuer === serviceDid) ?? [],
+    [badges, serviceDid],
+  );
+
+  return (
+    <DropdownMenu onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger ref={thisRef} asChild>
+        <Pressable
+          onPress={() => {}}
+          {...(Platform.OS === "web"
+            ? {
+                onHoverIn: () => setHovered(true),
+                onHoverOut: () => setHovered(false),
+              }
+            : {})}
+          style={{
+            paddingHorizontal: 3,
+            flexDirection: "row",
+            gap: 4,
+            marginLeft: -3,
+            paddingLeft: 3,
+            marginRight: -2,
+            ...(Platform.OS === "web" && hovered
+              ? { backgroundColor: "rgba(255,255,255,0.15)", borderRadius: 6 }
+              : {}),
+          }}
+        >
+          {children}
+        </Pressable>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent style={{ minWidth: 280, maxWidth: 320 }}>
+        <View>
+          {profile?.banner ? (
+            <Image
+              source={{ uri: profile.banner }}
+              style={{
+                width: "100%",
+                height: 80,
+                borderRadius: theme.borderRadius.md,
+              }}
+            />
+          ) : (
+            <View
+              style={{
+                width: "100%",
+                height: 80,
+                borderRadius: theme.borderRadius.md,
+                backgroundColor: theme.colors.muted,
+              }}
+            />
+          )}
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "flex-end",
+              marginTop: -24,
+              paddingHorizontal: 12,
+            }}
+          >
+            {profile?.avatar ? (
+              <Image
+                source={{ uri: profile.avatar }}
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 24,
+                  borderWidth: 2,
+                  borderColor: theme.colors.card,
+                }}
+              />
+            ) : (
+              <View
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 24,
+                  backgroundColor: theme.colors.mutedForeground,
+                  borderWidth: 2,
+                  borderColor: theme.colors.card,
+                }}
+              />
+            )}
+          </View>
+          <View style={{ paddingHorizontal: 12 }}>
+            <Text>@{author.handle}</Text>
+            {profile?.description ? (
+              <Text size="sm" color="muted" numberOfLines={4}>
+                {profile.description}
+              </Text>
+            ) : null}
+          </View>
+          {serviceBadges.length > 0 && serviceDid ? (
+            <View
+              style={{
+                marginTop: 12,
+                paddingHorizontal: 12,
+                paddingBottom: 8,
+                borderTopWidth: 1,
+                borderTopColor: theme.colors.border,
+                paddingTop: 8,
+              }}
+            >
+              {serviceBadges.map((badge, i) => (
+                <BadgeRow key={i} badge={badge} serviceDid={serviceDid} />
+              ))}
+            </View>
+          ) : null}
+        </View>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { Text, View } from "react-native";
 import * as zero from "../../ui";
 import { Chat } from "../chat/chat";
@@ -11,6 +12,11 @@ interface ChatPanelProps {
   messagesPerMinute?: number;
   shownMessages?: number;
   emojiData?: any;
+  emojiPicker?: (
+    isOpen: boolean,
+    onClose: () => void,
+    onSelect: (emoji: any) => void,
+  ) => React.ReactNode;
 }
 
 export default function ChatPanel({
@@ -19,6 +25,7 @@ export default function ChatPanel({
   messagesPerMinute = 0,
   shownMessages = 50,
   emojiData = null,
+  emojiPicker,
 }: ChatPanelProps) {
   return (
     <View
@@ -63,6 +70,7 @@ export default function ChatPanel({
         <View style={[{ flexShrink: 0 }]}>
           <ChatBox
             emojiData={emojiData}
+            emojiPicker={emojiPicker}
             chatBoxStyle={[
               bg.gray[700],
               borders.width.thin,

package/src/components/dashboard/header.tsx

@@ -8,7 +8,7 @@ interface MetricItemProps {
   icon: any;
   label: string;
   value: string;
-  status?: "good" | "warning" | "error";
+  status?: "good" | "warning" | "error" | "pre-live";
 }
 
 function MetricItem({ icon: Icon, label, value, status }: MetricItemProps) {
@@ -36,7 +36,7 @@ function MetricItem({ icon: Icon, label, value, status }: MetricItemProps) {
 }
 
 interface StatusIndicatorProps {
-  status: "excellent" | "good" | "poor" | "offline";
+  status: "excellent" | "good" | "poor" | "offline" | "pre-live";
   isLive: boolean;
 }
 
@@ -44,6 +44,8 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
   const getStatusColor = () => {
     if (!isLive) return bg.gray[500];
     switch (status) {
+      case "pre-live":
+        return bg.blue[500];
       case "excellent":
         return bg.green[500];
       case "good":
@@ -60,6 +62,8 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
   const getStatusText = () => {
     if (!isLive) return "OFFLINE";
     switch (status) {
+      case "pre-live":
+        return "NOT LIVE";
       case "excellent":
         return "EXCELLENT";
       case "good":
@@ -101,7 +105,7 @@ interface HeaderProps {
   uptime?: string;
   bitrate?: string;
   timeBetweenSegments?: number;
-  connectionStatus?: "excellent" | "good" | "poor" | "offline";
+  connectionStatus?: "excellent" | "good" | "poor" | "offline" | "pre-live";
   problemsCount?: number;
   onProblemsPress?: () => void;
 }