From 2b648bd8e6e6c6a52cdc820157356d2dbe505708 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Sat, 22 Apr 2023 04:46:53 +0200
Subject: [PATCH] add thumbnails to videos

---
 src/components/Recorder.tsx     | 10 +++++-----
 src/pages/videos.tsx            |  8 +++++---
 src/server/api/routers/video.ts | 18 ++++++++++++++++--
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/Recorder.tsx b/src/components/Recorder.tsx
index 63f35bd..0d59ac6 100644
--- a/src/components/Recorder.tsx
+++ b/src/components/Recorder.tsx
@@ -143,15 +143,15 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
     }
   };
 
-  function generateThumbnail(video: HTMLVideoElement) {
+  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 canvas.toDataURL();
-  }
+    return await new Promise((resolve) => canvas.toBlob(resolve));
+  };
 
   const handleUpload = async () => {
     if (!blob || !videoRef.current) return;
@@ -169,11 +169,11 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
         .put(signedVideoUrl, blob.slice(), {
           headers: { "Content-Type": "video/webm" },
         })
-        .then(() => {
+        .then(async () => {
           if (!videoRef.current) return;
           return axios.put(
             signedThumbnailUrl,
-            generateThumbnail(videoRef.current),
+            await generateThumbnail(videoRef.current),
             {
               headers: { "Content-Type": "image/png" },
             }
diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 1c97b65..2365cdd 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -94,11 +94,12 @@ const VideoList: NextPage = () => {
           ) : (
             <div className="flex-start grid w-full max-w-[1300px] grid-cols-[repeat(auto-fill,250px)] flex-row flex-wrap items-center justify-center gap-14 px-4 pb-16">
               {videos &&
-                videos.map(({ title, id, createdAt }) => (
+                videos.map(({ title, id, createdAt, thumbnailUrl }) => (
                   <VideoCard
                     title={title}
                     id={id}
                     createdAt={createdAt}
+                    thumbnailUrl={thumbnailUrl}
                     key={id}
                   />
                 ))}
@@ -122,6 +123,7 @@ const VideoList: NextPage = () => {
 interface VideoCardProps {
   title: string;
   id: string;
+  thumbnailUrl: string;
   createdAt: Date;
 }
 
@@ -137,13 +139,13 @@ const VideoCardSkeleton = () => {
   );
 };
 
-const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
+const VideoCard = ({ title, id, createdAt, thumbnailUrl }: VideoCardProps) => {
   return (
     <Link href={`/share/${id}`}>
       <div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
         <figure>
           <Image
-            src="https://i3.ytimg.com/vi/BuaKzm7Kq9Q/maxresdefault.jpg"
+            src={thumbnailUrl}
             alt="video thumbnail"
             width={248}
             height={139.5}
diff --git a/src/server/api/routers/video.ts b/src/server/api/routers/video.ts
index 11b1074..32505f5 100644
--- a/src/server/api/routers/video.ts
+++ b/src/server/api/routers/video.ts
@@ -22,7 +22,21 @@ export const videoRouter = createTRPCRouter({
       },
     });
 
-    return videos;
+    const videosWithThumbnailUrl = await Promise.all(
+      videos.map(async (video) => {
+        const thumbnailUrl = await getSignedUrl(
+          ctx.s3,
+          new GetObjectCommand({
+            Bucket: env.AWS_BUCKET_NAME,
+            Key: video.userId + "/" + video.id + "-thumbnail",
+          })
+        );
+
+        return { ...video, thumbnailUrl };
+      })
+    );
+
+    return videosWithThumbnailUrl;
   }),
   get: publicProcedure
     .input(z.object({ videoId: z.string() }))
@@ -95,7 +109,7 @@ export const videoRouter = createTRPCRouter({
         s3,
         new PutObjectCommand({
           Bucket: env.AWS_BUCKET_NAME,
-          Key: video.userId + "/" + video.id + "thumbnail",
+          Key: video.userId + "/" + video.id + "-thumbnail",
         })
       );