create more meaningful thumbnails

src/components/Recorder.tsx

@@ -17,6 +17,7 @@ import paywallAtom from "~/atoms/paywallAtom";
 import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
 import { usePostHog } from "posthog-js/react";
 import Tooltip from "~/components/Tooltip";
+import generateThumbnail from "~/utils/generateThumbnail";
 
 interface Props {
   closeModal: () => void;
@@ -180,16 +181,6 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
     posthog?.capture("recorder: video downloaded");
   };
 
-  const generateThumbnail = async (video: HTMLVideoElement) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    canvas
-      .getContext("2d")
-      ?.drawImage(video, 0, 0, canvas.width, canvas.height);
-    return await new Promise((resolve) => canvas.toBlob(resolve));
-  };
-
   const handleUpload = async () => {
     if (!blob || !videoRef.current) return;
 

src/components/VideoUploadModal.tsx

@@ -7,6 +7,7 @@ import { useAtom } from "jotai";
 import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen";
 import { usePostHog } from "posthog-js/react";
 import { useSession } from "next-auth/react";
+import generateThumbnail from "~/utils/generateThumbnail";
 
 export default function VideoUploadModal() {
   const [open, setOpen] = useAtom(uploadVideoModalOpen);
@@ -25,16 +26,6 @@ export default function VideoUploadModal() {
     }
   };
 
-  const generateThumbnail = async (video: HTMLVideoElement) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    canvas
-      .getContext("2d")
-      ?.drawImage(video, 0, 0, canvas.width, canvas.height);
-    return await new Promise((resolve) => canvas.toBlob(resolve));
-  };
-
   function closeModal() {
     setOpen(false);
 

src/utils/generateThumbnail.ts

@@ -0,0 +1,18 @@
+export default async function generateThumbnail(video: HTMLVideoElement) {
+  console.log(video.duration);
+  const seekedPromise = new Promise<void>((resolve) => {
+    video.addEventListener("seeked", () => {
+      resolve();
+    });
+  });
+
+  video.currentTime = video.duration / 2;
+
+  await seekedPromise;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  canvas.getContext("2d")?.drawImage(video, 0, 0, canvas.width, canvas.height);
+  return await new Promise((resolve) => canvas.toBlob(resolve));
+}