1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
import Image from "next/image";
import Link from "next/link";
export default function ThumbnailDetail({
index,
epi,
info,
image,
title,
description,
provider,
artStorage,
progress,
dub,
}) {
const time = artStorage?.[epi?.id]?.timeWatched;
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 && (
<Image
src={image || ""}
alt={`Episode ${epi?.number} Thumbnail`}
width={520}
height={236}
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={{
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 || 0}
</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">
{title || `Episode ${epi?.number || 0}`}
</h1>
{description && (
<p className="line-clamp-2 text-xs lg:text-md xl:text-lg italic font-outfit font-extralight">
{description}
</p>
)}
</div>
</Link>
);
}
|