@streamplace/components 0.7.0 → 0.7.1

package/dist/components/mobile-player/ui/index.js

@@ -3,3 +3,4 @@ export * from "./input";
 export * from "./metrics";
 export * from "./streamer-context-menu";
 export * from "./viewer-context-menu";
+export * from "./viewers";

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -16,5 +16,5 @@ export function ContextMenu() {
     const setLowLatency = (value) => {
         setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Menu, { size: 32, color: colors.gray[200] }) }), _jsxs(ResponsiveDropdownMenuContent, { children: [_jsx(DropdownMenuGroup, { title: "Resolution", children: _jsxs(DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [_jsx(DropdownMenuRadioItem, { value: "source", children: _jsx(Text, { children: "Source" }) }), qualities.map((r) => (_jsx(DropdownMenuRadioItem, { value: r.name, children: _jsx(Text, { children: r.name }) })))] }) }), _jsxs(DropdownMenuGroup, { title: "Advanced", children: [_jsx(DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: _jsx(Text, { children: "Low Latency" }) }), _jsx(DropdownMenuInfo, { description: "Lowers the delay between video and chat messages." }), _jsx(DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: _jsx(Text, { children: "Segment Debug Info" }) })] }), _jsx(DropdownMenuInfo, { description: "Lowers the delay between video and chat messages." })] })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Menu, { size: 32, color: colors.gray[200] }) }), _jsxs(ResponsiveDropdownMenuContent, { children: [_jsx(DropdownMenuGroup, { title: "Resolution", children: _jsxs(DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [_jsx(DropdownMenuRadioItem, { value: "source", children: _jsx(Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => (_jsx(DropdownMenuRadioItem, { value: r.name, children: _jsx(Text, { children: r.name }) })))] }) }), _jsx(DropdownMenuGroup, { title: "Advanced", children: _jsx(DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: _jsx(Text, { children: "Low Latency" }) }) }), _jsx(DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), _jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: _jsx(Text, { children: "Show Debug Info" }) }) })] })] }));
 }

package/dist/components/mobile-player/ui/viewers.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye } from "lucide-react-native";
+import * as atoms from "../../../lib/theme/atoms";
+import { useViewers } from "../../../livestream-store";
+import { Text, View } from "../../ui";
+export function Viewers() {
+    const viewers = useViewers();
+    return (_jsxs(View, { style: [
+            atoms.layout.flex.center,
+            atoms.layout.flex.row,
+            atoms.gap.all[2],
+        ], children: [_jsx(Eye, { color: "#fd5050" }), _jsx(Text, { style: {
+                    color: "#fd5050",
+                    textShadowColor: "black",
+                    textShadowOffset: { width: -1, height: 1 },
+                    textShadowRadius: 3,
+                    fontSize: 16,
+                }, children: new Intl.NumberFormat(undefined, { notation: "compact" }).format(viewers || 0) })] }));
+}

package/dist/components/mobile-player/video.native.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useVideoPlayer, VideoView } from "expo-video";
+import { ArrowRight } from "lucide-react-native";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Linking } from "react-native";
 import { RTCView, RTCView as RTCViewIngest, } from "react-native-webrtc";
-import { IngestMediaSource, PlayerStatus as IngestPlayerStatus, PlayerProtocol, PlayerStatus, Text, usePlayerStore as useIngestPlayerStore, usePlayerStore, useStreamplaceStore, View, } from "../..";
-import { borderRadius, colors, p } from "../../lib/theme/atoms";
+import { Button, IngestMediaSource, PlayerStatus as IngestPlayerStatus, PlayerProtocol, PlayerStatus, Text, usePlayerStore as useIngestPlayerStore, usePlayerStore, useStreamplaceStore, View, } from "../..";
+import { borderRadius, colors, fontWeight, gap, h, layout, m, p, } from "../../lib/theme/atoms";
 import { srcToUrl } from "./shared";
 import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
 import { mediaDevices } from "./webrtc-primitives.native";
@@ -205,10 +207,25 @@ export function NativeIngestPlayer() {
             })
                 .then((stream) => {
                 setLocalMediaStream(stream);
+                let errs = [];
+                if (stream.getAudioTracks().length === 0) {
+                    console.warn("No audio tracks found in user media stream");
+                    errs.push("microphone");
+                }
+                if (stream.getVideoTracks().length === 0) {
+                    console.warn("No video tracks found in user media stream");
+                    errs.push("camera");
+                }
+                if (errs.length > 0) {
+                    setError(new Error(`We could not access your ${errs.join(" and ")}. To stream, you need to give us permission to access these.`));
+                }
+                else {
+                    setError(null);
+                }
             })
                 .catch((e) => {
                 console.error("error getting user media", e);
-                setError(new Error("We could not access your camera or microphone. Please check your permissions."));
+                setError(new Error("We could not access your camera or microphone. To stream, you need to give us permission to access these."));
             });
         }
     }, [ingestMediaSource, ingestCamera]);
@@ -228,7 +245,7 @@ export function NativeIngestPlayer() {
         return null;
     }
     if (error) {
-        return (_jsxs(View, { backgroundColor: colors.destructive[900], style: [p[4], { borderRadius: borderRadius.md }], children: [_jsx(View, { children: _jsx(Text, { children: "Error encountered!" }) }), _jsx(Text, { children: error.message })] }));
+        return (_jsxs(View, { backgroundColor: colors.destructive[900], style: [p[4], m[4], gap.all[2], { borderRadius: borderRadius.md }], children: [_jsx(View, { children: _jsx(Text, { style: [fontWeight.semibold], size: "2xl", children: "Error encountered!" }) }), _jsx(Text, { children: error.message }), error.message.includes("To stream, you need to give us permission to access these.") && (_jsx(Button, { onPress: Linking.openSettings, style: [h[10]], variant: "secondary", children: _jsxs(View, { style: [layout.flex.row, gap.all[1]], children: [_jsx(Text, { children: "Open Settings" }), " ", _jsx(ArrowRight, { color: "white", size: "18" })] }) }))] }));
     }
     return (_jsx(RTCViewIngest, { mirror: ingestCamera !== "environment", objectFit: "contain", streamURL: localMediaStream.toURL(), zOrder: 0, style: {
             minWidth: "100%",

package/dist/components/ui/resizeable.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronUp } from "lucide-react-native";
+import { useEffect } from "react";
 import { Dimensions } from "react-native";
 import { Gesture, GestureDetector, Pressable, } from "react-native-gesture-handler";
 import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, withSpring, } from "react-native-reanimated";
@@ -10,7 +11,7 @@ import { View } from "./view";
 const AnimatedView = Animated.createAnimatedComponent(View);
 const { height: SCREEN_HEIGHT } = Dimensions.get("window");
 const SPRING_CONFIG = { damping: 20, stiffness: 100 };
-export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
+export function Resizable({ startingPercentage, isPlayerRatioGreater, style = {}, children, }) {
     const { slideKeyboard } = useKeyboardSlide();
     const { bottom: safeBottom } = useSafeAreaInsets();
     const MAX_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.5;
@@ -18,6 +19,11 @@ export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
     const COLLAPSE_HEIGHT = (SCREEN_HEIGHT - safeBottom) * 0.1;
     const sheetHeight = useSharedValue(MIN_HEIGHT);
     const startHeight = useSharedValue(MIN_HEIGHT);
+    useEffect(() => {
+        setTimeout(() => {
+            sheetHeight.value = withSpring(startingPercentage ? startingPercentage * SCREEN_HEIGHT : MIN_HEIGHT, SPRING_CONFIG);
+        }, 1000);
+    }, []);
     const panGesture = Gesture.Pan()
         .onStart(() => {
         startHeight.value = sheetHeight.value;
@@ -38,7 +44,9 @@ export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
         opacity: interpolate(sheetHeight.value, [MIN_HEIGHT, COLLAPSE_HEIGHT], [0, 1], Extrapolation.CLAMP),
         transform: [
             {
-                translateY: slideKeyboard - safeBottom + Math.max(0, -sheetHeight.value),
+                translateY: slideKeyboard +
+                    Math.max(0, -sheetHeight.value) +
+                    (slideKeyboard < 0 ? 0 : -safeBottom),
             },
         ],
     }));
@@ -57,7 +65,6 @@ export function Resizable({ isPlayerRatioGreater, style = {}, children, }) {
                     w.percent[100],
                     layout.flex.center,
                     zIndex[1],
-                    { marginBottom: safeBottom },
                 ], children: _jsx(Pressable, { onPress: () => {
                         sheetHeight.value =
                             sheetHeight.value === MIN_HEIGHT

package/dist/hooks/index.js

@@ -6,4 +6,5 @@ export * from "./useKeyboardSlide";
 export * from "./useLivestreamInfo";
 export * from "./useOuterAndInnerDimensions";
 export * from "./usePlayerDimensions";
+export * from "./useSegmentDimensions";
 export * from "./useSegmentTiming";

package/dist/hooks/useSegmentDimensions.js

@@ -0,0 +1,14 @@
+import { useLivestreamStore } from "../livestream-store";
+export function useSegmentDimensions() {
+    const latestSegment = useLivestreamStore((x) => x.segment);
+    let seg = latestSegment?.video && latestSegment.video[0];
+    let ratio = {
+        height: seg?.height || 0,
+        width: seg?.width || 0,
+    };
+    return {
+        isPlayerRatioGreater: ratio.width > ratio.height,
+        height: ratio.height,
+        width: ratio.width,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Streamplace React (Native) Components",
   "type": "module",
   "main": "dist/index.js",
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "build": "tsc",
-    "postinstall": "pnpm run build",
+    "prepare": "pnpm run build",
     "start": "tsc --watch --preserveWatchOutput"
   },
   "keywords": [
@@ -44,12 +44,12 @@
     "react-native-safe-area-context": "5.4.1",
     "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
     "react-use-websocket": "^4.13.0",
-    "streamplace": "0.7.0",
+    "streamplace": "0.7.1",
     "viem": "^2.21.44",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "c0b9266fbc2cb2a643203e8c0450980c1bd29635"
+  "gitHead": "e092ac26f32426cfb14ec3cbda96265ad2fbae12"
 }

package/src/components/mobile-player/ui/index.ts

@@ -3,3 +3,4 @@ export * from "./input";
 export * from "./metrics";
 export * from "./streamer-context-menu";
 export * from "./viewer-context-menu";
+export * from "./viewers";

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

@@ -39,7 +39,7 @@ export function ContextMenu() {
         <DropdownMenuGroup title="Resolution">
           <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
             <DropdownMenuRadioItem value="source">
-              <Text>Source</Text>
+              <Text>Source (Original Quality)</Text>
             </DropdownMenuRadioItem>
             {qualities.map((r) => (
               <DropdownMenuRadioItem value={r.name}>
@@ -55,15 +55,16 @@ export function ContextMenu() {
           >
             <Text>Low Latency</Text>
           </DropdownMenuCheckboxItem>
-          <DropdownMenuInfo description="Lowers the delay between video and chat messages." />
+        </DropdownMenuGroup>
+        <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
+        <DropdownMenuGroup>
           <DropdownMenuCheckboxItem
             checked={debugInfo}
             onCheckedChange={() => setShowDebugInfo(!debugInfo)}
           >
-            <Text>Segment Debug Info</Text>
+            <Text>Show Debug Info</Text>
           </DropdownMenuCheckboxItem>
         </DropdownMenuGroup>
-        <DropdownMenuInfo description="Lowers the delay between video and chat messages." />
       </ResponsiveDropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/mobile-player/ui/viewers.tsx

@@ -0,0 +1,32 @@
+import { Eye } from "lucide-react-native";
+import * as atoms from "../../../lib/theme/atoms";
+import { useViewers } from "../../../livestream-store";
+import { Text, View } from "../../ui";
+
+export function Viewers() {
+  const viewers = useViewers();
+  return (
+    <View
+      style={[
+        atoms.layout.flex.center,
+        atoms.layout.flex.row,
+        atoms.gap.all[2],
+      ]}
+    >
+      <Eye color="#fd5050" />
+      <Text
+        style={{
+          color: "#fd5050",
+          textShadowColor: "black",
+          textShadowOffset: { width: -1, height: 1 },
+          textShadowRadius: 3,
+          fontSize: 16,
+        }}
+      >
+        {new Intl.NumberFormat(undefined, { notation: "compact" }).format(
+          viewers || 0,
+        )}
+      </Text>
+    </View>
+  );
+}

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

@@ -1,12 +1,14 @@
 import { useVideoPlayer, VideoPlayerEvents, VideoView } from "expo-video";
+import { ArrowRight } from "lucide-react-native";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { LayoutChangeEvent } from "react-native";
+import { LayoutChangeEvent, Linking } from "react-native";
 import {
   MediaStream,
   RTCView,
   RTCView as RTCViewIngest,
 } from "react-native-webrtc";
 import {
+  Button,
   IngestMediaSource,
   PlayerStatus as IngestPlayerStatus,
   PlayerProtocol,
@@ -17,7 +19,16 @@ import {
   useStreamplaceStore,
   View,
 } from "../..";
-import { borderRadius, colors, p } from "../../lib/theme/atoms";
+import {
+  borderRadius,
+  colors,
+  fontWeight,
+  gap,
+  h,
+  layout,
+  m,
+  p,
+} from "../../lib/theme/atoms";
 import { srcToUrl } from "./shared";
 import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
 import { mediaDevices, WebRTCMediaStream } from "./webrtc-primitives.native";
@@ -301,12 +312,31 @@ export function NativeIngestPlayer() {
         })
         .then((stream: WebRTCMediaStream) => {
           setLocalMediaStream(stream);
+
+          let errs: string[] = [];
+          if (stream.getAudioTracks().length === 0) {
+            console.warn("No audio tracks found in user media stream");
+            errs.push("microphone");
+          }
+          if (stream.getVideoTracks().length === 0) {
+            console.warn("No video tracks found in user media stream");
+            errs.push("camera");
+          }
+          if (errs.length > 0) {
+            setError(
+              new Error(
+                `We could not access your ${errs.join(" and ")}. To stream, you need to give us permission to access these.`,
+              ),
+            );
+          } else {
+            setError(null);
+          }
         })
         .catch((e: any) => {
           console.error("error getting user media", e);
           setError(
             new Error(
-              "We could not access your camera or microphone. Please check your permissions.",
+              "We could not access your camera or microphone. To stream, you need to give us permission to access these.",
             ),
           );
         });
@@ -334,12 +364,27 @@ export function NativeIngestPlayer() {
     return (
       <View
         backgroundColor={colors.destructive[900]}
-        style={[p[4], { borderRadius: borderRadius.md }]}
+        style={[p[4], m[4], gap.all[2], { borderRadius: borderRadius.md }]}
       >
         <View>
-          <Text>Error encountered!</Text>
+          <Text style={[fontWeight.semibold]} size="2xl">
+            Error encountered!
+          </Text>
         </View>
         <Text>{error.message}</Text>
+        {error.message.includes(
+          "To stream, you need to give us permission to access these.",
+        ) && (
+          <Button
+            onPress={Linking.openSettings}
+            style={[h[10]]}
+            variant="secondary"
+          >
+            <View style={[layout.flex.row, gap.all[1]]}>
+              <Text>Open Settings</Text> <ArrowRight color="white" size="18" />
+            </View>
+          </Button>
+        )}
       </View>
     );
   }

package/src/components/ui/resizeable.tsx

@@ -1,5 +1,5 @@
 import { ChevronUp } from "lucide-react-native";
-import { ComponentProps } from "react";
+import { ComponentProps, useEffect } from "react";
 import { Dimensions } from "react-native";
 import {
   Gesture,
@@ -23,6 +23,7 @@ const AnimatedView = Animated.createAnimatedComponent(View);
 const { height: SCREEN_HEIGHT } = Dimensions.get("window");
 
 type ResizableChatSheetProps = {
+  startingPercentage?: number;
   isPlayerRatioGreater: boolean;
   style?: ComponentProps<typeof AnimatedView>["style"];
   children?: React.ReactNode;
@@ -31,6 +32,7 @@ type ResizableChatSheetProps = {
 const SPRING_CONFIG = { damping: 20, stiffness: 100 };
 
 export function Resizable({
+  startingPercentage,
   isPlayerRatioGreater,
   style = {},
   children,
@@ -44,6 +46,15 @@ export function Resizable({
   const sheetHeight = useSharedValue(MIN_HEIGHT);
   const startHeight = useSharedValue(MIN_HEIGHT);
 
+  useEffect(() => {
+    setTimeout(() => {
+      sheetHeight.value = withSpring(
+        startingPercentage ? startingPercentage * SCREEN_HEIGHT : MIN_HEIGHT,
+        SPRING_CONFIG,
+      );
+    }, 1000);
+  }, []);
+
   const panGesture = Gesture.Pan()
     .onStart(() => {
       startHeight.value = sheetHeight.value;
@@ -70,7 +81,9 @@ export function Resizable({
     transform: [
       {
         translateY:
-          slideKeyboard - safeBottom + Math.max(0, -sheetHeight.value),
+          slideKeyboard +
+          Math.max(0, -sheetHeight.value) +
+          (slideKeyboard < 0 ? 0 : -safeBottom),
       },
     ],
   }));
@@ -94,7 +107,6 @@ export function Resizable({
           w.percent[100],
           layout.flex.center,
           zIndex[1],
-          { marginBottom: safeBottom },
         ]}
       >
         <Pressable

package/src/hooks/index.ts

@@ -6,4 +6,5 @@ export * from "./useKeyboardSlide";
 export * from "./useLivestreamInfo";
 export * from "./useOuterAndInnerDimensions";
 export * from "./usePlayerDimensions";
+export * from "./useSegmentDimensions";
 export * from "./useSegmentTiming";

package/src/hooks/useSegmentDimensions.tsx

@@ -0,0 +1,18 @@
+import { useLivestreamStore } from "../livestream-store";
+
+export function useSegmentDimensions() {
+  const latestSegment = useLivestreamStore((x) => x.segment);
+
+  let seg = latestSegment?.video && latestSegment.video[0];
+
+  let ratio = {
+    height: seg?.height || 0,
+    width: seg?.width || 0,
+  };
+
+  return {
+    isPlayerRatioGreater: ratio.width > ratio.height,
+    height: ratio.height,
+    width: ratio.width,
+  };
+}