starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-18 04:53:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: various youtube trailers related issues

Browse Source
This commit is contained in:
Aleksi Lassila
2025-02-17 17:15:35 +02:00
parent c64d46f6a8
commit 455cc2f672
13 changed files with 406 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/lib/components/HeroCarousel/HeroBackground.svelte
View File

@@ -3,11 +3,14 @@
import classNames from 'classnames';
import { onDestroy } from 'svelte';
import { isFirefox } from '../../utils/browser-detection';
import YouTubeBackground from '../YouTubeBackground.svelte';
import YouTubeVideo from '../YoutubeVideo.svelte';
import { fade } from 'svelte/transition';
import { localSettings } from '$lib/stores/localstorage.store';
export let urls: Promise<string[]>;
export let items: Promise<{ backdropUrl: string; videoUrl?: string }[]>;
export let index: number;
export let hasFocus = true;
export let heroHasFocus = false;
export let hideInterface = false;
let visibleIndex = -2;
let visibleIndexTimeout: ReturnType<typeof setTimeout>;
@@ -37,47 +40,52 @@
</script>
<div class="fixed inset-0" style="-webkit-transform: translate3d(0,0,0);">
{#await urls then urlArray}
{#if !isFirefox()}
{#each urlArray as { trailerUrl, backdropUrl }, i}
{#if i === index}
{#if trailerUrl}
<YouTubeBackground videoId={trailerUrl} backgroundUrl={backdropUrl} />
{:else}
<div
class={classNames('absolute inset-0 bg-center bg-cover', {
'opacity-100': visibleIndex === i,
'opacity-0': visibleIndex !== i,
'scale-110': !hasFocus
})}
style={`background-image: url('${backdropUrl}'); transition: opacity 500ms, transform 500ms;`}
/>
{/if}
{/if}
{/each}
{:else}
<div class={classNames('flex overflow-hidden h-full w-full transition-transform duration-500', { 'scale-110': !hasFocus })}
style="perspective: 1px; -webkit-perspective: 1px;">
{#each urlArray as { backdropUrl }, i}
<div class="w-full h-full flex-shrink-0 relative"
style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
bind:this={htmlElements[i]}>
<div
{#if true}
{#await items then items}
{#each items as { videoUrl, backdropUrl }, i}
<div
class={classNames('absolute inset-0 bg-center bg-cover', {
'opacity-100': visibleIndex === i,
'opacity-0': visibleIndex !== i,
'scale-110': !hasFocus
})}
style={`background-image: url('${backdropUrl}'); ${
!PLATFORM_TV &&
'transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);'
}`}
/>
style={`background-image: url('${backdropUrl}'); transition: opacity 500ms, transform 500ms;`}
>
{#if videoUrl && i === visibleIndex && $localSettings.enableTrailers && $localSettings.autoplayTrailers}
<YouTubeVideo videoId={videoUrl} play={heroHasFocus} />
{/if}
</div>
{/each}
{/await}
{:else}
<div
class={classNames('flex overflow-hidden h-full w-full transition-transform duration-500', {
'scale-110': !hasFocus
})}
style="perspective: 1px; -webkit-perspective: 1px;"
>
{#await items then items}
{#each items as { backdropUrl, videoUrl }, i}
<div
class="w-full h-full flex-shrink-0 basis-auto relative"
style="transform-style: preserve-3d; -webkit-transform-style: preserve-3d; overflow: hidden;"
bind:this={htmlElements[i]}
>
<div
class="w-full h-full flex-shrink-0 basis-auto bg-center bg-cover absolute inset-0"
style={`background-image: url('${backdropUrl}'); ${
!PLATFORM_TV &&
'transform: translateZ(-5px) scale(6); -webkit-transform: translateZ(-5px) scale(6);'
}`}
/>
<!-- {#if videoUrl && mountVideo}
<YouTubeBackground videoId={videoUrl} backgroundUrl={backdropUrl} />
{/if} -->
</div>
{/each}
{/await}
</div>
{/if}
{/await}
</div>
<div
class={classNames('absolute inset-0 flex flex-col transition-opacity', {