@streamplace/components 0.7.2 → 0.7.7

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) {

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

@@ -7,8 +7,9 @@ import {
   usePlayerStore,
   useStreamplaceStore,
 } from "../..";
-import { borderRadius, colors, mt, p } from "../../lib/theme/atoms";
+import { borderRadius, colors, mt } from "../../lib/theme/atoms";
 import { Text, View } from "../ui/index";
+import { Loader } from "../ui/loader";
 import { srcToUrl } from "./shared";
 import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
 import {
@@ -146,23 +147,55 @@ const VideoElement = forwardRef<
 
   const localVideoRef = props.videoRef ?? useRef<HTMLVideoElement | null>(null);
 
+  // setPipAction comes from Zustand store
+  useEffect(() => {
+    if (typeof x.setPipAction === "function") {
+      const fn = () => {
+        if (localVideoRef.current) {
+          try {
+            localVideoRef.current.requestPictureInPicture?.();
+          } catch (err) {
+            console.error("Error requesting Picture-in-Picture:", err);
+          }
+        } else {
+          console.log("No video ref available for PiP");
+        }
+      };
+      x.setPipAction(fn);
+    }
+    // Cleanup on unmount
+    return () => {
+      if (typeof x.setPipAction === "function") {
+        x.setPipAction(undefined);
+      }
+    };
+  }, []);
+
   const canPlayThrough = (e) => {
+    console.log("canPlayThrough called", {
+      firstAttempt,
+      videoRef: !!localVideoRef.current,
+    });
+    setStatus(PlayerStatus.PLAYING);
     event("canplaythrough")(e);
     if (firstAttempt && localVideoRef.current) {
       setFirstAttempt(false);
+      console.log("Attempting to play video");
       localVideoRef.current.play().catch((err) => {
+        console.log("error playing video", err.name);
         if (err.name === "NotAllowedError") {
           if (localVideoRef.current) {
+            console.log("Setting muted and retrying");
             setMuted(true);
             localVideoRef.current.muted = true;
             localVideoRef.current
               .play()
               .then(() => {
-                console.warn("Browser forced video to start muted");
+                console.log("Muted play succeeded");
                 setMuteWasForced(true);
               })
               .catch((err) => {
-                console.error("error playing video", err);
+                console.error("Muted play also failed", err);
               });
           }
         }
@@ -195,9 +228,17 @@ const VideoElement = forwardRef<
       (ref as React.MutableRefObject<HTMLVideoElement | null>).current =
         videoElement;
     }
-    // if (localVideoRef && typeof localVideoRef !== "function") {
-    //   localVideoRef.current = videoElement;
-    // }
+    (localVideoRef as any).current = videoElement;
+  };
+
+  const eventLogger = (evType) => (e) => {
+    console.log("📺 Video event:", evType);
+    const now = new Date();
+    if (updateEvents[evType]) {
+      x.setStatus(evType);
+    }
+    console.log("Sending", evType, "status to", url);
+    playerEvent(url, now.toISOString(), evType, {});
   };
 
   return (
@@ -212,7 +253,8 @@ const VideoElement = forwardRef<
       onMouseMove={setUserInteraction}
       onClick={setUserInteraction}
       onAbort={event("abort")}
-      onCanPlay={event("canplay")}
+      onCanPlay={eventLogger}
+      onCanPlayThroughCapture={eventLogger}
       onCanPlayThrough={canPlayThrough}
       onEmptied={event("emptied")}
       onEncrypted={event("encrypted")}
@@ -236,6 +278,8 @@ const VideoElement = forwardRef<
         backgroundColor: "transparent",
         width: "100%",
         height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
         transform: ingest ? "scaleX(-1)" : undefined,
       }}
     />
@@ -286,6 +330,7 @@ export function HLSPlayer(props: VideoProps) {
       });
     }
   }, [props.url]);
+
   return <VideoElement {...props} ref={localRef} />;
 }
 
@@ -348,6 +393,15 @@ export function WebRTCPlayer(
   return <WebRTCPlayerInner url={props.url} videoRef={props.videoRef} />;
 }
 
+const connectionStatusMessages: Record<string, string> = {
+  initializing: "Starting up...",
+  connecting: "Connecting...",
+  "connection-failed": "Connecting...",
+  connected: "Connected",
+  reconnecting: "Reconnecting...",
+  checking: "Checking connection...",
+};
+
 export function WebRTCPlayerInner({
   videoRef,
   url,
@@ -384,7 +438,7 @@ export function WebRTCPlayerInner({
     if (stuck && status === PlayerStatus.PLAYING) {
       setStatus(PlayerStatus.STALLED);
     }
-    if (!stuck && mediaStream) {
+    if (!stuck && status === PlayerStatus.STALLED) {
       setStatus(PlayerStatus.PLAYING);
     }
   }, [stuck, status, mediaStream]);
@@ -431,19 +485,30 @@ export function WebRTCPlayerInner({
   }, [mediaStream]);
 
   if (!mediaStream) {
+    const isError = connectionStatus === "connection-failed";
     return (
       <View
         backgroundColor="#111"
-        style={{ minWidth: "100%", minHeight: "100%" }}
+        style={{
+          minWidth: "100%",
+          minHeight: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
         <View
-          backgroundColor={colors.primary[800]}
-          style={{ borderRadius: borderRadius.md }}
+          style={{
+            borderRadius: borderRadius.md,
+            padding: 24,
+            alignItems: "center",
+            gap: 16,
+          }}
         >
-          <View>
-            <Text>Connecting...</Text>
-          </View>
-          <Text>Establishing WebRTC connection ({connectionStatus})</Text>
+          {!isError && <Loader size="large" />}
+          <Text size="lg" weight="semibold">
+            {connectionStatusMessages[connectionStatus] || "Connecting..."}
+          </Text>
         </View>
       </View>
     );
@@ -540,15 +605,29 @@ export function WebcamIngestPlayer(props: VideoProps) {
   if (error) {
     return (
       <View
-        backgroundColor={colors.destructive[900]}
-        style={[p[4], { borderRadius: borderRadius.md }]}
+        backgroundColor="#111"
+        style={{
+          minWidth: "100%",
+          minHeight: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
       >
-        <View>
-          <Text size="xl" weight="extrabold">
-            Error encountered!
+        <View
+          backgroundColor={colors.destructive[900]}
+          style={{
+            borderRadius: borderRadius.md,
+            padding: 24,
+            alignItems: "center",
+            gap: 16,
+            maxWidth: 400,
+          }}
+        >
+          <Text size="xl" weight="extrabold" color="default">
+            {error.message}
           </Text>
         </View>
-        <Text>{error.message}</Text>
       </View>
     );
   }

package/src/components/share/sharesheet.tsx

@@ -0,0 +1,185 @@
+import { Code, Copy, Link2, Share2 } from "lucide-react-native";
+import { useCallback, useState } from "react";
+import { Clipboard, Linking, Platform, View } from "react-native";
+import { colors } from "../../lib/theme";
+import { useLivestreamStore } from "../../livestream-store";
+import { useUrl } from "../../streamplace-store";
+import { BlueskyIcon } from "../icons/bluesky-icon";
+import {
+  DropdownMenu,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+  Text,
+} from "../ui";
+
+export interface ShareSheetProps {
+  onShare?: (action: string, success: boolean) => void;
+}
+
+export function ShareSheet({ onShare }: ShareSheetProps = {}) {
+  const profile = useLivestreamStore((x) => x.profile);
+  const [isCopying, setIsCopying] = useState(false);
+  const url = useUrl();
+
+  // Get the current stream URL
+  const getStreamUrl = useCallback(() => {
+    return url + (profile ? `/@${profile.handle}` : "");
+  }, [profile]);
+
+  // Get the embed URL
+  const getEmbedUrl = useCallback(() => {
+    return url + (profile ? `/embed/${profile.handle}` : "");
+  }, [profile]);
+
+  // Get embed code
+  const getEmbedCode = useCallback(() => {
+    const embedUrl = getEmbedUrl();
+    return `<iframe src="${embedUrl}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`;
+  }, [getEmbedUrl]);
+
+  // Copy to clipboard handler
+  const copyToClipboard = useCallback(
+    async (text: string, label: string) => {
+      setIsCopying(true);
+      try {
+        if (Platform.OS === "web") {
+          await navigator.clipboard.writeText(text);
+        } else {
+          Clipboard.setString(text);
+        }
+        onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, true);
+      } catch (error) {
+        onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, false);
+      } finally {
+        setIsCopying(false);
+      }
+    },
+    [onShare],
+  );
+
+  // Share to Bluesky
+  const shareToBluesky = useCallback(() => {
+    const streamUrl = getStreamUrl();
+    const text = profile
+      ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+      : `Check out this stream on Streamplace! ${streamUrl}`;
+    const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
+    Linking.openURL(blueskyUrl);
+    onShare?.("share_bluesky", true);
+  }, [profile, getStreamUrl, onShare]);
+
+  // Share to Twitter/X
+  const shareToTwitter = useCallback(() => {
+    const streamUrl = getStreamUrl();
+    const text = profile
+      ? `Check out @${profile.handle} live on Streamplace!`
+      : `Check out this stream on Streamplace!`;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
+    Linking.openURL(twitterUrl);
+    onShare?.("share_twitter", true);
+  }, [profile, getStreamUrl, onShare]);
+
+  // Native share (mobile)
+  const nativeShare = useCallback(async () => {
+    const streamUrl = getStreamUrl();
+    const text = profile
+      ? `Check out @${profile.handle} live on Streamplace!`
+      : `Check out this stream on Streamplace!`;
+
+    if (Platform.OS === "web" && navigator.share) {
+      try {
+        await navigator.share({
+          title: "Streamplace",
+          text: text,
+          url: streamUrl,
+        });
+        onShare?.("share_native", true);
+      } catch (error) {
+        // User cancelled or error occurred
+        onShare?.("share_native", false);
+      }
+    }
+  }, [profile, getStreamUrl, onShare]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Share2 color={colors.gray[200]} />
+      </DropdownMenuTrigger>
+      <ResponsiveDropdownMenuContent>
+        <DropdownMenuGroup title="Share">
+          <DropdownMenuItem onPress={shareToBluesky} closeOnPress={true}>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <BlueskyIcon size={20} color={colors.gray[400]} />
+              <Text>Share to Bluesky</Text>
+            </View>
+          </DropdownMenuItem>
+          {/* <DropdownMenuItem onPress={shareToTwitter}>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <MessageCircle size={20} color={colors.gray[400]} />
+              <Text>Share to X</Text>
+            </View>
+          </DropdownMenuItem> */}
+          {/* navigator isn't on non-web */}
+          {Platform.OS !== "web" || (navigator && (navigator as any).share) ? (
+            <DropdownMenuItem onPress={nativeShare}>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+              >
+                <Share2 size={20} color={colors.gray[400]} />
+                <Text>More Options...</Text>
+              </View>
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuGroup>
+        <DropdownMenuGroup title="Copy">
+          <DropdownMenuItem
+            onPress={() => copyToClipboard(getStreamUrl(), "Stream link")}
+            disabled={isCopying}
+            closeOnPress={true}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Link2 size={20} color={colors.gray[400]} />
+              <Text>Copy Link</Text>
+            </View>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onPress={() => copyToClipboard(getEmbedCode(), "Embed code")}
+            disabled={isCopying}
+            closeOnPress={true}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Code size={20} color={colors.gray[400]} />
+              <Text>Copy Embed Code</Text>
+            </View>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            closeOnPress={true}
+            onPress={() => copyToClipboard(getEmbedUrl(), "Embed URL")}
+            disabled={isCopying}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Copy size={20} color={colors.gray[400]} />
+              <Text>Copy Embed URL</Text>
+            </View>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/ui/dialog.tsx

@@ -254,7 +254,7 @@ DialogFooter.displayName = "DialogFooter";
 
 // Dialog Close Icon component (Lucide X)
 const DialogCloseIcon = () => {
-  return <ThemedX size="md" variant="muted" />;
+  return <ThemedX size="md" variant="default" />;
 };
 
 // Create theme-aware styles

package/src/components/ui/dropdown.tsx

@@ -24,11 +24,9 @@ import {
   colors,
   fontSize,
   gap,
-  h,
   layout,
   ml,
   mt,
-  mx,
   p,
   pb,
   pl,
@@ -73,6 +71,14 @@ export const DropdownMenuBottomSheet = forwardRef<
         index={open ? 3 : -1}
         snapPoints={snapPoints}
         enablePanDownToClose
+        enableDynamicSizing
+        enableContentPanningGesture={false}
+        backdropComponent={({ style }) => (
+          <Pressable
+            style={[style, StyleSheet.absoluteFill]}
+            onPress={() => onOpenChange?.(false)}
+          />
+        )}
         onClose={() => onOpenChange?.(false)}
         style={[overlayStyle]}
         backgroundStyle={[bg.black, a.radius.all.md, a.shadows.md, p[1]]}
@@ -341,13 +347,7 @@ export const DropdownMenuSeparator = forwardRef<
   any,
   DropdownMenuPrimitive.SeparatorProps
 >((props, ref) => {
-  return (
-    <View
-      ref={ref}
-      style={[mx[2], h[0.5] || { height: 0.5 }, bg.gray[800]]}
-      {...props}
-    />
-  );
+  return <View ref={ref} style={[{ height: 0.5 }, bg.gray[800]]} {...props} />;
 });
 
 export function DropdownMenuShortcut(props: any) {
@@ -370,16 +370,16 @@ export const DropdownMenuGroup = forwardRef<
 >((props, ref) => {
   const { inset, title, children, ...rest } = props;
   return (
-    <View style={[pt[2], inset ? gap[2] : gap[1]]} ref={ref} {...rest}>
+    <View style={[pt[2], inset && gap[2]]} ref={ref} {...rest}>
       {title && (
         <Text style={[textColors.gray[400], pb[1], pl[2]]}>{title}</Text>
       )}
       <View
         style={[
           bg.gray[900],
-          Platform.OS === "web" ? px[2] : p[2],
-          gap[2],
-          { borderRadius: borderRadius.lg, gap: 10 },
+          Platform.OS === "web" ? [px[2], py[1]] : p[2],
+          gap.all[1],
+          { borderRadius: borderRadius.lg },
         ]}
       >
         {children}

package/src/components/ui/index.ts

@@ -12,7 +12,9 @@ export * from "./icons";
 export * from "./input";
 export * from "./loader";
 export * from "./resizeable";
+export * from "./slider";
 export * from "./text";
+export * from "./textarea";
 export * from "./toast";
 export * from "./view";
 

package/src/components/ui/primitives/modal.tsx

@@ -334,7 +334,6 @@ const primitiveStyles = StyleSheet.create({
     padding: 16,
   },
   content: {
-    backgroundColor: "white",
     borderRadius: 8,
     overflow: "hidden",
   },

package/src/components/ui/resizeable.tsx

@@ -15,7 +15,7 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useKeyboardSlide } from "../../hooks";
-import { bottom, layout, p, w, zIndex } from "../../lib/theme/atoms";
+import { bottom, h, layout, p, w, zIndex } from "../../lib/theme/atoms";
 import { View } from "./view";
 
 const AnimatedView = Animated.createAnimatedComponent(View);
@@ -154,24 +154,35 @@ export function Resizable({
           style,
         ]}
       >
-        <View style={[layout.flex.row, layout.flex.justifyCenter]}>
+        <View style={[layout.flex.row, layout.flex.justifyCenter, h[2]]}>
           <GestureDetector gesture={panGesture}>
             <View
-              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
-              style={[
-                w[32],
-                {
-                  height: 6,
-                  transform: [{ translateY: -10 }],
-                  backgroundColor: "#eeeeee66",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  borderRadius: 999,
-                },
-              ]}
-            />
+              // Make the touch area much larger, but keep the visible handle small
+              style={{
+                height: 30, // Large touch area
+                width: 120, // Wide enough for thumbs
+                alignItems: "center",
+                justifyContent: "center",
+                //backgroundColor: "rgba(0,255,255,0.1)",
+                transform: [{ translateY: -30 }],
+              }}
+            >
+              <View
+                style={[
+                  w[32],
+                  {
+                    height: 6,
+                    backgroundColor: "#eeeeee66",
+                    borderRadius: 999,
+
+                    transform: [{ translateY: 5 }],
+                  },
+                ]}
+              />
+            </View>
           </GestureDetector>
         </View>
+
         {children}
       </AnimatedView>
     </>

package/src/components/ui/slider.tsx

@@ -0,0 +1 @@
+export * as Slider from "@rn-primitives/slider";

package/src/hooks/index.ts

@@ -6,5 +6,6 @@ export * from "./useKeyboardSlide";
 export * from "./useLivestreamInfo";
 export * from "./useOuterAndInnerDimensions";
 export * from "./usePlayerDimensions";
+export * from "./usePointerDevice";
 export * from "./useSegmentDimensions";
 export * from "./useSegmentTiming";