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

Series page finalized

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-05 02:27:07 +03:00
parent 3092e1cc9d
commit 6809e20ed5
18 changed files with 584 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/Button.svelte
View File

@@ -12,31 +12,18 @@
export let target: string | undefined = '_self';
let buttonStyle: string;
// $: buttonStyle = classNames(
// 'border-2 border-white transition-all uppercase tracking-widest text-xs whitespace-nowrap',
// {
// 'bg-white text-zinc-900 font-extrabold': type === 'primary',
// 'hover:bg-amber-400 hover:border-amber-400': type === 'primary' && !disabled,
// 'font-semibold': type === 'secondary',
// 'hover:bg-white hover:text-black': type === 'secondary' && !disabled,
// 'px-8 py-3.5': size === 'lg',
// 'px-6 py-2.5': size === 'md',
// 'px-5 py-2': size === 'sm',
// 'opacity-70': disabled,
// 'cursor-pointer': !disabled
// }
// );
$: buttonStyle = classNames(
'flex items-center gap-1 py-3 px-6 rounded-xl font-medium select-none cursor-pointer selectable transition-all backdrop-blur-lg',
'flex items-center gap-1 rounded-xl font-medium select-none cursor-pointer selectable transition-all flex-shrink-0',
{
'bg-white text-zinc-900 font-extrabold': type === 'primary',
'bg-white text-zinc-900 font-extrabold backdrop-blur-lg': type === 'primary',
'hover:bg-amber-400 hover:border-amber-400': type === 'primary' && !disabled,
'text-zinc-200 bg-stone-800 bg-opacity-30': type === 'secondary',
'text-zinc-200 bg-zinc-500 bg-opacity-30 backdrop-blur-lg': type === 'secondary',
'focus-visible:bg-zinc-200 focus-visible:text-zinc-800 hover:bg-zinc-200 hover:text-zinc-800':
type === 'secondary' && !disabled,
(type === 'secondary' || type === 'tertiary') && !disabled,
'rounded-full': type === 'tertiary',
'py-3 px-6': size === 'lg',
// 'py-3 px-6': size === 'md',
'px-5 py-2': size === 'sm',
'py-2 px-6': size === 'md',
'py-1 px-3': size === 'sm',
'opacity-50': disabled,
'cursor-pointer': !disabled
}

11
src/lib/components/Card/card.ts
View File

@@ -1,12 +1,5 @@
import type { RadarrMovie } from '$lib/apis/radarr/radarrApi';
import {
fetchTmdbMovieImages,
getTmdbMovieBackdrop,
getTmdbMovieImages,
getTmdbSeriesBackdrop,
getTmdbSeriesImages
} from '$lib/apis/tmdb/tmdbApi';
import type { TmdbMovie, TmdbMovie2, TmdbSeries2 } from '$lib/apis/tmdb/tmdbApi';
import type { TmdbMovie2, TmdbSeries2 } from '$lib/apis/tmdb/tmdbApi';
import { getTmdbMovieBackdrop, getTmdbSeriesBackdrop } from '$lib/apis/tmdb/tmdbApi';
import type { ComponentProps } from 'svelte';
import type Card from './Card.svelte';

4
src/lib/components/Carousel/Carousel.svelte
View File

@@ -40,13 +40,13 @@
{#if scrollX > 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-4 left-0 w-24 bg-gradient-to-r ' + gradientFromColor}
class={'absolute inset-y-4 left-0 w-8 sm:w-16 md:w-24 bg-gradient-to-r ' + gradientFromColor}
/>
{/if}
{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-4 right-0 w-24 bg-gradient-to-l ' + gradientFromColor}
class={'absolute inset-y-4 right-0 w-8 sm:w-16 md:w-24 bg-gradient-to-l ' + gradientFromColor}
/>
{/if}
</div>

36
src/lib/components/EpisodeCard/EpisodeCard.svelte
View File

@@ -1,9 +1,9 @@
<script lang="ts">
import { TMDB_BACKDROP_SMALL } from '$lib/constants';
import classNames from 'classnames';
import { TriangleRight } from 'radix-icons-svelte';
import IconButton from '../IconButton.svelte';
import { DotsHorizontal, TriangleRight } from 'radix-icons-svelte';
import { fade } from 'svelte/transition';
import IconButton from '../IconButton.svelte';
export let backdropPath: string;
@@ -19,7 +19,8 @@
</script>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div
<button
on:click
class={classNames(
'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative cursor-pointer selectable flex-shrink-0',
{
@@ -28,21 +29,18 @@
group: !!handlePlay
}
)}
tabindex="0"
style={"background-image: url('" + TMDB_BACKDROP_SMALL + backdropPath + "');"}
transition:fade|global
in:fade|global={{ duration: 100, delay: 100 }}
out:fade|global={{ duration: 100 }}
>
<div
class={classNames(
'flex flex-col justify-between h-full group-hover:opacity-0 transition-opacity',
{
'px-2 lg:px-3 pt-2': true,
' pb-4 lg:pb-6': progress,
'pb-2': !progress,
'bg-gradient-to-t from-darken': !!handlePlay,
'bg-darken': !handlePlay
}
)}
class={classNames('flex flex-col justify-between h-full group-hover:opacity-0 transition-all', {
'px-2 lg:px-3 pt-2': true,
' pb-4 lg:pb-6': progress,
'pb-2': !progress,
'bg-gradient-to-t from-darken': !!handlePlay,
'bg-darken': !handlePlay
})}
>
<div class="flex justify-between items-center">
<div>
@@ -62,14 +60,14 @@
</slot>
</div>
</div>
<div class="flex items-bottom justify-between">
<div class="flex items-end justify-between">
<slot name="left-bottom">
<div class="flex flex-col">
<div class="flex flex-col items-start">
{#if subtitle}
<div class="text-zinc-300 text-sm font-medium">{subtitle}</div>
{/if}
{#if title}
<div class="font-medium">
<div class="font-medium text-left">
{title}
</div>
{/if}
@@ -94,4 +92,4 @@
<div style={'width: ' + progress + '%'} class="h-full bg-zinc-200" />
</div>
{/if}
</div>
</button>

1
src/lib/components/Modal/Modal.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { modalStack } from './Modal';
// export let visible = false;

2
src/lib/components/Modal/ModalBackground.svelte
View File

@@ -6,6 +6,6 @@
{#if $modalStack.top}
<div
class="fixed inset-0 bg-stone-900 bg-opacity-50 z-[19] overflow-hidden"
transition:fade={{ duration: 100 }}
transition:fade|global={{ duration: 100 }}
/>
{/if}

3
src/lib/components/Modal/ModalContainer.svelte
View File

@@ -4,7 +4,8 @@
<div
class="max-w-3xl self-start mt-[10vh] bg-[#33333388] backdrop-blur-xl rounded overflow-hidden flex flex-col flex-1 mx-4 sm:mx-16 lg:mx-24 drop-shadow-xl"
in:fly|global={{ y: 20, duration: 200 }}
in:fly|global={{ y: 20, duration: 200, delay: 200 }}
out:fly|global={{ y: 20, duration: 200 }}
>
<slot />
</div>

2
src/lib/components/Modal/ModalHeader.svelte
View File

@@ -24,7 +24,7 @@
{#if !!back}
<ChevronLeft size={20} />
{/if}
<h1>{text}</h1>
<h1 class="font-medium">{text}</h1>
</button>
{/if}
</slot>

14
src/lib/components/PeopleCard/PeopleCard.svelte
View File

@@ -3,11 +3,11 @@
import classNames from 'classnames';
export let tmdbId: number;
export let knownFor: string[];
export let knownFor: string[] = [];
export let name: string;
export let backdropUri: string;
export let department: string;
export let size: 'dynamic' | 'md' | 'lg' = 'lg';
export let size: 'dynamic' | 'md' | 'lg' = 'md';
</script>
<a
@@ -29,13 +29,19 @@
{knownFor.join(', ')}
</h2> -->
</div>
<div class="bg-gradient-to-t from-darken from-20% to-transparent p-2 px-3 pt-8">
<div class="bg-gradient-to-t from-darken from-40% p-2 px-3 pt-8">
<h2
class="text-xs text-zinc-300 tracking-wider font-medium opacity-0 group-hover:opacity-100"
>
{department}
</h2>
<h1 class="font-bold tracking-wider text-lg">{name}</h1>
<h1
class={classNames('font-semibold tracking-wider', {
'text-lg': size === 'lg'
})}
>
{name}
</h1>
</div>
</div>
<div

17
src/lib/components/RequestModal/SeriesRequestModal.svelte
View File

@@ -9,10 +9,13 @@
import EpisodeSelectModal from './EpisodeSelectModal.svelte';
import RequestModal from './RequestModal.svelte';
import type { SonarrEpisode } from '$lib/apis/sonarr/sonarrApi';
import Button from '../Button.svelte';
import { ChevronRight } from 'radix-icons-svelte';
export let modalProps: ModalProps;
export let sonarrId: number;
export let seasons: number;
export let heading = 'Seasons';
let episodeSelectProps: Omit<ComponentProps<EpisodeSelectModal>, 'modalProps'> | undefined =
undefined;
@@ -64,21 +67,23 @@
<Modal {...modalProps}>
<ModalContainer>
<ModalHeader {...modalProps} back={undefined} text="Seasons" />
<ModalHeader {...modalProps} back={undefined} text={heading} />
<ModalContent>
<div class="flex flex-col divide-y divide-zinc-700">
{#each [...Array(seasons).keys()].map((i) => i + 1) as seasonNumber}
<div
class="px-4 py-3 flex justify-between items-center text-zinc-300 group-hover:text-zinc-300"
>
<div class="uppercase font-bold text-sm">
<div class="font-medium">
Season {seasonNumber}
</div>
<div class="flex gap-2">
<RoundedButton on:click={() => selectSeasonPack(seasonNumber)}
>Season Packs</RoundedButton
>
<RoundedButton on:click={() => selectSeason(seasonNumber)}>Episodes</RoundedButton>
<Button size="sm" type="tertiary" on:click={() => selectSeasonPack(seasonNumber)}>
<span>Season Packs</span><ChevronRight size={20} />
</Button>
<Button size="sm" type="tertiary" on:click={() => selectSeason(seasonNumber)}>
<span>Episodes</span><ChevronRight size={20} />
</Button>
</div>
</div>
{/each}

2
src/lib/components/ResourceDetails/ResourceDetails.svelte
View File

@@ -283,7 +283,7 @@
</Button>
</div> -->
<div style={opacityStyle} class:hidden={showDetails}>
<Button href={`/${type}/${tmdbId}`}>
<Button size="lg" href={`/${type}/${tmdbId}`}>
<span>Details</span>
<ChevronRight size={20} />
</Button>