@streamplace/components 0.7.3 → 0.7.7

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/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";

package/src/hooks/usePointerDevice.ts

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+
+export interface PointerDevice {
+  hasHover: boolean;
+  hasFinePointer: boolean;
+  isMouseDriven: boolean;
+  isTouchDriven: boolean;
+}
+
+/**
+ * Hook to detect if the device is primarily mouse-driven vs touch-driven
+ * Uses CSS media queries to detect hover and pointer capabilities
+ */
+export function usePointerDevice(): PointerDevice {
+  const [pointerDevice, setPointerDevice] = useState<PointerDevice>(() => {
+    // Default values for non-web platforms
+    if (Platform.OS !== "web") {
+      return {
+        hasHover: false,
+        hasFinePointer: false,
+        isMouseDriven: false,
+        isTouchDriven: true,
+      };
+    }
+
+    // Initial web detection
+    if (typeof window !== "undefined" && window.matchMedia) {
+      const hasHover = window.matchMedia("(hover: hover)").matches;
+      const hasFinePointer = window.matchMedia("(pointer: fine)").matches;
+
+      return {
+        hasHover,
+        hasFinePointer,
+        isMouseDriven: hasHover && hasFinePointer,
+        isTouchDriven: !hasHover || !hasFinePointer,
+      };
+    }
+
+    // Fallback for SSR or environments without matchMedia
+    return {
+      hasHover: false,
+      hasFinePointer: false,
+      isMouseDriven: false,
+      isTouchDriven: true,
+    };
+  });
+
+  useEffect(() => {
+    // Only run on web platforms
+    if (
+      Platform.OS !== "web" ||
+      typeof window === "undefined" ||
+      !window.matchMedia
+    ) {
+      return;
+    }
+
+    const hoverQuery = window.matchMedia("(hover: hover)");
+    const pointerQuery = window.matchMedia("(pointer: fine)");
+
+    const updatePointerDevice = () => {
+      const hasHover = hoverQuery.matches;
+      const hasFinePointer = pointerQuery.matches;
+
+      setPointerDevice({
+        hasHover,
+        hasFinePointer,
+        isMouseDriven: hasHover && hasFinePointer,
+        isTouchDriven: !hasHover || !hasFinePointer,
+      });
+    };
+
+    // Set up listeners for media query changes
+    hoverQuery.addEventListener("change", updatePointerDevice);
+    pointerQuery.addEventListener("change", updatePointerDevice);
+
+    // Initial update
+    updatePointerDevice();
+
+    // Cleanup
+    return () => {
+      hoverQuery.removeEventListener("change", updatePointerDevice);
+      pointerQuery.removeEventListener("change", updatePointerDevice);
+    };
+  }, []);
+
+  return pointerDevice;
+}

package/src/index.tsx

@@ -18,10 +18,19 @@ export * as ui from "./components/ui";
 
 export * from "./components/ui";
 
-export * as theme from "./lib/theme";
-export * as atoms from "./lib/theme/atoms";
+export * as zero from "./ui";
 
 export * from "./hooks";
 
+// Theme system exports
+export * from "./lib/theme";
+
 export * from "./components/chat/chat";
 export * from "./components/chat/chat-box";
+export * from "./components/chat/system-message";
+export { default as VideoRetry } from "./components/mobile-player/video-retry";
+export * from "./lib/system-messages";
+
+export * from "./components/share/sharesheet";
+
+export * from "./components/keep-awake";