From e25a5d08b74b28dc1b2354fcb64cf225c1eab208 Mon Sep 17 00:00:00 2001 From: zephex-alt <166333351+zephex-alt@users.noreply.github.com> Date: Mon, 6 May 2024 21:37:34 +0000 Subject: added MOVIES support. SERIES support coming soon! --- src/app/movies/[id]/page.jsx | 117 +++++++++++++++++++++++++ src/app/movies/components/popular.jsx | 55 ++++++++++++ src/app/movies/components/search.jsx | 38 ++++++++ src/app/movies/components/search_2.jsx | 54 ++++++++++++ src/app/movies/components/trending.jsx | 54 ++++++++++++ src/app/movies/components/video_player.jsx | 60 +++++++++++++ src/app/movies/page.jsx | 18 ++++ src/app/movies/styles/info.module.css | 119 ++++++++++++++++++++++++++ src/app/movies/styles/page.module.css | 3 + src/app/movies/styles/pop_trend.module.css | 69 +++++++++++++++ src/app/movies/styles/search.module.css | 57 ++++++++++++ src/app/movies/styles/video_player.module.css | 25 ++++++ 12 files changed, 669 insertions(+) create mode 100644 src/app/movies/[id]/page.jsx create mode 100644 src/app/movies/components/popular.jsx create mode 100644 src/app/movies/components/search.jsx create mode 100644 src/app/movies/components/search_2.jsx create mode 100644 src/app/movies/components/trending.jsx create mode 100644 src/app/movies/components/video_player.jsx create mode 100644 src/app/movies/page.jsx create mode 100644 src/app/movies/styles/info.module.css create mode 100644 src/app/movies/styles/page.module.css create mode 100644 src/app/movies/styles/pop_trend.module.css create mode 100644 src/app/movies/styles/search.module.css create mode 100644 src/app/movies/styles/video_player.module.css (limited to 'src') diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx new file mode 100644 index 0000000..1baec1f --- /dev/null +++ b/src/app/movies/[id]/page.jsx @@ -0,0 +1,117 @@ +import styles from "../styles/info.module.css"; +import { getInfoURL } from "../../../../utils/movie_urls"; +import Image from "next/image"; +import { PiThumbsUpFill } from "react-icons/pi"; +import { FaRegCheckCircle } from "react-icons/fa"; +import { RxDividerVertical } from "react-icons/rx"; +import { FaDollarSign } from "react-icons/fa"; +import { FaSackDollar } from "react-icons/fa6"; +import VIDEO_PLAYER from "../components/video_player"; + +export default async function MOVIE_INFO({ params }) { + const id = params.id; + const data = await get_movie_info(id); + + return ( +
+
+
+
+ Movie Poster +
+

{data.title || "Not found"}

+

+ {data.tagline || "Not found"} +

+

+ {data.overview || "Not found"} +

+
+
+
+
+ + +

{data.vote_average || "Not found"}

+ + + + + + +

{data.vote_count || "Not found"}

+ +
+
+ + +

+ $ + {data.revenue.toLocaleString() || + "Not found"} +

+ + + + + + +

+ $ + {data.budget.toLocaleString() || + "Not found"} +

+ +
+
+ +

Release Date: {data.release_date}

+ +
+
+ {data.genres.map((item) => ( +

{item.name || "Not found"}

+ ))} +
+
+
+ +

+ NOTE: Please wait for some time for the video to + load. If it buffers for a long time, then try + chanding the server. If the issue persists, please + check your internet connection. +

+
+
+
+
+
+
+ ); +} + +const get_movie_info = async (id) => { + const res = await fetch(getInfoURL(id), { next: { revalidate: 21620 } }); + const data = await res.json(); + return data; +}; diff --git a/src/app/movies/components/popular.jsx b/src/app/movies/components/popular.jsx new file mode 100644 index 0000000..0773780 --- /dev/null +++ b/src/app/movies/components/popular.jsx @@ -0,0 +1,55 @@ +import { POPULAR } from "../../../../utils/movie_urls"; +import styles from "../styles/pop_trend.module.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function POPULAR_MOVIES() { + const data = await get_popular(); + + return ( +
+

Popular Movies

+
+ {data && + data.results && + data.results.slice(0, 16).map((item, index) => ( + +
+
+ Movie Poster +

{item.title}

+
+
+ + ))} +
+
+ ); +} + +const get_popular = async () => { + const res = await fetch(POPULAR, { next: { revalidate: 21600 } }); + const data = await res.json(); + return data; +}; diff --git a/src/app/movies/components/search.jsx b/src/app/movies/components/search.jsx new file mode 100644 index 0000000..6514b76 --- /dev/null +++ b/src/app/movies/components/search.jsx @@ -0,0 +1,38 @@ +"use client"; + +import { useState } from "react"; +import styles from "../styles/search.module.css"; +import { FaSearch } from "react-icons/fa"; +import SearchResults from "./search_2"; + +export default function SEARCH_COMPONENT() { + const [title, setTitle] = useState(""); + const [result, setResults] = useState(null); + + const fetch_results = async (title) => { + setResults(await SearchResults(title)); + }; + + return ( +
+
+ + setTitle(event.target.value)} + onKeyDown={async (e) => { + if ((e.key === "Enter" || e.code === 13) && title) { + await fetch_results(e.target.value); + } + }} + > +
+ +
{result}
+
+ ); +} diff --git a/src/app/movies/components/search_2.jsx b/src/app/movies/components/search_2.jsx new file mode 100644 index 0000000..1c2ff88 --- /dev/null +++ b/src/app/movies/components/search_2.jsx @@ -0,0 +1,54 @@ +"use server"; + +import { SEARCH } from "../../../../utils/movie_urls"; +import Image from "next/image"; +import Link from "next/link"; +import styles from "../styles/search.module.css"; + +const SearchResults = async (title) => { + const data = await get_search_results(title); + return ( +
+ {data && + data.results && + data.results.map((item, index) => { + if (item.poster_path) { + return ( + +
+

{item.title || item.original_title}

+ Movie Poster +
+ + ); + } + })} +
+ ); +}; + +const get_search_results = async (title) => { + const res = await fetch(SEARCH + title, { next: { revalidate: 21600 } }); + const data = await res.json(); + return data; +}; + +export default SearchResults; diff --git a/src/app/movies/components/trending.jsx b/src/app/movies/components/trending.jsx new file mode 100644 index 0000000..b12d068 --- /dev/null +++ b/src/app/movies/components/trending.jsx @@ -0,0 +1,54 @@ +import { TRENDING } from "../../../../utils/movie_urls"; +import styles from "../styles/pop_trend.module.css"; +import Link from "next/link"; +import Image from "next/image"; + +export default async function TREDNING_MOVIES() { + const data = await get_popular(); + + return ( +
+

Trending Movies

+
+ {data && + data.results && + data.results.slice(0, 16).map((item, index) => ( + +
+
+ Movie Poster +

{item.title}

+
+
+ + ))} +
+
+ ); +} + +const get_popular = async () => { + const res = await fetch(TRENDING, { next: { revalidate: 21620 } }); + const data = await res.json(); + return data; +}; diff --git a/src/app/movies/components/video_player.jsx b/src/app/movies/components/video_player.jsx new file mode 100644 index 0000000..15db6a8 --- /dev/null +++ b/src/app/movies/components/video_player.jsx @@ -0,0 +1,60 @@ +"use client"; + +import styles from "../styles/video_player.module.css"; +import { useState, useEffect } from "react"; + +export default function VIDEO_PLAYER({ id: id }) { + const [frame, setFrame] = useState(null); + + useEffect(() => { + make_player(`https://vidsrc.pro/embed/movie/${id}`); + }, []); + + function make_player(url) { + setFrame( + + ); + } + + return ( +
+
+ + + + +
+ {frame} +
+ ); +} diff --git a/src/app/movies/page.jsx b/src/app/movies/page.jsx new file mode 100644 index 0000000..24c2ed9 --- /dev/null +++ b/src/app/movies/page.jsx @@ -0,0 +1,18 @@ +import POPULAR_MOVIES from "./components/popular"; +import TREDNING_MOVIES from "./components/trending"; +import SEARCH_COMPONENT from "./components/search"; +import styles from "./styles/page.module.css"; + +export default async function MOVIE_HOME() { + return ( +
+ + +
+ +
+
+
+
+ ); +} diff --git a/src/app/movies/styles/info.module.css b/src/app/movies/styles/info.module.css new file mode 100644 index 0000000..6b7d8e6 --- /dev/null +++ b/src/app/movies/styles/info.module.css @@ -0,0 +1,119 @@ +.Main { + margin-top: 60px; + color: white; +} + +.MovieInfoSection { + background-color: #1f1f1fcc; + backdrop-filter: blur(10px); +} + +.MovieInfo { + max-width: 60%; + margin: 0 auto; +} + +.HeroSection { + display: flex; + align-items: center; +} + +.HeroSection img { + border-radius: 0.5rem; +} + +.HeroTitle { + display: flex; + flex-direction: column; + margin-left: 1rem; + padding: 0.5rem; +} + +.HeroTitle h2 { + font-size: 28px; + margin: 0; +} + +.tagline { + margin: 0.2rem 0 0 0; + font-size: 12px; +} + +.tagline span { + background-color: #12121286; + padding: 0.2rem; + border-radius: 0.5rem; +} + +.MovieDescription { + font-size: 18px; + margin: 0.2rem 0 0 0; +} + +.OtherInfo { + display: flex; + flex-direction: column; + align-items: center; + margin: 1rem 0 0 0; + background-color: #12121286; + padding: 1rem; + border-radius: 0.5rem; +} + +.Ratings { + display: flex; +} + +.divider { + margin: 0 0.5rem 0 0.5rem; +} + +.Ratings span { + display: flex; + align-items: center; + justify-content: center; +} + +.Ratings p { + margin: 0 0 0 0.4rem; +} + +.Money { + margin: 0.5rem 0 0 0; + display: flex; +} + +.Money p { + margin: 0 0 0 0.4rem; +} + +.Money span { + display: flex; + align-items: center; +} + +.Genre { + display: flex; +} + +.Genre p { + background-color: #12121257; + margin: 0.5rem 0.2rem 0 0.2rem; + padding: 0.3rem; + border-radius: 0.5rem; +} + +@media screen and (max-width: 768px) { + .MovieInfo { + max-width: 100%; + } + + .VideoPlayer { + width: 98%; + margin: 1rem auto; + } + + .VideoPlayer iframe { + height: 250px; + } +} diff --git a/src/app/movies/styles/page.module.css b/src/app/movies/styles/page.module.css new file mode 100644 index 0000000..5cba0a1 --- /dev/null +++ b/src/app/movies/styles/page.module.css @@ -0,0 +1,3 @@ +.MovieMain { + margin-top: 65px; +} diff --git a/src/app/movies/styles/pop_trend.module.css b/src/app/movies/styles/pop_trend.module.css new file mode 100644 index 0000000..f9581c4 --- /dev/null +++ b/src/app/movies/styles/pop_trend.module.css @@ -0,0 +1,69 @@ +.Main { + color: white; + margin-left: 0.2rem; + margin-right: 0.2rem; +} + +.Main h1 { + margin: 0 0 0.5rem 0; + text-align: center; + color: transparent; + background: linear-gradient( + 90deg, + var(--neon-green) 40%, + var(--light-green) 60%, + var(--neon-yellow) 80%, + var(--soft-purple) 100% + ); + background-size: 60% 50%; + background-clip: text; +} + +.MovieContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + grid-gap: 0.5rem; + align-items: center; +} + +.MovieContainer::-webkit-scrollbar { + height: 0; +} + +.MovieEntry { + background-color: #1f1f1fb2; + padding: 0.5rem; + /* border-radius: 0.5rem; */ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + cursor: pointer; + backdrop-filter: blur(5px); +} + +.MovieEntry img { + border-radius: 0.5rem; +} + +.MovieEntry p { + width: 190px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-align: center; + margin: 0.3rem 0 0 0; +} + +@media screen and (max-width: 768px) { + .Main h1 { + font-size: 24px; + text-align: start; + } + + .MovieContainer { + display: flex; + overflow-x: auto; + overflow-y: hidden; + } +} diff --git a/src/app/movies/styles/search.module.css b/src/app/movies/styles/search.module.css new file mode 100644 index 0000000..e5ed3ee --- /dev/null +++ b/src/app/movies/styles/search.module.css @@ -0,0 +1,57 @@ +.Main { + margin: 0 0.2rem 0 0.2rem; +} + +.InputContainer { + display: flex; + align-items: center; + background-color: #121212; + padding: 0.2rem; + width: 40vw; + border-radius: 0.5rem; +} + +.SearchIcon { + margin-left: 0.4rem; +} + +.InputContainer input { + background-color: transparent; + outline: none; + border: none; + padding: 0.4rem; + font-family: "Lexend Deca", serif; + margin-left: 0.2rem; + font-size: large; + color: white; + width: 100%; +} + +/* Search Results */ + +.MovieSearchResultsContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: 0.5rem; + align-items: center; + margin: 0.2rem 0.2rem 0 0.2rem; +} + +.MovieEntry { + display: flex; + align-items: center; + justify-content: space-between; + color: white; + backdrop-filter: blur(10px); + padding: 0.4rem; + background-color: #1212129f; +} + +.MovieEntry img { + border-radius: 0.5rem; +} + +.MovieEntry p { + margin: 0 0.2rem 0 0; + font-size: 18px; +} diff --git a/src/app/movies/styles/video_player.module.css b/src/app/movies/styles/video_player.module.css new file mode 100644 index 0000000..aa65b07 --- /dev/null +++ b/src/app/movies/styles/video_player.module.css @@ -0,0 +1,25 @@ +.VideoContainer { + margin: 0.5rem 0 0 0; +} + +.VideoContainer button { + font-family: "Lexend Deca", serif; + outline: none; + border: none; + background-color: #121212be; + + color: white; + margin-right: 0.2rem; + padding: 0.5rem; + border-radius: 0.5rem; + cursor: pointer; +} + +.VideoPlayer { + width: 100%; + aspect-ratio: "16/9"; + border: none; + outline: none; + border-radius: 0.5rem; + margin: 0.5rem 0 0 0; +} -- cgit v1.2.3