@streamplace/components 0.7.34 → 0.7.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.34",
+  "version": "0.7.35",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -54,5 +54,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "8d33e4f6129af71ccf3c5d959e347f78b6eb609a"
+  "gitHead": "eaefc85434e81e296c7248f6e6965a2f31d50ff8"
 }

package/src/components/dashboard/header.tsx

@@ -1,5 +1,5 @@
-import { Car, Radio, Users } from "lucide-react-native";
-import { Text, View } from "react-native";
+import { AlertCircle, Car, Radio, Users } from "lucide-react-native";
+import { Pressable, Text, View } from "react-native";
 import * as zero from "../../ui";
 
 const { bg, r, borders, px, py, text, layout, gap } = zero;
@@ -103,6 +103,8 @@ interface HeaderProps {
   bitrate?: string;
   timeBetweenSegments?: number;
   connectionStatus?: "excellent" | "good" | "poor" | "offline";
+  problemsCount?: number;
+  onProblemsPress?: () => void;
 }
 
 export default function Header({
@@ -113,6 +115,8 @@ export default function Header({
   bitrate = "0 mbps",
   timeBetweenSegments = 0,
   connectionStatus = "offline",
+  problemsCount = 0,
+  onProblemsPress,
 }: HeaderProps) {
   const getConnectionQuality = (): "good" | "warning" | "error" => {
     if (timeBetweenSegments <= 1500) return "good";
@@ -139,7 +143,37 @@ export default function Header({
           <Text style={[text.white, { fontSize: 18, fontWeight: "600" }]}>
             {streamTitle}
           </Text>
-          <StatusIndicator status={connectionStatus} isLive={isLive} />
+          <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[3]]}>
+            <StatusIndicator status={connectionStatus} isLive={isLive} />
+            {problemsCount > 0 && (
+              <Pressable onPress={onProblemsPress}>
+                <View
+                  style={[
+                    layout.flex.row,
+                    layout.flex.alignCenter,
+                    gap.all[1],
+                    px[2],
+                    py[1],
+                    r.md,
+                    bg.orange[900],
+                    borders.width.thin,
+                    borders.color.orange[700],
+                    { marginVertical: -8 },
+                  ]}
+                >
+                  <AlertCircle size={14} color="#fb923c" />
+                  <Text
+                    style={[
+                      text.orange[400],
+                      { fontSize: 11, fontWeight: "600" },
+                    ]}
+                  >
+                    {problemsCount} {problemsCount === 1 ? "Issue" : "Issues"}
+                  </Text>
+                </View>
+              </Pressable>
+            )}
+          </View>
         </View>
       </View>
 

package/src/components/dashboard/index.tsx

@@ -2,4 +2,4 @@ export { default as ChatPanel } from "./chat-panel";
 export { default as Header } from "./header";
 export { default as InformationWidget } from "./information-widget";
 export { default as ModActions } from "./mod-actions";
-export { default as Problems } from "./problems";
+export { default as Problems, ProblemsWrapperRef } from "./problems";

package/src/components/dashboard/problems.tsx

@@ -1,12 +1,32 @@
-import { ExternalLink } from "lucide-react-native";
-import { useState } from "react";
-import { Linking, Pressable, Text, View } from "react-native";
+import {
+  CircleAlert,
+  CircleX,
+  ExternalLink,
+  Info,
+  Sparkle,
+} from "lucide-react-native";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { Linking, Pressable, View } from "react-native";
 import { useLivestreamStore } from "../../livestream-store";
 import { LivestreamProblem } from "../../livestream-store/livestream-state";
 import * as zero from "../../ui";
+import { Button, Text } from "../ui";
 
 const { bg, r, borders, p, text, layout, gap } = zero;
 
+const getIcon = (severity: string) => {
+  switch (severity) {
+    case "error":
+      return <CircleX size={24} color="white" />;
+    case "warning":
+      return <CircleAlert size={24} color="white" />;
+    case "info":
+      return <Info size={24} color="white" />;
+    default:
+      return <Sparkle size={24} color="white" />;
+  }
+};
+
 const Problems = ({
   probs,
   onIgnore,
@@ -15,9 +35,9 @@ const Problems = ({
   onIgnore: () => void;
 }) => {
   return (
-    <View style={[gap.all[3]]}>
-      <View>
-        <Text style={[text.white, { fontSize: 24, fontWeight: "bold" }]}>
+    <View style={[gap.all[4]]}>
+      <View style={[gap.all[2]]}>
+        <Text size="2xl" style={[text.white, { fontWeight: "600" }]}>
           Optimize Your Stream
         </Text>
         <Text style={[text.gray[300]]}>
@@ -34,26 +54,22 @@ const Problems = ({
               { gap: 8, alignItems: "flex-start" },
             ]}
           >
-            <Text
+            <View
               style={[
-                r.sm,
-                p[2],
+                zero.r.full,
+                zero.p[1],
                 {
-                  width: 82,
-                  textAlign: "center",
                   backgroundColor:
                     p.severity === "error"
                       ? "#7f1d1d"
                       : p.severity === "warning"
                         ? "#7c2d12"
                         : "#1e3a8a",
-                  color: "white",
-                  fontSize: 12,
                 },
               ]}
             >
-              {p.severity}
-            </Text>
+              {getIcon(p.severity)}
+            </View>
             <View style={[{ flex: 1 }, gap.all[1]]}>
               <Text style={[text.white, { fontWeight: "600" }]}>{p.code}</Text>
               <Text style={[text.gray[400], { fontSize: 14 }]}>
@@ -79,39 +95,34 @@ const Problems = ({
           </View>
         </View>
       ))}
-
-      <Pressable
-        onPress={onIgnore}
-        style={[
-          bg.blue[600],
-          r.md,
-          p[3],
-          layout.flex.center,
-          { marginTop: 16 },
-        ]}
-      >
-        <Text style={[text.white, { fontWeight: "600" }]}>Ignore</Text>
-      </Pressable>
+      <View style={[layout.flex.row, layout.flex.justify.end]}>
+        <Button onPress={onIgnore} variant="secondary">
+          <Text style={[text.white, { fontWeight: "600" }]}>Acknowledge</Text>
+        </Button>
+      </View>
     </View>
   );
 };
 
-export const ProblemsWrapper = ({
-  children,
-}: {
-  children: React.ReactElement;
-}) => {
+export interface ProblemsWrapperRef {
+  setDismiss: (value: boolean) => void;
+}
+
+export const ProblemsWrapper = forwardRef<
+  ProblemsWrapperRef,
+  {
+    children: React.ReactElement;
+  }
+>(({ children }, ref) => {
   const problems = useLivestreamStore((x) => x.problems);
   const [dismiss, setDismiss] = useState(false);
 
+  useImperativeHandle(ref, () => ({
+    setDismiss,
+  }));
+
   return (
-    <View
-      style={[
-        { position: "relative", flex: 1 },
-        layout.flex.center,
-        { flexBasis: 0 },
-      ]}
-    >
+    <>
       {children}
       {problems.length > 0 && !dismiss && (
         <View
@@ -127,16 +138,16 @@ export const ProblemsWrapper = ({
             },
             layout.flex.center,
             { justifyContent: "flex-start" },
-            p[8],
+            p[12],
           ]}
         >
           <View
             style={[
-              bg.gray[900],
-              borders.color.gray[700],
+              bg.neutral[900],
+              borders.color.neutral[700],
               borders.width.thin,
               r.lg,
-              p[4],
+              p[8],
               { maxWidth: 700, width: "100%" },
             ]}
           >
@@ -144,8 +155,8 @@ export const ProblemsWrapper = ({
           </View>
         </View>
       )}
-    </View>
+    </>
   );
-};
+});
 
 export default Problems;

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

@@ -1,9 +1,11 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
 import { Menu } from "lucide-react-native";
-import { Platform, View } from "react-native";
+import { Image, Linking, Platform, Pressable, View } from "react-native";
+import { useAvatars, useLivestreamInfo, zero } from "../../..";
 import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
+import { useGraphManager } from "../../../streamplace-store/graph";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -14,6 +16,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
@@ -38,6 +41,12 @@ export function ContextMenu({
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
 
+  const { profile } = useLivestreamInfo();
+  const avatars = useAvatars(profile?.did ? [profile?.did] : []);
+  const ls = useLivestreamStore((x) => x.livestream);
+
+  let graphManager = useGraphManager(profile?.did);
+
   const lowLatency = protocol === "webrtc";
   const setLowLatency = (value: boolean) => {
     setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
@@ -61,6 +70,96 @@ export function ContextMenu({
       </DropdownMenuTrigger>
       <Portal container={dropdownPortalContainer}>
         <DropdownMenuContent side="top" align="end">
+          {Platform.OS !== "web" && (
+            <DropdownMenuGroup title="Streamer">
+              <View
+                style={[
+                  zero.layout.flex.row,
+                  zero.layout.flex.center,
+                  zero.gap.all[3],
+                  { flex: 1, minWidth: 0 },
+                ]}
+              >
+                {profile?.did && avatars[profile?.did]?.avatar && (
+                  <Image
+                    key="avatar"
+                    source={{
+                      uri: avatars[profile?.did]?.avatar,
+                    }}
+                    style={{ width: 42, height: 42, borderRadius: 999 }}
+                    resizeMode="cover"
+                  />
+                )}
+                <View style={{ flex: 1, minWidth: 0 }}>
+                  <View
+                    style={[
+                      zero.layout.flex.row,
+                      zero.layout.flex.alignCenter,
+                      zero.gap.all[2],
+                    ]}
+                  >
+                    <Pressable
+                      onPress={() => {
+                        if (profile?.handle) {
+                          const url = `https://bsky.app/profile/${profile.handle}`;
+                          Linking.openURL(url);
+                        }
+                      }}
+                    >
+                      <Text>@{profile?.handle || "user"}</Text>
+                    </Pressable>
+                    {/*{did && profile && (
+                    <FollowButton streamerDID={profile?.did} currentUserDID={did} />
+                  )}*/}
+                  </View>
+                  <Text
+                    color="muted"
+                    size="sm"
+                    numberOfLines={2}
+                    ellipsizeMode="tail"
+                  >
+                    {ls?.record.title || "Stream Title"}
+                  </Text>
+                </View>
+              </View>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                disabled={graphManager.isLoading || !profile?.did}
+                onPress={async () => {
+                  try {
+                    if (graphManager.isFollowing) {
+                      await graphManager.unfollow();
+                    } else {
+                      await graphManager.follow();
+                    }
+                  } catch (err) {
+                    console.error("Follow/unfollow error:", err);
+                  }
+                }}
+              >
+                <Text
+                  color={graphManager.isFollowing ? "destructive" : "default"}
+                >
+                  {graphManager.isLoading
+                    ? "Loading..."
+                    : graphManager.isFollowing
+                      ? "Unfollow"
+                      : "Follow"}
+                </Text>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onPress={() => {
+                  if (profile?.handle) {
+                    const url = `https://bsky.app/profile/${profile.handle}`;
+                    Linking.openURL(url);
+                  }
+                }}
+              >
+                <Text>View Profile on Bluesky</Text>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          )}
           <DropdownMenuGroup title="Resolution">
             <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
               <DropdownMenuRadioItem value="source">

package/src/components/ui/button.tsx

@@ -109,7 +109,7 @@ export const Button = forwardRef<any, ButtonProps>(
               { borderRadius: zero.borderRadius.md },
             ],
             inner: { gap: 4 },
-            text: zt.text.sm,
+            text: zero.typography.universal.sm,
           };
         case "lg":
           return {
@@ -118,8 +118,8 @@ export const Button = forwardRef<any, ButtonProps>(
               zero.py[3],
               { borderRadius: zero.borderRadius.md },
             ],
-            inner: { gap: 8 },
-            text: zt.text.lg,
+            inner: { gap: 12 },
+            text: zero.typography.universal.lg,
           };
         case "xl":
           return {
@@ -129,17 +129,17 @@ export const Button = forwardRef<any, ButtonProps>(
               { borderRadius: zero.borderRadius.lg },
             ],
             inner: { gap: 12 },
-            text: zt.text.xl,
+            text: zero.typography.universal.xl,
           };
         case "pill":
           return {
             button: [
-              zero.px[4],
-              zero.py[2],
+              zero.px[2],
+              zero.py[1],
               { borderRadius: zero.borderRadius.full },
             ],
             inner: { gap: 4 },
-            text: zt.text.sm,
+            text: zero.typography.universal.xs,
           };
         case "md":
         default:
@@ -150,7 +150,7 @@ export const Button = forwardRef<any, ButtonProps>(
               { borderRadius: zero.borderRadius.md },
             ],
             inner: { gap: 6 },
-            text: zt.text.md,
+            text: zero.typography.universal.sm,
           };
       }
     }, [size, zt]);
@@ -211,15 +211,12 @@ export const Button = forwardRef<any, ButtonProps>(
               <ActivityIndicator size={spinnerSize} color={spinnerColor} />
             </ButtonPrimitive.Icon>
           ) : leftIcon ? (
-            <ButtonPrimitive.Icon
-              position="left"
-              style={{ width: iconSize, height: iconSize }}
-            >
+            <ButtonPrimitive.Icon position="left">
               {leftIcon}
             </ButtonPrimitive.Icon>
           ) : null}
 
-          <TextPrimitive.Root style={[textStyle, sizeStyles.text]}>
+          <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
             {loading && loadingText ? loadingText : children}
           </TextPrimitive.Root>
 

package/src/components/ui/dropdown.tsx

@@ -13,7 +13,6 @@ import {
   Platform,
   Pressable,
   StyleSheet,
-  Text,
   useWindowDimensions,
   View,
 } from "react-native";
@@ -39,6 +38,7 @@ import {
   objectFromObjects,
   TextContext as TextClassContext,
 } from "./primitives/text";
+import { Text } from "./text";
 
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -87,7 +87,7 @@ export const DropdownMenuBottomSheet = forwardRef<
           zt.bg.mutedForeground,
         ]}
       >
-        <BottomSheetView style={[px[2]]}>
+        <BottomSheetView style={[px[4]]}>
           {typeof children === "function"
             ? children({ pressed: true })
             : children}
@@ -285,9 +285,15 @@ export const DropdownMenuItem = forwardRef<
             pr[2],
           ]}
         >
-          {typeof children === "function"
-            ? children({ pressed: true })
-            : children}
+          {typeof children === "function" ? (
+            children({ pressed: true })
+          ) : typeof children === "string" ? (
+            <Text style={[inset && gap[2], disabled && { opacity: 0.5 }]}>
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
         </View>
       </TextClassContext.Provider>
     </Pressable>
@@ -384,13 +390,15 @@ export const DropdownMenuLabel = forwardRef<
   return (
     <Text
       ref={ref}
-      style={[
-        px[2],
-        py[2],
-        { color: theme.colors.textMuted },
-        a.fontSize.base,
-        inset && gap[2],
-      ]}
+      style={
+        [
+          px[2],
+          py[2],
+          { color: theme.colors.textMuted },
+          a.fontSize.base,
+          (inset && gap[2]) as any,
+        ] as any
+      }
       {...props}
     />
   );
@@ -404,7 +412,13 @@ export const DropdownMenuSeparator = forwardRef<
   return (
     <View
       ref={ref}
-      style={[{ height: 0.5 }, { backgroundColor: theme.colors.border }]}
+      style={[
+        {
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+          marginVertical: -0.5,
+        },
+      ]}
       {...props}
     />
   );

package/src/components/ui/icons.tsx

@@ -48,3 +48,17 @@ export function createThemedIcon(
     );
   };
 }
+
+// usage of createThemedIcon
+export function Icon({
+  icon,
+  variant = "default",
+  size = "md",
+  color,
+  ...restProps
+}: { icon: React.ComponentType<LucideProps> } & IconProps) {
+  const ThemedIcon = createThemedIcon(icon);
+  return (
+    <ThemedIcon variant={variant} size={size} color={color} {...restProps} />
+  );
+}

package/src/components/ui/primitives/button.tsx

@@ -244,7 +244,6 @@ const primitiveStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    minHeight: 44, // iOS minimum touch target
   },
   disabled: {
     opacity: 0.5,
@@ -264,12 +263,6 @@ const primitiveStyles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  iconLeft: {
-    marginRight: 8,
-  },
-  iconRight: {
-    marginLeft: 8,
-  },
   iconDisabled: {
     opacity: 0.5,
   },

package/src/lib/theme/tokens.ts

@@ -590,52 +590,61 @@ export const typography = {
   },
 
   // Universal typography scale
+  // Atkinson's center is weird so the marginBottom is there to correct it?
   universal: {
     xs: {
       fontSize: 12,
       lineHeight: 16,
+      marginBottom: -0.7,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     sm: {
       fontSize: 14,
       lineHeight: 20,
+      marginBottom: -1,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     base: {
       fontSize: 16,
       lineHeight: 24,
+      marginBottom: -1.2,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     lg: {
       fontSize: 18,
       lineHeight: 28,
+      marginBottom: -1.5,
       fontWeight: "400" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Regular",
     },
     xl: {
       fontSize: 20,
       lineHeight: 28,
+      marginBottom: -1.75,
       fontWeight: "500" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Medium",
     },
     "2xl": {
       fontSize: 24,
       lineHeight: 32,
+      marginBottom: -2,
       fontWeight: "600" as const,
       fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
     },
     "3xl": {
       fontSize: 30,
       lineHeight: 36,
+      marginBottom: -2.5,
       fontWeight: "700" as const,
       fontFamily: "AtkinsonHyperlegibleNext-Bold",
     },
     "4xl": {
       fontSize: 36,
       lineHeight: 40,
+      marginBottom: -3,
       fontWeight: "700" as const,
       fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
     },