Merge pull request #456 from semaphore-protocol/perf/youtube-thumbnails

Youtube thumbnails instead of heavy i-frames
semaphore-protocol · Nov 28, 2023 · c325978 · c325978
2 parents d3b9fcc + 12e8b93
commit c325978
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
@@ -367,7 +367,7 @@ await verifyProof(verificationKey, fullProof)`,
                     {videos.map((video) => (
                         <VStack key={video.url}>
                             <Box px="3">
-                                <VideoCard title={video.title} embeddedVideoUrl={video.embeddedUrl} />
+                                <VideoCard title={video.title} thumbnail={video.thumbnail} url={video.url} />
                             </Box>
                         </VStack>
                     ))}

diff --git a/apps/website/src/components/Carousel.tsx b/apps/website/src/components/Carousel.tsx
@@ -115,7 +115,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                                 minW={`${100 / size!}%`}
                                 key={video.title + video.url}
                             >
-                                <VideoCard title={video.title} embeddedVideoUrl={video.embeddedUrl} />
+                                <VideoCard title={video.title} thumbnail={video.thumbnail} url={video.url} />
                             </Box>
                         ))}
                 </HStack>

diff --git a/apps/website/src/components/VideoCard.tsx b/apps/website/src/components/VideoCard.tsx
@@ -1,13 +1,14 @@
-import { Heading, Card, CardBody, AspectRatio, HStack, Link } from "@chakra-ui/react"
+import { Heading, Card, CardBody, Image, AspectRatio, HStack, Link } from "@chakra-ui/react"
 
 export type VideoCardProps = {
-    embeddedVideoUrl: string
+    thumbnail: string
+    url: string
     title: string
 }
 
-export default function VideoCard({ embeddedVideoUrl, title }: VideoCardProps) {
+export default function VideoCard({ thumbnail, url, title }: VideoCardProps) {
     return (
-        <Link href={embeddedVideoUrl}>
+        <Link href={url} isExternal>
             <Card
                 bg="transparent"
                 borderRadius="10px"
@@ -18,7 +19,7 @@ export default function VideoCard({ embeddedVideoUrl, title }: VideoCardProps) {
             >
                 <HStack borderRadius="10px 10px 0px 0px">
                     <AspectRatio width="297px" height="215px" borderRadius="10px" overflow="hidden">
-                        <iframe title={title} src={embeddedVideoUrl} allowFullScreen />
+                        <Image alt="Youtube thumbnail" src={thumbnail} />
                     </AspectRatio>
                 </HStack>
                 <CardBody padding="0px 20px 20px 20px">

diff --git a/apps/website/src/data/videos.json b/apps/website/src/data/videos.json
@@ -5,94 +5,94 @@
         "date": "Dec 10, 2018",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/lv6iK9qezBY",
-        "embeddedUrl": "https://www.youtube.com/embed/lv6iK9qezBY?si=3HDxcxjELRCjrLJo"
+        "thumbnail": "https://img.youtube.com/vi/lv6iK9qezBY/0.jpg"
     },
     {
         "title": "Succinct Proofs in Ethereum",
         "eventName": "2nd ZKProof Workshop",
         "date": "Apr 30, 2019",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/TtsDNneTDDY",
-        "embeddedUrl": "https://www.youtube.com/embed/TtsDNneTDDY?si=UmRq7i4B0gm7bvfx"
+        "thumbnail": "https://img.youtube.com/vi/TtsDNneTDDY/0.jpg"
     },
     {
         "title": "Privacy in Ethereum",
         "eventName": "Taipei Ethereum Meetup",
         "date": "May 21, 2019",
         "speakers": ["Barry Whitehat"],
-        "url": "https://youtu.be/maDHYyj30kg",
-        "embeddedUrl": "https://www.youtube.com/embed/maDHYyj30kg?si=vK35YUdbnPHVL_R4"
+        "url": "https://youtu.be/TtsDNneTDDY",
+        "thumbnail": "https://img.youtube.com/vi/TtsDNneTDDY/0.jpg"
     },
     {
         "title": "Semaphore Roadmap for Ethereum",
         "eventName": "Zcon1",
         "date": "Jun 23, 2019",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/gOub903iWFs",
-        "embeddedUrl": "https://www.youtube.com/embed/gOub903iWFs?si=GTF-LAZMrV6MEzAA"
+        "thumbnail": "https://img.youtube.com/vi/gOub903iWFs/0.jpg"
     },
     {
         "title": "Privacy in Ethereum",
         "eventName": "Devcon5",
         "date": "Dec 7, 2019",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/zBUo7G95wYE",
-        "embeddedUrl": "https://www.youtube.com/embed/zBUo7G95wYE?si=lQO9O6l91OR7L8ws"
+        "thumbnail": "https://img.youtube.com/vi/zBUo7G95wYE/0.jpg"
     },
     {
         "title": "Hands-on Applications of Zero-Knowledge Signaling",
         "eventName": "Devcon5",
         "date": "Dec 26, 2019",
         "speakers": ["Wei Jie Koh"],
         "url": "https://youtu.be/7wd2aAN2jXI",
-        "embeddedUrl": "https://www.youtube.com/embed/7wd2aAN2jXI?si=uRaP9QElksTtK6wX"
+        "thumbnail": "https://img.youtube.com/vi/7wd2aAN2jXI/0.jpg"
     },
     {
         "title": "A trustless Ethereum mixer using zero-knowledge signalling",
         "eventName": "Devcon5",
         "date": "Dec 31, 2019",
         "speakers": ["Wei Jie Koh", "Barry WhiteHat"],
         "url": "https://youtu.be/GzVT16lFOHU",
-        "embeddedUrl": "https://www.youtube.com/embed/GzVT16lFOHU?si=IfdzI4eD0c-IVFsm"
+        "thumbnail": "https://img.youtube.com/vi/GzVT16lFOHU/0.jpg"
     },
     {
         "title": "Proposal: Semaphore - Zero-Knowledge Signaling on Ethereum",
         "eventName": "ZKProof Home Edition",
         "date": "May 25, 2020",
         "speakers": ["Kobi Gurkan", "Koh Wei Jie"],
         "url": "https://youtu.be/y5uV9eRb3-w",
-        "embeddedUrl": "https://www.youtube.com/embed/y5uV9eRb3-w?si=h5ehHSqWdA50ShbJ"
+        "thumbnail": "https://img.youtube.com/vi/y5uV9eRb3-w/0.jpg"
     },
     {
         "title": "Anonymous Signalling on Ethereum",
         "eventName": "Devcon Bogota",
         "date": "Oct 18, 2022",
         "speakers": ["Cedoor"],
         "url": "https://youtu.be/dxAfL91Sbw4",
-        "embeddedUrl": "https://www.youtube.com/embed/dxAfL91Sbw4?si=tYnTFgdTrvlnS_b0"
+        "thumbnail": "https://img.youtube.com/vi/dxAfL91Sbw4/0.jpg"
     },
     {
         "title": "Old & New Primitives",
         "eventName": "EDCON 2023",
         "date": "Jun 25, 2023",
         "speakers": ["Barry Whitehat"],
         "url": "https://youtu.be/cbyTXVm9NPI",
-        "embeddedUrl": "https://www.youtube.com/embed/cbyTXVm9NPI?si=N1nU6ztt6Y6kmV05"
+        "thumbnail": "https://img.youtube.com/vi/cbyTXVm9NPI/0.jpg"
     },
     {
         "title": "Building zero-knowledge applications using Semaphore",
         "eventName": "ETHShangai",
         "date": "Jul 19, 2023",
         "speakers": ["Vivian Plasencia"],
         "url": "https://youtu.be/_isrY1pXJpY",
-        "embeddedUrl": "https://www.youtube.com/embed/_isrY1pXJpY?si=nJkq_gaBUwtHaCyJ"
+        "thumbnail": "https://img.youtube.com/vi/_isrY1pXJpY/0.jpg"
     },
     {
         "title": "Semaphore",
         "eventName": "zkMonth",
         "date": "Oct 31, 2023",
         "speakers": ["Vivian Plasencia"],
         "url": "https://youtu.be/h4iVFKhAI8g",
-        "embeddedUrl": "https://www.youtube.com/embed/h4iVFKhAI8g?si=3V2rJl7nTFYRdW7K"
+        "thumbnail": "https://img.youtube.com/vi/h4iVFKhAI8g/0.jpg"
     }
 ]