generate and upload thumbnail

src/components/Recorder.tsx

@@ -44,6 +44,7 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
   const getSignedUrl = api.video.getUploadUrl.useMutation();
   const [duration, setDuration] = useState<number>(0);
   const [, setPaywallOpen] = useAtom(paywallAtom);
+  const videoRef = useRef<null | HTMLVideoElement>(null);
 
   const handleRecording = async () => {
     const screenStream = await navigator.mediaDevices.getDisplayMedia({
@@ -142,20 +143,42 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
     }
   };
 
+  function generateThumbnail(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 canvas.toDataURL();
+  }
+
   const handleUpload = async () => {
-    if (!blob) return;
+    if (!blob || !videoRef.current) return;
 
     const dateString = "Recording - " + dayjs().format("D MMM YYYY") + ".webm";
     setSubmitting(true);
 
     try {
-      const { signedUrl, id } = await getSignedUrl.mutateAsync({
+      const { signedVideoUrl, signedThumbnailUrl, id } =
-        key: dateString,
+        await getSignedUrl.mutateAsync({
-      });
+          key: dateString,
+        });
+
       await axios
-        .put(signedUrl, blob.slice(), {
+        .put(signedVideoUrl, blob.slice(), {
           headers: { "Content-Type": "video/webm" },
         })
+        .then(() => {
+          if (!videoRef.current) return;
+          return axios.put(
+            signedThumbnailUrl,
+            generateThumbnail(videoRef.current),
+            {
+              headers: { "Content-Type": "image/png" },
+            }
+          );
+        })
         .then(() => {
           void router.push("share/" + id);
           setRecordOpen(false);
@@ -293,13 +316,14 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
       ) : null}
       {step === "post" ? (
         <div>
-          {blob && (
+          {blob ? (
             <video
               src={URL.createObjectURL(blob)}
               controls
+              ref={videoRef}
               className="mb-4 w-[75vw]"
             />
-          )}
+          ) : null}
           <div className="flex items-center justify-center">
             <button
               type="button"

src/server/api/routers/video.ts

@@ -83,17 +83,27 @@ export const videoRouter = createTRPCRouter({
         },
       });
 
-      const putObjectCommand = new PutObjectCommand({
+      const signedVideoUrl = await getSignedUrl(
-        Bucket: env.AWS_BUCKET_NAME,
+        s3,
-        Key: ctx.session.user.id + "/" + video.id,
+        new PutObjectCommand({
-      });
+          Bucket: env.AWS_BUCKET_NAME,
+          Key: ctx.session.user.id + "/" + video.id,
+        })
+      );
 
-      const signedUrl = await getSignedUrl(s3, putObjectCommand);
+      const signedThumbnailUrl = await getSignedUrl(
+        s3,
+        new PutObjectCommand({
+          Bucket: env.AWS_BUCKET_NAME,
+          Key: video.userId + "/" + video.id + "thumbnail",
+        })
+      );
 
       return {
         success: true,
         id: video.id,
-        signedUrl,
+        signedVideoUrl,
+        signedThumbnailUrl,
       };
     }),
   setSharing: protectedProcedure