3 files changed, 56 insertions, 13 deletions

diff --git a/components/watch/new-player/components/layouts/video-layout.tsx b/components/watch/new-player/components/layouts/video-layout.tsx
index fa1f6c3..93e4629 100644
--- a/components/watch/new-player/components/layouts/video-layout.tsx
+++ b/components/watch/new-player/components/layouts/video-layout.tsx
@@ -17,13 +17,14 @@ import { Title } from "../title";
 import { ChapterTitleComponent } from "../chapter-title";
 import { useWatchProvider } from "@/lib/context/watchPageProvider";
 import { Navigation } from "../../player";
-import BufferingIndicator from "../bufferingIndicator";
 import { useEffect, useState } from "react";
+import RateModal from "@/components/shared/RateModal";
 
 export interface VideoLayoutProps {
   thumbnails?: string;
   navigation?: Navigation;
   host?: boolean;
+  session?: any;
 }
 
 function isMobileDevice() {
@@ -40,22 +41,40 @@ export function VideoLayout({
   thumbnails,
   navigation,
   host = true,
+  session,
 }: VideoLayoutProps) {
   const [isMobile, setIsMobile] = useState(false);
 
-  const { track } = useWatchProvider();
+  const { track, setRatingModalState, ratingModalState } = useWatchProvider();
   const isFullscreen = useMediaState("fullscreen");
 
   useEffect(() => {
     setIsMobile(isMobileDevice());
   }, []);
 
+  useEffect(() => {
+    setRatingModalState((prev: any) => {
+      return {
+        ...prev,
+        isFullscreen: isFullscreen,
+      };
+    });
+  }, [isFullscreen]);
+
   return (
     <>
       <Gestures host={host} />
       <Captions
         className={`${captionStyles.captions} media-preview:opacity-0 media-controls:bottom-[85px] media-captions:opacity-100 absolute inset-0 bottom-2 z-10 select-none break-words opacity-0 transition-[opacity,bottom] duration-300`}
       />
+      {ratingModalState.isFullscreen && (
+        <RateModal
+          toggle={ratingModalState.isOpen}
+          setToggle={setRatingModalState}
+          position="top"
+          session={session}
+        />
+      )}
       <Controls.Root
         className={`${styles.controls} media-paused:bg-black/10 duration-200 media-controls:opacity-100 absolute inset-0 z-10 flex h-full w-full flex-col bg-gradient-to-t from-black/30 via-transparent to-black/30 opacity-0 transition-opacity`}
       >
diff --git a/components/watch/new-player/player.tsx b/components/watch/new-player/player.tsx
index b98ff79..f2d11f7 100644
--- a/components/watch/new-player/player.tsx
+++ b/components/watch/new-player/player.tsx
@@ -12,7 +12,6 @@ import {
   type MediaPlayerInstance,
   Track,
   MediaTimeUpdateEventDetail,
-  MediaTimeUpdateEvent,
 } from "@vidstack/react";
 import { VideoLayout } from "./components/layouts/video-layout";
 import { useWatchProvider } from "@/lib/context/watchPageProvider";
@@ -98,6 +97,7 @@ export default function VidStack({
     playerState,
     dataMedia,
     autoNext,
+    setRatingModalState,
   } = useWatchProvider();
 
   const { qualities, duration } = useMediaStore(player);
@@ -379,7 +379,20 @@ export default function VidStack({
           mark = 1;
           setMarked(1);
           console.log("marking progress");
-          markProgress(dataMedia.id, navigation.playing.number);
+          // @ts-ignore Fix when convert useAnilist to typescript
+          markProgress({
+            mediaId: dataMedia.id,
+            progress: navigation.playing.number,
+          });
+
+          if (dataMedia.episodes === +navigation.playing?.number) {
+            setRatingModalState((prev: any) => {
+              return {
+                ...prev,
+                isOpen: true,
+              };
+            });
+          }
         }
       }
     }
@@ -424,7 +437,7 @@ export default function VidStack({
   return (
     <MediaPlayer
       key={id}
-      className={`${style.player} player`}
+      className={`${style.player} player relative`}
       title={
         navigation?.playing?.title ||
         `Episode ${navigation?.playing?.number}` ||
@@ -454,7 +467,11 @@ export default function VidStack({
           <Track key={chapters} src={chapters} kind="chapters" default={true} />
         )}
       </MediaProvider>
-      <VideoLayout thumbnails={track?.thumbnails} navigation={navigation} />
+      <VideoLayout
+        thumbnails={track?.thumbnails}
+        navigation={navigation}
+        session={sessions}
+      />
     </MediaPlayer>
   );
 }
diff --git a/components/watch/primary/details.tsx b/components/watch/primary/details.tsx
index f20f8cf..dd739f2 100644
--- a/components/watch/primary/details.tsx
+++ b/components/watch/primary/details.tsx
@@ -4,6 +4,8 @@ import Skeleton from "react-loading-skeleton";
 import DisqusComments from "../../disqus";
 import { AniListInfoTypes } from "types/info/AnilistInfoTypes";
 import { SessionTypes } from "pages/en";
+import Link from "next/link";
+import Image from "next/image";
 
 type DetailsProps = {
   info: AniListInfoTypes;
@@ -61,13 +63,18 @@ export default function Details({
       <div className="pb-4 h-full flex">
         <div className="aspect-[9/13] h-[240px]">
           {info ? (
-            <img
-              src={info.coverImage.extraLarge}
-              alt="Anime Cover"
-              width={1000}
-              height={1000}
-              className="object-cover aspect-[9/13] h-[240px] rounded-md"
-            />
+            <Link
+              className="hover:scale-105 hover:shadow-lg duration-300 ease-out"
+              href={`/en/anime/${id}`}
+            >
+              <Image
+                src={info.coverImage.extraLarge}
+                alt="Anime Cover"
+                width={1000}
+                height={1000}
+                className="object-cover aspect-[9/13] h-[240px] rounded-md"
+              />
+            </Link>
           ) : (
             <Skeleton height={240} />
           )}