aboutsummaryrefslogtreecommitdiff
path: root/src/app/kdrama
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/kdrama')
-rw-r--r--src/app/kdrama/[id]/buttons.jsx19
-rw-r--r--src/app/kdrama/[id]/page.jsx10
-rw-r--r--src/app/kdrama/styles/info.module.css36
-rw-r--r--src/app/kdrama/styles/popular.module.css6
-rw-r--r--src/app/kdrama/styles/search.module.css6
5 files changed, 32 insertions, 45 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/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index 69a42c2..38593e7 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -3,6 +3,8 @@ import Image from "next/image";
import EpisodesButtons from "./buttons";
import { PreFetchVideoLinks } from "../components/cacher";
+export const runtime = "edge";
+
export default async function DramaInfo({ params }) {
const id = decodeURIComponent(params.id);
const info = await getDramaInfo(id);
@@ -35,9 +37,7 @@ export default async function DramaInfo({ params }) {
<span className={styles.genreMain}>Genres: </span>
{info.genres &&
info.genres.map((item, index) => (
- <span key={index} className={styles.genreEntry}>
- {item}
- </span>
+ <p key={index}>{item}</p>
))}
</div>
@@ -46,9 +46,7 @@ export default async function DramaInfo({ params }) {
<span className={styles.genreMain}>AKA: </span>
{info.otherNames &&
info.otherNames.map((item, index) => (
- <span key={index} className={styles.genreEntry}>
- {item}
- </span>
+ <p key={index}>{item}</p>
))}
</div>
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 3ae0bef..9da3034 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,19 +22,26 @@
.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 {
display: flex;
align-items: center;
overflow-x: auto;
+ color: white;
+ margin-top: 1rem;
+}
+.DramaGenre p {
+ background-color: #1f1f1f;
+ margin: 0rem 0rem 0rem 0.4rem;
+ padding: 0.4rem;
+ border-radius: 0.2rem;
}
.DramaGenre::-webkit-scrollbar {
@@ -46,28 +54,16 @@
}
.genreMain {
- font-family: "Lexend Deca", serif;
color: var(--neon-green);
font-size: 18px;
}
-.genreEntry {
- background-color: #31313141;
- color: white;
- padding: 5px;
- margin: 3px;
- border-radius: 5px;
- font-family: "Lexend Deca", serif;
- cursor: crosshair;
-}
-
.EpisodesContainer {
margin-top: -10px;
}
.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 {
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-01 11:04:25 +0000