diff options
Diffstat (limited to 'components/anime/watch/primarySide.js')
| -rw-r--r-- | components/anime/watch/primarySide.js | 276 |
1 files changed, 0 insertions, 276 deletions
diff --git a/components/anime/watch/primarySide.js b/components/anime/watch/primarySide.js deleted file mode 100644 index a3d9f4f..0000000 --- a/components/anime/watch/primarySide.js +++ /dev/null @@ -1,276 +0,0 @@ -import { useEffect, useState } from "react"; -import { ChevronDownIcon } from "@heroicons/react/20/solid"; -import { ForwardIcon } from "@heroicons/react/24/solid"; -import { useRouter } from "next/router"; -import { signIn } from "next-auth/react"; -import Details from "./primary/details"; -import VideoPlayer from "../../videoPlayer"; -import Link from "next/link"; -import Skeleton from "react-loading-skeleton"; -import Modal from "../../modal"; -import AniList from "../../media/aniList"; - -export default function PrimarySide({ - info, - session, - epiNumber, - navigation, - providerId, - watchId, - onList, - proxy, - disqus, - setOnList, - episodeList, - timeWatched, - dub, -}) { - const [episodeData, setEpisodeData] = useState(); - 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 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( - epiNumber - )}?types[]=ed&types[]=mixed-ed&types[]=mixed-op&types[]=op&types[]=recap&episodeLength=` - ).then((res) => { - if (!res.ok) { - switch (res.status) { - case 404: { - return null; - } - } - } - return res.json(); - }); - - const op = - skip?.results?.find((item) => item.skipType === "op") || null; - const ed = - skip?.results?.find((item) => item.skipType === "ed") || null; - - setSkip({ op, ed }); - - setEpisodeData(anify); - setLoading(false); - } - } - - fetchData(); - return () => { - setEpisodeData(); - setSkip(); - }; - }, [providerId, watchId, info]); - - useEffect(() => { - const mediaSession = navigator.mediaSession; - if (!mediaSession) return; - - const now = navigation?.playing; - const poster = now?.image || info?.bannerImage; - const title = now?.title || info?.title?.romaji; - - const artwork = poster - ? [{ src: poster, sizes: "512x512", type: "image/jpeg" }] - : undefined; - - mediaSession.metadata = new MediaMetadata({ - title: title, - artist: `Moopa ${ - title === info?.title?.romaji - ? "- Episode " + epiNumber - : `- ${info?.title?.romaji || info?.title?.english}` - }`, - artwork, - }); - }, [navigation, info, epiNumber]); - - function handleOpen() { - setOpen(true); - document.body.style.overflow = "hidden"; - } - - function handleClose() { - setOpen(false); - document.body.style.overflow = "auto"; - } - - return ( - <> - <Modal open={open} onClose={() => handleClose()}> - {!session && ( - <div className="flex-center flex-col gap-5 px-10 py-5 bg-secondary rounded-md"> - <h1 className="text-md font-extrabold font-karla"> - Edit your list - </h1> - <button - className="flex items-center bg-[#363642] rounded-md text-white p-1" - onClick={() => signIn("AniListProvider")} - > - <h1 className="px-1 font-bold font-karla">Login with AniList</h1> - <div className="scale-[60%] pb-[1px]"> - <AniList /> - </div> - </button> - </div> - )} - </Modal> - <div className="w-full h-full"> - <div key={watchId} className="w-full aspect-video bg-black"> - {!loading ? ( - navigation && episodeData?.sources?.length !== 0 ? ( - <VideoPlayer - session={session} - info={info} - data={episodeData} - provider={providerId} - id={watchId} - progress={epiNumber} - skip={skip} - proxy={proxy} - aniId={info.id} - aniTitle={info.title?.romaji || info.title?.english} - track={navigation} - timeWatched={timeWatched} - dub={dub} - /> - ) : ( - <p className="h-full flex-center"> - Video is not available, please try other providers - </p> - ) - ) : ( - <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"> - {info && episodeList ? ( - <div className="flex items-center justify-between py-3 px-3"> - <div className="flex flex-col gap-2 w-[60%]"> - <h1 className="text-xl font-outfit font-semibold line-clamp-1"> - <Link - href={`/en/anime/${info.id}`} - className="hover:underline" - title={navigation?.playing?.title || info.title?.romaji} - > - {navigation?.playing?.title || info.title?.romaji} - </Link> - </h1> - <h3 className="text-sm font-karla font-light"> - Episode {epiNumber} - </h3> - </div> - <div className="flex gap-4 items-center justify-end"> - <div className="relative"> - <select - className="flex items-center gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer" - value={epiNumber} - onChange={(e) => { - const selectedEpisode = episodeList.find( - (episode) => episode.number === parseInt(e.target.value) - ); - router.push( - `/en/anime/watch/${info.id}/${providerId}?id=${ - selectedEpisode.id - }&num=${selectedEpisode.number}${ - dub ? `&dub=${dub}` : "" - }` - ); - }} - > - {episodeList.map((episode) => ( - <option key={episode.number} value={episode.number}> - Episode {episode.number} - </option> - ))} - </select> - <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" /> - </div> - <button - disabled={!navigation?.next} - className={`${ - !navigation?.next ? "pointer-events-none" : "" - }relative group`} - onClick={() => { - router.push( - `/en/anime/watch/${info.id}/${providerId}?id=${ - navigation?.next.id - }&num=${navigation?.next.number}${ - dub ? `&dub=${dub}` : "" - }` - ); - }} - > - <span className="absolute z-[9999] -left-11 -top-14 p-2 shadow-xl rounded-md transform transition-all whitespace-nowrap bg-secondary lg:group-hover:block group-hover:opacity-1 hidden font-karla font-bold"> - Next Episode - </span> - <ForwardIcon - className={`w-6 h-6 ${ - !navigation?.next ? "text-[#282828]" : "" - }`} - /> - </button> - </div> - </div> - ) : ( - <div className="py-3 px-4"> - <div className="text-xl font-outfit font-semibold line-clamp-2"> - <div className="inline hover:underline"> - <Skeleton width={240} /> - </div> - </div> - <h4 className="text-sm font-karla font-light"> - <Skeleton width={75} /> - </h4> - </div> - )} - <Details - info={info} - session={session} - description={navigation?.playing?.description || info?.description} - epiNumber={epiNumber} - id={watchId} - onList={onList} - setOnList={setOnList} - handleOpen={handleOpen} - disqus={disqus} - /> - </div> - </div> - </> - ); -} |