feat: Implement a way to review/rate anime (#108)

* Make details cover lead back to anime page

* Make 'markProgress' use object instead of param list

* Import Link

* Implement Rate modal

* Pass session into useAniList

Co-authored-by: Factiven <[email protected]>

* Reimplement using markComplete & add toast for failure

* redefined ratemodal

* fix: home page client error

* update version

---------

Co-authored-by: Factiven <[email protected]>

2 files changed, 42 insertions, 6 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>
   );
 }