diff options
| author | Factiven <[email protected]> | 2023-08-04 14:49:35 +0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-08-04 14:49:35 +0700 |
| commit | 1eb531338f5ae3696fa9d68a4171a73f0107c2f8 (patch) | |
| tree | 67afef1c72b39bc1fa0d0f4cff7b0586c4d519c9 /components/anime/viewMode/thumbnailOnly.js | |
| parent | Update package.json (diff) | |
| download | moopa-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.js | 59 |
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> + ); +} |