diff options
| author | real-zephex <[email protected]> | 2024-03-26 13:21:55 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-03-26 13:21:55 +0530 |
| commit | 3acac648ad6f7c220a48ff9f92f42e814c2097ab (patch) | |
| tree | 894bd3085ca1021566ff68577136305c79bd2ea5 /src/app/video | |
| parent | idek (diff) | |
| download | dramalama-3acac648ad6f7c220a48ff9f92f42e814c2097ab.tar.xz dramalama-3acac648ad6f7c220a48ff9f92f42e814c2097ab.zip | |
restructured files
Diffstat (limited to 'src/app/video')
| -rw-r--r-- | src/app/video/[animeId]/page.jsx | 56 | ||||
| -rw-r--r-- | src/app/video/loading.css | 346 | ||||
| -rw-r--r-- | src/app/video/loading.jsx | 9 | ||||
| -rw-r--r-- | src/app/video/video.css | 30 |
4 files changed, 0 insertions, 441 deletions
diff --git a/src/app/video/[animeId]/page.jsx b/src/app/video/[animeId]/page.jsx deleted file mode 100644 index c0339f7..0000000 --- a/src/app/video/[animeId]/page.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import { MediaPlayer, MediaProvider } from "@vidstack/react"; -import "@vidstack/react/player/styles/base.css"; -import "@vidstack/react/player/styles/plyr/theme.css"; -import { - PlyrLayout, - plyrLayoutIcons, -} from "@vidstack/react/player/layouts/plyr"; -import "../video.css"; -import { redirect } from "next/navigation"; - -export default async function Video({ params }) { - const id = params.animeId; - - // Getting the episode number and the anime name. Kindly ignore! - const words = id.split("-"); - const last_two = words.slice(-2).join(" "); - const remainingWords = words.slice(0, -2).join(" "); - - const data = await getVideoLink(id); - - if (data.message) { - redirect("/404"); - } - - const link = data.sources[4].url; - - return ( - <div> - <div className="video2"> - <p> - {last_two} - {remainingWords} - </p> - <MediaPlayer - title={words} - src={link} - className="testPlayer" - playsInline - aspectRatio="16/9" - load="eager" - > - <MediaProvider /> - <PlyrLayout icons={plyrLayoutIcons} /> - </MediaPlayer> - </div> - </div> - ); -} - -async function getVideoLink(id) { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id, - { next: { revalidate: 3600 } } // Video links are revalidated after an hour - ); - const data = res.json(); - return data; -} diff --git a/src/app/video/loading.css b/src/app/video/loading.css deleted file mode 100644 index aa3a519..0000000 --- a/src/app/video/loading.css +++ /dev/null @@ -1,346 +0,0 @@ -.loadingContainer { - color: white; - display: flex; - justify-content: center; - align-items: center; - height: 80dvh; -} - - -.text-flicker-in-glow { - -webkit-animation: text-flicker-in-glow 4s linear both; - animation: text-flicker-in-glow 4s linear both; - font-size: 36px; - font-family: "Kanit"; -} - -/* ---------------------------------------------- - * Generated by Animista on 2024-3-21 9:58:16 - * Licensed under FreeBSD License. - * See http://animista.net/license for more info. - * w: http://animista.net, t: @cssanimista - * ---------------------------------------------- */ - -/** - * ---------------------------------------- - * animation text-flicker-in-glow - * ---------------------------------------- - */ - -@-webkit-keyframes text-flicker-in-glow { - 0% { - opacity: 0; - } - - 10% { - opacity: 0; - text-shadow: none; - } - - 10.1% { - opacity: 1; - text-shadow: none; - } - - 10.2% { - opacity: 0; - text-shadow: none; - } - - 20% { - opacity: 0; - text-shadow: none; - } - - 20.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); - } - - 20.6% { - opacity: 0; - text-shadow: none; - } - - 30% { - opacity: 0; - text-shadow: none; - } - - 30.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.5% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.6% { - opacity: 0; - text-shadow: none; - } - - 45% { - opacity: 0; - text-shadow: none; - } - - 45.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 50% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55.1% { - opacity: 0; - text-shadow: none; - } - - 57% { - opacity: 0; - text-shadow: none; - } - - 57.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60.1% { - opacity: 0; - text-shadow: none; - } - - 65% { - opacity: 0; - text-shadow: none; - } - - 65.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75.1% { - opacity: 0; - text-shadow: none; - } - - 77% { - opacity: 0; - text-shadow: none; - } - - 77.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85.1% { - opacity: 0; - text-shadow: none; - } - - 86% { - opacity: 0; - text-shadow: none; - } - - 86.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 100% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } -} - -@keyframes text-flicker-in-glow { - 0% { - opacity: 0; - } - - 10% { - opacity: 0; - text-shadow: none; - } - - 10.1% { - opacity: 1; - text-shadow: none; - } - - 10.2% { - opacity: 0; - text-shadow: none; - } - - 20% { - opacity: 0; - text-shadow: none; - } - - 20.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.25); - } - - 20.6% { - opacity: 0; - text-shadow: none; - } - - 30% { - opacity: 0; - text-shadow: none; - } - - 30.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.5% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 30.6% { - opacity: 0; - text-shadow: none; - } - - 45% { - opacity: 0; - text-shadow: none; - } - - 45.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 50% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25); - } - - 55.1% { - opacity: 0; - text-shadow: none; - } - - 57% { - opacity: 0; - text-shadow: none; - } - - 57.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35); - } - - 60.1% { - opacity: 0; - text-shadow: none; - } - - 65% { - opacity: 0; - text-shadow: none; - } - - 65.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 75.1% { - opacity: 0; - text-shadow: none; - } - - 77% { - opacity: 0; - text-shadow: none; - } - - 77.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 85.1% { - opacity: 0; - text-shadow: none; - } - - 86% { - opacity: 0; - text-shadow: none; - } - - 86.1% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } - - 100% { - opacity: 1; - text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1); - } -} - -@media (prefers-color-scheme: light) { - .loadingContainer { - color: black; - } -}
\ No newline at end of file diff --git a/src/app/video/loading.jsx b/src/app/video/loading.jsx deleted file mode 100644 index dfa397c..0000000 --- a/src/app/video/loading.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import "./loading.css"; - -export default function Loading() { - return ( - <div className="loadingContainer"> - <p className="text-flicker-in-glow">Loading</p> - </div> - ); -} diff --git a/src/app/video/video.css b/src/app/video/video.css deleted file mode 100644 index 5ccb58f..0000000 --- a/src/app/video/video.css +++ /dev/null @@ -1,30 +0,0 @@ -.video2 { - display: flex; - flex-direction: column; - align-items: center; - margin: 0px auto; - width: 50%; -} - -.testPlayer { - border-radius: 10px; -} - -.video2 p { - color: white; - font-family: "Lato"; - font-size: 20px; - text-align: center; -} - -@media (prefers-color-scheme: light) { - .video2 p { - color: black; - } -} - -@media screen and (max-width: 768px) { - .video2 { - width: 100%; - } -}
\ No newline at end of file |