From f2c359f8f4304732ffd998fadfe4985c76e2644a Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Wed, 5 Jul 2023 19:51:58 +0200
Subject: [PATCH] fix: content layout shifts, better trailer

---
 package.json                                  |  6 ++---
 .../cards/EpisodeSkeletonCard.svelte          |  5 +++-
 .../components/cards/FullSkeletonCard.svelte  |  1 -
 .../components/cards/PreviewCard.svelte       | 26 ++++++++++++++-----
 .../components/cards/SkeletonCard.svelte      |  5 +++-
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 53ba916..0b094b8 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,9 @@
     "webpack-dev-server": "^4.15.0",
     "webtorrent": "^2.1.11"
   },
+  "dependencies": {
+    "utp-native": "^2.5.3"
+  },
   "standard": {
     "ignore": [
       "bundle.js",
@@ -135,8 +138,5 @@
       "allowToChangeInstallationDirectory": true,
       "oneClick": false
     }
-  },
-  "dependencies": {
-    "utp-native": "^2.5.3"
   }
 }
diff --git a/src/renderer/components/cards/EpisodeSkeletonCard.svelte b/src/renderer/components/cards/EpisodeSkeletonCard.svelte
index bcc15d4..39295bb 100644
--- a/src/renderer/components/cards/EpisodeSkeletonCard.svelte
+++ b/src/renderer/components/cards/EpisodeSkeletonCard.svelte
@@ -1,4 +1,4 @@
-<div class='d-flex pt-20 px-20 position-relative'>
+<div class='d-flex pt-20 px-20 position-relative wrapper'>
   <div class='item d-flex flex-column h-full'>
     <div class='image h-200 w-full rounded skeloader bg-dark-light' />
     <div class='row pt-15'>
@@ -18,4 +18,7 @@
     animation: 0.3s ease 0s 1 load-in;
     width: 36rem
   }
+  .wrapper {
+    height: 29.2rem;
+  }
 </style>
diff --git a/src/renderer/components/cards/FullSkeletonCard.svelte b/src/renderer/components/cards/FullSkeletonCard.svelte
index be2650b..bad4302 100644
--- a/src/renderer/components/cards/FullSkeletonCard.svelte
+++ b/src/renderer/components/cards/FullSkeletonCard.svelte
@@ -1,5 +1,4 @@
 <div class='d-flex px-20 py-10 position-relative'>
-
   <div class='card m-0 p-0 overflow-hidden'>
     <div class='row h-full'>
       <div class='col-4 skeloader bg-dark-light' />
diff --git a/src/renderer/components/cards/PreviewCard.svelte b/src/renderer/components/cards/PreviewCard.svelte
index cbd8f9a..fcde070 100644
--- a/src/renderer/components/cards/PreviewCard.svelte
+++ b/src/renderer/components/cards/PreviewCard.svelte
@@ -40,20 +40,34 @@
     })
     media.isFavourite = !media.isFavourite
   }
+  function volume (video) {
+    video.volume = 0.05
+  }
 </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' />
     {#if media.trailer?.id}
-      <iframe
+      <!-- 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`}
+        class='w-full position-absolute left-0'
+        class:d-none={hide}
+        playsinline
+        preload='none'
+        loop
+        use:volume
+        on:loadeddata={() => { hide = false }}
+        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}`}
-      />
+      /> -->
     {/if}
   </div>
   <div class='w-full px-20'>
@@ -146,17 +160,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 ;
-  }
+  } */
 </style>
diff --git a/src/renderer/components/cards/SkeletonCard.svelte b/src/renderer/components/cards/SkeletonCard.svelte
index 3881118..970acce 100644
--- a/src/renderer/components/cards/SkeletonCard.svelte
+++ b/src/renderer/components/cards/SkeletonCard.svelte
@@ -1,4 +1,4 @@
-<div class='d-flex p-20 flex-grow-1'>
+<div class='d-flex p-20 flex-grow-1 wrapper'>
   <div class='item d-flex flex-column h-full'>
     <div class='img w-full rounded skeloader bg-dark-light' />
     <div class='skeloader rounded bg-dark-light h-10 w-150 mt-15' />
@@ -14,4 +14,7 @@
     animation: 0.3s ease 0s 1 load-in;
     width: 19rem
   }
+  .wrapper {
+    height: 40.6rem;
+  }
 </style>