mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-20 07:53:32 +02:00
style: Major visual overhaul with various improvements and fixes
This commit is contained in:
Aleksi Lassila
@@ -7,7 +7,8 @@
|
||||
import type { TitleType } from '../../types';
|
||||
import Container from '../../../Container.svelte';
|
||||
import { useNavigate } from 'svelte-navigator';
|
||||
import { scrollIntoView } from '../../selectable';
|
||||
import type { Readable } from 'svelte/store';
|
||||
import AnimatedSelection from '../AnimateScale.svelte';
|
||||
|
||||
export let tmdbId: number | undefined = undefined;
|
||||
export let tvdbId: number | undefined = undefined;
|
||||
@@ -26,97 +27,105 @@
|
||||
export let orientation: 'portrait' | 'landscape' = 'landscape';
|
||||
|
||||
const navigate = useNavigate();
|
||||
let hasFocus: Readable<boolean>;
|
||||
</script>
|
||||
|
||||
<Container
|
||||
active={focusable}
|
||||
on:clickOrSelect={() => {
|
||||
if (tmdbId || tvdbId) {
|
||||
navigate(`${type}/${tmdbId || tvdbId}`);
|
||||
}
|
||||
}}
|
||||
on:enter
|
||||
class={classNames(
|
||||
'relative flex rounded-xl selectable group hover:text-inherit flex-shrink-0 overflow-hidden text-left cursor-pointer',
|
||||
{
|
||||
'aspect-video': orientation === 'landscape',
|
||||
'aspect-[2/3]': orientation === 'portrait',
|
||||
'w-32 h-48': size === 'sm' && orientation === 'portrait',
|
||||
'h-32 w-56': size === 'sm' && orientation === 'landscape',
|
||||
'w-44 h-64': size === 'md' && orientation === 'portrait',
|
||||
'h-44 w-80': size === 'md' && orientation === 'landscape',
|
||||
'w-60 h-96': size === 'lg' && orientation === 'portrait',
|
||||
'h-60 w-96': size === 'lg' && orientation === 'landscape',
|
||||
'w-full': size === 'dynamic',
|
||||
'shadow-lg': shadow
|
||||
}
|
||||
)}
|
||||
>
|
||||
<LazyImg src={backdropUrl} class="absolute inset-0 group-hover:scale-105 transition-transform" />
|
||||
<div
|
||||
class="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity bg-black"
|
||||
style="filter: blur(50px); transform: scale(3);"
|
||||
<AnimatedSelection hasFocus={$hasFocus}>
|
||||
<Container
|
||||
active={focusable}
|
||||
on:clickOrSelect={() => {
|
||||
if (tmdbId || tvdbId) {
|
||||
navigate(`${type}/${tmdbId || tvdbId}`);
|
||||
}
|
||||
}}
|
||||
on:enter
|
||||
class={classNames(
|
||||
'relative flex flex-shrink-0 rounded-xl group hover:text-inherit overflow-hidden text-left cursor-pointer',
|
||||
'transition-transform selectable',
|
||||
{
|
||||
'aspect-video': orientation === 'landscape',
|
||||
'aspect-[2/3]': orientation === 'portrait',
|
||||
'w-32 h-48': size === 'sm' && orientation === 'portrait',
|
||||
'h-32 w-56': size === 'sm' && orientation === 'landscape',
|
||||
'w-44 h-64': size === 'md' && orientation === 'portrait',
|
||||
'h-44 w-80': size === 'md' && orientation === 'landscape',
|
||||
'w-60 h-96': size === 'lg' && orientation === 'portrait',
|
||||
'h-60 w-96': size === 'lg' && orientation === 'landscape',
|
||||
'w-full': size === 'dynamic',
|
||||
'shadow-lg': shadow
|
||||
}
|
||||
)}
|
||||
bind:hasFocus
|
||||
>
|
||||
<!-- This is the tinted and blurred hover overlay -->
|
||||
<LazyImg src={backdropUrl} />
|
||||
</div>
|
||||
<!-- <div
|
||||
<LazyImg
|
||||
src={backdropUrl}
|
||||
class="absolute inset-0 group-hover:scale-105 transition-transform"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity bg-black"
|
||||
style="filter: blur(50px); transform: scale(3);"
|
||||
>
|
||||
<!-- This is the tinted and blurred hover overlay -->
|
||||
<LazyImg src={backdropUrl} />
|
||||
</div>
|
||||
<!-- <div
|
||||
style={`background-image: url(${backdropUrl}); background-size: cover; background-position: center; filter: blur(50px); transform: scale(3);`}
|
||||
class="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity bg-black"
|
||||
/> -->
|
||||
<div
|
||||
class={classNames(
|
||||
'flex-1 flex flex-col justify-between bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity z-[1]',
|
||||
{
|
||||
'py-2 px-3': true
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div class="flex justify-self-start justify-between">
|
||||
<slot name="top-left">
|
||||
<div>
|
||||
<h1 class="text-zinc-100 font-bold line-clamp-2 text-lg">{title}</h1>
|
||||
<h2 class="text-zinc-300 text-sm font-medium line-clamp-2">{subtitle}</h2>
|
||||
</div>
|
||||
</slot>
|
||||
<slot name="top-right">
|
||||
<div />
|
||||
</slot>
|
||||
<div
|
||||
class={classNames(
|
||||
'flex-1 flex flex-col justify-between bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity z-[1]',
|
||||
{
|
||||
'py-2 px-3': true
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div class="flex justify-self-start justify-between">
|
||||
<slot name="top-left">
|
||||
<div>
|
||||
<h1 class="text-zinc-100 font-bold line-clamp-2 text-lg">{title}</h1>
|
||||
<h2 class="text-zinc-300 text-sm font-medium line-clamp-2">{subtitle}</h2>
|
||||
</div>
|
||||
</slot>
|
||||
<slot name="top-right">
|
||||
<div />
|
||||
</slot>
|
||||
</div>
|
||||
<div class="flex justify-self-end justify-between">
|
||||
<slot name="bottom-left">
|
||||
<div>
|
||||
{#if rating}
|
||||
<h2 class="flex items-center gap-1.5 text-sm text-zinc-300 font-medium">
|
||||
<Star />{rating.toFixed(1)}
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</slot>
|
||||
<slot name="bottom-right">
|
||||
<div />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-self-end justify-between">
|
||||
<slot name="bottom-left">
|
||||
<div>
|
||||
{#if rating}
|
||||
<h2 class="flex items-center gap-1.5 text-sm text-zinc-300 font-medium">
|
||||
<Star />{rating.toFixed(1)}
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
</slot>
|
||||
<slot name="bottom-right">
|
||||
<div />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
<!-- <div
|
||||
class="absolute inset-0 bg-gradient-to-t from-darken group-hover:opacity-0 transition-opacity z-[1]"
|
||||
/> -->
|
||||
{#if jellyfinId}
|
||||
<div class="absolute inset-0 flex items-center justify-center z-[1]">
|
||||
<PlayButton
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
jellyfinId && true; //playerState.streamJellyfinId(jellyfinId);
|
||||
}}
|
||||
class="sm:opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if progress}
|
||||
<div
|
||||
class="absolute bottom-2 lg:bottom-3 inset-x-2 lg:inset-x-3 bg-gradient-to-t ease-in-out z-[1]"
|
||||
>
|
||||
<ProgressBar {progress} />
|
||||
</div>
|
||||
{/if}
|
||||
</Container>
|
||||
{#if jellyfinId}
|
||||
<div class="absolute inset-0 flex items-center justify-center z-[1]">
|
||||
<PlayButton
|
||||
on:click={(e) => {
|
||||
e.preventDefault();
|
||||
jellyfinId && true; //playerState.streamJellyfinId(jellyfinId);
|
||||
}}
|
||||
class="sm:opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if progress}
|
||||
<div
|
||||
class="absolute bottom-2 lg:bottom-3 inset-x-2 lg:inset-x-3 bg-gradient-to-t ease-in-out z-[1]"
|
||||
>
|
||||
<ProgressBar {progress} />
|
||||
</div>
|
||||
{/if}
|
||||
</Container>
|
||||
</AnimatedSelection>
|
||||
|
||||
Reference in New Issue
Block a user