@streamplace/components 0.9.15 → 0.10.7

package/src/components/error-boundary.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Text, View } from "react-native";
+
+type ErrorBoundaryProps = {
+  children: React.ReactNode;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+};
+
+export class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: any): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: any, info: any) {
+    console.error("<ErrorBoundary> caught:", error);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <View>
+          <Text>Error</Text>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/mobile-player/props.tsx

@@ -2,6 +2,7 @@ export type PlayerProps = {
   name: string;
   playerId?: string;
   src: string;
+  mode?: "live" | "vod";
   muted: boolean;
   telemetry: boolean;
   fullscreen: boolean;

package/src/components/mobile-player/rotation-lock.tsx

@@ -64,12 +64,12 @@ export const RotationProvider: React.FC<RotationProviderProps> = ({
     try {
       await ScreenOrientation.unlockAsync();
       await ScreenOrientation.lockAsync(
-        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+        ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
       );
       setIsLocked(true);
 
       // set current orientation to landscape right
-      setCurrentOrientation(ScreenOrientation.Orientation.LANDSCAPE_RIGHT);
+      setCurrentOrientation(ScreenOrientation.Orientation.LANDSCAPE_LEFT);
 
       if (__DEV__) {
         console.log("📲 Manual landscape");

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

@@ -1,7 +1,8 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
+import { Image } from "expo-image";
 import { Cog } from "lucide-react-native";
 import { useState } from "react";
-import { Image, Linking, Platform, Pressable, View } from "react-native";
+import { Linking, Platform, Pressable, View } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -161,7 +162,7 @@ export function ContextMenu({
                     uri: avatars[profile?.did]?.avatar,
                   }}
                   style={{ width: 42, height: 42, borderRadius: 999 }}
-                  resizeMode="cover"
+                  contentFit="cover"
                 />
               )}
               <View style={{ flex: 1, minWidth: 0 }}>

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

@@ -55,6 +55,7 @@ export function ViewerLoadingOverlay() {
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "rgba(0,0,0,0.3)",
+          pointerEvents: "none",
         },
         animatedStyle,
       ]}

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

@@ -91,6 +91,9 @@ export function NativeVideo(props?: {
 
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
     const { width, height } = event.nativeEvent.layout;
+    if (dimensions.width === width && dimensions.height === height) {
+      return;
+    }
     setDimensions({ width, height });
     setPlayerWidth(width);
     setPlayerHeight(height);
@@ -165,7 +168,6 @@ export function NativeVideo(props?: {
       <VideoView
         ref={videoRef}
         player={player}
-        allowsFullscreen
         nativeControls={fullscreen}
         onFullscreenEnter={() => {
           setFullscreen(true);
@@ -175,6 +177,11 @@ export function NativeVideo(props?: {
         }}
         allowsPictureInPicture={props?.pictureInPictureEnabled !== false}
         onLayout={handleLayout}
+        style={{
+          minWidth: "100%",
+          minHeight: "100%",
+          flex: 1,
+        }}
       />
     </>
   );

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

@@ -36,12 +36,14 @@ function assignVideoRef(
 
 type VideoProps = {
   url: string;
-  videoRef?: React.RefObject<HTMLVideoElement>;
+  videoRef?: React.RefObject<HTMLVideoElement | null>;
   objectFit?: "contain" | "cover";
   pictureInPictureEnabled?: boolean;
 };
 
-function useVideoDimensions(videoRef: React.RefObject<HTMLVideoElement>) {
+function useVideoDimensions(
+  videoRef: React.RefObject<HTMLVideoElement | null>,
+) {
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 
   useEffect(() => {
@@ -133,7 +135,7 @@ const updateEvents = {
 
 const VideoElement = forwardRef<
   HTMLVideoElement,
-  VideoProps & { videoRef?: React.RefObject<HTMLVideoElement> }
+  VideoProps & { videoRef?: React.RefObject<HTMLVideoElement | null> }
 >((props, ref) => {
   const x = usePlayerStore((x) => x);
   const url = useStreamplaceStore((x) => x.url);
@@ -359,7 +361,7 @@ export function HLSPlayer(props: VideoProps) {
 }
 
 export function WebRTCPlayer(
-  props: VideoProps & { videoRef?: React.RefObject<HTMLVideoElement> },
+  props: VideoProps & { videoRef?: React.RefObject<HTMLVideoElement | null> },
 ) {
   const [webrtcError, setWebrtcError] = useState<string | null>(null);
   const setStatus = usePlayerStore((x) => x.setStatus);
@@ -432,7 +434,7 @@ export function WebRTCPlayerInner({
   width,
   height,
 }: {
-  videoRef?: React.RefObject<HTMLVideoElement>;
+  videoRef?: React.RefObject<HTMLVideoElement | null>;
   url: string;
   width?: string | number;
   height?: string | number;

package/src/components/stream-notification/pin-notification.tsx

@@ -0,0 +1,135 @@
+import { EyeOff, Pin, X } from "lucide-react-native";
+import { useEffect, useState } from "react";
+import { Linking, Pressable, View } from "react-native";
+import { PinnedRecordViewHydrated, PlaceStreamChatProfile } from "streamplace";
+import {
+  Text,
+  useCanModerate,
+  useLivestreamStore,
+  useTheme,
+  zero,
+} from "../../";
+import { RichtextSegment, segmentize } from "../../lib/facet";
+import { formatHandleWithAt } from "../../utils/format-handle";
+
+const getRgbColor = (color?: PlaceStreamChatProfile.Color) =>
+  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : undefined;
+
+function renderSegment(segment: RichtextSegment, index: number) {
+  if (segment.features && segment.features.length > 0) {
+    const ftr = segment.features[0];
+    if (ftr.$type === "app.bsky.richtext.facet#link") {
+      return (
+        <Text
+          key={index}
+          style={[{ color: "#007AFF" }]}
+          onPress={() => Linking.openURL((ftr as any).uri || "")}
+        >
+          {segment.text}
+        </Text>
+      );
+    }
+    if (ftr.$type === "app.bsky.richtext.facet#mention") {
+      return (
+        <Text key={index} style={[{ color: "#007AFF" }]}>
+          {segment.text}
+        </Text>
+      );
+    }
+  }
+  return <Text key={index}>{segment.text}</Text>;
+}
+
+export function PinnedCommentNotification({
+  pinnedComment,
+  onDismiss,
+  onUnpin,
+}: {
+  pinnedComment: PinnedRecordViewHydrated;
+  onDismiss: () => void;
+  onUnpin: () => void;
+}) {
+  const z = useTheme();
+  const message = pinnedComment.message;
+  const pinnedByColor = (pinnedComment.pinnedBy as any)?.color || "#bebebe";
+  const record = pinnedComment.record;
+
+  const currentStreamer = useLivestreamStore((state) => state.profile?.did);
+
+  console.log("checking if we can mod", currentStreamer);
+
+  const canActuallyPin = useCanModerate(currentStreamer)?.canPin;
+
+  const messageRecord = message?.record as any;
+
+  const [expiresAt] = useState<Date | null>(
+    record.expiresAt ? new Date(record.expiresAt) : null,
+  );
+
+  useEffect(() => {
+    if (!expiresAt) return;
+    const remaining = expiresAt.getTime() - Date.now();
+    if (remaining <= 0) {
+      onDismiss();
+      return;
+    }
+    const timeout = setTimeout(onDismiss, remaining);
+    return () => clearTimeout(timeout);
+  }, [expiresAt, onDismiss]);
+
+  const authorName = message ? formatHandleWithAt(message.author) : "unknown";
+  const authorColor = getRgbColor((message as any)?.chatProfile?.color);
+
+  const segments = messageRecord
+    ? segmentize(messageRecord.text, messageRecord.facets)
+    : [];
+
+  return (
+    <View style={[zero.bg.neutral[900], zero.r.lg, { overflow: "hidden" }]}>
+      <View
+        style={[
+          zero.layout.flex.row,
+          zero.layout.flex.alignCenter,
+          zero.px[3],
+          zero.py[2],
+          { gap: 8 },
+        ]}
+      >
+        <View style={{ transform: [{ rotate: "-25deg" }] }}>
+          <Pin
+            size={24}
+            color={authorColor || z.theme.colors.primary}
+            fill={authorColor || z.theme.colors.primary}
+          />
+        </View>
+        <View
+          style={[zero.layout.flex.column, zero.flex.values[1], { gap: 4 }]}
+        >
+          <View style={[zero.layout.flex.row, { gap: 4, flexWrap: "wrap" }]}>
+            <Text
+              style={[
+                {
+                  fontWeight: "600",
+                  color: authorColor || zero.colors.gray[200],
+                },
+              ]}
+            >
+              {authorName}
+            </Text>
+            {segments.map((seg, i) => renderSegment(seg, i))}
+          </View>
+        </View>
+        <View style={[zero.layout.flex.row, { gap: 4 }]}>
+          {canActuallyPin && (
+            <Pressable onPress={onUnpin} style={{ padding: 4 }}>
+              <X size={16} color={zero.colors.gray[400]} />
+            </Pressable>
+          )}
+          <Pressable onPress={onDismiss} style={{ padding: 4 }}>
+            <EyeOff size={16} color={zero.colors.gray[400]} />
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/components/ui/dropdown.native.tsx

@@ -358,7 +358,11 @@ export const DropdownMenuSubTrigger = forwardRef<
   const { icons } = useTheme();
 
   React.useEffect(() => {
-    if (subMenuContext && subMenuTitle) {
+    if (
+      subMenuContext &&
+      subMenuTitle &&
+      subMenuContext.title !== subMenuTitle
+    ) {
       subMenuContext.setTitle(subMenuTitle);
     }
   }, [subMenuContext, subMenuTitle]);

package/src/components/ui/dropdown.tsx

@@ -74,7 +74,7 @@ export const DropdownMenuSubTrigger = forwardRef<
     inset?: boolean;
     children?: React.ReactNode;
   }
->(({ inset, children, subMenuTitle, ...props }, ref) => {
+>(({ inset, children, subMenuTitle, style, ...props }, ref) => {
   const { icons } = useTheme();
   const { open } = DropdownMenuPrimitive.useSubContext();
   const Icon =
@@ -96,6 +96,7 @@ export const DropdownMenuSubTrigger = forwardRef<
             layout.flex.alignCenter,
             p[2],
             pr[8],
+            style,
           ]}
         >
           {children}
@@ -513,7 +514,7 @@ export const DropdownMenuGroup = forwardRef<
   const { theme } = useTheme();
   const { inset, title, children, ...rest } = props;
   return (
-    <View style={[pt[2], inset && gap[2]]} ref={ref} {...rest}>
+    <View style={[inset && gap[2]]} ref={ref} {...rest}>
       {title && (
         <Text style={[{ color: theme.colors.textMuted }, pb[1], pl[2]]}>
           {title}

package/src/components/ui/icons.tsx

@@ -1,6 +1,6 @@
 import { type LucideProps } from "lucide-react-native";
 import React from "react";
-import { useTheme } from "../../lib/theme";
+import { useTheme } from "../../lib/theme/theme";
 
 // Simple icon wrapper that integrates with theme
 export interface IconProps {

package/src/components/ui/menu.tsx

@@ -1,10 +1,4 @@
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  ReactNode,
-} from "react";
+import { forwardRef, ReactNode } from "react";
 import { Animated, Platform, View, ViewStyle } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import {
@@ -285,63 +279,63 @@ export const MenuInfo = forwardRef<View, MenuInfoProps>(
   },
 );
 
-export interface MenuDraggableGroupProps {
-  children: ReactNode;
-  onMove: (fromIndex: number, toIndex: number) => void;
-  onDragEnd: (fromIndex: number, toIndex: number) => void;
-  dragHandle?: ReactNode;
-  style?: ViewStyle;
-}
+// export interface MenuDraggableGroupProps {
+//   children: ReactNode;
+//   onMove: (fromIndex: number, toIndex: number) => void;
+//   onDragEnd: (fromIndex: number, toIndex: number) => void;
+//   dragHandle?: ReactNode;
+//   style?: ViewStyle;
+// }
 
-export const MenuDraggableGroup = forwardRef<View, MenuDraggableGroupProps>(
-  ({ children, onMove, onDragEnd, dragHandle, style }, ref) => {
-    const { theme } = useTheme();
+// export const MenuDraggableGroup = forwardRef<View, MenuDraggableGroupProps>(
+//   ({ children, onMove, onDragEnd, dragHandle, style }, ref) => {
+//     const { theme } = useTheme();
 
-    const childrenArray = Children.toArray(children);
-    const draggableItems = childrenArray.filter(
-      (child) =>
-        isValidElement(child) &&
-        (child.type === MenuItem || child.type === MenuSeparator),
-    );
+//     const childrenArray = Children.toArray(children);
+//     const draggableItems = childrenArray.filter(
+//       (child) =>
+//         isValidElement(child) &&
+//         (child.type === MenuItem || child.type === MenuSeparator),
+//     );
 
-    let itemIndex = 0;
-    const enhancedChildren = Children.map(children, (child) => {
-      if (isValidElement(child)) {
-        if (child.type === MenuItem) {
-          const currentIndex = itemIndex;
-          itemIndex++;
+//     let itemIndex = 0;
+//     const enhancedChildren = Children.map(children, (child) => {
+//       if (isValidElement(child)) {
+//         if (child.type === MenuItem) {
+//           const currentIndex = itemIndex;
+//           itemIndex++;
 
-          return cloneElement(child, {
-            draggable: true,
-            dragHandle: dragHandle || child.props.dragHandle,
-            _dragIndex: currentIndex,
-            _dragTotalItems: draggableItems.filter(
-              (c) => isValidElement(c) && c.type === MenuItem,
-            ).length,
-            _onDragMove: onMove,
-            _onDragEnd: onDragEnd,
-          } as any);
-        }
-        if (child.type === MenuSeparator) {
-          return child;
-        }
-      }
-      return child;
-    });
+//           return cloneElement(child, {
+//             draggable: true,
+//             dragHandle: dragHandle || (child && child.props.dragHandle),
+//             _dragIndex: currentIndex,
+//             _dragTotalItems: draggableItems.filter(
+//               (c) => isValidElement(c) && c.type === MenuItem,
+//             ).length,
+//             _onDragMove: onMove,
+//             _onDragEnd: onDragEnd,
+//           } as any);
+//         }
+//         if (child.type === MenuSeparator) {
+//           return child;
+//         }
+//       }
+//       return child;
+//     });
 
-    return (
-      <View
-        ref={ref}
-        style={[
-          { backgroundColor: theme.colors.muted + "c0" },
-          Platform.OS === "web" ? [px[1], py[1]] : p[1],
-          gap.all[1],
-          { borderRadius: borderRadius.lg },
-          style,
-        ]}
-      >
-        {enhancedChildren}
-      </View>
-    );
-  },
-);
+//     return (
+//       <View
+//         ref={ref}
+//         style={[
+//           { backgroundColor: theme.colors.muted + "c0" },
+//           Platform.OS === "web" ? [px[1], py[1]] : p[1],
+//           gap.all[1],
+//           { borderRadius: borderRadius.lg },
+//           style,
+//         ]}
+//       >
+//         {enhancedChildren}
+//       </View>
+//     );
+//   },
+// );

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

@@ -4,28 +4,29 @@ import {
 } from "@gorhom/bottom-sheet";
 import React, { forwardRef } from "react";
 import {
-  NativeSyntheticEvent,
+  BlurEvent,
+  FocusEvent,
   Platform,
   StyleSheet,
   Text,
   TextInput,
-  TextInputFocusEventData,
   TextInputProps,
   TextProps,
   TouchableOpacity,
   View,
   ViewProps,
 } from "react-native";
-import { tokens } from "../../../ui";
+import * as tokens from "../../../lib/theme/tokens";
 
 // Base input primitive interface
-export interface InputPrimitiveProps extends Omit<TextInputProps, "onChange"> {
+export interface InputPrimitiveProps
+  extends Omit<TextInputProps, "onChange" | "onFocus" | "onBlur"> {
   error?: boolean;
   disabled?: boolean;
   loading?: boolean;
   onChange?: (text: string) => void;
-  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: BlurEvent) => void;
 }
 
 // Input root primitive - the main TextInput component
@@ -75,7 +76,7 @@ export const InputRoot = forwardRef<any, InputPrimitiveProps>(
     );
 
     const handleFocus = React.useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event: FocusEvent) => {
         setIsFocused(true);
         if (onFocus) {
           onFocus(event);
@@ -85,7 +86,7 @@ export const InputRoot = forwardRef<any, InputPrimitiveProps>(
     );
 
     const handleBlur = React.useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event: BlurEvent) => {
         setIsFocused(false);
         if (onBlur) {
           onBlur(event);
@@ -272,13 +273,21 @@ export const InputAddon = forwardRef<
       style,
     ];
 
+    // Filter out null event handlers for TouchableOpacity compatibility
+    const { onBlur, onFocus, ...restProps } = props;
+    const touchableProps = {
+      ...restProps,
+      ...(onBlur !== null && onBlur !== undefined && { onBlur }),
+      ...(onFocus !== null && onFocus !== undefined && { onFocus }),
+    };
+
     if (touchable && onPress) {
       return (
         <TouchableOpacity
           ref={ref as React.Ref<React.ComponentRef<typeof TouchableOpacity>>}
           style={addonStyle as any}
           onPress={onPress}
-          {...props}
+          {...touchableProps}
         >
           {children}
         </TouchableOpacity>

package/src/components/ui/resizeable.tsx

@@ -7,12 +7,14 @@ import {
   Pressable,
 } from "react-native-gesture-handler";
 import Animated, {
+  Easing,
   Extrapolation,
   interpolate,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
+  withTiming,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useKeyboardSlide } from "../../hooks";
@@ -23,6 +25,11 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 
 const { height: SCREEN_HEIGHT } = Dimensions.get("window");
 
+const TIMING_CONFIG = {
+  duration: 400,
+  easing: Easing.out(Easing.quad),
+};
+
 type ResizableChatSheetProps = {
   startingPercentage?: number;
   isPlayerRatioGreater: boolean;
@@ -31,8 +38,6 @@ type ResizableChatSheetProps = {
   renderAbove?: (isCollapsed: boolean) => React.ReactNode;
 };
 
-const SPRING_CONFIG = { damping: 20, stiffness: 100 };
-
 export function Resizable({
   startingPercentage,
   isPlayerRatioGreater,
@@ -56,7 +61,7 @@ export function Resizable({
       const targetHeight = startingPercentage
         ? startingPercentage * SCREEN_HEIGHT
         : MIN_HEIGHT;
-      sheetHeight.value = withSpring(targetHeight, SPRING_CONFIG);
+      sheetHeight.value = withTiming(targetHeight, TIMING_CONFIG);
       setIsCollapsed(targetHeight < COLLAPSE_HEIGHT);
     }, 1000);
   }, []);
@@ -73,7 +78,7 @@ export function Resizable({
 
       const nowCollapsed = newHeight < COLLAPSE_HEIGHT;
       if (nowCollapsed && !wasCollapsed.value) {
-        sheetHeight.value = withSpring(MIN_HEIGHT, SPRING_CONFIG);
+        sheetHeight.value = withTiming(MIN_HEIGHT, TIMING_CONFIG);
         wasCollapsed.value = true;
         runOnJS(setIsCollapsed)(true);
       } else if (!nowCollapsed && wasCollapsed.value) {
@@ -139,8 +144,8 @@ export function Resizable({
           onPress={() => {
             const isCurrentlyCollapsed = sheetHeight.value === MIN_HEIGHT;
             sheetHeight.value = isCurrentlyCollapsed
-              ? withSpring(MAX_HEIGHT, SPRING_CONFIG)
-              : withSpring(MIN_HEIGHT, SPRING_CONFIG);
+              ? withTiming(MAX_HEIGHT, TIMING_CONFIG)
+              : withTiming(MIN_HEIGHT, TIMING_CONFIG);
             setIsCollapsed(!isCurrentlyCollapsed);
           }}
         >

package/src/components/ui/toast.tsx

@@ -21,7 +21,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Circle, Svg } from "react-native-svg";
-import { useTheme } from "../../ui";
+import { useTheme } from "../../lib/theme/theme";
 import { Button } from "./button";
 import { Text } from "./text";
 

package/src/context/profile-cache.tsx

@@ -3,6 +3,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -85,8 +86,13 @@ export function ProfileCacheProvider({
     [flush],
   );
 
+  const value = useMemo(
+    () => ({ profiles, requestProfiles }),
+    [profiles, requestProfiles],
+  );
+
   return (
-    <ProfileCacheContext.Provider value={{ profiles, requestProfiles }}>
+    <ProfileCacheContext.Provider value={value}>
       {children}
     </ProfileCacheContext.Provider>
   );

package/src/hooks/useSegmentTiming.tsx

@@ -22,7 +22,7 @@ function getLiveConnectionQuality(
 export function useSegmentTiming() {
   const latestSegment = useLivestreamStore((x) => x.segment);
   const [segmentDeltas, setSegmentDeltas] = useState<number[]>([]);
-  const prevSegmentRef = useRef<any>();
+  const prevSegmentRef = useRef(latestSegment);
   const prevTimestampRef = useRef<number | null>(null);
   const ls = useLivestream();