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

Initial work on library page

Browse Source
This commit is contained in:
Aleksi Lassila
2023-06-15 02:08:47 +03:00
parent c463bb89e9
commit e41b030d45
15 changed files with 275 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/routes/components/Navbar.svelte Normal file
View File

@@ -0,0 +1,51 @@
<script>
import { MagnifyingGlass, Person } from 'radix-icons-svelte';
import classNames from 'classnames';
import { page } from '$app/stores';
let y = 0;
let transparent = true;
let baseStyle = '';
function getLinkStyle(path) {
return $page.url.pathname === path ? 'text-amber-200' : 'hover:text-zinc-50 cursor-pointer';
}
$: {
transparent = y === 0;
baseStyle = classNames(
'fixed px-8 inset-x-0 grid grid-cols-[min-content_1fr_min-content] items-center z-10',
'transition-all',
{
'bg-zinc-900 bg-opacity-50 backdrop-blur-2xl h-16': !transparent,
'h-24': transparent
}
);
}
</script>
<svelte:window bind:scrollY={y} />
<div class={baseStyle}>
<div class="flex gap-2 items-center">
<div class="rounded-full bg-amber-300 h-4 w-4" />
<h1 class="font-display uppercase font-semibold tracking-wider text-xl">Reiverr</h1>
</div>
<div
class="flex items-center justify-center gap-8 font-normal text-sm tracking-wider text-zinc-200"
>
<a href="/" class={$page && getLinkStyle('/')}>Home</a>
<a href="/discover" class={$page && getLinkStyle('/discover')}>Discover</a>
<a href="/library" class={$page && getLinkStyle('/library')}>Library</a>
<a href="/sources" class={$page && getLinkStyle('/sources')}>Sources</a>
<a href="/settings" class={$page && getLinkStyle('/settings')}>Settings</a>
</div>
<div class="flex gap-2">
<div class="p-2 cursor-pointer text-zinc-200 hover:text-zinc-50">
<MagnifyingGlass size="20" />
</div>
<div class="p-2 cursor-pointer text-zinc-200 hover:text-zinc-50">
<Person size="20" />
</div>
</div>
</div>

208
src/routes/components/ResourceDetails/ResourceDetails.svelte Normal file
View File

@@ -0,0 +1,208 @@
<script lang="ts">
import type { MovieResource } from '$lib/types';
import { ChevronDown, Clock } from 'radix-icons-svelte';
import { onMount } from 'svelte';
import classNames from 'classnames';
import { fade } from 'svelte/transition';
export let resource: MovieResource;
export let trailer = true;
export let remoteResource: any;
let video: any = remoteResource.videos.filter(
(v) => v.site === 'YouTube' && v.type === 'Trailer'
)?.[0];
const monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
const releaseDate = new Date(remoteResource.release_date);
let showTrailer = false;
let focusTrailer = false;
let trailerStartTime = 0;
function openTrailer() {
window
.open(
'https://www.youtube.com/watch?v=' +
video.key +
'&autoplay=1&t=' +
(trailerStartTime === 0 ? 0 : Math.floor((Date.now() - trailerStartTime) / 1000)),
'_blank'
)
.focus();
}
let opacityStyle;
const transitionStyle = 'transition: opacity 0.3s ease-in-out;';
$: opacityStyle = (focusTrailer ? 'opacity: 0;' : 'opacity: 100;') + transitionStyle;
onMount(() => {
setTimeout(() => {
if (trailer) {
showTrailer = true;
trailerStartTime = Date.now();
}
}, 2500);
});
</script>
<div
class="h-screen w-screen bg-center bg-cover relative overflow-hidden"
style={"background-image: url('https://www.themoviedb.org/t/p/original" +
remoteResource.backdrop_path +
"')"}
>
<div class="youtube-container absolute h-full scale-[150%] hidden sm:block">
{#if video.key}
<iframe
class={classNames('transition-opacity', {
'opacity-100': showTrailer,
'opacity-0': !showTrailer
})}
transition:fade
src={'https://www.youtube.com/embed/' +
video.key +
'?autoplay=1&mute=1&loop=1&color=white&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1'}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
{/if}
</div>
<div
class={classNames(
'bg-gradient-to-b from-darken via-20% via-transparent transition-opacity absolute inset-0 z-[1]',
{
'opacity-100': focusTrailer,
'opacity-0': !focusTrailer
}
)}
/>
<div
class={classNames(
'h-full w-full px-16 pb-8 pt-32',
'grid grid-cols-[1fr_max-content] grid-rows-[1fr_min-content] gap-x-16 gap-y-8 relative z-[2]',
'transition-colors',
{
'bg-darken': !focusTrailer,
'bg-transparent': focusTrailer
}
)}
>
<div class="flex flex-col justify-self-start min-w-0 row-span-full">
<div class="relative" style={opacityStyle}>
<h2 class="text-zinc-300 text-sm self-end">
<span class="font-bold uppercase tracking-wider"
>{monthNames[releaseDate.getMonth()]}</span
>
{releaseDate.getFullYear()}
</h2>
<h2
class="tracking-wider font-display font-extrabold text-amber-300 absolute opacity-10 text-8xl -ml-6 mt-8"
>
<slot name="reason">Popular Now</slot>
</h2>
<h1 class="uppercase text-8xl font-bold font-display z-[1] relative">
{remoteResource.original_title}
</h1>
</div>
<div class="mt-auto max-w-3xl flex flex-col gap-4" style={opacityStyle}>
<div class="text-xl font-semibold tracking-wider">{remoteResource.tagline}</div>
<div
class="tracking-wider text-zinc-200 font-light leading-6 pl-4 border-l-2 border-zinc-300"
>
{remoteResource.overview}
</div>
</div>
<div class="flex gap-6 mt-10">
<div class="flex gap-1">
<button
class="bg-white border-2 border-white hover:bg-amber-400 hover:border-amber-400 transition-colors text-zinc-900 px-8 py-3.5 uppercase tracking-widest font-extrabold cursor-pointer text-xs"
style={opacityStyle}>Stream</button
>
<div
class="hidden items-center justify-center border-2 border-white w-10 cursor-pointer hover:bg-white hover:text-zinc-900 transition-colors"
>
<ChevronDown size="20" />
</div>
</div>
<button
on:mouseover={() => (focusTrailer = trailer)}
on:mouseleave={() => (focusTrailer = false)}
on:click={openTrailer}
class="border-2 border-white cursor-pointer transition-colors px-8 py-3.5 uppercase tracking-widest font-semibold text-xs hover:bg-white hover:text-black opacity-100"
>Watch Trailer</button
>
</div>
</div>
<div class="flex flex-col gap-6 max-w-[14rem] row-span-full" style={opacityStyle}>
<h3 class="text-xs tracking-wide uppercase">Details</h3>
<div class="flex flex-col gap-1">
<div class="tracking-widest font-extralight text-sm">
{remoteResource.genres
.map((g) => g.name.charAt(0).toUpperCase() + g.name.slice(1))
.join(', ')}
</div>
<div class="flex gap-1.5 items-center">
<Clock size="14" />
<div class="tracking-widest font-extralight text-sm">
{Math.floor(remoteResource.runtime / 60)}h {remoteResource.runtime % 60}m
</div>
</div>
<div class="tracking-widest font-extralight text-sm">Currently <b>Streaming</b></div>
<div class="tracking-widest font-extralight text-sm">
<b>{remoteResource.vote_average}</b> TMDB
</div>
<div class="flex mt-4">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="text-white w-4"
><g
><path d="M0 0h24v24H0z" fill="none" /><path
d="M11.29 3.814l2.02 5.707.395 1.116.007-4.81.01-4.818h4.27L18 11.871c.003 5.98-.003 10.89-.015 10.9-.012.009-.209 0-.436-.027-.989-.118-2.29-.236-3.34-.282a14.57 14.57 0 0 1-.636-.038c-.003-.004-.273-.762-.776-2.184v-.004l-2.144-6.061-.34-.954-.008 4.586c-.006 4.365-.01 4.61-.057 4.61-.163 0-1.57.09-2.04.136-.308.027-.926.09-1.37.145-.446.051-.816.085-.823.078C6.006 22.77 6 17.867 6 11.883V1.002h.005V1h4.288l.028.08c.007.016.065.176.157.437l.641 1.778.173.496-.001.023z"
fill-rule="evenodd"
fill="currentColor"
/></g
></svg
>
</div>
</div>
<h3 class="text-xs tracking-wide uppercase">Starring</h3>
<div class="flex flex-col gap-1">
{#each remoteResource.credits.slice(0, 5) as a}
<div class="tracking-widest font-extralight text-sm">{a.name}</div>
{/each}
</div>
</div>
<slot name="page-controls" />
</div>
</div>
<style>
.youtube-container {
overflow: hidden;
width: 100%;
aspect-ratio: 16/9;
pointer-events: none;
}
.youtube-container iframe {
width: 300%;
height: 100%;
margin-left: -100%;
}
</style>

15
src/routes/components/SmallHorizontalPoster/PosterTag.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script>
import classNames from 'classnames';
export let value = '';
export let filled = false;
</script>
<div
class={classNames('border rounded p-[0px] px-1 text-[10px] font-medium', {
'text-zinc-200 border-zinc-500': !filled,
'bg-zinc-200 border-zinc-200 text-zinc-900': filled
})}
>
{value}
</div>

57
src/routes/components/SmallHorizontalPoster/SmallHorizontalPoster.svelte Normal file
View File

@@ -0,0 +1,57 @@
<script lang="ts">
import type { TmdbMovieFull } from '$lib/tmdb-api';
import { formatGenres, getRuntime } from '$lib/utils';
import classNames from 'classnames';
export let tmdbMovie: TmdbMovieFull;
export let available = true;
export let progress = 0;
export let progressType: 'watched' | 'downloading' = 'watched';
export let randomProgress = false;
if (randomProgress) {
progress = Math.random() > 0.3 ? Math.random() * 100 : 0;
}
const backdropUrl =
'https://www.themoviedb.org/t/p/original' +
tmdbMovie.images.backdrops.filter((b) => b.iso_639_1 === 'en')[0].file_path;
</script>
<div
style={"background-image: url('" + backdropUrl + "')"}
class="bg-center bg-cover h-40 w-72 rounded overflow-hidden relative drop-shadow-2xl"
>
<div style={'width: ' + progress + '%'} class="h-[2px] bg-zinc-200 bottom-0 absolute z-[1]" />
<div
on:click={() => window.open('/movie/' + tmdbMovie.id, '_self')}
class="h-full w-full opacity-0 hover:opacity-100 transition-opacity flex flex-col justify-between cursor-pointer p-2 px-3 relative z-[1] peer"
style={progress > 0 ? 'padding-bottom: 0.6rem;' : ''}
>
<div>
<h1 class="font-bold tracking-wider">{tmdbMovie.original_title}</h1>
<div class="text-xs text-zinc-300 tracking-wider font-medium">
{formatGenres(tmdbMovie.genres)}
</div>
</div>
<div class="flex justify-between items-end">
{#if progressType === 'watched'}
<div class="text-xs font-medium text-zinc-200">
{progress
? getRuntime(tmdbMovie.runtime - tmdbMovie.runtime * (progress / 100)) + ' left'
: getRuntime(tmdbMovie.runtime)}
</div>
{:else if progressType === 'downloading'}
<div class="text-xs font-medium text-zinc-200">
{Math.floor(progress) + '% Downloaded'}
</div>
{/if}
</div>
</div>
<div
class={classNames('absolute inset-0', {
'bg-darken opacity-0 peer-hover:opacity-100': available,
'bg-[#00000055] peer-hover:bg-darken': !available
})}
/>
</div>

78
src/routes/components/SmallPoster/SmallPoster.svelte Normal file
View File

@@ -0,0 +1,78 @@
<script lang="ts">
import { TmdbApi } from '$lib/tmdb-api';
import { onMount } from 'svelte';
export let tmdbId;
export let progress = 0;
export let randomProgress = false;
if (randomProgress) progress = Math.random() > 0.5 ? Math.round(Math.random() * 100) : 100;
export let type: 'movie' | 'tv' = 'movie';
let bg = '';
let title = 'Loading...';
onMount(() => {
TmdbApi.get('/' + type + '/' + tmdbId)
.then((res) => res.data)
.then((data: any) => {
bg = 'https://www.themoviedb.org/t/p/original/' + data.poster_path;
title = data.title;
});
});
</script>
<div class="group grid grid-cols-[2px_1fr_2px] grid-rows-[2px_1fr_2px]">
<div
style={'width: ' + progress + '%'}
class="h-full bg-zinc-200 opacity-100 group-hover:opacity-80 transition-opacity col-span-3"
/>
<div
transition-opacity
style={'height: ' + progress + '%'}
class="w-full bg-zinc-200 opacity-100 group-hover:opacity-80"
/>
<div
class="bg-center bg-cover aspect-[2/3] h-72 shadow-2xl m-1.5"
style={"background-image: url('" + bg + "')"}
>
<div class="w-full h-full hover:bg-darken transition-all flex">
<div
class="opacity-0 group-hover:opacity-100 transition-opacity p-2 flex flex-col justify-between flex-1 cursor-pointer"
>
<div>
<h1 class="font-bold text-lg tracking-wide">
{title}
</h1>
{#if type === 'movie'}
<h2 class="text-xs uppercase text-zinc-300"><b>December</b> 2022</h2>
{:else}
<h2 class="text-xs uppercase text-zinc-300">S1 <b>E2</b></h2>
{/if}
{#if progress}
<h2 class="mt-2 text-sm tracking-wide text-zinc-300"><b>30min</b> left</h2>
{/if}
</div>
<div class="flex flex-col gap-2">
<button
class="bg-white border-2 border-white hover:bg-amber-400 hover:border-amber-400 transition-colors text-zinc-900 px-8 py-2.5 uppercase tracking-widest font-extrabold cursor-pointer text-xs"
>Stream</button
>
<a
href={'/' + type + '/' + tmdbId}
class="border-2 border-white cursor-pointer transition-colors px-8 py-2.5 uppercase tracking-widest font-semibold text-xs hover:bg-amber-400 hover:text-black text-center"
>Details</a
>
</div>
</div>
</div>
</div>
<div
style={'height: ' + progress + '%'}
class="w-full bg-zinc-200 opacity-100 group-hover:opacity-80 transition-opacity self-end"
/>
<div
style={'width: ' + progress + '%'}
class="h-full bg-zinc-200 opacity-100 group-hover:opacity-80 transition-opacity col-span-3 justify-self-end"
/>
</div>