@streamplace/components 0.9.12 → 0.10.6

package/src/components/chat/user-profile-card.tsx

@@ -1,5 +1,6 @@
 import { ProfileViewBasic } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { TriggerRef } from "@rn-primitives/dropdown-menu";
+import { Image } from "expo-image";
 import {
   createContext,
   useCallback,
@@ -9,7 +10,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Image, Platform, Pressable, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { useAvatars } from "../../hooks/useAvatars";
 import { useLivestreamStore } from "../../livestream-store";
@@ -62,8 +63,9 @@ export const ProfileCardProvider = ({
   children: React.ReactNode;
 }) => {
   const [openUri, setOpenUri] = useState<string | null>(null);
+  const value = useMemo(() => ({ openUri, setOpenUri }), [openUri]);
   return (
-    <OpenCardContext.Provider value={{ openUri, setOpenUri }}>
+    <OpenCardContext.Provider value={value}>
       {children}
     </OpenCardContext.Provider>
   );
@@ -73,17 +75,14 @@ const BadgeRow = ({
   streamer,
   badge,
   serviceDid,
+  issuerProfiles,
 }: {
   badge: NonNullable<ChatMessageViewHydrated["badges"]>[number];
   serviceDid: string;
   streamer?: ProfileViewBasic;
+  issuerProfiles: ReturnType<typeof useAvatars>;
 }) => {
   const isServiceIssued = badge.issuer === serviceDid;
-  const issuerDids = useMemo(
-    () => (isServiceIssued ? [] : [badge.issuer]),
-    [isServiceIssued, badge.issuer],
-  );
-  const issuerProfiles = useAvatars(issuerDids);
   const meta = BADGE_META[badge.badgeType];
 
   if (!meta) return null;
@@ -149,7 +148,19 @@ export const UserProfileCard = ({
   const thisRef = useRef<TriggerRef>(null);
   const [hovered, setHovered] = useState(false);
 
-  const profiles = useAvatars(author.did ? [author.did] : []);
+  const issuerDids = useMemo(
+    () =>
+      badges?.map((b) => b.issuer).filter((did) => did && did !== serviceDid) ??
+      [],
+    [badges, serviceDid],
+  );
+
+  const allDids = useMemo(
+    () => (author.did ? [author.did, ...issuerDids] : issuerDids),
+    [author.did, issuerDids],
+  );
+
+  const profiles = useAvatars(allDids);
   const profile = profiles[author.did];
 
   useEffect(() => {
@@ -273,6 +284,7 @@ export const UserProfileCard = ({
                   badge={badge}
                   serviceDid={serviceDid}
                   streamer={streamer}
+                  issuerProfiles={profiles}
                 />
               ))}
             </View>

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/index.tsx

@@ -1,5 +1,6 @@
 export * from "./block";
 export * from "./branding";
+export * from "./ingest";
 export * from "./moderation";
 export * from "./moderator-management";
 export * from "./stream";

package/src/streamplace-store/ingest.tsx

@@ -0,0 +1,32 @@
+import { PlaceStreamIngestDefs } from "streamplace";
+import { useDID, useStreamplaceStore } from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+export default function useGetIngests() {
+  const pdsAgent = usePDSAgent();
+  const did = useDID();
+  const setIngests = useStreamplaceStore((state) => state.setIngests);
+
+  return async () => {
+    if (!pdsAgent || !did) {
+      throw new Error("No PDS agent or DID available");
+    }
+
+    const result = await pdsAgent.place.stream.ingest.getIngestUrls();
+    if (!result.success) {
+      throw new Error("Failed to get ingests");
+    }
+
+    const ingests = result.data.ingests
+      .map((ingest) => {
+        if (PlaceStreamIngestDefs.isIngest(ingest)) {
+          return ingest;
+        }
+        console.error("Invalid ingest", ingest);
+        return null;
+      })
+      .filter((ingest) => ingest !== null);
+
+    setIngests(ingests);
+  };
+}

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

@@ -1,6 +1,10 @@
 import { SessionManager } from "@atproto/api/dist/session-manager";
 import { useContext } from "react";
-import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
+import {
+  PlaceStreamChatProfile,
+  PlaceStreamIngestDefs,
+  PlaceStreamLivestream,
+} from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
 import storage from "../storage";
 import { StreamplaceContext } from "../streamplace-provider/context";
@@ -41,6 +45,9 @@ export interface StreamplaceState {
   handle: string | null;
   chatProfile: PlaceStreamChatProfile.Record | null;
 
+  ingests: PlaceStreamIngestDefs.Ingest[] | null;
+  setIngests: (ingests: PlaceStreamIngestDefs.Ingest[] | null) => void;
+
   // Content metadata state
   contentMetadata: ContentMetadataResult | null;
   setContentMetadata: (metadata: ContentMetadataResult | null) => void;
@@ -113,7 +120,9 @@ export const makeStreamplaceStore = ({
     oauthSession: null,
     handle: null,
     chatProfile: null,
-
+    ingests: null,
+    setIngests: (ingests: PlaceStreamIngestDefs.Ingest[] | null) =>
+      set({ ingests: ingests }),
     broadcasterDID: null,
     setBroadcasterDID: (broadcasterDID: string | null) =>
       set({ broadcasterDID }),
@@ -409,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);