@streamplace/components 0.7.18 → 0.7.21

package/dist/lib/utils.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeStyles = mergeStyles;
+exports.createStyleMerger = createStyleMerger;
+exports.conditionalStyle = conditionalStyle;
+exports.responsiveValue = responsiveValue;
+exports.platformStyle = platformStyle;
+exports.hexToRgba = hexToRgba;
+exports.debounce = debounce;
+exports.throttle = throttle;
+exports.forwardProps = forwardProps;
+const react_native_1 = require("react-native");
+/**
+ * Merges React Native styles similar to how cn() merges CSS classes
+ * Handles arrays, objects, and falsy values
+ */
+function mergeStyles(...styles) {
+    const validStyles = styles.filter(Boolean).flat();
+    return react_native_1.StyleSheet.flatten(validStyles) || {};
+}
+/**
+ * Creates a style merger function that includes base styles
+ * Useful for component variants
+ */
+function createStyleMerger(baseStyle) {
+    return (...styles) => {
+        return mergeStyles(baseStyle, ...styles);
+    };
+}
+/**
+ * Conditionally applies styles based on boolean conditions
+ */
+function conditionalStyle(condition, trueStyle, falseStyle) {
+    return condition ? trueStyle : falseStyle;
+}
+/**
+ * Creates responsive values based on screen dimensions
+ */
+function responsiveValue(values, screenWidth) {
+    if (screenWidth >= 1280 && values.xl !== undefined)
+        return values.xl;
+    if (screenWidth >= 1024 && values.lg !== undefined)
+        return values.lg;
+    if (screenWidth >= 768 && values.md !== undefined)
+        return values.md;
+    if (screenWidth >= 640 && values.sm !== undefined)
+        return values.sm;
+    return values.default;
+}
+/**
+ * Creates platform-specific styles
+ */
+function platformStyle(styles) {
+    const Platform = require("react-native").Platform;
+    if (Platform.OS === "ios" && styles.ios)
+        return styles.ios;
+    if (Platform.OS === "android" && styles.android)
+        return styles.android;
+    if (Platform.OS === "web" && styles.web)
+        return styles.web;
+    return styles.default || {};
+}
+/**
+ * Converts hex color to rgba
+ */
+function hexToRgba(hex, alpha = 1) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result)
+        return hex;
+    const r = parseInt(result[1], 16);
+    const g = parseInt(result[2], 16);
+    const b = parseInt(result[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/**
+ * Creates a debounced function for performance
+ */
+function debounce(func, delay) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func(...args), delay);
+    };
+}
+/**
+ * Creates a throttled function for performance
+ */
+function throttle(func, delay) {
+    let lastCall = 0;
+    return (...args) => {
+        const now = Date.now();
+        if (now - lastCall >= delay) {
+            lastCall = now;
+            func(...args);
+        }
+    };
+}
+/**
+ * Type-safe component prop forwarding
+ */
+function forwardProps(props, omit) {
+    const result = { ...props };
+    omit.forEach((key) => delete result[key]);
+    return result;
+}

package/dist/livestream-provider/index.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LivestreamProvider = LivestreamProvider;
+exports.WebsocketWatcher = WebsocketWatcher;
+exports.LivestreamPoller = LivestreamPoller;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const livestream_store_1 = require("../livestream-store");
+const websocket_1 = require("./websocket");
+function LivestreamProvider({ children, src, }) {
+    const context = (0, react_1.useContext)(livestream_store_1.LivestreamContext);
+    const store = (0, react_1.useRef)((0, livestream_store_1.makeLivestreamStore)()).current;
+    if (context) {
+        // this is ok, there's use cases for having one in another
+        // like having a player component that's independently usable
+        // but can also be embedded within an entire livestream page
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    window.livestreamStore = store;
+    return ((0, jsx_runtime_1.jsx)(livestream_store_1.LivestreamContext.Provider, { value: { store: store }, children: (0, jsx_runtime_1.jsx)(LivestreamPoller, { src: src, children: children }) }));
+}
+function WebsocketWatcher({ src }) {
+    (0, websocket_1.useLivestreamWebsocket)(src);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+}
+function LivestreamPoller({ children, src, }) {
+    // Websocket watcher is a sibling instead of a parent to avoid
+    // re-rendering when the websocket does stuff
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(WebsocketWatcher, { src: src }), children] }));
+}

package/dist/livestream-provider/websocket.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLivestreamWebsocket = useLivestreamWebsocket;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const react_use_websocket_1 = tslib_1.__importDefault(require("react-use-websocket"));
+const livestream_store_1 = require("../livestream-store");
+const streamplace_store_1 = require("../streamplace-store");
+function useLivestreamWebsocket(src) {
+    const url = (0, streamplace_store_1.useUrl)();
+    const handleWebSocketMessages = (0, livestream_store_1.useHandleWebsocketMessages)();
+    let wsUrl = url.replace(/^http\:/, "ws:");
+    wsUrl = wsUrl.replace(/^https\:/, "wss:");
+    const ref = (0, react_1.useRef)([]);
+    const handle = (0, react_1.useRef)(null);
+    const { readyState } = (0, react_use_websocket_1.default)(`${wsUrl}/api/websocket/${src}`, {
+        reconnectInterval: 1000,
+        shouldReconnect: () => true,
+        onOpen: () => {
+            ref.current = [];
+        },
+        onError: (e) => {
+            console.log("onError", e);
+        },
+        // spamming the redux store with messages causes a zillion re-renders,
+        // so we batch them up a bit
+        onMessage: (msg) => {
+            try {
+                const data = JSON.parse(msg.data);
+                ref.current.push(data);
+                if (handle.current) {
+                    return;
+                }
+                handle.current = setTimeout(() => {
+                    handleWebSocketMessages(ref.current);
+                    ref.current = [];
+                    handle.current = null;
+                }, 250);
+            }
+            catch (e) {
+                console.log("onMessage parse error", e);
+            }
+        },
+    });
+}

package/dist/livestream-store/chat.js

@@ -0,0 +1,308 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = exports.useDeleteChatMessage = exports.useCreateChatMessage = exports.useAddPendingHide = exports.usePendingHides = exports.useSetReplyToMessage = exports.useReplyToMessage = void 0;
+const api_1 = require("@atproto/api");
+const react_1 = require("react");
+const streamplace_store_1 = require("../streamplace-store");
+const xrpc_1 = require("../streamplace-store/xrpc");
+const livestream_store_1 = require("./livestream-store");
+const useReplyToMessage = () => (0, livestream_store_1.useLivestreamStore)((state) => state.replyToMessage);
+exports.useReplyToMessage = useReplyToMessage;
+const useSetReplyToMessage = () => {
+    const store = (0, livestream_store_1.getStoreFromContext)();
+    return (0, react_1.useCallback)((message) => {
+        store.setState({ replyToMessage: message });
+    }, [store]);
+};
+exports.useSetReplyToMessage = useSetReplyToMessage;
+const usePendingHides = () => (0, livestream_store_1.useLivestreamStore)((state) => state.pendingHides);
+exports.usePendingHides = usePendingHides;
+const useAddPendingHide = () => {
+    const store = (0, livestream_store_1.getStoreFromContext)();
+    return (0, react_1.useCallback)((messageUri) => {
+        const state = store.getState();
+        if (!state.pendingHides.includes(messageUri)) {
+            const newPendingHides = [...state.pendingHides, messageUri];
+            const newState = (0, exports.reduceChat)(state, [], [], [messageUri]);
+            store.setState({
+                ...newState,
+                pendingHides: newPendingHides,
+            });
+        }
+    }, [store]);
+};
+exports.useAddPendingHide = useAddPendingHide;
+const useCreateChatMessage = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const store = (0, livestream_store_1.getStoreFromContext)();
+    const userDID = (0, streamplace_store_1.useDID)();
+    const userHandle = (0, streamplace_store_1.useHandle)();
+    const chatProfile = (0, streamplace_store_1.useChatProfile)();
+    return async (msg) => {
+        if (!pdsAgent || !userDID) {
+            throw new Error("No PDS agent or user DID found");
+        }
+        let state = store.getState();
+        const streamerProfile = state.profile;
+        if (!streamerProfile) {
+            throw new Error("Profile not found");
+        }
+        const rt = new api_1.RichText({ text: msg.text });
+        await rt.detectFacets(pdsAgent);
+        const record = {
+            text: msg.text,
+            createdAt: new Date().toISOString(),
+            streamer: streamerProfile.did,
+            facets: rt.facets,
+            ...(msg.reply
+                ? {
+                    reply: {
+                        root: {
+                            cid: msg.reply.cid,
+                            uri: msg.reply.uri,
+                        },
+                        parent: {
+                            cid: msg.reply.cid,
+                            uri: msg.reply.uri,
+                        },
+                    },
+                }
+                : {}),
+        };
+        const localChat = {
+            uri: `local-${Date.now()}`,
+            cid: "",
+            author: {
+                did: userDID,
+                handle: userHandle || userDID,
+            },
+            record: record,
+            indexedAt: new Date().toISOString(),
+            chatProfile: chatProfile || undefined,
+        };
+        state = (0, exports.reduceChat)(state, [localChat], [], []);
+        store.setState(state);
+        await pdsAgent.com.atproto.repo.createRecord({
+            repo: userDID,
+            collection: "place.stream.chat.message",
+            record,
+        });
+    };
+};
+exports.useCreateChatMessage = useCreateChatMessage;
+const useDeleteChatMessage = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    if (!pdsAgent) {
+        throw new Error("No PDS agent found");
+    }
+    const userDID = (0, streamplace_store_1.useDID)();
+    if (!userDID) {
+        throw new Error("No user DID found");
+    }
+    return async (uri) => {
+        const rkey = uri.split("/").pop();
+        if (!rkey) {
+            throw new Error("No rkey found");
+        }
+        return await pdsAgent.com.atproto.repo.deleteRecord({
+            repo: userDID,
+            collection: "place.stream.chat.message",
+            rkey: rkey,
+        });
+    };
+};
+exports.useDeleteChatMessage = useDeleteChatMessage;
+const buildSortedChatList = (chatIndex, existingChatList, newMessages, removedKeys) => {
+    const sortedKeys = Object.keys(chatIndex).sort((a, b) => {
+        const aTime = parseInt(a.split("-")[0], 10);
+        const bTime = parseInt(b.split("-")[0], 10);
+        return bTime - aTime;
+    });
+    return sortedKeys
+        .map((key) => chatIndex[key])
+        .filter((msg) => !removedKeys.has(msg.uri));
+};
+const profileIsDifferent = (newProfile, oldProfile) => {
+    if (!oldProfile) {
+        return true;
+    }
+    if (!newProfile) {
+        return false;
+    }
+    if (!oldProfile.color) {
+        return true;
+    }
+    if (!newProfile.color) {
+        // idk. shouldn't happen.
+        return false;
+    }
+    const { red: newRed, green: newGreen, blue: newBlue } = newProfile.color;
+    const { red: oldRed, green: oldGreen, blue: oldBlue } = oldProfile.color;
+    return newRed !== oldRed || newGreen !== oldGreen || newBlue !== oldBlue;
+};
+const reduceChatIncremental = (state, newMessages, blocks, hideUris = []) => {
+    if (newMessages.length === 0 &&
+        blocks.length === 0 &&
+        hideUris.length === 0) {
+        return state;
+    }
+    const newChatIndex = { ...state.chatIndex };
+    const newAuthors = { ...state.authors };
+    let hasChanges = false;
+    const removedKeys = new Set();
+    console.log("newMessages", newMessages);
+    for (const msg of newMessages) {
+        if (msg.deleted) {
+            hasChanges = true;
+            console.log("deleted", msg.uri);
+            removedKeys.add(msg.uri);
+        }
+    }
+    newMessages = newMessages.filter((msg) => msg.deleted !== true);
+    // handle blocks
+    if (blocks.length > 0) {
+        const blockedDIDs = new Set(blocks.map((block) => block.record.subject));
+        for (const [key, message] of Object.entries(newChatIndex)) {
+            if (blockedDIDs.has(message.author.did)) {
+                delete newChatIndex[key];
+                removedKeys.add(key);
+                hasChanges = true;
+            }
+        }
+    }
+    if (hideUris.length > 0) {
+        for (const [key, message] of Object.entries(newChatIndex)) {
+            if (hideUris.includes(message.uri)) {
+                delete newChatIndex[key];
+                removedKeys.add(key);
+                hasChanges = true;
+            }
+        }
+    }
+    const messagesToAdd = [];
+    for (const message of newMessages) {
+        // don't worry about messages that will be hidden
+        if (state.pendingHides.includes(message.uri)) {
+            continue;
+        }
+        const date = new Date(message.record.createdAt);
+        const key = `${date.getTime()}-${message.uri}`;
+        // only change the ref if the profile is different to avoid re-renders elsewhere
+        if (profileIsDifferent(message.chatProfile, newAuthors[message.author.did])) {
+            newAuthors[message.author.did] = message.chatProfile;
+        }
+        // skip messages we already have
+        if (newChatIndex[key] && newChatIndex[key].uri === message.uri) {
+            continue;
+        }
+        // if we have a local message, replace it with the new one
+        if (!message.uri.startsWith("local-")) {
+            const existingLocalKey = Object.keys(newChatIndex).find((k) => {
+                const msg = newChatIndex[k];
+                return (msg.uri.startsWith("local-") &&
+                    msg.record.text === message.record.text &&
+                    msg.author.did === message.author.did &&
+                    Math.abs(new Date(msg.record.createdAt).getTime() - date.getTime()) <
+                        10000 // Within 10 seconds
+                );
+            });
+            if (existingLocalKey) {
+                delete newChatIndex[existingLocalKey];
+                removedKeys.add(existingLocalKey);
+                hasChanges = true;
+            }
+        }
+        // add reply info
+        let processedMessage = message;
+        if (message.record.reply) {
+            const reply = message.record.reply;
+            const parentUri = reply?.parent?.uri || reply?.root?.uri;
+            if (parentUri) {
+                const parentMsgKey = Object.keys(newChatIndex).find((k) => newChatIndex[k].uri === parentUri);
+                if (parentMsgKey) {
+                    const parentMsg = newChatIndex[parentMsgKey];
+                    // Don't allow replies to system messages
+                    if (parentMsg.author.did !== "did:sys:system") {
+                        processedMessage = {
+                            ...message,
+                            replyTo: {
+                                cid: parentMsg.cid,
+                                uri: parentMsg.uri,
+                                author: parentMsg.author,
+                                record: parentMsg.record,
+                                chatProfile: parentMsg.chatProfile,
+                                indexedAt: parentMsg.indexedAt,
+                            },
+                        };
+                    }
+                }
+            }
+        }
+        messagesToAdd.push({ key, message: processedMessage });
+        hasChanges = true;
+    }
+    // Add new messages to index
+    for (const { key, message } of messagesToAdd) {
+        newChatIndex[key] = message;
+    }
+    // only rebuild if we have changes
+    if (!hasChanges) {
+        return state;
+    }
+    // Build the new sorted chat list efficiently
+    const newChatList = buildSortedChatList(newChatIndex, state.chat, messagesToAdd, removedKeys);
+    // Clean up pendingHides - remove URIs that we've now processed
+    let newPendingHides = state.pendingHides;
+    if (hideUris.length > 0) {
+        newPendingHides = state.pendingHides.filter((uri) => !hideUris.includes(uri));
+    }
+    return {
+        ...state,
+        authors: newAuthors,
+        chatIndex: newChatIndex,
+        chat: newChatList,
+        pendingHides: newPendingHides,
+    };
+};
+exports.reduceChatIncremental = reduceChatIncremental;
+const useSubmitReport = () => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const userDID = (0, streamplace_store_1.useDID)();
+    return (0, react_1.useCallback)(async (subject, reasonType, reason, 
+    // no clue about this
+    moderationSvcDid = "did:web:stream.place") => {
+        if (!pdsAgent || !userDID) {
+            throw new Error("No PDS agent or user DID found");
+        }
+        try {
+            const response = await pdsAgent.com.atproto.moderation.createReport({
+                reasonType,
+                reason,
+                subject: subject,
+            }, {
+                headers: {
+                // "atproto-proxy": `${userDID}#atproto_labeler`,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error("Failed to submit report:", error);
+            throw error;
+        }
+    }, [pdsAgent, userDID]);
+};
+exports.useSubmitReport = useSubmitReport;
+const useReportChatMessage = () => {
+    const submitReport = (0, exports.useSubmitReport)();
+    return (0, react_1.useCallback)(async (message, reasonType, reason) => {
+        const reportSubject = {
+            $type: "com.atproto.repo.strongRef",
+            uri: message.uri,
+            cid: message.cid,
+        };
+        return await submitReport(reportSubject, reasonType, reason);
+    }, [submitReport]);
+};
+exports.useReportChatMessage = useReportChatMessage;
+exports.reduceChat = exports.reduceChatIncremental;

package/dist/livestream-store/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LivestreamContext = void 0;
+const react_1 = require("react");
+exports.LivestreamContext = (0, react_1.createContext)(null);

package/dist/livestream-store/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./chat"), exports);
+tslib_1.__exportStar(require("./context"), exports);
+tslib_1.__exportStar(require("./livestream-store"), exports);
+tslib_1.__exportStar(require("./stream-key"), exports);

package/dist/livestream-store/livestream-state.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/livestream-store/livestream-store.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenditions = exports.useSegment = exports.useLivestream = exports.useViewers = exports.useProfile = exports.useChat = exports.useHandleWebsocketMessages = exports.makeLivestreamStore = void 0;
+exports.getStoreFromContext = getStoreFromContext;
+exports.useLivestreamStore = useLivestreamStore;
+const react_1 = require("react");
+const zustand_1 = require("zustand");
+const context_1 = require("./context");
+const websocket_consumer_1 = require("./websocket-consumer");
+const makeLivestreamStore = () => {
+    return (0, zustand_1.createStore)()((set) => ({
+        profile: null,
+        chatIndex: {},
+        chat: [],
+        livestream: null,
+        viewers: null,
+        pendingHides: [],
+        segment: null,
+        renditions: [],
+        replyToMessage: null,
+        streamKey: null,
+        setStreamKey: (sk) => set({ streamKey: sk }),
+        authors: {},
+        recentSegments: [],
+        problems: [],
+    }));
+};
+exports.makeLivestreamStore = makeLivestreamStore;
+function getStoreFromContext() {
+    const context = (0, react_1.useContext)(context_1.LivestreamContext);
+    if (!context) {
+        throw new Error("useLivestreamStore must be used within a LivestreamProvider");
+    }
+    return context.store;
+}
+function useLivestreamStore(selector) {
+    const store = getStoreFromContext();
+    return (0, zustand_1.useStore)(store, selector);
+}
+const useHandleWebsocketMessages = () => {
+    const store = getStoreFromContext();
+    return (messages) => {
+        store.setState((state) => (0, websocket_consumer_1.handleWebSocketMessages)(state, messages));
+    };
+};
+exports.useHandleWebsocketMessages = useHandleWebsocketMessages;
+const useChat = () => useLivestreamStore((x) => x.chat);
+exports.useChat = useChat;
+const useProfile = () => useLivestreamStore((x) => x.profile);
+exports.useProfile = useProfile;
+const useViewers = () => useLivestreamStore((x) => x.viewers);
+exports.useViewers = useViewers;
+const useLivestream = () => useLivestreamStore((x) => x.livestream);
+exports.useLivestream = useLivestream;
+const useSegment = () => useLivestreamStore((x) => x.segment);
+exports.useSegment = useSegment;
+const useRenditions = () => useLivestreamStore((x) => x.renditions);
+exports.useRenditions = useRenditions;

package/dist/livestream-store/problems.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findProblems = void 0;
+const VARIANCE_THRESHOLD = 0.5;
+const DURATION_THRESHOLD = 5000000000; // 5s in ns
+const detectVariableSegmentLength = (segments) => {
+    if (segments.length < 3) {
+        // Need at least 3 segments to detect variability
+        return { variable: false, duration: false };
+    }
+    const durations = segments
+        .map((segment) => segment.duration)
+        .filter((duration) => duration !== undefined && duration > 0);
+    if (durations.length < 3) {
+        return { variable: false, duration: false };
+    }
+    // Calculate mean
+    const mean = durations.reduce((sum, duration) => sum + duration, 0) /
+        durations.length;
+    // Calculate standard deviation
+    const variance = durations.reduce((sum, duration) => {
+        const diff = duration - mean;
+        return sum + diff * diff;
+    }, 0) / durations.length;
+    const stdDev = Math.sqrt(variance);
+    // Calculate coefficient of variation (CV)
+    const cv = stdDev / mean;
+    // CV > 0.5 indicates high variability
+    // This threshold can be adjusted based on testing
+    return {
+        variable: cv > VARIANCE_THRESHOLD,
+        duration: mean > DURATION_THRESHOLD,
+    };
+};
+const findProblems = (segments) => {
+    const problems = [];
+    let hasBFrames = false;
+    for (const segment of segments) {
+        const video = segment.video?.[0];
+        if (!video) {
+            // i mean yes this is a problem but it can't happen yet
+            continue;
+        }
+        if (video.bframes === true) {
+            hasBFrames = true;
+            break;
+        }
+    }
+    if (hasBFrames) {
+        problems.push({
+            code: "bframes",
+            message: "Your stream contains B-Frames, which are not supported in Streamplace. Your stream will stutter.",
+            severity: "error",
+            link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+        });
+    }
+    const { variable, duration } = detectVariableSegmentLength(segments);
+    if (variable) {
+        problems.push({
+            code: "variable_segment_length",
+            message: "Your stream contains variable segment lengths, which may cause playback issues.",
+            severity: "warning",
+            link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+        });
+    }
+    if (duration) {
+        problems.push({
+            code: "long_segments",
+            message: "Your stream contains long segments (>5s). This will work fine, but increases the delay of the livestream.",
+            severity: "warning",
+            link: "https://stream.place/docs/guides/start-streaming/obs/#obs-configuration",
+        });
+    }
+    return problems;
+};
+exports.findProblems = findProblems;