@streamplace/components 0.7.14 → 0.7.17

package/dist/hooks/useCameraToggle.js

@@ -1,12 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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() {
-    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);
-                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

@@ -1,30 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-"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

@@ -1,71 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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;
-}

package/dist/index.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dashboard = exports.VideoRetry = exports.zero = exports.ui = exports.PlayerUI = exports.Player = exports.usePlayerContext = exports.withPlayerProvider = exports.PlayerProvider = void 0;
-const tslib_1 = require("tslib");
-// barrel file :)
-tslib_1.__exportStar(require("./livestream-provider"), exports);
-tslib_1.__exportStar(require("./livestream-store"), exports);
-tslib_1.__exportStar(require("./player-store"), exports);
-tslib_1.__exportStar(require("./streamplace-provider"), exports);
-tslib_1.__exportStar(require("./streamplace-store"), exports);
-var player_provider_1 = require("./player-store/player-provider");
-Object.defineProperty(exports, "PlayerProvider", { enumerable: true, get: function () { return player_provider_1.PlayerProvider; } });
-Object.defineProperty(exports, "withPlayerProvider", { enumerable: true, get: function () { return player_provider_1.withPlayerProvider; } });
-var player_store_1 = require("./player-store/player-store");
-Object.defineProperty(exports, "usePlayerContext", { enumerable: true, get: function () { return player_store_1.usePlayerContext; } });
-var player_1 = require("./components/mobile-player/player");
-Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return player_1.Player; } });
-Object.defineProperty(exports, "PlayerUI", { enumerable: true, get: function () { return player_1.PlayerUI; } });
-exports.ui = tslib_1.__importStar(require("./components/ui"));
-tslib_1.__exportStar(require("./components/ui"), exports);
-exports.zero = tslib_1.__importStar(require("./ui"));
-tslib_1.__exportStar(require("./hooks"), exports);
-// Theme system exports
-tslib_1.__exportStar(require("./lib/theme"), exports);
-tslib_1.__exportStar(require("./components/chat/chat"), exports);
-tslib_1.__exportStar(require("./components/chat/chat-box"), exports);
-tslib_1.__exportStar(require("./components/chat/system-message"), exports);
-var video_retry_1 = require("./components/mobile-player/video-retry");
-Object.defineProperty(exports, "VideoRetry", { enumerable: true, get: function () { return tslib_1.__importDefault(video_retry_1).default; } });
-tslib_1.__exportStar(require("./lib/system-messages"), exports);
-tslib_1.__exportStar(require("./components/share/sharesheet"), exports);
-tslib_1.__exportStar(require("./components/keep-awake"), exports);
-// Dashboard components
-exports.Dashboard = tslib_1.__importStar(require("./components/dashboard"));

package/dist/lib/facet.js

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentize = void 0;
-const segment = (text, features) => {
-    return { text, features: text.length > 0 ? features : undefined };
-};
-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;
-};
-exports.segmentize = segmentize;

package/dist/lib/system-messages.js

@@ -1,101 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseSystemMessageMetadata = exports.getSystemMessageType = exports.isSystemMessage = exports.SystemMessages = exports.createSystemMessage = exports.SystemMessageType = void 0;
-var SystemMessageType;
-(function (SystemMessageType) {
-    SystemMessageType["stream_start"] = "stream_start";
-    SystemMessageType["stream_end"] = "stream_end";
-    SystemMessageType["notification"] = "notification";
-})(SystemMessageType || (exports.SystemMessageType = SystemMessageType = {}));
-/**
- * Creates a system message with the proper structure
- * @param type The type of system message
- * @param text The message text
- * @param metadata Optional metadata for the message
- * @returns A properly formatted ChatMessageViewHydrated object
- */
-const createSystemMessage = (type, text, metadata, date = new Date()) => {
-    const now = date;
-    return {
-        uri: `at://did:sys:system/place.stream.chat.message/${now.getTime()}`,
-        cid: `system-${now.getTime()}`,
-        author: {
-            did: "did:sys:system",
-            handle: type, // Use handle to specify the type of system message
-        },
-        record: {
-            text,
-            createdAt: now.toISOString(),
-            streamer: "system",
-            $type: "place.stream.chat.message",
-        },
-        indexedAt: now.toISOString(),
-        chatProfile: {
-            color: { red: 128, green: 128, blue: 128 }, // Gray color for system messages
-        },
-    };
-};
-exports.createSystemMessage = createSystemMessage;
-/**
- * System message factory functions for common scenarios
- */
-exports.SystemMessages = {
-    streamStart: (streamerName) => (0, exports.createSystemMessage)(SystemMessageType.stream_start, `Now streaming - ${streamerName}`, {
-        streamerName,
-    }),
-    // technically, streams can't 'end' on Streamplace
-    // possibly we could use deleting or editing streams (`endedAt` param) for this?
-    streamEnd: (duration) => (0, exports.createSystemMessage)(SystemMessageType.stream_end, duration ? `Stream has ended. Duration: ${duration}` : "Stream has ended", { duration }),
-    notification: (message) => (0, exports.createSystemMessage)(SystemMessageType.notification, message),
-};
-/**
- * Checks if a message is a system message
- * @param message The message to check
- * @returns True if the message is a system message
- */
-const isSystemMessage = (message) => {
-    return message.author.did === "did:sys:system";
-};
-exports.isSystemMessage = isSystemMessage;
-/**
- * Gets the system message type from a message
- * @param message The message to check
- * @returns The system message type or null if not a system message
- */
-const getSystemMessageType = (message) => {
-    if (!(0, exports.isSystemMessage)(message)) {
-        return null;
-    }
-    return message.author.handle;
-};
-exports.getSystemMessageType = getSystemMessageType;
-/**
- * Parses metadata from a system message based on its type
- * @param message The system message to parse
- * @returns The parsed metadata
- */
-const parseSystemMessageMetadata = (message) => {
-    const metadata = {};
-    const type = (0, exports.getSystemMessageType)(message);
-    const text = message.record.text;
-    if (!type)
-        return metadata;
-    switch (type) {
-        case "stream_end": {
-            const durationMatch = text.match(/Duration:\s*(\d+:\d+(?::\d+)?)/);
-            if (durationMatch) {
-                metadata.duration = durationMatch[1];
-            }
-            break;
-        }
-        case "stream_start": {
-            const streamerMatch = text.match(/^(.+?)\s+is now live!/);
-            if (streamerMatch) {
-                metadata.streamerName = streamerMatch[1];
-            }
-            break;
-        }
-    }
-    return metadata;
-};
-exports.parseSystemMessageMetadata = parseSystemMessageMetadata;