diff options
| author | Factiven <[email protected]> | 2023-12-24 13:03:54 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-12-24 13:03:54 +0700 |
| commit | 50a0f0240d7fef133eb5acc1bea2b1168b08e9db (patch) | |
| tree | 307e09e505580415a58d64b5fc3580e9235869f1 /components/watch/secondary/episodeLists.js | |
| parent | Update README.md (#104) (diff) | |
| download | moopa-50a0f0240d7fef133eb5acc1bea2b1168b08e9db.tar.xz moopa-50a0f0240d7fef133eb5acc1bea2b1168b08e9db.zip | |
migrate to typescript
Diffstat (limited to 'components/watch/secondary/episodeLists.js')
| -rw-r--r-- | components/watch/secondary/episodeLists.js | 189 |
1 files changed, 0 insertions, 189 deletions
diff --git a/components/watch/secondary/episodeLists.js b/components/watch/secondary/episodeLists.js deleted file mode 100644 index a676be0..0000000 --- a/components/watch/secondary/episodeLists.js +++ /dev/null @@ -1,189 +0,0 @@ -import Skeleton from "react-loading-skeleton"; -import Image from "next/image"; -import Link from "next/link"; -import { ChevronDownIcon } from "@heroicons/react/24/outline"; -import { useRouter } from "next/router"; - -export default function EpisodeLists({ - info, - map, - providerId, - watchId, - episode, - artStorage, - track, - dub, -}) { - const progress = info.mediaListEntry?.progress; - - const router = useRouter(); - - return ( - <div className="w-screen lg:max-w-sm xl:max-w-lg"> - <div className="flex gap-4 px-3 lg:pl-5 pb-5"> - <button - disabled={!track?.next} - onClick={() => { - router.push( - `/en/anime/watch/${info.id}/${providerId}?id=${ - track?.next?.id - }&num=${track?.next?.number}${dub ? `&dub=${dub}` : ""}` - ); - }} - className="text-xl font-karla font-semibold" - > - Next Episode {">"} - </button> - {episode && ( - <div className="relative flex gap-2 items-center group"> - <select - value={track?.playing?.number} - onChange={(e) => { - const selectedEpisode = episode.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}` : ""}` - ); - }} - className="flex items-center text-sm gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer outline-none focus:ring-1 focus:ring-action group-hover:ring-1 group-hover:ring-action" - > - {episode?.map((x) => ( - <option key={x.id} value={x.number}> - Episode {x.number} - </option> - ))} - </select> - <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" /> - </div> - )} - </div> - <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 ? ( - map?.some( - (item) => - (item?.img || item?.image) && - !item?.img?.includes("https://s4.anilist.co/") - ) > 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/${ - info.id - }/${providerId}?id=${encodeURIComponent(item.id)}&num=${ - item.number - }${dub ? `&dub=${dub}` : ""}`} - key={item.id} - className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${ - item.id == watchId - ? "pointer-events-none ring-1 ring-action" - : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white" - }`} - > - <div className="w-[43%] lg:w-[42%] 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"> - {/* <div className="absolute inset-0 w-full h-full z-40" /> */} - <Image - src={ - mapData?.img || - mapData?.image || - info?.coverImage?.extraLarge - } - draggable={false} - alt="Anime Cover" - width={1000} - height={1000} - className={`object-cover z-30 rounded-lg h-[110px] ${ - item.id == watchId - ? "brightness-[30%]" - : "brightness-75" - }`} - /> - {/* )} */} - <span - className={`absolute bottom-0 left-0 h-[2px] bg-red-700`} - style={{ - width: - progress !== undefined && progress >= item?.number - ? "100%" - : artStorage?.[item?.id] !== undefined - ? `${prog}%` - : "0%", - }} - /> - <span className="absolute bottom-2 left-2 font-karla font-bold text-sm text-white"> - 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]"> - <svg - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 20 20" - fill="currentColor" - className="w-5 h-5" - > - <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" /> - </svg> - </div> - )} - </div> - </div> - <div - 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"> - {mapData?.title || info?.title?.romaji} - </h1> - <p className="line-clamp-2 text-xs italic font-outfit font-extralight"> - {mapData?.description || `Episode ${item.number}`} - </p> - </div> - </Link> - ); - }) - ) : ( - episode.map((item) => { - return ( - <Link - href={`/en/anime/watch/${ - info.id - }/${providerId}?id=${encodeURIComponent(item.id)}&num=${ - item.number - }${dub ? `&dub=${dub}` : ""}`} - key={item.id} - className={`bg-secondary flex-center h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${ - item.id == watchId - ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]" - : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white" - }`} - > - Episode {item.number} - </Link> - ); - }) - ) - ) : ( - <> - {[1].map((item) => ( - <Skeleton - key={item} - className="bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out" - /> - ))} - </> - )} - </div> - </div> - ); -} |