diff options
| author | zephex-alt <[email protected]> | 2024-04-30 18:59:14 +0000 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-04-30 18:59:14 +0000 |
| commit | 9fec718e0fc54b87e12812142e692b4f2eade07d (patch) | |
| tree | 6a1949d24afd381595289c5e86e469d58ab65027 /src | |
| parent | small fixes (diff) | |
| download | dramalama-9fec718e0fc54b87e12812142e692b4f2eade07d.tar.xz dramalama-9fec718e0fc54b87e12812142e692b4f2eade07d.zip | |
video players for both anime and kdrama sites are consistent now
Diffstat (limited to 'src')
| -rw-r--r-- | src/app/anime/[id]/buttons.jsx | 3 | ||||
| -rw-r--r-- | src/app/kdrama/[id]/buttons.jsx | 45 | ||||
| -rw-r--r-- | src/app/kdrama/styles/info.module.css | 44 |
3 files changed, 50 insertions, 42 deletions
diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx index 5c99027..4f0aca4 100644 --- a/src/app/anime/[id]/buttons.jsx +++ b/src/app/anime/[id]/buttons.jsx @@ -89,9 +89,6 @@ export default function Button({ data2: info }) { playsInline
id="videoPlayer"
volume={0.8}
- // onQualityChange={(event) =>
- // console.log("changed qualities", event)
- // }
>
<MediaProvider />
<PlyrLayout icons={plyrLayoutIcons} />
diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx index 86110be..9f6145c 100644 --- a/src/app/kdrama/[id]/buttons.jsx +++ b/src/app/kdrama/[id]/buttons.jsx @@ -20,23 +20,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { setEpisode(episodeText);
}
- // Auto loads the first episode
- useEffect(() => {
- const fetchData = async () => {
- try {
- let firstVideoLink = episodeData[0].id;
- let firstLink = await getVideoLink(firstVideoLink, dramaId);
- setVideoLink(firstLink);
- setEpisode("Episode 1");
- } catch (error) {
- console.log("Some error occured", error);
- return;
- }
- };
-
- fetchData();
- }, []);
-
return (
<div>
<div className={styles.EpisodesContainer}>
@@ -58,9 +41,17 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { </div>
</div>
- <div className={styles.VideoContainer}>
- {videoLink && (
- <div className={styles.Video}>
+ {videoLink && (
+ <div
+ className={styles.videoPopUp}
+ id="popup"
+ onKeyDown={(event) => {
+ if (event.code === "Escape") {
+ setVideoLink("");
+ }
+ }}
+ >
+ <div className={styles.video}>
<MediaPlayer
title="dramaPlayer"
src={videoLink}
@@ -68,15 +59,23 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) { load="eager"
className={styles.VideoPlayer}
playsInline
+ id="videoPlayer"
volume={0.8}
>
<MediaProvider />
<PlyrLayout icons={plyrLayoutIcons} />
</MediaPlayer>
- <p>{episode}</p>
+ <button
+ className={styles.closeButton}
+ onClick={() => {
+ setVideoLink("");
+ }}
+ >
+ Close
+ </button>
</div>
- )}
- </div>
+ </div>
+ )}
</div>
);
}
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css index edac191..3ae0bef 100644 --- a/src/app/kdrama/styles/info.module.css +++ b/src/app/kdrama/styles/info.module.css @@ -101,33 +101,45 @@ transition: background-color 0.2s linear;
}
-.VideoContainer {
- margin-top: 20px;
-}
-
-.Video {
+.videoPopUp {
+ height: 100dvh;
+ width: 100dvw;
+ background-color: #1f1f1fd3;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
display: flex;
flex-direction: column;
align-items: center;
- width: 70dvw;
- margin: 0px auto;
+ justify-content: center;
+ z-index: 1;
+ overflow-y: auto;
}
-.Video p {
- color: white;
- font-family: "Atkinson Hyperlegible", serif;
- color: var(--pastel-red);
+.closeButton {
+ font-family: "Poppins", serif;
+ font-size: 16px;
+ background-color: var(--pastel-red);
+ padding: 0.5rem 1.5rem;
+ border: 0;
+ outline: 0;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ margin: 5px;
}
-.VideoPlayer {
- margin: 0px auto;
- width: auto;
- height: auto;
+.video {
+ width: 60vw;
font-family: "Lexend Deca", serif;
}
+.VideoPlayer {
+ width: 100%;
+}
+
@media screen and (max-width: 768px) {
- .Video {
+ .video {
width: 100%;
}
|