aboutsummaryrefslogtreecommitdiff
path: root/components/anime/viewMode/thumbnailOnly.js
diff options
context:
space:
mode:
authorFactiven <[email protected]>2023-08-04 14:49:35 +0700
committerGitHub <[email protected]>2023-08-04 14:49:35 +0700
commit1eb531338f5ae3696fa9d68a4171a73f0107c2f8 (patch)
tree67afef1c72b39bc1fa0d0f4cff7b0586c4d519c9 /components/anime/viewMode/thumbnailOnly.js
parentUpdate package.json (diff)
downloadmoopa-3.8.5.tar.xz
moopa-3.8.5.zip
Update v3.8.5 - Merged Beta to Main (#32)v3.8.5
* initial commit * Update_v.3.6.7-beta-v1.2 * Update_v.3.6.7-beta-v1.3 * Update_v.3.6.7-beta-v1.3 > update API * Fixed mediaList won't update * added .env disqus shortname * Update_v3.6.7-beta-v1.4 >Implementing database * Create main.yml * Update v3.6.7-beta-v1.5 small patch * title home page * Update content.js * Delete db-test.js * Update content.js * Update home page card * Update v3.7.0 * Update v3.7.1-beta > migrating backend to main code > fixed schedule component * Update v3.8.0 > Added dub options > Moved schedule backend * Update v.3.8.1 > Fixed episodes on watch page isn't dubbed * Update v3.8.1-patch-1 * Update v3.8.1-patch-2 > Another patch for dub * Update v3.8.2 > Removed prisma configuration for database since it's not stable yet * Update v3.8.3 > Fixed different provider have same id * Update v.3.8.3 > Fixed player bug where the controls won't hide after updating anilist progress * Update v3.8.4-patch-2 * Update v3.8.5 > Update readme.md > Update .env.example
Diffstat (limited to 'components/anime/viewMode/thumbnailOnly.js')
-rw-r--r--components/anime/viewMode/thumbnailOnly.js59
1 files changed, 59 insertions, 0 deletions
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>
+ );
+}