font changes, video player changes and other minor changes

4 files changed, 20 insertions, 31 deletions

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 {