Update v3.5

6 files changed, 153 insertions, 70 deletions

diff --git a/components/footer.js b/components/footer.js
index 90ae982..3494810 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -3,9 +3,12 @@ import Instagram from "./media/instagram";
 import Link from "next/link";
 import Image from "next/image";
 import { signIn, useSession } from "next-auth/react";
+import { useState } from "react";
 
 function Footer() {
   const { data: session, status } = useSession();
+  const [year, setYear] = useState(new Date().getFullYear());
+  const [season, setSeason] = useState(getCurrentSeason());
 
   return (
     <section className="text-[#dbdcdd] z-40 bg-[#0c0d10] md:flex md:h-[12rem] md:items-center md:justify-between">
@@ -39,7 +42,11 @@ function Footer() {
           <div className="flex flex-col gap-10 font-karla font-bold md:flex-row md:gap-[5.94rem]">
             <ul className="flex flex-col gap-y-[0.7rem] ">
               <li className="cursor-pointer hover:text-action">
-                <Link href="/">This Season</Link>
+                <Link
+                  href={`/search/anime?season=${season}&seasonYear=${year}`}
+                >
+                  This Season
+                </Link>
               </li>
               <li className="cursor-pointer hover:text-action">
                 <Link href="/search/anime">Popular Anime</Link>
@@ -83,3 +90,29 @@ function Footer() {
 }
 
 export default Footer;
+
+function getCurrentSeason() {
+  const now = new Date();
+  const month = now.getMonth() + 1; // getMonth() returns 0-based index
+
+  switch (month) {
+    case 12:
+    case 1:
+    case 2:
+      return "WINTER";
+    case 3:
+    case 4:
+    case 5:
+      return "SPRING";
+    case 6:
+    case 7:
+    case 8:
+      return "SUMMER";
+    case 9:
+    case 10:
+    case 11:
+      return "FALL";
+    default:
+      return "UNKNOWN SEASON";
+  }
+}
diff --git a/components/hero/content.js b/components/hero/content.js
index 98ec4a8..25e1431 100644
--- a/components/hero/content.js
+++ b/components/hero/content.js
@@ -52,7 +52,7 @@ export default function Content({ ids, section, data }) {
               >
                 <Link
                   href={`/anime/${anime.id}`}
-                  className="hover:scale-105 group relative duration-300 ease-in-out"
+                  className="hover:scale-105 group relative duration-300 ease-in-out hover-parent"
                 >
                   {/* <div className="fixed top-0 z-40 bg-black invisible group-hover:visible">
                     {anime.title.romaji || anime.title.english}
@@ -75,7 +75,7 @@ export default function Content({ ids, section, data }) {
                       anime.coverImage?.large ||
                       "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
                     }
-                    className="z-20 h-[192px] w-[135px] object-cover lg:h-[265px] lg:w-[185px] rounded-md"
+                    className="z-20 h-[192px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover  rounded-md"
                   />
                 </Link>
               </div>
diff --git a/components/listEditor.js b/components/listEditor.js
index f9e8ab8..58177d3 100644
--- a/components/listEditor.js
+++ b/components/listEditor.js
@@ -1,14 +1,16 @@
 import { useState } from "react";
 import useAlert from "./useAlert";
-import { motion as m } from "framer-motion";
+import { AnimatePresence, motion as m } from "framer-motion";
+import Image from "next/image";
 
-const ListEditor = ({ animeId, session, stats, prg, max }) => {
+const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => {
   const { message, type, showAlert } = useAlert();
   const [status, setStatus] = useState(stats ?? "");
   const [progress, setProgress] = useState(prg ?? 0);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    console.log("Submitting", status?.name, progress);
     try {
       const response = await fetch("https://graphql.anilist.co/", {
         method: "POST",
@@ -29,12 +31,16 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
           `,
           variables: {
             mediaId: animeId,
-            progress: progress ? parseInt(progress) : null,
+            progress: progress,
             status: status || null,
           },
         }),
       });
       const { data } = await response.json();
+      if (data.SaveMediaListEntry === null) {
+        showAlert("Something went wrong", "error");
+        return;
+      }
       console.log("Saved media list entry", data);
       //   success();
       showAlert("Media list entry saved", "success");
@@ -45,64 +51,102 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
   };
 
   return (
-    <div className="relative">
-      {message && (
-        <m.div
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: 10 }}
-          className={`${
-            type === "success" ? "bg-green-500" : "bg-red-500"
-          } text-white px-4 py-1 mb-4 rounded-md`}
-        >
-          {message}
-        </m.div>
-      )}
-      <form
-        onSubmit={handleSubmit}
-        className="px-10 py-5 text-inherit font-karla antialiased shrink-0"
-      >
-        <div className="flex justify-between items-center gap-14">
-          <label htmlFor="status" className="font-karla font-bold">
-            Status:
-          </label>
-          <select
-            name="status"
-            id="status"
-            value={status}
-            onChange={(e) => setStatus(e.target.value)}
-            className="rounded-md px-2 py-1"
+    <div>
+      <div className="absolute font-karla font-bold -top-8 rounded-sm px-2 py-1 text-sm">
+        List Editor
+      </div>
+      <AnimatePresence>
+        {message && (
+          <m.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10, transition: { duration: 0.2 } }}
+            className={`${
+              type === "success" ? "bg-green-500" : "bg-red-500"
+            } text-white px-4 py-1 mb-2 rounded-md text-sm sm:text-base`}
           >
-            <option value="">Select a status</option>
-            <option value="CURRENT">Watching</option>
-            <option value="COMPLETED">Completed</option>
-            <option value="PAUSED">Paused</option>
-            <option value="DROPPED">Dropped</option>
-            <option value="PLANNING">Plan to watch</option>
-          </select>
-        </div>
-        <div className="flex justify-between items-center mt-2">
-          <label htmlFor="progress" className="font-karla font-bold">
-            Progress:
-          </label>
-          <input
-            type="number"
-            name="progress"
-            id="progress"
-            value={progress}
-            max={max}
-            onChange={(e) => setProgress(e.target.value)}
-            className="rounded-md px-2 py-1"
-            min="0"
-          />
+            {message}
+          </m.div>
+        )}
+      </AnimatePresence>
+      <div className="relative bg-secondary rounded-sm w-screen md:w-auto">
+        <div className="md:flex">
+          {image && (
+            <div>
+              <Image
+                src={image.coverImage.large}
+                alt="image"
+                height={500}
+                width={500}
+                className="object-cover w-[120px] h-[180px] rounded-l-sm hidden md:block"
+              />
+              <Image
+                src={
+                  image.bannerImage ||
+                  image.coverImage.extraLarge ||
+                  image.coverImage.large
+                }
+                alt="image"
+                height={500}
+                width={500}
+                className="object-cover h-[50px] rounded-t-sm md:hidden"
+              />
+            </div>
+          )}
+          <form
+            onSubmit={handleSubmit}
+            className="px-7 py-5 text-inherit flex flex-col justify-between gap-3 font-karla antialiased shrink-0 relative"
+          >
+            <div className="flex flex-col gap-2">
+              <div className="flex justify-between items-center gap-4 sm:gap-24">
+                <label
+                  htmlFor="status"
+                  className="font-karla font-bold text-sm sm:text-base"
+                >
+                  Status:
+                </label>
+                <select
+                  name="status"
+                  id="status"
+                  value={status?.value}
+                  onChange={(e) => setStatus(e.target.value)}
+                  className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
+                >
+                  <option value="CURRENT">Watching</option>
+                  <option value="COMPLETED">Completed</option>
+                  <option value="PAUSED">Paused</option>
+                  <option value="DROPPED">Dropped</option>
+                  <option value="PLANNING">Plan to watch</option>
+                </select>
+              </div>
+              <div className="flex justify-between items-center mt-2">
+                <label
+                  htmlFor="progress"
+                  className="font-karla font-bold text-sm sm:text-base"
+                >
+                  Progress:
+                </label>
+                <input
+                  type="number"
+                  name="progress"
+                  id="progress"
+                  value={progress}
+                  max={max}
+                  onChange={(e) => setProgress(e.target.value)}
+                  className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
+                  min="0"
+                />
+              </div>
+            </div>
+            <button
+              type="submit"
+              className="bg-[#363642] text-white rounded-sm mt-2 py-1 text-sm sm:text-base"
+            >
+              Save
+            </button>
+          </form>
         </div>
-        <button
-          type="submit"
-          className="bg-[#3a3a3a] text-white rounded-md mt-2 py-1 px-4"
-        >
-          Save
-        </button>
-      </form>
+      </div>
     </div>
   );
 };
diff --git a/components/modal.js b/components/modal.js
index 0a9d349..78b76d7 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -3,13 +3,13 @@ export default function Modal({ open, onClose, children }) {
     <div
       onClick={onClose}
       className={`fixed z-50 inset-0 flex justify-center items-center transition-colors ${
-        open ? "visible bg-black bg-opacity-50" : "invisible"
+        open ? "visible bg-black bg-opacity-50 backdrop-blur-sm" : "invisible"
       }`}
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className={`shadow rounded-xl p-6 transition-all ${
-          open ? "scale-125 opacity-100" : "scale-100 opacity-0"
+        className={`shadow rounded-xl transition-all ${
+          open ? "scale-100 opacity-100" : "scale-75 opacity-0"
         }`}
       >
         {children}
diff --git a/components/useAlert.js b/components/useAlert.js
index 7426096..fa82c42 100644
--- a/components/useAlert.js
+++ b/components/useAlert.js
@@ -10,8 +10,10 @@ const useAlert = () => {
     setTimeout(() => {
       setMessage("");
       setType("");
-      window.location.reload();
-    }, 5000);
+      if (type === "success") {
+        window.location.reload();
+      }
+    }, 3000);
   };
 
   return { message, type, showAlert };
diff --git a/components/videoPlayer.js b/components/videoPlayer.js
index e47e798..b007d95 100644
--- a/components/videoPlayer.js
+++ b/components/videoPlayer.js
@@ -12,6 +12,7 @@ export default function VideoPlayer({
   op,
   ed,
   title,
+  poster,
 }) {
   const [url, setUrl] = useState();
   const [source, setSource] = useState([]);
@@ -61,8 +62,6 @@ export default function VideoPlayer({
     compiler();
   }, [data]);
 
-  // console.log(source);
-
   return (
     <>
       {url ? (
@@ -74,8 +73,13 @@ export default function VideoPlayer({
             title: `${title}`,
             autoplay: true,
             screenshot: true,
+            poster: poster ? poster : "",
+          }}
+          style={{
+            width: "100%",
+            height: "100%",
+            margin: "0 auto 0",
           }}
-          style={{ width: "100%", height: "100%", margin: "0 auto 0" }}
           getInstance={(art) => {
             art.on("ready", () => {
               const seek = art.storage.get(id);