feat: Add PreviousEpisode and NextEpisode to media controls (#111)

* 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

* Update version to v4.4.0 in changelogs.tsx

* Implement next and previous buttons to video controls

* fix subtitle button bugs

---------

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

3 files changed, 77 insertions, 1 deletions

diff --git a/components/watch/new-player/components/buttons.tsx b/components/watch/new-player/components/buttons.tsx
index 18c2b42..b8b5b57 100644
--- a/components/watch/new-player/components/buttons.tsx
+++ b/components/watch/new-player/components/buttons.tsx
@@ -24,9 +24,11 @@ import {
   PlayIcon,
   ReplayIcon,
   TheatreModeExitIcon,
+  NextIcon,
   TheatreModeIcon,
   VolumeHighIcon,
   VolumeLowIcon,
+  PreviousIcon,
 } from "@vidstack/react/icons";
 import { useRouter } from "next/router";
 import { Navigation } from "../player";
@@ -62,6 +64,72 @@ export function Play({ tooltipPlacement }: MediaButtonProps) {
   );
 }
 
+export function NextEpisode({
+  tooltipPlacement,
+  navigation,
+}: MediaButtonProps) {
+  const router = useRouter();
+  const { dataMedia, track } = useWatchProvider();
+  return (
+    navigation?.next && (
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            onClick={() => {
+              router.push(
+                `/en/anime/watch/${dataMedia.id}/${track?.provider}?id=${
+                  navigation?.next?.id
+                }&num=${navigation?.next?.number}${
+                  track?.isDub ? `&dub=${track?.isDub}` : ""
+                }`
+              );
+            }}
+            className={buttonClass}
+          >
+            <NextIcon className="w-8 h-8" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+          Next Episode
+        </Tooltip.Content>
+      </Tooltip.Root>
+    )
+  );
+}
+
+export function PreviousEpisode({
+  tooltipPlacement,
+  navigation,
+}: MediaButtonProps) {
+  const router = useRouter();
+  const { dataMedia, track } = useWatchProvider();
+  return (
+    navigation?.prev && (
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            onClick={() => {
+              router.push(
+                `/en/anime/watch/${dataMedia.id}/${track?.provider}?id=${
+                  navigation?.prev?.id
+                }&num=${navigation?.prev?.number}${
+                  track?.isDub ? `&dub=${track?.isDub}` : ""
+                }`
+              );
+            }}
+            className={buttonClass}
+          >
+            <PreviousIcon className="w-8 h-8" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Content className={tooltipClass} placement={tooltipPlacement}>
+          Previous Episode
+        </Tooltip.Content>
+      </Tooltip.Root>
+    )
+  );
+}
+
 export function MobilePlayButton({ tooltipPlacement, host }: MediaButtonProps) {
   const isPaused = useMediaState("paused"),
     ended = useMediaState("ended"),
diff --git a/components/watch/new-player/components/layouts/video-layout.tsx b/components/watch/new-player/components/layouts/video-layout.tsx
index 93e4629..8d4ec01 100644
--- a/components/watch/new-player/components/layouts/video-layout.tsx
+++ b/components/watch/new-player/components/layouts/video-layout.tsx
@@ -122,13 +122,20 @@ export function VideoLayout({
           <Sliders.Time thumbnails={thumbnails} host={host} />
         </Controls.Group>
         <Controls.Group className="-mt-0.5 flex w-full items-center px-2 pb-2">
+          <Buttons.PreviousEpisode
+            navigation={navigation}
+            tooltipPlacement="top"
+          />
           <Buttons.Play tooltipPlacement="top start" />
+          <Buttons.NextEpisode navigation={navigation} tooltipPlacement="top" />
           <Buttons.Mute tooltipPlacement="top" />
           <Sliders.Volume />
           <TimeGroup />
           <ChapterTitleComponent />
           <div className="flex-1" />
-          {track?.subtitles && <Buttons.Caption tooltipPlacement="top" />}
+          {!!track?.subtitles?.length && (
+            <Buttons.Caption tooltipPlacement="top" />
+          )}
           <Menus.Settings placement="top end" tooltipPlacement="top" />
           {!isMobile && !isFullscreen && (
             <Buttons.TheaterButton tooltipPlacement="top" />
diff --git a/release.md b/release.md
index 3191b52..e1ec64b 100644
--- a/release.md
+++ b/release.md
@@ -7,6 +7,7 @@ This document contains a summary of all significant changes made to this release
 ### What's Changed
 
 - Added rate modal when user finished watching the whole series
+- Added previous and next button to player
 - Fix: only half of the episodes has episodes thumbnail
 - Fix: pressing back button in anime info page redirects user to the wrong page
 - Progressively migrate codebase to typescript