@streamplace/components 0.9.9 → 0.9.10

package/src/components/dashboard/information-widget.tsx

@@ -13,11 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutChangeEvent, Text, TouchableOpacity, View } from "react-native";
 import Svg, { Path, Line as SvgLine, Text as SvgText } from "react-native-svg";
 import { useAQState } from "../../hooks";
-import {
-  useLivestreamStore,
-  useSegment,
-  useViewers,
-} from "../../livestream-store";
+import { useLivestream, useSegment, useViewers } from "../../livestream-store";
 import * as zero from "../../ui";
 import { InfoBox, InfoRow } from "../ui";
 
@@ -50,7 +46,7 @@ export default function InformationWidget({
   const isCompactHeight = layoutMeasured && componentHeight < 350;
 
   const seg = useSegment();
-  const livestream = useLivestreamStore((x) => x.livestream);
+  const livestream = useLivestream();
   const viewers = useViewers();
 
   const getBitrate = useCallback((): number => {
@@ -173,8 +169,9 @@ export default function InformationWidget({
                 width: 8,
                 height: 8,
                 borderRadius: 4,
-                backgroundColor:
-                  getConnectionStatus() === "good"
+                backgroundColor: !livestream
+                  ? "#3b82f6"
+                  : getConnectionStatus() === "good"
                     ? "#22c55e"
                     : getConnectionStatus() === "warning"
                       ? "#f59e0b"
@@ -182,6 +179,11 @@ export default function InformationWidget({
               },
             ]}
           />
+          {!livestream && (
+            <Text style={[text.blue[400], { fontSize: 13, fontWeight: "600" }]}>
+              (not live)
+            </Text>
+          )}
         </View>
         <TouchableOpacity
           onPress={() => setShowViewers(!showViewers)}
@@ -315,6 +317,7 @@ export default function InformationWidget({
                 data={bitrateHistory}
                 width={componentWidth - 40}
                 height={120}
+                color={livestream ? "#22c55e" : "#3b82f6"}
               />
             </View>
           )}
@@ -395,6 +398,7 @@ export default function InformationWidget({
                 data={bitrateHistory}
                 width={componentWidth - 40}
                 height={isCompactHeight ? 80 : 120}
+                color={livestream ? "#22c55e" : "#3b82f6"}
               />
             </View>
           )}
@@ -432,10 +436,12 @@ function BitrateChart({
   data,
   width,
   height,
+  color = "#22c55e",
 }: {
   data: number[];
   width: number;
   height: number;
+  color?: string;
 }) {
   const maxDataValue = Math.max(...data, 1);
   const minDataValue = Math.min(...data);
@@ -515,7 +521,7 @@ function BitrateChart({
         </SvgText>
         <Path
           d={pathData}
-          stroke="#22c55e"
+          stroke={color}
           strokeWidth="2"
           fill="none"
           strokeLinecap="round"

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

@@ -15,6 +15,7 @@ import {
   usePlayerStore,
   VideoRetry,
 } from "../..";
+import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video.native";
 
 // Standard 16:9 video aspect ratio
@@ -166,6 +167,7 @@ export function Fullscreen(props: {
             objectFit={props.objectFit}
             pictureInPictureEnabled={props.pictureInPictureEnabled}
           />
+          <AudioOnlyOverlay />
           <DanmuOverlay
             enabled={danmuEnabled}
             opacity={danmuOpacity}
@@ -188,6 +190,7 @@ export function Fullscreen(props: {
           pictureInPictureEnabled={props.pictureInPictureEnabled}
         />
       </VideoRetry>
+      <AudioOnlyOverlay />
       <DanmuOverlay
         enabled={danmuEnabled}
         opacity={danmuOpacity}

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

@@ -11,6 +11,7 @@ import {
   usePlayerStore,
 } from "../..";
 import { View } from "../../components/ui";
+import { AudioOnlyOverlay } from "./ui/audio-only-overlay";
 import Video from "./video";
 import VideoRetry from "./video-retry";
 
@@ -105,6 +106,7 @@ export function Fullscreen(props: {
           pictureInPictureEnabled={props.pictureInPictureEnabled}
         />
       </VideoRetry>
+      <AudioOnlyOverlay />
       <DanmuOverlay
         enabled={danmuEnabled}
         opacity={danmuOpacity}

package/src/components/mobile-player/ui/audio-only-overlay.tsx

@@ -0,0 +1,48 @@
+import { Volume2 } from "lucide-react-native";
+import { zero } from "../../..";
+import { usePlayerStore } from "../../../player-store";
+import { Text, View } from "../../ui";
+
+export function AudioOnlyOverlay() {
+  const selectedRendition = usePlayerStore((x) => x.selectedRendition);
+  const setSelectedRendition = usePlayerStore((x) => x.setSelectedRendition);
+
+  if (selectedRendition !== "audio") {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        zero.layout.position.absolute,
+        zero.position.top[0],
+        zero.position.left[0],
+        zero.position.right[0],
+        zero.position.bottom[0],
+        zero.layout.flex.center,
+      ]}
+    >
+      <View
+        style={[
+          zero.layout.flex.column,
+          zero.layout.flex.alignCenter,
+          zero.gap.all[3],
+          zero.px[6],
+        ]}
+      >
+        <Volume2 color="#fff" size={48} />
+        <Text size="lg" weight="semibold" center>
+          Audio Only mode
+        </Text>
+        <Text
+          size="sm"
+          color="muted"
+          center
+          onPress={() => setSelectedRendition("source")}
+        >
+          Go to Settings &gt; Quality to switch back to video.
+        </Text>
+      </View>
+    </View>
+  );
+}

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

@@ -1,3 +1,4 @@
+export * from "./audio-only-overlay";
 export * from "./autoplay-button";
 export * from "./countdown";
 export * from "./input";

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

@@ -7,7 +7,6 @@ const { gap, h, layout, mt, p, position, px, py, sizes, w } = atoms;
 type InputPanelProps = {
   title: string | undefined;
   setTitle: (title: string) => void;
-  ingestStarting: boolean;
   toggleGoLive: () => void;
   isLive: boolean;
   toggleStopStream?: () => void;
@@ -16,7 +15,6 @@ type InputPanelProps = {
 export function InputPanel({
   title,
   setTitle,
-  ingestStarting,
   toggleGoLive,
   isLive,
   toggleStopStream,
@@ -51,9 +49,7 @@ export function InputPanel({
             />
           </View>
         )}
-        {ingestStarting ? (
-          <Text>Starting your stream...</Text>
-        ) : isLive ? (
+        {isLive ? (
           <View style={[layout.flex.center]}>
             <Pressable
               onPress={toggleStopStream}

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

@@ -12,7 +12,10 @@ export function MetricsPanel({ showMetrics }: MetricsPanelProps) {
 
   let icon = <CircleX color="#d44" />;
   let color = "#d44";
-  if (connectionQuality === "good") {
+  if (connectionQuality === "pre-live") {
+    icon = <CircleCheck color={atoms.colors.blue[500]} />;
+    color = atoms.colors.blue[500];
+  } else if (connectionQuality === "good") {
     icon = <CircleCheck color="#4d4" />;
     color = "#4d4";
   } else if (connectionQuality === "degraded") {
@@ -23,6 +26,18 @@ export function MetricsPanel({ showMetrics }: MetricsPanelProps) {
     color = "#d44";
   }
 
+  const connectionText = () => {
+    if (connectionQuality === "pre-live") {
+      return "READY TO STREAM";
+    } else if (connectionQuality === "good") {
+      return "GOOD";
+    } else if (connectionQuality === "degraded") {
+      return "DEGRADED";
+    } else {
+      return "POOR";
+    }
+  };
+
   return (
     <View
       style={{
@@ -49,7 +64,7 @@ export function MetricsPanel({ showMetrics }: MetricsPanelProps) {
             },
           ]}
         >
-          {connectionQuality.toUpperCase()}
+          {connectionText()}
         </Text>
       </View>
       {showMetrics && (

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

@@ -14,6 +14,7 @@ import {
   formatHandleWithAt,
   useAvatars,
   useLivestreamInfo,
+  useStreamplaceStore,
   zero,
 } from "../../..";
 import { useLivestreamStore } from "../../../livestream-store";
@@ -58,6 +59,38 @@ export function ContextMenu({
   const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
 
+  const isDevModeOn = useStreamplaceStore((x) => x.danmuUnlocked);
+
+  const latestSegment = useLivestreamStore((x) => x.segment);
+  // get highest height x width rendition for video
+  const videoRendition = latestSegment?.video?.reduce((prev, current) => {
+    const prevPixels = prev.width * prev.height;
+    const currentPixels = current.width * current.height;
+    return currentPixels > prevPixels ? current : prev;
+  }, latestSegment?.video?.[0]);
+  const highestLength = videoRendition
+    ? videoRendition.height < videoRendition.width
+      ? videoRendition.height
+      : videoRendition?.width
+    : 0;
+
+  // ugh i hate this
+  const frames = videoRendition?.framerate as
+    | { num: number; den: number }
+    | undefined;
+  let fps =
+    frames?.num && frames?.den
+      ? Math.round((frames.num / frames.den) * 100) / 100
+      : 0;
+
+  if (!isDevModeOn && latestSegment?.video?.length) {
+    fps = Math.round(fps);
+  }
+
+  const resolutionDisplay = highestLength
+    ? `(${highestLength}p${fps > 0 ? fps : ""})`
+    : "(Original Quality)";
+
   const { profile } = useLivestreamInfo();
 
   const avatars = useAvatars(profile?.did ? [profile?.did] : []);
@@ -215,7 +248,11 @@ export function ContextMenu({
               >
                 <Text>Quality</Text>
                 <Text muted size={isMobile ? "base" : "sm"}>
-                  {quality === "source" ? "Source" : quality},{" "}
+                  {quality === "source"
+                    ? `Source${resolutionDisplay ? " " + resolutionDisplay + "\n" : ", "}`
+                    : quality === "audio"
+                      ? `Audio Only\n`
+                      : quality}
                   {lowLatency ? "Low Latency" : ""}
                 </Text>
               </View>
@@ -227,11 +264,11 @@ export function ContextMenu({
                   onValueChange={setQuality}
                 >
                   <DropdownMenuRadioItem value="source">
-                    <Text>Source (Original Quality)</Text>
+                    <Text>Source {resolutionDisplay}</Text>
                   </DropdownMenuRadioItem>
                   {qualities.map((r) => (
                     <DropdownMenuRadioItem key={r.name} value={r.name}>
-                      <Text>{r.name}</Text>
+                      <Text>{r.name === "audio" ? "Audio Only" : r.name}</Text>
                     </DropdownMenuRadioItem>
                   ))}
                 </DropdownMenuRadioGroup>

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

@@ -1,18 +1,28 @@
 import { useEffect, useRef, useState } from "react";
 import * as sdpTransform from "sdp-transform";
-import { PlayerStatus, usePlayerStore, useStreamKey } from "../..";
+import { StreamplaceAgent } from "streamplace";
+import {
+  PlayerStatus,
+  usePlayerStore,
+  usePossiblyUnauthedPDSAgent,
+  useStreamKey,
+} from "../..";
 import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 
 export default function useWebRTC(
-  endpoint: string,
+  streamer: string,
 ): [MediaStream | null, boolean] {
   const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
   const [stuck, setStuck] = useState<boolean>(false);
   const setStatus = usePlayerStore((x) => x.setStatus);
+  let agent = usePossiblyUnauthedPDSAgent();
 
   const lastChange = useRef<number>(0);
 
   useEffect(() => {
+    if (!agent) {
+      return;
+    }
     const peerConnection = new RTCPeerConnection({
       bundlePolicy: "max-bundle",
     });
@@ -44,7 +54,12 @@ export default function useWebRTC(
       }
     });
     peerConnection.addEventListener("negotiationneeded", () => {
-      negotiateConnectionWithClientOffer(peerConnection, endpoint);
+      negotiateConnectionWithClientOffer(
+        peerConnection,
+        streamer,
+        undefined,
+        agent,
+      );
     });
 
     let lastFramesReceived = 0;
@@ -82,7 +97,7 @@ export default function useWebRTC(
       clearInterval(handle);
       peerConnection.close();
     };
-  }, [endpoint]);
+  }, [streamer, agent]);
   return [mediaStream, stuck];
 }
 
@@ -100,8 +115,9 @@ export default function useWebRTC(
  */
 export async function negotiateConnectionWithClientOffer(
   peerConnection: RTCPeerConnection,
-  endpoint: string,
+  streamer: string,
   bearerToken?: string,
+  agent?: StreamplaceAgent,
 ) {
   /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer */
   const offer = await peerConnection.createOffer({
@@ -134,23 +150,79 @@ export async function negotiateConnectionWithClientOffer(
        * This specifies how the client should communicate,
        * and what kind of media client and server have negotiated to exchange.
        */
-      let response = await postSDPOffer(`${endpoint}`, ofr.sdp, bearerToken);
-      if (response.status === 201) {
-        let answerSDP = await response.text();
+      let response = await postSDPOffer(streamer, ofr.sdp, bearerToken, agent);
+      let text = new TextDecoder().decode(response.data);
+      if (response.success) {
         if ((peerConnection.connectionState as string) === "closed") {
           return;
         }
         await peerConnection.setRemoteDescription(
-          new RTCSessionDescription({ type: "answer", sdp: answerSDP }),
+          new RTCSessionDescription({ type: "answer", sdp: text }),
         );
-        return response.headers.get("Location");
-      } else if (response.status === 405) {
-        console.log(
-          "Remember to update the URL passed into the WHIP or WHEP client",
+        return "https://stream.place/example";
+      } else {
+        console.error(text);
+      }
+    } catch (e) {
+      console.error(`posting sdp offer failed: ${e}`);
+    }
+
+    /** Limit reconnection attempts to at-most once every 5 seconds */
+    await new Promise((r) => setTimeout(r, 5000));
+  }
+}
+
+export async function negotiateIngestConnectionWithClientOffer(
+  peerConnection: RTCPeerConnection,
+  endpoint: string,
+  bearerToken: string,
+) {
+  /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer */
+  const offer = await peerConnection.createOffer({
+    offerToReceiveAudio: true,
+    offerToReceiveVideo: true,
+  });
+  if (!offer.sdp) {
+    throw Error("no SDP in offer");
+  }
+
+  const newSDP = forceStereoAudio(offer.sdp);
+
+  offer.sdp = newSDP;
+  /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
+  await peerConnection.setLocalDescription(offer);
+
+  /** Wait for ICE gathering to complete */
+  let ofr = await waitToCompleteICEGathering(peerConnection);
+  if (!ofr) {
+    throw Error("failed to gather ICE candidates for offer");
+  }
+
+  /**
+   * As long as the connection is open, attempt to...
+   */
+  while (peerConnection.connectionState !== "closed") {
+    try {
+      /**
+       * This response contains the server's SDP offer.
+       * This specifies how the client should communicate,
+       * and what kind of media client and server have negotiated to exchange.
+       */
+      let response = await postSDPIngestOffer(endpoint, ofr.sdp, bearerToken);
+
+      if (response.status === 201) {
+        if ((peerConnection.connectionState as string) === "closed") {
+          return;
+        }
+        await peerConnection.setRemoteDescription(
+          new RTCSessionDescription({
+            type: "answer",
+            sdp: await response.text(),
+          }),
         );
+        return "https://stream.place/example";
       } else {
-        const errorMessage = await response.text();
-        console.error(errorMessage);
+        console.error(await response.text());
       }
     } catch (e) {
       console.error(`posting sdp offer failed: ${e}`);
@@ -162,9 +234,35 @@ export async function negotiateConnectionWithClientOffer(
 }
 
 async function postSDPOffer(
-  endpoint: string,
+  streamer: string,
   data: string,
   bearerToken?: string,
+  agent?: StreamplaceAgent,
+) {
+  if (!agent) {
+    throw new Error("No agent found");
+  }
+  return await agent.place.stream.playback.whep(data, {
+    qp: {
+      rendition: "source",
+      streamer: streamer,
+    },
+  });
+  // return await fetch(endpoint, {
+  //   method: "POST",
+  //   mode: "cors",
+  //   headers: {
+  //     "content-type": "application/sdp",
+  //     ...(bearerToken ? { Authorization: `Bearer ${bearerToken}` } : {}),
+  //   },
+  //   body: data,
+  // });
+}
+
+async function postSDPIngestOffer(
+  endpoint: string,
+  data: string,
+  bearerToken: string,
 ) {
   return await fetch(endpoint, {
     method: "POST",
@@ -254,7 +352,10 @@ export function useWebRTCIngest({
       }
     });
     peerConnection.addEventListener("negotiationneeded", (ev) => {
-      negotiateConnectionWithClientOffer(
+      if (!storedKey?.streamKey?.privateKey) {
+        throw new Error("no private key found");
+      }
+      negotiateIngestConnectionWithClientOffer(
         peerConnection,
         endpoint,
         storedKey.streamKey?.privateKey,

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

@@ -285,9 +285,9 @@ export function NativeWHEP(props?: {
 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 setIngestLive = useIngestPlayerStore((x) => x.setIngestLive);
   const setStatus = useIngestPlayerStore((x) => x.setStatus);
   const setVideoRef = usePlayerStore((x) => x.setVideoRef);
 
@@ -315,10 +315,13 @@ export function NativeIngestPlayer(props?: {
   const localMediaStream = lms;
 
   useEffect(() => {
+    let acquiredStream: WebRTCMediaStream | null = null;
+
     if (ingestMediaSource === IngestMediaSource.DISPLAY) {
       mediaDevices
         .getDisplayMedia()
         .then((stream: WebRTCMediaStream) => {
+          acquiredStream = stream;
           console.log("display media", stream);
           setLocalMediaStream(stream);
         })
@@ -344,6 +347,7 @@ export function NativeIngestPlayer(props?: {
           },
         })
         .then((stream: WebRTCMediaStream) => {
+          acquiredStream = stream;
           setLocalMediaStream(stream);
 
           let errs: string[] = [];
@@ -374,20 +378,29 @@ export function NativeIngestPlayer(props?: {
           );
         });
     }
+
+    return () => {
+      if (acquiredStream) {
+        acquiredStream.getTracks().forEach((track) => track.stop());
+      }
+      setLocalMediaStream(null);
+    };
   }, [ingestMediaSource, ingestCamera]);
 
   useEffect(() => {
-    if (!ingestStarting && !ingestAutoStart) {
-      setRemoteMediaStream(null);
-      return;
+    if (localMediaStream) {
+      setIngestLive(true);
     }
+  }, [localMediaStream]);
+
+  useEffect(() => {
     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]);
+  }, [localMediaStream, ingestAutoStart, setRemoteMediaStream]);
 
   if (!localMediaStream) {
     return null;

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

@@ -442,11 +442,12 @@ export function WebRTCPlayerInner({
 
   const status = usePlayerStore((x) => x.status);
   const setStatus = usePlayerStore((x) => x.setStatus);
+  const src = usePlayerStore((x) => x.src);
 
   const playerEvent = usePlayerStore((x) => x.playerEvent);
   const spurl = useStreamplaceStore((x) => x.url);
 
-  const [mediaStream, stuck] = useWebRTC(url);
+  const [mediaStream, stuck] = useWebRTC(src);
 
   useEffect(() => {
     if (stuck) {
@@ -541,9 +542,9 @@ export function WebRTCPlayerInner({
 }
 
 export function WebcamIngestPlayer(props: VideoProps) {
-  const ingestStarting = usePlayerStore((x) => x.ingestStarting);
   const ingestMediaSource = usePlayerStore((x) => x.ingestMediaSource);
   const ingestAutoStart = usePlayerStore((x) => x.ingestAutoStart);
+  const setIngestLive = usePlayerStore((x) => x.setIngestLive);
 
   const [error, setError] = useState<Error | null>(null);
 
@@ -606,15 +607,17 @@ export function WebcamIngestPlayer(props: VideoProps) {
   }, [ingestMediaSource]);
 
   useEffect(() => {
-    if (!ingestStarting && !ingestAutoStart) {
-      setRemoteMediaStream(null);
-      return;
-    }
+    // if (!ingestAutoStart) {
+    //   setRemoteMediaStream(null);
+    //   return;
+    // }
     if (!localMediaStream) {
       return;
     }
+    console.log("setting remote media stream", localMediaStream);
+    setIngestLive(true);
     setRemoteMediaStream(localMediaStream);
-  }, [localMediaStream, ingestStarting, ingestAutoStart]);
+  }, [localMediaStream, setIngestLive, setRemoteMediaStream]);
 
   useEffect(() => {
     if (!videoElement) {

package/src/components/ui/dialog.tsx

@@ -477,22 +477,30 @@ function createStyles(theme: any) {
 
     // Size styles
     smContent: {
+      width: 400,
       minWidth: 300,
+      maxWidth: 500,
       minHeight: 200,
     },
 
     mdContent: {
+      width: 500,
       minWidth: 400,
+      maxWidth: 600,
       minHeight: 300,
     },
 
     lgContent: {
+      width: 600,
       minWidth: 500,
+      maxWidth: 800,
       minHeight: 400,
     },
 
     xlContent: {
+      width: 800,
       minWidth: 600,
+      maxWidth: 1000,
       minHeight: 500,
     },