@streamplace/components 0.7.3 → 0.7.7

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

@@ -4,13 +4,18 @@ import { useEffect, useRef, useState } from "react";
 import { BackHandler, Dimensions, StyleSheet, View } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { PlayerProtocol, useLivestreamStore, usePlayerStore } from "../..";
+import {
+  PlayerProtocol,
+  useLivestreamStore,
+  usePlayerStore,
+  VideoRetry,
+} from "../..";
 import Video from "./video.native";
 
 // Standard 16:9 video aspect ratio
 const VIDEO_ASPECT_RATIO = 16 / 9;
 
-export function Fullscreen(props: { src: string }) {
+export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
   const ref = useRef<VideoView>(null);
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
@@ -157,6 +162,7 @@ export function Fullscreen(props: { src: string }) {
           ]}
         >
           <Video />
+          {props.children}
         </View>
       </View>
     );
@@ -165,7 +171,10 @@ export function Fullscreen(props: { src: string }) {
   // Normal non-fullscreen mode
   return (
     <>
-      <Video />
+      <VideoRetry>
+        <Video />
+      </VideoRetry>
+      {props.children}
     </>
   );
 }

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

@@ -3,8 +3,9 @@ import { View as RNView } from "react-native";
 import { getFirstPlayerID, usePlayerStore } from "../..";
 import { View } from "../../components/ui";
 import Video from "./video";
+import VideoRetry from "./video-retry";
 
-export function Fullscreen(props: { src: string }) {
+export function Fullscreen(props: { src: string; children?: React.ReactNode }) {
   const playerId = getFirstPlayerID();
   const protocol = usePlayerStore((x) => x.protocol, playerId);
   const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
@@ -72,8 +73,14 @@ export function Fullscreen(props: { src: string }) {
   }, []);
 
   return (
-    <View ref={divRef}>
-      <Video />
+    <View
+      ref={divRef}
+      style={{ width: "100%", height: "100%", overflow: "hidden" }}
+    >
+      <VideoRetry>
+        <Video />
+      </VideoRetry>
+      {props.children}
     </View>
   );
 }

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

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-import { flex, layout, w, zIndex } from "../../lib/theme/atoms";
-import { useSegment } from "../../livestream-store";
+import { flex, h, layout, w, zIndex } from "../../lib/theme/atoms";
 import {
   PlayerStatus,
   PlayerStatusTracker,
@@ -10,19 +9,29 @@ import { useStreamplaceStore } from "../../streamplace-store";
 import { Text, View } from "../ui";
 import { Fullscreen } from "./fullscreen";
 import { PlayerProps } from "./props";
+import ReportModal from "./ui/report-modal";
 
 const OFFLINE_THRESHOLD = 10000;
 
 export * as PlayerUI from "./ui";
 
-export function Player(props: Partial<PlayerProps>) {
-  const playing = usePlayerStore((x) => x.status === PlayerStatus.PLAYING);
-
-  const setOffline = usePlayerStore((x) => x.setOffline);
+export function Player(
+  props: Partial<PlayerProps> & { children?: React.ReactNode },
+) {
   const setIngest = usePlayerStore((x) => x.setIngestConnectionState);
 
   const clearControlsTimeout = usePlayerStore((x) => x.clearControlsTimeout);
 
+  const setReportingURL = usePlayerStore((x) => x.setReportingURL);
+
+  const reportModalOpen = usePlayerStore((x) => x.reportModalOpen);
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const reportSubject = usePlayerStore((x) => x.reportSubject);
+
+  useEffect(() => {
+    setReportingURL(props.reportingURL ?? null);
+  }, [props.reportingURL]);
+
   // Will call back every few seconds to send health updates
   usePlayerStatus();
 
@@ -44,40 +53,23 @@ export function Player(props: Partial<PlayerProps>) {
     };
   }, []);
 
-  const segment = useSegment();
-  const [lastCheck, setLastCheck] = useState(0);
-
-  useEffect(() => {
-    if (playing) {
-      setOffline(false);
-      return;
-    }
-    if (!segment) {
-      setOffline(false);
-      return;
-    }
-    const startTime = Date.parse(segment.startTime);
-    if (!startTime) {
-      console.error("startTime is not a number", segment.startTime);
-      return;
-    }
-    const timeSinceStart = Date.now() - startTime;
-    if (timeSinceStart > OFFLINE_THRESHOLD) {
-      setOffline(true);
-      return;
-    }
-    const handle = setTimeout(() => {
-      setLastCheck(Date.now());
-    }, 1000);
-    return () => clearTimeout(handle);
-  }, [segment, playing, lastCheck]);
-
   return (
     <>
       <View
-        style={[zIndex[0], flex.values[1], w.percent[100], layout.flex.center]}
+        style={[
+          zIndex[0],
+          w.percent[100],
+          h.percent[100],
+          flex.shrink[1],
+          layout.flex.center,
+        ]}
       >
-        <Fullscreen src={props.src}></Fullscreen>
+        <ReportModal
+          open={reportModalOpen}
+          onOpenChange={setReportModalOpen}
+          subject={reportSubject!}
+        />
+        <Fullscreen src={props.src}>{props.children}</Fullscreen>
       </View>
     </>
   );

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

@@ -8,4 +8,5 @@ export type PlayerProps = {
   setFullscreen: (isFullscreen: boolean) => void;
   ingest?: boolean;
   embedded?: boolean;
+  reportingURL?: string;
 };

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

@@ -1,7 +1,8 @@
 export * from "./countdown";
 export * from "./input";
-export * from "./loading";
 export * from "./metrics";
 export * from "./streamer-context-menu";
+export * from "./streamer-loading-overlay";
 export * from "./viewer-context-menu";
+export * from "./viewer-loading-overlay";
 export * from "./viewers";

package/src/components/mobile-player/ui/report-modal.tsx

@@ -0,0 +1,195 @@
+import {
+  ComAtprotoModerationCreateReport,
+  ComAtprotoModerationDefs,
+} from "@atproto/api";
+import { CheckCircle, Circle, Loader2 } from "lucide-react-native";
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { zero } from "../../..";
+import { useSubmitReport } from "../../../livestream-store";
+import {
+  Button,
+  Dialog,
+  DialogFooter,
+  ModalContent,
+  Text,
+  Textarea,
+} from "../../ui";
+
+// AT Protocol moderation reason types with proper labels
+const REPORT_REASONS = [
+  {
+    value: ComAtprotoModerationDefs.REASONSPAM,
+    label: "Spam",
+    description: "Excessive unwanted promotion, replies, mentions",
+  },
+  {
+    value: ComAtprotoModerationDefs.REASONVIOLATION,
+    label: "Rule Violation",
+    description: "Direct, blatant violation of laws or terms of service",
+  },
+  {
+    value: ComAtprotoModerationDefs.REASONMISLEADING,
+    label: "Misleading Content",
+    description: "Misleading identity, affiliation, or content",
+  },
+  {
+    value: ComAtprotoModerationDefs.REASONSEXUAL,
+    label: "Sexual Content",
+    description: "Unwanted or mislabeled sexual content",
+  },
+  {
+    value: ComAtprotoModerationDefs.REASONRUDE,
+    label: "Harassment",
+    description: "Rude, harassing, explicit, or otherwise unwelcoming behavior",
+  },
+  {
+    value: ComAtprotoModerationDefs.REASONOTHER,
+    label: "Other",
+    description: "Reports not falling under another report category",
+  },
+];
+
+interface ReportModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit?: (reason: string, additionalComments?: string) => void;
+  subject: ComAtprotoModerationCreateReport.InputSchema["subject"];
+  title?: string;
+  description?: string;
+}
+
+export const ReportModal: React.FC<ReportModalProps> = ({
+  open,
+  onOpenChange,
+  onSubmit,
+  subject,
+  title = "Report",
+  description = "Why are you submitting this report?",
+}) => {
+  const [selectedReason, setSelectedReason] = useState<string | null>(null);
+  const [additionalComments, setAdditionalComments] = useState<string>("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const submitReport = useSubmitReport();
+
+  const handleCancel = () => {
+    setSelectedReason(null);
+    setAdditionalComments("");
+    setSubmitError(null);
+    onOpenChange(false);
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedReason) return;
+
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      submitReport(
+        subject,
+        selectedReason,
+        additionalComments.trim() || undefined,
+      );
+
+      // Reset form and close modal on success
+      setSelectedReason(null);
+      setAdditionalComments("");
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Failed to submit report:", error);
+      setSubmitError("Failed to submit report. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={description}
+      showCloseButton
+      variant="default"
+      size="md"
+      dismissible={false}
+      position="center"
+    >
+      <ModalContent style={[zero.pb[2]]}>
+        {REPORT_REASONS.map((reason) => (
+          <TouchableOpacity
+            key={reason.value}
+            onPress={() => setSelectedReason(reason.value)}
+            style={[
+              zero.layout.flex.row,
+              zero.gap.all[2],
+              zero.py[3],
+              zero.px[3],
+              zero.borderRadius[8],
+              zero.layout.flex.alignCenter,
+              selectedReason === reason.value && {
+                backgroundColor: "rgba(0, 122, 255, 0.1)",
+              },
+            ]}
+          >
+            <View>
+              {selectedReason === reason.value ? <CheckCircle /> : <Circle />}
+            </View>
+            <View
+              style={[zero.layout.flex.column, zero.gap.all[1], zero.flex[1]]}
+            >
+              <Text style={[{ fontWeight: "600" }]}>{reason.label}</Text>
+              <Text style={[{ fontSize: 14, color: "rgba(255,255,255,0.7)" }]}>
+                {reason.description}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+
+        <View style={[zero.pb[4], zero.mt[4], zero.px[2]]}>
+          <Text style={[zero.mb[2]]}>Additional Comments (optional)</Text>
+          <Textarea
+            maxLength={500}
+            numberOfLines={3}
+            value={additionalComments}
+            onChangeText={setAdditionalComments}
+            placeholder="Provide additional context for this report..."
+          />
+          {submitError && (
+            <Text style={[zero.mt[2], { color: "red", fontSize: 14 }]}>
+              {submitError}
+            </Text>
+          )}
+        </View>
+      </ModalContent>
+      <DialogFooter>
+        <Button
+          variant="secondary"
+          onPress={handleCancel}
+          disabled={isSubmitting}
+        >
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          variant="primary"
+          onPress={handleSubmit}
+          disabled={!selectedReason || isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <Loader2 style={[{ marginRight: 8 }]} />
+              <Text>Submitting...</Text>
+            </>
+          ) : (
+            <Text>Submit</Text>
+          )}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default ReportModal;

package/src/components/mobile-player/ui/{loading.tsx → streamer-loading-overlay.tsx}

@@ -18,7 +18,7 @@ type LoadingOverlayProps = {
 };
 
 const defaultMessages = [
-  "Creating your stream",
+  "Creating the stream",
   "Uploading thumbnails",
   "Getting things ready",
   "Doing some magic",

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

@@ -1,4 +1,5 @@
-import { Menu } from "lucide-react-native";
+import { useRootContext } from "@rn-primitives/dropdown-menu";
+import { Settings } from "lucide-react-native";
 import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
@@ -7,6 +8,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuGroup,
   DropdownMenuInfo,
+  DropdownMenuItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
@@ -33,9 +35,9 @@ export function ContextMenu() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <Menu size={32} color={colors.gray[200]} />
+        <Settings color={colors.gray[200]} />
       </DropdownMenuTrigger>
-      <ResponsiveDropdownMenuContent>
+      <ResponsiveDropdownMenuContent side="top" align="end">
         <DropdownMenuGroup title="Resolution">
           <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
             <DropdownMenuRadioItem value="source">
@@ -65,7 +67,33 @@ export function ContextMenu() {
             <Text>Show Debug Info</Text>
           </DropdownMenuCheckboxItem>
         </DropdownMenuGroup>
+        <DropdownMenuGroup title="Report">
+          <ReportButton />
+        </DropdownMenuGroup>
       </ResponsiveDropdownMenuContent>
     </DropdownMenu>
   );
 }
+
+export function ReportButton() {
+  const livestream = useLivestreamStore((x) => x.livestream);
+  const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
+  const setReportSubject = usePlayerStore((x) => x.setReportSubject);
+  const { onOpenChange } = useRootContext();
+  return (
+    <DropdownMenuItem
+      onPress={() => {
+        if (!livestream) return;
+        onOpenChange?.(false);
+        setReportModalOpen(true);
+        setReportSubject({
+          $type: "com.atproto.repo.strongRef",
+          uri: livestream.uri,
+          cid: livestream.cid,
+        });
+      }}
+    >
+      <Text>Report Livestream...</Text>
+    </DropdownMenuItem>
+  );
+}

package/src/components/mobile-player/ui/viewer-loading-overlay.tsx

@@ -0,0 +1,66 @@
+import { Play } from "lucide-react-native";
+import { useEffect } from "react";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import {
+  KeepAwake,
+  Loader,
+  PlayerStatus,
+  usePlayerStore,
+  useTheme,
+} from "../../..";
+
+export function ViewerLoadingOverlay() {
+  const status = usePlayerStore((x) => x.status);
+  const theme = useTheme();
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (status === PlayerStatus.PLAYING || status === PlayerStatus.SUSPEND) {
+      opacity.value = withTiming(0, { duration: 300 });
+    } else {
+      opacity.value = withTiming(1, { duration: 300 });
+    }
+  }, [status, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  if (status === PlayerStatus.PLAYING) {
+    return <KeepAwake />;
+  }
+
+  if (status === PlayerStatus.SUSPEND) {
+    return null; // No overlay when stopped
+  }
+
+  let spinner = <Loader size="large" />;
+  if (status === PlayerStatus.PAUSE) {
+    spinner = <Play size="$12" color={theme.styles.text.primary["color"]} />;
+  }
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          zIndex: 998,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0,0,0,0.3)",
+        },
+        animatedStyle,
+      ]}
+    >
+      {spinner}
+    </Animated.View>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { usePlayerStore, useStreamKey } from "../..";
+import { PlayerStatus, usePlayerStore, useStreamKey } from "../..";
 import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
 
 export default function useWebRTC(
@@ -7,6 +7,7 @@ export default function useWebRTC(
 ): [MediaStream | null, boolean] {
   const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
   const [stuck, setStuck] = useState<boolean>(false);
+  const setStatus = usePlayerStore((x) => x.setStatus);
 
   const lastChange = useRef<number>(0);
 
@@ -29,7 +30,12 @@ export default function useWebRTC(
     });
     peerConnection.addEventListener("connectionstatechange", () => {
       console.log("connection state change", peerConnection.connectionState);
-      if (peerConnection.connectionState === "closed") {
+      if (
+        peerConnection.connectionState === "closed" ||
+        peerConnection.connectionState === "failed" ||
+        peerConnection.connectionState === "disconnected"
+      ) {
+        console.log("setting stuck to true", peerConnection.connectionState);
         setStuck(true);
       }
       if (peerConnection.connectionState !== "connected") {
@@ -52,6 +58,7 @@ export default function useWebRTC(
           if (lastAudioFramesReceived !== audioFramesReceived) {
             lastAudioFramesReceived = audioFramesReceived;
             lastChange.current = Date.now();
+            setStatus(PlayerStatus.PLAYING);
             setStuck(false);
           }
         }
@@ -60,6 +67,7 @@ export default function useWebRTC(
           if (lastFramesReceived !== framesReceived) {
             lastFramesReceived = framesReceived;
             lastChange.current = Date.now();
+            setStatus(PlayerStatus.PLAYING);
             setStuck(false);
           }
         }

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

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef, useState } from "react";
+import { PlayerStatus, usePlayerStore } from "../..";
+
+export default function VideoRetry(props: { children: React.ReactNode }) {
+  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [retries, setRetries] = useState(0);
+  const playing = usePlayerStore((x) => x.status === PlayerStatus.PLAYING);
+
+  useEffect(() => {
+    if (!playing) {
+      const jitter = 500 + Math.random() * 1500;
+      retryTimeoutRef.current = setTimeout(() => {
+        console.log("Retrying video playback...");
+        setRetries((prevRetries) => prevRetries + 1);
+      }, jitter);
+    }
+
+    return () => {
+      if (retryTimeoutRef.current) {
+        console.log("Clearing retry timeout");
+        clearTimeout(retryTimeoutRef.current);
+        retryTimeoutRef.current = null;
+      }
+    };
+  }, [!playing]);
+
+  return <React.Fragment key={retries}>{props.children}</React.Fragment>;
+}

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

@@ -89,6 +89,14 @@ export function NativeVideo() {
   }, [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();
@@ -115,12 +123,14 @@ export function NativeVideo() {
     ).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 {
@@ -164,6 +174,7 @@ export function NativeWHEP() {
     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);
@@ -189,22 +200,25 @@ export function NativeWHEP() {
   const volume = usePlayerStore((x) => x.volume);
 
   useEffect(() => {
-    if (stuck) {
+    if (stuck && status === PlayerStatus.PLAYING) {
+      console.log("setting status to stalled", status);
       setStatus(PlayerStatus.STALLED);
-    } else {
+    }
+    if (!stuck && status === PlayerStatus.STALLED) {
+      console.log("setting status to playing", status);
       setStatus(PlayerStatus.PLAYING);
     }
-  }, [stuck, setStatus]);
+  }, [stuck, status]);
 
   const mediaStream = stream as unknown as MediaStream;
 
-  useEffect(() => {
-    if (!mediaStream) {
-      setStatus(PlayerStatus.WAITING);
-      return;
-    }
-    setStatus(PlayerStatus.PLAYING);
-  }, [mediaStream, setStatus]);
+  // useEffect(() => {
+  //   if (!mediaStream) {
+  //     setStatus(PlayerStatus.WAITING);
+  //     return;
+  //   }
+  //   setStatus(PlayerStatus.PLAYING);
+  // }, [mediaStream, setStatus]);
 
   useEffect(() => {
     if (!mediaStream) {