From 7327a69b55a20b99b14ee0803d6cf5f8b88c45ef Mon Sep 17 00:00:00 2001
From: Factiven <factiven.org@gmail.com>
Date: Wed, 13 Sep 2023 00:45:53 +0700
Subject: Update v4 - Merge pre-push to main (#71)

* Create build-test.yml

* initial v4 commit

* update: github workflow

* update: push on branch

* Update .github/ISSUE_TEMPLATE/bug_report.md

* configuring next.config.js file
---
 components/anime/watch/primarySide.js   | 45 ++++++++++++++++++++++++---------
 components/anime/watch/secondarySide.js | 19 +++++++++-----
 2 files changed, 45 insertions(+), 19 deletions(-)

(limited to 'components/anime/watch')

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>
-- 
cgit v1.2.3