@streamplace/components 0.0.1 → 0.6.37

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

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo } from "react";
+import { useStore } from "zustand";
+import { usePlayerContext } from "../player-store";
+import { PlayerProtocol } from "./player-state";
+const SinglePlayerContext = createContext(null);
+/**
+ * Provider component for a single player that creates a scoped context
+ * This allows components to access a specific player's state without passing IDs around
+ */
+export const SinglePlayerProvider = ({ children, playerId: providedPlayerId, protocol = PlayerProtocol.WEBRTC, rendition = "auto", }) => {
+    const { players, createPlayer } = usePlayerContext();
+    // Create or get a player ID
+    const playerId = useMemo(() => {
+        // If a player ID is provided and exists, use it
+        if (providedPlayerId && players[providedPlayerId]) {
+            return providedPlayerId;
+        }
+        // If a player ID is provided but doesn't exist, create it
+        if (providedPlayerId) {
+            return createPlayer(providedPlayerId);
+        }
+        // Otherwise create a new player
+        return createPlayer();
+    }, [providedPlayerId, players, createPlayer]);
+    // Get the player store
+    const playerStore = useMemo(() => {
+        return players[playerId];
+    }, [players, playerId]);
+    // Set initial protocol and rendition if provided
+    React.useEffect(() => {
+        if (protocol) {
+            playerStore.setState((state) => ({
+                ...state,
+                protocol,
+            }));
+        }
+        if (rendition) {
+            playerStore.setState((state) => ({
+                ...state,
+                selectedRendition: rendition,
+            }));
+        }
+    }, [playerStore, protocol, rendition]);
+    // Create context value
+    const contextValue = useMemo(() => ({
+        playerId,
+        playerStore,
+    }), [playerId, playerStore]);
+    return (_jsx(SinglePlayerContext.Provider, { value: contextValue, children: children }));
+};
+/**
+ * Hook to access the current single player context
+ */
+export function useSinglePlayerContext() {
+    const context = useContext(SinglePlayerContext);
+    if (!context) {
+        throw new Error("useSinglePlayerContext must be used within a SinglePlayerProvider");
+    }
+    return context;
+}
+/**
+ * Hook to access the current player ID from the single player context
+ */
+export function useCurrentPlayerId() {
+    const { playerId } = useSinglePlayerContext();
+    return playerId;
+}
+/**
+ * Hook to access state from the current player without needing to specify the ID
+ */
+export function useCurrentPlayerStore(selector) {
+    const { playerStore } = useSinglePlayerContext();
+    return useStore(playerStore, selector);
+}
+/**
+ * Hook to get the protocol of the current player
+ */
+export function useCurrentPlayerProtocol() {
+    return useCurrentPlayerStore((state) => [state.protocol, state.setProtocol]);
+}
+/**
+ * Hook to get the selected rendition of the current player
+ */
+export function useCurrentPlayerRendition() {
+    return useCurrentPlayerStore((state) => [state.selectedRendition, state.setSelectedRendition]);
+}
+/**
+ * Hook to get the ingest state of the current player
+ */
+export function useCurrentPlayerIngest() {
+    return useCurrentPlayerStore((state) => ({
+        starting: state.ingestStarting,
+        setStarting: state.setIngestStarting,
+        connectionState: state.ingestConnectionState,
+        setConnectionState: state.setIngestConnectionState,
+        startedTimestamp: state.ingestStarted,
+        setStartedTimestamp: state.setIngestStarted,
+    }));
+}
+/**
+ * HOC to wrap components with a SinglePlayerProvider
+ */
+export function withSinglePlayer(Component) {
+    return function WithSinglePlayer(props) {
+        const { playerId, protocol, rendition, ...componentProps } = props;
+        return (_jsx(SinglePlayerProvider, { playerId: playerId, protocol: protocol, rendition: rendition, children: _jsx(Component, { ...componentProps }) }));
+    };
+}

package/dist/streamplace-provider/context.js

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

package/dist/streamplace-provider/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { makeStreamplaceStore } from "../streamplace-store/streamplace-store";
+import { StreamplaceContext } from "./context";
+import Poller from "./poller";
+export function StreamplaceProvider({ children, url, oauthSession, }) {
+    // todo: handle url changes?
+    const store = useRef(makeStreamplaceStore({ url })).current;
+    useEffect(() => {
+        store.setState({ url });
+    }, [url]);
+    useEffect(() => {
+        store.setState({ oauthSession });
+    }, [oauthSession]);
+    return (_jsx(StreamplaceContext.Provider, { value: { store: store }, children: _jsx(Poller, { children: children }) }));
+}

package/dist/streamplace-provider/poller.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { StreamplaceAgent } from "streamplace";
+import { useDID, useGetBskyProfile, useGetChatProfile, useStreamplaceStore, } from "../streamplace-store";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+export default function Poller({ children }) {
+    const url = useStreamplaceStore((state) => state.url);
+    const setLiveUsers = useStreamplaceStore((state) => state.setLiveUsers);
+    const did = useDID();
+    const pdsAgent = usePDSAgent();
+    const getChatProfile = useGetChatProfile();
+    const getBskyProfile = useGetBskyProfile();
+    const liveUserRefresh = useStreamplaceStore((state) => state.liveUsersRefresh);
+    useEffect(() => {
+        if (pdsAgent && did) {
+            getChatProfile();
+            getBskyProfile();
+        }
+    }, [pdsAgent, did]);
+    useEffect(() => {
+        const agent = new StreamplaceAgent(url);
+        const go = async () => {
+            setLiveUsers({
+                liveUsersLoading: true,
+            });
+            try {
+                const res = await agent.place.stream.live.getLiveUsers();
+                setLiveUsers({
+                    liveUsers: res.data.streams || [],
+                    liveUsersLoading: false,
+                    liveUsersError: null,
+                });
+            }
+            catch (e) {
+                setLiveUsers({
+                    liveUsersLoading: false,
+                    liveUsersError: e.message,
+                });
+            }
+        };
+        go();
+        const handle = setInterval(go, 3000);
+        return () => clearInterval(handle);
+    }, [url, liveUserRefresh]);
+    return _jsx(_Fragment, { children: children });
+}

package/dist/streamplace-store/index.js

@@ -0,0 +1,2 @@
+export * from "./streamplace-store";
+export * from "./user";

package/dist/streamplace-store/streamplace-store.js

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { createStore, useStore } from "zustand";
+import { StreamplaceContext } from "../streamplace-provider/context";
+export const makeStreamplaceStore = ({ url, }) => {
+    return createStore()((set) => ({
+        url,
+        liveUsers: null,
+        setLiveUsers: (opts) => {
+            set({
+                ...opts,
+            });
+        },
+        liveUsersRefresh: 0,
+        liveUsersLoading: true,
+        liveUsersError: null,
+        oauthSession: null,
+        handle: null,
+        chatProfile: null,
+    }));
+};
+export function getStreamplaceStoreFromContext() {
+    const context = useContext(StreamplaceContext);
+    if (!context) {
+        throw new Error("useStreamplaceStore must be used within a StreamplaceProvider");
+    }
+    return context.store;
+}
+export function useStreamplaceStore(selector) {
+    return useStore(getStreamplaceStoreFromContext(), selector);
+}
+export const useUrl = () => useStreamplaceStore((x) => x.url);
+export const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
+export const useHandle = () => useStreamplaceStore((x) => x.handle);
+export const useSetHandle = () => {
+    const store = getStreamplaceStoreFromContext();
+    return (handle) => store.setState({ handle });
+};

package/dist/streamplace-store/user.js

@@ -0,0 +1,47 @@
+import { PlaceStreamChatProfile } from "streamplace";
+import { getStreamplaceStoreFromContext, useDID, useStreamplaceStore, } from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+export function useGetChatProfile() {
+    const did = useDID();
+    const pdsAgent = usePDSAgent();
+    const store = getStreamplaceStoreFromContext();
+    return async () => {
+        if (!did || !pdsAgent) {
+            throw new Error("No DID or PDS agent");
+        }
+        const res = await pdsAgent.com.atproto.repo.getRecord({
+            repo: did,
+            collection: "place.stream.chat.profile",
+            rkey: "self",
+        });
+        if (!res.success) {
+            throw new Error("Failed to get chat profile record");
+        }
+        if (PlaceStreamChatProfile.isRecord(res.data.value)) {
+            store.setState({ chatProfile: res.data.value });
+        }
+        else {
+            console.log("not a record", res.data.value);
+        }
+    };
+}
+export function useGetBskyProfile() {
+    const did = useDID();
+    const pdsAgent = usePDSAgent();
+    const store = getStreamplaceStoreFromContext();
+    return async () => {
+        if (!did || !pdsAgent) {
+            throw new Error("No DID or PDS agent");
+        }
+        const res = await pdsAgent.app.bsky.actor.getProfile({
+            actor: did,
+        });
+        if (!res.success) {
+            throw new Error("Failed to get chat profile record");
+        }
+        store.setState({ handle: res.data.handle });
+    };
+}
+export function useChatProfile() {
+    return useStreamplaceStore((x) => x.chatProfile);
+}

package/dist/streamplace-store/xrpc.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { StreamplaceAgent } from "streamplace";
+import { useStreamplaceStore } from ".";
+export function usePDSAgent() {
+    const oauthSession = useStreamplaceStore((state) => state.oauthSession);
+    return useMemo(() => {
+        if (!oauthSession) {
+            return null;
+        }
+        return new StreamplaceAgent(oauthSession);
+    }, [oauthSession]);
+}

package/package.json

@@ -1,13 +1,39 @@
 {
   "name": "@streamplace/components",
-  "version": "0.0.1",
-  "description": "",
-  "main": "package.json",
+  "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"
+    }
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "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": "*"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "gitHead": "87a2627518e509fd364199cb71657a94eac51066"
 }

package/src/index.tsx

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

package/src/livestream-provider/index.tsx

@@ -0,0 +1,37 @@
+import React, { useContext, useRef } from "react";
+import { LivestreamContext, makeLivestreamStore } from "../livestream-store";
+import { useLivestreamWebsocket } from "./websocket";
+
+export function LivestreamProvider({
+  children,
+  src,
+}: {
+  children: React.ReactNode;
+  src: string;
+}) {
+  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 <>{children}</>;
+  }
+  (window as any).livestreamStore = store;
+  return (
+    <LivestreamContext.Provider value={{ store: store }}>
+      <LivestreamPoller src={src}>{children}</LivestreamPoller>
+    </LivestreamContext.Provider>
+  );
+}
+
+export function LivestreamPoller({
+  children,
+  src,
+}: {
+  children: React.ReactNode;
+  src: string;
+}) {
+  useLivestreamWebsocket(src);
+  return <>{children}</>;
+}

package/src/livestream-provider/websocket.tsx

@@ -0,0 +1,47 @@
+import { useRef } from "react";
+import useWebSocket from "react-use-websocket";
+import { useHandleWebsocketMessages } from "../livestream-store";
+import { useUrl } from "../streamplace-store";
+
+export function useLivestreamWebsocket(src: string) {
+  const url = useUrl();
+  const handleWebSocketMessages = useHandleWebsocketMessages();
+
+  let wsUrl = url.replace(/^http\:/, "ws:");
+  wsUrl = wsUrl.replace(/^https\:/, "wss:");
+
+  const ref = useRef<any[]>([]);
+  const handle = useRef<NodeJS.Timeout | null>(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/src/livestream-store/chat.tsx

@@ -0,0 +1,224 @@
+import { RichText } from "@atproto/api";
+import {
+  isLink,
+  isMention,
+} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+import {
+  ChatMessageViewHydrated,
+  PlaceStreamChatMessage,
+  PlaceStreamDefs,
+} from "streamplace";
+import { useChatProfile, useDID, useHandle } from "../streamplace-store";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+import { LivestreamState } from "./livestream-state";
+import { getStoreFromContext, useLivestreamStore } from "./livestream-store";
+
+export const useReplyToMessage = () =>
+  useLivestreamStore((state) => state.replyToMessage);
+
+export const useSetReplyToMessage = () => {
+  const store = getStoreFromContext();
+  return (message: ChatMessageViewHydrated | null) => {
+    store.setState({ replyToMessage: message });
+  };
+};
+
+export type NewChatMessage = {
+  text: string;
+  reply?: {
+    cid: string;
+    uri: string;
+  };
+};
+
+export const useCreateChatMessage = () => {
+  const pdsAgent = usePDSAgent();
+  const store = getStoreFromContext();
+  const userDID = useDID();
+  const userHandle = useHandle();
+  const chatProfile = useChatProfile();
+
+  return async (msg: NewChatMessage) => {
+    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: PlaceStreamChatMessage.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: ChatMessageViewHydrated = {
+      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: LivestreamState,
+  messages: ChatMessageViewHydrated[],
+  blocks: PlaceStreamDefs.BlockView[],
+): LivestreamState => {
+  state = { ...state } as LivestreamState;
+  let newChat: { [key: string]: ChatMessageViewHydrated } = {
+    ...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 as {
+        parent?: { uri: string; cid: string };
+        root?: { uri: string; cid: string };
+      };
+
+      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;
+    },
+    {} as { [key: string]: ChatMessageViewHydrated },
+  );
+
+  return {
+    ...state,
+    chatIndex: newChat,
+    chat: newChatList,
+  };
+};

package/src/livestream-store/context.tsx

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+import { LivestreamStore } from "../livestream-store/livestream-store";
+
+type LivestreamContextType = {
+  store: LivestreamStore;
+};
+
+export const LivestreamContext = createContext<LivestreamContextType | null>(
+  null,
+);

package/src/livestream-store/index.tsx

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