From 446eb6d593b97b7d11bc779afe02fdd621d79893 Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Fri, 3 May 2024 04:02:21 +0000
Subject: font changes, video player changes and other minor changes

---
 src/app/anime/[id]/buttons.jsx                     | 12 ++++-----
 src/app/anime/[id]/info.module.css                 | 16 +++---------
 .../anime/history/continueWatching/cw.module.css   |  2 --
 src/app/anime/recent/recent.module.css             |  2 --
 src/app/anime/search/search.module.css             |  2 --
 src/app/anime/top-airing/trending.module.css       |  2 --
 src/app/kdrama/[id]/buttons.jsx                    | 19 ++++++--------
 src/app/kdrama/styles/info.module.css              | 20 ++++++---------
 src/app/kdrama/styles/popular.module.css           |  6 ++---
 src/app/kdrama/styles/search.module.css            |  6 ++---
 src/app/layout.jsx                                 |  6 +++--
 src/app/manga/[title]/[id]/info.module.css         | 15 ++---------
 src/app/manga/[title]/[id]/page.jsx                | 10 +++++++-
 src/app/manga/[title]/page.jsx                     | 13 +++++-----
 src/app/manga/[title]/title.module.css             | 30 ++++++++++++++--------
 .../manga/history/continueWatching/cw.module.css   |  4 +--
 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;
-- 
cgit v1.2.3