@streamplace/components 0.6.37 → 0.7.0

package/src/livestream-store/chat.tsx

@@ -1,8 +1,5 @@
 import { RichText } from "@atproto/api";
-import {
-  isLink,
-  isMention,
-} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+import { useCallback } from "react";
 import {
   ChatMessageViewHydrated,
   PlaceStreamChatMessage,
@@ -18,9 +15,12 @@ export const useReplyToMessage = () =>
 
 export const useSetReplyToMessage = () => {
   const store = getStoreFromContext();
-  return (message: ChatMessageViewHydrated | null) => {
-    store.setState({ replyToMessage: message });
-  };
+  return useCallback(
+    (message: ChatMessageViewHydrated | null) => {
+      store.setState({ replyToMessage: message });
+    },
+    [store],
+  );
 };
 
 export type NewChatMessage = {
@@ -52,12 +52,13 @@ export const useCreateChatMessage = () => {
     }
 
     const rt = new RichText({ text: msg.text });
-    rt.detectFacetsWithoutResolution();
+    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: {
@@ -72,34 +73,6 @@ export const useCreateChatMessage = () => {
             },
           }
         : {}),
-      ...(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 = {
@@ -125,40 +98,108 @@ export const useCreateChatMessage = () => {
   };
 };
 
-const CHAT_LIMIT = 20;
+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]);
+};
 
-export const reduceChat = (
+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,
-  messages: ChatMessageViewHydrated[],
+  newMessages: ChatMessageViewHydrated[],
   blocks: PlaceStreamDefs.BlockView[],
 ): LivestreamState => {
-  state = { ...state } as LivestreamState;
-  let newChat: { [key: string]: ChatMessageViewHydrated } = {
-    ...state.chatIndex,
-  };
+  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>();
 
-  // Add new messages
-  for (let message of messages) {
+  // 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}`;
 
-    // Remove existing local message matching the server one
+    // 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 existingLocalMessageKey = Object.keys(newChat).find((k) => {
-        const msg = newChat[k];
+      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
+          msg.author.did === message.author.did &&
+          Math.abs(new Date(msg.record.createdAt).getTime() - date.getTime()) <
+            10000 // Within 10 seconds
         );
       });
 
-      if (existingLocalMessageKey) {
-        delete newChat[existingLocalMessageKey];
+      if (existingLocalKey) {
+        delete newChatIndex[existingLocalKey];
+        removedKeys.add(existingLocalKey);
+        hasChanges = true;
       }
     }
 
-    // Handle reply information for local-first messages
+    // add reply info
+    let processedMessage = message;
     if (message.record.reply) {
       const reply = message.record.reply as {
         parent?: { uri: string; cid: string };
@@ -166,17 +207,14 @@ export const reduceChat = (
       };
 
       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,
+        const parentMsgKey = Object.keys(newChatIndex).find(
+          (k) => newChatIndex[k].uri === parentUri,
         );
 
         if (parentMsgKey) {
-          // Found the parent message, add its info to our message
-          const parentMsg = newChat[parentMsgKey];
-          message = {
+          const parentMsg = newChatIndex[parentMsgKey];
+          processedMessage = {
             ...message,
             replyTo: {
               cid: parentMsg.cid,
@@ -191,34 +229,33 @@ export const reduceChat = (
       }
     }
 
-    newChat[key] = message;
+    messagesToAdd.push({ key, message: processedMessage });
+    hasChanges = true;
   }
 
-  for (const block of blocks) {
-    for (const [k, v] of Object.entries(newChat)) {
-      if (v.author.did === block.record.subject) {
-        delete newChat[k];
-      }
-    }
+  // Add new messages to index
+  for (const { key, message } of messagesToAdd) {
+    newChatIndex[key] = message;
   }
 
-  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);
+  // only rebuild if we have changes
+  if (!hasChanges) {
+    return state;
+  }
 
-  newChat = newChatList.reduce(
-    (acc, msg) => {
-      acc[msg.uri] = msg;
-      return acc;
-    },
-    {} as { [key: string]: ChatMessageViewHydrated },
+  // Build the new sorted chat list efficiently
+  const newChatList = buildSortedChatList(
+    newChatIndex,
+    state.chat,
+    messagesToAdd,
+    removedKeys,
   );
 
   return {
     ...state,
-    chatIndex: newChat,
+    chatIndex: newChatIndex,
     chat: newChatList,
   };
 };
+
+export const reduceChat = reduceChatIncremental;

package/src/livestream-store/index.tsx

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

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

@@ -10,9 +10,12 @@ 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

@@ -16,6 +16,9 @@ export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
     segment: null,
     renditions: [],
     replyToMessage: null,
+    streamKey: null,
+    setStreamKey: (sk) => set({ streamKey: sk }),
+    authors: {},
   }));
 };
 

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

@@ -33,7 +33,6 @@ export const PlayerProvider: React.FC<PlayerProviderProps> = ({
   );
 
   const createPlayer = useCallback((id?: string) => {
-    console.log("Creating new player");
     const playerId = id || Math.random().toString(36).slice(8);
     const playerStore = makePlayerStore(playerId);
 

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

@@ -1,3 +1,5 @@
+import { ChatMessageViewHydrated } from "streamplace";
+
 export enum PlayerProtocol {
   WEBRTC = "webrtc",
   HLS = "hls",
@@ -41,6 +43,10 @@ export interface PlayerState {
   /** Function to set the ingestStarting flag */
   setIngestStarting: (ingestStarting: boolean) => void;
 
+  /** Flag indicating if ingest is live */
+  ingestLive: boolean;
+  setIngestLive: (ingestLive: boolean) => void;
+
   /** Current connection state of ingest RTP/RTC peer connection */
   ingestConnectionState: RTCPeerConnectionState | null;
 
@@ -50,6 +56,9 @@ export interface PlayerState {
   ingestMediaSource?: IngestMediaSource;
   setIngestMediaSource?: (source: IngestMediaSource) => void;
 
+  ingestCamera: "user" | "environment";
+  setIngestCamera: (camera: "user" | "environment") => void;
+
   ingestAutoStart?: boolean;
   setIngestAutoStart?: (autoStart: boolean) => void;
 
@@ -110,6 +119,16 @@ export interface PlayerState {
       | undefined,
   ) => void;
 
+  /** Player element width (CSS value or number) */
+  playerWidth?: string | number;
+  /** Function to set the player width */
+  setPlayerWidth: (width: number) => void;
+
+  /** Player element height (CSS value or number) */
+  playerHeight?: string | number;
+  /** Function to set the player height */
+  setPlayerHeight: (height: number) => void;
+
   /** Flag indicating if player is in Picture-in-Picture mode */
   pipMode: boolean;
 
@@ -148,6 +167,15 @@ export interface PlayerState {
   clearControlsTimeout: () => void;
 
   setUserInteraction: () => void;
+
+  showDebugInfo: boolean;
+  setShowDebugInfo: (showDebugInfo: boolean) => void;
+
+  /** Message to be moderated */
+  modMessage: ChatMessageViewHydrated | null;
+
+  /** Function to set the mod message */
+  setModMessage: (message: ChatMessageViewHydrated | null) => void;
 }
 
 export type PlayerEvent = {

package/src/player-store/player-store.tsx

@@ -1,4 +1,5 @@
 import { useContext } from "react";
+import { ChatMessageViewHydrated } from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
 import { PlayerContext } from "./context";
 import {
@@ -32,6 +33,10 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     setIngestMediaSource: (ingestMediaSource: IngestMediaSource | undefined) =>
       set(() => ({ ingestMediaSource })),
 
+    ingestCamera: "user",
+    setIngestCamera: (ingestCamera: "user" | "environment") =>
+      set(() => ({ ingestCamera })),
+
     ingestConnectionState: null,
     setIngestConnectionState: (
       ingestConnectionState: RTCPeerConnectionState | null,
@@ -78,6 +83,12 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     pipMode: false,
     setPipMode: (pipMode: boolean) => set(() => ({ pipMode })),
 
+    // Player element width/height setters for global sync
+    playerWidth: undefined,
+    setPlayerWidth: (playerWidth: number) => set(() => ({ playerWidth })),
+    playerHeight: undefined,
+    setPlayerHeight: (playerHeight: number) => set(() => ({ playerHeight })),
+
     // * Whether mute was forced by the browser or not for autoplay
     // * Will get set to 'false' if the user has interacted with the volume
     muteWasForced: false,
@@ -95,6 +106,9 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     telemetry: true,
     setTelemetry: (telemetry: boolean) => set(() => ({ telemetry })),
 
+    ingestLive: false,
+    setIngestLive: (ingestLive: boolean) => set(() => ({ ingestLive })),
+
     playerEvent: async (
       url: string,
       time: string,
@@ -141,6 +155,14 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
         let controlsTimeout = setTimeout(() => p.setShowControls(false), 1000);
         return { showControls: true, controlsTimeout };
       }),
+
+    showDebugInfo: false,
+    setShowDebugInfo: (showDebugInfo: boolean) =>
+      set(() => ({ showDebugInfo })),
+
+    modMessage: null,
+    setModMessage: (modMessage: ChatMessageViewHydrated | null) =>
+      set(() => ({ modMessage })),
   }));
 };
 

package/src/streamplace-store/block.tsx

@@ -0,0 +1,29 @@
+import { AppBskyGraphBlock } from "@atproto/api";
+import { usePDSAgent } from "./xrpc";
+
+export function useCreateBlockRecord() {
+  let agent = usePDSAgent();
+
+  return async (subjectDID: string) => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    const record: AppBskyGraphBlock.Record = {
+      $type: "app.bsky.graph.block",
+      subject: subjectDID,
+      createdAt: new Date().toISOString(),
+    };
+    return await agent.com.atproto.repo.createRecord({
+      repo: agent.did,
+      collection: "app.bsky.graph.block",
+      record,
+    });
+
+    return record;
+  };
+}

package/src/streamplace-store/index.tsx

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