app: custom live thumbnail + client-side thumbnail generation

js/app/components/create-livestream.tsx

···
 } from "features/bluesky/blueskySlice";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 import { useLiveUser } from "hooks/useLiveUser";
+import ThumbnailSelector from "components/thumbnail-selector/thumbnail-selector";
 
 const Left = ({ children }: { children: React.ReactNode }) => {
   return (
···
   const userIsLive = useLiveUser();
   const [title, setTitle] = useState("");
   const [loading, setLoading] = useState(false);
+  const [customThumbnail, setCustomThumbnail] = useState<Blob | undefined>(
+    undefined,
+  );
   const profile = useAppSelector(selectUserProfile);
   const newLivestream = useAppSelector(selectNewLivestream);
   useEffect(() => {
···
         message: newLivestream.record.title,
       });
       setTitle("");
+      setCustomThumbnail(undefined);
     }
   }, [newLivestream?.record]);
   useEffect(() => {
···
           </Right>
         </View>
       </Label>
+      <Label asChild={true}>
+        <View flexDirection="row">
+          <Left>
+            <Paragraph pb="$2">Thumbnail</Paragraph>
+          </Left>
+          <Right>
+            <ThumbnailSelector onThumbnailSelected={setCustomThumbnail} />
+          </Right>
+        </View>
+      </Label>
       <View gap="$2" w="100%">
         <Button
           disabled={disabled}
···
           w="100%"
           size="$4"
           onPress={() => {
-            dispatch(createLivestreamRecord({ title }));
+            setLoading(true);
+            dispatch(
+              createLivestreamRecord({
+                title,
+                customThumbnail,
+              }),
+            ).finally(() => setLoading(false));
           }}
         >
           {buttonText(loading, userIsLive)}

js/app/components/thumbnail-selector/thumbnail-selector.tsx

···
+import { useCallback, useEffect, useState } from "react";
+import { Button, Image, Text, View } from "tamagui";
+import { isWeb } from "tamagui";
+import { Platform } from "react-native";
+import * as ImagePicker from "expo-image-picker";
+import { Camera, Image as ImageIcon, X } from "@tamagui/lucide-icons";
+import { captureVideoFrame, findVideoElement } from "utils/videoCapture";
+
+interface ThumbnailSelectorProps {
+  onThumbnailSelected: (blob: Blob | undefined) => void;
+  thumbnailUrl?: string;
+}
+
+export default function ThumbnailSelector({
+  onThumbnailSelected,
+  thumbnailUrl,
+}: ThumbnailSelectorProps) {
+  const [selectedImage, setSelectedImage] = useState<string | null>(
+    thumbnailUrl || null,
+  );
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (thumbnailUrl) {
+      setSelectedImage(thumbnailUrl);
+    }
+  }, [thumbnailUrl]);
+
+  const pickImage = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Request permissions first
+      if (Platform.OS !== "web") {
+        const { status } =
+          await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (status !== "granted") {
+          alert("Sorry, we need camera roll permissions to make this work!");
+          return;
+        }
+      }
+
+      // Launch image picker
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [16, 9],
+        quality: 0.8,
+      });
+
+      if (!result.canceled) {
+        const imageUri = result.assets[0].uri;
+        setSelectedImage(imageUri);
+
+        const response = await fetch(imageUri);
+        const blob = await response.blob();
+        onThumbnailSelected(blob);
+      } else {
+        // User canceled
+        console.log("Image selection canceled");
+      }
+    } catch (error) {
+      console.error("Error picking image:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [onThumbnailSelected]);
+
+  // Capture a frame from the video stream
+  const captureFrame = useCallback(async () => {
+    if (!isWeb) {
+      alert("Capturing from stream is only available on web");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const videoElement = findVideoElement();
+      if (!videoElement) {
+        alert("No video stream found");
+        return;
+      }
+
+      const blob = await captureVideoFrame(videoElement, 1280, 0.85);
+      const imageUrl = URL.createObjectURL(blob);
+      setSelectedImage(imageUrl);
+      onThumbnailSelected(blob);
+    } catch (error) {
+      console.error("Error capturing frame:", error);
+      alert("Failed to capture frame from video");
+    } finally {
+      setLoading(false);
+    }
+  }, [onThumbnailSelected]);
+
+  // Clear the selected thumbnail
+  const clearThumbnail = useCallback(() => {
+    setSelectedImage(null);
+    onThumbnailSelected(undefined);
+  }, [onThumbnailSelected]);
+
+  return (
+    <View>
+      <Text pb="$2">Thumbnail (optional)</Text>
+
+      {selectedImage ? (
+        <View position="relative">
+          <Image
+            source={{ uri: selectedImage }}
+            width="100%"
+            height={150}
+            objectFit="cover"
+            borderRadius="$2"
+          />
+          <Button
+            position="absolute"
+            top={5}
+            right={5}
+            size="$2"
+            circular
+            icon={<X size={16} />}
+            onPress={clearThumbnail}
+          />
+        </View>
+      ) : (
+        <View
+          height={150}
+          width="100%"
+          backgroundColor="$backgroundHover"
+          borderRadius="$2"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Text color="$color">No thumbnail selected</Text>
+        </View>
+      )}
+
+      <View flexDirection="row" gap="$2" mt="$2">
+        <Button
+          flex={1}
+          icon={<ImageIcon size={16} />}
+          onPress={pickImage}
+          disabled={loading}
+        >
+          {loading ? "Loading..." : "Choose Image"}
+        </Button>
+        {/* TODO: Re-enable this when we have camera working */}
+        {/* {isWeb && (
+          <Button
+            flex={1}
+            icon={<Camera size={16} />}
+            onPress={captureFrame}
+            disabled={loading}
+          >
+            Capture Frame
+          </Button>
+        )} */}
+      </View>
+    </View>
+  );
+}

js/app/features/bluesky/blueskySlice.tsx

···
 import { createAppSlice } from "../../hooks/createSlice";
 import { BlueskyState } from "./blueskyTypes";
 import createOAuthClient from "./oauthClient";
+import { captureVideoFrame, findVideoElement } from "utils/videoCapture";
 
 const initialState: BlueskyState = {
   status: "start",
···
   u: URL,
   pdsAgent: Agent,
   profile: ProfileViewDetailed,
+  customThumbnail?: Blob,
 ) => {
-  // download the thumbnail image and upload it to the pds IF POSSIBLE
-  const thumbnailRes = await fetch(
-    `${u.protocol}//${u.host}/api/playback/${profile.handle}/stream.png`,
-  );
-  if (!thumbnailRes.ok) {
-    throw new Error(`failed to fetch thumbnail (http ${thumbnailRes.status})`);
+  if (customThumbnail) {
+    try {
+      const thumbnail = await pdsAgent.uploadBlob(customThumbnail);
+      if (thumbnail.success) {
+        console.log("Successfully uploaded custom thumbnail");
+        return thumbnail.data.blob;
+      }
+    } catch (e) {
+      console.error("Error uploading custom thumbnail:", e);
+    }
   }
-  const thumbnailBlob = await thumbnailRes.blob();
-  const thumbnail = await pdsAgent.uploadBlob(thumbnailBlob);
-  if (!thumbnail.success) {
-    throw new Error("failed to upload thumbnail");
+  // Capture a frame from the video element on web
+  if (isWeb) {
+    try {
+      const videoElement = findVideoElement();
+      if (videoElement) {
+        const thumbnailBlob = await captureVideoFrame(videoElement, 1280, 0.85);
+        const thumbnail = await pdsAgent.uploadBlob(thumbnailBlob);
+        if (thumbnail.success) {
+          return thumbnail.data.blob;
+        }
+      }
+    } catch (e) {
+      console.error("Error capturing client-side thumbnail:", e);
+    }
+  }
+
+  // Fallback to server-side thumbnail if client-side capture fails or we're not on web
+  try {
+    const thumbnailRes = await fetch(
+      `${u.protocol}//${u.host}/api/playback/${profile.handle}/stream.png`,
+    );
+    if (!thumbnailRes.ok) {
+      throw new Error(
+        `failed to fetch thumbnail (http ${thumbnailRes.status})`,
+      );
+    }
+    const thumbnailBlob = await thumbnailRes.blob();
+    const thumbnail = await pdsAgent.uploadBlob(thumbnailBlob);
+    if (!thumbnail.success) {
+      throw new Error("failed to upload thumbnail");
+    }
+    return thumbnail.data.blob;
+  } catch (e) {
+    console.error("Error fetching server-side thumbnail:", e);
+    throw e;
   }
-  return thumbnail.data.blob;
 };
 
 // clear atproto login query params from url
···
 
     golivePost: create.asyncThunk(
       async (
-        { text, now }: { text: string; now: Date },
+        {
+          text,
+          now,
+          customThumbnail,
+        }: { text: string; now: Date; customThumbnail?: Blob },
         thunkAPI,
       ): Promise<{
         uri: string;
···
             u,
             bluesky.pdsAgent,
             profile,
+            customThumbnail,
           );
         } catch (e) {
           console.error("uploadThumbnail error", e);
···
     ),
 
     createLivestreamRecord: create.asyncThunk(
-      async ({ title }: { title }, thunkAPI) => {
+      async (
+        { title, customThumbnail }: { title: string; customThumbnail?: Blob },
+        thunkAPI,
+      ) => {
         const now = new Date();
         const { bluesky, streamplace } = thunkAPI.getState() as {
           bluesky: BlueskyState;
···
         if (!profile) {
           throw new Error("No profile");
         }
-        if (!did) {
-          throw new Error("No DID");
+
+        const newPostAction = await thunkAPI.dispatch(
+          golivePost({ text: title, now, customThumbnail }),
+        );
+
+        if (!newPostAction || newPostAction.type.endsWith("/rejected")) {
+          throw new Error(
+            `Failed to create post: ${(newPostAction as any)?.error?.message || "Unknown error"}`,
+          );
         }
-        const newPost = (await thunkAPI.dispatch(
-          golivePost({ text: title, now }),
-        )) as { payload: { uri: string; cid: string } };
+
+        const newPost = newPostAction as {
+          payload: { uri: string; cid: string };
+        };
+
+        if (!newPost.payload?.uri || !newPost.payload?.cid) {
+          throw new Error(
+            "Cannot read properties of undefined (reading 'uri' or 'cid')",
+          );
+        }
+
         const record: PlaceStreamLivestream.Record = {
           title: title,
           url: streamplace.url,

js/app/package.json

···
     "expo-dev-client": "~5.0.3",
     "expo-file-system": "~18.0.4",
     "expo-font": "~13.0.1",
+    "expo-image-picker": "^16.1.4",
     "expo-keep-awake": "~14.0.2",
     "expo-linking": "~7.0.3",
     "expo-notifications": "~0.29.8",

js/app/utils/videoCapture.ts

···
+/**
+ * Utility functions for capturing and compressing video frames
+ */
+
+/**
+ * Captures a frame from a video element and returns it as a compressed PNG blob
+ *
+ * @param videoElement The video element to capture from
+ * @param maxWidth Maximum width of the output image (maintains aspect ratio)
+ * @param quality JPEG quality (0-1), lower means smaller file size
+ * @returns A Promise that resolves to a Blob of the compressed image
+ */
+export const captureVideoFrame = async (
+  videoElement: HTMLVideoElement,
+  maxWidth = 1280,
+  quality = 0.85,
+): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    try {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        reject(new Error("Could not get canvas context"));
+        return;
+      }
+
+      const videoWidth = videoElement.videoWidth;
+      const videoHeight = videoElement.videoHeight;
+
+      if (videoWidth === 0 || videoHeight === 0) {
+        reject(new Error("Video has no dimensions, may not be playing yet"));
+        return;
+      }
+
+      let width = videoWidth;
+      let height = videoHeight;
+
+      if (width > maxWidth) {
+        const ratio = maxWidth / width;
+        width = maxWidth;
+        height = height * ratio;
+      }
+
+      canvas.width = width;
+      canvas.height = height;
+
+      ctx.drawImage(videoElement, 0, 0, width, height);
+
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(blob);
+          } else {
+            reject(new Error("Failed to create blob from canvas"));
+          }
+        },
+        "image/jpeg",
+        quality,
+      );
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+export const findVideoElement = (): HTMLVideoElement | null => {
+  return document.querySelector("video");
+};

yarn.lock

···
   languageName: node
   linkType: hard
 
+"expo-image-loader@npm:~5.1.0":
+  version: 5.1.0
+  resolution: "expo-image-loader@npm:5.1.0"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/7c99e534dff619090f39f753e460471e4a84cc868ea21269e3c060f348e216c3ad1f0762512a048885d88380e4c4b763a77ac9d4688a85d31b0ee61834613968
+  languageName: node
+  linkType: hard
+
+"expo-image-picker@npm:^16.1.4":
+  version: 16.1.4
+  resolution: "expo-image-picker@npm:16.1.4"
+  dependencies:
+    expo-image-loader: "npm:~5.1.0"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/a6006614f6c2f42177747010f35901d85cbb673031cfeb1acac55b8c23c8bd92f432191df5759555bf4401ed3c2eee8fc96ea97500a2d75e0a1b95d048aadc7a
+  languageName: node
+  linkType: hard
+
 "expo-json-utils@npm:~0.14.0":
   version: 0.14.0
   resolution: "expo-json-utils@npm:0.14.0"
···
     expo-dev-client: "npm:~5.0.3"
     expo-file-system: "npm:~18.0.4"
     expo-font: "npm:~13.0.1"
+    expo-image-picker: "npm:^16.1.4"
     expo-keep-awake: "npm:~14.0.2"
     expo-linking: "npm:~7.0.3"
     expo-notifications: "npm:~0.29.8"