@streamplace/components 0.0.1 → 0.7.0

package/dist/components/mobile-player/webrtc-diagnostics.js

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+export function useWebRTCDiagnostics() {
+    const [diagnostics, setDiagnostics] = useState({
+        done: false,
+        browserSupport: false,
+        rtcPeerConnection: false,
+        rtcSessionDescription: false,
+        getUserMedia: false,
+        getDisplayMedia: false,
+        errors: [],
+        warnings: [],
+    });
+    useEffect(() => {
+        const errors = [];
+        const warnings = [];
+        // Check if we're in a browser environment
+        if (typeof window === "undefined") {
+            errors.push("Running in non-browser environment");
+            setDiagnostics({
+                done: false,
+                browserSupport: false,
+                rtcPeerConnection: false,
+                rtcSessionDescription: false,
+                getUserMedia: false,
+                getDisplayMedia: false,
+                errors,
+                warnings,
+            });
+            return;
+        }
+        // Check RTCPeerConnection support
+        const rtcPeerConnection = !!(window.RTCPeerConnection ||
+            window.webkitRTCPeerConnection ||
+            window.mozRTCPeerConnection);
+        if (!rtcPeerConnection) {
+            errors.push("RTCPeerConnection is not supported");
+        }
+        // Check RTCSessionDescription support
+        const rtcSessionDescription = !!(window.RTCSessionDescription ||
+            window.webkitRTCSessionDescription ||
+            window.mozRTCSessionDescription);
+        if (!rtcSessionDescription) {
+            errors.push("RTCSessionDescription is not supported");
+        }
+        // Check getUserMedia support
+        const getUserMedia = !!(navigator.mediaDevices?.getUserMedia ||
+            navigator.getUserMedia ||
+            navigator.webkitGetUserMedia ||
+            navigator.mozGetUserMedia);
+        if (!getUserMedia) {
+            warnings.push("getUserMedia is not supported - webcam features unavailable");
+        }
+        // Check getDisplayMedia support
+        const getDisplayMedia = !!navigator.mediaDevices?.getDisplayMedia;
+        if (!getDisplayMedia) {
+            warnings.push("getDisplayMedia is not supported - screen sharing unavailable");
+        }
+        // Check if running over HTTPS (required for some WebRTC features)
+        if (location.protocol !== "https:" &&
+            location.hostname !== "localhost" &&
+            location.hostname !== "127.0.0.1") {
+            warnings.push("WebRTC features may be limited over HTTP connections");
+        }
+        // Check browser-specific issues
+        const userAgent = navigator.userAgent.toLowerCase();
+        if (userAgent.includes("safari") && !userAgent.includes("chrome")) {
+            warnings.push("Safari may have limited WebRTC codec support");
+        }
+        const browserSupport = rtcPeerConnection && rtcSessionDescription;
+        setDiagnostics({
+            done: true,
+            browserSupport,
+            rtcPeerConnection,
+            rtcSessionDescription,
+            getUserMedia,
+            getDisplayMedia,
+            errors,
+            warnings,
+        });
+    }, []);
+    return diagnostics;
+}
+export function logWebRTCDiagnostics() {
+    console.group("WebRTC Diagnostics");
+    // Log browser support
+    console.log("RTCPeerConnection:", !!window.RTCPeerConnection);
+    console.log("RTCSessionDescription:", !!window.RTCSessionDescription);
+    console.log("getUserMedia:", !!navigator.mediaDevices?.getUserMedia);
+    console.log("getDisplayMedia:", !!navigator.mediaDevices?.getDisplayMedia);
+    // Log browser info
+    console.log("User Agent:", navigator.userAgent);
+    console.log("Protocol:", location.protocol);
+    console.log("Host:", location.hostname);
+    // Test basic WebRTC functionality
+    if (window.RTCPeerConnection) {
+        try {
+            const pc = new RTCPeerConnection();
+            console.log("RTCPeerConnection creation: ✓ Success");
+            pc.close();
+        }
+        catch (error) {
+            console.error("RTCPeerConnection creation: ✗ Failed", error);
+        }
+    }
+    console.groupEnd();
+}

package/dist/components/mobile-player/webrtc-primitives.js

@@ -0,0 +1,25 @@
+// Browser compatibility checks for WebRTC
+const checkWebRTCSupport = () => {
+    if (typeof window === "undefined") {
+        throw new Error("WebRTC is not available in non-browser environments");
+    }
+    if (!window.RTCPeerConnection) {
+        throw new Error("RTCPeerConnection is not supported in this browser. Please use a modern browser that supports WebRTC.");
+    }
+    if (!window.RTCSessionDescription) {
+        throw new Error("RTCSessionDescription is not supported in this browser. Please use a modern browser that supports WebRTC.");
+    }
+};
+// Check support immediately
+try {
+    checkWebRTCSupport();
+}
+catch (error) {
+    console.error("WebRTC Compatibility Error:", error.message);
+}
+export const RTCPeerConnection = window.RTCPeerConnection;
+export const RTCSessionDescription = window.RTCSessionDescription;
+export const WebRTCMediaStream = window.MediaStream;
+export const mediaDevices = navigator.mediaDevices;
+// Export the compatibility checker for use in other components
+export { checkWebRTCSupport };

package/dist/components/mobile-player/webrtc-primitives.native.js

@@ -0,0 +1 @@
+export { RTCPeerConnection, RTCSessionDescription, MediaStream as WebRTCMediaStream, mediaDevices, } from "react-native-webrtc";

package/dist/components/ui/button.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import React, { forwardRef, useMemo } from "react";
+import { ActivityIndicator, StyleSheet } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import * as tokens from "../../lib/theme/tokens";
+import { ButtonPrimitive } from "./primitives/button";
+import { TextPrimitive } from "./primitives/text";
+// Button variants using class-variance-authority pattern
+const buttonVariants = cva("", {
+    variants: {
+        variant: {
+            primary: "primary",
+            secondary: "secondary",
+            outline: "outline",
+            ghost: "ghost",
+            destructive: "destructive",
+            success: "success",
+        },
+        size: {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+            pill: "pill",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md",
+    },
+});
+export const Button = forwardRef(({ variant = "primary", size = "md", children, leftIcon, rightIcon, loading = false, loadingText, disabled, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    // Create dynamic styles based on theme
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    // Get variant styles
+    const buttonStyle = useMemo(() => {
+        const variantStyle = styles[`${variant}Button`];
+        const sizeStyle = styles[`${size}Button`];
+        return [variantStyle, sizeStyle];
+    }, [variant, size, styles]);
+    // Get inner styles for button content
+    const buttonInnerStyle = useMemo(() => {
+        const sizeInnerStyle = styles[`${size}ButtonInner`];
+        return sizeInnerStyle;
+    }, [size, styles]);
+    const textStyle = React.useMemo(() => {
+        const variantTextStyle = styles[`${variant}Text`];
+        const sizeTextStyle = styles[`${size}Text`];
+        return [variantTextStyle, sizeTextStyle];
+    }, [variant, size, styles]);
+    const iconSize = React.useMemo(() => {
+        switch (size) {
+            case "sm":
+                return 16;
+            case "lg":
+                return 20;
+            case "xl":
+                return 24;
+            case "md":
+            default:
+                return 18;
+        }
+    }, [size]);
+    const spinnerSize = useMemo(() => {
+        switch (size) {
+            case "sm":
+                return "small";
+            case "lg":
+            case "xl":
+                return "large";
+            case "md":
+            default:
+                return "small";
+        }
+    }, [size]);
+    const spinnerColor = useMemo(() => {
+        switch (variant) {
+            case "outline":
+            case "ghost":
+                return theme.colors.primary;
+            case "secondary":
+                return theme.colors.secondaryForeground;
+            case "destructive":
+                return theme.colors.destructiveForeground;
+            default:
+                return theme.colors.primaryForeground;
+        }
+    }, [variant, theme.colors]);
+    return (_jsx(ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, style], ...props, children: _jsxs(ButtonPrimitive.Content, { style: buttonInnerStyle, children: [loading && !leftIcon ? (_jsx(ButtonPrimitive.Icon, { position: "left", children: _jsx(ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? (_jsx(ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, _jsx(TextPrimitive.Root, { style: textStyle, children: loading && loadingText ? loadingText : children }), loading && rightIcon ? (_jsx(ButtonPrimitive.Icon, { position: "right", children: _jsx(ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? (_jsx(ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
+});
+Button.displayName = "Button";
+// Create theme-based styles
+function createStyles(theme) {
+    return StyleSheet.create({
+        // Variant styles
+        primaryButton: {
+            backgroundColor: theme.colors.primary,
+            borderWidth: 0,
+            ...theme.shadows.sm,
+        },
+        primaryText: {
+            color: theme.colors.primaryForeground,
+            fontWeight: "600",
+        },
+        secondaryButton: {
+            backgroundColor: theme.colors.secondary,
+            borderWidth: 0,
+        },
+        secondaryText: {
+            color: theme.colors.secondaryForeground,
+            fontWeight: "500",
+        },
+        outlineButton: {
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+        },
+        outlineText: {
+            color: theme.colors.foreground,
+            fontWeight: "500",
+        },
+        ghostButton: {
+            backgroundColor: "transparent",
+            borderWidth: 0,
+        },
+        ghostText: {
+            color: theme.colors.foreground,
+            fontWeight: "500",
+        },
+        destructiveButton: {
+            backgroundColor: theme.colors.destructive,
+            borderWidth: 0,
+            ...theme.shadows.sm,
+        },
+        destructiveText: {
+            color: theme.colors.destructiveForeground,
+            fontWeight: "600",
+        },
+        successButton: {
+            backgroundColor: theme.colors.success,
+            borderWidth: 0,
+            ...theme.shadows.sm,
+        },
+        successText: {
+            color: theme.colors.successForeground,
+            fontWeight: "600",
+        },
+        pillButton: {
+            paddingHorizontal: theme.spacing[3],
+            paddingVertical: theme.spacing[2],
+            borderRadius: tokens.borderRadius.full,
+            minHeight: tokens.touchTargets.minimum / 2,
+        },
+        pillText: {
+            color: theme.colors.primaryForeground,
+            fontWeight: "400",
+        },
+        // Size styles
+        smButton: {
+            paddingHorizontal: theme.spacing[3],
+            paddingVertical: theme.spacing[2],
+            borderRadius: tokens.borderRadius.md,
+            minHeight: tokens.touchTargets.minimum,
+            gap: theme.spacing[1],
+        },
+        smButtonInner: {
+            gap: theme.spacing[1],
+        },
+        smText: {
+            fontSize: 14,
+            lineHeight: 16,
+        },
+        mdButton: {
+            paddingHorizontal: theme.spacing[4],
+            paddingVertical: theme.spacing[3],
+            borderRadius: tokens.borderRadius.md,
+            minHeight: tokens.touchTargets.minimum,
+            gap: theme.spacing[2],
+        },
+        mdButtonInner: {
+            gap: theme.spacing[2],
+        },
+        mdText: {
+            fontSize: 16,
+            lineHeight: 18,
+        },
+        lgButton: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            borderRadius: tokens.borderRadius.md,
+            minHeight: tokens.touchTargets.comfortable,
+            gap: theme.spacing[3],
+        },
+        lgButtonInner: {
+            gap: theme.spacing[3],
+        },
+        lgText: {
+            fontSize: 18,
+            lineHeight: 20,
+        },
+        xlButton: {
+            paddingHorizontal: theme.spacing[8],
+            paddingVertical: theme.spacing[5],
+            borderRadius: tokens.borderRadius.lg,
+            minHeight: tokens.touchTargets.large,
+            gap: theme.spacing[4],
+        },
+        xlButtonInner: {
+            gap: theme.spacing[4],
+        },
+        xlText: {
+            fontSize: 20,
+            lineHeight: 24,
+        },
+    });
+}
+// Export button variants for external use
+export { buttonVariants };

package/dist/components/ui/dialog.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react-native";
+import React, { forwardRef } from "react";
+import { Platform, StyleSheet, Text } from "react-native";
+import { useTheme } from "../../lib/theme/theme";
+import { createThemedIcon } from "./icons";
+import { ModalPrimitive } from "./primitives/modal";
+const ThemedX = createThemedIcon(X);
+// Dialog variants using class-variance-authority pattern
+const dialogVariants = cva("", {
+    variants: {
+        variant: {
+            default: "default",
+            sheet: "sheet",
+            fullscreen: "fullscreen",
+        },
+        size: {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+            full: "full",
+        },
+        position: {
+            center: "center",
+            top: "top",
+            bottom: "bottom",
+            left: "left",
+            right: "right",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "md",
+        position: "center",
+    },
+});
+export const Dialog = forwardRef(({ variant = "left", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
+    const { theme } = useTheme();
+    // Create dynamic styles based on theme
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    const handleClose = React.useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+        if (onOpenChange) {
+            onOpenChange(false);
+        }
+    }, [onClose, onOpenChange]);
+    const presentationStyle = React.useMemo(() => {
+        if (variant === "sheet" && Platform.OS === "ios") {
+            return "pageSheet";
+        }
+        if (variant === "fullscreen") {
+            return "fullScreen";
+        }
+        return Platform.OS === "ios"
+            ? "pageSheet"
+            : "fullScreen";
+    }, [variant]);
+    const animationType = React.useMemo(() => {
+        if (variant === "sheet") {
+            return "slide";
+        }
+        return "fade";
+    }, [variant]);
+    return (_jsx(ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: _jsx(ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: styles.overlay, children: _jsxs(ModalPrimitive.Content, { position: position || "left", size: size || "md", style: [
+                    styles.content,
+                    styles[`${variant}Content`],
+                    styles[`${size}Content`],
+                ], children: [(title || showCloseButton) && (_jsxs(ModalPrimitive.Header, { withBorder: variant !== "sheet", style: styles.header, children: [_jsx(DialogTitle, { children: title }), showCloseButton && (_jsx(ModalPrimitive.Close, { onClose: handleClose, style: styles.closeButton, children: _jsx(DialogCloseIcon, {}) }))] })), _jsxs(ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: styles.body, children: [description && (_jsx(DialogDescription, { children: description })), children] })] }) }) }));
+});
+Dialog.displayName = "Dialog";
+export const DialogTitle = forwardRef(({ children, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    if (!children)
+        return null;
+    return (_jsx(Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
+});
+DialogTitle.displayName = "DialogTitle";
+export const DialogDescription = forwardRef(({ children, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    if (!children)
+        return null;
+    return (_jsx(Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
+});
+DialogDescription.displayName = "DialogDescription";
+export const DialogFooter = forwardRef(({ children, direction = "row", justify = "flex-end", withBorder = true, style, ...props }, ref) => {
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    if (!children)
+        return null;
+    return (_jsx(ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [styles.footer, style], ...props, children: children }));
+});
+DialogFooter.displayName = "DialogFooter";
+// Dialog Close Icon component (Lucide X)
+const DialogCloseIcon = () => {
+    return _jsx(ThemedX, { size: "md", variant: "muted" });
+};
+// Create theme-aware styles
+function createStyles(theme) {
+    return StyleSheet.create({
+        overlay: {
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+        },
+        content: {
+            backgroundColor: theme.colors.card,
+            borderRadius: theme.borderRadius.lg,
+            ...theme.shadows.lg,
+            maxHeight: "90%",
+            maxWidth: "90%",
+        },
+        // Variant styles
+        defaultContent: {
+        // Default styles already applied in content
+        },
+        sheetContent: {
+            borderTopLeftRadius: theme.borderRadius.xl,
+            borderTopRightRadius: theme.borderRadius.xl,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            marginTop: "auto",
+            marginBottom: 0,
+            maxHeight: "80%",
+            width: "100%",
+            maxWidth: "100%",
+        },
+        fullscreenContent: {
+            width: "100%",
+            height: "100%",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            borderRadius: 0,
+            margin: 0,
+        },
+        // Size styles
+        smContent: {
+            minWidth: 300,
+            minHeight: 200,
+        },
+        mdContent: {
+            minWidth: 400,
+            minHeight: 300,
+        },
+        lgContent: {
+            minWidth: 500,
+            minHeight: 400,
+        },
+        xlContent: {
+            minWidth: 600,
+            minHeight: 500,
+        },
+        fullContent: {
+            width: "95%",
+            height: "95%",
+            maxWidth: "95%",
+            maxHeight: "95%",
+        },
+        header: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+        },
+        body: {
+            paddingHorizontal: theme.spacing[6],
+            paddingBottom: theme.spacing[6],
+            flex: 1,
+        },
+        footer: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            gap: theme.spacing[2],
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: "600",
+            color: theme.colors.text,
+            flex: 1,
+            lineHeight: 24,
+        },
+        description: {
+            fontSize: 16,
+            color: theme.colors.textMuted,
+            lineHeight: 22,
+            marginBottom: theme.spacing[4],
+        },
+        closeButton: {
+            width: theme.touchTargets.minimum,
+            height: theme.touchTargets.minimum,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: theme.borderRadius.sm,
+            marginLeft: theme.spacing[2],
+        },
+    });
+}
+// Export dialog variants for external use
+export { dialogVariants };