feat: generate thumbnail and save on video upload (#43)

<img width="1035" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/71c19637-149a-4349-9c4d-0ac9db031231">

app/api/sign/route.ts

@@ -23,9 +23,9 @@ export const POST = withLogging(
     // }
 
     try {
-      const { fileName, fileType, id } = json;
+      const { fileName, fileType, id = nanoid() } = json;
 
-      const signedFileName = `${user}/${id ?? nanoid()}/${fileName}`;
+      const signedFileName = `${user}/${id}/${fileName}`;
       const res = await getPresignedUrl(signedFileName, fileType);
       return Response.json({
         id,

components/chat/ImageSelector.tsx

@@ -1,12 +1,16 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import useImageUpload from '../../lib/hooks/useImageUpload';
 import { cn, fetcher } from '@/lib/utils';
 import { SignedPayload, MessageBase, ChatEntity } from '@/lib/types';
 import { useRouter } from 'next/navigation';
 import Loading from '../ui/Loading';
 import toast from 'react-hot-toast';
+import {
+  generateVideoThumbnails,
+  getVideoCover,
+} from '@rajesh896/video-thumbnails-generator';
 
 export interface ImageSelectorProps {}
 
@@ -18,6 +22,39 @@ type Example = {
 const ImageSelector: React.FC<ImageSelectorProps> = () => {
   const router = useRouter();
   const [isUploading, setUploading] = useState(false);
+
+  const upload = useCallback(async (file: File, chatId?: string) => {
+    const { id, signedUrl, publicUrl, fields } = await fetcher<SignedPayload>(
+      '/api/sign',
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          id: chatId,
+          fileType: file.type,
+          fileName: file.name,
+        }),
+      },
+    );
+    const formData = new FormData();
+    Object.entries(fields).forEach(([key, value]) => {
+      formData.append(key, value as string);
+    });
+    formData.append('file', file);
+
+    const uploadResponse = await fetch(signedUrl, {
+      method: 'POST',
+      body: formData,
+    });
+    if (!uploadResponse.ok) {
+      toast.error(uploadResponse.statusText);
+      return;
+    }
+    return {
+      id,
+      publicUrl,
+    };
+  }, []);
+
   const { getRootProps, getInputProps, isDragActive } = useImageUpload(
     undefined,
     async files => {
@@ -29,42 +66,38 @@ const ImageSelector: React.FC<ImageSelectorProps> = () => {
       const reader = new FileReader();
       reader.readAsDataURL(files[0]);
       reader.onload = async () => {
-        const { id, signedUrl, publicUrl, fields } =
-          await fetcher<SignedPayload>('/api/sign', {
-            method: 'POST',
-            body: JSON.stringify({
-              fileType: files[0].type,
-              fileName: files[0].name,
-            }),
-          });
-        const formData = new FormData();
-        Object.entries(fields).forEach(([key, value]) => {
-          formData.append(key, value as string);
-        });
-        formData.append('file', files[0]);
-
-        const uploadResponse = await fetch(signedUrl, {
-          method: 'POST',
-          body: formData,
-        });
-        if (!uploadResponse.ok) {
-          toast.error(uploadResponse.statusText);
+        const file = files[0];
+        const resp = await upload(file);
+        if (!resp) {
           return;
         }
-        const resp = await fetcher<ChatEntity>('/api/upload', {
+        if (file.type === 'video/mp4') {
+          const thumbnails = await generateVideoThumbnails(file, 1, 'file');
+          fetch(thumbnails[0])
+            .then(res => res.blob())
+            .then(blob => {
+              const thumbnailFile = new File(
+                [blob],
+                file.name.replace('.mp4', '.png').replace('.MP4', '.png'),
+                {
+                  type: 'image/png',
+                },
+              );
+              return upload(thumbnailFile, resp.id);
+            });
+        }
+        await fetcher<ChatEntity>('/api/upload', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
           body: JSON.stringify({
-            id,
-            url: publicUrl,
+            id: resp.id,
+            url: resp.publicUrl,
           }),
         });
         setUploading(false);
-        if (resp) {
-          router.push(`/chat/${resp.id}`);
-        }
+        router.push(`/chat/${resp.id}`);
       };
     },
   );

components/ui/Img.tsx

@@ -1,10 +1,8 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import { cn } from '@/lib/utils';
-import { toast } from 'react-hot-toast';
-import { getVideoCover } from '@rajesh896/video-thumbnails-generator';
 
 const placeholder =
   'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/4QDWRXhpZgAATU0AKgAAAAgABwEGAAMAAAABAAIAAAESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAITAAMAAAABAAEAAIdpAAQAAAABAAAAcgAAAAAAAABIAAAAAQAAAEgAAAABAAeQAAAHAAAABDAyMjGRAQAHAAAABAECAwCgAAAHAAAABDAxMDCgAQADAAAAAQABAACgAgAEAAAAAQAAADKgAwAEAAAAAQAAADKkBgADAAAAAQAAAAAAAAAAAAD/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwABAQEBAQECAQECAwICAgMEAwMDAwQGBAQEBAQGBwYGBgYGBgcHBwcHBwcHCAgICAgICQkJCQkLCwsLCwsLCwsL/9sAQwECAgIDAwMFAwMFCwgGCAsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsL/90ABAAE/9oADAMBAAIRAxEAPwD+nbSfDst/NnB5Ne5+G/htJMqsVOD610fw/wDCS3Lq7L3r6y0Lw7b20SgqMiluB4hpvwti2Asn51fufhVbsmQlfSCQQQjHFOIt24OKLAfEXiL4XtCjMiGvnrxH4SlsJG+UjFfqZf6Va3UZUgV84/ETwTGY3kRaVrbAfAp058//AK6T+zn/AM5/wr1uTw0BIwx3P+elM/4Roen+fyo5gP/Q/tp+G1vGIVJFer6n4lstGizM4XFeH/DzVUW3HPavmL9pX4sXvhmKV0Yqq5qbgfXeq/GjRLJipmH51yMn7Qvh2NtrTL+dfzYfGL9uqTw1PLGZjkE96+M7j/gotqtzf+WkrYz60rsD+1bwt8YtD12ZYYZlJPvXY+KlivdOMy8giv5q/wBjD9prxB8QNcgXezKxHOa/obsdZa48KRPMTuKiqA8dm09PNbjuaj/s9PSp5rtDM5B7nvUf2tfX9f8A69QB/9H+v3wLrW1RHuxmvJv2iPh43jLRZhEuSynpWN4X8Rm0lCs2BnivoKy1iy1W1ENyQcjFQB/J7+0x+x34yvtVmlsY3OScYBr418KfsLfES81xFmgkALDPBr+1rXPhR4d15jJJEj59qwtP+BXhiznE4t0BHsKEugH54fsJfsqS/Dqzt7m/TDgAnIr9j9Q1BNN0kW4OAq1yun2mk+G7fZAFG0dq868Y+LwyMit+FFtAEl1tfNb5x1NR/wBtr/fH+fwrxptbnLE5703+2p6QH//S/pMs+JjivYfDjv5Q5NePWn+uNev+HP8AVCkwPWdPdtvU1fnkk2n5j09aztP+7V6f7p+lLoBxeuu4jOCa8N1xmMjEnNe4a7/qzXh2t/6xqfQDlqKKKgD/2Q==';
@@ -20,32 +18,16 @@ const Img = React.forwardRef<
   });
   // const [isLoading, setIsLoading] = React.useState(true);
   const [_, startTransition] = React.useTransition();
-  const [thumbnail, setThumbnail] = useState<string>('');
   const isVideo =
     typeof src === 'string' ? src.toLowerCase().endsWith('.mp4') : false;
 
-  useEffect(() => {
-    if (!isVideo) {
-      return;
-    }
-    const generateThumbnail = async () => {
-      try {
-        const cover = await getVideoCover(src as string);
-        setThumbnail(cover);
-      } catch (e) {
-        toast.error((e as Error).message);
-      }
-    };
-    generateThumbnail();
-  }, [isVideo, src]);
-
-  if (isVideo && !thumbnail) {
-    return null;
-  }
-
   return (
     <Image
-      src={isVideo ? thumbnail : src}
+      src={
+        isVideo
+          ? (src as string).replace('.mp4', '.png').replace('.MP4', '.png')
+          : src
+      }
       placeholder={placeholder}
       width={dimensions.width}
       height={dimensions.height}