fix(web): lazy load trailer

web/src/lib/components/PreviewCard.svelte

@@ -31,20 +31,37 @@
   function play () {
     open('miru://anime/' + media.id)
   }
+  function lazyload (video) {
+    if ('IntersectionObserver' in window) {
+      const lazyVideoObserver = new IntersectionObserver(entries => {
+        for (const { target, isIntersecting } of entries) {
+          if (isIntersecting) {
+            video.src = video.dataset.src
+            lazyVideoObserver.unobserve(target)
+          }
+        }
+      })
+      lazyVideoObserver.observe(video.parentNode)
+    } else {
+      video.src = video.dataset.src
+    }
+  }
 </script>
 
 <div class='position-absolute w-350 h-400 absolute-container top-0 bottom-0 m-auto bg-dark-light z-30 rounded overflow-hidden pointer'>
   <div class='banner position-relative overflow-hidden bg-black'>
-    <img src={media.bannerImage || ' '} alt='banner' class='img-cover w-full h-full' />
+    <img src={media.bannerImage || ' '} alt='banner' class='img-cover w-full h-full' loading='lazy' />
     {#if media.trailer?.id}
       <div class='material-symbols-outlined filled position-absolute z-10 top-0 right-0 p-15 font-size-22' class:d-none={hide} use:click={toggleMute}>{muted ? 'volume_off' : 'volume_up'}</div>
       <!-- for now we use some invidious instance, would be nice to somehow get these links outselves, this redirects straight to some google endpoint -->
       <!-- eslint-disable-next-line svelte/valid-compile -->
-      <video src={`https://yewtu.be/latest_version?id=${media.trailer.id}&itag=18`}
+      <video data-src={`https://yewtu.be/latest_version?id=${media.trailer.id}&itag=18`}
         class='w-full position-absolute left-0'
         class:d-none={hide}
         playsinline
         preload='none'
+        loading='lazy'
+        use:lazyload
         loop
         use:volume
         bind:muted

web/src/routes/+page.svelte

@@ -20,7 +20,7 @@
 <Hero />
 <div class='container-xl'>
   <div class='position-relative'>
-    <img src='app.webp' alt='app' class='mw-full px-20' />
+    <img src='app.webp' alt='app' class='mw-full px-20 w-full app-image' />
     <div class='overlay-gradient position-absolute top-0 left-0 w-full h-full' />
   </div>
 
@@ -118,6 +118,10 @@
 <Stargazers stargazers={data.stargazers} />
 
 <style>
+  .app-image {
+    aspect-ratio: 2/1;
+    object-fit: contain;
+  }
   .overlay-gradient {
     background: linear-gradient(0deg, #0F1113 15.27%, rgba(15, 17, 19, 0.92) 41.28%, rgba(15, 17, 19, 0.25) 74.32%);
   }