@streamplace/components 0.7.18 → 0.7.21

package/dist/components/ui/view.js

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.viewVariants = exports.Center = exports.Column = exports.Row = exports.Overlay = exports.Surface = exports.Container = exports.Card = exports.View = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const atoms_1 = require("../../lib/theme/atoms");
+const theme_1 = require("../../lib/theme/theme");
+// View variants using class-variance-authority pattern
+const viewVariants = (0, class_variance_authority_1.cva)("", {
+    variants: {
+        variant: {
+            default: "default",
+            card: "card",
+            overlay: "overlay",
+            surface: "surface",
+            container: "container",
+        },
+        padding: {
+            none: "none",
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+        },
+        margin: {
+            none: "none",
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+        },
+        direction: {
+            row: "row",
+            column: "column",
+            "row-reverse": "row-reverse",
+            "column-reverse": "column-reverse",
+        },
+        align: {
+            start: "start",
+            center: "center",
+            end: "end",
+            stretch: "stretch",
+            baseline: "baseline",
+        },
+        justify: {
+            start: "start",
+            center: "center",
+            end: "end",
+            between: "between",
+            around: "around",
+            evenly: "evenly",
+        },
+        flex: {
+            none: "none",
+            auto: "auto",
+            initial: "initial",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        padding: "none",
+        margin: "none",
+        direction: "column",
+        align: "stretch",
+        justify: "start",
+        flex: "none",
+    },
+});
+exports.viewVariants = viewVariants;
+exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none", margin = "none", direction = "column", align = "stretch", justify = "start", flex = "none", fullWidth = false, fullHeight = false, centered = false, backgroundColor, borderColor, borderWidth, borderRadius, shadow = false, style, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    // Map variant to styles
+    const variantStyles = (() => {
+        switch (variant) {
+            case "card":
+                return {
+                    backgroundColor: theme.colors.card,
+                    borderRadius: atoms_1.borderRadius.lg,
+                    shadowColor: "#000",
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 3,
+                };
+            case "overlay":
+                return {
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                };
+            case "surface":
+                return {
+                    backgroundColor: theme.colors.background,
+                };
+            case "container":
+                return {
+                    backgroundColor: theme.colors.background,
+                    padding: atoms_1.spacing[4],
+                };
+            default:
+                return {};
+        }
+    })();
+    // Map padding to numeric values
+    const paddingValue = (() => {
+        switch (padding) {
+            case "xs":
+                return atoms_1.spacing[1];
+            case "sm":
+                return atoms_1.spacing[2];
+            case "md":
+                return atoms_1.spacing[3];
+            case "lg":
+                return atoms_1.spacing[4];
+            case "xl":
+                return atoms_1.spacing[5];
+            default:
+                return undefined;
+        }
+    })();
+    // Map margin to numeric values
+    const marginValue = (() => {
+        switch (margin) {
+            case "xs":
+                return atoms_1.spacing[1];
+            case "sm":
+                return atoms_1.spacing[2];
+            case "md":
+                return atoms_1.spacing[3];
+            case "lg":
+                return atoms_1.spacing[4];
+            case "xl":
+                return atoms_1.spacing[5];
+            default:
+                return undefined;
+        }
+    })();
+    // Map flex direction
+    const flexDirection = (() => {
+        switch (direction) {
+            case "row":
+                return "row";
+            case "column":
+                return "column";
+            case "row-reverse":
+                return "row-reverse";
+            case "column-reverse":
+                return "column-reverse";
+            default:
+                return "column";
+        }
+    })();
+    // Map align items
+    const alignItems = (() => {
+        switch (align) {
+            case "start":
+                return "flex-start";
+            case "center":
+                return "center";
+            case "end":
+                return "flex-end";
+            case "stretch":
+                return "stretch";
+            case "baseline":
+                return "baseline";
+            default:
+                return "stretch";
+        }
+    })();
+    // Map justify content
+    const justifyContent = (() => {
+        switch (justify) {
+            case "start":
+                return "flex-start";
+            case "center":
+                return "center";
+            case "end":
+                return "flex-end";
+            case "between":
+                return "space-between";
+            case "around":
+                return "space-around";
+            case "evenly":
+                return "space-evenly";
+            default:
+                return "flex-start";
+        }
+    })();
+    // Map flex value
+    const flexValue = (() => {
+        if (typeof flex === "number") {
+            return flex;
+        }
+        switch (flex) {
+            case "auto":
+                return undefined; // auto is default
+            case "initial":
+                return 0;
+            case "none":
+            default:
+                return undefined;
+        }
+    })();
+    const computedStyle = {
+        ...variantStyles,
+        ...(paddingValue !== undefined && { padding: paddingValue }),
+        ...(marginValue !== undefined && { margin: marginValue }),
+        flexDirection,
+        alignItems,
+        justifyContent,
+        ...(flexValue !== undefined && { flex: flexValue }),
+        ...(fullWidth && { width: "100%" }),
+        ...(fullHeight && { height: "100%" }),
+        ...(centered && {
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        ...(backgroundColor && { backgroundColor }),
+        ...(borderColor && { borderColor }),
+        ...(borderWidth !== undefined && { borderWidth }),
+        ...(borderRadius !== undefined && { borderRadius }),
+        ...(shadow && {
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+        }),
+    };
+    const finalStyle = Array.isArray(style)
+        ? [computedStyle, ...style]
+        : [computedStyle, style];
+    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: finalStyle, ...props });
+});
+exports.View.displayName = "View";
+// Convenience components
+exports.Card = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "card", ...props }));
+exports.Card.displayName = "Card";
+exports.Container = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "container", ...props }));
+exports.Container.displayName = "Container";
+exports.Surface = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "surface", ...props }));
+exports.Surface.displayName = "Surface";
+exports.Overlay = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "overlay", ...props }));
+exports.Overlay.displayName = "Overlay";
+exports.Row = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, direction: "row", ...props }));
+exports.Row.displayName = "Row";
+exports.Column = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, direction: "column", ...props }));
+exports.Column.displayName = "Column";
+exports.Center = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.View, { ref: ref, centered: true, ...props })));
+exports.Center.displayName = "Center";

package/dist/hooks/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// barrel file :)
+tslib_1.__exportStar(require("./useAvatars"), exports);
+tslib_1.__exportStar(require("./useCameraToggle"), exports);
+tslib_1.__exportStar(require("./useKeyboard"), exports);
+tslib_1.__exportStar(require("./useKeyboardSlide"), exports);
+tslib_1.__exportStar(require("./useLivestreamInfo"), exports);
+tslib_1.__exportStar(require("./useOuterAndInnerDimensions"), exports);
+tslib_1.__exportStar(require("./usePlayerDimensions"), exports);
+tslib_1.__exportStar(require("./usePointerDevice"), exports);
+tslib_1.__exportStar(require("./useSegmentDimensions"), exports);
+tslib_1.__exportStar(require("./useSegmentTiming"), exports);

package/dist/hooks/useAvatars.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvatars = useAvatars;
+const react_1 = require("react");
+const xrpc_1 = require("../streamplace-store/xrpc");
+function useAvatars(dids) {
+    let agent = (0, xrpc_1.usePDSAgent)();
+    const [profiles, setProfiles] = (0, react_1.useState)({});
+    const inFlight = (0, react_1.useRef)(new Set());
+    const missingDids = (0, react_1.useMemo)(() => dids.filter((did) => !(did in profiles) && !inFlight.current.has(did)), [dids, profiles]);
+    (0, react_1.useEffect)(() => {
+        if (missingDids.length === 0 || !agent)
+            return;
+        const toFetch = missingDids.slice(0, 25);
+        toFetch.forEach((did) => inFlight.current.add(did));
+        const fetchProfiles = async () => {
+            try {
+                const result = await agent.getProfiles({ actors: toFetch });
+                const newProfiles = {};
+                result.data.profiles.forEach((p) => {
+                    newProfiles[p.did] = p;
+                });
+                setProfiles((prev) => ({ ...prev, ...newProfiles }));
+            }
+            catch (e) {
+                console.error("Failed to fetch profiles", e);
+            }
+            finally {
+                toFetch.forEach((did) => inFlight.current.delete(did));
+            }
+        };
+        fetchProfiles();
+    }, [missingDids, agent]);
+    return profiles;
+}

package/dist/hooks/useCameraToggle.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCameraToggle = useCameraToggle;
+const player_store_1 = require("../player-store");
+function useCameraToggle() {
+    const ingestCamera = (0, player_store_1.usePlayerStore)((x) => x.ingestCamera);
+    const setIngestCamera = (0, player_store_1.usePlayerStore)((x) => x.setIngestCamera);
+    const doSetIngestCamera = () => {
+        setIngestCamera(ingestCamera === "user" ? "environment" : "user");
+    };
+    return { ingestCamera, doSetIngestCamera };
+}

package/dist/hooks/useKeyboard.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboard = useKeyboard;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+function useKeyboard() {
+    const [isKeyboardVisible, setIsKeyboardVisible] = (0, react_1.useState)(false);
+    const [keyboardHeight, setKeyboardHeight] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const willShowSubscription = react_native_1.Keyboard.addListener("keyboardWillShow", (e) => {
+            // setIsKeyboardVisible(true);
+            setKeyboardHeight(e.endCoordinates.height);
+            console.log("keyboardWillShow", e.endCoordinates.height);
+        });
+        const willHideSubscription = react_native_1.Keyboard.addListener("keyboardWillHide", (e) => {
+            // setIsKeyboardVisible(false);
+            setKeyboardHeight(0);
+            console.log("keyboardWillHide", e.endCoordinates.height);
+        });
+        const showSubscription = react_native_1.Keyboard.addListener("keyboardDidShow", (e) => {
+            setIsKeyboardVisible(true);
+            setKeyboardHeight(e.endCoordinates.height);
+            console.log("keyboardDidShow", e.endCoordinates.height);
+        });
+        const hideSubscription = react_native_1.Keyboard.addListener("keyboardDidHide", () => {
+            setIsKeyboardVisible(false);
+            setKeyboardHeight(0);
+        });
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+            willShowSubscription.remove();
+        };
+    }, []);
+    return { isKeyboardVisible, keyboardHeight };
+}

package/dist/hooks/useKeyboardSlide.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardSlide = useKeyboardSlide;
+const useKeyboard_1 = require("../hooks/useKeyboard");
+const useOuterAndInnerDimensions_1 = require("../hooks/useOuterAndInnerDimensions");
+function useKeyboardSlide() {
+    const { keyboardHeight } = (0, useKeyboard_1.useKeyboard)();
+    const { outerHeight, innerHeight } = (0, useOuterAndInnerDimensions_1.useOuterAndInnerDimensions)();
+    let slideKeyboard = 0;
+    if (keyboardHeight > 0) {
+        slideKeyboard = -keyboardHeight + (outerHeight - innerHeight);
+    }
+    return { keyboardHeight, slideKeyboard };
+}

package/dist/hooks/useLivestreamInfo.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLivestreamInfo = useLivestreamInfo;
+const react_1 = require("react");
+const livestream_store_1 = require("../livestream-store");
+const player_store_1 = require("../player-store");
+const streamplace_store_1 = require("../streamplace-store");
+function useLivestreamInfo(url) {
+    const ingest = (0, player_store_1.usePlayerStore)((x) => x.ingestConnectionState);
+    const profile = (0, livestream_store_1.useLivestreamStore)((x) => x.profile);
+    const ingestStarting = (0, player_store_1.usePlayerStore)((x) => x.ingestStarting);
+    const setIngestStarting = (0, player_store_1.usePlayerStore)((x) => x.setIngestStarting);
+    const setIngestLive = (0, player_store_1.usePlayerStore)((x) => x.setIngestLive);
+    const createStreamRecord = (0, streamplace_store_1.useCreateStreamRecord)();
+    const [title, setTitle] = (0, react_1.useState)("");
+    const [showCountdown, setShowCountdown] = (0, react_1.useState)(false);
+    const [recordSubmitted, setRecordSubmitted] = (0, react_1.useState)(false);
+    const handleSubmit = async () => {
+        try {
+            if (title !== "") {
+                setRecordSubmitted(true);
+                // Create the livestream record with title and custom url if available
+                await createStreamRecord({
+                    title,
+                    customUrl: url || null,
+                });
+            }
+        }
+        catch (error) {
+            console.error("Error creating livestream:", error);
+            throw new Error("Failed to create livestream record");
+        }
+        finally {
+            setRecordSubmitted(false);
+        }
+    };
+    const toggleGoLive = (keyboardHeight, closeKeyboard) => {
+        if (!ingestStarting) {
+            // Optionally close keyboard if provided
+            if (closeKeyboard)
+                closeKeyboard();
+            setShowCountdown(true);
+            setIngestStarting(true);
+            setIngestLive(true);
+            // wait ~3 seconds before announcing
+            setTimeout(() => {
+                handleSubmit();
+            }, 3000);
+        }
+        else {
+            setIngestStarting(false);
+            setIngestLive(false);
+        }
+    };
+    return {
+        ingest,
+        profile,
+        title,
+        setTitle,
+        showCountdown,
+        setShowCountdown,
+        recordSubmitted,
+        setRecordSubmitted,
+        ingestStarting,
+        setIngestStarting,
+        handleSubmit,
+        toggleGoLive,
+    };
+}

package/dist/hooks/useOuterAndInnerDimensions.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOuterAndInnerDimensions = useOuterAndInnerDimensions;
+const react_1 = require("react");
+function useOuterAndInnerDimensions() {
+    const [outerDimensions, setOuterDimensions] = (0, react_1.useState)({
+        width: 0,
+        height: 0,
+    });
+    const [innerDimensions, setInnerDimensions] = (0, react_1.useState)({
+        width: 0,
+        height: 0,
+    });
+    const onOuterLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setOuterDimensions({ width, height });
+    }, []);
+    const onInnerLayout = (0, react_1.useCallback)((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setInnerDimensions({ width, height });
+    }, []);
+    return {
+        outerWidth: outerDimensions.width,
+        outerHeight: outerDimensions.height,
+        innerWidth: innerDimensions.width,
+        innerHeight: innerDimensions.height,
+        onOuterLayout,
+        onInnerLayout,
+    };
+}

package/dist/hooks/usePlayerDimensions.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayerDimensions = usePlayerDimensions;
+const react_native_1 = require("react-native");
+const player_store_1 = require("../player-store");
+/**
+ * usePlayerDimensions
+ * Returns player and device dimensions, and whether the player aspect ratio is greater than the device's.
+ */
+function usePlayerDimensions() {
+    const { width, height } = react_native_1.Dimensions.get("window");
+    const pHeight = Number((0, player_store_1.usePlayerStore)((x) => x.playerHeight)) || 0;
+    const pWidth = Number((0, player_store_1.usePlayerStore)((x) => x.playerWidth)) || 0;
+    const isPlayerRatioGreater = pHeight > 0 && pWidth > 0 ? pWidth / pHeight > width / height : false;
+    return {
+        width,
+        height,
+        pWidth,
+        pHeight,
+        isPlayerRatioGreater,
+    };
+}

package/dist/hooks/usePointerDevice.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePointerDevice = usePointerDevice;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/**
+ * Hook to detect if the device is primarily mouse-driven vs touch-driven
+ * Uses CSS media queries to detect hover and pointer capabilities
+ */
+function usePointerDevice() {
+    const [pointerDevice, setPointerDevice] = (0, react_1.useState)(() => {
+        // Default values for non-web platforms
+        if (react_native_1.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,
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        // Only run on web platforms
+        if (react_native_1.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/dist/hooks/useSegmentDimensions.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentDimensions = useSegmentDimensions;
+const livestream_store_1 = require("../livestream-store");
+function useSegmentDimensions() {
+    const latestSegment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
+    let seg = latestSegment?.video && latestSegment.video[0];
+    let ratio = {
+        height: seg?.height || 0,
+        width: seg?.width || 0,
+    };
+    return {
+        isPlayerRatioGreater: ratio.width > ratio.height,
+        height: ratio.height,
+        width: ratio.width,
+    };
+}

package/dist/hooks/useSegmentTiming.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentTiming = useSegmentTiming;
+const react_1 = require("react");
+const livestream_store_1 = require("../livestream-store");
+function getLiveConnectionQuality(timeBetweenSegments, range, numOfSegments = 1) {
+    if (timeBetweenSegments === null || range === null)
+        return "poor";
+    if (timeBetweenSegments <= 1500 && range <= (1500 * 60) / numOfSegments) {
+        return "good";
+    }
+    if (timeBetweenSegments <= 3000 && range <= (3000 * 60) / numOfSegments) {
+        return "degraded";
+    }
+    return "poor";
+}
+function useSegmentTiming() {
+    const latestSegment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
+    const [segmentDeltas, setSegmentDeltas] = (0, react_1.useState)([]);
+    const prevSegmentRef = (0, react_1.useRef)();
+    const prevTimestampRef = (0, react_1.useRef)(null);
+    // Dummy state to force update every second
+    const [, setNow] = (0, react_1.useState)(Date.now());
+    (0, react_1.useEffect)(() => {
+        const interval = setInterval(() => {
+            setNow(Date.now());
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (latestSegment && prevSegmentRef.current !== latestSegment) {
+            const now = Date.now();
+            if (prevTimestampRef.current !== null) {
+                const delta = now - prevTimestampRef.current;
+                // Only store the last 25 deltas
+                setSegmentDeltas((prev) => [...prev, delta].slice(-25));
+            }
+            prevTimestampRef.current = now;
+            prevSegmentRef.current = latestSegment;
+        }
+    }, [latestSegment]);
+    // The most recent time between segments
+    const timeBetweenSegments = segmentDeltas.length > 0
+        ? segmentDeltas[segmentDeltas.length - 1]
+        : prevTimestampRef.current
+            ? Date.now() - prevTimestampRef.current
+            : null;
+    // Calculate mean and range of deltas
+    const mean = segmentDeltas.length > 0
+        ? Math.round(segmentDeltas.reduce((acc, curr) => acc + curr, 0) /
+            segmentDeltas.length)
+        : null;
+    const range = segmentDeltas.length > 0
+        ? Math.max(...segmentDeltas) - Math.min(...segmentDeltas)
+        : null;
+    let to_ret = {
+        segmentDeltas,
+        timeBetweenSegments,
+        mean,
+        range,
+        connectionQuality: "poor",
+    };
+    to_ret.connectionQuality = getLiveConnectionQuality(timeBetweenSegments, range, segmentDeltas.length);
+    return to_ret;
+}