@streamplace/components 0.7.2 → 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

@@ -2,5 +2,7 @@ export * from "./countdown";
 export * from "./input";
 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/streamer-loading-overlay.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from "react-native-reanimated";
+import { pt } from "../../../lib/theme/atoms";
+
+type LoadingOverlayProps = {
+  visible: boolean;
+  width: number;
+  height: number;
+  subtitle?: string;
+  messages?: string[];
+  interval?: number; // in milliseconds
+};
+
+const defaultMessages = [
+  "Creating the stream",
+  "Uploading thumbnails",
+  "Getting things ready",
+  "Doing some magic",
+  "Preparing something special",
+  "Reticulating splines",
+  "Making it nice",
+  "Flipping some switches",
+  "Adding good vibes",
+  "Almost there",
+  "Summoning your Persona",
+  "Awakening our true selves",
+  "Fusion in progress",
+  "Equipping the right materia",
+];
+
+export function LoadingOverlay({
+  visible,
+  width,
+  height,
+  subtitle,
+  messages = defaultMessages,
+  interval = 3000,
+}: LoadingOverlayProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [shouldRender, setShouldRender] = useState(visible);
+
+  // Animation values
+  const translateY = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  const wholeOpacity = useSharedValue(0);
+
+  // Handle fade-in and fade-out animations
+  useEffect(() => {
+    if (visible) {
+      setShouldRender(true); // Ensure the component is mounted
+      wholeOpacity.value = withTiming(1, { duration: 500 }); // Fade in
+    } else {
+      wholeOpacity.value = withTiming(0, { duration: 500 }, () => {
+        // Unmount after fade-out
+        runOnJS(setShouldRender)(false);
+      });
+    }
+  }, [visible]);
+
+  // Cycle messages on a timer
+  useEffect(() => {
+    if (!visible) {
+      setCurrentIndex(0);
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % messages.length);
+    }, interval);
+
+    return () => clearTimeout(timeout);
+  }, [visible, currentIndex, interval, messages.length]);
+
+  // Trigger animation on each message change
+  useEffect(() => {
+    if (!visible) return;
+
+    const fadeDuration = Math.min(interval / 2, 250); // Simplified fade duration
+
+    // Reset animation values
+    translateY.value = 20;
+    opacity.value = 0;
+
+    // Sequential fade-in and fade-out
+    translateY.value = withTiming(0, { duration: fadeDuration });
+    opacity.value = withTiming(1, { duration: fadeDuration }, () => {
+      // add a delay for interval - (fadeDuration*2)
+
+      translateY.value = withDelay(
+        interval - fadeDuration * 2,
+        withTiming(-10, { duration: fadeDuration }),
+      );
+      opacity.value = withDelay(
+        interval - fadeDuration * 2,
+        withTiming(0, { duration: fadeDuration }),
+      );
+    });
+  }, [currentIndex, visible]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value,
+    };
+  });
+
+  const wholeAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: wholeOpacity.value,
+  }));
+
+  if (!shouldRender) 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,
+        },
+        wholeAnimatedStyle,
+      ]}
+    >
+      <Animated.Text
+        style={[
+          {
+            color: "white",
+            fontSize: 24,
+            fontWeight: "bold",
+          },
+          animatedStyle,
+        ]}
+      >
+        {messages[currentIndex]}
+      </Animated.Text>
+      <Animated.Text style={[pt[5], { color: "#a0a0a0" }]}>
+        {subtitle}
+      </Animated.Text>
+    </Animated.View>
+  );
+}

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);
           }
         }