From 0b4457ccb41200208b24ba301ed4acd2819f1f9b Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 28 Jun 2024 00:18:16 -0400
Subject: [PATCH] If the thumbnail fails to load, replace with Poke placeholder

---
 src/components/common/VideoItem.astro | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/common/VideoItem.astro b/src/components/common/VideoItem.astro
index 25b6689..852fe22 100644
--- a/src/components/common/VideoItem.astro
+++ b/src/components/common/VideoItem.astro
@@ -25,7 +25,12 @@ const ViewsFormat = ViewsConversion.format(Views)
 
 <a href={'/watch?v=' + ID} class="video-item" data-astro-reload>
     <div class="video-item-thumbnail">
-        <img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
+        <img onload=`
+            if (this.naturalWidth == '120') {
+                src='https://md.sudovanilla.org/images/pt-th-fl.png'
+            }
+        `
+         src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
     </div>
     <div class="video-item-details">
         <p id="vi-title">{Title}</p>
@@ -34,6 +39,10 @@ const ViewsFormat = ViewsConversion.format(Views)
     </div>
 </a>
 
+<script is:inline>
+document.querySelectorAll("img[src='https://i.ytimg.com/vi/undefined/maxresdefault.jpg']").forEach(img => {img.src='https://md.sudovanilla.org/images/pt-th-fl.png'})
+</script>
+
 <style lang="scss">
 .video-item {
     display: flex;