@streamplace/components 0.9.4 → 0.9.6

package/src/components/content-metadata/content-metadata-form.tsx

@@ -1,10 +1,11 @@
 import { forwardRef, useCallback, useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
+import { Linking, Pressable, ScrollView, View } from "react-native";
 import {
   CONTENT_WARNINGS,
   LICENSE_OPTIONS,
 } from "../../lib/metadata-constants";
 
+import { ExternalLink } from "lucide-react-native";
 import {
   PlaceStreamMetadataConfiguration,
   PlaceStreamMetadataContentRights,
@@ -21,6 +22,7 @@ import {
 } from "../../streamplace-store/streamplace-store";
 import { usePDSAgent } from "../../streamplace-store/xrpc";
 import * as zero from "../../ui";
+import { Admonition } from "../ui";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input } from "../ui/input";
@@ -41,7 +43,6 @@ export interface ContentMetadataFormProps {
   style?: any;
 }
 
-// ButtonSelector component (same as in livestream-panel)
 const ButtonSelector = ({
   values,
   selectedValue,
@@ -55,12 +56,13 @@ const ButtonSelector = ({
   disabledValues?: string[];
   style?: any[];
 }) => (
-  <View style={[layout.flex.row, gap.all[1], ...style]}>
+  <View style={[layout.flex.row, gap.all[1], layout.flex.wrap.wrap, ...style]}>
     {values.map(({ label, value }) => (
       <Button
         key={value}
         variant={selectedValue === value ? "primary" : "secondary"}
         size="pill"
+        width="min"
         disabled={disabledValues.includes(value)}
         onPress={() => setSelectedValue(value)}
         style={[
@@ -71,10 +73,8 @@ const ButtonSelector = ({
         ]}
       >
         <Text
-          style={[
-            selectedValue === value ? text.white : text.gray[300],
-            { fontSize: 14, fontWeight: "600" },
-          ]}
+          size="sm"
+          style={[selectedValue === value ? text.white : text.gray[300]]}
         >
           {label}
         </Text>
@@ -93,6 +93,7 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
     const getContentMetadata = useGetContentMetadata();
     const saveContentMetadata = useSaveContentMetadata();
     const toast = useToast();
+    const th = zero.useTheme();
 
     // Local state for metadata
     const [contentWarnings, setContentWarnings] = useState<string[]>([]);
@@ -364,7 +365,7 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                 ]}
                 selectedValue={activeSection}
                 setSelectedValue={setActiveSection}
-                style={[{ marginVertical: -2, flexDirection: "column" }]}
+                style={[{ marginVertical: -2 }]}
               />
             </View>
 
@@ -379,8 +380,7 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     gap.all[2],
                   ]}
                 >
-                  <Text>Content Warnings</Text>
-                  <Text muted>(optional)</Text>
+                  <Text size="lg">Content Warnings</Text>
                 </View>
                 <View style={[gap.all[2], w.percent[100]]}>
                   {CONTENT_WARNINGS.map((warning) => (
@@ -398,6 +398,33 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     </View>
                   ))}
                 </View>
+                <Admonition variant="info" size="sm">
+                  <Text size="sm">
+                    You are required to disclose if your content is not suitable
+                    for certain viewers.
+                  </Text>
+                </Admonition>
+                <Admonition variant="warning" size="sm">
+                  <Text size="sm">
+                    Your node may prohibit some of this content. Read the
+                    community guidelines to make sure.{" "}
+                    <Pressable
+                      onPress={() =>
+                        Linking.openURL(
+                          "https://blog.stream.place/3mcqwibo4ks2w",
+                        )
+                      }
+                    >
+                      <Text size="sm" color={zero.colors.blue[400]}>
+                        Learn more{" "}
+                        <ExternalLink
+                          size="14"
+                          style={{ marginVertical: -2 }}
+                        />
+                      </Text>
+                    </Pressable>
+                  </Text>
+                </Admonition>
               </View>
             )}
 

package/src/components/ui/admonition.tsx

@@ -0,0 +1,177 @@
+import { AlertCircle, CheckCircle, Info, XCircle } from "lucide-react-native";
+import { View, ViewStyle } from "react-native";
+import { useTheme } from "../../ui";
+import { Text } from "./text";
+
+type AdmonitionVariant = "default" | "success" | "error" | "info" | "warning";
+type AdmonitionSize = "sm" | "md" | "lg";
+
+type AdmonitionProps = {
+  variant?: AdmonitionVariant;
+  size?: AdmonitionSize;
+  title?: string;
+  children?: React.ReactNode;
+  iconLeft?: React.ComponentType<any>;
+  style?: ViewStyle;
+};
+
+export function Admonition({
+  variant = "default",
+  size = "md",
+  title,
+  children,
+  iconLeft,
+  style,
+}: AdmonitionProps) {
+  const { theme, icons } = useTheme();
+
+  const defaultIconLeft = (() => {
+    if (iconLeft) return iconLeft;
+    switch (variant) {
+      case "success":
+        return CheckCircle;
+      case "error":
+        return XCircle;
+      case "info":
+        return Info;
+      case "warning":
+        return AlertCircle;
+      default:
+        return Info;
+    }
+  })();
+
+  const FinalIconLeft = defaultIconLeft;
+
+  const variantStyles: Record<AdmonitionVariant, ViewStyle> = {
+    default: {
+      backgroundColor: theme.colors.secondary,
+      borderColor: theme.colors.border,
+    },
+    success: {
+      backgroundColor: theme.colors.success + "15",
+      borderColor: theme.colors.success,
+    },
+    error: {
+      backgroundColor: theme.colors.destructive + "15",
+      borderColor: theme.colors.destructive,
+    },
+    info: {
+      backgroundColor: theme.colors.info + "15",
+      borderColor: theme.colors.info,
+    },
+    warning: {
+      backgroundColor: theme.colors.warning + "15",
+      borderColor: theme.colors.warning,
+    },
+  };
+
+  const iconColor = (() => {
+    switch (variant) {
+      case "success":
+        return theme.colors.success;
+      case "error":
+        return theme.colors.destructive;
+      case "info":
+        return theme.colors.info;
+      case "warning":
+        return theme.colors.warning;
+      default:
+        return theme.colors.foreground;
+    }
+  })();
+
+  const sizeConfig = (() => {
+    switch (size) {
+      case "sm":
+        return {
+          borderRadius: 8,
+          padding: 12,
+          gap: 6,
+          iconSize: icons.size.md,
+          titleSize: "base" as const,
+          contentSize: "sm" as const,
+          innerGap: 8,
+        };
+      case "lg":
+        return {
+          borderRadius: 16,
+          padding: 20,
+          gap: 12,
+          iconSize: icons.size.xl,
+          titleSize: "xl" as const,
+          contentSize: "lg" as const,
+          innerGap: 16,
+        };
+      case "md":
+      default:
+        return {
+          borderRadius: 12,
+          padding: 16,
+          gap: 8,
+          iconSize: icons.size.lg,
+          titleSize: "lg" as const,
+          contentSize: "base" as const,
+          innerGap: 12,
+        };
+    }
+  })();
+
+  let childrenIn = (
+    <View
+      style={{
+        paddingLeft: title ? sizeConfig.iconSize + sizeConfig.innerGap : 0,
+      }}
+    >
+      {typeof children === "string" ? (
+        <Text
+          size={sizeConfig.contentSize}
+          style={{ color: theme.colors.cardForeground, flexWrap: "wrap" }}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+
+  return (
+    <View
+      style={[
+        {
+          borderRadius: sizeConfig.borderRadius,
+          borderWidth: 1,
+          padding: sizeConfig.padding,
+          gap: sizeConfig.gap,
+        },
+        variantStyles[variant],
+        style,
+      ]}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "flex-start",
+          gap: sizeConfig.innerGap,
+        }}
+      >
+        {FinalIconLeft && (
+          <FinalIconLeft size={sizeConfig.iconSize} color={iconColor} />
+        )}
+        {title ? (
+          <Text
+            size={sizeConfig.titleSize}
+            weight="semibold"
+            style={{ flex: 1 }}
+          >
+            {title}
+          </Text>
+        ) : (
+          children && <View style={{ flex: 1 }}>{childrenIn}</View>
+        )}
+      </View>
+      {children && title && childrenIn}
+    </View>
+  );
+}

package/src/components/ui/button.tsx

@@ -41,6 +41,7 @@ export interface ButtonProps
   loading?: boolean;
   loadingText?: string;
   width?: "full" | "min" | number;
+  hoverStyle?: ButtonPrimitiveProps["hoverStyle"];
 }
 
 export const Button = forwardRef<any, ButtonProps>(
@@ -56,6 +57,7 @@ export const Button = forwardRef<any, ButtonProps>(
       disabled,
       style,
       width = "full",
+      hoverStyle,
       ...props
     },
     ref,
@@ -222,6 +224,7 @@ export const Button = forwardRef<any, ButtonProps>(
         ref={ref}
         disabled={disabled || loading}
         style={[buttonStyle, sizeStyles.button, widthStyle, style]}
+        hoverStyle={hoverStyle}
         {...props}
       >
         <ButtonPrimitive.Content style={sizeStyles.inner}>

package/src/components/ui/index.ts

@@ -5,6 +5,7 @@ export * from "./primitives/modal";
 export * from "./primitives/text";
 
 // Export styled components
+export * from "./admonition";
 export * from "./button";
 export * from "./checkbox";
 export * from "./dialog";

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

@@ -1,19 +1,21 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import {
   AccessibilityRole,
   GestureResponderEvent,
+  Platform,
+  Pressable,
+  PressableProps,
+  StyleProp,
   StyleSheet,
   Text,
   TextProps,
-  TouchableOpacity,
-  TouchableOpacityProps,
   View,
   ViewProps,
+  ViewStyle,
 } from "react-native";
 
 // Base button primitive interface
-export interface ButtonPrimitiveProps
-  extends Omit<TouchableOpacityProps, "onPress"> {
+export interface ButtonPrimitiveProps extends Omit<PressableProps, "onPress"> {
   onPress?: (event: GestureResponderEvent) => void;
   disabled?: boolean;
   loading?: boolean;
@@ -21,11 +23,12 @@ export interface ButtonPrimitiveProps
   accessibilityLabel?: string;
   accessibilityHint?: string;
   testID?: string;
+  hoverStyle?: StyleProp<ViewStyle>;
 }
 
 // Button root primitive - handles all touch interactions
 export const ButtonRoot = forwardRef<
-  React.ComponentRef<typeof TouchableOpacity>,
+  React.ComponentRef<typeof Pressable>,
   ButtonPrimitiveProps
 >(
   (
@@ -43,11 +46,13 @@ export const ButtonRoot = forwardRef<
       accessibilityState,
       testID,
       style,
-      activeOpacity = 0.7,
+      hoverStyle,
       ...props
     },
     ref,
   ) => {
+    const [isHovered, setIsHovered] = useState(false);
+
     const handlePress = React.useCallback(
       (event: GestureResponderEvent) => {
         if (!disabled && !loading && onPress) {
@@ -84,15 +89,26 @@ export const ButtonRoot = forwardRef<
       [disabled, loading, onLongPress],
     );
 
+    const handleHoverIn = React.useCallback(() => {
+      if (!disabled && !loading) {
+        setIsHovered(true);
+      }
+    }, [disabled, loading]);
+
+    const handleHoverOut = React.useCallback(() => {
+      setIsHovered(false);
+    }, []);
+
     return (
-      <TouchableOpacity
+      <Pressable
         ref={ref}
         onPress={handlePress}
         onPressIn={handlePressIn}
         onPressOut={handlePressOut}
         onLongPress={handleLongPress}
+        onHoverIn={handleHoverIn}
+        onHoverOut={handleHoverOut}
         disabled={disabled || loading}
-        activeOpacity={disabled || loading ? 1 : activeOpacity}
         accessibilityRole={accessibilityRole}
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
@@ -104,13 +120,15 @@ export const ButtonRoot = forwardRef<
         testID={testID}
         style={[
           primitiveStyles.button,
+          primitiveStyles.transition,
           (disabled || loading) && primitiveStyles.disabled,
-          style,
+          style as any,
+          isHovered && hoverStyle,
         ]}
         {...props}
       >
         {children}
-      </TouchableOpacity>
+      </Pressable>
     );
   },
 );
@@ -245,6 +263,14 @@ const primitiveStyles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  transition:
+    Platform.OS === "web"
+      ? // probably fine if web-only
+        ({
+          transitionDuration: "150ms",
+          transitionProperty: "background-color, border-color, color",
+        } as any)
+      : undefined,
   disabled: {
     opacity: 0.5,
   },

package/src/components/ui/resizeable.tsx

@@ -95,7 +95,8 @@ export function Resizable({
         translateY:
           slideKeyboard +
           Math.max(0, -sheetHeight.value) +
-          (slideKeyboard < 0 ? 0 : -safeBottom),
+          (slideKeyboard < 0 ? 0 : -safeBottom) -
+          (Math.abs(slideKeyboard) > 1 ? 32 : 16),
       },
     ],
   }));

package/src/components/ui/text.tsx

@@ -62,7 +62,17 @@ const textVariants = cva("", {
 
 export interface TextProps
   extends Omit<TextPrimitiveProps, "variant" | "size" | "weight" | "color">,
-    VariantProps<typeof textVariants> {
+    Omit<VariantProps<typeof textVariants>, "color"> {
+  // Override color to accept hex values and custom strings
+  color?:
+    | "default"
+    | "muted"
+    | "primary"
+    | "secondary"
+    | "destructive"
+    | "success"
+    | "warning"
+    | (string & {});
   // Additional convenience props
   muted?: boolean;
   bold?: boolean;

package/src/components/ui/textarea.tsx

@@ -5,9 +5,11 @@ import {
 import * as React from "react";
 import { Platform, TextInput, type TextInputProps } from "react-native";
 import { bg, borders, flex, p, text } from "../../lib/theme/atoms";
+import { useTheme } from "../../ui";
 
 const Textarea = React.forwardRef<TextInput, TextInputProps>(
   ({ style, multiline = true, numberOfLines = 4, ...props }, ref) => {
+    let th = useTheme();
     // Detect if we're inside a bottom sheet
     let isInBottomSheet = false;
     try {
@@ -41,6 +43,7 @@ const Textarea = React.forwardRef<TextInput, TextInputProps>(
         multiline={multiline}
         numberOfLines={numberOfLines}
         textAlignVertical="top"
+        placeholderTextColor={th.theme.colors.textMuted}
         {...props}
       />
     );

package/src/index.tsx

@@ -34,12 +34,14 @@ export * from "./lib/theme";
 export * from "./components/chat/chat";
 export * from "./components/chat/chat-box";
 export * from "./components/chat/system-message";
+export * from "./components/chat/update-stream-title-dialog";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
 
 export * from "./components/stream-notification";
 export * from "./lib/stream-notifications";
 
+export * from "./utils/did";
 export * from "./utils/format-handle";
 
 export { DanmuOverlay } from "./components/danmu/danmu-overlay";

package/src/lib/theme/tokens.ts

@@ -337,17 +337,17 @@ export const colors = {
   },
 
   warning: {
-    50: "#fffbeb",
-    100: "#fef3c7",
-    200: "#fde68a",
-    300: "#fcd34d",
-    400: "#fbbf24",
-    500: "#f59e0b",
-    600: "#d97706",
-    700: "#b45309",
-    800: "#92400e",
-    900: "#78350f",
-    950: "#451a03",
+    50: "#fffaf0",
+    100: "#ffe6c7",
+    200: "#ffd99e",
+    300: "#ffcc75",
+    400: "#ffb94e",
+    500: "#ff9e1f",
+    600: "#e67e00",
+    700: "#cc6600",
+    800: "#998c00",
+    900: "#664200",
+    950: "#332900",
   },
 
   // iOS system colors (adaptive)

package/src/utils/did.ts

@@ -0,0 +1,61 @@
+export interface DIDDocument {
+  id: string;
+  service?: Array<{
+    id: string;
+    type?: string;
+    serviceEndpoint?: string;
+  }>;
+  [key: string]: any;
+}
+
+export async function resolveDIDDocument(did: string): Promise<DIDDocument> {
+  let didDocUrl: string;
+
+  if (did.startsWith("did:web:")) {
+    // For did:web, construct the URL directly
+    const domain = did.replace("did:web:", "").replace(/:/g, "/");
+    didDocUrl = `https://${domain}/.well-known/did.json`;
+  } else if (did.startsWith("did:plc:")) {
+    // For did:plc, use plc.directory
+    didDocUrl = `https://plc.directory/${did}`;
+  } else {
+    throw new Error(`Unsupported DID method: ${did}`);
+  }
+
+  const response = await fetch(didDocUrl);
+  if (!response.ok) {
+    throw new Error(
+      `Failed to resolve DID document for ${did}: ${response.status}`,
+    );
+  }
+
+  return response.json();
+}
+
+export function getPDSServiceEndpoint(didDoc: DIDDocument): string {
+  const pdsService = didDoc.service?.find((s) => s.id === "#atproto_pds");
+
+  if (!pdsService?.serviceEndpoint) {
+    throw new Error("No PDS service endpoint found in DID document");
+  }
+
+  return pdsService.serviceEndpoint;
+}
+
+export async function getBlob(
+  did: string,
+  cid: string,
+  didDoc?: DIDDocument,
+): Promise<Blob> {
+  const doc = didDoc || (await resolveDIDDocument(did));
+  const pdsEndpoint = getPDSServiceEndpoint(doc);
+
+  const blobUrl = `${pdsEndpoint}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`;
+
+  const response = await fetch(blobUrl);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch blob: ${response.status}`);
+  }
+
+  return response.blob();
+}