@streamplace/components 0.8.9 → 0.8.11

package/src/components/danmu/danmu-overlay.tsx

@@ -0,0 +1,225 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { useChat, useLivestreamStore } from "../../livestream-store";
+import { View } from "../ui";
+import { DanmuMessage } from "./danmu-message";
+import { baseDuration, MAX_DURATION, MIN_DURATION } from "./math";
+import { useDanmuLanes } from "./use-danmu-lanes";
+
+interface DanmuOverlayProps {
+  enabled?: boolean;
+  opacity?: number;
+  speed?: number;
+  laneCount?: number;
+  maxMessages?: number;
+}
+
+interface ActiveDanmuMessage {
+  message: ChatMessageViewHydrated;
+  lane: number;
+}
+
+const DEFAULT_LANE_COUNT = 12;
+const DEFAULT_OPACITY = 80;
+const DEFAULT_SPEED = 1;
+const DEFAULT_MAX_MESSAGES = 50;
+const FONT_SIZE_PERCENTAGE = 0.7;
+const MAX_PROCESSED_MESSAGES = 10;
+
+// px from top of video where danmu won't appear (avoid overlapping with title)
+const TOP_GAP = 20;
+// px from bottom of video (avoid overlapping with controls)
+const BOTTOM_GAP = 20;
+
+export function DanmuOverlay({
+  enabled = true,
+  opacity = DEFAULT_OPACITY,
+  speed = DEFAULT_SPEED,
+  laneCount = DEFAULT_LANE_COUNT,
+  maxMessages = DEFAULT_MAX_MESSAGES,
+}: DanmuOverlayProps) {
+  const chat = useChat();
+  const segment = useLivestreamStore((x) => x.segment);
+
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [activeDanmu, setActiveDanmu] = useState<
+    Map<string, ActiveDanmuMessage>
+  >(new Map());
+  const processedMessages = useRef(new Set<string>());
+  const mountTime = useRef(Date.now());
+  const lastChatLength = useRef(0);
+  const { assignLane, updateDanmuWidth, releaseLane, cleanup } = useDanmuLanes(
+    laneCount,
+    containerWidth,
+  );
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setContainerWidth(width);
+    setContainerHeight(height);
+  }, []);
+
+  const handleMessageComplete = useCallback(
+    (messageId: string) => {
+      releaseLane(messageId);
+      setActiveDanmu((prev) => {
+        const next = new Map(prev);
+        next.delete(messageId);
+        return next;
+      });
+    },
+    [releaseLane],
+  );
+
+  const handleWidthMeasured = useCallback(
+    (messageId: string, width: number) => {
+      updateDanmuWidth(messageId, width);
+    },
+    [updateDanmuWidth],
+  );
+
+  useEffect(() => {
+    if (!enabled || !chat || containerWidth === 0) return;
+
+    // only check new messages since last render (chat is sorted newest first)
+    const newMessageCount = chat.length - lastChatLength.current;
+    if (newMessageCount <= 0) return;
+
+    const messagesToCheck = chat.slice(0, newMessageCount);
+    lastChatLength.current = chat.length;
+
+    const newMessages = messagesToCheck.filter((msg) => {
+      const hasProcessed = processedMessages.current.has(msg.uri);
+      const isSystem = msg.author.did === "did:sys:system";
+      const msgTime = new Date(msg.record.createdAt).getTime();
+      const isAfterMount = msgTime >= mountTime.current;
+
+      return !hasProcessed && !isSystem && isAfterMount;
+    });
+
+    if (newMessages.length === 0) return;
+
+    const messagesToAdd: ActiveDanmuMessage[] = [];
+
+    for (const message of newMessages.slice(0, maxMessages)) {
+      // mark as processed FIRST to prevent duplicate processing if effect runs twice
+      if (processedMessages.current.has(message.uri)) {
+        continue;
+      }
+      processedMessages.current.add(message.uri);
+
+      if (processedMessages.current.size > MAX_PROCESSED_MESSAGES) {
+        const toRemove = Array.from(processedMessages.current).slice(
+          0,
+          processedMessages.current.size - MAX_PROCESSED_MESSAGES,
+        );
+        toRemove.forEach((uri) => processedMessages.current.delete(uri));
+      }
+
+      const duration = baseDuration(message, MAX_DURATION, MIN_DURATION);
+      if (__DEV__)
+        console.log("[danmu] message", message.record.text, {
+          duration,
+          speed,
+        });
+      const lane = assignLane(message.uri, duration);
+
+      if (lane !== null) {
+        messagesToAdd.push({ message, lane });
+      }
+    }
+
+    if (messagesToAdd.length > 0) {
+      setActiveDanmu((prev) => {
+        const next = new Map(prev);
+        for (const danmu of messagesToAdd) {
+          next.set(danmu.message.uri, danmu);
+        }
+        return next;
+      });
+    }
+  }, [chat, enabled, speed, maxMessages]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      cleanup();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [cleanup]);
+
+  if (!enabled || containerWidth === 0 || containerHeight === 0) {
+    return <View style={styles.container} onLayout={handleLayout} />;
+  }
+
+  // Calculate video bounds based on actual video dimensions from segment
+  const segmentVideoWidth = segment?.video?.[0]?.width;
+  const segmentVideoHeight = segment?.video?.[0]?.height;
+
+  // Fall back to 16:9 if no segment dimensions available
+  const videoAspectRatio =
+    segmentVideoWidth && segmentVideoHeight
+      ? segmentVideoWidth / segmentVideoHeight
+      : 16 / 9;
+
+  const containerAspectRatio = containerWidth / containerHeight;
+
+  let videoWidth: number;
+  let videoHeight: number;
+  let videoTop: number;
+  let videoLeft: number;
+
+  if (containerAspectRatio > videoAspectRatio) {
+    // Container is wider than video - letterbox on sides
+    videoHeight = containerHeight;
+    videoWidth = videoHeight * videoAspectRatio;
+    videoTop = 0;
+    videoLeft = (containerWidth - videoWidth) / 2;
+    // Adjust for top/bottom gaps iff we don't have top letterboxing
+    videoTop += TOP_GAP;
+    videoHeight -= TOP_GAP + BOTTOM_GAP;
+  } else {
+    // Container is taller than video - letterbox on top/bottom
+    videoWidth = containerWidth;
+    videoHeight = videoWidth / videoAspectRatio;
+    videoTop = (containerHeight - videoHeight) / 2;
+    videoLeft = 0;
+  }
+
+  const laneHeight = videoHeight / laneCount;
+  const fontSize = laneHeight * FONT_SIZE_PERCENTAGE;
+
+  return (
+    <View style={styles.container} onLayout={handleLayout} pointerEvents="none">
+      {Array.from(activeDanmu.values()).map(({ message, lane }) => (
+        <DanmuMessage
+          key={message.uri}
+          message={message}
+          lane={lane}
+          laneHeight={laneHeight}
+          videoTop={videoTop}
+          opacity={opacity}
+          fontSize={fontSize}
+          speed={speed}
+          containerWidth={containerWidth}
+          containerHeight={containerHeight}
+          onComplete={handleMessageComplete}
+          onWidthMeasured={handleWidthMeasured}
+        />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: "hidden",
+  },
+});

package/src/components/danmu/math.ts

@@ -0,0 +1,27 @@
+export const mapRange = (
+  num: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+) => {
+  return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+};
+
+export const between = (num: number, min: number, max: number) => {
+  return Math.min(Math.max(num, min), max);
+};
+
+export const baseDuration = (
+  message: { record: { text: string | any[] } },
+  min: number,
+  max: number,
+) =>
+  between(
+    mapRange(Math.log(message.record.text.length) * 8, 1, 16, min, max),
+    min,
+    max,
+  );
+
+export const MIN_DURATION = 6000;
+export const MAX_DURATION = 12000;

package/src/components/danmu/mu.tsx

@@ -0,0 +1,28 @@
+import { G, Path, Svg, SvgProps } from "react-native-svg";
+
+export interface MuProps extends SvgProps {
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number | string;
+}
+
+export const Mu = ({
+  size = 24,
+  color = "#000000",
+  strokeWidth = 10.9,
+  ...props
+}: MuProps) => (
+  <Svg width={size} height={size} viewBox="0 0 230 220" {...props}>
+    <G
+      strokeLinecap="round"
+      fillRule="evenodd"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      fill={color}
+    >
+      <Path d="M 13.756 65.7 L 53.756 65.7 Q 55.756 65.7 57.256 64.2 Q 58.756 62.7 58.756 60.7 L 58.756 22.2 Q 58.756 20.2 57.256 18.7 Q 55.756 17.2 53.756 17.2 L 3.506 17.2 Q 2.006 17.2 1.006 16.2 Q 0.006 15.2 0.006 13.45 Q 0.006 11.95 1.006 10.95 Q 2.006 9.95 3.506 9.95 L 56.506 9.95 Q 60.756 9.95 63.506 12.7 Q 66.256 15.45 66.256 19.7 L 66.256 63.45 Q 66.256 67.45 63.506 70.325 Q 60.756 73.2 56.506 73.2 L 16.256 73.2 Q 14.006 73.2 12.506 74.7 Q 11.006 76.2 11.006 78.2 Q 10.756 89.7 10.506 98.575 Q 10.256 107.45 9.756 117.45 A 4.864 4.864 0 0 0 9.717 118.054 A 4.167 4.167 0 0 0 10.881 120.95 Q 12.256 122.45 14.506 122.45 L 60.256 122.45 Q 63.006 122.45 64.881 124.325 Q 66.756 126.2 66.756 129.7 A 1579.753 1579.753 0 0 1 65.295 155.188 Q 64.543 166.519 63.737 175.256 A 494.991 494.991 0 0 1 63.506 177.7 Q 61.756 195.7 59.506 204.7 A 39.785 39.785 0 0 1 55.486 215.384 A 14.939 14.939 0 0 1 54.006 217.45 Q 51.506 220.2 48.506 221.075 Q 45.506 221.95 40.506 222.2 Q 36.006 222.45 28.506 222.2 Q 21.006 221.95 11.756 221.45 A 5.389 5.389 0 0 1 10.79 221.197 A 5.13 5.13 0 0 1 9.131 220.2 Q 8.006 219.2 7.506 217.45 A 3.871 3.871 0 0 1 7.45 216.814 A 2.355 2.355 0 0 1 8.131 215.075 Q 9.006 214.2 10.506 214.2 Q 20.006 214.95 27.881 215.2 Q 35.756 215.45 39.006 215.45 Q 42.506 215.45 44.381 215.075 Q 46.256 214.7 47.756 212.95 A 17.691 17.691 0 0 0 51.389 205.661 A 55.6 55.6 0 0 0 52.381 201.825 A 144.371 144.371 0 0 0 54.411 189.832 A 374.249 374.249 0 0 0 55.881 176.95 A 735.769 735.769 0 0 0 57.475 157.825 A 1519.1 1519.1 0 0 0 59.006 133.45 A 5.968 5.968 0 0 0 59.061 132.663 A 2.91 2.91 0 0 0 55.506 129.7 L 11.506 129.7 Q 7.506 129.7 4.881 126.825 A 8.876 8.876 0 0 1 2.484 120.637 A 11.015 11.015 0 0 1 2.506 119.95 Q 2.756 113.95 3.006 108.7 Q 3.256 103.45 3.506 98.45 Q 3.756 93.45 3.881 87.95 Q 4.006 82.45 4.006 75.45 Q 4.006 71.2 6.881 68.45 Q 9.756 65.7 13.756 65.7 Z M 99.006 49.95 L 200.256 49.95 Q 204.506 49.95 207.256 52.7 Q 210.006 55.45 210.006 59.7 L 210.006 127.95 Q 210.006 131.95 207.256 134.825 Q 204.506 137.7 200.256 137.7 L 99.006 137.7 Q 95.006 137.7 92.131 134.825 Q 89.256 131.95 89.256 127.95 L 89.256 59.7 Q 89.256 55.45 92.131 52.7 Q 95.006 49.95 99.006 49.95 Z M 145.506 53.95 L 153.006 53.95 L 153.006 218.95 Q 153.006 220.7 152.006 221.7 Q 151.006 222.7 149.256 222.7 Q 147.506 222.7 146.506 221.7 Q 145.506 220.7 145.506 218.95 L 145.506 53.95 Z M 77.506 163.95 L 219.006 163.95 Q 220.756 163.95 221.756 164.95 Q 222.756 165.95 222.756 167.7 Q 222.756 169.45 221.756 170.45 Q 220.756 171.45 219.006 171.45 L 77.506 171.45 Q 75.756 171.45 74.756 170.45 Q 73.756 169.45 73.756 167.7 Q 73.756 165.95 74.756 164.95 Q 75.756 163.95 77.506 163.95 Z M 96.506 97.45 L 96.506 125.45 Q 96.506 127.45 98.006 128.95 Q 99.506 130.45 101.506 130.45 L 197.506 130.45 Q 199.506 130.45 201.006 128.95 Q 202.506 127.45 202.506 125.45 L 202.506 97.45 L 96.506 97.45 Z M 96.506 62.45 L 96.506 89.95 L 202.506 89.95 L 202.506 62.45 Q 202.506 60.45 201.006 58.95 Q 199.506 57.45 197.506 57.45 L 101.506 57.45 Q 99.506 57.45 98.006 58.95 Q 96.506 60.45 96.506 62.45 Z M 166.506 55.2 L 161.006 51.95 Q 168.756 41.7 176.881 27.7 A 383.321 383.321 0 0 0 189.09 5.114 A 264.812 264.812 0 0 0 190.506 2.2 Q 191.006 0.7 192.506 0.2 Q 194.006 -0.3 195.756 0.45 Q 197.256 0.95 197.756 2.45 Q 198.256 3.95 197.506 5.2 Q 190.506 17.95 182.506 31.45 Q 174.506 44.95 166.506 55.2 Z M 107.672 1.117 A 4.458 4.458 0 0 0 106.006 1.45 Q 104.756 1.95 104.381 2.95 Q 104.006 3.95 104.756 4.95 Q 111.756 13.95 117.006 22.825 Q 122.256 31.7 126.006 39.95 Q 126.506 41.2 127.756 41.7 Q 129.006 42.2 130.256 41.45 Q 132.006 40.7 132.506 39.2 Q 133.006 37.7 132.256 36.45 Q 128.506 28.45 123.256 19.95 Q 118.006 11.45 110.756 2.45 Q 109.756 1.45 108.506 1.2 A 4.24 4.24 0 0 0 107.672 1.117 Z" />
+    </G>
+  </Svg>
+);
+
+export default Mu;

package/src/components/danmu/use-danmu-lanes.ts

@@ -0,0 +1,114 @@
+import { useCallback, useRef } from "react";
+
+export interface DanmuLane {
+  index: number;
+  occupiedUntil: number;
+}
+
+export interface ActiveDanmu {
+  id: string;
+  lane: number;
+  endTime: number;
+  startTime: number;
+  duration: number;
+  width?: number;
+}
+
+const LANE_GAP = 4;
+
+export const useDanmuLanes = (laneCount: number, containerWidth: number) => {
+  const activeDanmu = useRef<Map<string, ActiveDanmu>>(new Map());
+  const lanes = useRef<DanmuLane[]>(
+    Array.from({ length: laneCount }, (_, i) => ({
+      index: i,
+      occupiedUntil: 0,
+    })),
+  );
+
+  const canFitInLane = useCallback(
+    (laneIndex: number): boolean => {
+      const now = Date.now();
+
+      // find all active danmu in this lane
+      const danmuInLane = Array.from(activeDanmu.current.values()).filter(
+        (d) => d.lane === laneIndex && d.endTime > now,
+      );
+
+      if (danmuInLane.length === 0) return true;
+
+      // check the most recent danmu in this lane
+      const mostRecent = danmuInLane.reduce((latest, current) =>
+        current.startTime > latest.startTime ? current : latest,
+      );
+
+      // calculate how far it has traveled
+      const elapsed = now - mostRecent.startTime;
+      const progress = elapsed / mostRecent.duration;
+      const traveled = containerWidth * progress;
+
+      // estimate width (assume ~8px per char, will be updated with actual width later)
+      const estimatedWidth = mostRecent.width || 200;
+
+      // check if there's enough space
+      const spaceNeeded = estimatedWidth + LANE_GAP;
+      const hasSpace = traveled >= spaceNeeded;
+
+      return hasSpace;
+    },
+    [containerWidth],
+  );
+
+  const assignLane = useCallback(
+    (messageId: string, duration: number, width?: number): number | null => {
+      const now = Date.now();
+
+      for (const lane of lanes.current) {
+        if (canFitInLane(lane.index)) {
+          const endTime = now + duration;
+          activeDanmu.current.set(messageId, {
+            id: messageId,
+            lane: lane.index,
+            endTime,
+            startTime: now,
+            duration,
+            width,
+          });
+          return lane.index;
+        }
+      }
+
+      return null;
+    },
+    [lanes, canFitInLane],
+  );
+
+  const updateDanmuWidth = useCallback((messageId: string, width: number) => {
+    const danmu = activeDanmu.current.get(messageId);
+    if (danmu) {
+      danmu.width = width;
+    }
+  }, []);
+
+  const releaseLane = useCallback((messageId: string) => {
+    const danmu = activeDanmu.current.get(messageId);
+    if (danmu) {
+      activeDanmu.current.delete(messageId);
+    }
+  }, []);
+
+  const cleanup = useCallback(() => {
+    const now = Date.now();
+    for (const [id, danmu] of activeDanmu.current.entries()) {
+      if (danmu.endTime <= now) {
+        activeDanmu.current.delete(id);
+      }
+    }
+  }, []);
+
+  return {
+    assignLane,
+    updateDanmuWidth,
+    releaseLane,
+    cleanup,
+  };
+};

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

@@ -4,7 +4,13 @@ import { BackHandler, Dimensions, StyleSheet, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
+  DanmuOverlay,
   PlayerProtocol,
+  useDanmuEnabled,
+  useDanmuLaneCount,
+  useDanmuMaxMessages,
+  useDanmuOpacity,
+  useDanmuSpeed,
   useLivestreamStore,
   usePlayerStore,
   VideoRetry,
@@ -30,6 +36,12 @@ export function Fullscreen(props: {
   const setFullscreen = usePlayerStore((x) => x.setFullscreen);
   const handle = useLivestreamStore((x) => x.profile?.handle);
 
+  const danmuEnabled = useDanmuEnabled();
+  const danmuOpacity = useDanmuOpacity();
+  const danmuSpeed = useDanmuSpeed();
+  const danmuLaneCount = useDanmuLaneCount();
+  const danmuMaxMessages = useDanmuMaxMessages();
+
   const setSrc = usePlayerStore((x) => x.setSrc);
 
   useEffect(() => {
@@ -154,6 +166,13 @@ export function Fullscreen(props: {
             objectFit={props.objectFit}
             pictureInPictureEnabled={props.pictureInPictureEnabled}
           />
+          <DanmuOverlay
+            enabled={danmuEnabled}
+            opacity={danmuOpacity}
+            speed={danmuSpeed}
+            laneCount={danmuLaneCount}
+            maxMessages={danmuMaxMessages}
+          />
           {props.children}
         </View>
       </View>
@@ -169,6 +188,13 @@ export function Fullscreen(props: {
           pictureInPictureEnabled={props.pictureInPictureEnabled}
         />
       </VideoRetry>
+      <DanmuOverlay
+        enabled={danmuEnabled}
+        opacity={danmuOpacity}
+        speed={danmuSpeed}
+        laneCount={danmuLaneCount}
+        maxMessages={danmuMaxMessages}
+      />
       {props.children}
     </>
   );

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

@@ -1,6 +1,15 @@
 import { useEffect, useRef } from "react";
 import { View as RNView } from "react-native";
-import { getFirstPlayerID, usePlayerStore } from "../..";
+import {
+  DanmuOverlay,
+  getFirstPlayerID,
+  useDanmuEnabled,
+  useDanmuLaneCount,
+  useDanmuMaxMessages,
+  useDanmuOpacity,
+  useDanmuSpeed,
+  usePlayerStore,
+} from "../..";
 import { View } from "../../components/ui";
 import Video from "./video";
 import VideoRetry from "./video-retry";
@@ -18,6 +27,12 @@ export function Fullscreen(props: {
   const setSrc = usePlayerStore((x) => x.setSrc);
   const setAutoplayFailed = usePlayerStore((x) => x.setAutoplayFailed);
 
+  const danmuEnabled = useDanmuEnabled();
+  const danmuOpacity = useDanmuOpacity();
+  const danmuSpeed = useDanmuSpeed();
+  const danmuLaneCount = useDanmuLaneCount();
+  const danmuMaxMessages = useDanmuMaxMessages();
+
   const divRef = useRef<RNView>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
@@ -90,6 +105,13 @@ export function Fullscreen(props: {
           pictureInPictureEnabled={props.pictureInPictureEnabled}
         />
       </VideoRetry>
+      <DanmuOverlay
+        enabled={danmuEnabled}
+        opacity={danmuOpacity}
+        speed={danmuSpeed}
+        laneCount={danmuLaneCount}
+        maxMessages={danmuMaxMessages}
+      />
       {props.children}
     </View>
   );

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

@@ -5,5 +5,6 @@ export * from "./metrics";
 export * from "./streamer-context-menu";
 export * from "./streamer-loading-overlay";
 export * from "./viewer-context-menu";
+export * from "./viewer-count";
 export * from "./viewer-loading-overlay";
 export * from "./viewers";

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -179,15 +179,15 @@ export function ContextMenu({
                 <View
                   style={[
                     zero.flex.values[1],
-                    zero.layout.flex.row,
+                    isMobile ? zero.layout.flex.row : zero.layout.flex.column,
                     zero.layout.flex.spaceBetween,
                     zero.pr[4],
                   ]}
                 >
                   <Text>Quality</Text>
-                  <Text muted>
-                    ({quality}, {lowLatency ? "low latency" : "regular latency"}
-                    )
+                  <Text muted size={isMobile ? "base" : "sm"}>
+                    {quality === "source" ? "Source" : quality},{" "}
+                    {lowLatency ? "Low Latency" : ""}
                   </Text>
                 </View>
               </DropdownMenuSubTrigger>

package/src/components/mobile-player/ui/viewer-count.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from "react";
+import { StyleSheet, TextStyle } from "react-native";
+import { Text } from "../../ui/text";
+
+export interface ViewerCountProps {
+  count?: number | null;
+  style?: TextStyle;
+  locales?: Intl.LocalesArgument;
+  numberFormat?: Intl.NumberFormatOptions;
+}
+
+export function ViewerCount({
+  count,
+  style = {},
+  locales,
+  numberFormat = { notation: "compact" },
+}: ViewerCountProps) {
+  const formattedNumber = useMemo(() => {
+    return new Intl.NumberFormat(locales, numberFormat).format(count || 0);
+  }, [numberFormat, count]);
+
+  return (
+    <Text leading="snug" style={[styles.label, style]}>
+      {formattedNumber}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  label: {
+    color: "#fd5050",
+    textShadowColor: "black",
+    textShadowRadius: 3,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});
+
+export default ViewerCount;

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

@@ -1,32 +1,28 @@
 import { Eye } from "lucide-react-native";
 import * as atoms from "../../../lib/theme/atoms";
 import { useViewers } from "../../../livestream-store";
-import { Text, View } from "../../ui";
+import { View } from "../../ui";
+import ViewerCount from "./viewer-count";
 
 export function Viewers() {
   const viewers = useViewers();
+  return <DehydratedViewers viewers={viewers || 0} />;
+}
+
+export function DehydratedViewers({ viewers }: { viewers: number }) {
   return (
     <View
       style={[
         atoms.layout.flex.center,
         atoms.layout.flex.row,
         atoms.gap.all[2],
+        atoms.px[1],
       ]}
     >
       <Eye color="#fd5050" />
-      <Text
-        style={{
-          color: "#fd5050",
-          textShadowColor: "black",
-          textShadowOffset: { width: -1, height: 1 },
-          textShadowRadius: 3,
-          fontSize: 16,
-        }}
-      >
-        {new Intl.NumberFormat(undefined, { notation: "compact" }).format(
-          viewers || 0,
-        )}
-      </Text>
+      <ViewerCount count={viewers} />
     </View>
   );
 }
+
+export default Viewers;

package/src/components/ui/button.tsx

@@ -39,6 +39,7 @@ export interface ButtonProps
   rightIcon?: React.ReactNode;
   loading?: boolean;
   loadingText?: string;
+  width?: "full" | "min" | number;
 }
 
 export const Button = forwardRef<any, ButtonProps>(
@@ -53,6 +54,7 @@ export const Button = forwardRef<any, ButtonProps>(
       loadingText,
       disabled,
       style,
+      width = "full",
       ...props
     },
     ref,
@@ -198,11 +200,21 @@ export const Button = forwardRef<any, ButtonProps>(
       }
     }, [variant, icons]);
 
+    const widthStyle = useMemo(() => {
+      if (width === "full") {
+        return { width: "100%" };
+      } else if (width === "min") {
+        return { alignSelf: "flex-start" as const };
+      } else {
+        return { width };
+      }
+    }, [width]);
+
     return (
       <ButtonPrimitive.Root
         ref={ref}
         disabled={disabled || loading}
-        style={[buttonStyle, sizeStyles.button, style]}
+        style={[buttonStyle, sizeStyles.button, widthStyle, style]}
         {...props}
       >
         <ButtonPrimitive.Content style={sizeStyles.inner}>
@@ -216,9 +228,15 @@ export const Button = forwardRef<any, ButtonProps>(
             </ButtonPrimitive.Icon>
           ) : null}
 
-          <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
-            {loading && loadingText ? loadingText : children}
-          </TextPrimitive.Root>
+          {typeof children === "string" ? (
+            <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
+              {loading && loadingText ? loadingText : children}
+            </TextPrimitive.Root>
+          ) : loading && loadingText ? (
+            loadingText
+          ) : (
+            children
+          )}
 
           {loading && rightIcon ? (
             <ButtonPrimitive.Icon position="right">