diff options
Diffstat (limited to 'src/app/anime/components')
| -rw-r--r-- | src/app/anime/components/cacher.js | 29 | ||||
| -rw-r--r-- | src/app/anime/components/episode_buttons.jsx | 205 | ||||
| -rw-r--r-- | src/app/anime/components/popularAnimes.jsx | 51 | ||||
| -rw-r--r-- | src/app/anime/components/recentEpisodes.jsx | 54 | ||||
| -rw-r--r-- | src/app/anime/components/search.jsx | 64 | ||||
| -rw-r--r-- | src/app/anime/components/search_results.jsx | 42 | ||||
| -rw-r--r-- | src/app/anime/components/storeHistory.js | 35 | ||||
| -rw-r--r-- | src/app/anime/components/topAiring.jsx | 54 |
8 files changed, 534 insertions, 0 deletions
diff --git a/src/app/anime/components/cacher.js b/src/app/anime/components/cacher.js new file mode 100644 index 0000000..d3008fa --- /dev/null +++ b/src/app/anime/components/cacher.js @@ -0,0 +1,29 @@ +"use server"; + +import { info_url, watch_url } from "../../../../utils/anime_urls"; + +export async function preFetchAnimeInfo(data) { + try { + const fetchPromises = data.results.map(async (element) => { + await fetch(info_url(element.id), { next: { revalidate: 21600 } }); + }); + + await Promise.all(fetchPromises); + console.log("Anime info pre-fetched successfully!"); + } catch (error) { + console.error("Error occurred while pre-fetching anime info: ", error); + } +} + +export async function preFetchVideoLinks(data) { + try { + const fetchPromises = data.map(async (element) => { + await fetch(watch_url(element.id), { next: { revalidate: 21600 } }); + }); + + await Promise.all(fetchPromises); + console.log("Anime video links info pre-fetched successfully!"); + } catch (error) { + console.error("Error occurred while pre-fetching anime info: ", error); + } +} diff --git a/src/app/anime/components/episode_buttons.jsx b/src/app/anime/components/episode_buttons.jsx new file mode 100644 index 0000000..013dee1 --- /dev/null +++ b/src/app/anime/components/episode_buttons.jsx @@ -0,0 +1,205 @@ +"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;
\ No newline at end of file diff --git a/src/app/anime/components/popularAnimes.jsx b/src/app/anime/components/popularAnimes.jsx new file mode 100644 index 0000000..2259a42 --- /dev/null +++ b/src/app/anime/components/popularAnimes.jsx @@ -0,0 +1,51 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Atkinson_Hyperlegible } from "next/font/google"; + +import styles from "../styles/pop_recent_top.module.css"; +import { popular, anime_info } from "../data-fetch/request"; +import { preFetchAnimeInfo, preFetchVideoLinks } from "./cacher"; + +const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" }); + +const PopularAnimes = async () => { + const data = await popular(); + + preFetchAnimeInfo(data); + + return ( + <main className={styles.Main}> + <section> + <h2 className={styles.AnimeHeaderText}>Popular Animes</h2> + <div className={styles.AnimeContainer}> + {data && + data.results.map((item, index) => ( + <Link + key={index} + href={`/anime/${item.id}`} + shallow + style={{ + color: "white", + textDecoration: "none", + }} + className={atkinson.className} + title={item.title} + > + <section className={styles.AnimeEntry}> + <Image + src={item.image} + width={167} + height={267} + alt="Anime Poster Image" + /> + <p>{item.title}</p> + </section> + </Link> + ))} + </div> + </section> + </main> + ); +}; + +export default PopularAnimes; diff --git a/src/app/anime/components/recentEpisodes.jsx b/src/app/anime/components/recentEpisodes.jsx new file mode 100644 index 0000000..43ad1de --- /dev/null +++ b/src/app/anime/components/recentEpisodes.jsx @@ -0,0 +1,54 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Atkinson_Hyperlegible } from "next/font/google"; + +import styles from "../styles/pop_recent_top.module.css"; +import { recent } from "../data-fetch/request"; +import { preFetchAnimeInfo } from "./cacher"; + +const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" }); + +const RecentAnimes = async () => { + const data = await recent(); + + preFetchAnimeInfo(data); + + return ( + <main className={styles.Main}> + <section> + <h2 className={styles.AnimeHeaderText}>Recent Releases</h2> + <div className={styles.AnimeContainer}> + {data && + data.results.map((item, index) => ( + <Link + key={index} + href={`/anime/${item.id}`} + shallow + style={{ + color: "white", + textDecoration: "none", + }} + className={atkinson.className} + title={item.title} + > + <section className={styles.AnimeEntry}> + <Image + src={item.image} + width={167} + height={267} + alt="Anime Poster Image" + /> + <p>{item.title}</p> + <p className={styles.EpisodeText}> + Episode: {item.episodeNumber} + </p> + </section> + </Link> + ))} + </div> + </section> + </main> + ); +}; + +export default RecentAnimes; diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx new file mode 100644 index 0000000..66c491a --- /dev/null +++ b/src/app/anime/components/search.jsx @@ -0,0 +1,64 @@ +"use client"; + +import { FaSearch } from "react-icons/fa"; +import { useState } from "react"; +import Link from "next/link"; + +import styles from "../styles/search.module.css"; +import SearchResults from "./search_results"; + +const SearcBar = () => { + const [title, setTitle] = useState(""); + const [searchResults, setSearchResults] = useState(null); + const [loading, setLoading] = useState(false); + + const handleSearchInput = async (title) => { + setSearchResults(null); + setLoading(true); + setSearchResults(await SearchResults(title)); + setLoading(false); + }; + + return ( + <main> + <section className={styles.SearchBarContainer}> + <div className={styles.SearchInputContainer}> + <FaSearch color="white" /> + <input + placeholder="Enter anime title" + name="Anime Title" + type="text" + onChange={(event) => { + if (event.target.value.trim() != "") { + setTitle(event.target.value); + } + }} + autoComplete="off" + onKeyDown={async (event) => { + if ( + event.code === "Enter" || + event.key === "Enter" || + event.code === 13 + ) { + await handleSearchInput(title); + } + }} + ></input> + </div> + <Link shallow href={"/anime/continueWatching"}> + <button className={styles.animeHistoryButton}> + History + </button> + </Link> + </section> + {loading && ( + <p className={styles.SearchLoading}> + Please wait while we crunch up all the data..... + </p> + )} + {searchResults} + </main> + ); +}; + +export default SearcBar; diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx new file mode 100644 index 0000000..d4c8146 --- /dev/null +++ b/src/app/anime/components/search_results.jsx @@ -0,0 +1,42 @@ +import { Atkinson_Hyperlegible } from "next/font/google"; +import Link from "next/link"; +import Image from "next/image"; + +import styles from "../styles/search.module.css"; +import { search_results } from "../data-fetch/request"; +import { preFetchAnimeInfo } from "./cacher"; + +const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" }); + +const SearchResults = async (title) => { + const data = await search_results(title); + + preFetchAnimeInfo(data); + + return ( + <section className={styles.SearchResultsContainer}> + {data && + data.results.map((item, index) => ( + <Link + shallow + href={`/anime/${item.id}`} + key={index} + className={atkinson.className} + style={{ color: "white", textDecoration: "none" }} + > + <div className={styles.AnimeEntry}> + <p>{item.title}</p> + <Image + src={item.image} + width={140} + height={200} + alt="Anime Poster" + /> + </div> + </Link> + ))} + </section> + ); +}; + +export default SearchResults; diff --git a/src/app/anime/components/storeHistory.js b/src/app/anime/components/storeHistory.js new file mode 100644 index 0000000..bd41815 --- /dev/null +++ b/src/app/anime/components/storeHistory.js @@ -0,0 +1,35 @@ +"use client"; + +export function storeLocal(watchData) { + const currentDate = new Date(); + const jsonData = localStorage.getItem("data"); + const dataObject = jsonData ? JSON.parse(jsonData) : {}; + + if (!dataObject.watchHis) { + dataObject.watchHis = []; + } + + let found = false; + dataObject.watchHis.forEach((element) => { + if (element.name === watchData.name) { + let episode = watchData.episode; + let date = `${currentDate.getDate()}-${String( + currentDate.getMonth() + 1 + ).padStart(2, "0")}`; + let time = `${currentDate.getHours()}:${String( + currentDate.getMinutes() + ).padStart(2, "0")}`; + element.episode = episode; + element.date = date; + element.time = time; + found = true; + } + }); + + if (!found) { + dataObject.watchHis.push(watchData); + } + + let updatedData = JSON.stringify(dataObject); + localStorage.setItem("data", updatedData); +} diff --git a/src/app/anime/components/topAiring.jsx b/src/app/anime/components/topAiring.jsx new file mode 100644 index 0000000..28d3f6d --- /dev/null +++ b/src/app/anime/components/topAiring.jsx @@ -0,0 +1,54 @@ +import Link from "next/link"; +import Image from "next/image"; +import { Atkinson_Hyperlegible } from "next/font/google"; + +import styles from "../styles/pop_recent_top.module.css"; +import { top_airing } from "../data-fetch/request"; +import { preFetchAnimeInfo } from "./cacher"; + +const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" }); + +const TopAiringAnimes = async () => { + const data = await top_airing(); + + preFetchAnimeInfo(data); + + return ( + <main className={styles.Main}> + <section> + <h2 className={styles.AnimeHeaderText}>Top Airing Animes</h2> + <div className={styles.AnimeContainer}> + {data && + data.results.map((item, index) => ( + <Link + key={index} + href={`/anime/${item.id}`} + shallow + style={{ + color: "white", + textDecoration: "none", + }} + className={atkinson.className} + title={item.title} + > + <section className={styles.AnimeEntry}> + <Image + src={item.image} + width={167} + height={267} + alt="Anime Poster Image" + /> + <p>{item.title}</p> + <p className={styles.EpisodeText}> + Episode: {item.episodeNumber} + </p> + </section> + </Link> + ))} + </div> + </section> + </main> + ); +}; + +export default TopAiringAnimes; |