@streamplace/components 0.0.1 → 0.7.0

package/dist/livestream-provider/index.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
+import { useLivestreamWebsocket } from "./websocket";
+export function LivestreamProvider({ children, src, }) {
+    const context = useContext(LivestreamContext);
+    const store = useRef(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 _jsx(_Fragment, { children: children });
+    }
+    window.livestreamStore = store;
+    return (_jsx(LivestreamContext.Provider, { value: { store: store }, children: _jsx(LivestreamPoller, { src: src, children: children }) }));
+}
+export function WebsocketWatcher({ src }) {
+    useLivestreamWebsocket(src);
+    return _jsx(_Fragment, {});
+}
+export function LivestreamPoller({ children, src, }) {
+    // Websocket watcher is a sibling instead of a parent to avoid
+    // re-rendering when the websocket does stuff
+    return (_jsxs(_Fragment, { children: [_jsx(WebsocketWatcher, { src: src }), children] }));
+}

package/dist/livestream-provider/websocket.js

@@ -0,0 +1,41 @@
+import { useRef } from "react";
+import useWebSocket from "react-use-websocket";
+import { useHandleWebsocketMessages } from "../livestream-store";
+import { useUrl } from "../streamplace-store";
+export function useLivestreamWebsocket(src) {
+    const url = useUrl();
+    const handleWebSocketMessages = useHandleWebsocketMessages();
+    let wsUrl = url.replace(/^http\:/, "ws:");
+    wsUrl = wsUrl.replace(/^https\:/, "wss:");
+    const ref = useRef([]);
+    const handle = useRef(null);
+    const { readyState } = useWebSocket(`${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,186 @@
+import { RichText } from "@atproto/api";
+import { useCallback } from "react";
+import { useChatProfile, useDID, useHandle } from "../streamplace-store";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+import { getStoreFromContext, useLivestreamStore } from "./livestream-store";
+export const useReplyToMessage = () => useLivestreamStore((state) => state.replyToMessage);
+export const useSetReplyToMessage = () => {
+    const store = getStoreFromContext();
+    return useCallback((message) => {
+        store.setState({ replyToMessage: message });
+    }, [store]);
+};
+export const useCreateChatMessage = () => {
+    const pdsAgent = usePDSAgent();
+    const store = getStoreFromContext();
+    const userDID = useDID();
+    const userHandle = useHandle();
+    const chatProfile = 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 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 = reduceChat(state, [localChat], []);
+        store.setState(state);
+        await pdsAgent.com.atproto.repo.createRecord({
+            repo: userDID,
+            collection: "place.stream.chat.message",
+            record,
+        });
+    };
+};
+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]);
+};
+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;
+};
+export const reduceChatIncremental = (state, newMessages, blocks) => {
+    if (newMessages.length === 0 && blocks.length === 0) {
+        return state;
+    }
+    const newChatIndex = { ...state.chatIndex };
+    const newAuthors = { ...state.authors };
+    let hasChanges = false;
+    const removedKeys = new Set();
+    // 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;
+            }
+        }
+    }
+    const messagesToAdd = [];
+    for (const message of newMessages) {
+        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.handle])) {
+            newAuthors[message.author.handle] = 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];
+                    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);
+    return {
+        ...state,
+        chatIndex: newChatIndex,
+        chat: newChatList,
+    };
+};
+export const reduceChat = reduceChatIncremental;

package/dist/livestream-store/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const LivestreamContext = createContext(null);

package/dist/livestream-store/index.js

@@ -0,0 +1,4 @@
+export * from "./chat";
+export * from "./context";
+export * from "./livestream-store";
+export * from "./stream-key";

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+import { useContext } from "react";
+import { createStore, useStore } from "zustand";
+import { LivestreamContext } from "./context";
+import { handleWebSocketMessages } from "./websocket-consumer";
+export const makeLivestreamStore = () => {
+    return createStore()((set) => ({
+        profile: null,
+        chatIndex: {},
+        chat: [],
+        livestream: null,
+        viewers: null,
+        segment: null,
+        renditions: [],
+        replyToMessage: null,
+        streamKey: null,
+        setStreamKey: (sk) => set({ streamKey: sk }),
+        authors: {},
+    }));
+};
+export function getStoreFromContext() {
+    const context = useContext(LivestreamContext);
+    if (!context) {
+        throw new Error("useLivestreamStore must be used within a LivestreamProvider");
+    }
+    return context.store;
+}
+export function useLivestreamStore(selector) {
+    const store = getStoreFromContext();
+    return useStore(store, selector);
+}
+export const useHandleWebsocketMessages = () => {
+    const store = getStoreFromContext();
+    return (messages) => {
+        store.setState((state) => handleWebSocketMessages(state, messages));
+    };
+};
+export const useChat = () => useLivestreamStore((x) => x.chat);
+export const useProfile = () => useLivestreamStore((x) => x.profile);
+export const useViewers = () => useLivestreamStore((x) => x.viewers);
+export const useLivestream = () => useLivestreamStore((x) => x.livestream);
+export const useSegment = () => useLivestreamStore((x) => x.segment);
+export const useRenditions = () => useLivestreamStore((x) => x.renditions);

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

@@ -0,0 +1,115 @@
+import { bytesToMultibase, Secp256k1Keypair } from "@atproto/crypto";
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+import { privateKeyToAccount } from "viem/accounts";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+import { useLivestreamStore } from "./livestream-store";
+function getBrowserName(userAgent) {
+    // The order matters here, and this may report false positives for unlisted browsers.
+    if (userAgent.includes("Firefox")) {
+        // "Mozilla/5.0 (X11; Linux i686; rv:104.0) Gecko/20100101 Firefox/104.0"
+        return "Mozilla Firefox";
+    }
+    else if (userAgent.includes("SamsungBrowser")) {
+        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36"
+        return "Samsung Internet";
+    }
+    else if (userAgent.includes("Opera") || userAgent.includes("OPR")) {
+        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 OPR/90.0.4480.54"
+        return "Opera";
+    }
+    else if (userAgent.includes("Edge")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+        return "Microsoft Edge (Legacy)";
+    }
+    else if (userAgent.includes("Edg")) {
+        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36 Edg/104.0.1293.70"
+        return "Microsoft Edge (Chromium)";
+    }
+    else if (userAgent.includes("Chrome")) {
+        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36"
+        return "Google Chrome or Chromium";
+    }
+    else if (userAgent.includes("Safari")) {
+        // "Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6 Mobile/15E148 Safari/604.1"
+        return "Apple Safari";
+    }
+    return "unknown";
+}
+export const useStreamKey = () => {
+    const pdsAgent = usePDSAgent();
+    const streamKey = useLivestreamStore((state) => state.streamKey);
+    const setStreamKey = useLivestreamStore((state) => state.setStreamKey);
+    const [key, setKey] = useState(streamKey ? JSON.parse(streamKey) : null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (key)
+            return; // already have key
+        const generateKey = async () => {
+            if (!pdsAgent) {
+                setError("PDS Agent is not available");
+                return;
+            }
+            let did = pdsAgent.did;
+            if (!did) {
+                setError("PDS Agent did is not available (not logged in?)");
+                return;
+            }
+            const keypair = await Secp256k1Keypair.create({ exportable: true });
+            const exportedKey = await keypair.export();
+            const didBytes = new TextEncoder().encode(did);
+            const combinedKey = new Uint8Array([...exportedKey, ...didBytes]);
+            const multibaseKey = bytesToMultibase(combinedKey, "base58btc");
+            const hexKey = Array.from(exportedKey)
+                .map((b) => b.toString(16).padStart(2, "0"))
+                .join("");
+            const account = privateKeyToAccount(`0x${hexKey}`);
+            const newKey = {
+                privateKey: multibaseKey,
+                did: keypair.did(),
+                address: account.address.toLowerCase(),
+            };
+            let platform = Platform.OS;
+            if (Platform.OS === "web" &&
+                typeof window !== "undefined" &&
+                window.navigator) {
+                if (window.navigator.userAgent.includes("streamplace-desktop")) {
+                    platform = "Desktop";
+                }
+                else {
+                    platform = getBrowserName(window.navigator.userAgent);
+                    if (platform !== "unknown") {
+                        platform = platform;
+                    }
+                }
+            }
+            else if (platform === "android") {
+                platform = "Android";
+            }
+            else if (platform === "ios") {
+                platform = "iOS";
+            }
+            else if (platform === "macos") {
+                platform = "macOS";
+            }
+            else if (platform === "windows") {
+                platform = "Windows";
+            }
+            const record = {
+                signingKey: keypair.did(),
+                createdAt: new Date().toISOString(),
+                createdBy: "Streamplace on " + platform,
+            };
+            await pdsAgent.com.atproto.repo.createRecord({
+                repo: did,
+                collection: "place.stream.key",
+                record,
+            });
+            setStreamKey(JSON.stringify(newKey));
+            setKey(newKey);
+        };
+        generateKey();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, setStreamKey]);
+    return { streamKey: key, error };
+};

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

@@ -0,0 +1,55 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import { PlaceStreamChatDefs, PlaceStreamDefs, PlaceStreamLivestream, PlaceStreamSegment, } from "streamplace";
+import { reduceChat } from "./chat";
+export const handleWebSocketMessages = (state, messages) => {
+    for (const message of messages) {
+        if (PlaceStreamLivestream.isLivestreamView(message)) {
+            state = {
+                ...state,
+                livestream: message,
+            };
+        }
+        else if (PlaceStreamLivestream.isViewerCount(message)) {
+            state = {
+                ...state,
+                viewers: message.count,
+            };
+        }
+        else if (PlaceStreamChatDefs.isMessageView(message)) {
+            // Explicitly map MessageView to MessageViewHydrated
+            const hydrated = {
+                uri: message.uri,
+                cid: message.cid,
+                author: message.author,
+                record: message.record,
+                indexedAt: message.indexedAt,
+                chatProfile: message.chatProfile,
+                replyTo: message.replyTo,
+            };
+            state = reduceChat(state, [hydrated], []);
+        }
+        else if (PlaceStreamSegment.isRecord(message)) {
+            state = {
+                ...state,
+                segment: message,
+            };
+        }
+        else if (PlaceStreamDefs.isBlockView(message)) {
+            const block = message;
+            state = reduceChat(state, [], [block]);
+        }
+        else if (PlaceStreamDefs.isRenditions(message)) {
+            state = {
+                ...state,
+                renditions: message.renditions,
+            };
+        }
+        else if (AppBskyActorDefs.isProfileViewBasic(message)) {
+            state = {
+                ...state,
+                profile: message,
+            };
+        }
+    }
+    return reduceChat(state, [], []);
+};

package/dist/player-store/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const PlayerContext = createContext(null);

package/dist/player-store/index.js

@@ -0,0 +1,6 @@
+// barrel file :)
+export * from "./context";
+export * from "./player-provider";
+export * from "./player-state";
+export * from "./player-store";
+export * from "./single-player-provider";

package/dist/player-store/player-provider.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { PlayerContext } from "./context";
+import { makePlayerStore } from "./player-store";
+export const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random().toString(36).slice(8), }) => {
+    const [players, setPlayers] = useState(() => {
+        // Initialize with any initial player IDs provided
+        const initialPlayerStores = {};
+        for (const playerId of initialPlayers) {
+            initialPlayerStores[playerId] = makePlayerStore(playerId);
+        }
+        // Always create at least one player by default
+        if (initialPlayers.length === 0) {
+            initialPlayerStores[defaultId] = makePlayerStore(defaultId);
+        }
+        return initialPlayerStores;
+    });
+    const createPlayer = useCallback((id) => {
+        const playerId = id || Math.random().toString(36).slice(8);
+        const playerStore = makePlayerStore(playerId);
+        setPlayers((prev) => ({
+            ...prev,
+            [playerId]: playerStore,
+        }));
+        return playerId;
+    }, []);
+    const removePlayer = useCallback((id) => {
+        setPlayers((prev) => {
+            // Don't remove the last player
+            if (Object.keys(prev).length <= 1) {
+                console.warn("Cannot remove the last player");
+                return prev;
+            }
+            const newPlayers = { ...prev };
+            delete newPlayers[id];
+            return newPlayers;
+        });
+    }, []);
+    const contextValue = useMemo(() => ({
+        players,
+        createPlayer,
+        removePlayer,
+    }), [players, createPlayer, removePlayer]);
+    return (_jsx(PlayerContext.Provider, { value: contextValue, children: children }));
+};
+// HOC to wrap components that need player context
+export function withPlayerProvider(Component) {
+    return function WithPlayerProvider(props) {
+        const { initialPlayers, ...componentProps } = props;
+        return (_jsx(PlayerProvider, { initialPlayers: initialPlayers, children: _jsx(Component, { ...componentProps }) }));
+    };
+}

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

@@ -0,0 +1,22 @@
+export var PlayerProtocol;
+(function (PlayerProtocol) {
+    PlayerProtocol["WEBRTC"] = "webrtc";
+    PlayerProtocol["HLS"] = "hls";
+    PlayerProtocol["PROGRESSIVE_MP4"] = "progressive-mp4";
+    PlayerProtocol["PROGRESSIVE_WEBM"] = "progressive-webm";
+})(PlayerProtocol || (PlayerProtocol = {}));
+export var PlayerStatus;
+(function (PlayerStatus) {
+    PlayerStatus["START"] = "start";
+    PlayerStatus["PLAYING"] = "playing";
+    PlayerStatus["STALLED"] = "stalled";
+    PlayerStatus["SUSPEND"] = "suspend";
+    PlayerStatus["WAITING"] = "waiting";
+    PlayerStatus["PAUSE"] = "pause";
+    PlayerStatus["MUTE"] = "mute";
+})(PlayerStatus || (PlayerStatus = {}));
+export var IngestMediaSource;
+(function (IngestMediaSource) {
+    IngestMediaSource["USER"] = "user";
+    IngestMediaSource["DISPLAY"] = "display";
+})(IngestMediaSource || (IngestMediaSource = {}));