@streamplace/components 0.6.37 → 0.7.0

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useFrameCallback,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+type CountdownOverlayProps = {
+  visible: boolean;
+  width: number;
+  height: number;
+  startFrom?: number;
+  onDone?: () => void;
+};
+
+export function CountdownOverlay({
+  visible,
+  width,
+  height,
+  startFrom = 3,
+  onDone,
+}: CountdownOverlayProps) {
+  const [countdown, setCountdown] = useState(startFrom);
+
+  const startTimestamp = useSharedValue<number | null>(null);
+  const done = useSharedValue(false);
+
+  // Animation values
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+
+  const updateCountdown = (value: number) => {
+    setCountdown(value);
+  };
+
+  const handleDone = () => {
+    if (onDone) onDone();
+  };
+
+  // Accurate countdown using useFrameCallback
+  useFrameCallback(({ timestamp }) => {
+    if (!visible) return;
+
+    // Set start timestamp on first frame
+    if (startTimestamp.value === null) {
+      startTimestamp.value = timestamp;
+      return;
+    }
+
+    const elapsed = (timestamp - startTimestamp.value) / 1000; // Convert to seconds
+    const remaining = Math.max(0, startFrom - Math.floor(elapsed));
+
+    // Use runOnJS to call JavaScript functions from worklet
+    runOnJS(updateCountdown)(remaining);
+
+    if (remaining === 0 && !done.value) {
+      done.value = true;
+      runOnJS(handleDone)();
+    }
+  });
+
+  useEffect(() => {
+    if (visible) {
+      startTimestamp.value = null; // Will be set on first frame
+      setCountdown(startFrom);
+      done.value = false;
+    } else {
+      setCountdown(startFrom);
+    }
+  }, [visible, startFrom]);
+
+  // Animate scale and opacity on countdown change
+  useEffect(() => {
+    if (visible && countdown > 0) {
+      scale.value = 1;
+      opacity.value = 1;
+      scale.value = withTiming(1.5, { duration: 1000 });
+      opacity.value = withTiming(0, { duration: 1000 });
+    }
+  }, [countdown, visible, scale, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  if (!visible || countdown === 0) return null;
+
+  return (
+    <Animated.View
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width,
+        height,
+        backgroundColor: "rgba(0,0,0,0.7)",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+      }}
+    >
+      <Animated.Text
+        style={[
+          {
+            color: "white",
+            fontSize: 120,
+            fontWeight: "bold",
+          },
+          animatedStyle,
+        ]}
+      >
+        {typeof countdown === "number" ? countdown : ""}
+      </Animated.Text>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,5 @@
+export * from "./countdown";
+export * from "./input";
+export * from "./metrics";
+export * from "./streamer-context-menu";
+export * from "./viewer-context-menu";

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

@@ -0,0 +1,85 @@
+import { Keyboard, Pressable } from "react-native";
+import { useKeyboardSlide } from "../../../hooks";
+import * as atoms from "../../../lib/theme/atoms";
+import { Input, Text, View } from "../../ui";
+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;
+};
+
+export function InputPanel({
+  title,
+  setTitle,
+  ingestStarting,
+  toggleGoLive,
+}: InputPanelProps) {
+  const { slideKeyboard } = useKeyboardSlide();
+  return (
+    <View
+      style={[
+        layout.position.absolute,
+        h.percent[30],
+        position.bottom[0],
+        w.percent[100],
+        layout.flex.center,
+        { transform: [{ translateY: slideKeyboard }] },
+      ]}
+    >
+      <View
+        style={[
+          layout.flex.column,
+          gap.all[2],
+          sizes.maxWidth[80],
+          { padding: 10 },
+        ]}
+      >
+        <View backgroundColor="rgba(64,64,64,0.8)" borderRadius={12}>
+          <Input
+            value={title}
+            onChange={setTitle}
+            placeholder="Enter stream title"
+            onEndEditing={Keyboard.dismiss}
+          />
+        </View>
+        {ingestStarting ? (
+          <Text>Starting your stream...</Text>
+        ) : (
+          <View style={[layout.flex.center]}>
+            <Pressable
+              onPress={toggleGoLive}
+              style={[
+                px[4],
+                py[2],
+                layout.flex.row,
+                layout.flex.center,
+                gap.all[1],
+                {
+                  backgroundColor: "rgba(64,64,64, 0.8)",
+                  borderRadius: 12,
+                },
+              ]}
+            >
+              <View
+                style={[
+                  p[2],
+                  {
+                    backgroundColor: "rgba(256,0,0, 0.8)",
+                    borderRadius: 12,
+                  },
+                ]}
+              />
+              <Text center>Go Live</Text>
+            </Pressable>
+            <Text color="muted" size="xs" style={[mt[2]]}>
+              We'll announce that you're live on Bluesky.
+            </Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { AlertCircle, CircleCheck, CircleX } from "lucide-react-native";
+import { useSegmentTiming } from "../../../hooks/useSegmentTiming";
+import * as atoms from "../../../lib/theme/atoms";
+import { Text, View } from "../../ui";
+
+type MetricsPanelProps = {
+  showMetrics: boolean;
+};
+
+export function MetricsPanel({ showMetrics }: MetricsPanelProps) {
+  const { connectionQuality, segmentDeltas, mean, range } = useSegmentTiming();
+
+  let icon = <CircleX color="#d44" />;
+  let color = "#d44";
+  if (connectionQuality === "good") {
+    icon = <CircleCheck color="#4d4" />;
+    color = "#4d4";
+  } else if (connectionQuality === "degraded") {
+    icon = <AlertCircle color="#aa4" />;
+    color = "#aa4";
+  } else {
+    icon = <CircleX color="#d44" />;
+    color = "#d44";
+  }
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        gap: 8,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          padding: 10,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          borderRadius: 8,
+          gap: 4,
+        }}
+      >
+        {icon}
+        <Text
+          style={[
+            atoms.pt[0],
+            {
+              color,
+            },
+          ]}
+        >
+          {connectionQuality.toUpperCase()}
+        </Text>
+      </View>
+      {showMetrics && (
+        <View>
+          <Text>
+            last Δ:{" "}
+            {segmentDeltas.length > 0
+              ? segmentDeltas[segmentDeltas.length - 1]
+              : "—"}
+          </Text>
+          <Text>mean: {mean}</Text>
+          <Text>range: {range}</Text>
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,3 @@
+export function StreamContextMenu() {
+  return <></>;
+}

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

@@ -0,0 +1,70 @@
+import { Menu } from "lucide-react-native";
+import { colors } from "../../../lib/theme";
+import { useLivestreamStore } from "../../../livestream-store";
+import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuGroup,
+  DropdownMenuInfo,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+  Text,
+} from "../../ui";
+
+export function ContextMenu() {
+  const quality = usePlayerStore((x) => x.selectedRendition);
+  const setQuality = usePlayerStore((x) => x.setSelectedRendition);
+  const qualities = useLivestreamStore((x) => x.renditions);
+
+  const protocol = usePlayerStore((x) => x.protocol);
+  const setProtocol = usePlayerStore((x) => x.setProtocol);
+
+  const debugInfo = usePlayerStore((x) => x.showDebugInfo);
+  const setShowDebugInfo = usePlayerStore((x) => x.setShowDebugInfo);
+
+  const lowLatency = protocol === "webrtc";
+  const setLowLatency = (value: boolean) => {
+    setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu size={32} color={colors.gray[200]} />
+      </DropdownMenuTrigger>
+      <ResponsiveDropdownMenuContent>
+        <DropdownMenuGroup title="Resolution">
+          <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
+            <DropdownMenuRadioItem value="source">
+              <Text>Source</Text>
+            </DropdownMenuRadioItem>
+            {qualities.map((r) => (
+              <DropdownMenuRadioItem value={r.name}>
+                <Text>{r.name}</Text>
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+        <DropdownMenuGroup title="Advanced">
+          <DropdownMenuCheckboxItem
+            checked={lowLatency}
+            onCheckedChange={() => setLowLatency(!lowLatency)}
+          >
+            <Text>Low Latency</Text>
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuInfo description="Lowers the delay between video and chat messages." />
+          <DropdownMenuCheckboxItem
+            checked={debugInfo}
+            onCheckedChange={() => setShowDebugInfo(!debugInfo)}
+          >
+            <Text>Segment Debug Info</Text>
+          </DropdownMenuCheckboxItem>
+        </DropdownMenuGroup>
+        <DropdownMenuInfo description="Lowers the delay between video and chat messages." />
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,282 @@
+import { useEffect, useRef, useState } from "react";
+import { usePlayerStore, useStreamKey } from "../..";
+import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
+
+export default function useWebRTC(
+  endpoint: string,
+): [MediaStream | null, boolean] {
+  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
+  const [stuck, setStuck] = useState<boolean>(false);
+
+  const lastChange = useRef<number>(0);
+
+  useEffect(() => {
+    const peerConnection = new RTCPeerConnection({
+      bundlePolicy: "max-bundle",
+    });
+    peerConnection.addTransceiver("video", {
+      direction: "recvonly",
+    });
+    peerConnection.addTransceiver("audio", {
+      direction: "recvonly",
+    });
+    peerConnection.addEventListener("track", (event) => {
+      const track = event.track;
+      if (!track) {
+        return;
+      }
+      setMediaStream(event.streams[0]);
+    });
+    peerConnection.addEventListener("connectionstatechange", () => {
+      console.log("connection state change", peerConnection.connectionState);
+      if (peerConnection.connectionState === "closed") {
+        setStuck(true);
+      }
+      if (peerConnection.connectionState !== "connected") {
+        return;
+      }
+    });
+    peerConnection.addEventListener("negotiationneeded", () => {
+      negotiateConnectionWithClientOffer(peerConnection, endpoint);
+    });
+
+    let lastFramesReceived = 0;
+    let lastAudioFramesReceived = 0;
+
+    const handle = setInterval(async () => {
+      const stats = await peerConnection.getStats();
+      stats.forEach((stat) => {
+        const mediaType = stat.mediaType /* web */ ?? stat.kind; /* native */
+        if (stat.type === "inbound-rtp" && mediaType === "audio") {
+          const audioFramesReceived = stat.lastPacketReceivedTimestamp;
+          if (lastAudioFramesReceived !== audioFramesReceived) {
+            lastAudioFramesReceived = audioFramesReceived;
+            lastChange.current = Date.now();
+            setStuck(false);
+          }
+        }
+        if (stat.type === "inbound-rtp" && mediaType === "video") {
+          const framesReceived = stat.framesReceived;
+          if (lastFramesReceived !== framesReceived) {
+            lastFramesReceived = framesReceived;
+            lastChange.current = Date.now();
+            setStuck(false);
+          }
+        }
+      });
+      if (Date.now() - lastChange.current > 2000) {
+        setStuck(true);
+      }
+    }, 200);
+
+    return () => {
+      clearInterval(handle);
+      peerConnection.close();
+    };
+  }, [endpoint]);
+  return [mediaStream, stuck];
+}
+
+/**
+ * Performs the actual SDP exchange.
+ *
+ * 1. Constructs the client's SDP offer
+ * 2. Sends the SDP offer to the server,
+ * 3. Awaits the server's offer.
+ *
+ * SDP describes what kind of media we can send and how the server and client communicate.
+ *
+ * https://developer.mozilla.org/en-US/docs/Glossary/SDP
+ * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#name-protocol-operation
+ */
+export async function negotiateConnectionWithClientOffer(
+  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,
+  });
+  /** 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 postSDPOffer(`${endpoint}`, ofr.sdp, bearerToken);
+      if (response.status === 201) {
+        let answerSDP = await response.text();
+        if ((peerConnection.connectionState as string) === "closed") {
+          return;
+        }
+        await peerConnection.setRemoteDescription(
+          new RTCSessionDescription({ type: "answer", sdp: answerSDP }),
+        );
+        return response.headers.get("Location");
+      } else if (response.status === 405) {
+        console.log(
+          "Remember to update the URL passed into the WHIP or WHEP client",
+        );
+      } else {
+        const errorMessage = await response.text();
+        console.error(errorMessage);
+      }
+    } 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));
+  }
+}
+
+async function postSDPOffer(
+  endpoint: string,
+  data: string,
+  bearerToken?: string,
+) {
+  return await fetch(endpoint, {
+    method: "POST",
+    mode: "cors",
+    headers: {
+      "content-type": "application/sdp",
+      ...(bearerToken ? { Authorization: `Bearer ${bearerToken}` } : {}),
+    },
+    body: data,
+  });
+}
+
+/**
+ * Receives an RTCPeerConnection and waits until
+ * the connection is initialized or a timeout passes.
+ *
+ * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#section-4.1
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceGatheringState
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event
+ */
+async function waitToCompleteICEGathering(peerConnection: RTCPeerConnection) {
+  return new Promise<RTCSessionDescription | null>((resolve) => {
+    /** Wait at most 1 second for ICE gathering. */
+    setTimeout(function () {
+      if (peerConnection.connectionState === "closed") {
+        return;
+      }
+      resolve(peerConnection.localDescription);
+    }, 1000);
+    peerConnection.addEventListener("icegatheringstatechange", (ev) => {
+      if (peerConnection.iceGatheringState === "complete") {
+        resolve(peerConnection.localDescription);
+      }
+    });
+  });
+}
+
+export function useWebRTCIngest({
+  endpoint,
+}: {
+  endpoint: string;
+}): [MediaStream | null, (mediaStream: MediaStream | null) => void] {
+  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
+  const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
+  const setIngestConnectionState = usePlayerStore(
+    (x) => x.setIngestConnectionState,
+  );
+  const storedKey = useStreamKey();
+  const [peerConnection, setPeerConnection] =
+    useState<RTCPeerConnection | null>(null);
+
+  const videoTransceiver = useRef<RTCRtpTransceiver | null>(null);
+  const audioTransceiver = useRef<RTCRtpTransceiver | null>(null);
+
+  const [retryTime, setRetryTime] = useState<number>(0);
+  const ingestLive = usePlayerStore((x) => x.ingestLive);
+
+  // "Outer loop": when we need a new peer connection, this sets that up
+  useEffect(() => {
+    if (!storedKey) {
+      return;
+    }
+    if (!ingestLive) {
+      return;
+    }
+    const peerConnection = new RTCPeerConnection({
+      bundlePolicy: "max-bundle",
+    });
+
+    videoTransceiver.current = peerConnection.addTransceiver("video", {
+      direction: "sendonly",
+    });
+    audioTransceiver.current = peerConnection.addTransceiver("audio", {
+      direction: "sendonly",
+    });
+
+    peerConnection.addEventListener("connectionstatechange", (ev) => {
+      setIngestConnectionState(peerConnection.connectionState);
+      console.log("connection state change", peerConnection.connectionState);
+      if (peerConnection.connectionState === "failed") {
+        setRetryTime(Date.now());
+      }
+    });
+    peerConnection.addEventListener("negotiationneeded", (ev) => {
+      negotiateConnectionWithClientOffer(
+        peerConnection,
+        endpoint,
+        storedKey.streamKey?.privateKey,
+      );
+    });
+
+    peerConnection.addEventListener("track", (ev) => {
+      console.log(ev);
+    });
+
+    setPeerConnection(peerConnection);
+
+    return () => {
+      peerConnection.close();
+    };
+  }, [endpoint, storedKey.streamKey?.privateKey, retryTime, ingestLive]);
+
+  // "Inner loop": when our tracks change, we update the transceivers
+  useEffect(() => {
+    if (!mediaStream) {
+      return;
+    }
+    if (!peerConnection) {
+      return;
+    }
+    if (!ingestLive) {
+      return;
+    }
+    for (const track of mediaStream.getTracks()) {
+      console.log(
+        "adding track",
+        track.kind,
+        track.label,
+        track.enabled,
+        track.readyState,
+      );
+      if (track.kind === "video") {
+        videoTransceiver.current?.sender?.replaceTrack(track);
+      } else if (track.kind === "audio") {
+        audioTransceiver.current?.sender?.replaceTrack(track);
+      }
+    }
+  }, [peerConnection, mediaStream, ingestLive]);
+
+  return [mediaStream, setMediaStream];
+}