fix: watched episodes button color

Dovakiin0 · Feb 24, 2024 · 3c5a1c5 · 3c5a1c5
1 parent 8c05a1a
commit 3c5a1c5
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 34 deletions.
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/public/workbox-1b1de004.js.map b/public/workbox-1b1de004.js.map
diff --git a/src/app/anime/[slug]/watch/components/EpisodeDisplay.tsx b/src/app/anime/[slug]/watch/components/EpisodeDisplay.tsx
@@ -11,16 +11,19 @@ type EpisodeDisplayProps = {
   mini?: boolean;
 };
 
-function EpisodeDisplay({ ep, watched = false }: EpisodeDisplayProps) {
+function EpisodeDisplay({
+  ep,
+  isCurrent,
+  watched = false,
+}: EpisodeDisplayProps) {
   return (
     <motion.div
       initial={{ opacity: 0 }}
       whileInView={{ opacity: 1, transition: { delay: 0.05 } }}
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.9 }}
-      className={`w-20 h-20 rounded-lg relative hover:cursor-pointer flex items-center justify-center ${
-        watched ? "bg-base-300" : "bg-gray-700"
-      }`}
+      className={`w-20 h-20 rounded-lg relative hover:cursor-pointer flex items-center justify-center ${isCurrent && "bg-pink-600"} ${watched ? "bg-base-300" : "bg-gray-700"
+        }`}
     >
       <p> EP {ep.number} </p>
     </motion.div>

diff --git a/src/app/anime/[slug]/watch/partial/EpisodeLayout.tsx b/src/app/anime/[slug]/watch/partial/EpisodeLayout.tsx
@@ -32,13 +32,6 @@ function EpisodeLayout({ animeInfo, episode }: EpisodeLayoutProps) {
     });
   }, []);
 
-  // useEffect(() => {
-  //   const provider = localStorage.getItem("provider");
-  //   if (!provider) {
-  //     localStorage.setItem("provider", "Gogo");
-  //   }
-  // }, []);
-
   const onSearch = (e: any) => {
     e.preventDefault();
     let ep = Number(e.target.value);
@@ -66,24 +59,6 @@ function EpisodeLayout({ animeInfo, episode }: EpisodeLayoutProps) {
             onChange={onSearch}
           />
         </div>
-        {/* <div className="flex items-center justify-end gap-2 w-full lg:w-1/2 order-1 lg:order-2 mb-5 lg:mb-0"> */}
-        {/*   <p className="text-sm text-gray-400">Provider</p> */}
-        {/*   <select */}
-        {/*     className="select select-bordered w-full lg:w-[400px] max-w-xs select-sm" */}
-        {/*     onChange={(e) => { */}
-        {/*       localStorage.setItem("provider", e.target.value); */}
-        {/*       window.location.reload(); */}
-        {/*     }} */}
-        {/*     value={ */}
-        {/*       typeof window !== "undefined" */}
-        {/*         ? localStorage.getItem("provider") ?? "Gogo" */}
-        {/*         : "" */}
-        {/*     } */}
-        {/*   > */}
-        {/*     <option value="Gogo">Gogo</option> */}
-        {/*     <option value="Zoro">Zoro</option> */}
-        {/*   </select> */}
-        {/* </div> */}
       </div>
       <div className="flex flex-wrap gap-5 max-h-[90vh] overflow-y-auto">
         {animeInfo.episodes.length > 0 ? (
@@ -94,6 +69,7 @@ function EpisodeLayout({ animeInfo, episode }: EpisodeLayoutProps) {
                   ep={ep}
                   backSrc={animeInfo.image}
                   isCurrent={episode.id === ep.id}
+                  watched={watched?.ep.some((e) => e.number === ep.number)}
                 />
               </a>
             </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -56,14 +56,14 @@ export default function RootLayout({
 
   gtag('config', 'G-X9RZ58XPH1');`}
       </Script>
-      <Script id="clarity" strategy="afterInteractive">
-        {`<script type="text/javascript">
+      <Script id="clarity-script" defer type="text/javascript">
+        {`
     (function(c,l,a,r,i,t,y){
         c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
         t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
     })(window, document, "clarity", "script", "l3pnvnd7wb");
-</script>`}
+    `}
       </Script>
       <body>
         <Header />

diff --git a/src/components/KitsunePlayer.tsx b/src/components/KitsunePlayer.tsx
@@ -117,8 +117,6 @@ function KitsunePlayer({ episodeInfo, animeInfo }: KitsunePlayerProps) {
     fetchSource();
   }, []);
 
-  console.log(epSource);
-
   return epSource ? (
     <ArtPlayer option={options} className="md:h-[800px] h-[250px] w-full" />
   ) : (