@streamplace/components 0.7.14 → 0.7.17

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

@@ -1,419 +1,29 @@
-import { useVideoPlayer, VideoPlayerEvents, VideoView } from "expo-video";
-import { ArrowRight } from "lucide-react-native";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { LayoutChangeEvent, Linking } from "react-native";
-import {
-  MediaStream,
-  RTCView,
-  RTCView as RTCViewIngest,
-} from "react-native-webrtc";
-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, WebRTCMediaStream } from "./webrtc-primitives.native";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
+import { VideoNativeProps } from "./props";
 
-// Add NativeIngestPlayer to the switch below!
-export default function VideoNative() {
-  const protocol = usePlayerStore((x) => x.protocol);
-  const ingest = usePlayerStore((x) => x.ingestConnectionState) != null;
+let importPromise: Promise<typeof import("./video-async.native")> | null = null;
 
-  return (
-    <View>
-      {ingest ? (
-        <NativeIngestPlayer />
-      ) : protocol === PlayerProtocol.WEBRTC ? (
-        <NativeWHEP />
-      ) : (
-        <NativeVideo />
-      )}
-    </View>
-  );
-}
-
-export function NativeVideo() {
-  const videoRef = useRef<VideoView | null>(null);
-  const protocol = usePlayerStore((x) => x.protocol);
-
-  const selectedRendition = usePlayerStore((x) => x.selectedRendition);
-  const src = usePlayerStore((x) => x.src);
-  const { url } = srcToUrl({ src: src, selectedRendition }, protocol);
-  const setStatus = usePlayerStore((x) => x.setStatus);
-  const muted = usePlayerStore((x) => x.muted);
-  const volume = usePlayerStore((x) => x.volume);
-  const setFullscreen = usePlayerStore((x) => x.setFullscreen);
-  const fullscreen = usePlayerStore((x) => x.fullscreen);
-  const playerEvent = usePlayerStore((x) => x.playerEvent);
-  const spurl = useStreamplaceStore((x) => x.url);
-
-  const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
-  const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
-
-  // State for live dimensions
-  const [dimensions, setDimensions] = useState<{
-    width: number;
-    height: number;
-  }>({ width: 0, height: 0 });
+export default function VideoNative(props: VideoNativeProps) {
+  if (!importPromise) {
+    importPromise = import("./video-async.native");
+  }
 
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    setDimensions({ width, height });
-    setPlayerWidth(width);
-    setPlayerHeight(height);
-  }, []);
+  const [videoNativeModule, setVideoNativeModule] = useState<
+    typeof import("./video-async.native") | null
+  >(null);
 
   useEffect(() => {
-    return () => {
-      setStatus(PlayerStatus.START);
-    };
-  }, [setStatus]);
-
-  const player = useVideoPlayer(url, (player) => {
-    player.addListener("playingChange", (newIsPlaying) => {
-      console.log("playingChange", newIsPlaying);
-      if (newIsPlaying) {
-        setStatus(PlayerStatus.PLAYING);
-      } else {
-        setStatus(PlayerStatus.WAITING);
-      }
+    importPromise?.then((module) => {
+      setVideoNativeModule(module);
     });
-    player.loop = true;
-    player.muted = muted;
-    player.play();
-  });
-
-  useEffect(() => {
-    player.muted = muted;
-  }, [muted, player]);
-
-  useEffect(() => {
-    player.volume = volume;
-  }, [volume, player]);
-
-  useEffect(() => {
-    const subs = (
-      [
-        "playToEnd",
-        "playbackRateChange",
-        "playingChange",
-        "sourceChange",
-        "statusChange",
-        "volumeChange",
-      ] as (keyof VideoPlayerEvents)[]
-    ).map((evType) => {
-      return player.addListener(evType, (...args) => {
-        const now = new Date();
-        console.log("video native event", evType);
-        playerEvent(spurl, now.toISOString(), evType, { args: args });
-      });
-    });
-
-    subs.push(
-      player.addListener("playingChange", (newIsPlaying) => {
-        console.log("playingChange", newIsPlaying);
-        if (newIsPlaying) {
-          setStatus(PlayerStatus.PLAYING);
-        } else {
-          setStatus(PlayerStatus.WAITING);
-        }
-      }),
-    );
-
-    return () => {
-      for (const sub of subs) {
-        sub.remove();
-      }
-    };
-  }, [player, playerEvent, setStatus, spurl]);
-
-  return (
-    <>
-      <VideoView
-        ref={videoRef}
-        player={player}
-        allowsFullscreen
-        nativeControls={fullscreen}
-        onFullscreenEnter={() => {
-          setFullscreen(true);
-        }}
-        onFullscreenExit={() => {
-          setFullscreen(false);
-        }}
-        allowsPictureInPicture
-        onLayout={handleLayout}
-      />
-    </>
-  );
-}
-
-export function NativeWHEP() {
-  const selectedRendition = usePlayerStore((x) => x.selectedRendition);
-  const src = usePlayerStore((x) => x.src);
-  const { url } = srcToUrl(
-    { src: src, selectedRendition },
-    PlayerProtocol.WEBRTC,
-  );
-  const [stream, stuck] = useWebRTC(url);
-  const status = usePlayerStore((x) => x.status);
-
-  const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
-  const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
-
-  // PiP support: wire up videoRef (no direct ref for RTCView)
-  const setVideoRef = usePlayerStore((x) => x.setVideoRef);
-
-  // State for live dimensions
-  const [dimensions, setDimensions] = useState<{
-    width: number;
-    height: number;
-  }>({ width: 0, height: 0 });
-
-  const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    setDimensions({ width, height });
-    setPlayerWidth(width);
-    setPlayerHeight(height);
   }, []);
 
-  const setStatus = usePlayerStore((x) => x.setStatus);
-  const muted = usePlayerStore((x) => x.muted);
-  const volume = usePlayerStore((x) => x.volume);
-
-  useEffect(() => {
-    if (stuck && status === PlayerStatus.PLAYING) {
-      console.log("setting status to stalled", status);
-      setStatus(PlayerStatus.STALLED);
-    }
-    if (!stuck && status === PlayerStatus.STALLED) {
-      console.log("setting status to playing", status);
-      setStatus(PlayerStatus.PLAYING);
-    }
-  }, [stuck, status]);
-
-  const mediaStream = stream as unknown as MediaStream;
-
-  // useEffect(() => {
-  //   if (!mediaStream) {
-  //     setStatus(PlayerStatus.WAITING);
-  //     return;
-  //   }
-  //   setStatus(PlayerStatus.PLAYING);
-  // }, [mediaStream, setStatus]);
-
-  useEffect(() => {
-    if (!mediaStream) {
-      return;
-    }
-    mediaStream.getTracks().forEach((track) => {
-      if (track.kind === "audio") {
-        track._setVolume(muted ? 0 : volume);
-      }
-    });
-  }, [mediaStream, muted, volume]);
-
-  // Keep the playerStore videoRef in sync for PiP (if possible)
-  useEffect(() => {
-    if (typeof setVideoRef === "function") {
-      setVideoRef(null); // No direct ref for RTCView, but keep API consistent
-    }
-  }, [setVideoRef]);
-
-  if (!mediaStream) {
+  if (!videoNativeModule) {
     return <View></View>;
   }
 
-  return (
-    <>
-      <RTCView
-        mirror={false}
-        objectFit={"contain"}
-        streamURL={mediaStream.toURL()}
-        onLayout={handleLayout}
-        pictureInPictureEnabled={true}
-        autoStartPictureInPicture={true}
-        pictureInPicturePreferredSize={{
-          width: 160,
-          height: 90,
-        }}
-        style={{
-          minWidth: "100%",
-          minHeight: "100%",
-          flex: 1,
-        }}
-      />
-    </>
-  );
-}
-
-export function NativeIngestPlayer() {
-  const ingestStarting = useIngestPlayerStore((x) => x.ingestStarting);
-  const ingestMediaSource = useIngestPlayerStore((x) => x.ingestMediaSource);
-  const ingestAutoStart = useIngestPlayerStore((x) => x.ingestAutoStart);
-  const setStatus = useIngestPlayerStore((x) => x.setStatus);
-  const setVideoRef = usePlayerStore((x) => x.setVideoRef);
-
-  const [error, setError] = useState<Error | null>(null);
-
-  const ingestCamera = useIngestPlayerStore((x) => x.ingestCamera);
-
-  useEffect(() => {
-    setStatus(IngestPlayerStatus.PLAYING);
-  }, [setStatus]);
-
-  useEffect(() => {
-    if (typeof setVideoRef === "function") {
-      setVideoRef(null);
-    }
-  }, [setVideoRef]);
-
-  const url = useStreamplaceStore((x) => x.url);
-  const [lms, setLocalMediaStream] = useState<WebRTCMediaStream | null>(null);
-  const [, setRemoteMediaStream] = useWebRTCIngest({
-    endpoint: `${url}/api/ingest/webrtc`,
-  });
-
-  // Use lms directly as localMediaStream
-  const localMediaStream = lms;
-
-  useEffect(() => {
-    if (ingestMediaSource === IngestMediaSource.DISPLAY) {
-      mediaDevices
-        .getDisplayMedia()
-        .then((stream: WebRTCMediaStream) => {
-          console.log("display media", stream);
-          setLocalMediaStream(stream);
-        })
-        .catch((e: any) => {
-          console.log("error getting display media", e);
-          console.error("error getting display media", e);
-        });
-    } else {
-      mediaDevices
-        .getUserMedia({
-          audio: {
-            // deviceId: "audio-1",
-            // echoCancellation: true,
-            // autoGainControl: true,
-            // noiseSuppression: true,
-            // latency: false,
-            // channelCount: false,
-          },
-          video: {
-            facingMode: ingestCamera,
-            width: { min: 200, ideal: 1080, max: 2160 },
-            height: { min: 200, ideal: 1920, max: 3840 },
-          },
-        })
-        .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. To stream, you need to give us permission to access these.",
-            ),
-          );
-        });
-    }
-  }, [ingestMediaSource, ingestCamera]);
-
-  useEffect(() => {
-    if (!ingestStarting && !ingestAutoStart) {
-      setRemoteMediaStream(null);
-      return;
-    }
-    if (!localMediaStream) {
-      return;
-    }
-    console.log("setting remote media stream", localMediaStream);
-    // @ts-expect-error: WebRTCMediaStream may not have all MediaStream properties, but is compatible for our use
-    setRemoteMediaStream(localMediaStream);
-  }, [localMediaStream, ingestStarting, ingestAutoStart, setRemoteMediaStream]);
-
-  if (!localMediaStream) {
-    return null;
-  }
-
-  if (error) {
-    return (
-      <View
-        backgroundColor={colors.destructive[900]}
-        style={[p[4], m[4], gap.all[2], { borderRadius: borderRadius.md }]}
-      >
-        <View>
-          <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>
-    );
-  }
+  const VideoNative = videoNativeModule.default;
 
-  return (
-    <RTCViewIngest
-      mirror={ingestCamera !== "environment"}
-      objectFit={"contain"}
-      streamURL={localMediaStream.toURL()}
-      zOrder={0}
-      style={{
-        minWidth: "100%",
-        minHeight: "100%",
-        flex: 1,
-      }}
-    />
-  );
+  return <VideoNative {...props} />;
 }

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 "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 "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 "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 "Chrome";
+  } 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 "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;