@streamplace/components 0.0.1 → 0.7.0

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

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

package/src/streamplace-store/stream.tsx

@@ -0,0 +1,262 @@
+import { AppBskyFeedPost, BlobRef, RichText } from "@atproto/api";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { StreamplaceAgent } from "streamplace/src/agent";
+import { PlaceStreamLivestream } from "streamplace/src/lexicons";
+import { LivestreamViewHydrated } from "streamplace/src/useful-types";
+import { useUrl } from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+const uploadThumbnail = async (
+  pdsAgent: StreamplaceAgent,
+  customThumbnail?: Blob,
+) => {
+  if (customThumbnail) {
+    let tries = 0;
+    try {
+      let thumbnail = await pdsAgent.uploadBlob(customThumbnail);
+
+      while (
+        thumbnail.data.blob.size === 0 &&
+        customThumbnail.size !== 0 &&
+        tries < 3
+      ) {
+        console.warn(
+          "Reuploading blob as blob sizes don't match! Blob size recieved is",
+          thumbnail.data.blob.size,
+          "and sent blob size is",
+          customThumbnail.size,
+        );
+        thumbnail = await pdsAgent.uploadBlob(customThumbnail);
+      }
+
+      if (tries === 3) {
+        throw new Error("Could not successfully upload blob (tried thrice)");
+      }
+
+      if (thumbnail.success) {
+        console.log("Successfully uploaded thumbnail");
+        return thumbnail.data.blob;
+      }
+    } catch (e) {
+      throw new Error("Error uploading thumbnail: " + e);
+    }
+  }
+};
+
+async function createNewPost(
+  agent: StreamplaceAgent,
+  record: AppBskyFeedPost.Record,
+): Promise<{ uri: string; cid: string }> {
+  try {
+    const post = await agent.post(record);
+
+    return { uri: post.uri, cid: post.cid };
+  } catch (error) {
+    console.error("Error creating new post:", error);
+    throw error;
+  }
+}
+
+function buildGoLivePost(
+  text: string,
+  url: URL,
+  profile: ProfileViewDetailed,
+  params: URLSearchParams,
+  thumbnail: BlobRef | undefined,
+): AppBskyFeedPost.Record {
+  const now = new Date();
+  const linkUrl = `${url.protocol}//${url.host}/${profile.handle}?${params.toString()}`;
+  const prefix = `🔴 LIVE `;
+  const textUrl = `${url.protocol}//${url.host}/${profile.handle}`;
+  const suffix = ` ${text}`;
+  const content = prefix + textUrl + suffix;
+
+  const rt = new RichText({ text: content });
+  rt.detectFacetsWithoutResolution();
+  const record: AppBskyFeedPost.Record = {
+    $type: "app.bsky.feed.post",
+    text: content,
+    "place.stream.livestream": {
+      url: linkUrl,
+      title: text,
+    },
+    facets: rt.facets,
+    createdAt: now.toISOString(),
+  };
+  record.embed = {
+    $type: "app.bsky.embed.external",
+    external: {
+      description: text,
+      thumb: thumbnail,
+      title: `@${profile.handle} is 🔴LIVE on ${url.host}!`,
+      uri: linkUrl,
+    },
+  };
+
+  return record;
+}
+
+export function useCreateStreamRecord() {
+  let agent = usePDSAgent();
+  let url = useUrl();
+
+  return async (
+    title: string,
+    customThumbnail?: Blob,
+    submitPost: boolean = true,
+  ) => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    let thumbnail: BlobRef | undefined = undefined;
+
+    const u = new URL(url);
+
+    if (customThumbnail) {
+      try {
+        thumbnail = await uploadThumbnail(agent, customThumbnail);
+      } catch (e) {
+        throw new Error(`Custom thumbnail upload failed ${e}`);
+      }
+    } else {
+      // No custom thumbnail: fetch the server-side image and upload it
+      // try thrice lel
+      let tries = 0;
+      try {
+        for (; tries < 3; tries++) {
+          try {
+            console.log(
+              `Fetching thumbnail from ${u.protocol}//${u.host}/api/playback/${agent.did}/stream.png`,
+            );
+            const thumbnailRes = await fetch(
+              `${u.protocol}//${u.host}/api/playback/${agent.did}/stream.png`,
+            );
+            if (!thumbnailRes.ok) {
+              throw new Error(
+                `Failed to fetch thumbnail: ${thumbnailRes.status})`,
+              );
+            }
+            const thumbnailBlob = await thumbnailRes.blob();
+            console.log(thumbnailBlob);
+            thumbnail = await uploadThumbnail(agent, thumbnailBlob);
+          } catch (e) {
+            console.warn(
+              `Failed to fetch thumbnail, retrying (${tries + 1}/3): ${e}`,
+            );
+            // Wait 1 second before retrying
+            await new Promise((resolve) => setTimeout(resolve, 2000));
+            if (tries === 2) {
+              throw new Error(`Failed to fetch thumbnail after 3 tries: ${e}`);
+            }
+          }
+        }
+      } catch (e) {
+        throw new Error(`Thumbnail upload failed ${e}`);
+      }
+    }
+
+    let newPost: undefined | { uri: string; cid: string } = undefined;
+
+    if (submitPost) {
+      const did = agent.did;
+      const profile = await agent.getProfile({ actor: did });
+
+      if (!profile) {
+        throw new Error("No profile found for the user DID");
+      }
+
+      const params = new URLSearchParams({
+        did: did,
+        time: new Date().toISOString(),
+      });
+
+      let post = buildGoLivePost(title, u, profile.data, params, thumbnail);
+
+      newPost = await createNewPost(agent, post);
+
+      if (!newPost.uri || !newPost.cid) {
+        throw new Error(
+          "Cannot read properties of undefined (reading 'uri' or 'cid')",
+        );
+      }
+    }
+
+    const record: PlaceStreamLivestream.Record = {
+      title: title,
+      url: url,
+      createdAt: new Date().toISOString(),
+      post: newPost,
+      thumb: thumbnail,
+    };
+
+    await agent.com.atproto.repo.createRecord({
+      repo: agent.did,
+      collection: "place.stream.livestream",
+      record,
+    });
+    return record;
+  };
+}
+
+export function useUpdateStreamRecord() {
+  let agent = usePDSAgent();
+  let url = useUrl();
+
+  return async (
+    title: string,
+    livestream: LivestreamViewHydrated | null,
+    customThumbnail?: Blob,
+  ) => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    if (!livestream) {
+      throw new Error("No latest record");
+    }
+
+    let rkey = livestream.uri.split("/").pop();
+    let oldRecordValue: PlaceStreamLivestream.Record = livestream.record;
+
+    if (!rkey) {
+      throw new Error("No rkey?");
+    }
+
+    let thumbnail: BlobRef | undefined = oldRecordValue.thumb;
+
+    // update thumbnail if a new one is provided
+    if (customThumbnail) {
+      try {
+        thumbnail = await uploadThumbnail(agent, customThumbnail);
+      } catch (e) {
+        throw new Error(`Custom thumbnail upload failed ${e}`);
+      }
+    }
+
+    const record: PlaceStreamLivestream.Record = {
+      title: title,
+      url: url,
+      createdAt: new Date().toISOString(),
+      post: oldRecordValue.post,
+      thumb: thumbnail,
+    };
+
+    await agent.com.atproto.repo.putRecord({
+      repo: agent.did,
+      collection: "place.stream.livestream",
+      rkey,
+      record,
+    });
+
+    return record;
+  };
+}

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

@@ -0,0 +1,89 @@
+import { SessionManager } from "@atproto/api/dist/session-manager";
+import { useContext } from "react";
+import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
+import { createStore, StoreApi, useStore } from "zustand";
+import { StreamplaceContext } from "../streamplace-provider/context";
+
+// 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
+//    server-side authentication. This isn't very much stuff yet, but you need
+//    to log into Streamplace to do things like have Streamplace update your
+//    activity status.
+// 3. Anonymous XRPC to the Streamplace server for stuff like `getLiveUsers`. This
+//    is easy to handle internal to this library.
+// For the Streamplace app itself, all three are the same. For apps that aren't
+// doing OAuth through the Streamplace node, we need to expose an interface that
+// allows them to use atcute or whatever for 1.
+
+export interface StreamplaceState {
+  url: string;
+  liveUsers: PlaceStreamLivestream.LivestreamView[] | null;
+  setLiveUsers: (opts: {
+    liveUsers?: PlaceStreamLivestream.LivestreamView[];
+    liveUsersLoading?: boolean;
+    liveUsersError?: string | null;
+    liveUsersRefresh?: number;
+  }) => void;
+  liveUsersRefresh: number;
+  liveUsersLoading: boolean;
+  liveUsersError: string | null;
+  oauthSession: SessionManager | null;
+  handle: string | null;
+  chatProfile: PlaceStreamChatProfile.Record | null;
+}
+
+export type StreamplaceStore = StoreApi<StreamplaceState>;
+
+export const makeStreamplaceStore = ({
+  url,
+}: {
+  url: string;
+}): StoreApi<StreamplaceState> => {
+  return createStore<StreamplaceState>()((set) => ({
+    url,
+    liveUsers: null,
+    setLiveUsers: (opts: {
+      liveUsers?: PlaceStreamLivestream.LivestreamView[];
+      liveUsersLoading?: boolean;
+      liveUsersError?: string | null;
+      liveUsersRefresh?: number;
+    }) => {
+      set({
+        ...opts,
+      });
+    },
+    liveUsersRefresh: 0,
+    liveUsersLoading: true,
+    liveUsersError: null,
+    oauthSession: null,
+    handle: null,
+    chatProfile: null,
+  }));
+};
+
+export function getStreamplaceStoreFromContext(): StreamplaceStore {
+  const context = useContext(StreamplaceContext);
+  if (!context) {
+    throw new Error(
+      "useStreamplaceStore must be used within a StreamplaceProvider",
+    );
+  }
+  return context.store;
+}
+
+export function useStreamplaceStore<U>(
+  selector: (state: StreamplaceState) => U,
+): U {
+  return useStore(getStreamplaceStoreFromContext(), selector);
+}
+
+export const useUrl = () => useStreamplaceStore((x) => x.url);
+
+export const useDID = () => useStreamplaceStore((x) => x.oauthSession?.did);
+
+export const useHandle = () => useStreamplaceStore((x) => x.handle);
+export const useSetHandle = (): ((handle: string) => void) => {
+  const store = getStreamplaceStoreFromContext();
+  return (handle: string) => store.setState({ handle });
+};

package/src/streamplace-store/user.tsx

@@ -0,0 +1,57 @@
+import { PlaceStreamChatProfile } from "streamplace";
+import {
+  getStreamplaceStoreFromContext,
+  useDID,
+  useStreamplaceStore,
+} from "./streamplace-store";
+import { usePDSAgent } from "./xrpc";
+
+export function useGetChatProfile() {
+  const did = useDID();
+  const pdsAgent = usePDSAgent();
+  const store = getStreamplaceStoreFromContext();
+
+  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");
+    }
+
+    if (PlaceStreamChatProfile.isRecord(res.data.value)) {
+      store.setState({ chatProfile: res.data.value });
+    } else {
+      console.log("not a record", res.data.value);
+    }
+  };
+}
+
+export function useGetBskyProfile() {
+  const did = useDID();
+  const pdsAgent = usePDSAgent();
+  const store = getStreamplaceStoreFromContext();
+
+  return async () => {
+    if (!did || !pdsAgent) {
+      throw new Error("No DID or PDS agent");
+    }
+    const res = await pdsAgent.app.bsky.actor.getProfile({
+      actor: did,
+    });
+    if (!res.success) {
+      throw new Error("Failed to get chat profile record");
+    }
+
+    store.setState({ handle: res.data.handle });
+  };
+}
+
+export function useChatProfile() {
+  return useStreamplaceStore((x) => x.chatProfile);
+}

package/src/streamplace-store/xrpc.tsx

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { StreamplaceAgent } from "streamplace";
+import { useStreamplaceStore } from ".";
+
+export function usePDSAgent(): StreamplaceAgent | null {
+  const oauthSession = useStreamplaceStore((state) => state.oauthSession);
+
+  return useMemo(() => {
+    if (!oauthSession) {
+      return null;
+    }
+
+    return new StreamplaceAgent(oauthSession);
+  }, [oauthSession]);
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../app/tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}