@streamplace/components 0.6.37 → 1.0.0

package/package.json

@@ -1,39 +1,13 @@
 {
   "name": "@streamplace/components",
-  "version": "0.6.37",
-  "description": "Streamplace React (Native) Components",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "src/index.tsx",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.mjs",
-      "default": "./dist/index.mjs"
-    }
-  },
+  "version": "1.0.0",
+  "description": "",
+  "main": "package.json",
   "scripts": {
-    "build": "tsc",
-    "postinstall": "pnpm run build",
-    "start": "tsc --watch --preserveWatchOutput"
-  },
-  "keywords": [
-    "streamplace"
-  ],
-  "author": "Streamplace",
-  "license": "MIT",
-  "packageManager": "pnpm@10.11.0",
-  "devDependencies": {
-    "tsup": "^8.5.0"
-  },
-  "dependencies": {
-    "@atproto/api": "^0.15.7",
-    "react-native": "0.76.2",
-    "react-use-websocket": "^4.13.0",
-    "streamplace": "0.6.37",
-    "zustand": "^5.0.5"
-  },
-  "peerDependencies": {
-    "react": "*"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "gitHead": "87a2627518e509fd364199cb71657a94eac51066"
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
 }

package/LICENSE

@@ -1,18 +0,0 @@
-Copyright (c) 2025 Streamplace.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,35 +0,0 @@
-# @streamplace/components
-
-Heavily WIP but looks something like this:
-
-```tsx
-import {
-  StreamplaceProvider,
-  LivestreamProvider,
-} from "@streamplace/components";
-
-export function Provider() {
-  <StreamplaceProvider url="https://stream.place" oauthSession={userSession}>
-    {/* Everything inside of here can access that Streamplace node */}
-
-    <LivestreamProvider src="example.bsky.social" /* or did:plc:xxxx */>
-      {/* Everything in here has an active subscription to the livestream
-        context via Websocket; things like chat data and stream title */}
-      <App />
-    </LivestreamProvider>
-  </StreamplaceProvider>;
-}
-
-export function App() {
-  const chat = useChat();
-  return (
-    <View>
-      {chat.map((msg) => (
-        <Text>
-          @{msg.author.handle}: {msg.record.text}
-        </Text>
-      ))}
-    </View>
-  );
-}
-```

package/dist/index.js

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

package/dist/livestream-provider/index.js

@@ -1,20 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } 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 LivestreamPoller({ children, src, }) {
-    useLivestreamWebsocket(src);
-    return _jsx(_Fragment, { children: children });
-}

package/dist/livestream-provider/websocket.js

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

@@ -1,162 +0,0 @@
-import { RichText } from "@atproto/api";
-import { isLink, isMention, } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
-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 (message) => {
-        store.setState({ replyToMessage: message });
-    };
-};
-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 });
-        rt.detectFacetsWithoutResolution();
-        const record = {
-            text: msg.text,
-            createdAt: new Date().toISOString(),
-            streamer: streamerProfile.did,
-            ...(msg.reply
-                ? {
-                    reply: {
-                        root: {
-                            cid: msg.reply.cid,
-                            uri: msg.reply.uri,
-                        },
-                        parent: {
-                            cid: msg.reply.cid,
-                            uri: msg.reply.uri,
-                        },
-                    },
-                }
-                : {}),
-            ...(rt.facets && rt.facets.length > 0
-                ? {
-                    facets: rt.facets.map((facet) => ({
-                        index: facet.index,
-                        features: facet.features
-                            .filter((feature) => feature.$type === "app.bsky.richtext.facet#link" ||
-                            feature.$type === "app.bsky.richtext.facet#mention")
-                            .map((feature) => {
-                            if (isLink(feature)) {
-                                return {
-                                    $type: "app.bsky.richtext.facet#link",
-                                    uri: feature.uri,
-                                };
-                            }
-                            else if (isMention(feature)) {
-                                return {
-                                    $type: "app.bsky.richtext.facet#mention",
-                                    did: feature.did,
-                                };
-                            }
-                            else {
-                                throw new Error("invalid code path");
-                            }
-                        }),
-                    })),
-                }
-                : {}),
-        };
-        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 CHAT_LIMIT = 20;
-export const reduceChat = (state, messages, blocks) => {
-    state = { ...state };
-    let newChat = {
-        ...state.chatIndex,
-    };
-    // Add new messages
-    for (let message of messages) {
-        const date = new Date(message.record.createdAt);
-        const key = `${date.getTime()}-${message.uri}`;
-        // Remove existing local message matching the server one
-        if (!message.uri.startsWith("local-")) {
-            const existingLocalMessageKey = Object.keys(newChat).find((k) => {
-                const msg = newChat[k];
-                return (msg.uri.startsWith("local-") &&
-                    msg.record.text === message.record.text &&
-                    msg.author.did === message.author.did);
-            });
-            if (existingLocalMessageKey) {
-                delete newChat[existingLocalMessageKey];
-            }
-        }
-        // Handle reply information for local-first messages
-        if (message.record.reply) {
-            const reply = message.record.reply;
-            const parentUri = reply?.parent?.uri || reply?.root?.uri;
-            if (parentUri) {
-                // First try to find the parent message in our chat
-                const parentMsgKey = Object.keys(newChat).find((k) => newChat[k].uri === parentUri);
-                if (parentMsgKey) {
-                    // Found the parent message, add its info to our message
-                    const parentMsg = newChat[parentMsgKey];
-                    message = {
-                        ...message,
-                        replyTo: {
-                            cid: parentMsg.cid,
-                            uri: parentMsg.uri,
-                            author: parentMsg.author,
-                            record: parentMsg.record,
-                            chatProfile: parentMsg.chatProfile,
-                            indexedAt: parentMsg.indexedAt,
-                        },
-                    };
-                }
-            }
-        }
-        newChat[key] = message;
-    }
-    for (const block of blocks) {
-        for (const [k, v] of Object.entries(newChat)) {
-            if (v.author.did === block.record.subject) {
-                delete newChat[k];
-            }
-        }
-    }
-    let newChatList = Object.values(newChat).sort((a, b) => new Date(a.record.createdAt) > new Date(b.record.createdAt) ? 1 : -1);
-    newChatList = newChatList.slice(-CHAT_LIMIT);
-    newChat = newChatList.reduce((acc, msg) => {
-        acc[msg.uri] = msg;
-        return acc;
-    }, {});
-    return {
-        ...state,
-        chatIndex: newChat,
-        chat: newChatList,
-    };
-};

package/dist/livestream-store/context.js

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

package/dist/livestream-store/index.js

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

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

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

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

@@ -1,39 +0,0 @@
-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,
-    }));
-};
-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/websocket-consumer.js

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

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

package/dist/player-store/index.js

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

@@ -1,53 +0,0 @@
-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) => {
-        console.log("Creating new player");
-        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

@@ -1,22 +0,0 @@
-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 = {}));