@streamplace/components 0.8.18 → 0.9.0

package/src/streamplace-store/moderation.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useState } from "react";
+import { PlaceStreamModerationPermission } from "streamplace";
+import { useLivestreamStore } from "../livestream-store/livestream-store";
+import { usePDSAgent } from "./xrpc";
+
+export interface ModerationPermissions {
+  canBan: boolean;
+  canHide: boolean;
+  canManageLivestream: boolean;
+  isOwner: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * Hook to check if the current user can moderate for a given streamer.
+ * Returns permission flags based on:
+ * - Owner: full permissions if userDID === streamerDID
+ * - Delegated: permissions from place.stream.moderation.permission records
+ */
+export function useCanModerate(
+  streamerDID: string | null | undefined,
+): ModerationPermissions {
+  const agent = usePDSAgent();
+  const userDID = agent?.did;
+
+  // Get moderation permissions from livestream store (updated via WebSocket)
+  const moderationPermissions = useLivestreamStore(
+    (state) => state.moderationPermissions,
+  );
+  const setModerationPermissions = useLivestreamStore(
+    (state) => state.setModerationPermissions,
+  );
+
+  const [isOwner, setIsOwner] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!userDID || !streamerDID) {
+      setModerationPermissions([]);
+      setIsOwner(false);
+      setError(null);
+      return;
+    }
+
+    // If user is the streamer, they have full permissions
+    if (userDID === streamerDID) {
+      setIsOwner(true);
+      setModerationPermissions([]); // Not needed for owner
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    // Otherwise, fetch delegation records from the streamer's repo
+    // This initial fetch populates the store, then WebSocket updates will keep it in sync
+    const fetchDelegation = async () => {
+      if (!agent) {
+        setModerationPermissions([]);
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setIsOwner(false);
+
+      try {
+        // Use authenticated agent to list permission records from the streamer's repo
+        const result = await agent.com.atproto.repo.listRecords({
+          repo: streamerDID,
+          collection: "place.stream.moderation.permission",
+          limit: 100,
+        });
+
+        const records = result.data.records || [];
+        const permissionRecords: PlaceStreamModerationPermission.Record[] =
+          records
+            .map((r: { value: any }) => r.value)
+            .filter(
+              (v: any) => v && v.$type === "place.stream.moderation.permission",
+            );
+
+        // Store all permissions in the livestream store
+        // WebSocket updates will keep this in sync
+        setModerationPermissions(permissionRecords);
+      } catch (err) {
+        console.error("[useCanModerate] Error fetching permissions:", err);
+        setError(
+          `Could not fetch moderation permissions: ${err instanceof Error ? err.message : `Unknown error: ${err}`}`,
+        );
+        setModerationPermissions([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    // Fetch immediately on mount or when dependencies change
+    fetchDelegation();
+  }, [userDID, streamerDID, agent, setModerationPermissions]);
+
+  // If permissions were cleared (e.g., due to deletion), trigger a refetch
+  useEffect(() => {
+    // If permissions were cleared and we're not the owner, refetch
+    if (
+      moderationPermissions.length === 0 &&
+      !isOwner &&
+      userDID &&
+      streamerDID &&
+      agent
+    ) {
+      const fetchDelegation = async () => {
+        try {
+          const result = await agent.com.atproto.repo.listRecords({
+            repo: streamerDID,
+            collection: "place.stream.moderation.permission",
+            limit: 100,
+          });
+
+          const records = result.data.records || [];
+          const permissionRecords: PlaceStreamModerationPermission.Record[] =
+            records
+              .map((r: { value: any }) => r.value)
+              .filter(
+                (v: any) =>
+                  v && v.$type === "place.stream.moderation.permission",
+              );
+
+          setModerationPermissions(permissionRecords);
+        } catch (err) {
+          console.error("[useCanModerate] Error refetching permissions:", err);
+        }
+      };
+
+      // Small delay to avoid rapid refetches
+      const timeout = setTimeout(fetchDelegation, 100);
+      return () => clearTimeout(timeout);
+    }
+  }, [
+    moderationPermissions.length,
+    isOwner,
+    userDID,
+    streamerDID,
+    agent,
+    setModerationPermissions,
+  ]);
+
+  // Find ALL delegation records for this moderator and merge their permissions
+  const delegations = moderationPermissions.filter(
+    (perm) => perm.moderator === userDID,
+  );
+
+  // Merge permissions from all delegation records for this moderator
+  const permissions: string[] = delegations.reduce(
+    (acc: string[], delegation) => {
+      // Check if delegation has expired
+      if (delegation.expirationTime) {
+        const expiration = new Date(delegation.expirationTime);
+        if (new Date() > expiration) {
+          return acc; // Skip expired delegations
+        }
+      }
+
+      // Add all permissions from this delegation, avoiding duplicates
+      const delegationPerms = delegation.permissions || [];
+      for (const perm of delegationPerms) {
+        if (!acc.includes(perm)) {
+          acc.push(perm);
+        }
+      }
+      return acc;
+    },
+    [],
+  );
+
+  return {
+    canBan: isOwner || permissions.includes("ban"),
+    canHide: isOwner || permissions.includes("hide"),
+    canManageLivestream: isOwner || permissions.includes("livestream.manage"),
+    isOwner,
+    isLoading,
+    error,
+  };
+}

package/src/streamplace-store/moderator-management.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useEffect, useState } from "react";
+import { PlaceStreamModerationPermission } from "streamplace";
+import { usePDSAgent } from "./xrpc";
+
+interface ModeratorRecord {
+  uri: string;
+  cid: string;
+  value: PlaceStreamModerationPermission.Record;
+  rkey: string;
+}
+
+interface ListModeratorsResult {
+  moderators: ModeratorRecord[];
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => void;
+}
+
+/**
+ * Hook to list all moderators for the current user's stream.
+ * Fetches place.stream.moderation.permission records from the user's repo.
+ */
+export function useListModerators(): ListModeratorsResult {
+  const agent = usePDSAgent();
+  const [moderators, setModerators] = useState<ModeratorRecord[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+
+  const refresh = useCallback(() => {
+    setRefreshTrigger((prev) => prev + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!agent?.did) {
+      setModerators([]);
+      setError(null);
+      return;
+    }
+
+    const fetchModerators = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const result = await agent.place.stream.moderation.permission.list({
+          repo: agent.did!,
+        });
+
+        const records = result.records.map((record: any) => {
+          const rkey = record.uri.split("/").pop();
+          return {
+            uri: record.uri,
+            cid: record.cid || "",
+            value: record.value,
+            rkey: rkey || "",
+          };
+        });
+
+        setModerators(records);
+      } catch (err) {
+        setError(
+          `Failed to fetch moderators: ${err instanceof Error ? err.message : "Unknown error"}`,
+        );
+        setModerators([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchModerators();
+  }, [agent?.did, refreshTrigger]);
+
+  return {
+    moderators,
+    isLoading,
+    error,
+    refresh,
+  };
+}
+
+interface AddModeratorParams {
+  moderatorDID: string;
+  permissions: ("ban" | "hide" | "livestream.manage")[];
+  expirationTime?: string; // ISO 8601 datetime string
+}
+
+/**
+ * Hook to add a new moderator.
+ * Creates a place.stream.moderation.permission record in the current user's repo.
+ */
+export function useAddModerator() {
+  const agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const addModerator = async (params: AddModeratorParams) => {
+    if (!agent?.did) {
+      throw new Error("Not logged in");
+    }
+
+    if (params.permissions.length === 0) {
+      throw new Error("At least one permission must be selected");
+    }
+
+    setIsLoading(true);
+    try {
+      // Resolve handle to DID if needed
+      let moderatorDID = params.moderatorDID.trim();
+      if (!moderatorDID.startsWith("did:")) {
+        if (moderatorDID.startsWith("@")) {
+          moderatorDID = moderatorDID.substring(1); // Remove @
+        }
+        try {
+          const resolved = await agent.com.atproto.identity.resolveHandle({
+            handle: moderatorDID,
+          });
+          moderatorDID = resolved.data.did;
+        } catch (e) {
+          throw new Error(
+            `Invalid DID or handle: ${moderatorDID}. Please use a valid DID (did:plc:...) or handle (@handle.bsky.social)`,
+          );
+        }
+      }
+
+      const record: PlaceStreamModerationPermission.Record = {
+        $type: "place.stream.moderation.permission",
+        moderator: moderatorDID,
+        permissions: params.permissions,
+        createdAt: new Date().toISOString(),
+      };
+
+      if (params.expirationTime) {
+        (record as any).expirationTime = params.expirationTime;
+      }
+
+      const result = await agent.place.stream.moderation.permission.create(
+        { repo: agent.did },
+        record,
+      );
+
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { addModerator, isLoading };
+}
+
+/**
+ * Hook to remove a moderator.
+ * Deletes a place.stream.moderation.permission record by its rkey.
+ */
+export function useRemoveModerator() {
+  const agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const removeModerator = async (rkey: string) => {
+    if (!agent?.did) {
+      throw new Error("Not logged in");
+    }
+
+    setIsLoading(true);
+    try {
+      await agent.place.stream.moderation.permission.delete({
+        repo: agent.did,
+        rkey,
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { removeModerator, isLoading };
+}

package/src/streamplace-store/streamplace-store.tsx

@@ -4,6 +4,7 @@ import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
 import storage from "../storage";
 import { StreamplaceContext } from "../streamplace-provider/context";
+import { BrandingAsset } from "./branding";
 
 export interface ContentMetadataResult {
   record: any;
@@ -48,6 +49,13 @@ export interface StreamplaceState {
   setBroadcasterDID: (broadcasterDID: string | null) => void;
   serverDID: string | null;
   setServerDID: (serverDID: string | null) => void;
+  adminDIDs: string[];
+  setAdminDIDs: (adminDIDs: string[]) => void;
+
+  // Branding state
+  branding: Record<string, BrandingAsset> | null;
+  brandingLoading: boolean;
+  brandingError: string | null;
 
   // Volume state
   volume: number;
@@ -111,11 +119,18 @@ export const makeStreamplaceStore = ({
       set({ broadcasterDID }),
     serverDID: null,
     setServerDID: (serverDID: string | null) => set({ serverDID }),
+    adminDIDs: [],
+    setAdminDIDs: (adminDIDs: string[]) => set({ adminDIDs }),
 
     // Content metadata
     contentMetadata: null,
     setContentMetadata: (metadata) => set({ contentMetadata: metadata }),
 
+    // Branding state
+    branding: null,
+    brandingLoading: false,
+    brandingError: null,
+
     // Volume state - start with defaults
     volume: 1.0,
     muted: false,

package/src/streamplace-store/xrpc.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { StreamplaceAgent } from "streamplace";
-import { useStreamplaceStore } from ".";
+import { useStreamplaceStore, useUrl } from ".";
 
 export function usePDSAgent(): StreamplaceAgent | null {
   const oauthSession = useStreamplaceStore((state) => state.oauthSession);
@@ -20,3 +20,20 @@ export function usePDSAgent(): StreamplaceAgent | null {
     return new StreamplaceAgent(oauthSession);
   }, [oauthSession]);
 }
+
+// can be unauthed, but will always use the current node URL
+export function usePossiblyUnauthedPDSAgent(): StreamplaceAgent | null {
+  const nodeUrl = useUrl();
+  const oauthSession = useStreamplaceStore((state) => state.oauthSession);
+  // oauthsession is
+  // - undefined when loading
+  // - null when logged out, and
+  // - SessionManager when logged in
+  return useMemo(() => {
+    if (!oauthSession) {
+      return new StreamplaceAgent(nodeUrl);
+    }
+
+    return new StreamplaceAgent(oauthSession);
+  }, [oauthSession]);
+}