@streamplace/components 0.0.1 → 0.7.0

package/dist/hooks/useAvatars.js

@@ -0,0 +1,32 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+export function useAvatars(dids) {
+    let agent = usePDSAgent();
+    const [profiles, setProfiles] = useState({});
+    const inFlight = useRef(new Set());
+    const missingDids = useMemo(() => dids.filter((did) => !(did in profiles) && !inFlight.current.has(did)), [dids, profiles]);
+    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,9 @@
+import { usePlayerStore } from "../player-store";
+export function useCameraToggle() {
+    const ingestCamera = usePlayerStore((x) => x.ingestCamera);
+    const setIngestCamera = usePlayerStore((x) => x.setIngestCamera);
+    const doSetIngestCamera = () => {
+        setIngestCamera(ingestCamera === "user" ? "environment" : "user");
+    };
+    return { ingestCamera, doSetIngestCamera };
+}

package/dist/hooks/useKeyboard.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { Keyboard } from "react-native";
+export function useKeyboard() {
+    const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    useEffect(() => {
+        const willShowSubscription = Keyboard.addListener("keyboardWillShow", (e) => {
+            // setIsKeyboardVisible(true);
+            setKeyboardHeight(e.endCoordinates.height);
+            console.log("keyboardWillShow", e.endCoordinates.height);
+        });
+        const willHideSubscription = Keyboard.addListener("keyboardWillHide", (e) => {
+            // setIsKeyboardVisible(false);
+            setKeyboardHeight(0);
+            console.log("keyboardWillHide", e.endCoordinates.height);
+        });
+        const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+            setIsKeyboardVisible(true);
+            setKeyboardHeight(e.endCoordinates.height);
+            console.log("keyboardDidShow", e.endCoordinates.height);
+        });
+        const hideSubscription = 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,11 @@
+import { useKeyboard } from "../hooks/useKeyboard";
+import { useOuterAndInnerDimensions } from "../hooks/useOuterAndInnerDimensions";
+export function useKeyboardSlide() {
+    const { keyboardHeight } = useKeyboard();
+    const { outerHeight, innerHeight } = useOuterAndInnerDimensions();
+    let slideKeyboard = 0;
+    if (keyboardHeight > 0) {
+        slideKeyboard = -keyboardHeight + (outerHeight - innerHeight);
+    }
+    return { keyboardHeight, slideKeyboard };
+}

package/dist/hooks/useLivestreamInfo.js

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { useLivestreamStore } from "../livestream-store";
+import { usePlayerStore } from "../player-store";
+import { useCreateStreamRecord } from "../streamplace-store";
+export function useLivestreamInfo() {
+    const ingest = usePlayerStore((x) => x.ingestConnectionState);
+    const profile = useLivestreamStore((x) => x.profile);
+    const ingestStarting = usePlayerStore((x) => x.ingestStarting);
+    const setIngestStarting = usePlayerStore((x) => x.setIngestStarting);
+    const setIngestLive = usePlayerStore((x) => x.setIngestLive);
+    const createStreamRecord = useCreateStreamRecord();
+    const [title, setTitle] = useState("");
+    const [showCountdown, setShowCountdown] = useState(false);
+    const [recordSubmitted, setRecordSubmitted] = useState(false);
+    const handleSubmit = async () => {
+        try {
+            if (title !== "") {
+                setRecordSubmitted(true);
+                await createStreamRecord(title);
+            }
+        }
+        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,27 @@
+import { useCallback, useState } from "react";
+export function useOuterAndInnerDimensions() {
+    const [outerDimensions, setOuterDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+    const [innerDimensions, setInnerDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+    const onOuterLayout = useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setOuterDimensions({ width, height });
+    }, []);
+    const onInnerLayout = 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,19 @@
+import { Dimensions } from "react-native";
+import { usePlayerStore } from "../player-store";
+/**
+ * usePlayerDimensions
+ * Returns player and device dimensions, and whether the player aspect ratio is greater than the device's.
+ */
+export function usePlayerDimensions() {
+    const { width, height } = Dimensions.get("window");
+    const pHeight = Number(usePlayerStore((x) => x.playerHeight)) || 0;
+    const pWidth = Number(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/useSegmentTiming.js

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from "react";
+import { useLivestreamStore } from "../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";
+}
+export function useSegmentTiming() {
+    const latestSegment = useLivestreamStore((x) => x.segment);
+    const [segmentDeltas, setSegmentDeltas] = useState([]);
+    const prevSegmentRef = useRef();
+    const prevTimestampRef = useRef(null);
+    // Dummy state to force update every second
+    const [, setNow] = useState(Date.now());
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(Date.now());
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    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;
+}

package/dist/index.js

@@ -0,0 +1,16 @@
+// barrel file :)
+export * from "./livestream-provider";
+export * from "./livestream-store";
+export * from "./player-store";
+export * from "./streamplace-provider";
+export * from "./streamplace-store";
+export { PlayerProvider, withPlayerProvider, } from "./player-store/player-provider";
+export { usePlayerContext } from "./player-store/player-store";
+export { Player, PlayerUI } from "./components/mobile-player/player";
+export * as ui from "./components/ui";
+export * from "./components/ui";
+export * as theme from "./lib/theme";
+export * as atoms from "./lib/theme/atoms";
+export * from "./hooks";
+export * from "./components/chat/chat";
+export * from "./components/chat/chat-box";

package/dist/lib/facet.js

@@ -0,0 +1,88 @@
+const segment = (text, features) => {
+    return { text, features: text.length > 0 ? features : undefined };
+};
+export const segmentize = (text, facets) => {
+    if (facets === undefined || facets.length === 0) {
+        return [segment(text, undefined)];
+    }
+    const segments = [];
+    const utf16Length = text.length;
+    let utf16Cursor = 0;
+    let utf8Cursor = 0;
+    const advanceCursor = (startUtf16, endUtf8) => {
+        let curs = startUtf16;
+        // Fast-path for entirely ASCII text
+        const isLikelyAsciiText = text.charCodeAt(curs) < 0x80;
+        if (isLikelyAsciiText) {
+            curs += 1;
+            utf8Cursor += 1;
+            // SIMD-like batch processing
+            while (utf8Cursor + 8 <= endUtf8 && curs + 8 <= utf16Length) {
+                const char1 = text.charCodeAt(curs);
+                const char2 = text.charCodeAt(curs + 1);
+                const char3 = text.charCodeAt(curs + 2);
+                const char4 = text.charCodeAt(curs + 3);
+                const char5 = text.charCodeAt(curs + 4);
+                const char6 = text.charCodeAt(curs + 5);
+                const char7 = text.charCodeAt(curs + 6);
+                const char8 = text.charCodeAt(curs + 7);
+                if ((char1 | char2 | char3 | char4 | char5 | char6 | char7 | char8) <
+                    0x80) {
+                    curs += 8;
+                    utf8Cursor += 8;
+                    continue;
+                }
+                break;
+            }
+        }
+        // Process remaining characters individually
+        while (utf8Cursor < endUtf8 && curs < utf16Length) {
+            const code = text.charCodeAt(curs);
+            if (code < 0x80) {
+                curs += 1;
+                utf8Cursor += 1;
+            }
+            else if (code < 0x800) {
+                curs += 1;
+                utf8Cursor += 2;
+            }
+            else if (code < 0xd800 || code > 0xdbff) {
+                curs += 1;
+                utf8Cursor += 3;
+            }
+            else {
+                curs += 2;
+                utf8Cursor += 4;
+            }
+        }
+        return curs;
+    };
+    // Process facets
+    for (let idx = 0, len = facets.length; idx < len; idx++) {
+        const facet = facets[idx];
+        const { byteStart, byteEnd } = facet.index;
+        const features = facet.features;
+        if (byteStart > byteEnd || features.length === 0) {
+            continue;
+        }
+        if (utf8Cursor < byteStart) {
+            const nextUtf16Cursor = advanceCursor(utf16Cursor, byteStart);
+            if (nextUtf16Cursor > utf16Cursor) {
+                segments.push(segment(text.slice(utf16Cursor, nextUtf16Cursor), undefined));
+            }
+            utf16Cursor = nextUtf16Cursor;
+        }
+        {
+            const nextUtf16Cursor = advanceCursor(utf16Cursor, byteEnd);
+            if (nextUtf16Cursor > utf16Cursor) {
+                segments.push(segment(text.slice(utf16Cursor, nextUtf16Cursor), features));
+            }
+            utf16Cursor = nextUtf16Cursor;
+        }
+    }
+    // Handle remaining text
+    if (utf16Cursor < utf16Length) {
+        segments.push(segment(text.slice(utf16Cursor), undefined));
+    }
+    return segments;
+};