next episode button actually working

This commit is contained in:
mrjvs 2023-10-20 17:29:10 +02:00
parent 8b3bd97dd4
commit 6c019aa822
3 changed files with 46 additions and 11 deletions

View File

@ -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>

View File

@ -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);
setMeta(playerMeta);
setScrapeStatus();
setDirectMeta(playerMeta);
return playerMeta;
},
[_setPlayerMeta, setMeta, setScrapeStatus]
[setDirectMeta]
);
return {
playerMeta: meta,
setPlayerMeta,
setDirectMeta,
scrapeMedia,
};
}

View File

@ -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?: {
number: number;
tmdbId: string;
title: string;
};
episodes?: PlayerMetaEpisode[];
episode?: PlayerMetaEpisode;
season?: {
number: number;
tmdbId: string;