diff options
| author | real-zephex <[email protected]> | 2024-06-12 15:37:30 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-06-12 15:37:30 +0530 |
| commit | 493e3f4568d0eb33312b160dcbb9cf412999824b (patch) | |
| tree | ab8eec79db0cba6ac4d19a087bbe4c0065b18229 /src/app | |
| parent | 🚀 feat(download): implement direct manga downloads (diff) | |
| download | dramalama-493e3f4568d0eb33312b160dcbb9cf412999824b.tar.xz dramalama-493e3f4568d0eb33312b160dcbb9cf412999824b.zip | |
switched manga downloaded api to render
Diffstat (limited to 'src/app')
| -rw-r--r-- | src/app/anime/components/episode_buttons.jsx | 205 | ||||
| -rw-r--r-- | src/app/manga/components/descriptionTabs.jsx | 2 | ||||
| -rw-r--r-- | src/app/manga/components/downloadButton.jsx | 15 |
3 files changed, 1 insertions, 221 deletions
diff --git a/src/app/anime/components/episode_buttons.jsx b/src/app/anime/components/episode_buttons.jsx deleted file mode 100644 index 71f338f..0000000 --- a/src/app/anime/components/episode_buttons.jsx +++ /dev/null @@ -1,205 +0,0 @@ -"use client"; -import { useState, useEffect } from "react"; -import { MediaPlayer, MediaProvider } from "@vidstack/react"; -import "@vidstack/react/player/styles/default/theme.css"; -import "@vidstack/react/player/styles/default/layouts/video.css"; -import { - defaultLayoutIcons, - DefaultVideoLayout, -} from "@vidstack/react/player/layouts/default"; - -import styles from "../styles/buttons.module.css"; -import { video_url } from "../data-fetch/request"; -import { preFetchVideoLinks } from "./cacher"; -import { storeLocal } from "./storeHistory"; - -const EpisodesButtons = ({ data: data }) => { - const [videoLink, setVideoLink] = useState(null); - const [buttonGroups, setButtonGroups] = useState(null); - const [videoLoading, setVideoLoading] = useState(null); - - useEffect(() => { - setButtonGroups(createButtonGroups(0, 50)); - }, []); - - const groups = createGroups(data.episodes, 50); - - /** - * Retrieves the video URL for a given episode ID. - * This function handles the initializing, changing URL, and hiding the video player. - * @param {string} epID - The episode ID. - */ - async function getVideoURL(epID) { - setVideoLoading(true); - const data = await video_url(epID); - setVideoLink(data.sources[data.sources.length - 2].url); - setVideoLoading(false); - } - - /** - * Creates button groups for a range of episodes. - * @param {number} start - The starting index of episodes. - * @param {number} end - The ending index of episodes. - * @returns {JSX.Element} - Button groups JSX element. - */ - function createButtonGroups(start, end) { - try { - const buttons = document.getElementsByClassName("episode-button"); - for (let i = 0; i < buttons.length; i++) { - buttons[i].style.backgroundColor = "#1f1f1fd2"; - } - } catch (error) { - console.error( - "ERROR: This error is expected. This is done in order to reset the background color of the buttons. I can't think of a better way than this....so yeah.", - error.message - ); - } - - return ( - <div className={styles.animeButtonContainer}> - {data.episodes && - data.episodes.slice(start, end).map((item, index) => ( - <button - className={styles.dramaButton + " episode-button"} - key={index} - onClick={(event) => { - event.target.style.backgroundColor = - "var(--soft-purple)"; - getVideoURL(item.id); - store_to_local( - data.title, - data.image, - item.number, - data.id - ); - }} - > - {item.number} - </button> - ))} - </div> - ); - } - - /** - * Handles the change event of the select element. - * @param {Event} event - The change event object. - */ - function handleSelectChange(event) { - const selectedIndex = event.target.selectedIndex; - const selectedGroup = groups[selectedIndex]; - if (selectedGroup) { - setButtonGroups( - createButtonGroups( - selectedGroup[0].number - 1, - selectedGroup[selectedGroup.length - 1].number - ) - ); - preFetchVideoLinks( - data.episodes.slice( - selectedGroup[0].number - 1, - selectedGroup[selectedGroup.length - 1].number - ) - ); - } - } - - return ( - <main className={styles.Main}> - {data.episodes && ( - <select - onChange={(event) => handleSelectChange(event)} - className={styles.SelectClass} - > - {groups && - groups.map((item, index) => ( - <option key={index}> - {item[0].number} -{" "} - {item[item.length - 1].number} - </option> - ))} - </select> - )} - {buttonGroups} - {videoLoading && ( - <p style={{ margin: "0.5rem 0 0 0" }}>Loading...</p> - )} - {videoLink && ( - <div className={styles.videoPopUp} id="popup"> - <div className={styles.video}> - <MediaPlayer - title="dramaPlayer" - src={videoLink} - aspectRatio="16/9" - load="eager" - className={styles.VideoPlayer} - playsInline - id="videoPlayer" - volume={0.8} - > - <MediaProvider /> - <DefaultVideoLayout icons={defaultLayoutIcons} /> - </MediaPlayer> - <button - className={styles.closeButton} - onClick={() => { - setVideoLink(""); - }} - > - Close - </button> - </div> - </div> - )} - </main> - ); -}; - -/** - * Divides an array into groups of a specified size. - * @param {Array} array - The array to be divided. - * @param {number} size - The size of each group. - * @returns {Array} - An array containing groups of elements. - */ -function createGroups(array, size) { - const groups = []; - for (let i = 0; i < array.length; i += size) { - groups.push(array.slice(i, i + size)); - } - return groups; -} - -/** - * Stores watch history to local storage. - * @param {string} name - The name of the episode. - * @param {string} image - The image URL of the episode. - * @param {number} episode - The episode number. - * @param {string} id - The ID of the episode. - */ -function store_to_local(name, image, episode, id) { - const currentDate = new Date(); - - try { - let newData = { - name: name, - image: image, - episode: episode, - id: id, - type: "anime", - date: `${currentDate.getDate()}-${String( - currentDate.getMonth() + 1 - ).padStart(2, "0")}`, - time: `${currentDate.getHours()}:${String( - currentDate.getMinutes() - ).padStart(2, "0")}`, - }; - storeLocal(newData); - } catch (error) { - console.error( - "Some error occurred during the process of saving your watch history to local storage. Please try again or contact us on GitHub if this issue persists.", - error.message - ); - } -} - -export default EpisodesButtons; diff --git a/src/app/manga/components/descriptionTabs.jsx b/src/app/manga/components/descriptionTabs.jsx index b7fe612..df5b6af 100644 --- a/src/app/manga/components/descriptionTabs.jsx +++ b/src/app/manga/components/descriptionTabs.jsx @@ -23,7 +23,7 @@ const MangaDescriptionTabs = ({ data }) => { async function get_pages(id) { setPages(<p className="text-center">Loading...</p>); - setUrl(`https://manga-downloader-api.vercel.app/${id}`); + setUrl(`https://mangadex-downloader.onrender.com/${id}`); const data = await MangaChapters(id); setPages(data); } diff --git a/src/app/manga/components/downloadButton.jsx b/src/app/manga/components/downloadButton.jsx deleted file mode 100644 index 0942dfb..0000000 --- a/src/app/manga/components/downloadButton.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Button } from "@nextui-org/react"; -import Link from "next/link"; - -const DownloadButton = async ({ id: id }) => { - return ( - <Button - as={Link} - href={`https://manga-downloader-api.vercel.app/${id}`} - > - Download - </Button> - ); -}; - -export default DownloadButton; |