From 283f315b63fdf6bf5bb634c34d9a3e1434adfd14 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Wed, 3 May 2023 20:02:35 +0200
Subject: [PATCH] add max height and width to video thumbnail

---
 src/pages/videos.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 42a5ec4..093e27c 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -16,6 +16,7 @@ import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
 import Paywall from "~/components/Paywall";
 import paywallAtom from "~/atoms/paywallAtom";
 import { usePostHog } from "posthog-js/react";
+import Image from "next/image";
 
 const VideoList: NextPage = () => {
   const [, setRecordOpen] = useAtom(recordVideoModalOpen);
@@ -182,11 +183,13 @@ const VideoCard = ({ title, id, createdAt, thumbnailUrl }: VideoCardProps) => {
     <Link href={`/share/${id}`}>
       <div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
         <figure>
-          <img
+          <Image
             src={thumbnailUrl}
+            className="max-h-[139.5px] max-w-[248px]"
             alt="video thumbnail"
             width={248}
             height={139.5}
+            unoptimized
           />
         </figure>
         <div className="m-4 flex flex-col">