Update v3.9.3 - Merged Beta to Main (#51)v3.9.3

* commit

* update db

* Update v3.9.1-beta-v3.1

* Update v3.9.1

* Fix watched progress not showing

* Secure headers

* Fix recently watched image

* Update v3.9.2

> Added custom lists for AniList
> Fixed episode listMode progress

* Update db route

* Fixed AniList

* Fix next button on dub anime

> video is playing sub anime instead dub

* small adjusment for premid

* fix eslint

* small updates

> added ability to remove episode from recently watched

* Update v3.9.3

8 files changed, 56 insertions, 18 deletions

diff --git a/components/anime/episode.js b/components/anime/episode.js
index c889c25..5d3451b 100644
--- a/components/anime/episode.js
+++ b/components/anime/episode.js
@@ -246,6 +246,7 @@ export default function AnimeEpisode({ info, progress }) {
                           info={info}
                           episode={episode}
                           index={index}
+                          artStorage={artStorage}
                           providerId={providerId}
                           progress={progress}
                           dub={isDub}
diff --git a/components/anime/infoDetails.js b/components/anime/infoDetails.js
index 0cf233c..814e49b 100644
--- a/components/anime/infoDetails.js
+++ b/components/anime/infoDetails.js
@@ -45,7 +45,10 @@ export default function DesktopDetails({
 
         <div className="hidden lg:flex w-full flex-col gap-5 h-[250px]">
           <div className="flex flex-col gap-2">
-            <h1 className=" font-inter font-bold text-[36px] text-white line-clamp-1">
+            <h1
+              className="title font-inter font-bold text-[36px] text-white line-clamp-1"
+              title={info?.title?.romaji || info?.title?.english}
+            >
               {info ? (
                 info?.title?.romaji || info?.title?.english
               ) : (
diff --git a/components/anime/viewMode/listMode.js b/components/anime/viewMode/listMode.js
index 2016262..f3bcf05 100644
--- a/components/anime/viewMode/listMode.js
+++ b/components/anime/viewMode/listMode.js
@@ -4,10 +4,16 @@ export default function ListMode({
   info,
   episode,
   index,
+  artStorage,
   providerId,
   progress,
   dub,
 }) {
+  const time = artStorage?.[episode?.id]?.timeWatched;
+  const duration = artStorage?.[episode?.id]?.duration;
+  let prog = (time / duration) * 100;
+  if (prog > 90) prog = 100;
+
   return (
     <div key={episode.number} className="flex flex-col gap-3 px-2">
       <Link
@@ -15,7 +21,11 @@ export default function ListMode({
           episode.id
         )}&num=${episode.number}${dub ? `&dub=${dub}` : ""}`}
         className={`text-start text-sm lg:text-lg ${
-          progress && episode.number <= progress
+          progress
+            ? progress && episode.number <= progress
+              ? "text-[#5f5f5f]"
+              : "text-white"
+            : prog === 100
             ? "text-[#5f5f5f]"
             : "text-white"
         }`}
@@ -24,7 +34,11 @@ export default function ListMode({
         {episode.title && (
           <p
             className={`text-xs lg:text-sm ${
-              progress && episode.number <= progress
+              progress
+                ? progress && episode.number <= progress
+                  ? "text-[#5f5f5f]"
+                  : "text-[#b1b1b1]"
+                : prog === 100
                 ? "text-[#5f5f5f]"
                 : "text-[#b1b1b1]"
             } italic`}
diff --git a/components/anime/viewMode/thumbnailDetail.js b/components/anime/viewMode/thumbnailDetail.js
index a085bc7..6efeb77 100644
--- a/components/anime/viewMode/thumbnailDetail.js
+++ b/components/anime/viewMode/thumbnailDetail.js
@@ -10,7 +10,7 @@ export default function ThumbnailDetail({
   progress,
   dub,
 }) {
-  const time = artStorage?.[epi?.id]?.time;
+  const time = artStorage?.[epi?.id]?.timeWatched;
   const duration = artStorage?.[epi?.id]?.duration;
   let prog = (time / duration) * 100;
   if (prog > 90) prog = 100;
@@ -33,7 +33,7 @@ export default function ThumbnailDetail({
             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`}
+            className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
             style={{
               width:
                 progress && artStorage && epi?.number <= progress
diff --git a/components/anime/viewMode/thumbnailOnly.js b/components/anime/viewMode/thumbnailOnly.js
index 6063dfc..99f02bd 100644
--- a/components/anime/viewMode/thumbnailOnly.js
+++ b/components/anime/viewMode/thumbnailOnly.js
@@ -9,7 +9,7 @@ export default function ThumbnailOnly({
   progress,
   dub,
 }) {
-  const time = artStorage?.[episode?.id]?.time;
+  const time = artStorage?.[episode?.id]?.timeWatched;
   const duration = artStorage?.[episode?.id]?.duration;
   let prog = (time / duration) * 100;
   if (prog > 90) prog = 100;
@@ -25,7 +25,7 @@ export default function ThumbnailOnly({
         Episode {episode?.number}
       </span>
       <span
-        className={`absolute bottom-7 left-0 h-1 bg-red-600`}
+        className={`absolute bottom-7 left-0 h-[2px] bg-red-600`}
         style={{
           width:
             progress && artStorage && episode?.number <= progress
diff --git a/components/anime/watch/primary/details.js b/components/anime/watch/primary/details.js
index 94c3360..f092879 100644
--- a/components/anime/watch/primary/details.js
+++ b/components/anime/watch/primary/details.js
@@ -8,6 +8,7 @@ export default function Details({
   info,
   session,
   epiNumber,
+  description,
   id,
   onList,
   setOnList,
@@ -48,7 +49,10 @@ export default function Details({
             <Skeleton height={240} />
           )}
         </div>
-        <div className="grid w-full pl-5 gap-3 h-[240px]">
+        <div
+          className="grid w-full pl-5 gap-3 h-[240px]"
+          data-episode={info?.episodes || "0"}
+        >
           <div className="grid grid-cols-2 gap-1 items-center">
             <h2 className="text-sm font-light font-roboto text-[#878787]">
               Studios
@@ -93,11 +97,15 @@ export default function Details({
             <div className="grid grid-flow-dense grid-cols-2 gap-2 h-full w-full">
               {info ? (
                 <>
-                  <div className="line-clamp-3">{info.title?.romaji || ""}</div>
-                  <div className="line-clamp-3">
+                  <div className="title-rm line-clamp-3">
+                    {info.title?.romaji || ""}
+                  </div>
+                  <div className="title-en line-clamp-3">
                     {info.title?.english || ""}
                   </div>
-                  <div className="line-clamp-3">{info.title?.native || ""}</div>
+                  <div className="title-nt line-clamp-3">
+                    {info.title?.native || ""}
+                  </div>
                 </>
               ) : (
                 <Skeleton width={200} height={50} />
@@ -120,7 +128,7 @@ export default function Details({
       <div className={`bg-secondary rounded-md mt-3 mx-3`}>
         {info && (
           <p
-            dangerouslySetInnerHTML={{ __html: info?.description }}
+            dangerouslySetInnerHTML={{ __html: description }}
             className={`p-5 text-sm font-light font-roboto text-[#e4e4e4] `}
           />
         )}
diff --git a/components/anime/watch/primarySide.js b/components/anime/watch/primarySide.js
index c601795..b032fd6 100644
--- a/components/anime/watch/primarySide.js
+++ b/components/anime/watch/primarySide.js
@@ -27,6 +27,7 @@ export default function PrimarySide({
   setOnList,
   episodeList,
   timeWatched,
+  dub,
 }) {
   const [episodeData, setEpisodeData] = useState();
   const [open, setOpen] = useState(false);
@@ -148,6 +149,7 @@ export default function PrimarySide({
                 aniTitle={info.title?.romaji || info.title?.english}
                 track={navigation}
                 timeWatched={timeWatched}
+                dub={dub}
               />
             )
           ) : (
@@ -162,13 +164,14 @@ export default function PrimarySide({
                   <Link
                     href={`/en/anime/${info.id}`}
                     className="hover:underline"
+                    title={navigation?.playing?.title || info.title?.romaji}
                   >
                     {navigation?.playing?.title || info.title?.romaji}
                   </Link>
                 </h1>
-                <h1 className="text-sm font-karla font-light">
+                <h3 className="text-sm font-karla font-light">
                   Episode {epiNumber}
-                </h1>
+                </h3>
               </div>
               <div className="flex gap-4 items-center justify-end">
                 <div className="relative">
@@ -180,7 +183,11 @@ export default function PrimarySide({
                         (episode) => episode.number === parseInt(e.target.value)
                       );
                       router.push(
-                        `/en/anime/watch/${info.id}/${providerId}?id=${selectedEpisode.id}&num=${selectedEpisode.number}`
+                        `/en/anime/watch/${info.id}/${providerId}?id=${
+                          selectedEpisode.id
+                        }&num=${selectedEpisode.number}${
+                          dub ? `&dub=${dub}` : ""
+                        }`
                       );
                     }}
                   >
@@ -199,7 +206,11 @@ export default function PrimarySide({
                   }relative group`}
                   onClick={() => {
                     router.push(
-                      `/en/anime/watch/${info.id}/${providerId}?id=${navigation?.next.id}&num=${navigation?.next.number}`
+                      `/en/anime/watch/${info.id}/${providerId}?id=${
+                        navigation?.next.id
+                      }&num=${navigation?.next.number}${
+                        dub ? `&dub=${dub}` : ""
+                      }`
                     );
                   }}
                 >
@@ -229,6 +240,7 @@ export default function PrimarySide({
           <Details
             info={info}
             session={session}
+            description={navigation?.playing?.description || info?.description}
             epiNumber={epiNumber}
             id={watchId}
             onList={onList}
diff --git a/components/anime/watch/secondarySide.js b/components/anime/watch/secondarySide.js
index e3f0224..5d9b8f9 100644
--- a/components/anime/watch/secondarySide.js
+++ b/components/anime/watch/secondarySide.js
@@ -18,7 +18,7 @@ export default function SecondarySide({
         {episode && episode.length > 0 ? (
           episode.some((item) => item.title && item.description) > 0 ? (
             episode.map((item) => {
-              const time = artStorage?.[item.id]?.time;
+              const time = artStorage?.[item.id]?.timeWatched;
               const duration = artStorage?.[item.id]?.duration;
               let prog = (time / duration) * 100;
               if (prog > 90) prog = 100;
@@ -50,7 +50,7 @@ export default function SecondarySide({
                         }`}
                       />
                       <span
-                        className={`absolute bottom-0 left-0 h-[3px] bg-red-700`}
+                        className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
                         style={{
                           width:
                             progress && artStorage && item?.number <= progress