+ import { TMDB_IMAGES_ORIGINAL, TMDB_POSTER_SMALL } from '$lib/constants';
+ import classNames from 'classnames';
+ import { ChevronLeft, ChevronRight, DotFilled } from 'radix-icons-svelte';
+ import Button from '../Button.svelte';
+ import IconButton from '../IconButton.svelte';
+ import { formatMinutesToTime } from '$lib/utils';
+ import YoutubePlayer from '../YoutubePlayer.svelte';
+ import { settings } from '$lib/stores/settings.store';
+ import { onMount } from 'svelte';
+ import { fade, fly } from 'svelte/transition';
+
+ const TRAILER_TIMEOUT = 3000;
+ const TRAILER_LOAD_TIME = 1000;
+ const ANIMATION_DURATION = 150;
+
+ export let tmdbId: number;
+ export let type: 'movie' | 'series';
+
+ export let title: string;
+ export let genres: string[];
+ export let runtime: number;
+ export let releaseDate: Date;
+ export let tmdbRating: number;
+
+ export let trailerId: string | undefined = undefined;
+ export let director: string | undefined = undefined;
+
+ export let backdropUri: string;
+ export let posterUri: string;
+
+ export let showcaseIndex: number;
+ export let showcaseLength: number;
+ export let onPrevious: () => void;
+ export let onNext: () => void;
+
+ let trailerMounted = false;
+ let trailerMountedTime = 0;
+ let trailerVisible = false;
+ let focusTrailer = false;
+ let UIVisible = true;
+ $: UIVisible = !(focusTrailer && trailerVisible);
+
+ let tmdbUrl = `https://www.themoviedb.org/${type}/${tmdbId}`;
+ let youtubeUrl = `https://www.youtube.com/watch?v=${trailerId}`;
+
+ let timeout: NodeJS.Timeout;
+ $: {
+ tmdbId;
+ trailerMounted = false;
+ trailerMountedTime = 0;
+ trailerVisible = false;
+ UIVisible = true;
+
+ timeout = setTimeout(() => {
+ trailerMounted = true;
+ trailerMountedTime = Date.now();
+
+ timeout = setTimeout(() => {
+ trailerVisible = true;
+ }, TRAILER_LOAD_TIME);
+ }, TRAILER_TIMEOUT - TRAILER_LOAD_TIME);
+ }
+
+ onMount(() => {
+ return () => clearTimeout(timeout);
+ });
+
+
+
+
+ {#if UIVisible}
+
+
+
+
{releaseDate.getFullYear()}
+
+
{formatMinutesToTime(runtime)}
+
+
{tmdbRating.toFixed(1)} TMDB
+
+
= 15
+ })}
+ in:fly|global={{ y: -10, delay: ANIMATION_DURATION, duration: ANIMATION_DURATION }}
+ out:fly|global={{ y: 10, duration: ANIMATION_DURATION }}
+ >
+ {title}
+
+
+
+ {#each genres.slice(0, 3) as genre}
+
+ {genre}
+
+ {/each}
+
+
+
+
+
+
+
+
Release Date
+
+ {releaseDate.toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ })}
+
+
+ {#if director}
+
+
Directed By
+
{director}
+
+ {/if}
+
+
+
+ {/if}
+
+ {#if trailerId}
+
+ {/if}
+
+
+
+ {#if !trailerVisible}
+
+ {/if}
+ {#if trailerId && $settings.autoplayTrailers && trailerMounted}
+
+
+
+ {/if}
+ {#if UIVisible}
+
+ {:else if !UIVisible}
+
+ {/if}
+
+
+ {#if UIVisible}
+
+ {#each Array.from({ length: showcaseLength }, (_, i) => i) as i}
+ {#if i === showcaseIndex}
+
+ {:else}
+
+ {/if}
+ {/each}
+
+ {/if}
+
diff --git a/src/lib/components/YoutubePlayer.svelte b/src/lib/components/YoutubePlayer.svelte
new file mode 100644
index 0000000..20992bf
--- /dev/null
+++ b/src/lib/components/YoutubePlayer.svelte
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b2bc8b2..3d0f2c9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,10 +3,9 @@
import Carousel from '$lib/components/Carousel/Carousel.svelte';
import CarouselPlaceholderItems from '$lib/components/Carousel/CarouselPlaceholderItems.svelte';
import Poster from '$lib/components/Poster/Poster.svelte';
- import ResourceDetails from '$lib/components/ResourceDetails/ResourceDetails.svelte';
+ import TitleShowcase from '$lib/components/TitleShowcase/TitleShowcase.svelte';
import { library } from '$lib/stores/library.store';
import type { ComponentProps } from 'svelte';
- import ResourceDetailsControls from './ResourceDetailsControls.svelte';
const tmdbPopularMoviesPromise = getTmdbPopularMovies()
.then((movies) => Promise.all(movies.map((movie) => getTmdbMovie(movie.id || 0))))
@@ -62,30 +61,26 @@
{:then movies}
{@const movie = movies[showcaseIndex]}
-
g.name || '') || []}
- runtime={movie?.runtime || 0}
- tmdbRating={movie?.vote_average || 0}
- starring={movie?.credits?.cast?.slice(0, 5) || []}
- videos={movie.videos?.results || []}
- backdropPath={movie?.backdrop_path || ''}
- >
- g.name || '') || []}
+ runtime={movie?.runtime || 0}
+ releaseDate={new Date(movie?.release_date || Date.now())}
+ tmdbRating={movie?.vote_average || 0}
+ trailerId={movie?.videos?.results?.find((v) => v.site === 'YouTube' && v.type === 'Trailer')
+ ?.key}
+ director={movie?.credits?.crew?.find((c) => c.job === 'Director')?.name}
+ backdropUri={movie?.backdrop_path || ''}
+ posterUri={movie?.poster_path || ''}
{onPrevious}
- index={showcaseIndex}
- length={movies.length}
+ {onNext}
+ {showcaseIndex}
+ showcaseLength={movies.length}
/>
-
-{:catch err}
- Error occurred {JSON.stringify(err)}
+ {/key}
{/await}