update 2nd

5 files changed, 120 insertions, 57 deletions

diff --git a/components/footer.js b/components/footer.js
index 3143070..4284dcf 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -5,7 +5,7 @@ import Image from "next/image";
 
 function Footer() {
   return (
-    <section className=" text-white z-50 bg-black md:flex md:h-[14rem] md:items-center md:justify-between">
+    <section className=" text-white z-40 bg-black md:flex md:h-[14rem] md:items-center md:justify-between">
       <div className="mx-auto flex w-[78%] flex-col space-y-10 py-10 md:flex-row md:items-center md:justify-between md:space-y-0 md:py-0">
         <div className="md:flex md:flex-col md:gap-y-[3.88rem]">
           <h1 className="font-outfit text-[2.56rem]">moopa</h1>
diff --git a/components/hero/content.js b/components/hero/content.js
index 532e4a6..a3db854 100644
--- a/components/hero/content.js
+++ b/components/hero/content.js
@@ -1,9 +1,12 @@
 import Link from "next/link";
-import React from "react";
+import React, { useState } from "react";
 import Image from "next/image";
 import { MdChevronLeft, MdChevronRight } from "react-icons/md";
 
 export default function Content({ ids, section, data }) {
+  const [scrollLeft, setScrollLeft] = useState(false);
+  const [scrollRight, setScrollRight] = useState(true);
+
   const slideLeft = () => {
     var slider = document.getElementById(ids);
     slider.scrollLeft = slider.scrollLeft - 500;
@@ -13,65 +16,75 @@ export default function Content({ ids, section, data }) {
     slider.scrollLeft = slider.scrollLeft + 500;
   };
 
+  const handleScroll = (e) => {
+    const scrollLeft = e.target.scrollLeft > 31;
+    const scrollRight =
+      e.target.scrollLeft < e.target.scrollWidth - e.target.clientWidth;
+    setScrollLeft(scrollLeft);
+    setScrollRight(scrollRight);
+  };
+
+  // console.log({ left: scrollLeft, right: scrollRight });
+
   const array = data;
   const filteredData = array.filter((item) => item.status !== "Unknown");
 
   return (
     <div>
-      <h1 className="px-5 font-outfit text-[20px] font-extrabold lg:text-[27px]">
-        {section}
-      </h1>
-      <div className="py-10">
-        <div className="relative flex items-center lg:gap-2">
-          <MdChevronLeft
-            onClick={slideLeft}
-            size={40}
-            className="mb-5 cursor-pointer opacity-50 hover:opacity-100"
-          />
-          <div
-            id={ids}
-            className="scroll flex h-full w-full items-center overflow-x-scroll scroll-smooth whitespace-nowrap overflow-y-hidden scrollbar-hide lg:gap-5"
-          >
-            {filteredData.map((anime) => {
-              const url = encodeURIComponent(
-                anime.title.english || anime.title.romaji
-              );
-
-              return (
-                <div
-                  key={anime.id}
-                  className="flex shrink-0 cursor-pointer items-center"
+      <h1 className="px-5 font-karla text-[20px] font-bold">{section}</h1>
+      <div className="relative flex items-center lg:gap-2">
+        <MdChevronLeft
+          onClick={slideLeft}
+          size={35}
+          className={`mb-5 cursor-pointer absolute left-0 bg-gradient-to-r from-[#141519]  z-40 h-full hover:opacity-100 ${
+            scrollLeft ? "visible" : "hidden"
+          }`}
+        />
+        <div
+          id={ids}
+          className="scroll flex h-full w-full items-center select-none overflow-x-scroll scroll-smooth whitespace-nowrap overflow-y-hidden scrollbar-hide lg:gap-8 gap-5 p-10 z-30 "
+          onScroll={handleScroll}
+        >
+          {filteredData.map((anime) => {
+            return (
+              <div
+                key={anime.id}
+                className="flex shrink-0 cursor-pointer items-center"
+              >
+                <Link
+                  href={`/anime/${anime.id}`}
+                  className="hover:scale-105 duration-300 ease-in-out"
                 >
-                  <Link href={`/anime/${anime.id}`}>
-                    <Image
-                      draggable={false}
-                      src={
-                        anime.image ||
-                        anime.coverImage?.extraLarge ||
-                        "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
-                      }
-                      alt={anime.title.romaji || anime.title.english}
-                      width={209}
-                      height={300}
-                      placeholder="blur"
-                      blurDataURL={
-                        anime.image ||
-                        anime.coverImage?.extraLarge ||
-                        "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
-                      }
-                      className="z-20 h-[230px] w-[168px] object-cover p-2 duration-300 ease-in-out hover:scale-105 lg:h-[290px] lg:w-[209px]"
-                    />
-                  </Link>
-                </div>
-              );
-            })}
-          </div>
-          <MdChevronRight
-            onClick={slideRight}
-            size={40}
-            className="mb-5 cursor-pointer opacity-50 hover:opacity-100"
-          />
+                  <Image
+                    draggable={false}
+                    src={
+                      anime.image ||
+                      anime.coverImage?.extraLarge ||
+                      "https://cdn.discordapp.com/attachments/986579286397964290/1058415946945003611/gray_pfp.png"
+                    }
+                    alt={anime.title.romaji || anime.title.english}
+                    width={209}
+                    height={300}
+                    placeholder="blur"
+                    blurDataURL={
+                      anime.image ||
+                      anime.coverImage?.extraLarge ||
+                      "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"
+                  />
+                </Link>
+              </div>
+            );
+          })}
         </div>
+        <MdChevronRight
+          onClick={slideRight}
+          size={30}
+          className={`mb-5 cursor-pointer absolute right-0 bg-gradient-to-l from-[#141519] z-40 h-full hover:opacity-100 hover:bg-gradient-to-l ${
+            scrollRight ? "visible" : "hidden"
+          }`}
+        />
       </div>
     </div>
   );
diff --git a/components/media/aniList.js b/components/media/aniList.js
index 3f319c2..5cf65ba 100644
--- a/components/media/aniList.js
+++ b/components/media/aniList.js
@@ -13,7 +13,7 @@ function AniList() {
           d="M27.825 21.773V2.977c0-1.077-.613-1.672-1.725-1.672h-3.795c-1.111 0-1.725.595-1.725 1.672v8.927c0 .251 2.5 1.418 2.565 1.665 1.904 7.21.414 12.982-1.392 13.251 2.952.142 3.277 1.517 1.078.578.337-3.848 1.65-3.84 5.422-.142.032.032.774 1.539.82 1.539h8.91c1.113 0 1.726-.594 1.726-1.672v-3.677c0-1.078-.614-1.672-1.725-1.672H27.825z"
         ></path>
         <path
-          fill="#585858"
+          fill="#fff"
           d="M12.07 1.306l-9.966 27.49h7.743l1.687-4.756h8.433l1.649 4.755h7.705l-9.929-27.49H12.07zm1.227 16.642l2.415-7.615 2.645 7.615h-5.06z"
         ></path>
       </g>
diff --git a/components/navbar.js b/components/navbar.js
index 3a8c5de..e0c1047 100644
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
+import { useSession, signIn, signOut } from "next-auth/react";
+import Image from "next/image";
 
 function Navbar(props) {
+  const { data: session, status } = useSession();
   const [isVisible, setIsVisible] = useState(false);
   const [fade, setFade] = useState(false);
   const { systemTheme, theme, setTheme } = useTheme();
@@ -22,6 +25,8 @@ function Navbar(props) {
     setFade(false);
   };
 
+  // console.log(session.user?.image);
+
   return (
     <header className={`${props.className}`}>
       <div className="flex h-16 w-auto items-center justify-between px-5 md:mx-auto md:w-[80%] md:px-0 text-white">
@@ -181,7 +186,7 @@ function Navbar(props) {
         </div>
 
         <nav className="left-0 top-[-100%] hidden w-auto items-center gap-10 px-5 md:flex">
-          <ul className="hidden gap-10 font-roboto text-xl md:flex ">
+          <ul className="hidden gap-10 font-roboto text-xl md:flex items-center">
             <li>
               <Link
                 href="/"
@@ -206,6 +211,21 @@ function Navbar(props) {
                 search
               </Link>
             </li>
+            {!session && (
+              <li>
+                <button
+                  onClick={() => signIn("AniListProvider")}
+                  className="ring-1 ring-action font-karla font-bold  p-2 rounded-md"
+                >
+                  Sign in
+                </button>
+              </li>
+            )}
+            {session && (
+              <li className="h-16 w-16 p-2">
+                <img src={session?.user.image.large} alt="imagine" />
+              </li>
+            )}
           </ul>
         </nav>
       </div>
diff --git a/components/videoPlayer.js b/components/videoPlayer.js
index c680430..e568772 100644
--- a/components/videoPlayer.js
+++ b/components/videoPlayer.js
@@ -1,10 +1,22 @@
 import Player from "../lib/Artplayer";
 import { useEffect, useState } from "react";
+import { useAniList } from "../lib/useAnilist";
 
-export default function VideoPlayer({ data, seek, titles, id }) {
+export default function VideoPlayer({
+  data,
+  seek,
+  titles,
+  id,
+  progress,
+  session,
+  aniId,
+}) {
   const [url, setUrl] = useState();
   const [source, setSource] = useState([]);
   const [loading, setLoading] = useState(true);
+  const { markProgress } = useAniList(session);
+
+  // console.log(progress);
 
   useEffect(() => {
     async function compiler() {
@@ -70,6 +82,24 @@ export default function VideoPlayer({ data, seek, titles, id }) {
             });
 
             art.on("destroy", () => {
+              const currentTime = art.currentTime;
+              const duration = art.duration;
+              const percentage = currentTime / duration;
+
+              if (percentage >= 0.9) {
+                // use >= instead of >
+                markProgress(aniId, progress);
+              } else {
+                console.log("Something went wrong");
+              }
+            });
+
+            art.on("video:ended", () => {
+              art.destroy();
+              console.log("Video ended");
+            });
+
+            art.on("destroy", () => {
               const lastPlayed = {
                 id: id,
                 time: art.currentTime,