@streamplace/components 0.8.9 → 0.8.13

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

@@ -4,6 +4,8 @@ import { Image, Linking, Platform, Pressable, View } from "react-native";
 import {
   ContentRights,
   ContentWarnings,
+  formatHandle,
+  formatHandleWithAt,
   useAvatars,
   useLivestreamInfo,
   zero,
@@ -113,12 +115,12 @@ export function ContextMenu({
                     <Pressable
                       onPress={() => {
                         if (profile?.handle) {
-                          const url = `https://bsky.app/profile/${profile.handle}`;
+                          const url = `https://bsky.app/profile/${formatHandle(profile)}`;
                           Linking.openURL(url);
                         }
                       }}
                     >
-                      <Text>@{profile?.handle || "user"}</Text>
+                      <Text>{profile && formatHandleWithAt(profile)}</Text>
                     </Pressable>
                     {/*{did && profile && (
                     <FollowButton streamerDID={profile?.did} currentUserDID={did} />
@@ -163,7 +165,7 @@ export function ContextMenu({
               <DropdownMenuItem
                 onPress={() => {
                   if (profile?.handle) {
-                    const url = `https://bsky.app/profile/${profile.handle}`;
+                    const url = `https://bsky.app/profile/${formatHandle(profile)}`;
                     Linking.openURL(url);
                   }
                 }}
@@ -179,15 +181,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/share/sharesheet.tsx

@@ -4,6 +4,7 @@ import { Clipboard, Linking, Platform, View } from "react-native";
 import { colors } from "../../lib/theme";
 import { useLivestreamStore } from "../../livestream-store";
 import { useUrl } from "../../streamplace-store";
+import { formatHandle } from "../../utils/format-handle";
 import { BlueskyIcon } from "../icons/bluesky-icon";
 import {
   DropdownMenu,
@@ -26,12 +27,12 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
 
   // Get the current stream URL
   const getStreamUrl = useCallback(() => {
-    return url + (profile ? `/@${profile.handle}` : "");
+    return url + (profile ? `/${formatHandle(profile)}` : "");
   }, [profile]);
 
   // Get the embed URL
   const getEmbedUrl = useCallback(() => {
-    return url + (profile ? `/embed/${profile.handle}` : "");
+    return url + (profile ? `/embed/${formatHandle(profile)}` : "");
   }, [profile]);
 
   // Get embed code
@@ -63,31 +64,22 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
   // Share to Bluesky
   const shareToBluesky = useCallback(() => {
     const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
-      : `Check out this stream on Streamplace! ${streamUrl}`;
+    const text =
+      profile && profile.handle
+        ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+        : `Check out this stream on Streamplace! ${streamUrl}`;
     const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
     Linking.openURL(blueskyUrl);
     onShare?.("share_bluesky", true);
   }, [profile, getStreamUrl, onShare]);
 
-  // Share to Twitter/X
-  const shareToTwitter = useCallback(() => {
-    const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace!`
-      : `Check out this stream on Streamplace!`;
-    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
-    Linking.openURL(twitterUrl);
-    onShare?.("share_twitter", true);
-  }, [profile, getStreamUrl, onShare]);
-
   // Native share (mobile)
   const nativeShare = useCallback(async () => {
     const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace!`
-      : `Check out this stream on Streamplace!`;
+    const text =
+      profile && profile.handle
+        ? `Check out @${profile.handle} live on Streamplace!`
+        : `Check out this stream on Streamplace!`;
 
     if (Platform.OS === "web" && navigator.share) {
       try {
@@ -119,14 +111,6 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
               <Text>Share to Bluesky</Text>
             </View>
           </DropdownMenuItem>
-          {/* <DropdownMenuItem onPress={shareToTwitter}>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
-            >
-              <MessageCircle size={20} color={colors.gray[400]} />
-              <Text>Share to X</Text>
-            </View>
-          </DropdownMenuItem> */}
           {/* navigator isn't on non-web */}
           {Platform.OS !== "web" || (navigator && (navigator as any).share) ? (
             <DropdownMenuItem onPress={nativeShare}>

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">