3 files changed, 174 insertions, 0 deletions
diff --git a/components/anime/viewMode/listMode.js b/components/anime/viewMode/listMode.js
new file mode 100644
index 0000000..2016262
--- /dev/null
+++ b/components/anime/viewMode/listMode.js
@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+export default function ListMode({
+  info,
+  episode,
+  index,
+  providerId,
+  progress,
+  dub,
+}) {
+  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 && episode.number <= progress
+            ? "text-[#5f5f5f]"
+            : "text-white"
+        }`}
+      >
+        <p>Episode {episode.number}</p>
+        {episode.title && (
+          <p
+            className={`text-xs lg:text-sm ${
+              progress && episode.number <= progress
+                ? "text-[#5f5f5f]"
+                : "text-[#b1b1b1]"
+            } italic`}
+          >
+            "{episode.title}"
+          </p>
+        )}
+      </Link>
+      {index !== episode?.length - 1 && <span className="h-[1px] bg-white" />}
+    </div>
+  );
+}
diff --git a/components/anime/viewMode/thumbnailDetail.js b/components/anime/viewMode/thumbnailDetail.js
new file mode 100644
index 0000000..a085bc7
--- /dev/null
+++ b/components/anime/viewMode/thumbnailDetail.js
@@ -0,0 +1,76 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function ThumbnailDetail({
+  index,
+  epi,
+  info,
+  provider,
+  artStorage,
+  progress,
+  dub,
+}) {
+  const time = artStorage?.[epi?.id]?.time;
+  const duration = artStorage?.[epi?.id]?.duration;
+  let prog = (time / duration) * 100;
+  if (prog > 90) prog = 100;
+
+  return (
+    <Link
+      key={index}
+      href={`/en/anime/watch/${info.id}/${provider}?id=${encodeURIComponent(
+        epi.id
+      )}&num=${epi.number}${dub ? `&dub=${dub}` : ""}`}
+      className="flex group h-[110px] lg:h-[160px] w-full rounded-lg transition-all duration-300 ease-out bg-secondary cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
+    >
+      <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%]"
+          />
+          <span
+            className={`absolute bottom-0 left-0 h-[3px] bg-red-700`}
+            style={{
+              width:
+                progress && artStorage && epi?.number <= progress
+                  ? "100%"
+                  : artStorage?.[epi?.id]
+                  ? `${prog}%`
+                  : "0%",
+            }}
+          />
+          <span className="absolute bottom-2 left-2 font-karla font-semibold text-sm lg:text-lg">
+            Episode {epi?.number}
+          </span>
+          <div className="z-[9999] 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 invisible group-hover:visible"
+            >
+              <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-[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}
+        </h1>
+        {epi?.description && (
+          <p className="line-clamp-2 text-xs lg:text-md xl:text-lg italic font-outfit font-extralight">
+            {epi?.description}
+          </p>
+        )}
+      </div>
+    </Link>
+  );
+}
diff --git a/components/anime/viewMode/thumbnailOnly.js b/components/anime/viewMode/thumbnailOnly.js
new file mode 100644
index 0000000..6063dfc
--- /dev/null
+++ b/components/anime/viewMode/thumbnailOnly.js
@@ -0,0 +1,59 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function ThumbnailOnly({
+  info,
+  providerId,
+  episode,
+  artStorage,
+  progress,
+  dub,
+}) {
+  const time = artStorage?.[episode?.id]?.time;
+  const duration = artStorage?.[episode?.id]?.duration;
+  let prog = (time / duration) * 100;
+  if (prog > 90) prog = 100;
+  return (
+    <Link
+      // key={index}
+      href={`/en/anime/watch/${info.id}/${providerId}?id=${encodeURIComponent(
+        episode.id
+      )}&num=${episode.number}${dub ? `&dub=${dub}` : ""}`}
+      className="transition-all duration-200 ease-out lg:hover:scale-105 hover:ring-1 hover:ring-white cursor-pointer bg-secondary shrink-0 relative w-full h-[180px] sm:h-[130px] subpixel-antialiased rounded-md overflow-hidden"
+    >
+      <span className="absolute text-sm z-40 bottom-1 left-2 font-karla font-semibold text-white">
+        Episode {episode?.number}
+      </span>
+      <span
+        className={`absolute bottom-7 left-0 h-1 bg-red-600`}
+        style={{
+          width:
+            progress && artStorage && episode?.number <= progress
+              ? "100%"
+              : artStorage?.[episode?.id]
+              ? `${prog}%`
+              : "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"
+      />
+    </Link>
+  );
+}