{i.type}	{i.data}

61 |

{data.results.title}

62 | 63 | Sinopsis:

64 | 65 | 66 | 67 | 68 | 69 | 74 | -------------------------------------------------------------------------------- /src/pages/completed.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export const prerender = false; 3 | import Layout from "~/layouts/Layout.astro"; 4 | import Card from "~/components/ui/Card.astro"; 5 | import { fetchData } from "~/utils/api"; 6 | 7 | const data = await fetchData("completed"); 8 | --- 9 | 10 | 11 |

12 | 13 |

17 | Loading... 18 |

19 |

20 | 21 | 65 | 66 | 67 | 86 | 87 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export const prerender = false; 3 | import Layout from "~/layouts/Layout.astro"; 4 | import Carousel from "~/components/ui/Carousel.astro"; 5 | import Card from "~/components/ui/Card.astro"; 6 | import { fetchData } from "~/utils/api"; 7 | 8 | const homeRes = await fetchData("home"); 9 | const data = await fetchData("ongoing"); 10 | --- 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

22 | Loading... 23 |

24 |

25 | 26 | 70 | 71 | 72 | 91 | 92 | -------------------------------------------------------------------------------- /src/components/ui/Card.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Data { 3 | title: string; 4 | url: string; 5 | pages: string; 6 | img: string; 7 | tipe: string; 8 | episode: string; 9 | } 10 | 11 | interface Props { 12 | data: Data[] | null; 13 | loadingNumber: number; 14 | search: boolean; 15 | } 16 | 17 | const { data, search } = Astro.props; 18 | --- 19 | 20 | { 21 | data && 22 | data.map((item, index) => { 23 | const imgSrc = item.image?.includes("wp.com") 24 | ? `${item.image}?quality=50&w=240` 25 | : item.image || null; 26 | 27 | const title = item.title; 28 | const episode = item.episode 29 | ? `?episode=${item.episode.split(" ")[1]?.split("/")[0]}` 30 | : ""; 31 | 32 | const linkTo = `/watch/${item.id}/${item.slug}${episode}`; 33 | 34 | return ( 35 |

39 |

49 | 50 |

51 |

52 | {title} 53 |

54 | 55 |

56 | 82 |

83 | {item.episode || item.type || item.status} 84 |

85 |

86 |

87 |

88 | ); 89 | }) 90 | } 91 | 92 | 101 | -------------------------------------------------------------------------------- /src/scripts/infinite-scroll.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module InfiniteScroll 3 | * @description Implements infinite scrolling functionality by dynamically fetching 4 | * and appending content to the page as the user scrolls. 5 | */ 6 | 7 | import { fetchData } from "../utils/api.js"; 8 | 9 | /** 10 | * Intersection observer used to detect when to load more content. 11 | * @type {IntersectionObserver|null} 12 | */ 13 | export let observer = null; 14 | 15 | /** 16 | * Current page number used for pagination (initially set to 2). 17 | * @type {number} 18 | */ 19 | export let currentPage = 2; 20 | 21 | /** 22 | * Indicates if data is currently being fetched. 23 | * @type {boolean} 24 | */ 25 | export let isLoading = false; 26 | 27 | /** 28 | * Flag indicating whether there is a next page available. 29 | * @type {boolean} 30 | */ 31 | export let hasNextPage = true; 32 | 33 | /** 34 | * Initializes the infinite scroll functionality. 35 | * 36 | * This function sets up the required DOM elements, creates a loading indicator, 37 | * and initializes an IntersectionObserver that triggers data loading when the 38 | * user scrolls near the bottom of the content area. 39 | * 40 | * @param {string} endpoint - The API endpoint URL used to fetch data. 41 | */ 42 | export function initInfiniteScroll(endpoint) { 43 | // Reset pagination and state variables. 44 | currentPage = 2; 45 | isLoading = false; 46 | hasNextPage = true; 47 | 48 | const content = document.getElementById("content"); 49 | const skeletons = document.querySelectorAll("#loading"); 50 | const template = document.getElementById("card-template"); 51 | 52 | // Validate that necessary DOM elements exist. 53 | if (!content || !skeletons.length || !template) { 54 | console.error( 55 | "Infinite scroll initialization failed: Make sure if u change some id element u also edit the JSHT bruh", 56 | ); 57 | return; 58 | } 59 | 60 | // Choose the last skeleton as the loading indicator target. 61 | let loadingIndicator = skeletons[skeletons.length - 1]; 62 | 63 | /** 64 | * Removes excess child elements from the content container to improve performance. 65 | * 66 | * Prevents the page from accumulating too many DOM elements, which is important 67 | * for performance on devices with limited resources. 68 | */ 69 | function cleanUpDOM() { 70 | const THRESHOLD_ITEMS = 100; 71 | while (content.children.length > THRESHOLD_ITEMS) { 72 | content.removeChild(content.firstChild); 73 | } 74 | } 75 | 76 | /** 77 | * Creates and returns a card element populated with the given item data. 78 | * 79 | * Clones a pre-defined template and updates its image, title, link, and additional 80 | * info (such as episode, type, or status) based on the provided item object. 81 | * 82 | * @param {Object} item - The data object for a single card. 83 | * @param {string} [item.image] - URL of the image to display. 84 | * @param {string} [item.title] - Title text for the card. 85 | * @param {string} [item.episode] - Episode information (used to construct query parameters). 86 | * @param {string} [item.link] - Optional link URL; if not provided, a default is constructed. 87 | * @param {number|string} [item.id] - Unique identifier used in constructing a default link. 88 | * @param {string} [item.slug] - Slug used in constructing a default link. 89 | * @param {string} [item.type] - Additional type information. 90 | * @param {string} [item.status] - Additional status information. 91 | * @returns {HTMLElement} The populated card element. 92 | */ 93 | function createCard(item) { 94 | const cardFragment = template.content.cloneNode(true); 95 | const card = cardFragment.querySelector(".card"); 96 | 97 | const img = card.querySelector("img"); 98 | img.src = item.image || "placeholder.jpg"; 99 | img.alt = item.title || "No Title"; 100 | 101 | const titleElem = card.querySelector("h3"); 102 | titleElem.textContent = item.title || "No Title"; 103 | 104 | const episode = item.episode 105 | ? `?episode=${item.episode.split(" ")[1]?.split("/")[0]}` 106 | : ""; 107 | const linkTo = item.link 108 | ? item.link 109 | : `/watch/${item.id}/${item.slug}${episode}`; 110 | const link = card.querySelector("a"); 111 | link.href = linkTo; 112 | 113 | const infoElem = card.querySelector("p"); 114 | infoElem.textContent = item.episode || item.type || item.status || ""; 115 | 116 | return card; 117 | } 118 | 119 | /** 120 | * Loads additional data from the API and appends new cards to the content. 121 | * 122 | * Sets the loading state to true, fetches data for the specified page, and for 123 | * each result, creates a card and inserts it before the loading indicator. If no 124 | * further data is available, disconnects the observer and replaces the loading 125 | * indicator with a fallback card. 126 | * 127 | * @async 128 | * @param {number} page - The page number to load. 129 | * @returns {Promise} 130 | */ 131 | async function loadMoreData(page) { 132 | isLoading = true; 133 | const data = await fetchData(endpoint, page); 134 | 135 | if (data && Array.isArray(data.results)) { 136 | data.results.forEach((item) => { 137 | content.insertBefore(createCard(item), loadingIndicator); 138 | }); 139 | cleanUpDOM(); 140 | } 141 | 142 | if (data?.pagination?.[0]?.next) { 143 | hasNextPage = true; 144 | } else { 145 | hasNextPage = false; 146 | if (observer) { 147 | observer.disconnect(); 148 | } 149 | // Display a fallback card when no more data is available. 150 | const noMoreDataCard = createCard({ 151 | image: 152 | "https://raw.githubusercontent.com/mitsuav/resources/refs/heads/main/wallpaper.webp", 153 | title: "AnimEZ", 154 | link: "https://animez.my.id", 155 | episode: "Mitsuaa", 156 | type: "", 157 | status: "", 158 | }); 159 | content.replaceChild(noMoreDataCard, loadingIndicator); 160 | } 161 | isLoading = false; 162 | } 163 | 164 | // Disconnect any existing observer before setting up a new one. 165 | if (observer) { 166 | observer.disconnect(); 167 | } 168 | 169 | // Create an IntersectionObserver that triggers data loading when the loading indicator is visible. 170 | observer = new IntersectionObserver( 171 | (entries) => { 172 | entries.forEach((entry) => { 173 | if (entry.isIntersecting && !isLoading && hasNextPage) { 174 | currentPage++; 175 | loadMoreData(currentPage); 176 | } 177 | }); 178 | }, 179 | { rootMargin: "0px 0px 100px 0px" }, 180 | ); 181 | 182 | // Optionally expose the observer on the window for debugging. 183 | window.__infiniteScrollObserver = observer; 184 | 185 | // Load the initial data and start observing the loading indicator. 186 | loadMoreData(currentPage); 187 | observer.observe(loadingIndicator); 188 | } 189 | 190 | // If you are Dizzy after seeing this, I suggest you to take a rest and keep scroll Fesnuk 191 | -------------------------------------------------------------------------------- /src/scripts/watch.js: -------------------------------------------------------------------------------- 1 | // watch.js 2 | import { 3 | VidstackPlayer, 4 | VidstackPlayerLayout, 5 | } from "https://cdn.vidstack.io/player"; 6 | import { fetchWatchData } from "../utils/api.js"; 7 | 8 | /** 9 | * @fileoverview Handles the watch page functionality including fetching video data, 10 | * creating and updating the video player, and managing episode navigation. 11 | */ 12 | 13 | /** 14 | * The current instance of the video player. 15 | * @type {Object|null} 16 | */ 17 | let playerInstance = null; 18 | 19 | /** 20 | * Indicates whether the watch page is active. 21 | * @type {boolean} 22 | */ 23 | let pageActive = true; 24 | 25 | /** 26 | * Stores the current AbortController for cancelling pending API requests. 27 | * @type {AbortController|null} 28 | */ 29 | let currentAbortController = null; 30 | 31 | /** 32 | * Navigation data for episodes fetched from the API. 33 | * Typically an array where the previous and next episodes are stored. 34 | * @type {Object|null} 35 | */ 36 | let navData = null; 37 | 38 | /** 39 | * Extracts the video ID and slug from the URL pathname. 40 | * 41 | * The URL is split by "/" and the expected ID and slug are located at index 2 and 3. 42 | * 43 | * @returns {{id: string, slug: string}} An object containing the id and slug. 44 | */ 45 | function getIdAndSlug() { 46 | const parts = window.location.pathname.split("/"); 47 | return { id: parts[2], slug: parts[3] }; 48 | } 49 | 50 | /** 51 | * Retrieves the current episode number from an input element. 52 | * 53 | * @param {HTMLInputElement} episodeInput - The input element containing the episode number. 54 | * @returns {number} The episode number. 55 | */ 56 | function getEpisode(episodeInput) { 57 | return Number(episodeInput.value); 58 | } 59 | 60 | /** 61 | * Fetches watch data from the API for the current video using the provided episode input. 62 | * 63 | * If a previous API request is pending, it aborts that request before initiating a new one. 64 | * 65 | * @async 66 | * @param {HTMLInputElement} episodeInput - The input element containing the episode number. 67 | * @returns {Promise} The fetched data object or null if an error occurs. 68 | */ 69 | async function fetchWatchApi(episodeInput) { 70 | if (currentAbortController) { 71 | currentAbortController.abort(); 72 | } 73 | currentAbortController = new AbortController(); 74 | const { id, slug } = getIdAndSlug(); 75 | const episode = getEpisode(episodeInput); 76 | try { 77 | const data = await fetchWatchData(id, slug, episode); 78 | return data; 79 | } catch (error) { 80 | console.error("Error fetching watch data:", error); 81 | return null; 82 | } 83 | } 84 | 85 | /** 86 | * Creates and initializes the video player if valid video data exists. 87 | * 88 | * If the page is inactive or hidden, the function returns early. 89 | * When video data is available, it hides the player information element, 90 | * displays the player container, and creates a player instance using VidstackPlayer. 91 | * Otherwise, it updates the player info element with a message indicating the video is unavailable. 92 | * 93 | * @async 94 | * @param {Object} data - The watch data object returned from the API. 95 | * @param {HTMLElement} playerInfo - The element used to display player information or error messages. 96 | * @param {HTMLElement} playerContainer - The container element where the video player is rendered. 97 | * @returns {Promise} The video player instance or null if creation failed. 98 | */ 99 | async function createPlayer(data, playerInfo, playerContainer) { 100 | if (!pageActive || document.visibilityState === "hidden") return null; 101 | if (data && data.video?.[0]?.src) { 102 | playerInfo.classList.add("hidden"); 103 | playerContainer.classList.remove("hidden"); 104 | 105 | const player = await VidstackPlayer.create({ 106 | target: "#player", 107 | title: data.title, 108 | src: data.video.map((video) => ({ 109 | src: video.src, 110 | type: "video/mp4", 111 | size: video.size, 112 | })), 113 | layout: new VidstackPlayerLayout(), 114 | }); 115 | return player; 116 | } else { 117 | playerInfo.innerHTML = 118 | "Video belum tersedia, mungkin sedang proses upload. Silahkan coba lagi nanti. Jika masalah berlanjut, silahkan hubungi mitsuaa."; 119 | return null; 120 | } 121 | } 122 | 123 | /** 124 | * Removes any video elements inside the player container. 125 | * 126 | * Iterates over each

{item.title}

41 |

46 |

52 | {title} 53 |