fix: content layout shifts, better trailer

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"
   }
 }

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>

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' />

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>

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>