fix: trailers, go back to iframes

ThaUnknown · Aug 20, 2024 · f88cca3 · f88cca3
1 parent 5fcd593
commit f88cca3
Showing 1 changed file with 14 additions and 18 deletions.
diff --git a/common/components/cards/PreviewCard.svelte b/common/components/cards/PreviewCard.svelte
@@ -45,23 +45,19 @@
     playMedia(media)
   }
 
-  function volume (video) {
-    video.volume = 0.1
-  }
   let muted = true
   function toggleMute () {
     muted = !muted
   }
 </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 bg-black'>
+  <div class='banner position-relative bg-black overflow-hidden'>
     <img src={media.bannerImage || `https://i.ytimg.com/vi/${media.trailer?.id}/hqdefault.jpg` || ' '} alt='banner' class='img-cover w-full h-full' />
     {#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://inv.tux.pizza/latest_version?id=${media.trailer.id}&itag=18`}
+      <!-- indivious is nice because its faster, but not reliable -->
+      <!-- <video src={`https://inv.tux.pizza/latest_version?id=${media.trailer.id}&itag=18`}
         class='w-full h-full position-absolute left-0'
         class:d-none={hide}
         playsinline
@@ -70,15 +66,15 @@
         use:volume
         bind:muted
         on:loadeddata={() => { hide = false }}
-        autoplay />
-      <!-- <iframe
+        autoplay /> -->
+      <iframe
         class='w-full border-0 position-absolute left-0'
         class:d-none={hide}
         title={media.title.userPreferred}
         allow='autoplay'
         on:load={() => { hide = false }}
-        src={`https://www.youtube-nocookie.com/embed/${media.trailer?.id}?autoplay=1&controls=0&mute=1&disablekb=1&loop=1&vq=medium&playlist=${media.trailer?.id}`}
-      /> -->
+        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'>
@@ -149,9 +145,9 @@
   .banner {
     height: 45%
   }
-  video {
+  /* video {
     object-fit: cover;
-  }
+  } */
   .banner::after {
     content: '';
     position: absolute;
@@ -178,17 +174,17 @@
     left: -100%;
     right: -100%;
   }
-  /* @keyframes delayedShow {
+  @keyframes delayedShow {
     to {
       visibility: visible;
     }
-  } */
+  }
 
-  /* iframe {
+   iframe {
     height: 200%;
     top: 50%;
     transform: translate(0, -50%);
     visibility: hidden;
-    animation: 0s linear 0.5s forwards delayedShow ;
-  } */
+    animation: 0s linear 0.5s forwards delayedShow;
+  }
 </style>