From b1f4f412059760d85f531c3d6e2ee626c9002d28 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Mon, 18 Mar 2024 14:03:32 +0530 Subject: fixes: change the file extension to .jsx and fixed the video player sizes for tablets --- src/app/header/header.js | 27 ------- src/app/header/header.jsx | 27 +++++++ src/app/info/[id]/page.js | 49 ------------ src/app/info/[id]/page.jsx | 49 ++++++++++++ src/app/info/page.js | 11 --- src/app/info/page.jsx | 11 +++ src/app/kdrama/kdrama.css | 9 +-- src/app/kdrama/page.js | 161 --------------------------------------- src/app/kdrama/page.jsx | 161 +++++++++++++++++++++++++++++++++++++++ src/app/layout.js | 25 ------ src/app/layout.jsx | 25 ++++++ src/app/page.js | 21 ----- src/app/page.jsx | 21 +++++ src/app/page.module.css | 11 +++ src/app/recent/page.js | 44 ----------- src/app/recent/page.jsx | 44 +++++++++++ src/app/search/page.js | 92 ---------------------- src/app/search/page.jsx | 92 ++++++++++++++++++++++ src/app/top-airing/page.js | 44 ----------- src/app/top-airing/page.jsx | 44 +++++++++++ src/app/video/[animeId]/page.js | 46 ----------- src/app/video/[animeId]/page.jsx | 46 +++++++++++ 22 files changed, 535 insertions(+), 525 deletions(-) delete mode 100644 src/app/header/header.js create mode 100644 src/app/header/header.jsx delete mode 100644 src/app/info/[id]/page.js create mode 100644 src/app/info/[id]/page.jsx delete mode 100644 src/app/info/page.js create mode 100644 src/app/info/page.jsx delete mode 100644 src/app/kdrama/page.js create mode 100644 src/app/kdrama/page.jsx delete mode 100644 src/app/layout.js create mode 100644 src/app/layout.jsx delete mode 100644 src/app/page.js create mode 100644 src/app/page.jsx delete mode 100644 src/app/recent/page.js create mode 100644 src/app/recent/page.jsx delete mode 100644 src/app/search/page.js create mode 100644 src/app/search/page.jsx delete mode 100644 src/app/top-airing/page.js create mode 100644 src/app/top-airing/page.jsx delete mode 100644 src/app/video/[animeId]/page.js create mode 100644 src/app/video/[animeId]/page.jsx (limited to 'src/app') diff --git a/src/app/header/header.js b/src/app/header/header.js deleted file mode 100644 index bc4a019..0000000 --- a/src/app/header/header.js +++ /dev/null @@ -1,27 +0,0 @@ -import Link from "next/link"; - -export default function Header() { - return ( -

- -

- Dramalama -

- -

Kdrama

- - -

Anime

- -

- ); -} diff --git a/src/app/header/header.jsx b/src/app/header/header.jsx new file mode 100644 index 0000000..bc4a019 --- /dev/null +++ b/src/app/header/header.jsx @@ -0,0 +1,27 @@ +import Link from "next/link"; + +export default function Header() { + return ( +

+ +

+ Dramalama +

+ +

Kdrama

+ + +

Anime

+ +

+ ); +} diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js deleted file mode 100644 index 5048612..0000000 --- a/src/app/info/[id]/page.js +++ /dev/null @@ -1,49 +0,0 @@ -import "../info.css"; -import Image from "next/image"; -import Link from "next/link"; - -export default async function AnimeInfo({ params }) { - let animeID = params.id; - - const info = await getAnimeInfo(animeID); - - return ( -

- {info && ( -

{info.title}

{info.description}

- )} - -

- {info && - info.episodes.map((item, index) => ( - - - - ))} -

- ); -} - -async function getAnimeInfo(anime_id) { - const res = await fetch( - "https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id - ); - const data = res.json(); - return data; -} diff --git a/src/app/info/[id]/page.jsx b/src/app/info/[id]/page.jsx new file mode 100644 index 0000000..5048612 --- /dev/null +++ b/src/app/info/[id]/page.jsx @@ -0,0 +1,49 @@ +import "../info.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function AnimeInfo({ params }) { + let animeID = params.id; + + const info = await getAnimeInfo(animeID); + + return ( +

+ {info && ( +

{info.title}

{info.description}

+ )} + +

+ {info && + info.episodes.map((item, index) => ( + + + + ))} +

+ ); +} + +async function getAnimeInfo(anime_id) { + const res = await fetch( + "https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id + ); + const data = res.json(); + return data; +} diff --git a/src/app/info/page.js b/src/app/info/page.js deleted file mode 100644 index 9004ade..0000000 --- a/src/app/info/page.js +++ /dev/null @@ -1,11 +0,0 @@ -import "./info.css"; - -export default function Info() { - return ( -

- This is the anime info page. This page will display information about the queried anime when anime id is passed along the url. -

- ); -} diff --git a/src/app/info/page.jsx b/src/app/info/page.jsx new file mode 100644 index 0000000..9004ade --- /dev/null +++ b/src/app/info/page.jsx @@ -0,0 +1,11 @@ +import "./info.css"; + +export default function Info() { + return ( +

+ This is the anime info page. This page will display information about the queried anime when anime id is passed along the url. +

+ ); +} diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css index aa559db..9b8617f 100644 --- a/src/app/kdrama/kdrama.css +++ b/src/app/kdrama/kdrama.css @@ -123,7 +123,7 @@ .videoContainer { display: none; - max-width: 50%; + max-width: 60%; margin: 10px auto; justify-content: center; border-style: dotted; @@ -139,7 +139,6 @@ justify-content: space-between; align-items: center; margin: 0px auto; - width: 950px; } .dramaTitle { @@ -202,12 +201,12 @@ .videoContainer { max-width: 70%; } - + } @media screen and (max-width: 1024px) { .videoContainer { - max-width: 90%; + max-width: 95%; } } @@ -227,7 +226,7 @@ .sC { width: 70%; } -} +} @media (prefers-color-scheme: dark) { .navbar input { diff --git a/src/app/kdrama/page.js b/src/app/kdrama/page.js deleted file mode 100644 index 129c913..0000000 --- a/src/app/kdrama/page.js +++ /dev/null @@ -1,161 +0,0 @@ -"use client"; - -import "./kdrama.css"; - -import { useState } from "react"; -import ReactPlayer from "react-player"; -import Image from "next/image"; -import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library - -import { - fetchAnimeInfo, - fetchDramaInfo, - fetchVideoLinks, -} from "./api/fetchAnime.js"; - -export default function Kdrama() { - const [searchTitle, setSearchTitle] = useState(""); - const [searchedDrama, setSearchedDrama] = useState(null); - async function handleKeyPresses(event) { - if ( - (event.code === "Enter" || - event.code === 13 || - event.key === "Enter") && - searchTitle != "" - ) { - const info = await fetchAnimeInfo(searchTitle); - setSearchedDrama(info); - document.getElementById("popup").style.display = "flex"; - } - } - - const [details, setDetails] = useState(null); - async function handleDramaSearch(input) { - const drama_info = await fetchDramaInfo(input); - setDetails(drama_info); - document.getElementById("intro").style.display = "none"; - document.getElementById("videoContainer").style.display = "flex"; - } - - const [videoLink, setVideoLink] = useState(null); - const [episodeNo, setEpisodeNo] = useState(""); - async function get_video_link(ep_id, drama_id, episode) { - const link = await fetchVideoLinks(drama_id, ep_id); - const video_link = link.sources[0].url; - setVideoLink(video_link); - setEpisodeNo(episode); - } - - return ( -

- - setSearchTitle(event.target.value)} - onKeyDown={(event) => handleKeyPresses(event)} - /> -

- -

Start by searching for some dramas

Look for the search box above.

- -

- {videoLink && ( -

- -

- )} - {episodeNo && ( -

- Episode {episodeNo} -

- )} - - {details && ( -

{details.title}

- {details.description} -

- {details.episodes.map((eps, index) => ( - - ))} -

- )} -

- - -

- ); -} diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx new file mode 100644 index 0000000..129c913 --- /dev/null +++ b/src/app/kdrama/page.jsx @@ -0,0 +1,161 @@ +"use client"; + +import "./kdrama.css"; + +import { useState } from "react"; +import ReactPlayer from "react-player"; +import Image from "next/image"; +import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library + +import { + fetchAnimeInfo, + fetchDramaInfo, + fetchVideoLinks, +} from "./api/fetchAnime.js"; + +export default function Kdrama() { + const [searchTitle, setSearchTitle] = useState(""); + const [searchedDrama, setSearchedDrama] = useState(null); + async function handleKeyPresses(event) { + if ( + (event.code === "Enter" || + event.code === 13 || + event.key === "Enter") && + searchTitle != "" + ) { + const info = await fetchAnimeInfo(searchTitle); + setSearchedDrama(info); + document.getElementById("popup").style.display = "flex"; + } + } + + const [details, setDetails] = useState(null); + async function handleDramaSearch(input) { + const drama_info = await fetchDramaInfo(input); + setDetails(drama_info); + document.getElementById("intro").style.display = "none"; + document.getElementById("videoContainer").style.display = "flex"; + } + + const [videoLink, setVideoLink] = useState(null); + const [episodeNo, setEpisodeNo] = useState(""); + async function get_video_link(ep_id, drama_id, episode) { + const link = await fetchVideoLinks(drama_id, ep_id); + const video_link = link.sources[0].url; + setVideoLink(video_link); + setEpisodeNo(episode); + } + + return ( +

+ + setSearchTitle(event.target.value)} + onKeyDown={(event) => handleKeyPresses(event)} + /> +

+ +

Start by searching for some dramas

Look for the search box above.

+ +

+ {videoLink && ( +

+ +

+ )} + {episodeNo && ( +

+ Episode {episodeNo} +

+ )} + + {details && ( +

{details.title}

+ {details.description} +

+ {details.episodes.map((eps, index) => ( + + ))} +

+ )} +

+ + +

+ ); +} diff --git a/src/app/layout.js b/src/app/layout.js deleted file mode 100644 index a5d6ffa..0000000 --- a/src/app/layout.js +++ /dev/null @@ -1,25 +0,0 @@ -import { Inter } from "next/font/google"; -import "./globals.css"; -import Header from "./header/header"; -import { SpeedInsights } from "@vercel/speed-insights/next"; -import { Analytics } from "@vercel/analytics/react"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata = { - title: "Dramalama V2.0", - description: "Rewrite of dramalama in next", -}; - -export default function RootLayout({ children }) { - return ( - - - - -

- {children} - - - ); -} diff --git a/src/app/layout.jsx b/src/app/layout.jsx new file mode 100644 index 0000000..a5d6ffa --- /dev/null +++ b/src/app/layout.jsx @@ -0,0 +1,25 @@ +import { Inter } from "next/font/google"; +import "./globals.css"; +import Header from "./header/header"; +import { SpeedInsights } from "@vercel/speed-insights/next"; +import { Analytics } from "@vercel/analytics/react"; + +const inter = Inter({ subsets: ["latin"] }); + +export const metadata = { + title: "Dramalama V2.0", + description: "Rewrite of dramalama in next", +}; + +export default function RootLayout({ children }) { + return ( + + + + +

+ {children} + + + ); +} diff --git a/src/app/page.js b/src/app/page.js deleted file mode 100644 index 03a1035..0000000 --- a/src/app/page.js +++ /dev/null @@ -1,21 +0,0 @@ -import Image from "next/image"; -import styles from "./page.module.css"; - -export default function Home() { - return ( -

- Welcome to dramalama. An online service where you can watch - kdramas and anime for free. -

- ); -} diff --git a/src/app/page.jsx b/src/app/page.jsx new file mode 100644 index 0000000..03a1035 --- /dev/null +++ b/src/app/page.jsx @@ -0,0 +1,21 @@ +import Image from "next/image"; +import styles from "./page.module.css"; + +export default function Home() { + return ( +

+ Welcome to dramalama. An online service where you can watch + kdramas and anime for free. +

+ ); +} diff --git a/src/app/page.module.css b/src/app/page.module.css index b594229..939f480 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -15,6 +15,17 @@ font-size: 20px; } +.auth button { + padding: 5px; + margin: 5px; + font-family: "Atkinson Hyperlegible"; + font-size: 16px; + border: none; + outline: none; + border-radius: 5px; + background-color: var(--neon-green); +} + @media (prefers-color-scheme: dark) { .welcomeContainer p { color: white; diff --git a/src/app/recent/page.js b/src/app/recent/page.js deleted file mode 100644 index 2962e0f..0000000 --- a/src/app/recent/page.js +++ /dev/null @@ -1,44 +0,0 @@ -import "./recent.css"; -import Image from "next/image"; -import Link from "next/link"; - -export default async function Releases() { - const data = await test(); - - return ( -

Recent Releases

- -

- {data && - data.results.map((item, index) => ( - -

{item.title}

- - ))} -

- ); -} - -async function test() { - const res = await fetch( - "https://dramalama-api.vercel.app/anime/gogoanime/recent-episodes" - ); - const data = res.json(); - return data; -} diff --git a/src/app/recent/page.jsx b/src/app/recent/page.jsx new file mode 100644 index 0000000..2962e0f --- /dev/null +++ b/src/app/recent/page.jsx @@ -0,0 +1,44 @@ +import "./recent.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function Releases() { + const data = await test(); + + return ( +

Recent Releases

+ +

+ {data && + data.results.map((item, index) => ( + +

{item.title}

+ + ))} +

+ ); +} + +async function test() { + const res = await fetch( + "https://dramalama-api.vercel.app/anime/gogoanime/recent-episodes" + ); + const data = res.json(); + return data; +} diff --git a/src/app/search/page.js b/src/app/search/page.js deleted file mode 100644 index e6d4f08..0000000 --- a/src/app/search/page.js +++ /dev/null @@ -1,92 +0,0 @@ -"use client"; - -import "./search.css"; -import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library -import { useState } from "react"; -import Image from "next/image"; -import Link from "next/link"; - -export default function Input() { - const [searchedAnime, setSearchedAnime] = useState(null); - const [loading, setLoading] = useState(null); - - const handleKeyPress = (event) => { - if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && - searchedAnime != "" - ) { - fetch_animes(searchedAnime); - } else if ( - (event.code === "Enter" || - event.key === "Enter" || - event.code === 13) && - searchedAnime === "" - ) { - alert("Input cannot be empty"); - } - }; - - const [search1, setSearch] = useState(null); - const fetch_animes = (title) => { - fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title) - .then(setLoading(true)) - .then((res) => res.json()) - .then((data) => { - setSearch(data); - setLoading(false); - }); - }; - - return ( -

- - - setSearchedAnime(event.target.value) - } - onKeyDown={(event) => handleKeyPress(event)} - placeholder="Enter anime title" - > -

- - {loading && ( -

- Please wait while we crunch all the data for you. -

- )} -

- {search1 ? ( - search1.results && search1.results.length > 0 ? ( - search1.results.map((item, index) => ( - -

{item.title}

- - )) - ) : ( -

No results found

- ) - ) : null} -

- ); -} diff --git a/src/app/search/page.jsx b/src/app/search/page.jsx new file mode 100644 index 0000000..e6d4f08 --- /dev/null +++ b/src/app/search/page.jsx @@ -0,0 +1,92 @@ +"use client"; + +import "./search.css"; +import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library +import { useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; + +export default function Input() { + const [searchedAnime, setSearchedAnime] = useState(null); + const [loading, setLoading] = useState(null); + + const handleKeyPress = (event) => { + if ( + (event.code === "Enter" || + event.key === "Enter" || + event.code === 13) && + searchedAnime != "" + ) { + fetch_animes(searchedAnime); + } else if ( + (event.code === "Enter" || + event.key === "Enter" || + event.code === 13) && + searchedAnime === "" + ) { + alert("Input cannot be empty"); + } + }; + + const [search1, setSearch] = useState(null); + const fetch_animes = (title) => { + fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title) + .then(setLoading(true)) + .then((res) => res.json()) + .then((data) => { + setSearch(data); + setLoading(false); + }); + }; + + return ( +

+ + + setSearchedAnime(event.target.value) + } + onKeyDown={(event) => handleKeyPress(event)} + placeholder="Enter anime title" + > +

+ + {loading && ( +

+ Please wait while we crunch all the data for you. +

+ )} +

+ {search1 ? ( + search1.results && search1.results.length > 0 ? ( + search1.results.map((item, index) => ( + +

{item.title}

+ + )) + ) : ( +

No results found

+ ) + ) : null} +

+ ); +} diff --git a/src/app/top-airing/page.js b/src/app/top-airing/page.js deleted file mode 100644 index b9d54cd..0000000 --- a/src/app/top-airing/page.js +++ /dev/null @@ -1,44 +0,0 @@ -import "./trending.css"; -import Image from "next/image"; -import Link from "next/link"; - -export default async function Trending() { - const data = await test(); - - return ( -

Trending

- -

- {data && - data.results.map((item, index) => ( - -

{item.title}

- - ))} -

- ); -} - -async function test() { - const res = await fetch( - "https://dramalama-api.vercel.app/anime/gogoanime/top-airing" - ); - const data = res.json(); - return data; -} diff --git a/src/app/top-airing/page.jsx b/src/app/top-airing/page.jsx new file mode 100644 index 0000000..b9d54cd --- /dev/null +++ b/src/app/top-airing/page.jsx @@ -0,0 +1,44 @@ +import "./trending.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function Trending() { + const data = await test(); + + return ( +

Trending

+ +

+ {data && + data.results.map((item, index) => ( + +

{item.title}

+ + ))} +

+ ); +} + +async function test() { + const res = await fetch( + "https://dramalama-api.vercel.app/anime/gogoanime/top-airing" + ); + const data = res.json(); + return data; +} diff --git a/src/app/video/[animeId]/page.js b/src/app/video/[animeId]/page.js deleted file mode 100644 index d7e68f9..0000000 --- a/src/app/video/[animeId]/page.js +++ /dev/null @@ -1,46 +0,0 @@ -import { MediaPlayer, MediaProvider } from "@vidstack/react"; -import "@vidstack/react/player/styles/base.css"; -import "@vidstack/react/player/styles/plyr/theme.css"; -import { - PlyrLayout, - plyrLayoutIcons, -} from "@vidstack/react/player/layouts/plyr"; -import "../video.css"; - -export default async function Video({ params }) { - const id = params.animeId; - const words = id.split("-"); - const last_two = words.slice(-2).join(" "); - const remainingWords = words.slice(0, -2).join(" "); - const data = await getVideoLink(id); - const link = data.sources[3].url; - - return ( -

- {last_two} - {remainingWords} -

- - - - -

- ); -} - -async function getVideoLink(id) { - const res = await fetch( - "https://anime-sensei-api.vercel.app/anime/gogoanime/watch/" + id - ); - const data = res.json(); - return data; -} diff --git a/src/app/video/[animeId]/page.jsx b/src/app/video/[animeId]/page.jsx new file mode 100644 index 0000000..d7e68f9 --- /dev/null +++ b/src/app/video/[animeId]/page.jsx @@ -0,0 +1,46 @@ +import { MediaPlayer, MediaProvider } from "@vidstack/react"; +import "@vidstack/react/player/styles/base.css"; +import "@vidstack/react/player/styles/plyr/theme.css"; +import { + PlyrLayout, + plyrLayoutIcons, +} from "@vidstack/react/player/layouts/plyr"; +import "../video.css"; + +export default async function Video({ params }) { + const id = params.animeId; + const words = id.split("-"); + const last_two = words.slice(-2).join(" "); + const remainingWords = words.slice(0, -2).join(" "); + const data = await getVideoLink(id); + const link = data.sources[3].url; + + return ( +

+ {last_two} - {remainingWords} +

+ + + + +

+ ); +} + +async function getVideoLink(id) { + const res = await fetch( + "https://anime-sensei-api.vercel.app/anime/gogoanime/watch/" + id + ); + const data = res.json(); + return data; +} -- cgit v1.2.3