@streamplace/components 0.7.13 → 0.7.15

package/dist/lib/utils.js

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

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

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

@@ -1,286 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.reduceChat = exports.useReportChatMessage = exports.useSubmitReport = exports.reduceChatIncremental = 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 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

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

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

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

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

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

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