@streamplace/components 0.7.34 → 0.8.0

package/src/streamplace-store/graph.tsx

@@ -0,0 +1,232 @@
+import { AppBskyGraphFollow } from "@atproto/api";
+import { useEffect, useState } from "react";
+import { useStreamplaceStore } from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+export function useCreateFollowRecord() {
+  let agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const createFollow = 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");
+    }
+
+    setIsLoading(true);
+    try {
+      const record: AppBskyGraphFollow.Record = {
+        $type: "app.bsky.graph.follow",
+        subject: subjectDID,
+        createdAt: new Date().toISOString(),
+      };
+      const result = await agent.com.atproto.repo.createRecord({
+        repo: agent.did,
+        collection: "app.bsky.graph.follow",
+        record,
+      });
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { createFollow, isLoading };
+}
+
+export function useDeleteFollowRecord() {
+  let agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteFollow = async (followRecordUri: 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 {
+      const result = await agent.com.atproto.repo.deleteRecord({
+        repo: agent.did,
+        collection: "app.bsky.graph.follow",
+        rkey: followRecordUri.split("/").pop()!,
+      });
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { deleteFollow, isLoading };
+}
+
+interface GraphManagerState {
+  isFollowing: boolean | null;
+  followUri: string | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+interface GraphManagerActions {
+  follow: () => Promise<void>;
+  unfollow: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+export function useGraphManager(
+  subjectDID: string | null | undefined,
+): GraphManagerState & GraphManagerActions {
+  const agent = usePDSAgent();
+  const [isFollowing, setIsFollowing] = useState<boolean | null>(null);
+  const [followUri, setFollowUri] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const userDID = agent?.did;
+
+  const streamplaceUrl = useStreamplaceStore((state) => state.url);
+
+  const fetchFollowStatus = async () => {
+    if (!userDID || !subjectDID || !streamplaceUrl) {
+      setIsFollowing(null);
+      setFollowUri(null);
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${streamplaceUrl}/xrpc/place.stream.graph.getFollowingUser?subjectDID=${encodeURIComponent(subjectDID)}&userDID=${encodeURIComponent(userDID)}`,
+        {
+          credentials: "include",
+        },
+      );
+
+      if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed to fetch follow status: ${errorText}`);
+      }
+
+      const data = await res.json();
+
+      if (data.follow) {
+        setIsFollowing(true);
+        setFollowUri(data.follow.uri);
+      } else {
+        setIsFollowing(false);
+        setFollowUri(null);
+      }
+    } catch (err) {
+      setError(
+        `Could not determine follow state: ${err instanceof Error ? err.message : `Unknown error: ${err}`}`,
+      );
+      setIsFollowing(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!userDID || !subjectDID) {
+      setIsFollowing(null);
+      setFollowUri(null);
+      setError(null);
+      return;
+    }
+
+    fetchFollowStatus();
+  }, [userDID, subjectDID, streamplaceUrl]);
+
+  const follow = async () => {
+    if (!agent || !subjectDID) {
+      throw new Error("Cannot follow: not logged in or no subject DID");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    setIsLoading(true);
+    setError(null);
+    const previousState = isFollowing;
+    setIsFollowing(true); // Optimistic
+
+    try {
+      const record: AppBskyGraphFollow.Record = {
+        $type: "app.bsky.graph.follow",
+        subject: subjectDID,
+        createdAt: new Date().toISOString(),
+      };
+      const result = await agent.com.atproto.repo.createRecord({
+        repo: agent.did,
+        collection: "app.bsky.graph.follow",
+        record,
+      });
+      setFollowUri(result.data.uri);
+      setIsFollowing(true);
+    } catch (err) {
+      setIsFollowing(previousState);
+      const errorMsg = `Failed to follow: ${err instanceof Error ? err.message : "Unknown error"}`;
+      setError(errorMsg);
+      throw new Error(errorMsg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const unfollow = async () => {
+    if (!agent || !subjectDID) {
+      throw new Error("Cannot unfollow: not logged in or no subject DID");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    if (!followUri) {
+      throw new Error("Cannot unfollow: no follow URI found");
+    }
+
+    setIsLoading(true);
+    setError(null);
+    const previousState = isFollowing;
+    const previousUri = followUri;
+    setIsFollowing(false); // Optimistic
+    setFollowUri(null);
+
+    try {
+      await agent.com.atproto.repo.deleteRecord({
+        repo: agent.did,
+        collection: "app.bsky.graph.follow",
+        rkey: followUri.split("/").pop()!,
+      });
+      setIsFollowing(false);
+      setFollowUri(null);
+    } catch (err) {
+      setIsFollowing(previousState);
+      setFollowUri(previousUri);
+      const errorMsg = `Failed to unfollow: ${err instanceof Error ? err.message : "Unknown error"}`;
+      setError(errorMsg);
+      throw new Error(errorMsg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    isFollowing,
+    followUri,
+    isLoading,
+    error,
+    follow,
+    unfollow,
+    refresh: fetchFollowStatus,
+  };
+}

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

@@ -5,6 +5,13 @@ import { createStore, StoreApi, useStore } from "zustand";
 import storage from "../storage";
 import { StreamplaceContext } from "../streamplace-provider/context";
 
+export interface ContentMetadataResult {
+  record: any;
+  uri: string;
+  cid: string;
+  rkey?: string;
+}
+
 // there are three categories of XRPC that we need to handle:
 // 1. Public (probably) OAuth XRPC to the users' PDS for apps that use this API.
 // 2. Confidental OAuth to the Streamplace server for doing things that require
@@ -33,6 +40,10 @@ export interface StreamplaceState {
   handle: string | null;
   chatProfile: PlaceStreamChatProfile.Record | null;
 
+  // Content metadata state
+  contentMetadata: ContentMetadataResult | null;
+  setContentMetadata: (metadata: ContentMetadataResult | null) => void;
+
   // Volume state
   volume: number;
   muted: boolean;
@@ -70,6 +81,10 @@ export const makeStreamplaceStore = ({
     handle: null,
     chatProfile: null,
 
+    // Content metadata
+    contentMetadata: null,
+    setContentMetadata: (metadata) => set({ contentMetadata: metadata }),
+
     // Volume state - start with defaults
     volume: 1.0,
     muted: false,
@@ -125,13 +140,12 @@ export const makeStreamplaceStore = ({
         initialMuted = storedMuted === "true";
       }
 
-      // Update the store with loaded values
       store.setState({
         volume: initialVolume,
         muted: initialMuted,
       });
-    } catch (e) {
-      console.warn("Failed to load volume settings from storage:", e);
+    } catch (error) {
+      console.error("Failed to load volume state from storage:", error);
     }
   })();
 
@@ -164,7 +178,17 @@ export const useSetHandle = (): ((handle: string) => void) => {
   return (handle: string) => store.setState({ handle });
 };
 
-// Volume convenience hooks
+// Content metadata hooks
+export const useContentMetadata = () =>
+  useStreamplaceStore((x) => x.contentMetadata);
+
+export const useSetContentMetadata = () => {
+  const store = getStreamplaceStoreFromContext();
+  return (metadata: ContentMetadataResult | null) =>
+    store.setState({ contentMetadata: metadata });
+};
+
+// Volume/muted hooks
 export const useVolume = () => useStreamplaceStore((x) => x.volume);
 export const useMuted = () => useStreamplaceStore((x) => x.muted);
 export const useSetVolume = () => useStreamplaceStore((x) => x.setVolume);
@@ -177,3 +201,5 @@ export const useEffectiveVolume = () =>
     // Ensure we always return a finite number for HTMLMediaElement.volume
     return Number.isFinite(effectiveVolume) ? effectiveVolume : 1.0;
   });
+
+export { useCreateStreamRecord, useUpdateStreamRecord } from "./stream";

package/src/streamplace-store/user.tsx

@@ -10,18 +10,36 @@ export function useGetChatProfile() {
   const did = useDID();
   const pdsAgent = usePDSAgent();
   const store = getStreamplaceStoreFromContext();
+  const createEmptyChatProfile = useCreateEmptyChatProfile();
 
   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");
+    let res;
+    try {
+      res = await pdsAgent.com.atproto.repo.getRecord({
+        repo: did,
+        collection: "place.stream.chat.profile",
+        rkey: "self",
+      });
+    } catch (e) {
+      console.error(
+        "Failed to get chat profile record, attempting creation",
+        e,
+      );
+    }
+    if (!res || !res.success) {
+      try {
+        await createEmptyChatProfile();
+        res = await pdsAgent.com.atproto.repo.getRecord({
+          repo: did,
+          collection: "place.stream.chat.profile",
+          rkey: "self",
+        });
+      } catch (e) {
+        console.error("Failed to create empty chat profile record", e);
+      }
     }
 
     if (PlaceStreamChatProfile.isRecord(res.data.value)) {
@@ -32,6 +50,30 @@ export function useGetChatProfile() {
   };
 }
 
+export function useCreateEmptyChatProfile() {
+  const did = useDID();
+  const pdsAgent = usePDSAgent();
+
+  return async () => {
+    if (!did || !pdsAgent) {
+      throw new Error("No DID or PDS agent");
+    }
+    const res = await pdsAgent.com.atproto.repo.putRecord({
+      repo: did,
+      collection: "place.stream.chat.profile",
+      rkey: "self",
+      record: {
+        $type: "place.stream.chat.profile",
+        color:
+          DEFAULT_COLORS[Math.floor(Math.random() * DEFAULT_COLORS.length)],
+      },
+    });
+    if (!res.success) {
+      throw new Error("Failed to create empty chat profile record");
+    }
+  };
+}
+
 export function useGetBskyProfile() {
   const did = useDID();
   const pdsAgent = usePDSAgent();
@@ -55,3 +97,25 @@ export function useGetBskyProfile() {
 export function useChatProfile() {
   return useStreamplaceStore((x) => x.chatProfile);
 }
+
+const DEFAULT_COLORS: PlaceStreamChatProfile.Color[] = [
+  { red: 244, green: 67, blue: 54 },
+  { red: 233, green: 30, blue: 99 },
+  { red: 156, green: 39, blue: 176 },
+  { red: 103, green: 58, blue: 183 },
+  { red: 63, green: 81, blue: 181 },
+  { red: 33, green: 150, blue: 243 },
+  { red: 3, green: 169, blue: 244 },
+  { red: 0, green: 188, blue: 212 },
+  { red: 0, green: 150, blue: 136 },
+  { red: 76, green: 175, blue: 80 },
+  { red: 139, green: 195, blue: 74 },
+  { red: 205, green: 220, blue: 57 },
+  { red: 255, green: 235, blue: 59 },
+  { red: 255, green: 193, blue: 7 },
+  { red: 255, green: 152, blue: 0 },
+  { red: 255, green: 87, blue: 34 },
+  { red: 121, green: 85, blue: 72 },
+  { red: 158, green: 158, blue: 158 },
+  { red: 96, green: 125, blue: 139 },
+];