@streamplace/components 0.0.1 → 0.7.0

package/src/livestream-store/chat.tsx

@@ -0,0 +1,261 @@
+import { RichText } from "@atproto/api";
+import { useCallback } from "react";
+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 useCallback(
+    (message: ChatMessageViewHydrated | null) => {
+      store.setState({ replyToMessage: message });
+    },
+    [store],
+  );
+};
+
+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 });
+    await rt.detectFacets(pdsAgent);
+
+    const record: PlaceStreamChatMessage.Record = {
+      text: msg.text,
+      createdAt: new Date().toISOString(),
+      streamer: streamerProfile.did,
+      facets: rt.facets as PlaceStreamChatMessage.Record["facets"],
+      ...(msg.reply
+        ? {
+            reply: {
+              root: {
+                cid: msg.reply.cid,
+                uri: msg.reply.uri,
+              },
+              parent: {
+                cid: msg.reply.cid,
+                uri: msg.reply.uri,
+              },
+            },
+          }
+        : {}),
+    };
+
+    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 buildSortedChatList = (
+  chatIndex: { [key: string]: ChatMessageViewHydrated },
+  existingChatList: ChatMessageViewHydrated[],
+  newMessages: { key: string; message: ChatMessageViewHydrated }[],
+  removedKeys: Set<string>,
+): ChatMessageViewHydrated[] => {
+  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: ChatMessageViewHydrated["chatProfile"],
+  oldProfile: ChatMessageViewHydrated["chatProfile"],
+) => {
+  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: LivestreamState,
+  newMessages: ChatMessageViewHydrated[],
+  blocks: PlaceStreamDefs.BlockView[],
+): LivestreamState => {
+  if (newMessages.length === 0 && blocks.length === 0) {
+    return state;
+  }
+
+  const newChatIndex = { ...state.chatIndex };
+  const newAuthors = { ...state.authors };
+  let hasChanges = false;
+  const removedKeys = new Set<string>();
+
+  // 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: { key: string; message: ChatMessageViewHydrated }[] = [];
+
+  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 as {
+        parent?: { uri: string; cid: string };
+        root?: { uri: string; cid: string };
+      };
+
+      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/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,4 @@
+export * from "./chat";
+export * from "./context";
+export * from "./livestream-store";
+export * from "./stream-key";

package/src/livestream-store/livestream-state.tsx

@@ -0,0 +1,21 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import {
+  ChatMessageViewHydrated,
+  LivestreamViewHydrated,
+  PlaceStreamDefs,
+  PlaceStreamSegment,
+} from "streamplace";
+
+export interface LivestreamState {
+  profile: AppBskyActorDefs.ProfileViewBasic | null;
+  chatIndex: { [key: string]: ChatMessageViewHydrated };
+  chat: ChatMessageViewHydrated[];
+  authors: { [key: string]: ChatMessageViewHydrated["chatProfile"] };
+  livestream: LivestreamViewHydrated | null;
+  viewers: number | null;
+  segment: PlaceStreamSegment.Record | null;
+  renditions: PlaceStreamDefs.Rendition[];
+  replyToMessage: ChatMessageViewHydrated | null;
+  streamKey: string | null;
+  setStreamKey: (key: string | null) => void;
+}

package/src/livestream-store/livestream-store.tsx

@@ -0,0 +1,59 @@
+import { useContext } from "react";
+import { createStore, StoreApi, useStore } from "zustand";
+import { LivestreamContext } from "./context";
+import { LivestreamState } from "./livestream-state";
+import { handleWebSocketMessages } from "./websocket-consumer";
+
+export type LivestreamStore = StoreApi<LivestreamState>;
+
+export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
+  return createStore<LivestreamState>()((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(): LivestreamStore {
+  const context = useContext(LivestreamContext);
+  if (!context) {
+    throw new Error(
+      "useLivestreamStore must be used within a LivestreamProvider",
+    );
+  }
+  return context.store;
+}
+
+export function useLivestreamStore<U>(
+  selector: (state: LivestreamState) => U,
+): U {
+  const store = getStoreFromContext();
+  return useStore(store, selector);
+}
+
+export const useHandleWebsocketMessages = () => {
+  const store = getStoreFromContext();
+  return (messages: any[]) => {
+    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/src/livestream-store/stream-key.tsx

@@ -0,0 +1,124 @@
+import { bytesToMultibase, Secp256k1Keypair } from "@atproto/crypto";
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+import { PlaceStreamKey } from "streamplace";
+import { privateKeyToAccount } from "viem/accounts";
+import { usePDSAgent } from "../streamplace-store/xrpc";
+import { useLivestreamStore } from "./livestream-store";
+
+function getBrowserName(userAgent: string) {
+  // 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 = (): {
+  streamKey: {
+    privateKey: string;
+    did: string;
+    address: string;
+  } | null;
+  error: string | null;
+} => {
+  const pdsAgent = usePDSAgent();
+  const streamKey = useLivestreamStore((state) => state.streamKey);
+  const setStreamKey = useLivestreamStore((state) => state.setStreamKey);
+  const [key, setKey] = useState<any>(streamKey ? JSON.parse(streamKey) : null);
+  const [error, setError] = useState<string | null>(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: string = 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: PlaceStreamKey.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/src/livestream-store/websocket-consumer.tsx

@@ -0,0 +1,62 @@
+import { AppBskyActorDefs } from "@atproto/api";
+import {
+  ChatMessageViewHydrated,
+  LivestreamViewHydrated,
+  PlaceStreamChatDefs,
+  PlaceStreamChatMessage,
+  PlaceStreamDefs,
+  PlaceStreamLivestream,
+  PlaceStreamSegment,
+} from "streamplace";
+import { reduceChat } from "./chat";
+import { LivestreamState } from "./livestream-state";
+
+export const handleWebSocketMessages = (
+  state: LivestreamState,
+  messages: any[],
+): LivestreamState => {
+  for (const message of messages) {
+    if (PlaceStreamLivestream.isLivestreamView(message)) {
+      state = {
+        ...state,
+        livestream: message as LivestreamViewHydrated,
+      };
+    } else if (PlaceStreamLivestream.isViewerCount(message)) {
+      state = {
+        ...state,
+        viewers: message.count,
+      };
+    } else if (PlaceStreamChatDefs.isMessageView(message)) {
+      // Explicitly map MessageView to MessageViewHydrated
+      const hydrated: ChatMessageViewHydrated = {
+        uri: message.uri,
+        cid: message.cid,
+        author: message.author,
+        record: message.record as PlaceStreamChatMessage.Record,
+        indexedAt: message.indexedAt,
+        chatProfile: (message as any).chatProfile,
+        replyTo: (message as any).replyTo,
+      };
+      state = reduceChat(state, [hydrated], []);
+    } else if (PlaceStreamSegment.isRecord(message)) {
+      state = {
+        ...state,
+        segment: message as PlaceStreamSegment.Record,
+      };
+    } else if (PlaceStreamDefs.isBlockView(message)) {
+      const block = message as PlaceStreamDefs.BlockView;
+      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/src/player-store/context.tsx

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { StoreApi } from "zustand";
+import { PlayerState } from "./player-state";
+
+type PlayerContextType = {
+  players: Record<string, StoreApi<PlayerState>>;
+  createPlayer: (id?: string) => string;
+  removePlayer: (id: string) => void;
+};
+
+export const PlayerContext = createContext<PlayerContextType | null>(null);

package/src/player-store/index.tsx

@@ -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/src/player-store/player-provider.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { StoreApi } from "zustand";
+import { PlayerContext } from "./context";
+import { PlayerState } from "./player-state";
+import { makePlayerStore } from "./player-store";
+
+interface PlayerProviderProps {
+  children: React.ReactNode;
+  initialPlayers?: string[];
+  defaultId?: string;
+}
+
+export const PlayerProvider: React.FC<PlayerProviderProps> = ({
+  children,
+  initialPlayers = [],
+  defaultId = Math.random().toString(36).slice(8),
+}) => {
+  const [players, setPlayers] = useState<Record<string, StoreApi<PlayerState>>>(
+    () => {
+      // Initialize with any initial player IDs provided
+      const initialPlayerStores: Record<string, StoreApi<PlayerState>> = {};
+      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?: string) => {
+    const playerId = id || Math.random().toString(36).slice(8);
+    const playerStore = makePlayerStore(playerId);
+
+    setPlayers((prev) => ({
+      ...prev,
+      [playerId]: playerStore,
+    }));
+
+    return playerId;
+  }, []);
+
+  const removePlayer = useCallback((id: string) => {
+    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 (
+    <PlayerContext.Provider value={contextValue}>
+      {children}
+    </PlayerContext.Provider>
+  );
+};
+
+// HOC to wrap components that need player context
+export function withPlayerProvider<P extends object>(
+  Component: React.ComponentType<P>,
+): React.FC<P & { initialPlayers?: string[] }> {
+  return function WithPlayerProvider(props: P & { initialPlayers?: string[] }) {
+    const { initialPlayers, ...componentProps } = props;
+    return (
+      <PlayerProvider initialPlayers={initialPlayers}>
+        <Component {...(componentProps as P)} />
+      </PlayerProvider>
+    );
+  };
+}