Hide failed to load thumbnails

thespeck · Mar 14, 2024 · b214b13 · b214b13
1 parent c409427
commit b214b13
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -12,51 +12,36 @@
 
 <body>
     <header>
-        <div class="site-id">
-            <a href="./" ><h2>Thumbnailed</h2></a>
-        </div>
-        <div class="input-container">
-            <input id="url-input" name="url-input" type="url" placeholder="YouTube video URL" required pattern="">
-            <button id="input-btn" type="submit">Get Thumbnail</button>
+        <div class="header-content">
+            <div class="site-id">
+                <a href="./">
+                    <h2>Thumbnailed</h2>
+                </a>
+            </div>
+            <div class="input-container">
+                <input id="url-input" name="url-input" type="url" placeholder="YouTube video URL" required pattern="">
+                <button id="input-btn" type="submit">Get Thumbnail</button>
+            </div>
         </div>
     </header>
     <main>
-        <div id="display" class="image-display hidden">
-            <div class="image-container">
+        <div id="display" class="image-display">
+            <div class="image-container hidden">
                 <div class="img-description"><span>Maximum</span></div>
-                <img id="img-0" class="thumbnail"
-                    src=""
-                    width="1280"
-                    height="720"
-                    loading="lazy"
+                <img id="img-0" class="thumbnail" src="" width="1280" height="720"
                     alt="Maximum Resolution">
             </div>
-            <div class="image-container">
+            <div class="image-container hidden">
                 <div class="img-description"><span>Large</span></div>
-                <img id="img-1" class="thumbnail"
-                    src=""
-                    width="640"
-                    height="480"
-                    loading="lazy"
-                    alt="High Resolution">
+                <img id="img-1" class="thumbnail" src="" width="640" height="480" alt="High Resolution">
             </div>
-            <div class="image-container">
+            <div class="image-container hidden">
                 <div class="img-description"><span>Medium</span></div>
-                <img id="img-2" class="thumbnail"
-                    src=""
-                    width="480"
-                    height="360"
-                    loading="lazy"
-                    alt="Standard Quality">
+                <img id="img-2" class="thumbnail" src="" width="480" height="360" alt="Standard Quality">
             </div>
-            <div class="image-container">
+            <div class="image-container hidden">
                 <div class="img-description"><span>Small</span></div>
-                <img id="img-3" class="thumbnail"
-                    src=""
-                    width="320"
-                    height="180"
-                    loading="lazy"
-                    alt="Medium Quality">
+                <img id="img-3" class="thumbnail" src="" width="320" height="180" alt="Medium Quality">
             </div>
         </div>
     </main>

diff --git a/script.js b/script.js
@@ -10,20 +10,27 @@ let images = document.querySelectorAll('.thumbnail');
  * @type {HTMLButtonElement} button
 */
 let button = document.getElementById('input-btn');
-/**
- * @type {HTMLDivElement} div
- */
-let display = document.getElementById('display');
 /**
  * @type {HTMLLinkElement} favicon
  */
 let link = document.querySelector("link[rel~='icon']");
 
 
-input.addEventListener('focus', () => {input.select()});
+input.addEventListener('focus', () => { input.select() });
 input.addEventListener('change', processThumbnail);
 input.addEventListener('input', processThumbnail);
 button.addEventListener('click', processThumbnail);
+images.forEach(image => image.addEventListener('load', e => {
+    /**
+     * @type {HTMLImageElement}
+     */
+    let thumb = e.target;
+    if (thumb.naturalWidth == 120 && thumb.naturalHeight == 90) {
+        thumb.parentElement.classList.add('hidden');
+    } else {
+        thumb.parentElement.classList.remove('hidden');
+    }
+}));
 
 processThumbnail();
 if (!link) {
@@ -57,7 +64,6 @@ function processThumbnail() {
     for (let i = 0; i < images.length; i++) {
         images[i].src = thumbURLS[i];
     }
-    display.classList.remove("hidden");
 }
 
 /**

diff --git a/styles.css b/styles.css
@@ -47,19 +47,29 @@ input:not(:focus)::selection {
 }
 
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px 50px;
     background-color: var(--background-color);
     color: var(--text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
+    height: 80px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.2);
 }
 
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    margin: auto;
+    width: 100%;
+    max-width: 1200px;
+}
+
 .site-id a {
     text-decoration: none;
     color: var(--text-color);
@@ -96,7 +106,7 @@ main {
 }
 
 .input-container input {
-    min-width: 48ch;
+    min-width: 44ch;
 }
 
 .input-container button:hover, .input-container button:active{
@@ -132,7 +142,7 @@ main {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    max-width: 1020px;
+    max-width: 1200px;
     padding: 10px;
     margin: auto;
 }