@streamplace/components 0.7.26 → 0.7.29

package/src/components/chat/chat.tsx

@@ -304,6 +304,7 @@ export function Chat({
         updateCellsBatchingPeriod={50}
         onScroll={handleScroll}
         scrollEventThrottle={16}
+        nestedScrollEnabled={true}
       />
       <ModView />
     </View>

package/src/components/mobile-player/ui/autoplay-button.tsx

@@ -17,6 +17,7 @@ export function AutoplayButton() {
         .play()
         .then(() => {
           setAutoplayFailed(false);
+          setMuted(false);
           setUserInteraction();
         })
         .catch((err) => {

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

@@ -1,5 +1,5 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
-import { Settings } from "lucide-react-native";
+import { Menu } from "lucide-react-native";
 import { Platform, View } from "react-native";
 import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
@@ -57,7 +57,7 @@ export function ContextMenu({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Settings color={colors.gray[200]} />
+        <Menu color={colors.gray[200]} />
       </DropdownMenuTrigger>
       <Portal container={dropdownPortalContainer}>
         <DropdownMenuContent side="top" align="end">

package/src/components/mobile-player/ui/viewer-loading-overlay.tsx

@@ -15,7 +15,7 @@ import {
 
 export function ViewerLoadingOverlay() {
   const status = usePlayerStore((x) => x.status);
-  const theme = useTheme();
+  const { theme, zero: zt } = useTheme();
   const opacity = useSharedValue(0);
 
   useEffect(() => {
@@ -42,7 +42,7 @@ export function ViewerLoadingOverlay() {
 
   let spinner = <Loader size="large" />;
   if (status === PlayerStatus.PAUSE) {
-    spinner = <Play size="$12" color={theme.styles.text.primary["color"]} />;
+    spinner = <Play size="$12" color={theme.colors.foreground} />;
   }
 
   return (

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

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import * as sdpTransform from "sdp-transform";
 import { PlayerStatus, usePlayerStore, useStreamKey } from "../..";
 import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 
@@ -107,6 +108,13 @@ export async function negotiateConnectionWithClientOffer(
     offerToReceiveAudio: true,
     offerToReceiveVideo: true,
   });
+  if (!offer.sdp) {
+    throw Error("no SDP in offer");
+  }
+
+  const newSDP = forceStereoAudio(offer.sdp);
+
+  offer.sdp = newSDP;
   /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
   await peerConnection.setLocalDescription(offer);
 
@@ -205,6 +213,11 @@ export function useWebRTCIngest({
     (x) => x.setIngestConnectionState,
   );
   const storedKey = useStreamKey();
+  useEffect(() => {
+    if (storedKey?.error) {
+      console.error("error creating stream key", storedKey.error);
+    }
+  }, [storedKey?.error]);
   const [peerConnection, setPeerConnection] =
     useState<RTCPeerConnection | null>(null);
 
@@ -249,7 +262,11 @@ export function useWebRTCIngest({
     });
 
     peerConnection.addEventListener("track", (ev) => {
-      console.log(ev);
+      console.log(
+        `got peerconnection track with ${ev.track.kind}`,
+        ev.track.id,
+      );
+      // console.log(ev);
     });
 
     setPeerConnection(peerConnection);
@@ -288,3 +305,26 @@ export function useWebRTCIngest({
 
   return [mediaStream, setMediaStream];
 }
+
+export function forceStereoAudio(sdp: string): string {
+  const parsedSDP = sdpTransform.parse(sdp);
+  const audioMedia = parsedSDP.media.find((m) => m.type === "audio");
+  if (!audioMedia) {
+    throw Error("no audio media in SDP");
+  }
+  const opusCodec = audioMedia.rtp.find((c) => c.codec === "opus");
+  if (!opusCodec) {
+    throw Error("no opus codec in SDP");
+  }
+  const opusFMTP = audioMedia.fmtp.find((c) => c.payload === opusCodec.payload);
+  if (!opusFMTP) {
+    throw Error("no opus fmtp in SDP");
+  }
+  const opusParams = sdpTransform.parseParams(opusFMTP.config);
+  opusParams.stereo = 1;
+  const newParams = Object.entries(opusParams)
+    .map(([k, v]) => `${k}=${v}`)
+    .join(";");
+  opusFMTP.config = newParams;
+  return sdpTransform.write(parsedSDP);
+}

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { View } from "react-native";
+import { Text, View } from "react-native";
 import { VideoNativeProps } from "./props";
 
 let importPromise: Promise<typeof import("./video-async.native")> | null = null;
@@ -13,12 +13,27 @@ export default function VideoNative(props: VideoNativeProps) {
     typeof import("./video-async.native") | null
   >(null);
 
+  const [error, setError] = useState<string | null>(null);
+
   useEffect(() => {
-    importPromise?.then((module) => {
-      setVideoNativeModule(module);
-    });
+    importPromise
+      ?.then((module) => {
+        setVideoNativeModule(module);
+      })
+      .catch((err) => {
+        setError(err.message);
+      });
   }, []);
 
+  if (error) {
+    console.error(error);
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <Text>{error}</Text>
+      </View>
+    );
+  }
+
   if (!videoNativeModule) {
     return <View></View>;
   }

package/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import React, { forwardRef, useMemo } from "react";
-import { ActivityIndicator, StyleSheet } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { useTheme } from "../../lib/theme/theme";
-import * as tokens from "../../lib/theme/tokens";
+import * as zero from "../../ui";
 import { ButtonPrimitive, ButtonPrimitiveProps } from "./primitives/button";
 import { TextPrimitive } from "./primitives/text";
 
@@ -57,44 +57,117 @@ export const Button = forwardRef<any, ButtonProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
+    const { zero: zt, icons } = useTheme();
 
-    // Create dynamic styles based on theme
-    const styles = useMemo(() => createStyles(theme), [theme]);
-
-    // Get variant styles
+    // Get variant styles using theme.zero
     const buttonStyle = useMemo(() => {
-      const variantStyle = styles[`${variant}Button` as keyof typeof styles];
-      const sizeStyle = styles[`${size}Button` as keyof typeof styles];
-      return [variantStyle, sizeStyle];
-    }, [variant, size, styles]);
+      switch (variant) {
+        case "primary":
+          return zt.button.primary;
+        case "secondary":
+          return zt.button.secondary;
+        case "outline":
+          return zt.button.outline;
+        case "ghost":
+          return zt.button.ghost;
+        case "destructive":
+          return [zt.bg.destructive, zero.shadows.sm];
+        case "success":
+          return [zt.bg.success, zero.shadows.sm];
+        default:
+          return zt.button.primary;
+      }
+    }, [variant, zt]);
 
-    // Get inner styles for button content
-    const buttonInnerStyle = useMemo(() => {
-      const sizeInnerStyle =
-        styles[`${size}ButtonInner` as keyof typeof styles];
-      return sizeInnerStyle;
-    }, [size, styles]);
+    // Get text styles using theme.zero
+    const textStyle = useMemo(() => {
+      switch (variant) {
+        case "primary":
+          return [zt.text.primaryForeground, { fontWeight: "600" }];
+        case "secondary":
+          return [zt.text.secondaryForeground, { fontWeight: "500" }];
+        case "outline":
+        case "ghost":
+          return [zt.text.foreground, { fontWeight: "500" }];
+        case "destructive":
+          return [zt.text.destructiveForeground, { fontWeight: "600" }];
+        case "success":
+          return [zt.text.successForeground, { fontWeight: "600" }];
+        default:
+          return [zt.text.primaryForeground, { fontWeight: "600" }];
+      }
+    }, [variant, zt]);
 
-    const textStyle = React.useMemo(() => {
-      const variantTextStyle = styles[`${variant}Text` as keyof typeof styles];
-      const sizeTextStyle = styles[`${size}Text` as keyof typeof styles];
-      return [variantTextStyle, sizeTextStyle];
-    }, [variant, size, styles]);
+    // Size styles using theme.zero
+    const sizeStyles = useMemo(() => {
+      switch (size) {
+        case "sm":
+          return {
+            button: [
+              zero.px[3],
+              zero.py[2],
+              { borderRadius: zero.borderRadius.md },
+            ],
+            inner: { gap: 4 },
+            text: zt.text.sm,
+          };
+        case "lg":
+          return {
+            button: [
+              zero.px[6],
+              zero.py[3],
+              { borderRadius: zero.borderRadius.md },
+            ],
+            inner: { gap: 8 },
+            text: zt.text.lg,
+          };
+        case "xl":
+          return {
+            button: [
+              zero.px[8],
+              zero.py[4],
+              { borderRadius: zero.borderRadius.lg },
+            ],
+            inner: { gap: 12 },
+            text: zt.text.xl,
+          };
+        case "pill":
+          return {
+            button: [
+              zero.px[4],
+              zero.py[2],
+              { borderRadius: zero.borderRadius.full },
+            ],
+            inner: { gap: 4 },
+            text: zt.text.sm,
+          };
+        case "md":
+        default:
+          return {
+            button: [
+              zero.px[4],
+              zero.py[2],
+              { borderRadius: zero.borderRadius.md },
+            ],
+            inner: { gap: 6 },
+            text: zt.text.md,
+          };
+      }
+    }, [size, zt]);
 
     const iconSize = React.useMemo(() => {
       switch (size) {
         case "sm":
-          return 16;
+          return icons.size.sm;
         case "lg":
-          return 20;
+          return icons.size.lg;
         case "xl":
-          return 24;
+          return icons.size.xl;
         case "md":
         default:
-          return 18;
+          return icons.size.md;
       }
-    }, [size]);
+    }, [size, icons]);
 
     const spinnerSize = useMemo(() => {
       switch (size) {
@@ -113,24 +186,26 @@ export const Button = forwardRef<any, ButtonProps>(
       switch (variant) {
         case "outline":
         case "ghost":
-          return theme.colors.primary;
+          return icons.color.primary;
         case "secondary":
-          return theme.colors.secondaryForeground;
+          return icons.color.secondary;
         case "destructive":
-          return theme.colors.destructiveForeground;
+          return icons.color.destructive;
+        case "success":
+          return icons.color.success;
         default:
-          return theme.colors.primaryForeground;
+          return icons.color.default;
       }
-    }, [variant, theme.colors]);
+    }, [variant, icons]);
 
     return (
       <ButtonPrimitive.Root
         ref={ref}
         disabled={disabled || loading}
-        style={[buttonStyle, style]}
+        style={[buttonStyle, sizeStyles.button, style]}
         {...props}
       >
-        <ButtonPrimitive.Content style={buttonInnerStyle}>
+        <ButtonPrimitive.Content style={sizeStyles.inner}>
           {loading && !leftIcon ? (
             <ButtonPrimitive.Icon position="left">
               <ActivityIndicator size={spinnerSize} color={spinnerColor} />
@@ -144,7 +219,7 @@ export const Button = forwardRef<any, ButtonProps>(
             </ButtonPrimitive.Icon>
           ) : null}
 
-          <TextPrimitive.Root style={textStyle}>
+          <TextPrimitive.Root style={[textStyle, sizeStyles.text]}>
             {loading && loadingText ? loadingText : children}
           </TextPrimitive.Root>
 
@@ -168,142 +243,5 @@ export const Button = forwardRef<any, ButtonProps>(
 
 Button.displayName = "Button";
 
-// Create theme-based styles
-function createStyles(theme: any) {
-  return StyleSheet.create({
-    // Variant styles
-    primaryButton: {
-      backgroundColor: theme.colors.primary,
-      borderWidth: 0,
-      ...theme.shadows.sm,
-    },
-    primaryText: {
-      color: theme.colors.primaryForeground,
-      fontWeight: "600",
-    },
-
-    secondaryButton: {
-      backgroundColor: theme.colors.secondary,
-      borderWidth: 0,
-    },
-    secondaryText: {
-      color: theme.colors.secondaryForeground,
-      fontWeight: "500",
-    },
-
-    outlineButton: {
-      backgroundColor: "transparent",
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-    },
-    outlineText: {
-      color: theme.colors.foreground,
-      fontWeight: "500",
-    },
-
-    ghostButton: {
-      backgroundColor: "transparent",
-      borderWidth: 0,
-    },
-    ghostText: {
-      color: theme.colors.foreground,
-      fontWeight: "500",
-    },
-
-    destructiveButton: {
-      backgroundColor: theme.colors.destructive,
-      borderWidth: 0,
-      ...theme.shadows.sm,
-    },
-    destructiveText: {
-      color: theme.colors.destructiveForeground,
-      fontWeight: "600",
-    },
-
-    successButton: {
-      backgroundColor: theme.colors.success,
-      borderWidth: 0,
-      ...theme.shadows.sm,
-    },
-    successText: {
-      color: theme.colors.successForeground,
-      fontWeight: "600",
-    },
-
-    pillButton: {
-      paddingHorizontal: theme.spacing[2],
-      paddingVertical: theme.spacing[1],
-      borderRadius: tokens.borderRadius.full,
-      minHeight: tokens.touchTargets.minimum / 2,
-    },
-
-    pillText: {
-      color: theme.colors.primaryForeground,
-      fontWeight: "400",
-    },
-
-    // Size styles
-    smButton: {
-      paddingHorizontal: theme.spacing[3],
-      paddingVertical: theme.spacing[2],
-      borderRadius: tokens.borderRadius.md,
-      minHeight: tokens.touchTargets.minimum,
-      gap: theme.spacing[1],
-    },
-    smButtonInner: {
-      gap: theme.spacing[1],
-    },
-    smText: {
-      fontSize: 14,
-      lineHeight: 16,
-    },
-
-    mdButton: {
-      paddingHorizontal: theme.spacing[4],
-      paddingVertical: theme.spacing[3],
-      borderRadius: tokens.borderRadius.md,
-      minHeight: tokens.touchTargets.minimum,
-      gap: theme.spacing[2],
-    },
-    mdButtonInner: {
-      gap: theme.spacing[2],
-    },
-    mdText: {
-      fontSize: 16,
-      lineHeight: 18,
-    },
-
-    lgButton: {
-      paddingHorizontal: theme.spacing[6],
-      paddingVertical: theme.spacing[4],
-      borderRadius: tokens.borderRadius.md,
-      minHeight: tokens.touchTargets.comfortable,
-      gap: theme.spacing[3],
-    },
-    lgButtonInner: {
-      gap: theme.spacing[3],
-    },
-    lgText: {
-      fontSize: 18,
-      lineHeight: 20,
-    },
-
-    xlButton: {
-      paddingHorizontal: theme.spacing[8],
-      paddingVertical: theme.spacing[5],
-      borderRadius: tokens.borderRadius.lg,
-      minHeight: tokens.touchTargets.large,
-      gap: theme.spacing[4],
-    },
-    xlButtonInner: {
-      gap: theme.spacing[4],
-    },
-    xlText: {
-      fontSize: 20,
-      lineHeight: 24,
-    },
-  });
-}
-
 // Export button variants for external use
 export { buttonVariants };