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

3 files changed, 31 insertions, 11 deletions

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