font changes, video player changes and other minor changes

16 files changed, 73 insertions, 92 deletions

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 4f0aca4..9c297d2 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -4,12 +4,12 @@ import styles from "./info.module.css";
 import { useState } from "react";

 import { fetch_video_link } from "../videoLinkfetcher";

 import { MediaPlayer, MediaProvider } from "@vidstack/react";

-import "@vidstack/react/player/styles/base.css";

-import "@vidstack/react/player/styles/plyr/theme.css";

+import "@vidstack/react/player/styles/default/theme.css";

+import "@vidstack/react/player/styles/default/layouts/video.css";

 import {

-	PlyrLayout,

-	plyrLayoutIcons,

-} from "@vidstack/react/player/layouts/plyr";

+	defaultLayoutIcons,

+	DefaultVideoLayout,

+} from "@vidstack/react/player/layouts/default";

 import { storeLocal } from "../history/storeData";

 

 export default function Button({ data2: info }) {

@@ -91,7 +91,7 @@ export default function Button({ data2: info }) {
 							volume={0.8}

 						>

 							<MediaProvider />

-							<PlyrLayout icons={plyrLayoutIcons} />

+							<DefaultVideoLayout icons={defaultLayoutIcons} />

 						</MediaPlayer>

 						<button

 							className={styles.closeButton}

diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index c7ab66b..e6d0af1 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -19,7 +19,6 @@
 .titleContainer p {

 	color: var(--neon-green);

 	width: 60%;

-	font-family: "Lexend Deca", serif;

 	font-weight: 500;

 	font-size: 34px;

 }

@@ -32,11 +31,9 @@
 .animeDescription h2 {

 	color: #ffffff81;

 	margin: 20px 0px -10px 0px;

-	font-family: "Lexend Deca", serif;

 }

 

 .animeDescription p {

-	font-family: "Atkinson Hyperlegible", serif;

 	color: rgba(255, 255, 255, 0.637);

 }

 

@@ -50,7 +47,6 @@
 .buttonHeader {

 	margin: 0px 10px 10px 0px;

 	color: #ffffff81;

-	font-family: "Lexend Deca", serif;

 }

 

 .buttonContainer button {

@@ -75,8 +71,7 @@
 

 .dramaButton {

 	padding: 10px;

-	font-family: "Atkinson Hyperlegible", serif;

-	font-size: 14px;

+	font-family: "Lexend Deca", serif;

 	margin: 5px 5px 5px 5px;

 	width: 55px;

 	border-radius: 5px;

@@ -100,16 +95,14 @@
 

 .animeDetails {

 	color: white;

-	font-family: "Lexend Deca", serif;

 }

 

 .genreEntries {

 	margin: 3px;

 	padding: 4px;

 	border-radius: 5px;

-	color: var(--neon-green);

+	color: var(--neon-yellow);

 	background-color: #303030;

-	font-family: "Atkinson Hyperlegible", serif;

 }

 

 .animeType span {

@@ -123,7 +116,7 @@
 .videoPopUp {

 	height: 100dvh;

 	width: 100dvw;

-	background-color: #1f1f1fd3;

+	background-color: #141414ee;

 	position: fixed;

 	bottom: 0;

 	left: 0;

@@ -137,7 +130,7 @@
 }

 

 .closeButton {

-	font-family: "Poppins", serif;

+	font-family: "Lexend Deca", serif;

 	font-size: 16px;

 	background-color: var(--pastel-red);

 	padding: 0.5rem 1.5rem;

@@ -150,7 +143,6 @@
 

 .video {

 	width: 60vw;

-	font-family: "Lexend Deca", serif;

 }

 

 .VideoPlayer {

diff --git a/src/app/anime/history/continueWatching/cw.module.css b/src/app/anime/history/continueWatching/cw.module.css
index ce70c30..cf79acc 100644
--- a/src/app/anime/history/continueWatching/cw.module.css
+++ b/src/app/anime/history/continueWatching/cw.module.css
@@ -5,12 +5,10 @@
 

 .mainText {

 	color: var(--light-green);

-	font-family: "Poppins", serif;

 	font-size: 24px;

 }

 

 .animeContainer {

-	font-family: "Poppins", serif;

 	font-size: 18px;

 	margin: 0px;

 }

diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
index c7877da..07f20d5 100644
--- a/src/app/anime/recent/recent.module.css
+++ b/src/app/anime/recent/recent.module.css
@@ -7,7 +7,6 @@
 	font-size: 28px;

 	margin: 0;

 	color: var(--soft-purple);

-	font-family: "Lexend Deca", serif;

 }

 

 .RecentText span {

@@ -51,7 +50,6 @@
 	margin: 5px auto;

 	width: auto;

 	max-width: 180px;

-	font-family: "Lexend Deca", serif;

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index 7f0ef67..9b0d374 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -1,6 +1,5 @@
 .waitWhileLoading {

 	font-size: 18px;

-	font-family: "Lexend Deca", serif;

 	text-align: center;

 	color: white;

 }

@@ -95,7 +94,6 @@
 .anime p {

 	color: white;

 	width: 20dvw;

-	font-family: "Lexend Deca", serif;

 	font-size: 18px;

 }

 

diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index 913697c..7d08a2e 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -7,7 +7,6 @@
 	font-size: 28px;

 	margin: 0px;

 	color: var(--soft-purple);

-	font-family: "Lexend Deca", serif;

 }

 

 .TrendingText span {

@@ -52,7 +51,6 @@
 	margin: 5px auto;

 	width: auto;

 	max-width: 180px;

-	font-family: "Lexend Deca", serif;

 	overflow: hidden;

 	white-space: nowrap;

 	text-overflow: ellipsis;

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 9f6145c..2018a1c 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -1,23 +1,21 @@
 "use client";

 import styles from "../styles/info.module.css";

 import getVideoLink from "../components/videoLink";

-import React, { useEffect, useState } from "react";

+import React, { useState } from "react";

 import { MediaPlayer, MediaProvider } from "@vidstack/react";

-import "@vidstack/react/player/styles/base.css";

-import "@vidstack/react/player/styles/plyr/theme.css";

+import "@vidstack/react/player/styles/default/theme.css";

+import "@vidstack/react/player/styles/default/layouts/video.css";

 import {

-	PlyrLayout,

-	plyrLayoutIcons,

-} from "@vidstack/react/player/layouts/plyr";

+	defaultLayoutIcons,

+	DefaultVideoLayout,

+} from "@vidstack/react/player/layouts/default";

 

 export default function EpisodesButtons({ data: episodeData, id: dramaId }) {

 	const [videoLink, setVideoLink] = useState(null);

-	const [episode, setEpisode] = useState("");

 

 	async function test(a, b, episodeText) {

 		let link = await getVideoLink(a, b);

 		setVideoLink(link);

-		setEpisode(episodeText);

 	}

 

 	return (

@@ -32,7 +30,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 								onClick={(event) => {

 									test(item.id, dramaId, item.title);

 									event.currentTarget.style.backgroundColor =

-										"var(--soft-purple)";

+										"#D08770";

 								}}

 							>

 								<p>{item.title}</p>

@@ -55,7 +53,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 						<MediaPlayer

 							title="dramaPlayer"

 							src={videoLink}

-							aspectRatio="16/9"

 							load="eager"

 							className={styles.VideoPlayer}

 							playsInline

@@ -63,7 +60,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 							volume={0.8}

 						>

 							<MediaProvider />

-							<PlyrLayout icons={plyrLayoutIcons} />

+							<DefaultVideoLayout icons={defaultLayoutIcons} />

 						</MediaPlayer>

 						<button

 							className={styles.closeButton}

diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 3ae0bef..070b904 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -11,8 +11,9 @@
 

 .TitleContainer p {

 	color: white;

-	font-family: "Lexend Deca", serif;

-	font-size: 30px;

+	font-size: 34px;

+	font-weight: 500;

+	color: var(--neon-green);

 }

 

 .TitleContainer img {

@@ -21,13 +22,12 @@
 

 .DramaDescription h2 {

 	color: gray;

-	font-family: "Lexend Deca", serif;

 }

 

 .DramaDescription p {

-	font-family: "Atkinson Hyperlegible", serif;

 	color: white;

 	margin-top: -10px;

+	color: rgba(255, 255, 255, 0.637);

 }

 

 .DramaGenre {

@@ -46,7 +46,6 @@
 }

 

 .genreMain {

-	font-family: "Lexend Deca", serif;

 	color: var(--neon-green);

 	font-size: 18px;

 }

@@ -57,8 +56,6 @@
 	padding: 5px;

 	margin: 3px;

 	border-radius: 5px;

-	font-family: "Lexend Deca", serif;

-	cursor: crosshair;

 }

 

 .EpisodesContainer {

@@ -67,7 +64,6 @@
 

 .EpisodesContainer h2 {

 	color: gray;

-	font-family: "Lexend Deca", serif;

 }

 

 .EpisodeButtons {

@@ -89,7 +85,7 @@
 

 .EpisodeButtons button p {

 	text-align: center;

-	font-family: "Poppins", serif;

+	font-family: "Lexend Deca", serif;

 	margin: 0;

 	overflow: hidden;

 	white-space: nowrap;

@@ -104,7 +100,7 @@
 .videoPopUp {

 	height: 100dvh;

 	width: 100dvw;

-	background-color: #1f1f1fd3;

+	background-color: #141414ea;

 	position: fixed;

 	bottom: 0;

 	left: 0;

@@ -118,7 +114,7 @@
 }

 

 .closeButton {

-	font-family: "Poppins", serif;

+	font-family: "Lexend Deca", serif;

 	font-size: 16px;

 	background-color: var(--pastel-red);

 	padding: 0.5rem 1.5rem;

@@ -131,11 +127,11 @@
 

 .video {

 	width: 60vw;

-	font-family: "Lexend Deca", serif;

 }

 

 .VideoPlayer {

 	width: 100%;

+	height: auto;

 }

 

 @media screen and (max-width: 768px) {

diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index 4fc8f18..16c18a2 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -1,6 +1,5 @@
 .popDramasText {

 	color: var(--soft-purple);

-	font-family: "Lexend Deca", serif;

 	font-size: 28px;

 	margin-bottom: 10px;

 	font-weight: 500;

@@ -28,13 +27,13 @@
 }

 

 .AnimeContainer:hover .AnimeEntry {

-	opacity: 0.3;

+	opacity: 0.5;

 }

 

 .AnimeContainer:hover .AnimeEntry:hover {

 	opacity: 1;

 	transform: scale(1.02);

-	background-color: #202020;

+	background-color: #272727;

 }

 

 .AnimeEntry {

@@ -57,7 +56,6 @@
 .AnimeEntry p {

 	text-align: center;

 	color: white;

-	font-family: "Lexend Deca", serif;

 	width: auto;

 	max-width: 190px;

 	overflow: hidden;

diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css
index 5b9c965..80f70b9 100644
--- a/src/app/kdrama/styles/search.module.css
+++ b/src/app/kdrama/styles/search.module.css
@@ -4,7 +4,6 @@
 

 .LoadingText {

 	color: white;

-	font-family: "Atkinson Hyperlegible", serif;

 	text-align: center;

 	font-size: 18px;

 }

@@ -25,9 +24,9 @@
 	outline: none;

 	background-color: #121212;

 	font-size: 16px;

-	font-family: "Atkinson Hyperlegible", serif;

 	color: white;

 	width: 100%;

+	font-family: "Lexend Deca";

 }

 

 .SearchResults {

@@ -73,9 +72,8 @@
 

 .SearchEntry p {

 	color: white;

-	font-family: "Lexend Deca", serif;

 	font-size: 18px;

-	width: 35vh;

+	width: 45vh;

 }

 

 .SearchEntry img {

diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 2cedeb0..f16ed98 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,10 +1,12 @@
-import { Inter } from "next/font/google";
+import { Lexend_Deca } from "next/font/google";
 import "./globals.css";
 import Header from "./components/header/header";
 import Footer from "./components/footer/page";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Analytics } from "@vercel/analytics/react";
 
+const lexend = Lexend_Deca({ subsets: ["latin"] });
+
 export const metadata = {
 	title: "Dramalama",
 	description:
@@ -39,7 +41,7 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
 	return (
-		<html lang="en">
+		<html lang="en" className={lexend.className}>
 			<body>
 				<SpeedInsights />
 				<Analytics />
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 1df4583..0420401 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -18,9 +18,8 @@
 }

 

 .TitleContainer p {

-	font-family: "Lexend Deca", serif;

 	font-size: 40px;

-	font-weight: 1000;

+	font-weight: 700;

 }

 

 .TitleContainer img {

@@ -30,13 +29,11 @@
 

 .MangaDescription {

 	color: white;

-	font-family: "Atkinson Hyperlegible", serif;

 	max-width: 98%;

 	margin: -10px auto;

 }

 

 .Description h2 {

-	font-family: "Lexend Deca", serif;

 	color: gray;

 }

 

@@ -46,14 +43,12 @@
 

 .MangaReleaseYear {

 	margin-top: 10px;

-	font-family: "Poppins", serif;

 }

 

 .GenreContainer {

 	margin-top: 5px;

 	display: flex;

 	align-items: center;

-	font-family: "Poppins", serif;

 }

 

 .GenreText {

@@ -81,8 +76,6 @@
 .MangaRatings {

 	display: flex;

 	margin-top: 10px;

-	font-family: "Poppins", serif;

-	/* justify-content: center; */

 }

 

 .MangaRatings span {

@@ -98,7 +91,6 @@
 

 .CharactersContainer h2 {

 	color: gray;

-	font-family: "Lexend Deca", serif;

 }

 

 .Character {

@@ -130,7 +122,6 @@
 	text-align: center;

 	width: 110px;

 	color: white;

-	font-family: "Atkinson Hyperlegible", serif;

 }

 

 .CharacterEntry img {

@@ -149,7 +140,6 @@
 

 .ChapterTitle {

 	color: white;

-	font-family: "Lexend Deca", serif;

 	font-size: 32px;

 }

 

@@ -183,10 +173,10 @@
 	background-color: #3d3d3d;

 	cursor: pointer;

 	transition: background-color 100ms ease-in-out;

+	font-family: "Lexend Deca";

 }

 

 .ChapterContainer button p {

-	font-family: "Atkinson Hyperlegible", serif;

 	margin: 2px;

 }

 

@@ -203,7 +193,6 @@
 }

 

 .linksNotFound {

-	font-family: "Atkinson Hyperlegible", serif;

 	color: white;

 	font-size: 18px;

 	display: flex;

diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 76d7177..9d60e0a 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -15,6 +15,14 @@ export default async function MangaInfo({ params }) {
 		redirect("/404");

 	}

 

+	let description;

+	if (!data.description) {

+		description =

+			"Sorry but description for this particular manga was not found.";

+	} else {

+		description = data.description.split("<br>")[0];

+	}

+

 	PreFetchChaterLinks(data.chapters);

 

 	return (

@@ -53,7 +61,7 @@ export default async function MangaInfo({ params }) {
 					<div className={styles.MangaDescription}>

 						<div className={styles.Description}>

 							<h2>Description</h2>

-							<p>{data.description.split("<br")[0]}</p>

+							<p>{description}</p>

 						</div>

 

 						<div className={styles.MangaReleaseYear}>

diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx
index 01350d7..2e3e4de 100644
--- a/src/app/manga/[title]/page.jsx
+++ b/src/app/manga/[title]/page.jsx
@@ -34,10 +34,9 @@ export default async function MangaInfo({ params }) {
 								<div className={styles.MangaEntries}>

 									<Image

 										src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

-										width={160}

-										height={250}

+										width={180}

+										height={270}

 										alt="Manga Poster"

-										style={{ borderRadius: 10 }}

 									/>

 									<div className={styles.MangaInfo}>

 										<p className={styles.MangaTitle}>

@@ -51,13 +50,15 @@ export default async function MangaInfo({ params }) {
 												: desc}

 										</p>

 										<p className={styles.MangaStatus}>

-											{item.status}

+											Status: {item.status || "not sure"}

 										</p>

 										<p className={styles.MangaChapters}>

-											Chapters: {item.totalChapters}

+											Chapters:{" "}

+											{item.totalChapters || "not sure"}

 										</p>

 										<p className={styles.MangaVolume}>

-											Volumes: {item.volumes}

+											Volumes:{" "}

+											{item.volumes || "not sure"}

 										</p>

 									</div>

 								</div>

diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index bbfc99b..203efad 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -11,7 +11,6 @@
 .SearchedFor {

 	color: white;

 	text-align: center;

-	font-family: "Lexend Deca", serif;

 	font-size: 26px;

 }

 

@@ -20,10 +19,10 @@
 	flex-direction: row;

 	margin: 0px 10px 10px 10px;

 	padding: 10px;

-	border-style: dotted;

+	border-style: solid;

+	border-radius: 0.5rem;

 	border-color: #363636 #474747;

-	border-radius: 10px;

-	border-width: 4px;

+	border-width: 0.1rem;

 	align-items: center;

 	cursor: pointer;

 	transition: opacity 200ms linear, transform 200ms linear;

@@ -42,33 +41,44 @@
 .MangaInfo {

 	color: white;

 	margin-left: 20px;

-	font-family: "Atkinson Hyperlegible";

+}

+

+.MangaEntries img {

+	border-radius: 0.5rem;

 }

 

 .MangaTitle {

-	font-family: "Lexend Deca", serif;

 	margin: 0px;

-	font-size: 22px;

+	font-size: 28px;

 	color: var(--neon-green);

 }

 

+.MangaDescription {

+	margin: 0.5rem 0 0.5rem 0;

+}

+

 .MangaStatus {

 	color: var(--soft-purple);

-	font-family: "Poppins", serif;

+	margin: 0px;

 }

 

 .MangaVolume {

+	margin: 0px;

 	color: #ffacac;

-	font-family: "Poppins", serif;

 }

 

 .MangaChapters {

 	color: #ffebb4;

-	font-family: "Poppins", serif;

+	margin: 0.3rem 0 0.3rem 0;

 }

 

 @media screen and (max-width: 768px) {

 	.Main {

 		max-width: 100%;

 	}

+

+	.MangaDescription {

+		max-height: 10rem;

+		overflow: auto;

+	}

 }

diff --git a/src/app/manga/history/continueWatching/cw.module.css b/src/app/manga/history/continueWatching/cw.module.css
index 29d0dc9..e83be6b 100644
--- a/src/app/manga/history/continueWatching/cw.module.css
+++ b/src/app/manga/history/continueWatching/cw.module.css
@@ -5,12 +5,10 @@
 

 .mainText {

 	color: var(--light-green);

-	font-family: "Poppins", serif;

 	font-size: 24px;

 }

 

 .animeContainer {

-	font-family: "Poppins", serif;

 	font-size: 18px;

 	margin: 0px;

 }

@@ -60,7 +58,7 @@
 	margin-right: 0.4rem;

 	border-radius: 0.2rem;

 	padding: 0.2rem;

-	font-family: "Atkinson Hyperlegible", serif;

+	font-family: "Lexend Deca", serif;

 	background-color: #303030;

 	color: white;

 	cursor: pointer;