From e279ca2c88244e9ade34a68d36dced509078a3f0 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Tue, 5 Dec 2023 15:09:24 +0100
Subject: [PATCH] fix(web): lazy load trailer

---
 web/src/lib/components/PreviewCard.svelte | 21 +++++++++++++++++++--
 web/src/routes/+page.svelte               |  6 +++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/PreviewCard.svelte b/web/src/lib/components/PreviewCard.svelte
index b34d389..f398093 100644
--- a/web/src/lib/components/PreviewCard.svelte
+++ b/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
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 81774dc..0771798 100644
--- a/web/src/routes/+page.svelte
+++ b/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%);
   }