@streamplace/components 0.7.2 → 0.7.3

package/src/streamplace-store/stream.tsx

@@ -6,41 +6,62 @@ 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);
-      }
+import { useEffect, useRef } from "react";
 
-      if (tries === 3) {
-        throw new Error("Could not successfully upload blob (tried thrice)");
-      }
+const useUploadThumbnail = () => {
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    return () => {
+      // On unmount, abort any ongoing upload
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  const uploadThumbnail = async (
+    pdsAgent: StreamplaceAgent,
+    customThumbnail?: Blob,
+  ) => {
+    if (!customThumbnail) return undefined;
+
+    abortRef.current = new AbortController();
+    const { signal } = abortRef.current;
+
+    const maxTries = 3;
+    let lastError: unknown = null;
 
-      if (thumbnail.success) {
-        console.log("Successfully uploaded thumbnail");
-        return thumbnail.data.blob;
+    for (let tries = 0; tries < maxTries; tries++) {
+      try {
+        const thumbnail = await pdsAgent.uploadBlob(customThumbnail, {
+          signal,
+        });
+        if (
+          thumbnail.success &&
+          thumbnail.data.blob.size === customThumbnail.size
+        ) {
+          console.log("Successfully uploaded thumbnail");
+          return thumbnail.data.blob;
+        } else {
+          console.warn(
+            `Blob size mismatch (attempt ${tries + 1}): received ${thumbnail.data.blob.size}, expected ${customThumbnail.size}`,
+          );
+        }
+      } catch (e) {
+        if (signal.aborted) {
+          console.warn("Upload aborted");
+          return undefined;
+        }
+        lastError = e;
+        console.warn(`Error uploading thumbnail (attempt ${tries + 1}): ${e}`);
       }
-    } catch (e) {
-      throw new Error("Error uploading thumbnail: " + e);
     }
-  }
+
+    throw new Error(
+      `Could not successfully upload blob after ${maxTries} attempts. Last error: ${lastError}`,
+    );
+  };
+
+  return uploadThumbnail;
 };
 
 async function createNewPost(
@@ -57,13 +78,14 @@ async function createNewPost(
   }
 }
 
-function buildGoLivePost(
+async function buildGoLivePost(
   text: string,
   url: URL,
   profile: ProfileViewDetailed,
   params: URLSearchParams,
   thumbnail: BlobRef | undefined,
-): AppBskyFeedPost.Record {
+  agent: StreamplaceAgent,
+): Promise<AppBskyFeedPost.Record> {
   const now = new Date();
   const linkUrl = `${url.protocol}//${url.host}/${profile.handle}?${params.toString()}`;
   const prefix = `🔴 LIVE `;
@@ -72,7 +94,7 @@ function buildGoLivePost(
   const content = prefix + textUrl + suffix;
 
   const rt = new RichText({ text: content });
-  rt.detectFacetsWithoutResolution();
+  await rt.detectFacets(agent);
   const record: AppBskyFeedPost.Record = {
     $type: "app.bsky.feed.post",
     text: content,
@@ -99,6 +121,7 @@ function buildGoLivePost(
 export function useCreateStreamRecord() {
   let agent = usePDSAgent();
   let url = useUrl();
+  const uploadThumbnail = useUploadThumbnail();
 
   return async (
     title: string,
@@ -175,7 +198,14 @@ export function useCreateStreamRecord() {
         time: new Date().toISOString(),
       });
 
-      let post = buildGoLivePost(title, u, profile.data, params, thumbnail);
+      let post = await buildGoLivePost(
+        title,
+        u,
+        profile.data,
+        params,
+        thumbnail,
+        agent,
+      );
 
       newPost = await createNewPost(agent, post);
 
@@ -206,6 +236,7 @@ export function useCreateStreamRecord() {
 export function useUpdateStreamRecord() {
   let agent = usePDSAgent();
   let url = useUrl();
+  const uploadThumbnail = useUploadThumbnail();
 
   return async (
     title: string,