aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/admin/dashboard/index.js134
-rw-r--r--components/admin/layout.js75
-rw-r--r--components/admin/meta/AppendMeta.js252
-rw-r--r--components/anime/episode.js30
-rw-r--r--components/anime/mobile/reused/description.js2
-rw-r--r--components/anime/viewMode/thumbnailDetail.js4
-rw-r--r--components/anime/viewMode/thumbnailOnly.js2
-rw-r--r--components/anime/viewSelector.js4
-rw-r--r--components/home/schedule.js2
-rw-r--r--components/searchPalette.js2
-rw-r--r--components/shared/NavBar.js2
-rw-r--r--components/watch/player/artplayer.js43
-rw-r--r--components/watch/player/playerComponent.js5
-rw-r--r--components/watch/secondary/episodeLists.js7
14 files changed, 539 insertions, 25 deletions
diff --git a/components/admin/dashboard/index.js b/components/admin/dashboard/index.js
new file mode 100644
index 0000000..64a1d6f
--- /dev/null
+++ b/components/admin/dashboard/index.js
@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+
+export default function AdminDashboard({
+ animeCount,
+ infoCount,
+ metaCount,
+ report,
+}) {
+ const [message, setMessage] = useState("");
+ const [selectedTime, setSelectedTime] = useState("");
+ const [unixTimestamp, setUnixTimestamp] = useState(null);
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ if (selectedTime) {
+ const unixTime = Math.floor(new Date(selectedTime).getTime() / 1000);
+ setUnixTimestamp(unixTime);
+ }
+ };
+ return (
+ <div className="flex flex-col gap-5 px-5 py-10 h-full">
+ <div className="flex flex-col gap-2">
+ <p className="font-semibold">Stats</p>
+ <div className="grid grid-cols-3 gap-5">
+ <div className="flex-center flex-col bg-secondary rounded p-5">
+ <p className="font-karla text-4xl">{animeCount}</p>
+ <p className="font-karla text-xl">Anime</p>
+ </div>
+ <div className="flex-center flex-col bg-secondary rounded p-5">
+ <p className="font-karla text-4xl">{infoCount}</p>
+ <p className="font-karla text-xl">detail info</p>
+ </div>
+ <div className="flex-center flex-col bg-secondary rounded p-5">
+ <p className="font-karla text-4xl">{metaCount}</p>
+ <p className="font-karla text-xl">Metadata</p>
+ </div>
+ </div>
+ </div>
+ <div className="grid grid-cols-2 gap-5 h-full">
+ <div className="flex flex-col gap-2">
+ <p className="font-semibold">Broadcast</p>
+ <div className="flex flex-col justify-between bg-secondary rounded p-5 h-full">
+ <form onSubmit={handleSubmit}>
+ <div className="mb-4">
+ <label
+ htmlFor="message"
+ className="block text-txt font-light mb-2"
+ >
+ Message
+ </label>
+ <input
+ type="text"
+ id="message"
+ value={message}
+ onChange={(e) => setMessage(e.target.value)}
+ required
+ className="w-full px-3 py-2 border rounded-md focus:outline-none text-black"
+ />
+ </div>
+ <div className="mb-4">
+ <label
+ htmlFor="selectedTime"
+ className="block text-txt font-light mb-2"
+ >
+ Select Time
+ </label>
+ <input
+ type="datetime-local"
+ id="selectedTime"
+ value={selectedTime}
+ onChange={(e) => setSelectedTime(e.target.value)}
+ required
+ className="w-full px-3 py-2 border rounded-md focus:outline-none text-black"
+ />
+ </div>
+ <button
+ type="submit"
+ className="bg-image text-white py-2 px-4 rounded-md hover:bg-opacity-80 transition duration-300"
+ >
+ Submit
+ </button>
+ </form>
+ {unixTimestamp && (
+ <p>
+ Unix Timestamp: <strong>{unixTimestamp}</strong>
+ </p>
+ )}
+ </div>
+ </div>
+ <div className="flex flex-col gap-2">
+ <p className="font-semibold">Recent Reports</p>
+ <div className="bg-secondary rounded p-5 h-full">
+ <div className="rounded overflow-hidden w-full h-full">
+ {report?.map((i, index) => (
+ <div
+ key={index}
+ className="odd:bg-primary/80 even:bg-primary/40 p-2 flex justify-between items-center"
+ >
+ {i.desc}{" "}
+ {i.severity === "Low" && (
+ <span className="relative w-5 h-5 flex-center shrink-0">
+ {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
+ <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
+ </span>
+ )}
+ {i.severity === "Medium" && (
+ <span className="relative w-5 h-5 flex-center shrink-0">
+ {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
+ <span className="relative inline-flex rounded-full h-3 w-3 bg-amber-500"></span>
+ </span>
+ )}
+ {i.severity === "High" && (
+ <span className="relative w-5 h-5 flex-center shrink-0">
+ {/* <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></span> */}
+ <span className="relative animate-pulse inline-flex rounded-full h-3 w-3 bg-rose-500"></span>
+ </span>
+ )}
+ {i.severity === "Critical" && (
+ <span className="relative w-5 h-5 flex-center shrink-0">
+ <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-900 opacity-75"></span>
+ <span className="relative inline-flex rounded-full h-3 w-3 bg-red-900"></span>
+ </span>
+ )}
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="w-full h-full">a</div>
+ </div>
+ );
+}
diff --git a/components/admin/layout.js b/components/admin/layout.js
new file mode 100644
index 0000000..3209dcf
--- /dev/null
+++ b/components/admin/layout.js
@@ -0,0 +1,75 @@
+import {
+ CloudArrowUpIcon,
+ Cog6ToothIcon,
+ HomeIcon,
+ UserIcon,
+} from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+
+const Navigation = [
+ {
+ name: "Dashboard",
+ page: 1,
+ icon: <HomeIcon />,
+ current: false,
+ },
+ {
+ name: "Metadata",
+ page: 2,
+ icon: <CloudArrowUpIcon />,
+ current: false,
+ },
+ {
+ name: "Users",
+ page: 3,
+ icon: <UserIcon />,
+ current: false,
+ },
+ {
+ name: "Settings",
+ page: 4,
+ icon: <Cog6ToothIcon />,
+ current: false,
+ },
+];
+
+export default function AdminLayout({ children, page, setPage }) {
+ return (
+ <div className="relative w-screen h-screen">
+ <div className="absolute flex flex-col gap-5 top-0 left-0 py-2 bg-secondary w-[14rem] h-full">
+ <div className="flex flex-col px-3">
+ <p className="text-sm font-light text-action font-outfit">moopa</p>
+ <h1 className="text-2xl font-bold text-white">
+ Admin <br />
+ Dashboard
+ </h1>
+ </div>
+ <div className="flex flex-col px-1">
+ {Navigation.map((item, index) => (
+ <button
+ key={item.name}
+ onClick={() => {
+ setPage(item.page);
+ }}
+ className={`flex items-center gap-2 p-2 group ${
+ page == item.page ? "bg-image/50" : "text-txt"
+ } hover:bg-image rounded transition-colors duration-200 ease-in-out`}
+ >
+ <div
+ className={`w-5 h-5 ${
+ page == item.page ? "text-action" : "text-txt"
+ } group-hover:text-action`}
+ >
+ {item.icon}
+ </div>
+ <p>{item.name}</p>
+ </button>
+ ))}
+ </div>
+ </div>
+ <div className="ml-[14rem] overflow-x-hidden h-full">{children}</div>
+ </div>
+ );
+}
diff --git a/components/admin/meta/AppendMeta.js b/components/admin/meta/AppendMeta.js
new file mode 100644
index 0000000..1707ed2
--- /dev/null
+++ b/components/admin/meta/AppendMeta.js
@@ -0,0 +1,252 @@
+import Loading from "@/components/shared/loading";
+import Image from "next/image";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+// Define a function to convert the data
+function convertData(episodes) {
+ const convertedData = episodes.map((episode) => ({
+ episode: episode.episode,
+ title: episode?.title,
+ description: episode?.description || null,
+ img: episode?.img?.hd || episode?.img?.mobile || null, // Use hd if available, otherwise use mobile
+ }));
+
+ return convertedData;
+}
+
+export default function AppendMeta({ api }) {
+ const [id, setId] = useState();
+ const [resultData, setResultData] = useState(null);
+
+ const [query, setQuery] = useState("");
+ const [tmdbId, setTmdbId] = useState();
+ const [hasilQuery, setHasilQuery] = useState([]);
+ const [season, setSeason] = useState();
+
+ const [override, setOverride] = useState();
+
+ const [loading, setLoading] = useState(false);
+
+ const handleSearch = async () => {
+ try {
+ setLoading(true);
+ setResultData(null);
+ const res = await fetch(`${api}/meta/tmdb/${query}`);
+ const json = await res.json();
+ const data = json.results.filter((i) => i.type === "TV Series");
+ setHasilQuery(data);
+ setLoading(false);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ const handleDetail = async () => {
+ try {
+ setLoading(true);
+ const res = await fetch(`${api}/meta/tmdb/info/${tmdbId}?type=TV%20Series
+`);
+ const json = await res.json();
+ const data = json.seasons;
+ setHasilQuery(data);
+ setLoading(false);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ const handleStore = async () => {
+ try {
+ setLoading(true);
+ if (!resultData && !id) {
+ console.log("No data to store");
+ setLoading(false);
+ return;
+ }
+ const data = await fetch("/api/v2/admin/meta", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ id: id,
+ data: resultData,
+ }),
+ });
+ if (data.status === 200) {
+ const json = await data.json();
+ toast.success(json.message);
+ setLoading(false);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ const handleOverride = async () => {
+ setResultData(JSON.parse(override));
+ };
+
+ return (
+ <>
+ <div className="container mx-auto p-4 scrol">
+ <h1 className="text-3xl font-semibold mb-4">Append Data Page</h1>
+ <div>
+ <div className="space-y-3 mb-4">
+ <label>Search Anime:</label>
+ <input
+ type="text"
+ className="w-full px-3 py-2 border rounded-md text-black"
+ value={query}
+ onChange={(e) => setQuery(e.target.value)}
+ />
+ <button
+ type="button"
+ className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
+ onClick={handleSearch}
+ >
+ Find Anime{" "}
+ </button>
+ </div>
+ <div className="space-y-3 mb-4">
+ <label>Get Episodes:</label>
+ <input
+ type="number"
+ placeholder="TMDB ID"
+ className="w-full px-3 py-2 border rounded-md text-black"
+ value={tmdbId}
+ onChange={(e) => setTmdbId(e.target.value)}
+ />
+ <button
+ type="button"
+ className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
+ onClick={handleDetail}
+ >
+ Get Details
+ </button>
+ </div>
+
+ <div className="space-y-3 mb-4">
+ <label>Override Result:</label>
+ <textarea
+ rows="5"
+ className="w-full px-3 py-2 border rounded-md text-black"
+ value={override}
+ onChange={(e) => setOverride(e.target.value)}
+ />
+ <button
+ type="button"
+ className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
+ onClick={handleOverride}
+ >
+ Override{" "}
+ </button>
+ </div>
+
+ <div className="space-y-3 mb-4">
+ <label className="block text-sm font-medium text-gray-300">
+ Anime ID:
+ </label>
+ <input
+ type="number"
+ placeholder="AniList ID"
+ className="w-full px-3 py-2 border rounded-md text-black"
+ value={id}
+ onChange={(e) => setId(e.target.value)}
+ />
+ </div>
+ <div className="mb-4">
+ <button
+ className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
+ onClick={handleStore}
+ >
+ Store Data {season && `Season ${season}`}
+ </button>
+ </div>
+
+ {!loading && hasilQuery?.some((i) => i?.season) && (
+ <div className="border rounded-md p-4 mt-4">
+ <h2 className="text-lg font-semibold mb-2">
+ Which season do you want to format?
+ </h2>
+ <div className="w-full flex gap-2">
+ {hasilQuery?.map((season, index) => (
+ <button
+ type="button"
+ className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600"
+ key={index}
+ onClick={() => {
+ setLoading(true);
+ const data = hasilQuery[index].episodes;
+ const convertedData = convertData(data);
+ setSeason(index + 1);
+ setResultData(convertedData);
+ console.log(convertedData);
+ setLoading(false);
+ }}
+ >
+ <p>{season.season} </p>
+ </button>
+ ))}
+ </div>
+ </div>
+ )}
+
+ {!loading && resultData && (
+ <div className="border rounded-md p-4 mt-4">
+ <h2 className="text-lg font-semibold mb-2">Season {season}</h2>
+ <pre>{JSON.stringify(resultData, null, 2)}</pre>
+ </div>
+ )}
+ {!loading && hasilQuery && (
+ <div className="border rounded-md p-4 mt-4">
+ {/* <h2 className="text-lg font-semibold mb-2">
+ Result Data,{" "}
+ {hasilQuery.length > 0 && `${hasilQuery.length} Seasons`}:
+ </h2> */}
+ <div className="flex flex-wrap gap-10">
+ {!hasilQuery.every((i) => i?.episodes) &&
+ hasilQuery?.map((i, index) => (
+ <div
+ key={i.id}
+ className="flex flex-col items-center gap-2"
+ >
+ <p className="font-karla font-semibold">
+ {i.releaseDate}
+ </p>
+ <Image
+ src={i.image}
+ width={500}
+ height={500}
+ className="w-[160px] h-[210px] object-cover"
+ />
+ <button
+ className="bg-blue-500 text-white w-[160px] py-1 rounded-md hover:bg-blue-600 text-sm"
+ onClick={() => {
+ setTmdbId(i.id);
+ }}
+ >
+ <p className="line-clamp-1 px-1">{i.title}</p>
+ </button>
+ </div>
+ ))}
+ </div>
+ <pre>{JSON.stringify(hasilQuery, null, 2)}</pre>
+ </div>
+ )}
+
+ {loading && <Loading />}
+ </div>
+ <div>
+ {/* {resultData && (
+ <div className="border rounded-md p-4 mt-4">
+ <h2 className="text-lg font-semibold mb-2">Result Data:</h2>
+ <pre>{JSON.stringify(resultData, null, 2)}</pre>
+ </div>
+ )} */}
+ </div>
+ </div>
+ </>
+ );
+}
diff --git a/components/anime/episode.js b/components/anime/episode.js
index 6f96c98..25ed997 100644
--- a/components/anime/episode.js
+++ b/components/anime/episode.js
@@ -34,12 +34,16 @@ export default function AnimeEpisode({
info.status === "RELEASING" ? "true" : "false"
}${isDub ? "&dub=true" : ""}`
).then((res) => res.json());
- const getMap = response.find((i) => i?.map === true);
+ const getMap = response.find((i) => i?.map === true) || response[0];
let allProvider = response;
if (getMap) {
allProvider = response.filter((i) => {
- if (i?.providerId === "gogoanime" && i?.map !== true) {
+ if (
+ i?.providerId === "gogoanime" &&
+ i?.providerId === "9anime" &&
+ i?.map !== true
+ ) {
return null;
}
return i;
@@ -122,7 +126,6 @@ export default function AnimeEpisode({
useEffect(() => {
if (artStorage) {
- // console.log({ artStorage });
const currentData =
JSON.parse(localStorage.getItem("artplayer_settings")) || {};
@@ -138,15 +141,18 @@ export default function AnimeEpisode({
}
if (!session?.user?.name) {
- setProgress(
- Object.keys(updatedData).length > 0
- ? Math.max(
- ...Object.keys(updatedData).map(
- (key) => updatedData[key].episode
- )
- )
- : 0
+ const maxWatchedEpisode = Object.keys(updatedData).reduce(
+ (maxEpisode, key) => {
+ const episodeData = updatedData[key];
+ if (episodeData.timeWatched >= episodeData.duration * 0.9) {
+ return Math.max(maxEpisode, episodeData.episode);
+ }
+ return maxEpisode;
+ },
+ 0
);
+
+ setProgress(maxWatchedEpisode);
} else {
return;
}
@@ -177,7 +183,7 @@ export default function AnimeEpisode({
setLoading(false);
} else {
const data = await res.json();
- const getMap = data.find((i) => i?.map === true);
+ const getMap = data.find((i) => i?.map === true) || data[0];
let allProvider = data;
if (getMap) {
diff --git a/components/anime/mobile/reused/description.js b/components/anime/mobile/reused/description.js
index 99973d3..3b61c80 100644
--- a/components/anime/mobile/reused/description.js
+++ b/components/anime/mobile/reused/description.js
@@ -10,7 +10,7 @@ export default function Description({
className={`${
info?.description?.replace(/<[^>]*>/g, "").length > 240
? ""
- : "pointer-events-none"
+ : "pointer-events-none hidden"
} ${
readMore ? "hidden" : ""
} absolute z-30 flex items-end justify-center top-0 w-full h-full transition-all duration-200 ease-linear md:opacity-0 md:hover:opacity-100 bg-gradient-to-b from-transparent to-primary to-95%`}
diff --git a/components/anime/viewMode/thumbnailDetail.js b/components/anime/viewMode/thumbnailDetail.js
index c7d55a0..494a89f 100644
--- a/components/anime/viewMode/thumbnailDetail.js
+++ b/components/anime/viewMode/thumbnailDetail.js
@@ -41,9 +41,9 @@ export default function ThumbnailDetail({
className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
style={{
width:
- progress || (artStorage && epi?.number <= progress)
+ progress !== undefined && progress >= epi?.number
? "100%"
- : artStorage?.[epi?.id]
+ : artStorage?.[epi?.id] !== undefined
? `${prog}%`
: "0%",
}}
diff --git a/components/anime/viewMode/thumbnailOnly.js b/components/anime/viewMode/thumbnailOnly.js
index 7259beb..1b403fa 100644
--- a/components/anime/viewMode/thumbnailOnly.js
+++ b/components/anime/viewMode/thumbnailOnly.js
@@ -29,7 +29,7 @@ export default function ThumbnailOnly({
className={`absolute bottom-7 left-0 h-[2px] bg-red-600`}
style={{
width:
- progress && artStorage && episode?.number <= progress
+ progress && episode?.number <= progress
? "100%"
: artStorage?.[episode?.id]
? `${prog}%`
diff --git a/components/anime/viewSelector.js b/components/anime/viewSelector.js
index f114a8b..baa13b2 100644
--- a/components/anime/viewSelector.js
+++ b/components/anime/viewSelector.js
@@ -6,6 +6,7 @@ export default function ViewSelector({ view, setView, episode, map }) {
episode?.length > 0
? map?.every(
(item) =>
+ item?.img === null ||
item?.img?.includes("https://s4.anilist.co/") ||
item?.image?.includes("https://s4.anilist.co/") ||
item.title === null
@@ -33,6 +34,7 @@ export default function ViewSelector({ view, setView, episode, map }) {
episode?.length > 0
? map?.every(
(item) =>
+ item?.img === null ||
item?.img?.includes("https://s4.anilist.co/") ||
item?.image?.includes("https://s4.anilist.co/") ||
item.title === null
@@ -52,6 +54,7 @@ export default function ViewSelector({ view, setView, episode, map }) {
episode?.length > 0
? map?.every(
(item) =>
+ item?.img === null ||
item?.img?.includes("https://s4.anilist.co/") ||
item?.image?.includes("https://s4.anilist.co/") ||
item.title === null
@@ -74,6 +77,7 @@ export default function ViewSelector({ view, setView, episode, map }) {
episode?.length > 0
? map?.every(
(item) =>
+ item?.img === null ||
item?.img?.includes("https://s4.anilist.co/") ||
item?.image?.includes("https://s4.anilist.co/") ||
item.title === null
diff --git a/components/home/schedule.js b/components/home/schedule.js
index a9846a7..d618412 100644
--- a/components/home/schedule.js
+++ b/components/home/schedule.js
@@ -55,7 +55,7 @@ export default function Schedule({ data, scheduleData, anime, update }) {
<div className="w-1/2 lg:w-2/5 hidden lg:block font-medium font-karla leading-[2.9rem] text-white line-clamp-1">
<Link
href={`/en/anime/${data.id}`}
- className="hover:underline underline-offset-4 decoration-2 lg:text-[1.7vw] "
+ className="hover:underline underline-offset-4 decoration-2 leading-3 lg:text-[1.5vw] "
>
{data.title.romaji || data.title.english || data.title.native}
</Link>
diff --git a/components/searchPalette.js b/components/searchPalette.js
index 07c8f89..38a0bc0 100644
--- a/components/searchPalette.js
+++ b/components/searchPalette.js
@@ -3,7 +3,7 @@ import { Combobox, Dialog, Menu, Transition } from "@headlessui/react";
import useDebounce from "../lib/hooks/useDebounce";
import Image from "next/image";
import { useRouter } from "next/router";
-import { useSearch } from "../lib/hooks/isOpenState";
+import { useSearch } from "../lib/context/isOpenState";
import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import { BookOpenIcon, PlayIcon } from "@heroicons/react/20/solid";
import { useAniList } from "../lib/anilist/useAnilist";
diff --git a/components/shared/NavBar.js b/components/shared/NavBar.js
index 42fcff0..7bbd617 100644
--- a/components/shared/NavBar.js
+++ b/components/shared/NavBar.js
@@ -1,4 +1,4 @@
-import { useSearch } from "@/lib/hooks/isOpenState";
+import { useSearch } from "@/lib/context/isOpenState";
import { getCurrentSeason } from "@/utils/getTimes";
import { ArrowLeftIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid";
import { UserIcon } from "@heroicons/react/24/solid";
diff --git a/components/watch/player/artplayer.js b/components/watch/player/artplayer.js
index 4eb766d..2ab4ded 100644
--- a/components/watch/player/artplayer.js
+++ b/components/watch/player/artplayer.js
@@ -1,7 +1,7 @@
import { useEffect, useRef } from "react";
import Artplayer from "artplayer";
import Hls from "hls.js";
-import { useWatchProvider } from "../../../lib/hooks/watchPageProvider";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
import { seekBackward, seekForward } from "./component/overlay";
import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
@@ -10,6 +10,7 @@ export default function NewPlayer({
option,
getInstance,
provider,
+ track,
defSub,
defSize,
subtitles,
@@ -274,6 +275,46 @@ export default function NewPlayer({
],
});
+ if ("mediaSession" in navigator) {
+ art.on("video:timeupdate", () => {
+ const session = navigator.mediaSession;
+ if (!session) return;
+ session.setPositionState({
+ duration: art.duration,
+ playbackRate: art.playbackRate,
+ position: art.currentTime,
+ });
+ });
+
+ navigator.mediaSession.setActionHandler("play", () => {
+ art.play();
+ });
+
+ navigator.mediaSession.setActionHandler("pause", () => {
+ art.pause();
+ });
+
+ navigator.mediaSession.setActionHandler("previoustrack", () => {
+ if (track?.prev) {
+ router.push(
+ `/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
+ track?.prev?.id
+ )}&num=${track?.prev?.number}`
+ );
+ }
+ });
+
+ navigator.mediaSession.setActionHandler("nexttrack", () => {
+ if (track?.next) {
+ router.push(
+ `/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
+ track?.next?.id
+ )}&num=${track?.next?.number}`
+ );
+ }
+ });
+ }
+
playerRef.current = art;
art.events.proxy(document, "keydown", (event) => {
diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
index 9fe9cd3..a524b79 100644
--- a/components/watch/player/playerComponent.js
+++ b/components/watch/player/playerComponent.js
@@ -1,9 +1,9 @@
import React, { useEffect, useState } from "react";
import NewPlayer from "./artplayer";
import { icons } from "./component/overlay";
-import { useWatchProvider } from "../../../lib/hooks/watchPageProvider";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
import { useRouter } from "next/router";
-import { useAniList } from "../../../lib/anilist/useAnilist";
+import { useAniList } from "@/lib/anilist/useAnilist";
export function calculateAspectRatio(width, height) {
const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
@@ -475,6 +475,7 @@ export default function PlayerComponent({
quality={source}
option={option}
provider={provider}
+ track={track}
defSize={defSize}
defSub={defSub}
subSize={subSize}
diff --git a/components/watch/secondary/episodeLists.js b/components/watch/secondary/episodeLists.js
index 8a057ce..5fa21ad 100644
--- a/components/watch/secondary/episodeLists.js
+++ b/components/watch/secondary/episodeLists.js
@@ -12,6 +12,7 @@ export default function EpisodeLists({
dub,
}) {
const progress = info.mediaListEntry?.progress;
+
return (
<div className="w-screen lg:max-w-sm xl:max-w-xl">
<h1 className="text-xl font-karla pl-5 pb-5 font-semibold">Up Next</h1>
@@ -67,11 +68,11 @@ export default function EpisodeLists({
className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
style={{
width:
- progress && artStorage && item?.number <= progress
+ progress !== undefined && progress >= item?.number
? "100%"
- : artStorage?.[item?.id]
+ : artStorage?.[item?.id] !== undefined
? `${prog}%`
- : "0",
+ : "0%",
}}
/>
<span className="absolute bottom-2 left-2 font-karla font-bold text-sm">
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 02:39:35 +0000