Skip to content

Commit

Permalink
feat: new season and episodes layout options & ui enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlkenD
AlkenD committed Jul 8, 2024
1 parent c8f85f1 commit 6505009
Show file tree
Hide file tree
Showing 6 changed files with 1,102 additions and 824 deletions.
2 changes: 1 addition & 1 deletion src/lib/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { IconName } from "../types";

const button = cva(
[
"rounded-2xl",
"rounded-xl",
"w-fit",
"font-semibold",
"flex",
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Cards/ContentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const ContentCard = ({ item, type = "movie" }: any) => {
isHover && "scale-105"
}`}
>
<div className="rounded-2xl aspect-video overflow-hidden relative">
<div className="rounded-2xl aspect-video overflow-hidden relative bg-zinc-700">
<img
className="object-cover h-full w-full group-hover:opacity-50 transition-opacity"
src={"https://image.tmdb.org/t/p/w1280" + item.backdrop_path}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/IconButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { IconName } from "../types";

const iconButton = cva(
[
"rounded-2xl",
"rounded-xl",
"w-fit",
"font-semibold",
"flex",
Expand Down
116 changes: 110 additions & 6 deletions src/lib/pages/TvInfoPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const TvInfoPage = () => {
/>
<div className="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-[#0E0E0E] via-[#0e0e0ed0] to-transparent"></div>
<div className="absolute bottom-0 px-[4.5rem] flex items-end space-x-4">
<div className="w-[200px] rounded-2xl overflow-hidden aspect-[9/12]">
<div className="w-[200px] rounded-xl overflow-hidden aspect-[9/12]">
<img
className="w-full h-full object-cover"
src={"https://image.tmdb.org/t/p/w1280" + tv.poster_path}
Expand All @@ -81,9 +81,9 @@ const TvInfoPage = () => {
<div className="line-clamp-2 max-w-[700px] text-sm">
{tv.overview}
</div>
<div className="flex space-x-4">
<div className="flex space-x-2">
<Button icon="PlayIcon" size="large">
Play Now
Play S1:E1
</Button>
<IconButton
variant="secondary"
Expand All @@ -101,8 +101,106 @@ const TvInfoPage = () => {
</div>
</div>
</div>
{/* Layout 1 Start */}
{/* <div className="px-[4.5rem]">
<div className="space-y-4 bg-zinc-700/20 shadow-[inset_0_1px_0_0_#ffffff1a] p-4 rounded-3xl">
<div className="flex-1 space-y-4">
<div className="flex space-x-4">
<div className="w-[200px] h-fit rounded-xl overflow-hidden aspect-[9/12]">
<img
className="w-full h-full object-cover"
src={`https://image.tmdb.org/t/p/w1280${
getSeason(tv.seasons, selectedSeason).poster_path
}`}
alt=""
/>
</div>
<div className="flex-1">
<div className="text-2xl font-semibold">
Season {getSeason(tv.seasons, selectedSeason).season_number} -{" "}
{getSeason(tv.seasons, selectedSeason).name}
</div>
<div className="text-white/60">
{getSeason(tv.seasons, selectedSeason).episode_count} Episodes
</div>
<div className="text-sm">
{getSeason(tv.seasons, selectedSeason).overview}
</div>
</div>
</div>
</div>
<div className="text-2xl font-semibold">Seasons & Episodes</div>
<div className="flex space-x-4">
<div className="max-h-[400px] w-fit text-sm h-fit overflow-y-scroll rounded-xl overflow-hidden bg-zinc-700/20 shadow-[inset_0_1px_0_0_#ffffff1a]">
<table className="table-auto text-left">
<thead className="sticky top-0 bg-zinc-500/20 backdrop-blur-xl text-white/60">
<tr>
<td className="px-4 py-2 shadow-[inset_0_1px_0_0_#ffffff1a]">
Season
</td>
<td className="py-2 shadow-[inset_0_1px_0_0_#ffffff1a]">
Episodes
</td>
<td className="px-4 py-2 shadow-[inset_0_1px_0_0_#ffffff1a]">
Name
</td>
</tr>
</thead>
<tbody className="max-h-[400px] h-fit overflow-scroll divide-y divide-zinc-700/20">
{tv.seasons.map((season: any) => (
<tr
className={`cursor-pointer transition-colors ${
selectedSeason === season.season_number
? "bg-emerald-500"
: "hover:bg-zinc-300/20"
}`}
key={season.season_number}
onClick={() => handleSelectSeason(season.season_number)}
>
<td className="px-4 py-2">S{season.season_number}</td>
<td className="py-2">{season.episode_count}</td>
<td className="px-4 py-2 w-[200px]">{season.name}</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="max-h-[400px] flex-1 text-sm h-fit overflow-y-scroll rounded-xl overflow-hidden bg-zinc-700/20 shadow-[inset_0_1px_0_0_#ffffff1a]">
<table className="w-full text-left">
<thead className="sticky top-0 bg-zinc-500/20 backdrop-blur-xl text-white/60">
<tr>
<td className="px-4 py-2 shadow-[inset_0_1px_0_0_#ffffff1a]">
Episode
</td>
<td className="px-4 py-2 shadow-[inset_0_1px_0_0_#ffffff1a]">
Name
</td>
</tr>
</thead>
<tbody className="max-h-[400px] h-fit overflow-scroll divide-y divide-zinc-700/20">
{seasonDetails &&
seasonDetails.episodes &&
seasonDetails.episodes.map((episode: any) => (
<tr
className={`cursor-pointer transition-colors hover:bg-zinc-300/20`}
key={episode.episode_number}
>
<td className="px-4 py-2 w-[100px]">
E{episode.episode_number}
</td>
<td className="px-4 py-2">{episode.name}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div> */}
{/* Layout 1 End */}
{/* Layout 2 Start */}
<div className="px-[4.5rem] flex space-x-8">
<div className="max-h-[400px] h-fit overflow-y-scroll rounded-2xl overflow-hidden bg-zinc-700/20 shadow-[inset_0_1px_0_0_#ffffff1a]">
<div className="max-h-[400px] text-sm h-fit overflow-y-scroll rounded-2xl overflow-hidden bg-zinc-700/20 shadow-[inset_0_1px_0_0_#ffffff1a]">
<table className="table-auto text-left">
<thead className="sticky top-0 bg-zinc-500/20 backdrop-blur-xl text-white/60">
<tr>
Expand All @@ -120,7 +218,11 @@ const TvInfoPage = () => {
<tbody className="max-h-[400px] h-fit overflow-scroll divide-y divide-zinc-700/20">
{tv.seasons.map((season: any) => (
<tr
className="hover:bg-zinc-300/20 cursor-pointer transition-colors"
className={`cursor-pointer transition-colors ${
selectedSeason === season.season_number
? "bg-emerald-500"
: "hover:bg-zinc-300/20"
}`}
key={season.season_number}
onClick={() => handleSelectSeason(season.season_number)}
>
Expand Down Expand Up @@ -199,7 +301,7 @@ const TvInfoPage = () => {
delay: index * 0.05,
}}
>
<div className="aspect-video bg-white rounded-2xl relative overflow-hidden">
<div className="aspect-video bg-zinc-700 rounded-2xl relative overflow-hidden">
<div className="absolute p-2 top-0 left-0">
<Chip>
S{episode.season_number}:E{index + 1}
Expand All @@ -213,6 +315,7 @@ const TvInfoPage = () => {
}
alt=""
/>
<div className="absolute top-0 left-0 w-full h-full border rounded-2xl border-zinc-400/20 transition-colors"></div>
</div>
<div>
<div className="text-sm">{episode.name}</div>
Expand All @@ -223,6 +326,7 @@ const TvInfoPage = () => {
)}
</AnimatePresence>
</div>
{/* Layout 2 End */}
<div className="px-[4.5rem] space-y-4">
<div className="text-2xl">Cast</div>
<div className="flex space-x-4 overflow-x-scroll">
Expand Down
Loading

0 comments on commit 6505009

Please sign in to comment.