Modify design of thumbnails

marshallku · Feb 13, 2025 · a89c84f · a89c84f · github-actions · Feb 13, 2025
1 parent 715369d
commit a89c84f
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/apps/blog/src/components/YoutubeThumbnailExtractor/index.tsx b/apps/blog/src/components/YoutubeThumbnailExtractor/index.tsx
@@ -3,6 +3,13 @@
 import { useCallback, useState } from "react";
 
 const VIDEO_SIZE_NAMES = ["hq720", "sddefault", "hqdefault", "mqdefault", "default"];
+const VIDEO_SIZES = [
+    [1280, 720],
+    [640, 480],
+    [480, 360],
+    [320, 180],
+    [120, 90],
+];
 
 const extractVideoId = (videoUrl: string) => {
     const videoPattern = /youtu\.?be(\.com)?\/(live\/)?(shorts\/|watch\?v=|embed\/)?([^&?\s]+)/;
@@ -50,8 +57,13 @@ function YoutubeThumbnailExtractor() {
             <div className="result" style={{ display: videoId ? "block" : "none" }}>
                 <div className="result__title">Thumbnails</div>
                 <div className="result__thumbnail">
-                    {thumbnails.map((thumbnail) => (
-                        <img key={thumbnail} src={thumbnail} alt={thumbnail} />
+                    {thumbnails.map((thumbnail, index) => (
+                        <figure key={thumbnail}>
+                            <img src={thumbnail} alt={thumbnail} />
+                            <figcaption>
+                                {VIDEO_SIZES[index][0]} * {VIDEO_SIZES[index][1]}
+                            </figcaption>
+                        </figure>
                     ))}
                 </div>
             </div>