From d771987c85d819870441f04e5aab8b35928d5488 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Thu, 7 Jul 2022 13:18:25 -0500
Subject: [PATCH] Add support for poster eager loading

---
 src/components/video/poster.astro | 46 +++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/video/poster.astro b/src/components/video/poster.astro
index d5c05c4..bd86966 100644
--- a/src/components/video/poster.astro
+++ b/src/components/video/poster.astro
@@ -1,23 +1,57 @@
 ---
 import { getVideoImages } from '~/helpers/listing-page.js'
 const {
-    video
+    video,
+    loading = 'lazy'
 } = Astro.props
 
 const images = getVideoImages( video )
+
+function makeSourceAttributes ( [ key, source ] ) {
+    const sizes = source.sizes
+    const type = `image/${ key }`
+
+    if ( loading === 'eager' ) {
+        return {
+            sizes,
+            type,
+            srcset: source.srcset,
+        }
+    }
+
+    // Lazysizes attributes
+    return {
+        sizes,
+        type,
+        'data-srcset': source.srcset
+    }
+}
+
+function makeImgAttributes ( src ) {
+
+    if ( loading === 'eager' ) {
+        return {
+            src: src,
+        }
+    }
+
+    // Lazysizes attributes
+    return {
+        'data-src': src,
+    }
+}
+
 ---
 <picture>
 
     { Object.entries( images.sources ).map( ([ key, source ]) => (
         <source
-            sizes={ source.sizes }
-            data-srcset={ source.srcset }
-            type={ `image/${ key }` }
+            { ...makeSourceAttributes( [ key, source ] ) }
         >
-    ) ) }
+    )) }
 
     <img
-        data-src={ images.imgSrc }
+        { ...makeImgAttributes( images.imgSrc ) }
         alt={ video.name }
         class="absolute inset-0 h-full w-full object-cover lazyload"
     >