@streamplace/components 0.9.7 → 0.9.10

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/streamer-context-menu.tsx

@@ -1,3 +1,139 @@
-export function StreamContextMenu() {
-  return <></>;
+import { ChevronRight, Cog } from "lucide-react-native";
+import { useEffect, useState } from "react";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+import { useLivestreamInfo, zero } from "../../..";
+import { usePlayerStore } from "../../../player-store";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+  Text,
+  useTheme,
+} from "../../ui";
+
+export function StreamContextMenu({
+  dropdownPortalContainer,
+}: {
+  dropdownPortalContainer?: string;
+}) {
+  const th = useTheme();
+  const debugInfo = usePlayerStore((x) => x.showDebugInfo);
+  const setShowDebugInfo = usePlayerStore((x) => x.setShowDebugInfo);
+  const { toggleStopStream } = useLivestreamInfo();
+  const ingest = usePlayerStore((x) => x.ingestConnectionState);
+  const isLive = ingest !== null && ingest !== "new";
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasShownTooltip, setHasShownTooltip] = useState(false);
+
+  const tooltipOpacity = useSharedValue(0);
+  const tooltipTranslateX = useSharedValue(20);
+
+  useEffect(() => {
+    if (isLive && !hasShownTooltip) {
+      tooltipOpacity.value = withDelay(
+        500,
+        withSequence(
+          withTiming(1, { duration: 300 }),
+          withDelay(10000, withTiming(0, { duration: 300 })),
+        ),
+      );
+      tooltipTranslateX.value = withDelay(
+        500,
+        withSequence(
+          withTiming(0, { duration: 300 }),
+          withDelay(10000, withTiming(20, { duration: 300 })),
+        ),
+      );
+      setHasShownTooltip(true);
+    }
+  }, [isLive, hasShownTooltip]);
+
+  const iconRotate = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotateZ: withTiming(isOpen ? "240deg" : "0deg", {
+            duration: 650,
+            easing: Easing.out(Easing.ease),
+          }),
+        },
+      ],
+    };
+  });
+
+  const tooltipStyle = useAnimatedStyle(() => {
+    return {
+      opacity: tooltipOpacity.value,
+      transform: [{ translateX: tooltipTranslateX.value }],
+    };
+  });
+
+  return (
+    <DropdownMenu onOpenChange={setIsOpen} key={dropdownPortalContainer}>
+      <DropdownMenuTrigger>
+        <Animated.View style={[iconRotate]}>
+          <Cog color={th.theme.colors.foreground} />
+        </Animated.View>
+        <Animated.View
+          style={[
+            tooltipStyle,
+            {
+              position: "absolute",
+              right: 30,
+              top: 0,
+              backgroundColor: "rgba(64,64,64,0.95)",
+              borderRadius: 8,
+              paddingHorizontal: 8,
+              paddingRight: 12,
+              paddingVertical: 4,
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 6,
+              zIndex: 9999999,
+              pointerEvents: "box-none",
+              width: 120,
+            },
+          ]}
+        >
+          <Text size="sm" color="white">
+            End stream here
+          </Text>
+          <ChevronRight color="white" size={16} style={[zero.mr[4]]} />
+        </Animated.View>
+      </DropdownMenuTrigger>
+      <ResponsiveDropdownMenuContent side="top" align="end">
+        {isLive && (
+          <DropdownMenuGroup title="Stream">
+            <DropdownMenuItem
+              closeOnPress={true}
+              onPress={() => {
+                toggleStopStream();
+              }}
+            >
+              <Text color="destructive">Stop Stream</Text>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        )}
+        <DropdownMenuGroup title="Advanced">
+          <DropdownMenuCheckboxItem
+            checked={debugInfo}
+            onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+          >
+            <Text>Show Debug Info</Text>
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
 }

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

package/src/components/ui/textarea.tsx

@@ -40,6 +40,8 @@ const Textarea = React.forwardRef<TextInput, TextInputProps>(
           { borderRadius: 10 },
           style,
         ]}
+        autoComplete={props.autoComplete || "off"}
+        textContentType={props.textContentType || "none"}
         multiline={multiline}
         numberOfLines={numberOfLines}
         textAlignVertical="top"

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 // barrel file :)
+export * from "./useAQState";
 export * from "./useAvatars";
 export * from "./useCameraToggle";
 export * from "./useDocumentTitle";

package/src/hooks/useAQState.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import storage from "../storage";
+
+export function useAQState<T>(
+  key: string,
+  defaultValue: T,
+): [T, (value: T) => void] {
+  const [state, setState] = useState<T>(defaultValue);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const loadFromStorage = async () => {
+      try {
+        const stored = await storage.getItem(key);
+        if (stored !== null) {
+          setState(JSON.parse(stored));
+        }
+      } catch (error) {
+        console.error(`Failed to load ${key} from storage:`, error);
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+    loadFromStorage();
+  }, [key]);
+
+  const setStoredState = (value: T) => {
+    setState(value);
+    if (isLoaded) {
+      storage.setItem(key, JSON.stringify(value)).catch((error) => {
+        console.error(`Failed to save ${key} to storage:`, error);
+      });
+    }
+  };
+
+  return [state, setStoredState];
+}