Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add top rated section #505

Merged
merged 2 commits into from
Jul 11, 2024
Merged

feat: add top rated section #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1bc4dc
feat: add top rated section
AyushSehrawat Jul 11, 2024
50662ee
chore: format files
AyushSehrawat Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/lib/components/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<header
id="header"
class={clsx(
'fixed top-0 z-50 flex w-full items-center justify-between bg-transparent p-8 transition-all duration-300 ease-in-out md:px-24 lg:px-32',
'fixed top-0 z-[99] flex w-full items-center justify-between bg-transparent p-8 transition-all duration-300 ease-in-out md:px-24 lg:px-32',
{
'text-background dark:text-foreground': darkWhiteText
},
Expand Down
11 changes: 11 additions & 0 deletions frontend/src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script lang="ts">
import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';

type $$Props = AspectRatioPrimitive.Props;

export let ratio: $$Props['ratio'] = 4 / 3;
</script>

<AspectRatioPrimitive.Root {ratio} {...$$restProps}>
<slot />
</AspectRatioPrimitive.Root>
3 changes: 3 additions & 0 deletions frontend/src/lib/components/ui/aspect-ratio/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Root from './aspect-ratio.svelte';

export { Root, Root as AspectRatio };
129 changes: 122 additions & 7 deletions frontend/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
import { Button } from '$lib/components/ui/button';
import { roundOff } from '$lib/helpers';
import HomeItems from '$lib/components/home-items.svelte';
import * as Select from '$lib/components/ui/select';

let curTopRatedType = 'movie';

export let data: PageData;
</script>
Expand All @@ -34,9 +37,7 @@
]}
class="h-[70vh] overflow-hidden md:h-[100vh]"
>
<div class="absolute top-0 z-50 w-full">
<Header darkWhiteText={true} />
</div>
<Header darkWhiteText={true} />
<Carousel.Content class="h-full">
{#each data.nowPlaying.data.results as nowPlaying, i}
{#if i <= 9}
Expand All @@ -48,9 +49,10 @@
class="h-[70vh] w-full select-none object-cover object-center md:h-[100vh]"
loading="lazy"
/>
<div class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"></div>
<div
class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"
></div>
<div class="absolute inset-0 z-[2] mt-16 flex flex-col gap-4 md:mb-56">
<!-- TODO: Maybe change m-4 to padding? -->
<div class="ml-4 flex h-full w-full flex-col justify-end gap-2 p-8 md:px-24 lg:px-32">
<div class="w-full max-w-2xl select-none">
<h1 class="break-words text-3xl font-medium leading-tight md:text-4xl">
Expand Down Expand Up @@ -104,7 +106,7 @@
</Carousel.Root>

<div class="flex w-full flex-col items-start gap-4 p-8 md:-mt-56">
<div class="z-50 flex w-full items-center gap-2 text-white md:px-16 lg:px-24">
<div class="z-40 flex w-full items-center gap-2 text-white md:px-16 lg:px-24">
<div class="rounded-md bg-primary p-2">
<Flame class="size-4" />
</div>
Expand Down Expand Up @@ -143,7 +145,9 @@
/></span
>
</div>
<div class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"></div>
<div
class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"
></div>
<div class="absolute inset-0 z-[2] flex flex-col justify-end gap-2 p-4">
<div class="flex items-center gap-2">
<Clapperboard class="size-4" />
Expand Down Expand Up @@ -176,3 +180,114 @@
<HomeItems name="Movies" data={data.trendingMovies.data} type="movie" />

<HomeItems name="Shows" data={data.trendingShows.data} type="tv" />

<div class="flex h-full w-full flex-col">
<div class="flex w-full items-center justify-between p-8 md:px-24 lg:px-32">
<div class="flex items-center gap-2">
<div class="rounded-md bg-primary p-2">
<Star class="size-4" />
</div>
<h2 class="text-xl font-medium md:text-2xl">Top Rated</h2>
</div>
<Select.Root
portal={null}
selected={{
value: curTopRatedType,
label: curTopRatedType === 'movie' ? 'Movies' : 'Shows'
}}
onSelectedChange={(selected) => {
curTopRatedType = String(selected?.value);
}}
>
<Select.Trigger class="w-28 text-sm">
<Select.Value placeholder="Select type" />
</Select.Trigger>
<Select.Content>
<Select.Item value="movie" label="Movies">Movies</Select.Item>
<Select.Item value="tv" label="Shows">Shows</Select.Item>
</Select.Content>
</Select.Root>
</div>

<div class="relative mb-16 w-full md:px-24 lg:px-32">
<Carousel.Root
plugins={[
Autoplay({
delay: 5000
})
]}
class="h-full w-full select-none overflow-hidden rounded-xl md:rounded-2xl"
>
<Carousel.Content class="h-full w-full">
{@const topRatedData =
curTopRatedType === 'movie' ? data.moviesTopRated : data.showsTopRated}
{#each topRatedData.data.results as showsTopRated, i}
<Carousel.Item
class="relative ml-2 flex w-full min-w-full basis-full flex-col pl-0 md:flex-row md:p-10 xl:p-16"
>
<div
class="absolute left-0 top-0 z-[-1] h-full w-full overflow-hidden object-cover opacity-50 blur-3xl"
>
<img
alt={showsTopRated.title || showsTopRated.name}
src="https://image.tmdb.org/t/p/w780{showsTopRated.poster_path}"
class="h-full w-full object-cover object-center"
/>
</div>
<div
class="mx-auto flex w-full max-w-3xl flex-col gap-2 p-5 pb-6 pt-3 tracking-wide sm:p-8 md:w-1/2 lg:w-[45%] lg:gap-4 lg:pt-12"
>
<p class="text-2xl font-medium !leading-tight lg:text-4xl">
{showsTopRated.title || showsTopRated.name}
</p>
<div class="flex gap-3 text-xs">
<span class="flex items-center gap-[2px]">
<Star class="size-4" />
<p>{roundOff(showsTopRated.vote_average)}</p>
</span>
<span class="uppercase"> tv </span>
<span>
{showsTopRated.release_date || showsTopRated.first_air_date}
</span>
<span class="uppercase">
{showsTopRated.original_language}
</span>
</div>
<div class="line-clamp-3 text-xs text-zinc-200 lg:line-clamp-5 lg:text-sm">
{showsTopRated.overview}
</div>
<div class="mt-3 flex flex-wrap items-center gap-2 lg:gap-3">
<Button
size="lg"
variant="default"
class="flex items-center gap-2"
href="/tv/{showsTopRated.id}"
>
<Play class="h-4 w-4" />
<span>Request</span>
</Button>
<Button
size="lg"
variant="ghost"
class="flex items-center gap-2"
href="/tv/{showsTopRated.id}"
>
<Info class="h-4 w-4" />
<span>Details</span>
</Button>
</div>
</div>
<div class="order-first mx-auto h-full w-full max-w-3xl md:order-none md:w-1/2">
<img
alt={showsTopRated.title || showsTopRated.name}
src="https://image.tmdb.org/t/p/w780{showsTopRated.backdrop_path}"
loading="lazy"
class="aspect-[16/11] h-full w-full rounded-2xl object-cover lg:aspect-video"
/>
</div>
</Carousel.Item>
{/each}
</Carousel.Content>
</Carousel.Root>
</div>
</div>
Loading