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 --- .gitignore | 2 + next.config.mjs | 39 +++++----- package-lock.json | 162 ++++++++++++++++++++++++++++++++++++++- package.json | 1 + 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 +++++++++++ 26 files changed, 716 insertions(+), 548 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 diff --git a/.gitignore b/.gitignore index fd3dbb5..8460eea 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +.vercel diff --git a/next.config.mjs b/next.config.mjs index 06d109f..175f46f 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,23 +1,22 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - images: { - remotePatterns: [ - { - protocol: 'https', - hostname: 'asianimg.pro', - pathname: '/cover/**', - }, - { - protocol: "https", - hostname: "www.pngall.com" - }, - { - protocol: "https", - hostname: "gogocdn.net" - } - ], - }, - }; - + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "asianimg.pro", + pathname: "/cover/**", + }, + { + protocol: "https", + hostname: "www.pngall.com", + }, + { + protocol: "https", + hostname: "gogocdn.net", + }, + ], + }, +}; + export default nextConfig; - \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2ec24a9..93c91bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@vercel/analytics": "^1.2.2", + "@vercel/postgres": "^0.7.2", "@vercel/speed-insights": "^1.0.10", "@vidstack/react": "^1.10.9", "hls.js": "^1.5.7", @@ -181,6 +182,14 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/@neondatabase/serverless": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@neondatabase/serverless/-/serverless-0.7.2.tgz", + "integrity": "sha512-wU3WA2uTyNO7wjPs3Mg0G01jztAxUxzd9/mskMmtPwPTjf7JKWi9AW5/puOGXLxmZ9PVgRFeBVRVYq5nBPhsCg==", + "dependencies": { + "@types/pg": "8.6.6" + } + }, "node_modules/@next/env": { "version": "14.1.3", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.3.tgz", @@ -407,11 +416,20 @@ "version": "20.11.28", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.28.tgz", "integrity": "sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==", - "dev": true, "dependencies": { "undici-types": "~5.26.4" } }, + "node_modules/@types/pg": { + "version": "8.6.6", + "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.6.6.tgz", + "integrity": "sha512-O2xNmXebtwVekJDD+02udOncjVcMZQuTEQEMpKJ0ZRf5E7/9JJX3izhKUcUifBkyKpljyUM6BTgy2trmviKlpw==", + "dependencies": { + "@types/node": "*", + "pg-protocol": "*", + "pg-types": "^2.2.0" + } + }, "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", @@ -585,6 +603,20 @@ } } }, + "node_modules/@vercel/postgres": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@vercel/postgres/-/postgres-0.7.2.tgz", + "integrity": "sha512-IqR/ZAvoPGcPaXl9eWWB5KaA+w/81RzZa/18P4izQRHpNBkTGt9HwGfYi9+wut5UgxNq4QSX9A7HIQR6QDvX2Q==", + "dependencies": { + "@neondatabase/serverless": "0.7.2", + "bufferutil": "4.0.8", + "utf-8-validate": "6.0.3", + "ws": "8.14.2" + }, + "engines": { + "node": ">=14.6" + } + }, "node_modules/@vercel/speed-insights": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.0.10.tgz", @@ -970,6 +1002,18 @@ "node": ">=8" } }, + "node_modules/bufferutil": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz", + "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==", + "hasInstallScript": true, + "dependencies": { + "node-gyp-build": "^4.3.0" + }, + "engines": { + "node": ">=6.14.2" + } + }, "node_modules/busboy": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", @@ -2982,6 +3026,16 @@ } } }, + "node_modules/node-gyp-build": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.0.tgz", + "integrity": "sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==", + "bin": { + "node-gyp-build": "bin.js", + "node-gyp-build-optional": "optional.js", + "node-gyp-build-test": "build-test.js" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3226,6 +3280,34 @@ "node": ">=8" } }, + "node_modules/pg-int8": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", + "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==", + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/pg-protocol": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.6.0.tgz", + "integrity": "sha512-M+PDm637OY5WM307051+bsDia5Xej6d9IR4GwJse1qA1DIhiKlksvrneZOYQq42OM+spubpcNYEo2FcKQrDk+Q==" + }, + "node_modules/pg-types": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz", + "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==", + "dependencies": { + "pg-int8": "1.0.1", + "postgres-array": "~2.0.0", + "postgres-bytea": "~1.0.0", + "postgres-date": "~1.0.4", + "postgres-interval": "^1.1.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -3279,6 +3361,41 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postgres-array": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz", + "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==", + "engines": { + "node": ">=4" + } + }, + "node_modules/postgres-bytea": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz", + "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postgres-date": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz", + "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/postgres-interval": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz", + "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==", + "dependencies": { + "xtend": "^4.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -4151,8 +4268,7 @@ "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", - "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", - "dev": true + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" }, "node_modules/uri-js": { "version": "4.4.1", @@ -4163,6 +4279,18 @@ "punycode": "^2.1.0" } }, + "node_modules/utf-8-validate": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-6.0.3.tgz", + "integrity": "sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==", + "hasInstallScript": true, + "dependencies": { + "node-gyp-build": "^4.3.0" + }, + "engines": { + "node": ">=6.14.2" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -4357,6 +4485,34 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/ws": { + "version": "8.14.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", + "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "engines": { + "node": ">=0.4" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index e608bde..8a63f0f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@vercel/analytics": "^1.2.2", + "@vercel/postgres": "^0.7.2", "@vercel/speed-insights": "^1.0.10", "@vidstack/react": "^1.10.9", "hls.js": "^1.5.7", 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}

- Drama -
-

{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}

+ Drama +
+

{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}

- Drama -
-

- {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}

+ Drama +
+

+ {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 ( -
-
- Logo -

- 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 ( +
+
+ Logo +

+ 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) => ( - -
- Drama -

{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) => ( + +
+ Drama +

{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}

- Drama Poster -
- - )) - ) : ( -
-

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}

+ Drama Poster +
+ + )) + ) : ( +
+

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) => ( - -
- Drama -

{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) => ( + +
+ Drama +

{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