@streamplace/components 0.9.7 → 0.9.10

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

@@ -1,4 +1,4 @@
-import { AlertCircle, Car, Radio, Users } from "lucide-react-native";
+import { AlertCircle, Radio } from "lucide-react-native";
 import { Pressable, Text, View } from "react-native";
 import * as zero from "../../ui";
 
@@ -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":
@@ -98,11 +102,10 @@ function StatusIndicator({ status, isLive }: StatusIndicatorProps) {
 interface HeaderProps {
   isLive: boolean;
   streamTitle?: string;
-  viewers?: number;
   uptime?: string;
   bitrate?: string;
   timeBetweenSegments?: number;
-  connectionStatus?: "excellent" | "good" | "poor" | "offline";
+  connectionStatus?: "excellent" | "good" | "poor" | "offline" | "pre-live";
   problemsCount?: number;
   onProblemsPress?: () => void;
 }
@@ -110,7 +113,6 @@ interface HeaderProps {
 export default function Header({
   isLive,
   streamTitle = "Live Stream",
-  viewers = 0,
   uptime = "00:00:00",
   bitrate = "0 mbps",
   timeBetweenSegments = 0,
@@ -179,17 +181,6 @@ export default function Header({
 
       {/* Right side - Stream metrics */}
       <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[6]]}>
-        {isLive && (
-          <>
-            <MetricItem
-              icon={Users}
-              label="Viewers"
-              value={viewers.toLocaleString()}
-            />
-            <MetricItem icon={Car} label="Bitrate" value={bitrate} />
-          </>
-        )}
-
         {!isLive && (
           <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
             <Radio size={16} color="#6b7280" />

package/src/components/dashboard/information-widget.tsx

@@ -12,11 +12,8 @@ import {
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native";
 import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg";
-import {
-  useLivestreamStore,
-  useSegment,
-  useViewers,
-} from "../../livestream-store";
+import { useAQState } from "../../hooks";
+import { useLivestream, useSegment, useViewers } from "../../livestream-store";
 import * as zero from "../../ui";
 import { InfoBox, InfoRow } from "../ui";
 
@@ -38,7 +35,7 @@ export default function InformationWidget({
   const [bitrateHistory, setBitrateHistory] = useState<number[]>(
     Array.from({ length: BITRATE_HISTORY_LENGTH }, () => 0),
   );
-  const [showViewers, setShowViewers] = useState(false);
+  const [showViewers, setShowViewers] = useAQState("showViewers", true);
   const [componentWidth, setComponentWidth] = useState<number>(220);
   const [componentHeight, setComponentHeight] = useState<number>(400);
   const [streamStartTime, setStreamStartTime] = useState<Date | null>(null);
@@ -49,7 +46,7 @@ export default function InformationWidget({
   const isCompactHeight = layoutMeasured && componentHeight < 350;
 
   const seg = useSegment();
-  const livestream = useLivestreamStore((x) => x.livestream);
+  const livestream = useLivestream();
   const viewers = useViewers();
 
   const getBitrate = useCallback((): number => {
@@ -172,8 +169,9 @@ export default function InformationWidget({
                 width: 8,
                 height: 8,
                 borderRadius: 4,
-                backgroundColor:
-                  getConnectionStatus() === "good"
+                backgroundColor: !livestream
+                  ? "#3b82f6"
+                  : getConnectionStatus() === "good"
                     ? "#22c55e"
                     : getConnectionStatus() === "warning"
                       ? "#f59e0b"
@@ -181,6 +179,11 @@ export default function InformationWidget({
               },
             ]}
           />
+          {!livestream && (
+            <Text style={[text.blue[400], { fontSize: 13, fontWeight: "600" }]}>
+              (not live)
+            </Text>
+          )}
         </View>
         <TouchableOpacity
           onPress={() => setShowViewers(!showViewers)}
@@ -314,6 +317,7 @@ export default function InformationWidget({
                 data={bitrateHistory}
                 width={componentWidth - 40}
                 height={120}
+                color={livestream ? "#22c55e" : "#3b82f6"}
               />
             </View>
           )}
@@ -394,6 +398,7 @@ export default function InformationWidget({
                 data={bitrateHistory}
                 width={componentWidth - 40}
                 height={isCompactHeight ? 80 : 120}
+                color={livestream ? "#22c55e" : "#3b82f6"}
               />
             </View>
           )}
@@ -431,10 +436,12 @@ function BitrateChart({
   data,
   width,
   height,
+  color = "#22c55e",
 }: {
   data: number[];
   width: number;
   height: number;
+  color?: string;
 }) {
   const maxDataValue = Math.max(...data, 1);
   const minDataValue = Math.min(...data);
@@ -514,7 +521,7 @@ function BitrateChart({
         </SvgText>
         <Path
           d={pathData}
-          stroke="#22c55e"
+          stroke={color}
           strokeWidth="2"
           fill="none"
           strokeLinecap="round"

package/src/components/mobile-player/fullscreen.native.tsx

@@ -15,6 +15,7 @@ import {
   usePlayerStore,
   VideoRetry,
 } from "../..";
+import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video.native";
 
 // Standard 16:9 video aspect ratio
@@ -166,6 +167,7 @@ export function Fullscreen(props: {
             objectFit={props.objectFit}
             pictureInPictureEnabled={props.pictureInPictureEnabled}
           />
+          <AudioOnlyOverlay />
           <DanmuOverlay
             enabled={danmuEnabled}
             opacity={danmuOpacity}
@@ -188,6 +190,7 @@ export function Fullscreen(props: {
           pictureInPictureEnabled={props.pictureInPictureEnabled}
         />
       </VideoRetry>
+      <AudioOnlyOverlay />
       <DanmuOverlay
         enabled={danmuEnabled}
         opacity={danmuOpacity}

package/src/components/mobile-player/fullscreen.tsx

@@ -11,6 +11,7 @@ import {
   usePlayerStore,
 } from "../..";
 import { View } from "../../components/ui";
+import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video";
 import VideoRetry from "./video-retry";
 
@@ -105,6 +106,7 @@ export function Fullscreen(props: {
           pictureInPictureEnabled={props.pictureInPictureEnabled}
         />
       </VideoRetry>
+      <AudioOnlyOverlay />
       <DanmuOverlay
         enabled={danmuEnabled}
         opacity={danmuOpacity}

package/src/components/mobile-player/player.tsx

@@ -5,7 +5,11 @@ import {
   PlayerStatusTracker,
   usePlayerStore,
 } from "../../player-store";
-import { useStreamplaceStore } from "../../streamplace-store";
+import {
+  useMuted,
+  useSetMuted,
+  useStreamplaceStore,
+} from "../../streamplace-store";
 import { Text, View } from "../ui";
 import { Fullscreen } from "./fullscreen";
 import { PlayerProps } from "./props";
@@ -29,6 +33,23 @@ export function Player(
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const reportSubject = usePlayerStore((x) => x.reportSubject);
 
+  const setMuted = useSetMuted();
+  const muted = useMuted();
+
+  // if we set muted, set it and restore after
+  useEffect(() => {
+    let wasMuted: null | boolean = null;
+    setTimeout(() => {
+      if (props.muted != undefined) {
+        wasMuted = muted;
+        setMuted(props.muted);
+      }
+    }, 200);
+    return () => {
+      wasMuted !== null && setMuted(wasMuted);
+    };
+  }, [props.muted]);
+
   useEffect(() => {
     setReportingURL(props.reportingURL ?? null);
   }, [props.reportingURL]);

package/src/components/mobile-player/ui/audio-only-overlay.tsx

@@ -0,0 +1,48 @@
+import { Volume2 } from "lucide-react-native";
+import { zero } from "../../..";
+import { usePlayerStore } from "../../../player-store";
+import { Text, View } from "../../ui";
+
+export function AudioOnlyOverlay() {
+  const selectedRendition = usePlayerStore((x) => x.selectedRendition);
+  const setSelectedRendition = usePlayerStore((x) => x.setSelectedRendition);
+
+  if (selectedRendition !== "audio") {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        zero.layout.position.absolute,
+        zero.position.top[0],
+        zero.position.left[0],
+        zero.position.right[0],
+        zero.position.bottom[0],
+        zero.layout.flex.center,
+      ]}
+    >
+      <View
+        style={[
+          zero.layout.flex.column,
+          zero.layout.flex.alignCenter,
+          zero.gap.all[3],
+          zero.px[6],
+        ]}
+      >
+        <Volume2 color="#fff" size={48} />
+        <Text size="lg" weight="semibold" center>
+          Audio Only mode
+        </Text>
+        <Text
+          size="sm"
+          color="muted"
+          center
+          onPress={() => setSelectedRendition("source")}
+        >
+          Go to Settings &gt; Quality to switch back to video.
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/components/mobile-player/ui/index.ts

@@ -1,3 +1,4 @@
+export * from "./audio-only-overlay";
 export * from "./autoplay-button";
 export * from "./countdown";
 export * from "./input";

package/src/components/mobile-player/ui/input.tsx

@@ -7,15 +7,17 @@ const { gap, h, layout, mt, p, position, px, py, sizes, w } = atoms;
 type InputPanelProps = {
   title: string | undefined;
   setTitle: (title: string) => void;
-  ingestStarting: boolean;
   toggleGoLive: () => void;
+  isLive: boolean;
+  toggleStopStream?: () => void;
 };
 
 export function InputPanel({
   title,
   setTitle,
-  ingestStarting,
   toggleGoLive,
+  isLive,
+  toggleStopStream,
 }: InputPanelProps) {
   const { slideKeyboard } = useKeyboardSlide();
   return (
@@ -37,16 +39,44 @@ export function InputPanel({
           { padding: 10 },
         ]}
       >
-        <View backgroundColor="rgba(64,64,64,0.8)" borderRadius={12}>
-          <Input
-            value={title}
-            onChange={setTitle}
-            placeholder="Enter stream title"
-            onEndEditing={Keyboard.dismiss}
-          />
-        </View>
-        {ingestStarting ? (
-          <Text>Starting your stream...</Text>
+        {!isLive && (
+          <View backgroundColor="rgba(64,64,64,0.8)" borderRadius={12}>
+            <Input
+              value={title}
+              onChange={setTitle}
+              placeholder="Enter stream title"
+              onEndEditing={Keyboard.dismiss}
+            />
+          </View>
+        )}
+        {isLive ? (
+          <View style={[layout.flex.center]}>
+            <Pressable
+              onPress={toggleStopStream}
+              style={[
+                px[4],
+                py[2],
+                layout.flex.row,
+                layout.flex.center,
+                gap.all[1],
+                {
+                  backgroundColor: "rgba(64,64,64, 0.8)",
+                  borderRadius: 12,
+                },
+              ]}
+            >
+              <View
+                style={[
+                  p[2],
+                  {
+                    backgroundColor: "rgba(256,0,0, 0.8)",
+                    borderRadius: 12,
+                  },
+                ]}
+              />
+              <Text center>Stop Stream</Text>
+            </Pressable>
+          </View>
         ) : (
           <View style={[layout.flex.center]}>
             <Pressable