@streamplace/components 0.9.15 → 0.10.6

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/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);

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/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/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: 300,
+  easing: Easing.inOut(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();
 

package/src/index.tsx

@@ -7,6 +7,8 @@ export * from "./player-store";
 export * from "./streamplace-provider";
 export * from "./streamplace-store";
 
+export { ErrorBoundary } from "./components/error-boundary";
+
 export {
   PlayerProvider,
   withPlayerProvider,

package/src/lib/facet.ts

@@ -95,7 +95,7 @@ export const segmentize = (
     const { byteStart, byteEnd } = facet.index;
     const features = facet.features;
 
-    if (byteStart > byteEnd || features.length === 0) {
+    if (byteStart > byteEnd || !features || features.length === 0) {
       continue;
     }
 

package/src/lib/theme/theme.tsx

@@ -18,7 +18,7 @@ import {
 } from "./tokens";
 
 import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { ToastProvider } from "../../components/ui";
+import { ToastProvider } from "../../components/ui/toast";
 
 // Import pairify function for generating theme tokens
 function pairify<T extends Record<string, any>>(

package/src/streamplace-store/streamplace-store.tsx

@@ -418,5 +418,3 @@ export const useDanmuSettings = () => {
     setDanmuMaxMessages,
   };
 };
-
-export { useCreateStreamRecord, useUpdateStreamRecord } from "./stream";

package/src/streamplace-store/xrpc.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { StreamplaceAgent } from "streamplace";
-import { useStreamplaceStore, useUrl } from ".";
+import { useStreamplaceStore, useUrl } from "./streamplace-store";
 
 export function usePDSAgent(): StreamplaceAgent | null {
   const oauthSession = useStreamplaceStore((state) => state.oauthSession);