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, 92 insertions, 18 deletions

diff --git a/pages/en/anime/[...id].js b/pages/en/anime/[...id].js
index 5e4aed8..534aa17 100644
--- a/pages/en/anime/[...id].js
+++ b/pages/en/anime/[...id].js
@@ -125,14 +125,14 @@ export default function Info({ info, color }) {
           }&image=${info.bannerImage || info.coverImage.extraLarge}`}
         />
       </Head>
-      <ToastContainer pauseOnFocusLoss={false} />
+      <ToastContainer pauseOnHover={false} />
       <Modal open={open} onClose={() => handleClose()}>
         <div>
           {!session && (
             <div className="flex-center flex-col gap-5 px-10 py-5 bg-secondary rounded-md">
-              <h1 className="text-md font-extrabold font-karla">
+              <div className="text-md font-extrabold font-karla">
                 Edit your list
-              </h1>
+              </div>
               <button
                 className="flex items-center bg-[#363642] rounded-md text-white p-1"
                 onClick={() => signIn("AniListProvider")}
diff --git a/pages/en/anime/recently-watched.js b/pages/en/anime/recently-watched.js
index 0a7fbae..1cc713a 100644
--- a/pages/en/anime/recently-watched.js
+++ b/pages/en/anime/recently-watched.js
@@ -7,10 +7,13 @@ import Footer from "../../../components/footer";
 import { getServerSession } from "next-auth";
 import { authOptions } from "../../api/auth/[...nextauth]";
 import MobileNav from "../../../components/home/mobileNav";
+import { ToastContainer, toast } from "react-toastify";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 export default function PopularAnime({ sessions }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [remove, setRemoved] = useState();
 
   useEffect(() => {
     setLoading(true);
@@ -46,11 +49,66 @@ export default function PopularAnime({ sessions }) {
       }
     };
     fetchData();
-  }, []);
+  }, [remove]);
+
+  const removeItem = async (id) => {
+    if (sessions?.user?.name) {
+      // remove from database
+      const res = await fetch(`/api/user/update/episode`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: sessions?.user?.name,
+          id: id,
+        }),
+      });
+      const data = await res.json();
+
+      // remove from local storage
+      const artplayerSettings =
+        JSON.parse(localStorage.getItem("artplayer_settings")) || {};
+      if (artplayerSettings[id]) {
+        delete artplayerSettings[id];
+        localStorage.setItem(
+          "artplayer_settings",
+          JSON.stringify(artplayerSettings)
+        );
+      }
+
+      // update client
+      setRemoved(id);
+
+      if (data?.message === "Episode deleted") {
+        toast.success("Episode removed from history", {
+          position: "bottom-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          draggable: true,
+          theme: "dark",
+        });
+      }
+    } else {
+      const artplayerSettings =
+        JSON.parse(localStorage.getItem("artplayer_settings")) || {};
+      if (artplayerSettings[id]) {
+        delete artplayerSettings[id];
+        localStorage.setItem(
+          "artplayer_settings",
+          JSON.stringify(artplayerSettings)
+        );
+      }
+
+      setRemoved(id);
+    }
+  };
 
   return (
     <>
       <MobileNav sessions={sessions} />
+      <ToastContainer pauseOnHover={false} />
       <div className="flex flex-col gap-2 items-center min-h-screen w-screen px-2 relative pb-10">
         <div className="z-50 bg-primary pt-5 pb-3 shadow-md shadow-primary w-full fixed left-0 px-3">
           <Link href="/en" className="flex gap-2 items-center font-karla">
@@ -68,14 +126,27 @@ export default function PopularAnime({ sessions }) {
               if (prog > 90) prog = 100;
 
               return (
-                <Link
+                <div
                   key={i.watchId}
-                  className="flex flex-col gap-2 shrink-0 cursor-pointer"
-                  href={`/en/anime/watch/${i.aniId}/${
-                    i.provider
-                  }?id=${encodeURIComponent(i.watchId)}&num=${i.episode}`}
+                  className="flex flex-col gap-2 shrink-0 cursor-pointer relative group/item"
                 >
-                  <div className="relative md:w-[320px] aspect-video rounded-md overflow-hidden group">
+                  <div className="absolute z-40 top-1 right-1 group-hover/item:visible invisible hover:text-action">
+                    <div
+                      className="flex flex-col items-center group/delete"
+                      onClick={() => removeItem(i.watchId)}
+                    >
+                      <XMarkIcon className="w-6 h-6 shrink-0 bg-primary p-1 rounded-full" />
+                      <span className="absolute font-karla bg-secondary shadow-black shadow-2xl py-1 px-2 whitespace-nowrap text-white text-sm rounded-md right-7 -bottom-[2px] z-40 duration-300 transition-all ease-out group-hover/delete:visible group-hover/delete:scale-100 group-hover/delete:translate-x-0 group-hover/delete:opacity-100 opacity-0 translate-x-10 scale-50 invisible">
+                        Remove from history
+                      </span>
+                    </div>
+                  </div>
+                  <Link
+                    className="relative md:w-[320px] aspect-video rounded-md overflow-hidden group"
+                    href={`/en/anime/watch/${i.aniId}/${
+                      i.provider
+                    }?id=${encodeURIComponent(i.watchId)}&num=${i.episode}`}
+                  >
                     <div className="w-full h-full bg-gradient-to-t from-black/70 from-20% to-transparent group-hover:to-black/40 transition-all duration-300 ease-out absolute z-30" />
                     <div className="absolute bottom-3 left-0 mx-2 text-white flex gap-2 items-center w-[80%] z-30">
                       <PlayIcon className="w-5 h-5 shrink-0" />
@@ -101,8 +172,13 @@ export default function PopularAnime({ sessions }) {
                         className="w-fit group-hover:scale-[1.02] duration-300 ease-out z-10"
                       />
                     )}
-                  </div>
-                  <div className="flex flex-col font-karla w-full">
+                  </Link>
+                  <Link
+                    className="flex flex-col font-karla w-full"
+                    href={`/en/anime/watch/${i.aniId}/${
+                      i.provider
+                    }?id=${encodeURIComponent(i.watchId)}&num=${i.episode}`}
+                  >
                     {/* <h1 className="font-semibold">{i.title}</h1> */}
                     <p className="flex items-center gap-1 text-sm text-gray-400 md:w-[320px]">
                       <span
@@ -119,8 +195,8 @@ export default function PopularAnime({ sessions }) {
                       </span>{" "}
                       | Episode {i.episode}
                     </p>
-                  </div>
-                </Link>
+                  </Link>
+                </div>
               );
             })}
 
diff --git a/pages/en/anime/watch/[...info].js b/pages/en/anime/watch/[...info].js
index e013c6b..c17d9c5 100644
--- a/pages/en/anime/watch/[...info].js
+++ b/pages/en/anime/watch/[...info].js
@@ -172,8 +172,6 @@ export default function Info({
     };
   }, [sessions?.user?.name, epiNumber, dub]);
 
-  // console.log(proxy);
-
   return (
     <>
       <Head>
@@ -199,6 +197,7 @@ export default function Info({
             setLoading={setLoading}
             loading={loading}
             timeWatched={userData?.timeWatched}
+            dub={dub}
           />
           <SecondarySide
             info={info}
@@ -230,8 +229,7 @@ export async function getServerSideProps(context) {
   const proxy = process.env.PROXY_URI;
   const disqus = process.env.DISQUS_SHORTNAME;
 
-  const aniId = query.info[0];
-  const provider = query.info[1];
+  const [aniId, provider] = query.info;
   const watchId = query.id;
   const epiNumber = query.num;
   const dub = query.dub;