Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-04-18 23:22:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: trailers, go back to iframes

Browse source
This commit is contained in:
ThaUnknown 2024-08-20 22:58:33 +02:00 committed by NoCrypt
parent cad1026f92
commit 27920f74c6
1 changed files with 14 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
common/components/cards/PreviewCard.svelte
View file

@ -45,9 +45,6 @@
playMedia(media)
}
function volume (video) {
video.volume = 0.1
}
let muted = true
function toggleMute () {
muted = !muted
@ -55,13 +52,12 @@
</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>