@streamplace/components 0.7.13 → 0.7.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -11,17 +11,11 @@
       "default": "./dist/index.js"
     }
   },
-  "scripts": {
-    "build": "tsc",
-    "prepare": "pnpm run build",
-    "start": "tsc --watch --preserveWatchOutput"
-  },
   "keywords": [
     "streamplace"
   ],
   "author": "Streamplace",
   "license": "MIT",
-  "packageManager": "pnpm@10.11.0",
   "devDependencies": {
     "tsup": "^8.5.0"
   },
@@ -30,21 +24,20 @@
     "@atproto/crypto": "^0.4.4",
     "@emoji-mart/react": "^1.1.1",
     "@gorhom/bottom-sheet": "^5.1.6",
-    "@react-navigation/native": "^6.1.18",
     "@rn-primitives/dropdown-menu": "^1.2.0",
     "@rn-primitives/portal": "^1.3.0",
     "@rn-primitives/slider": "^1.2.0",
     "class-variance-authority": "^0.6.1",
-    "expo-keep-awake": "~14.1.4",
-    "expo-video": "~2.2.1",
+    "expo-keep-awake": "^14.0.0",
+    "expo-video": "^2.0.0",
     "hls.js": "^1.5.17",
     "lucide-react-native": "^0.514.0",
-    "react-native": "0.79.3",
+    "react-native": "^0.79.0",
     "react-native-edge-to-edge": "^1.6.2",
-    "react-native-gesture-handler": "~2.26.0",
-    "react-native-reanimated": "~3.18.0",
-    "react-native-safe-area-context": "5.4.1",
-    "react-native-svg": "15.12.0",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^5.0.0",
+    "react-native-svg": "^15.0.0",
     "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
     "react-use-websocket": "^4.13.0",
     "streamplace": "0.7.2",
@@ -54,5 +47,9 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "2cf5c37b35ec76d6f06872939690e95de81bd257"
+  "scripts": {
+    "build": "tsc",
+    "start": "tsc --watch --preserveWatchOutput"
+  },
+  "gitHead": "28aa086a00a3bf52bb21c5e50d139a879bcb6bc7"
 }

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

@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import { VideoView } from "expo-video";
 import { useEffect, useRef, useState } from "react";
 import { BackHandler, Dimensions, StyleSheet, View } from "react-native";
@@ -15,10 +14,14 @@ import Video from "./video.native";
 // Standard 16:9 video aspect ratio
 const VIDEO_ASPECT_RATIO = 16 / 9;
 
-export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
+export function Fullscreen(props: {
+  src: string;
+  children?: React.ReactNode;
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+}) {
   const ref = useRef<VideoView>(null);
   const insets = useSafeAreaInsets();
-  const navigation = useNavigation();
   const [dimensions, setDimensions] = useState(Dimensions.get("window"));
 
   // Get state from player store
@@ -55,11 +58,6 @@ export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
       SystemBars.setHidden(true);
       console.log("setting sidebar hidden");
 
-      // Hide the navigation header
-      navigation.setOptions({
-        headerShown: false,
-      });
-
       // Handle hardware back button
       const backHandler = BackHandler.addEventListener(
         "hardwareBackPress",
@@ -74,21 +72,12 @@ export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
       };
     } else {
       SystemBars.setHidden(false);
-
-      // Restore the navigation header
-      navigation.setOptions({
-        headerShown: true,
-      });
     }
 
     return () => {
       SystemBars.setHidden(false);
-      // Ensure header is restored if component unmounts
-      navigation.setOptions({
-        headerShown: true,
-      });
     };
-  }, [fullscreen, navigation, setFullscreen]);
+  }, [fullscreen, setFullscreen]);
 
   // Handle fullscreen state changes for native video players
   useEffect(() => {
@@ -161,7 +150,10 @@ export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
             },
           ]}
         >
-          <Video />
+          <Video
+            objectFit={props.objectFit}
+            pictureInPictureEnabled={props.pictureInPictureEnabled}
+          />
           {props.children}
         </View>
       </View>
@@ -172,7 +164,10 @@ export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
   return (
     <>
       <VideoRetry>
-        <Video />
+        <Video
+          objectFit={props.objectFit}
+          pictureInPictureEnabled={props.pictureInPictureEnabled}
+        />
       </VideoRetry>
       {props.children}
     </>

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

@@ -5,7 +5,12 @@ import { View } from "../../components/ui";
 import Video from "./video";
 import VideoRetry from "./video-retry";
 
-export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
+export function Fullscreen(props: {
+  src: string;
+  children?: React.ReactNode;
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+}) {
   const playerId = getFirstPlayerID();
   const protocol = usePlayerStore((x) => x.protocol, playerId);
   const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
@@ -78,7 +83,10 @@ export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
       style={{ width: "100%", height: "100%", overflow: "hidden" }}
     >
       <VideoRetry>
-        <Video />
+        <Video
+          objectFit={props.objectFit}
+          pictureInPictureEnabled={props.pictureInPictureEnabled}
+        />
       </VideoRetry>
       {props.children}
     </View>

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

@@ -69,7 +69,13 @@ export function Player(
           onOpenChange={setReportModalOpen}
           subject={reportSubject!}
         />
-        <Fullscreen src={props.src}>{props.children}</Fullscreen>
+        <Fullscreen
+          src={props.src}
+          objectFit={props.objectFit}
+          pictureInPictureEnabled={props.pictureInPictureEnabled}
+        >
+          {props.children}
+        </Fullscreen>
       </View>
     </>
   );

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

@@ -9,4 +9,6 @@ export type PlayerProps = {
   ingest?: boolean;
   embedded?: boolean;
   reportingURL?: string;
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
 };

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

@@ -34,24 +34,36 @@ import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
 import { mediaDevices, WebRTCMediaStream } from "./webrtc-primitives.native";
 
 // Add NativeIngestPlayer to the switch below!
-export default function VideoNative() {
+export default function VideoNative(props?: {
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+}) {
   const protocol = usePlayerStore((x) => x.protocol);
   const ingest = usePlayerStore((x) => x.ingestConnectionState) != null;
 
   return (
     <View>
       {ingest ? (
-        <NativeIngestPlayer />
+        <NativeIngestPlayer objectFit={props?.objectFit} />
       ) : protocol === PlayerProtocol.WEBRTC ? (
-        <NativeWHEP />
+        <NativeWHEP
+          objectFit={props?.objectFit}
+          pictureInPictureEnabled={props?.pictureInPictureEnabled}
+        />
       ) : (
-        <NativeVideo />
+        <NativeVideo
+          objectFit={props?.objectFit}
+          pictureInPictureEnabled={props?.pictureInPictureEnabled}
+        />
       )}
     </View>
   );
 }
 
-export function NativeVideo() {
+export function NativeVideo(props?: {
+  objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+  pictureInPictureEnabled?: boolean;
+}) {
   const videoRef = useRef<VideoView | null>(null);
   const protocol = usePlayerStore((x) => x.protocol);
 
@@ -159,14 +171,17 @@ export function NativeVideo() {
         onFullscreenExit={() => {
           setFullscreen(false);
         }}
-        allowsPictureInPicture
+        allowsPictureInPicture={props?.pictureInPictureEnabled !== false}
         onLayout={handleLayout}
       />
     </>
   );
 }
 
-export function NativeWHEP() {
+export function NativeWHEP(props?: {
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+}) {
   const selectedRendition = usePlayerStore((x) => x.selectedRendition);
   const src = usePlayerStore((x) => x.src);
   const { url } = srcToUrl(
@@ -246,10 +261,10 @@ export function NativeWHEP() {
     <>
       <RTCView
         mirror={false}
-        objectFit={"contain"}
+        objectFit={props?.objectFit || "contain"}
         streamURL={mediaStream.toURL()}
         onLayout={handleLayout}
-        pictureInPictureEnabled={true}
+        pictureInPictureEnabled={props?.pictureInPictureEnabled !== false}
         autoStartPictureInPicture={true}
         pictureInPicturePreferredSize={{
           width: 160,
@@ -265,7 +280,9 @@ export function NativeWHEP() {
   );
 }
 
-export function NativeIngestPlayer() {
+export function NativeIngestPlayer(props?: {
+  objectFit?: "contain" | "cover";
+}) {
   const ingestStarting = useIngestPlayerStore((x) => x.ingestStarting);
   const ingestMediaSource = useIngestPlayerStore((x) => x.ingestMediaSource);
   const ingestAutoStart = useIngestPlayerStore((x) => x.ingestAutoStart);
@@ -406,7 +423,7 @@ export function NativeIngestPlayer() {
   return (
     <RTCViewIngest
       mirror={ingestCamera !== "environment"}
-      objectFit={"contain"}
+      objectFit={props?.objectFit || "contain"}
       streamURL={localMediaStream.toURL()}
       zOrder={0}
       style={{

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

@@ -34,6 +34,8 @@ function assignVideoRef(
 type VideoProps = {
   url: string;
   videoRef?: React.RefObject<HTMLVideoElement>;
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
 };
 
 function useVideoDimensions(videoRef: React.RefObject<HTMLVideoElement>) {
@@ -67,7 +69,10 @@ function useVideoDimensions(videoRef: React.RefObject<HTMLVideoElement>) {
   return dimensions;
 }
 
-export default function WebVideo() {
+export default function WebVideo(props?: {
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+}) {
   const inProto = usePlayerStore((x) => x.protocol);
   const isIngesting = usePlayerStore((x) => x.ingestConnectionState !== null);
   const selectedRendition = usePlayerStore((x) => x.selectedRendition);
@@ -86,7 +91,12 @@ export default function WebVideo() {
     }
   }, [dimensions, setPlayerWidth, setPlayerHeight]);
 
-  const playerProps = { url, videoRef };
+  const playerProps = {
+    url,
+    videoRef,
+    objectFit: props?.objectFit,
+    pictureInPictureEnabled: props?.pictureInPictureEnabled,
+  };
 
   return (
     <>
@@ -274,7 +284,7 @@ const VideoElement = forwardRef<
       onVolumeChange={event("volumechange")}
       onWaiting={event("waiting")}
       style={{
-        objectFit: "contain",
+        objectFit: props.objectFit || "contain",
         backgroundColor: "transparent",
         width: "100%",
         height: "100%",
@@ -282,6 +292,7 @@ const VideoElement = forwardRef<
         maxHeight: "100%",
         transform: ingest ? "scaleX(-1)" : undefined,
       }}
+      disablePictureInPicture={props.pictureInPictureEnabled === false}
     />
   );
 });

package/src/hooks/useLivestreamInfo.ts

@@ -3,7 +3,7 @@ import { useLivestreamStore } from "../livestream-store";
 import { usePlayerStore } from "../player-store";
 import { useCreateStreamRecord } from "../streamplace-store";
 
-export function useLivestreamInfo() {
+export function useLivestreamInfo(url?: string) {
   const ingest = usePlayerStore((x) => x.ingestConnectionState);
   const profile = useLivestreamStore((x) => x.profile);
   const ingestStarting = usePlayerStore((x) => x.ingestStarting);
@@ -20,7 +20,11 @@ export function useLivestreamInfo() {
     try {
       if (title !== "") {
         setRecordSubmitted(true);
-        await createStreamRecord(title);
+        // Create the livestream record with title and custom url if available
+        await createStreamRecord({
+          title,
+          customUrl: url || null,
+        });
       }
     } catch (error) {
       console.error("Error creating livestream:", error);

package/src/lib/browser.ts

@@ -0,0 +1,27 @@
+export function getBrowserName(userAgent: string) {
+  // The order matters here, and this may report false positives for unlisted browsers.
+
+  if (userAgent.includes("Firefox")) {
+    // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
+    return "Mozilla Firefox";
+  } else if (userAgent.includes("SamsungBrowser")) {
+    // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
+    return "Samsung Internet";
+  } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
+    // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
+    return "Opera";
+  } else if (userAgent.includes("Edge")) {
+    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+    return "Microsoft Edge (Legacy)";
+  } else if (userAgent.includes("Edg")) {
+    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
+    return "Microsoft Edge (Chromium)";
+  } else if (userAgent.includes("Chrome")) {
+    // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
+    return "Google Chrome or Chromium";
+  } else if (userAgent.includes("Safari")) {
+    // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
+    return "Apple Safari";
+  }
+  return "unknown";
+}

package/src/livestream-store/stream-key.tsx

@@ -3,37 +3,10 @@ import { useEffect, useState } from "react";
 import { Platform } from "react-native";
 import { PlaceStreamKey } from "streamplace";
 import { privateKeyToAccount } from "viem/accounts";
+import { getBrowserName } from "../lib/browser";
 import { usePDSAgent } from "../streamplace-store/xrpc";
 import { useLivestreamStore } from "./livestream-store";
 
-function getBrowserName(userAgent: string) {
-  // The order matters here, and this may report false positives for unlisted browsers.
-
-  if (userAgent.includes("Firefox")) {
-    // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
-    return "Mozilla Firefox";
-  } else if (userAgent.includes("SamsungBrowser")) {
-    // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
-    return "Samsung Internet";
-  } else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
-    // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
-    return "Opera";
-  } else if (userAgent.includes("Edge")) {
-    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
-    return "Microsoft Edge (Legacy)";
-  } else if (userAgent.includes("Edg")) {
-    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
-    return "Microsoft Edge (Chromium)";
-  } else if (userAgent.includes("Chrome")) {
-    // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
-    return "Google Chrome or Chromium";
-  } else if (userAgent.includes("Safari")) {
-    // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
-    return "Apple Safari";
-  }
-  return "unknown";
-}
-
 export const useStreamKey = (): {
   streamKey: {
     privateKey: string;

package/src/streamplace-store/stream.tsx

@@ -6,7 +6,11 @@ import { LivestreamViewHydrated } from "streamplace/src/useful-types";
 import { useUrl } from "./streamplace-store";
 import { usePDSAgent } from "./xrpc";
 
+import PackageJson from "../../package.json";
+
 import { useEffect, useRef } from "react";
+import { Platform } from "react-native";
+import { getBrowserName } from "../lib/browser";
 
 const useUploadThumbnail = () => {
   const abortRef = useRef<AbortController | null>(null);
@@ -123,11 +127,23 @@ export function useCreateStreamRecord() {
   let url = useUrl();
   const uploadThumbnail = useUploadThumbnail();
 
-  return async (
-    title: string,
-    customThumbnail?: Blob,
-    submitPost: boolean = true,
-  ) => {
+  return async ({
+    title,
+    customThumbnail,
+    submitPost,
+    customUrl,
+  }: {
+    title: string;
+    customThumbnail?: Blob;
+    submitPost?: boolean;
+    customUrl?: string | null;
+  }) => {
+    if (!submitPost) {
+      submitPost = true;
+    }
+    if (!customUrl) {
+      customUrl = null;
+    }
     if (!agent) {
       throw new Error("No PDS agent found");
     }
@@ -136,9 +152,11 @@ export function useCreateStreamRecord() {
       throw new Error("No user DID found, assuming not logged in");
     }
 
-    let thumbnail: BlobRef | undefined = undefined;
+    // Use customUrl if provided, otherwise fall back to the store URL
+    const finalUrl = customUrl || url;
+    const u = new URL(finalUrl);
 
-    const u = new URL(url);
+    let thumbnail: BlobRef | undefined = undefined;
 
     if (customThumbnail) {
       try {
@@ -185,10 +203,10 @@ export function useCreateStreamRecord() {
 
     let newPost: undefined | { uri: string; cid: string } = undefined;
 
-    if (submitPost) {
-      const did = agent.did;
-      const profile = await agent.getProfile({ actor: did });
+    const did = agent.did;
+    const profile = await agent.getProfile({ actor: did });
 
+    if (submitPost) {
       if (!profile) {
         throw new Error("No profile found for the user DID");
       }
@@ -216,10 +234,27 @@ export function useCreateStreamRecord() {
       }
     }
 
+    // get version? only works on andoid/ios
+    //
+    let platform: string = Platform.OS;
+    let platVersion: string = Platform.Version.toString();
+    if (
+      platform === "web" &&
+      typeof window !== "undefined" &&
+      window.navigator
+    ) {
+      platVersion = getBrowserName(window.navigator.userAgent);
+    }
+
     const record: PlaceStreamLivestream.Record = {
       title: title,
-      url: url,
+      url: finalUrl,
       createdAt: new Date().toISOString(),
+      // would match up with e.g. https://stream.place/iame.li
+      canonicalUrl: `${finalUrl}/${profile.data.handle}`,
+      // user agent style string
+      // e.g. `@streamplace/components/0.1.0 (ios, 32.0)`
+      agent: `@streamplace/components/${PackageJson.version} (${platform}, ${platVersion})`,
       post: newPost,
       thumb: thumbnail,
     };
@@ -233,7 +268,7 @@ export function useCreateStreamRecord() {
   };
 }
 
-export function useUpdateStreamRecord() {
+export function useUpdateStreamRecord(customUrl: string | null = null) {
   let agent = usePDSAgent();
   let url = useUrl();
   const uploadThumbnail = useUploadThumbnail();
@@ -255,6 +290,9 @@ export function useUpdateStreamRecord() {
       throw new Error("No latest record");
     }
 
+    // Use customUrl if provided, otherwise fall back to the store URL
+    const finalUrl = customUrl || url;
+
     let rkey = livestream.uri.split("/").pop();
     let oldRecordValue: PlaceStreamLivestream.Record = livestream.record;
 
@@ -275,7 +313,7 @@ export function useUpdateStreamRecord() {
 
     const record: PlaceStreamLivestream.Record = {
       title: title,
-      url: url,
+      url: finalUrl,
       createdAt: new Date().toISOString(),
       post: oldRecordValue.post,
       thumb: thumbnail,