@streamplace/components 0.7.0 → 0.7.2

package/dist/streamplace-provider/poller.js

@@ -1,24 +1,27 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { StreamplaceAgent } from "streamplace";
-import { useDID, useGetBskyProfile, useGetChatProfile, useStreamplaceStore, } from "../streamplace-store";
-import { usePDSAgent } from "../streamplace-store/xrpc";
-export default function Poller({ children }) {
-    const url = useStreamplaceStore((state) => state.url);
-    const setLiveUsers = useStreamplaceStore((state) => state.setLiveUsers);
-    const did = useDID();
-    const pdsAgent = usePDSAgent();
-    const getChatProfile = useGetChatProfile();
-    const getBskyProfile = useGetBskyProfile();
-    const liveUserRefresh = useStreamplaceStore((state) => state.liveUsersRefresh);
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Poller;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const streamplace_1 = require("streamplace");
+const streamplace_store_1 = require("../streamplace-store");
+const xrpc_1 = require("../streamplace-store/xrpc");
+function Poller({ children }) {
+    const url = (0, streamplace_store_1.useStreamplaceStore)((state) => state.url);
+    const setLiveUsers = (0, streamplace_store_1.useStreamplaceStore)((state) => state.setLiveUsers);
+    const did = (0, streamplace_store_1.useDID)();
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const getChatProfile = (0, streamplace_store_1.useGetChatProfile)();
+    const getBskyProfile = (0, streamplace_store_1.useGetBskyProfile)();
+    const liveUserRefresh = (0, streamplace_store_1.useStreamplaceStore)((state) => state.liveUsersRefresh);
+    (0, react_1.useEffect)(() => {
         if (pdsAgent && did) {
             getChatProfile();
             getBskyProfile();
         }
     }, [pdsAgent, did]);
-    useEffect(() => {
-        const agent = new StreamplaceAgent(url);
+    (0, react_1.useEffect)(() => {
+        const agent = new streamplace_1.StreamplaceAgent(url);
         const go = async () => {
             setLiveUsers({
                 liveUsersLoading: true,
@@ -42,5 +45,5 @@ export default function Poller({ children }) {
         const handle = setInterval(go, 3000);
         return () => clearInterval(handle);
     }, [url, liveUserRefresh]);
-    return _jsx(_Fragment, { children: children });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 }

package/dist/streamplace-store/block.js

@@ -1,6 +1,9 @@
-import { usePDSAgent } from "./xrpc";
-export function useCreateBlockRecord() {
-    let agent = usePDSAgent();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateBlockRecord = useCreateBlockRecord;
+const xrpc_1 = require("./xrpc");
+function useCreateBlockRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
     return async (subjectDID) => {
         if (!agent) {
             throw new Error("No PDS agent found");

package/dist/streamplace-store/index.js

@@ -1,3 +1,6 @@
-export * from "./stream";
-export * from "./streamplace-store";
-export * from "./user";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./stream"), exports);
+tslib_1.__exportStar(require("./streamplace-store"), exports);
+tslib_1.__exportStar(require("./user"), exports);

package/dist/streamplace-store/stream.js

@@ -1,6 +1,10 @@
-import { RichText } from "@atproto/api";
-import { useUrl } from "./streamplace-store";
-import { usePDSAgent } from "./xrpc";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCreateStreamRecord = useCreateStreamRecord;
+exports.useUpdateStreamRecord = useUpdateStreamRecord;
+const api_1 = require("@atproto/api");
+const streamplace_store_1 = require("./streamplace-store");
+const xrpc_1 = require("./xrpc");
 const uploadThumbnail = async (pdsAgent, customThumbnail) => {
     if (customThumbnail) {
         let tries = 0;
@@ -42,7 +46,7 @@ function buildGoLivePost(text, url, profile, params, thumbnail) {
     const textUrl = `${url.protocol}//${url.host}/${profile.handle}`;
     const suffix = ` ${text}`;
     const content = prefix + textUrl + suffix;
-    const rt = new RichText({ text: content });
+    const rt = new api_1.RichText({ text: content });
     rt.detectFacetsWithoutResolution();
     const record = {
         $type: "app.bsky.feed.post",
@@ -65,9 +69,9 @@ function buildGoLivePost(text, url, profile, params, thumbnail) {
     };
     return record;
 }
-export function useCreateStreamRecord() {
-    let agent = usePDSAgent();
-    let url = useUrl();
+function useCreateStreamRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    let url = (0, streamplace_store_1.useUrl)();
     return async (title, customThumbnail, submitPost = true) => {
         if (!agent) {
             throw new Error("No PDS agent found");
@@ -147,9 +151,9 @@ export function useCreateStreamRecord() {
         return record;
     };
 }
-export function useUpdateStreamRecord() {
-    let agent = usePDSAgent();
-    let url = useUrl();
+function useUpdateStreamRecord() {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    let url = (0, streamplace_store_1.useUrl)();
     return async (title, livestream, customThumbnail) => {
         if (!agent) {
             throw new Error("No PDS agent found");

package/dist/streamplace-store/streamplace-store.js

@@ -1,8 +1,13 @@
-import { useContext } from "react";
-import { createStore, useStore } from "zustand";
-import { StreamplaceContext } from "../streamplace-provider/context";
-export const makeStreamplaceStore = ({ url, }) => {
-    return createStore()((set) => ({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetHandle = exports.useHandle = exports.useDID = exports.useUrl = exports.makeStreamplaceStore = void 0;
+exports.getStreamplaceStoreFromContext = getStreamplaceStoreFromContext;
+exports.useStreamplaceStore = useStreamplaceStore;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const context_1 = require("../streamplace-provider/context");
+const makeStreamplaceStore = ({ url, }) => {
+    return (0, zustand_1.createStore)()((set) => ({
         url,
         liveUsers: null,
         setLiveUsers: (opts) => {
@@ -18,20 +23,25 @@ export const makeStreamplaceStore = ({ url, }) => {
         chatProfile: null,
     }));
 };
-export function getStreamplaceStoreFromContext() {
-    const context = useContext(StreamplaceContext);
+exports.makeStreamplaceStore = makeStreamplaceStore;
+function getStreamplaceStoreFromContext() {
+    const context = (0, react_1.useContext)(context_1.StreamplaceContext);
     if (!context) {
         throw new Error("useStreamplaceStore must be used within a StreamplaceProvider");
     }
     return context.store;
 }
-export function useStreamplaceStore(selector) {
-    return useStore(getStreamplaceStoreFromContext(), selector);
+function useStreamplaceStore(selector) {
+    return (0, zustand_1.useStore)(getStreamplaceStoreFromContext(), selector);
 }
-export const useUrl = () => useStreamplaceStore((x) => x.url);
-export const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
-export const useHandle = () => useStreamplaceStore((x) => x.handle);
-export const useSetHandle = () => {
+const useUrl = () => useStreamplaceStore((x) => x.url);
+exports.useUrl = useUrl;
+const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
+exports.useDID = useDID;
+const useHandle = () => useStreamplaceStore((x) => x.handle);
+exports.useHandle = useHandle;
+const useSetHandle = () => {
     const store = getStreamplaceStoreFromContext();
     return (handle) => store.setState({ handle });
 };
+exports.useSetHandle = useSetHandle;

package/dist/streamplace-store/user.js

@@ -1,10 +1,15 @@
-import { PlaceStreamChatProfile } from "streamplace";
-import { getStreamplaceStoreFromContext, useDID, useStreamplaceStore, } from "./streamplace-store";
-import { usePDSAgent } from "./xrpc";
-export function useGetChatProfile() {
-    const did = useDID();
-    const pdsAgent = usePDSAgent();
-    const store = getStreamplaceStoreFromContext();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetChatProfile = useGetChatProfile;
+exports.useGetBskyProfile = useGetBskyProfile;
+exports.useChatProfile = useChatProfile;
+const streamplace_1 = require("streamplace");
+const streamplace_store_1 = require("./streamplace-store");
+const xrpc_1 = require("./xrpc");
+function useGetChatProfile() {
+    const did = (0, streamplace_store_1.useDID)();
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const store = (0, streamplace_store_1.getStreamplaceStoreFromContext)();
     return async () => {
         if (!did || !pdsAgent) {
             throw new Error("No DID or PDS agent");
@@ -17,7 +22,7 @@ export function useGetChatProfile() {
         if (!res.success) {
             throw new Error("Failed to get chat profile record");
         }
-        if (PlaceStreamChatProfile.isRecord(res.data.value)) {
+        if (streamplace_1.PlaceStreamChatProfile.isRecord(res.data.value)) {
             store.setState({ chatProfile: res.data.value });
         }
         else {
@@ -25,10 +30,10 @@ export function useGetChatProfile() {
         }
     };
 }
-export function useGetBskyProfile() {
-    const did = useDID();
-    const pdsAgent = usePDSAgent();
-    const store = getStreamplaceStoreFromContext();
+function useGetBskyProfile() {
+    const did = (0, streamplace_store_1.useDID)();
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const store = (0, streamplace_store_1.getStreamplaceStoreFromContext)();
     return async () => {
         if (!did || !pdsAgent) {
             throw new Error("No DID or PDS agent");
@@ -42,6 +47,6 @@ export function useGetBskyProfile() {
         store.setState({ handle: res.data.handle });
     };
 }
-export function useChatProfile() {
-    return useStreamplaceStore((x) => x.chatProfile);
+function useChatProfile() {
+    return (0, streamplace_store_1.useStreamplaceStore)((x) => x.chatProfile);
 }

package/dist/streamplace-store/xrpc.js

@@ -1,12 +1,15 @@
-import { useMemo } from "react";
-import { StreamplaceAgent } from "streamplace";
-import { useStreamplaceStore } from ".";
-export function usePDSAgent() {
-    const oauthSession = useStreamplaceStore((state) => state.oauthSession);
-    return useMemo(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePDSAgent = usePDSAgent;
+const react_1 = require("react");
+const streamplace_1 = require("streamplace");
+const _1 = require(".");
+function usePDSAgent() {
+    const oauthSession = (0, _1.useStreamplaceStore)((state) => state.oauthSession);
+    return (0, react_1.useMemo)(() => {
         if (!oauthSession) {
             return null;
         }
-        return new StreamplaceAgent(oauthSession);
+        return new streamplace_1.StreamplaceAgent(oauthSession);
     }, [oauthSession]);
 }

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Streamplace React (Native) Components",
-  "type": "module",
   "main": "dist/index.js",
   "types": "src/index.tsx",
   "exports": {
     ".": {
       "@streamplace/dev": "./src/index.tsx",
-      "types": "./dist/index.d.mjs",
-      "default": "./dist/index.mjs"
+      "types": "./src/index.tsx",
+      "default": "./dist/index.js"
     }
   },
   "scripts": {
     "build": "tsc",
-    "postinstall": "pnpm run build",
+    "prepare": "pnpm run build",
     "start": "tsc --watch --preserveWatchOutput"
   },
   "keywords": [
@@ -44,12 +43,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.2",
     "viem": "^2.21.44",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "c0b9266fbc2cb2a643203e8c0450980c1bd29635"
+  "gitHead": "b07a68160ae6da34cf47aa397b4ef452248d79e5"
 }

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,
+  };
+}

package/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "module": "commonjs"
   },
   "include": ["./src"]
 }