show video thumbnail on link

src/pages/share/[videoId].tsx

@@ -86,6 +86,10 @@ const VideoList: NextPage = () => {
         <title>
           {video?.title ?? "Snapify | The Open Source Loom Alternative"}
         </title>
+        <meta property="og:image" content={video?.thumbnailUrl} />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="600" />
         <meta
           name="description"
           content="Share high-quality videos asynchronously and collaborate on your own schedule"

src/server/api/routers/video.ts

@@ -93,7 +93,15 @@ export const videoRouter = createTRPCRouter({
 
       const signedUrl = await getSignedUrl(s3, getObjectCommand);
 
-      return { ...video, video_url: signedUrl };
+      const thumbnailUrl = await getSignedUrl(
+        s3,
+        new GetObjectCommand({
+          Bucket: env.AWS_BUCKET_NAME,
+          Key: video.userId + "/" + video.id + "-thumbnail",
+        })
+      );
+
+      return { ...video, video_url: signedUrl, thumbnailUrl };
     }),
   getUploadUrl: protectedProcedure
     .input(z.object({ key: z.string() }))