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

3 files changed, 51 insertions, 62 deletions

diff --git a/components/anime/viewMode/listMode.js b/components/anime/viewMode/listMode.js
index f3bcf05..5beded1 100644
--- a/components/anime/viewMode/listMode.js
+++ b/components/anime/viewMode/listMode.js
@@ -3,7 +3,6 @@ import Link from "next/link";
 export default function ListMode({
   info,
   episode,
-  index,
   artStorage,
   providerId,
   progress,
@@ -15,39 +14,32 @@ export default function ListMode({
   if (prog > 90) prog = 100;
 
   return (
-    <div key={episode.number} className="flex flex-col gap-3 px-2">
-      <Link
-        href={`/en/anime/watch/${info.id}/${providerId}?id=${encodeURIComponent(
-          episode.id
-        )}&num=${episode.number}${dub ? `&dub=${dub}` : ""}`}
-        className={`text-start text-sm lg:text-lg ${
-          progress
-            ? progress && episode.number <= progress
+    <Link
+      key={episode.number}
+      href={`/en/anime/watch/${info.id}/${providerId}?id=${encodeURIComponent(
+        episode.id
+      )}&num=${episode.number}${dub ? `&dub=${dub}` : ""}`}
+      className={`flex gap-3 py-4 hover:bg-secondary/10 odd:bg-secondary/30 even:bg-primary`}
+    >
+      <div className="flex w-full">
+        <span className="shrink-0 px-4 text-center text-white/50">
+          {episode.number}
+        </span>
+        <p
+          className={`w-full line-clamp-1 ${
+            progress
+              ? progress && episode.number <= progress
+                ? "text-[#5f5f5f]"
+                : "text-white"
+              : prog === 100
               ? "text-[#5f5f5f]"
               : "text-white"
-            : prog === 100
-            ? "text-[#5f5f5f]"
-            : "text-white"
-        }`}
-      >
-        <p>Episode {episode.number}</p>
-        {episode.title && (
-          <p
-            className={`text-xs lg:text-sm ${
-              progress
-                ? progress && episode.number <= progress
-                  ? "text-[#5f5f5f]"
-                  : "text-[#b1b1b1]"
-                : prog === 100
-                ? "text-[#5f5f5f]"
-                : "text-[#b1b1b1]"
-            } italic`}
-          >
-            "{episode.title}"
-          </p>
-        )}
-      </Link>
-      {index !== episode?.length - 1 && <span className="h-[1px] bg-white" />}
-    </div>
+          }`}
+        >
+          {episode?.title || `Episode ${episode.number}`}
+        </p>
+        <p className="capitalize text-sm text-white/50 px-4">{providerId}</p>
+      </div>
+    </Link>
   );
 }
diff --git a/components/anime/viewMode/thumbnailDetail.js b/components/anime/viewMode/thumbnailDetail.js
index 6efeb77..296e0d2 100644
--- a/components/anime/viewMode/thumbnailDetail.js
+++ b/components/anime/viewMode/thumbnailDetail.js
@@ -5,6 +5,9 @@ export default function ThumbnailDetail({
   index,
   epi,
   info,
+  image,
+  title,
+  description,
   provider,
   artStorage,
   progress,
@@ -25,13 +28,15 @@ export default function ThumbnailDetail({
     >
       <div className="w-[43%] lg:w-[30%] relative shrink-0 z-40 rounded-lg overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]">
         <div className="relative">
-          <Image
-            src={epi?.image}
-            alt="Anime Cover"
-            width={1000}
-            height={1000}
-            className="object-cover z-30 rounded-lg h-[110px] lg:h-[160px] brightness-[65%]"
-          />
+          {image && (
+            <Image
+              src={image || ""}
+              alt="Anime Cover"
+              width={1000}
+              height={1000}
+              className="object-cover z-30 rounded-lg h-[110px] lg:h-[160px] brightness-[65%]"
+            />
+          )}
           <span
             className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
             style={{
@@ -63,11 +68,11 @@ export default function ThumbnailDetail({
         className={`w-[70%] h-full select-none p-4 flex flex-col justify-center gap-3`}
       >
         <h1 className="font-karla font-bold text-base lg:text-lg xl:text-xl italic line-clamp-1">
-          {epi?.title}
+          {title}
         </h1>
-        {epi?.description && (
+        {description && (
           <p className="line-clamp-2 text-xs lg:text-md xl:text-lg italic font-outfit font-extralight">
-            {epi?.description}
+            {description}
           </p>
         )}
       </div>
diff --git a/components/anime/viewMode/thumbnailOnly.js b/components/anime/viewMode/thumbnailOnly.js
index 99f02bd..69cd8c3 100644
--- a/components/anime/viewMode/thumbnailOnly.js
+++ b/components/anime/viewMode/thumbnailOnly.js
@@ -3,6 +3,7 @@ import Link from "next/link";
 
 export default function ThumbnailOnly({
   info,
+  image,
   providerId,
   episode,
   artStorage,
@@ -35,25 +36,16 @@ export default function ThumbnailOnly({
               : "0%",
         }}
       />
-      <div className="absolute inset-0 bg-black z-30 opacity-20" />
-      <Image
-        // src={
-        //   providerId === "animepahe"
-        //     ? `https://img.moopa.live/image-proxy?url=${encodeURIComponent(
-        //         episode.img
-        //       )}&headers=${encodeURIComponent(
-        //         JSON.stringify({ Referer: "https://animepahe.com/" })
-        //       )}`
-        //     : thumbnail?.img.includes("null")
-        //     ? info.coverImage.large
-        //     : thumbnail?.img || info.coverImage.large
-        // }
-        src={episode?.image}
-        alt="epi image"
-        width={500}
-        height={500}
-        className="object-cover w-full h-[150px] sm:h-[100px] z-20"
-      />
+      {/* <div className="absolute inset-0 bg-black z-30 opacity-20" /> */}
+      {image && (
+        <Image
+          src={image || ""}
+          alt="epi image"
+          width={500}
+          height={500}
+          className="object-cover w-full h-[150px] sm:h-[100px] z-20 brightness-75"
+        />
+      )}
     </Link>
   );
 }