From 810e44dbc231a858de8a28618496ce4cd2b4052d Mon Sep 17 00:00:00 2001
From: Martijn van der Ven <martijn@vanderven.se>
Date: Sat, 21 Sep 2024 15:04:19 +0200
Subject: [PATCH] [youtube-thumbnails] Split thumbnail types and qualities

Every type (except for the special "0") is available in 5 quality
levels. Loop over them and show all of them on the page.

This hides the special "0" type image. This is an alias for default, but
only exposes a single quality level ("").
---
 youtube-thumbnails.html | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/youtube-thumbnails.html b/youtube-thumbnails.html
index 34c7ea6..e935b4d 100644
--- a/youtube-thumbnails.html
+++ b/youtube-thumbnails.html
@@ -76,23 +76,26 @@ <h1>YouTube Thumbnail Viewer</h1>
             const input = document.getElementById("videoInput").value.trim();
             const videoID = extractVideoID(input);
             if (videoID.length === 11) {
-                const imageTypes = ['default', 'hqdefault', 'mqdefault', 'sddefault', 'maxresdefault', '0', '1', '2', '3'];
+                const imageTypes = ['default', '1', '2', '3'];
+                const imageQuality = ['', 'mq', 'hq', 'sd', 'maxres'];
                 const container = document.getElementById("thumbnails");
                 container.innerHTML = '';
 
                 imageTypes.forEach(type => {
-                    const imageUrl = `https://img.youtube.com/vi/${videoID}/${type}.jpg`;
-                    const thumbnailHTML = `
-                        <div class="thumbnail">
-                            <img src="${imageUrl}" alt="Thumbnail ${type}" onclick="toggleExpand(this)">
-                            <p class="image-size"></p>
-                            <div class="thumbnail-url" onclick="copyText('${imageUrl}')">
-                                <span class="copy-icon">📋</span>
-                                <span>${imageUrl}</span>
+                    imageQuality.forEach(quality => {
+                        const imageUrl = `https://img.youtube.com/vi/${videoID}/${quality}${type}.jpg`;
+                        const thumbnailHTML = `
+                            <div class="thumbnail">
+                                <img src="${imageUrl}" alt="Thumbnail ${type}" onclick="toggleExpand(this)">
+                                <p class="image-size"></p>
+                                <div class="thumbnail-url" onclick="copyText('${imageUrl}')">
+                                    <span class="copy-icon">📋</span>
+                                    <span>${imageUrl}</span>
+                                </div>
                             </div>
-                        </div>
-                    `;
-                    container.innerHTML += thumbnailHTML;
+                        `;
+                        container.innerHTML += thumbnailHTML;
+                    });
                 });
 
                 // Get actual image sizes after they've loaded