next episode button actually working

src/components/player/atoms/NextEpisodeButton.tsx

@@ -1,7 +1,10 @@
 import classNames from "classnames";
+import { useCallback } from "react";
 
 import { Icon, Icons } from "@/components/Icon";
+import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta";
 import { Transition } from "@/components/Transition";
+import { PlayerMetaEpisode } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
 
 function shouldShowNextEpisodeButton(
@@ -34,10 +37,11 @@ function Button(props: {
   );
 }
 
-// TODO check if has next episode
 export function NextEpisodeButton(props: { controlsShowing: boolean }) {
   const duration = usePlayerStore((s) => s.progress.duration);
   const isHidden = usePlayerStore((s) => s.interface.hideNextEpisodeBtn);
+  const meta = usePlayerStore((s) => s.meta);
+  const { setDirectMeta } = usePlayerMeta();
   const hideNextEpisodeButton = usePlayerStore((s) => s.hideNextEpisodeButton);
   const metaType = usePlayerStore((s) => s.meta?.type);
   const time = usePlayerStore((s) => s.progress.time);
@@ -54,6 +58,18 @@ export function NextEpisodeButton(props: { controlsShowing: boolean }) {
   if (showingState === "always")
     bottom = props.controlsShowing ? "bottom-24" : "bottom-12";
 
+  const nextEp = meta?.episodes?.find(
+    (v) => v.number === (meta?.episode?.number ?? 0) + 1
+  );
+
+  const loadNextEpisode = useCallback(() => {
+    if (!meta || !nextEp) return;
+    const metaCopy = { ...meta };
+    metaCopy.episode = nextEp;
+    setDirectMeta(metaCopy);
+  }, [setDirectMeta, nextEp, meta]);
+
+  if (!meta?.episode || !nextEp) return null;
   if (metaType !== "show") return null;
 
   return (
@@ -74,7 +90,10 @@ export function NextEpisodeButton(props: { controlsShowing: boolean }) {
         >
           Cancel
         </Button>
-        <Button className="bg-video-buttons-primary hover:bg-video-buttons-primaryHover text-video-buttons-primaryText flex justify-center items-center">
+        <Button
+          onClick={() => loadNextEpisode()}
+          className="bg-video-buttons-primary hover:bg-video-buttons-primaryHover text-video-buttons-primaryText flex justify-center items-center"
+        >
           <Icon className="text-xl mr-1" icon={Icons.SKIP_EPISODE} />
           Next episode
         </Button>

src/components/player/hooks/usePlayerMeta.ts

@@ -13,6 +13,15 @@ export function usePlayerMeta() {
     [meta]
   );
 
+  const setDirectMeta = useCallback(
+    (m: PlayerMeta) => {
+      _setPlayerMeta(m);
+      setMeta(m);
+      setScrapeStatus();
+    },
+    [_setPlayerMeta, setMeta, setScrapeStatus]
+  );
+
   const setPlayerMeta = useCallback(
     (m: DetailedMeta, episodeId?: string) => {
       let playerMeta: PlayerMeta;
@@ -26,6 +35,11 @@ export function usePlayerMeta() {
           poster: m.meta.poster,
           tmdbId: m.tmdbId ?? "",
           imdbId: m.imdbId,
+          episodes: m.meta.seasonData.episodes.map((v) => ({
+            number: v.number,
+            title: v.title,
+            tmdbId: v.id,
+          })),
           episode: {
             number: ep.number,
             title: ep.title,
@@ -47,17 +61,16 @@ export function usePlayerMeta() {
           imdbId: m.imdbId,
         };
       }
-      _setPlayerMeta(playerMeta);
+      setDirectMeta(playerMeta);
-      setMeta(playerMeta);
-      setScrapeStatus();
       return playerMeta;
     },
-    [_setPlayerMeta, setMeta, setScrapeStatus]
+    [setDirectMeta]
   );
 
   return {
     playerMeta: meta,
     setPlayerMeta,
+    setDirectMeta,
     scrapeMedia,
   };
 }

src/stores/player/slices/source.ts

@@ -17,6 +17,12 @@ export const playerStatus = {
 
 export type PlayerStatus = ValuesOf<typeof playerStatus>;
 
+export interface PlayerMetaEpisode {
+  number: number;
+  tmdbId: string;
+  title: string;
+}
+
 export interface PlayerMeta {
   type: "movie" | "show";
   title: string;
@@ -24,11 +30,8 @@ export interface PlayerMeta {
   imdbId?: string;
   releaseYear: number;
   poster?: string;
-  episode?: {
+  episodes?: PlayerMetaEpisode[];
-    number: number;
+  episode?: PlayerMetaEpisode;
-    tmdbId: string;
-    title: string;
-  };
   season?: {
     number: number;
     tmdbId: string;