@streamplace/components 0.8.8 → 0.8.11

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