@streamplace/components 0.7.14 → 0.7.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.14",
+  "version": "0.7.17",
   "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"
   },
@@ -34,16 +28,16 @@
     "@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",
@@ -53,5 +47,9 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "c113e9adb79a8a0fe0009dcec815b4c93cd4198a"
+  "scripts": {
+    "build": "tsc",
+    "start": "tsc --watch --preserveWatchOutput"
+  },
+  "gitHead": "ce080c76c0af15c8d035c912384cfc471bc33d98"
 }

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

@@ -14,7 +14,12 @@ 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 [dimensions, setDimensions] = useState(Dimensions.get("window"));
@@ -145,7 +150,10 @@ export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
             },
           ]}
         >
-          <Video />
+          <Video
+            objectFit={props.objectFit}
+            pictureInPictureEnabled={props.pictureInPictureEnabled}
+          />
           {props.children}
         </View>
       </View>
@@ -156,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,11 @@ export type PlayerProps = {
   ingest?: boolean;
   embedded?: boolean;
   reportingURL?: string;
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+};
+
+export type VideoNativeProps = {
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
 };

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

@@ -0,0 +1,436 @@
+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";
+
+// Add NativeIngestPlayer to the switch below!
+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 objectFit={props?.objectFit} />
+      ) : protocol === PlayerProtocol.WEBRTC ? (
+        <NativeWHEP
+          objectFit={props?.objectFit}
+          pictureInPictureEnabled={props?.pictureInPictureEnabled}
+        />
+      ) : (
+        <NativeVideo
+          objectFit={props?.objectFit}
+          pictureInPictureEnabled={props?.pictureInPictureEnabled}
+        />
+      )}
+    </View>
+  );
+}
+
+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);
+
+  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 });
+
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setDimensions({ width, height });
+    setPlayerWidth(width);
+    setPlayerHeight(height);
+  }, []);
+
+  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);
+      }
+    });
+    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={props?.pictureInPictureEnabled !== false}
+        onLayout={handleLayout}
+      />
+    </>
+  );
+}
+
+export function NativeWHEP(props?: {
+  objectFit?: "contain" | "cover";
+  pictureInPictureEnabled?: boolean;
+}) {
+  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) {
+    return <View></View>;
+  }
+
+  return (
+    <>
+      <RTCView
+        mirror={false}
+        objectFit={props?.objectFit || "contain"}
+        streamURL={mediaStream.toURL()}
+        onLayout={handleLayout}
+        pictureInPictureEnabled={props?.pictureInPictureEnabled !== false}
+        autoStartPictureInPicture={true}
+        pictureInPicturePreferredSize={{
+          width: 160,
+          height: 90,
+        }}
+        style={{
+          minWidth: "100%",
+          minHeight: "100%",
+          flex: 1,
+        }}
+      />
+    </>
+  );
+}
+
+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);
+  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>
+    );
+  }
+
+  return (
+    <RTCViewIngest
+      mirror={ingestCamera !== "environment"}
+      objectFit={props?.objectFit || "contain"}
+      streamURL={localMediaStream.toURL()}
+      zOrder={0}
+      style={{
+        minWidth: "100%",
+        minHeight: "100%",
+        flex: 1,
+      }}
+    />
+  );
+}