From 3a4a2fd7e1a05972f50669ba6bf1e7f3c2e15d34 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Wed, 21 Aug 2024 00:00:23 +0200
Subject: [PATCH] fix: trailer on website

---
 web/src/lib/components/PreviewCard.svelte | 28 +++++++++--------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/web/src/lib/components/PreviewCard.svelte b/web/src/lib/components/PreviewCard.svelte
index 23a5fa1d..ced58d27 100644
--- a/web/src/lib/components/PreviewCard.svelte
+++ b/web/src/lib/components/PreviewCard.svelte
@@ -20,9 +20,6 @@
   }
   const playButtonText = getPlayButtonText(media)
 
-  function volume (video) {
-    video.volume = 0.1
-  }
   let muted = true
   function toggleMute () {
     muted = !muted
@@ -31,19 +28,19 @@
   function play () {
     open('miru://anime/' + media.id)
   }
-  function lazyload (video) {
+  function lazyload (iframe) {
     if ('IntersectionObserver' in window) {
       const lazyVideoObserver = new IntersectionObserver(entries => {
         for (const { target, isIntersecting } of entries) {
           if (isIntersecting) {
-            video.src = video.dataset.src
+            iframe.src = iframe.dataset.src
             lazyVideoObserver.unobserve(target)
           }
         }
       })
-      lazyVideoObserver.observe(video.parentNode)
+      lazyVideoObserver.observe(iframe.parentNode)
     } else {
-      video.src = video.dataset.src
+      iframe.src = iframe.dataset.src
     }
   }
 </script>
@@ -55,18 +52,15 @@
       <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 data-src={`https://inv.tux.pizza/latest_version?id=${media.trailer.id}&itag=18`}
-        class='w-full h-full position-absolute left-0'
+      <iframe
+        class='w-full border-0 position-absolute left-0'
         class:d-none={hide}
-        playsinline
-        preload='none'
-        loading='lazy'
+        title={media.title.userPreferred}
+        allow='autoplay'
         use:lazyload
-        loop
-        use:volume
-        bind:muted
-        on:loadeddata={() => { hide = false }}
-        autoplay />
+        on:load={() => { hide = false }}
+        data-src={`https://www.youtube-nocookie.com/embed/${media.trailer?.id}?autoplay=1&controls=0&mute=${muted ? 1 : 0}&disablekb=1&loop=1&vq=medium&playlist=${media.trailer?.id}&cc_lang_pref=ja`}
+      />
     {/if}
   </div>
   <div class='w-full px-20'>