@streamplace/components 0.8.18 → 0.9.0

package/src/lib/theme/branded-theme-provider.tsx

@@ -0,0 +1,58 @@
+import { useMemo, type ReactNode } from "react";
+import {
+  useAccentColor,
+  usePrimaryColor,
+  useStreamplaceStore,
+} from "../../streamplace-store";
+import { ThemeProvider, type Theme } from "./theme";
+
+interface BrandedThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: "light" | "dark" | "system";
+  forcedTheme?: "light" | "dark";
+}
+
+/**
+ * ThemeProvider wrapper that automatically applies branding colors from the
+ * broadcaster's branding configuration.
+ */
+export function BrandedThemeProvider({
+  children,
+  defaultTheme,
+  forcedTheme,
+}: BrandedThemeProviderProps) {
+  const primaryColor = usePrimaryColor();
+  const accentColor = useAccentColor();
+  const brandingLoading = useStreamplaceStore((state) => state.brandingLoading);
+
+  // Build color theme overrides from branding
+  const colorTheme = useMemo<Partial<Theme["colors"]>>(() => {
+    // don't override until branding is loaded
+    if (brandingLoading) {
+      return {};
+    }
+
+    const overrides: Partial<Theme["colors"]> = {};
+
+    if (primaryColor) {
+      overrides.primary = primaryColor;
+      overrides.ring = primaryColor;
+    }
+
+    if (accentColor) {
+      overrides.accent = accentColor;
+    }
+
+    return overrides;
+  }, [primaryColor, accentColor, brandingLoading]);
+
+  return (
+    <ThemeProvider
+      defaultTheme={defaultTheme}
+      forcedTheme={forcedTheme}
+      colorTheme={colorTheme}
+    >
+      {children}
+    </ThemeProvider>
+  );
+}

package/src/lib/theme/index.ts

@@ -12,6 +12,9 @@ export {
   type ThemeIcons,
 } from "./theme";
 
+// Branded theme provider
+export { BrandedThemeProvider } from "./branded-theme-provider";
+
 // Design tokens
 export {
   animations,

package/src/livestream-store/chat.tsx

@@ -374,8 +374,6 @@ export const useSubmitReport = () => {
       subject: ComAtprotoModerationCreateReport.InputSchema["subject"],
       reasonType: string,
       reason?: string,
-      // no clue about this
-      moderationSvcDid: string = "did:web:stream.place",
     ) => {
       if (!pdsAgent || !userDID) {
         throw new Error("No PDS agent or user DID found");

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

@@ -3,6 +3,7 @@ import {
   ChatMessageViewHydrated,
   LivestreamViewHydrated,
   PlaceStreamDefs,
+  PlaceStreamModerationPermission,
   PlaceStreamSegment,
 } from "streamplace";
 
@@ -23,6 +24,10 @@ export interface LivestreamState {
   setStreamKey: (key: string | null) => void;
   websocketConnected: boolean;
   hasReceivedSegment: boolean;
+  moderationPermissions: PlaceStreamModerationPermission.Record[];
+  setModerationPermissions: (
+    permissions: PlaceStreamModerationPermission.Record[],
+  ) => void;
 }
 
 export interface LivestreamProblem {

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

@@ -24,6 +24,8 @@ export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
     problems: [],
     websocketConnected: false,
     hasReceivedSegment: false,
+    moderationPermissions: [],
+    setModerationPermissions: (perms) => set({ moderationPermissions: perms }),
   }));
 };
 

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

@@ -1,3 +1,6 @@
+// Just to be 100% sure it's imported successfully
+import "../crypto-polyfill";
+
 import { bytesToMultibase, Secp256k1Keypair } from "@atproto/crypto";
 import { useEffect, useState } from "react";
 import { Platform } from "react-native";

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

@@ -7,6 +7,7 @@ import {
   PlaceStreamChatMessage,
   PlaceStreamDefs,
   PlaceStreamLivestream,
+  PlaceStreamModerationPermission,
   PlaceStreamSegment,
 } from "streamplace";
 import { SystemMessages } from "../lib/system-messages";
@@ -120,6 +121,65 @@ export const handleWebSocketMessages = (
           pendingHides: newPendingHides,
         };
         state = reduceChat(state, [], [], [hiddenMessageUri]);
+      } else if (
+        PlaceStreamModerationPermission.isRecord(message) ||
+        (message &&
+          typeof message === "object" &&
+          "$type" in message &&
+          (message as { $type?: string }).$type ===
+            "place.stream.moderation.permission")
+      ) {
+        // Handle moderation permission record updates
+        // This can be a new permission or a deletion marker
+        const permRecord = message as
+          | PlaceStreamModerationPermission.Record
+          | { deleted?: boolean; rkey?: string; streamer?: string };
+
+        if ((permRecord as any).deleted) {
+          // Handle deletion: clear permissions to trigger refetch
+          // The useCanModerate hook will refetch and repopulate
+          state = {
+            ...state,
+            moderationPermissions: [],
+          };
+        } else {
+          // Handle new/updated permission: add or update in the list
+          // Use createdAt as a unique identifier since multiple records can exist for the same moderator
+          // (e.g., one record with "ban" permission, another with "hide" permission)
+          // Note: rkey would be ideal but isn't always present in the WebSocket message
+          const newPerm =
+            permRecord as PlaceStreamModerationPermission.Record & {
+              rkey?: string;
+            };
+          const existingIndex = state.moderationPermissions.findIndex((p) => {
+            const pWithRkey = p as PlaceStreamModerationPermission.Record & {
+              rkey?: string;
+            };
+            // Prefer matching by rkey if available, fall back to createdAt
+            if (newPerm.rkey && pWithRkey.rkey) {
+              return pWithRkey.rkey === newPerm.rkey;
+            }
+            return (
+              p.moderator === newPerm.moderator &&
+              p.createdAt === newPerm.createdAt
+            );
+          });
+
+          let newPermissions: PlaceStreamModerationPermission.Record[];
+          if (existingIndex >= 0) {
+            // Update existing record with same moderator AND createdAt
+            newPermissions = [...state.moderationPermissions];
+            newPermissions[existingIndex] = newPerm;
+          } else {
+            // Add new record (could be a new record for an existing moderator with different permissions)
+            newPermissions = [...state.moderationPermissions, newPerm];
+          }
+
+          state = {
+            ...state,
+            moderationPermissions: newPermissions,
+          };
+        }
       }
     }
   }

package/src/streamplace-provider/index.tsx

@@ -1,6 +1,11 @@
 import { SessionManager } from "@atproto/api/dist/session-manager";
 import { useEffect, useRef } from "react";
-import { useGetChatProfile } from "../streamplace-store";
+import { useDocumentTitle } from "../hooks";
+import {
+  useBrandingAutoFetch,
+  useFetchBroadcasterDID,
+  useGetChatProfile,
+} from "../streamplace-store";
 import { makeStreamplaceStore } from "../streamplace-store/streamplace-store";
 import { StreamplaceContext } from "./context";
 import Poller from "./poller";
@@ -27,13 +32,27 @@ export function StreamplaceProvider({
 
   return (
     <StreamplaceContext.Provider value={{ store: store }}>
-      <ChatProfileCreator oauthSession={oauthSession}>
-        <Poller>{children}</Poller>
-      </ChatProfileCreator>
+      <BrandingFetcher>
+        <ChatProfileCreator oauthSession={oauthSession}>
+          <Poller>{children}</Poller>
+        </ChatProfileCreator>
+      </BrandingFetcher>
     </StreamplaceContext.Provider>
   );
 }
 
+export function BrandingFetcher({ children }: { children: React.ReactNode }) {
+  const fetchBroadcasterDID = useFetchBroadcasterDID();
+  useBrandingAutoFetch();
+  useDocumentTitle();
+
+  useEffect(() => {
+    fetchBroadcasterDID();
+  }, [fetchBroadcasterDID]);
+
+  return <>{children}</>;
+}
+
 export function ChatProfileCreator({
   oauthSession,
   children,

package/src/streamplace-store/block.tsx

@@ -2,11 +2,21 @@ import { AppBskyGraphBlock } from "@atproto/api";
 import { useState } from "react";
 import { usePDSAgent } from "./xrpc";
 
+/**
+ * Hook to create a block record (ban user from chat).
+ *
+ * When the caller is the stream owner (agent.did === streamerDID), creates the
+ * block record directly via ATProto writes to their repo.
+ *
+ * When the caller is a delegated moderator, uses the place.stream.moderation.createBlock
+ * XRPC endpoint which validates permissions and creates the record using the
+ * streamer's OAuth session.
+ */
 export function useCreateBlockRecord() {
   let agent = usePDSAgent();
   const [isLoading, setIsLoading] = useState(false);
 
-  const createBlock = async (subjectDID: string) => {
+  const createBlock = async (subjectDID: string, streamerDID?: string) => {
     if (!agent) {
       throw new Error("No PDS agent found");
     }
@@ -17,15 +27,25 @@ export function useCreateBlockRecord() {
 
     setIsLoading(true);
     try {
-      const record: AppBskyGraphBlock.Record = {
-        $type: "app.bsky.graph.block",
+      // If no streamerDID provided or caller is the streamer, use direct ATProto write
+      if (!streamerDID || agent.did === streamerDID) {
+        const record: AppBskyGraphBlock.Record = {
+          $type: "app.bsky.graph.block",
+          subject: subjectDID,
+          createdAt: new Date().toISOString(),
+        };
+        const result = await agent.com.atproto.repo.createRecord({
+          repo: agent.did,
+          collection: "app.bsky.graph.block",
+          record,
+        });
+        return result;
+      }
+
+      // Otherwise, use delegated moderation endpoint
+      const result = await agent.place.stream.moderation.createBlock({
+        streamer: streamerDID,
         subject: subjectDID,
-        createdAt: new Date().toISOString(),
-      };
-      const result = await agent.com.atproto.repo.createRecord({
-        repo: agent.did,
-        collection: "app.bsky.graph.block",
-        record,
       });
       return result;
     } finally {
@@ -36,11 +56,24 @@ export function useCreateBlockRecord() {
   return { createBlock, isLoading };
 }
 
+/**
+ * Hook to create a gate record (hide a chat message).
+ *
+ * When the caller is the stream owner (agent.did === streamerDID), creates the
+ * gate record directly via ATProto writes to their repo.
+ *
+ * When the caller is a delegated moderator, uses the place.stream.moderation.createGate
+ * XRPC endpoint which validates permissions and creates the record using the
+ * streamer's OAuth session.
+ */
 export function useCreateHideChatRecord() {
   let agent = usePDSAgent();
   const [isLoading, setIsLoading] = useState(false);
 
-  const createHideChat = async (chatMessageUri: string) => {
+  const createHideChat = async (
+    chatMessageUri: string,
+    streamerDID?: string,
+  ) => {
     if (!agent) {
       throw new Error("No PDS agent found");
     }
@@ -51,15 +84,25 @@ export function useCreateHideChatRecord() {
 
     setIsLoading(true);
     try {
-      const record = {
-        $type: "place.stream.chat.gate",
-        hiddenMessage: chatMessageUri,
-      };
-
-      const result = await agent.com.atproto.repo.createRecord({
-        repo: agent.did,
-        collection: "place.stream.chat.gate",
-        record,
+      // If no streamerDID provided or caller is the streamer, use direct ATProto write
+      if (!streamerDID || agent.did === streamerDID) {
+        const record = {
+          $type: "place.stream.chat.gate",
+          hiddenMessage: chatMessageUri,
+        };
+
+        const result = await agent.com.atproto.repo.createRecord({
+          repo: agent.did,
+          collection: "place.stream.chat.gate",
+          record,
+        });
+        return result;
+      }
+
+      // Otherwise, use delegated moderation endpoint
+      const result = await agent.place.stream.moderation.createGate({
+        streamer: streamerDID,
+        messageUri: chatMessageUri,
       });
       return result;
     } finally {
@@ -69,3 +112,80 @@ export function useCreateHideChatRecord() {
 
   return { createHideChat, isLoading };
 }
+
+/**
+ * Hook to update a livestream record (update stream title).
+ *
+ * When the caller is the stream owner (agent.did === streamerDID), updates the
+ * livestream record directly via ATProto writes to their repo.
+ *
+ * When the caller is a delegated moderator, uses the place.stream.moderation.updateLivestream
+ * XRPC endpoint which validates permissions and updates the record using the
+ * streamer's OAuth session.
+ */
+export function useUpdateLivestreamRecord() {
+  let agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const updateLivestream = async (
+    livestreamUri: string,
+    title: string,
+    streamerDID?: string,
+  ) => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    setIsLoading(true);
+    try {
+      // If no streamerDID provided or caller is the streamer, use direct ATProto write
+      if (!streamerDID || agent.did === streamerDID) {
+        // Extract rkey from URI
+        const rkey = livestreamUri.split("/").pop();
+        if (!rkey) {
+          throw new Error("Invalid livestream URI");
+        }
+
+        // Get existing record to copy fields
+        const getResult = await agent.com.atproto.repo.getRecord({
+          repo: agent.did,
+          collection: "place.stream.livestream",
+          rkey,
+        });
+
+        const oldRecord = getResult.data.value as any;
+
+        // Create new record (don't edit - old records are "chapter markers")
+        // Spread entire record to preserve all fields (agent, canonicalUrl, notificationSettings, etc.)
+        const record = {
+          ...oldRecord,
+          title: title, // Override title
+          createdAt: new Date().toISOString(), // Override timestamp for new chapter marker
+        };
+
+        const result = await agent.com.atproto.repo.createRecord({
+          repo: agent.did,
+          collection: "place.stream.livestream",
+          record,
+        });
+        return result;
+      }
+
+      // Otherwise, use delegated moderation endpoint
+      const result = await agent.place.stream.moderation.updateLivestream({
+        streamer: streamerDID,
+        livestreamUri: livestreamUri,
+        title: title,
+      });
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { updateLivestream, isLoading };
+}

package/src/streamplace-store/branding.tsx

@@ -0,0 +1,216 @@
+import { useCallback, useEffect } from "react";
+import storage from "../storage";
+import {
+  getStreamplaceStoreFromContext,
+  useStreamplaceStore,
+} from "./streamplace-store";
+import { usePossiblyUnauthedPDSAgent } from "./xrpc";
+
+export interface BrandingAsset {
+  key: string;
+  mimeType: string;
+  url?: string; // URL for images
+  data?: string; // inline data for text, or base64 for images
+  width?: number; // image width in pixels
+  height?: number; // image height in pixels
+}
+
+// helper to convert blob to base64
+const blobToBase64 = (blob: Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+};
+
+// hook to fetch broadcaster DID (unauthenticated)
+export function useFetchBroadcasterDID() {
+  const streamplaceAgent = usePossiblyUnauthedPDSAgent();
+  const store = getStreamplaceStoreFromContext();
+
+  return useCallback(async () => {
+    try {
+      if (!streamplaceAgent) {
+        throw new Error("Streamplace agent not available");
+      }
+      const result =
+        await streamplaceAgent.place.stream.broadcast.getBroadcaster();
+      store.setState({ broadcasterDID: result.data.broadcaster });
+      if (result.data.server) {
+        store.setState({ serverDID: result.data.server });
+      }
+      if (result.data.admins) {
+        store.setState({ adminDIDs: result.data.admins });
+      }
+    } catch (err) {
+      console.error("Failed to fetch broadcaster DID:", err);
+    }
+  }, [streamplaceAgent, store]);
+}
+
+// hook to fetch branding data from the server
+export function useFetchBranding() {
+  const streamplaceAgent = usePossiblyUnauthedPDSAgent();
+  const broadcasterDID = useStreamplaceStore((state) => state.broadcasterDID);
+  const url = useStreamplaceStore((state) => state.url);
+  const store = getStreamplaceStoreFromContext();
+
+  return useCallback(
+    async ({ force = true } = {}) => {
+      if (!broadcasterDID) return;
+
+      try {
+        store.setState({ brandingLoading: true });
+
+        // check localStorage first
+        const cacheKey = `branding:${broadcasterDID}`;
+        const cached = await storage.getItem(cacheKey);
+        if (!force && cached) {
+          try {
+            const parsed = JSON.parse(cached);
+            // check if cache is less than 1 hour old
+            if (Date.now() - parsed.timestamp < 60 * 60 * 1000) {
+              store.setState({
+                branding: parsed.data,
+                brandingLoading: false,
+                brandingError: null,
+              });
+              return;
+            }
+          } catch (e) {
+            // invalid cache, continue to fetch
+            console.warn("Invalid branding cache, refetching", e);
+          }
+        }
+
+        // fetch branding metadata from server
+        if (!streamplaceAgent) {
+          throw new Error("Streamplace agent not available");
+        }
+        const res = await streamplaceAgent.place.stream.branding.getBranding({
+          broadcaster: broadcasterDID,
+        });
+        const assets = res.data.assets;
+
+        // convert assets array to keyed object and fetch blob data
+        const brandingMap: Record<string, BrandingAsset> = {};
+
+        for (const asset of assets) {
+          brandingMap[asset.key] = { ...asset };
+
+          // if data is already inline (text assets), use it directly
+          if (asset.data) {
+            brandingMap[asset.key].data = asset.data;
+          } else if (asset.url) {
+            // for images, construct full URL and fetch blob
+            const fullUrl = `${url}${asset.url}`;
+            const blobRes = await fetch(fullUrl);
+            const blob = await blobRes.blob();
+            brandingMap[asset.key].data = await blobToBase64(blob);
+          }
+        }
+
+        // cache in localStorage
+        storage.setItem(
+          cacheKey,
+          JSON.stringify({
+            timestamp: Date.now(),
+            data: brandingMap,
+          }),
+        );
+
+        store.setState({
+          branding: brandingMap,
+          brandingLoading: false,
+          brandingError: null,
+        });
+      } catch (err: any) {
+        console.error("Failed to fetch branding:", err);
+        store.setState({
+          brandingLoading: false,
+          brandingError: err.message || "Failed to fetch branding",
+        });
+      }
+    },
+    [broadcasterDID, streamplaceAgent, url, store],
+  );
+}
+
+// hook to get a specific branding asset by key
+export function useBrandingAsset(key: string): BrandingAsset | undefined {
+  return useStreamplaceStore((state) => state.branding?.[key]);
+}
+
+// convenience hook for main logo
+export function useMainLogo(): string | undefined {
+  const asset = useBrandingAsset("mainLogo");
+  return asset?.data;
+}
+
+// convenience hook for favicon
+export function useFavicon(): string | undefined {
+  const asset = useBrandingAsset("favicon");
+  return asset?.data;
+}
+
+// convenience hook for site title
+export function useSiteTitle(): string {
+  const asset = useBrandingAsset("siteTitle");
+  return asset?.data || "My Streamplace Station";
+}
+
+// convenience hook for site description
+export function useSiteDescription(): string {
+  const asset = useBrandingAsset("siteDescription");
+  return asset?.data || "Live streaming platform";
+}
+
+// convenience hook for primary color
+export function usePrimaryColor(): string {
+  const asset = useBrandingAsset("primaryColor");
+  return asset?.data || "#6366f1";
+}
+
+// convenience hook for accent color
+export function useAccentColor(): string {
+  const asset = useBrandingAsset("accentColor");
+  return asset?.data || "#8b5cf6";
+}
+
+// convenience hook for default streamer
+export function useDefaultStreamer(): string | undefined {
+  const asset = useBrandingAsset("defaultStreamer");
+  return asset?.data || undefined;
+}
+
+// convenience hook for sidebar background image
+export function useSidebarBackgroundImage(): BrandingAsset | undefined {
+  return useBrandingAsset("sidebarBackgroundImage");
+}
+
+// convenience hook for legal links
+export function useLegalLinks(): { text: string; url: string }[] {
+  const asset = useBrandingAsset("legalLinks");
+  if (!asset?.data) {
+    return [];
+  }
+  try {
+    return JSON.parse(asset.data);
+  } catch {
+    return [];
+  }
+}
+
+// hook to auto-fetch branding when broadcaster changes
+export function useBrandingAutoFetch() {
+  const fetchBranding = useFetchBranding();
+  const broadcasterDID = useStreamplaceStore((state) => state.broadcasterDID);
+
+  useEffect(() => {
+    if (broadcasterDID) {
+      fetchBranding();
+    }
+  }, [broadcasterDID, fetchBranding]);
+}

package/src/streamplace-store/index.tsx

@@ -1,3 +1,7 @@
+export * from "./block";
+export * from "./branding";
+export * from "./moderation";
+export * from "./moderator-management";
 export * from "./stream";
 export * from "./streamplace-store";
 export * from "./user";