diff options
Diffstat (limited to 'components/anime/watch')
| -rw-r--r-- | components/anime/watch/primarySide.js | 45 | ||||
| -rw-r--r-- | components/anime/watch/secondarySide.js | 19 |
2 files changed, 45 insertions, 19 deletions
diff --git a/components/anime/watch/primarySide.js b/components/anime/watch/primarySide.js index b032fd6..a3d9f4f 100644 --- a/components/anime/watch/primarySide.js +++ b/components/anime/watch/primarySide.js @@ -9,18 +9,14 @@ import Link from "next/link"; import Skeleton from "react-loading-skeleton"; import Modal from "../../modal"; import AniList from "../../media/aniList"; -import axios from "axios"; export default function PrimarySide({ info, session, epiNumber, - setLoading, navigation, - loading, providerId, watchId, - status, onList, proxy, disqus, @@ -33,15 +29,31 @@ export default function PrimarySide({ const [open, setOpen] = useState(false); const [skip, setSkip] = useState(); + const [loading, setLoading] = useState(true); + const router = useRouter(); useEffect(() => { setLoading(true); async function fetchData() { if (info) { - const { data } = await axios.get( - `/api/consumet/source/${providerId}/${watchId}` - ); + const anify = await fetch("/api/v2/source", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + source: + providerId === "gogoanime" && !watchId.startsWith("/") + ? "consumet" + : "anify", + providerId: providerId, + watchId: watchId, + episode: epiNumber, + id: info.id, + sub: dub ? "dub" : "sub", + }), + }).then((res) => res.json()); const skip = await fetch( `https://api.aniskip.com/v2/skip-times/${info.idMal}/${parseInt( @@ -65,10 +77,9 @@ export default function PrimarySide({ setSkip({ op, ed }); - setEpisodeData(data); + setEpisodeData(anify); setLoading(false); } - // setMal(malId); } fetchData(); @@ -134,7 +145,7 @@ export default function PrimarySide({ <div className="w-full h-full"> <div key={watchId} className="w-full aspect-video bg-black"> {!loading ? ( - episodeData && ( + navigation && episodeData?.sources?.length !== 0 ? ( <VideoPlayer session={session} info={info} @@ -142,7 +153,6 @@ export default function PrimarySide({ provider={providerId} id={watchId} progress={epiNumber} - stats={status} skip={skip} proxy={proxy} aniId={info.id} @@ -151,9 +161,20 @@ export default function PrimarySide({ timeWatched={timeWatched} dub={dub} /> + ) : ( + <p className="h-full flex-center"> + Video is not available, please try other providers + </p> ) ) : ( - <div className="aspect-video bg-black" /> + <div className="flex-center aspect-video bg-black"> + <div className="lds-ellipsis"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> )} </div> <div className="flex flex-col divide-y divide-white/20"> diff --git a/components/anime/watch/secondarySide.js b/components/anime/watch/secondarySide.js index 5d9b8f9..c9ef684 100644 --- a/components/anime/watch/secondarySide.js +++ b/components/anime/watch/secondarySide.js @@ -4,24 +4,27 @@ import Link from "next/link"; export default function SecondarySide({ info, + map, providerId, watchId, episode, - progress, artStorage, dub, }) { + const progress = info.mediaListEntry?.progress; return ( <div className="lg:w-[35%] shrink-0 w-screen"> <h1 className="text-xl font-karla pl-4 pb-5 font-semibold">Up Next</h1> <div className="flex flex-col gap-5 lg:pl-5 py-2 scrollbar-thin px-2 scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full"> {episode && episode.length > 0 ? ( - episode.some((item) => item.title && item.description) > 0 ? ( + map?.some((item) => item.title && item.description) > 0 ? ( episode.map((item) => { const time = artStorage?.[item.id]?.timeWatched; const duration = artStorage?.[item.id]?.duration; let prog = (time / duration) * 100; if (prog > 90) prog = 100; + + const mapData = map?.find((i) => i.number === item.number); return ( <Link href={`/en/anime/watch/${ @@ -38,8 +41,9 @@ export default function SecondarySide({ > <div className="w-[43%] lg:w-[40%] h-[110px] relative rounded-lg z-40 shrink-0 overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]"> <div className="relative"> + {/* {mapData?.image && ( */} <Image - src={item.image} + src={mapData?.image || info?.coverImage?.extraLarge} alt="Anime Cover" width={1000} height={1000} @@ -49,6 +53,7 @@ export default function SecondarySide({ : "brightness-75" }`} /> + {/* )} */} <span className={`absolute bottom-0 left-0 h-[2px] bg-red-700`} style={{ @@ -61,7 +66,7 @@ export default function SecondarySide({ }} /> <span className="absolute bottom-2 left-2 font-karla font-bold text-sm"> - Episode {item.number} + Episode {item?.number} </span> {item.id == watchId && ( <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 scale-[1.5]"> @@ -78,15 +83,15 @@ export default function SecondarySide({ </div> </div> <div - className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${ + className={`w-full h-full overflow-x-hidden select-none p-4 flex flex-col gap-2 ${ item.id == watchId ? "text-[#7a7a7a]" : "" }`} > <h1 className="font-karla font-bold italic line-clamp-1"> - {item.title} + {mapData?.title} </h1> <p className="line-clamp-2 text-xs italic font-outfit font-extralight"> - {item?.description} + {mapData?.description} </p> </div> </Link> |