blob: 5d9b8f99d2cb8802973e2f636b8b1eb9524b8877 (
plain) (
blame)
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
import Skeleton from "react-loading-skeleton";
import Image from "next/image";
import Link from "next/link";
export default function SecondarySide({
info,
providerId,
watchId,
episode,
progress,
artStorage,
dub,
}) {
return (
<div className="lg:w-[35%] shrink-0 w-screen">
<h1 className="text-xl font-karla pl-4 pb-5 font-semibold">Up Next</h1>
<div className="flex flex-col gap-5 lg:pl-5 py-2 scrollbar-thin px-2 scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
{episode && episode.length > 0 ? (
episode.some((item) => item.title && item.description) > 0 ? (
episode.map((item) => {
const time = artStorage?.[item.id]?.timeWatched;
const duration = artStorage?.[item.id]?.duration;
let prog = (time / duration) * 100;
if (prog > 90) prog = 100;
return (
<Link
href={`/en/anime/watch/${
info.id
}/${providerId}?id=${encodeURIComponent(item.id)}&num=${
item.number
}${dub ? `&dub=${dub}` : ""}`}
key={item.id}
className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
item.id == watchId
? "pointer-events-none ring-1 ring-action"
: "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
}`}
>
<div className="w-[43%] lg:w-[40%] h-[110px] relative rounded-lg z-40 shrink-0 overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]">
<div className="relative">
<Image
src={item.image}
alt="Anime Cover"
width={1000}
height={1000}
className={`object-cover z-30 rounded-lg h-[110px] ${
item.id == watchId
? "brightness-[30%]"
: "brightness-75"
}`}
/>
<span
className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
style={{
width:
progress && artStorage && item?.number <= progress
? "100%"
: artStorage?.[item?.id]
? `${prog}%`
: "0",
}}
/>
<span className="absolute bottom-2 left-2 font-karla font-bold text-sm">
Episode {item.number}
</span>
{item.id == watchId && (
<div className="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"
>
<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 gap-2 ${
item.id == watchId ? "text-[#7a7a7a]" : ""
}`}
>
<h1 className="font-karla font-bold italic line-clamp-1">
{item.title}
</h1>
<p className="line-clamp-2 text-xs italic font-outfit font-extralight">
{item?.description}
</p>
</div>
</Link>
);
})
) : (
episode.map((item) => {
return (
<Link
href={`/en/anime/watch/${
info.id
}/${providerId}?id=${encodeURIComponent(item.id)}&num=${
item.number
}${dub ? `&dub=${dub}` : ""}`}
key={item.id}
className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
item.id == watchId
? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
: "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
}`}
>
Episode {item.number}
</Link>
);
})
)
) : (
<>
{[1].map((item) => (
<Skeleton
key={item}
className="bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out"
/>
))}
</>
)}
</div>
</div>
);
}
|