2023-01-23 01:55:57 +01:00
|
|
|
import {
|
|
|
|
MWSeasonMeta,
|
|
|
|
MWSeasonWithEpisodeMeta,
|
|
|
|
} from "@/backend/metadata/types";
|
2023-01-22 19:26:08 +01:00
|
|
|
import { useEffect, useRef } from "react";
|
2023-01-23 01:55:57 +01:00
|
|
|
import { PlayerContext } from "../hooks/useVideoPlayer";
|
2023-01-21 23:45:26 +01:00
|
|
|
import { useVideoPlayerState } from "../VideoContext";
|
|
|
|
|
|
|
|
interface ShowControlProps {
|
|
|
|
series?: {
|
2023-01-22 19:26:08 +01:00
|
|
|
episodeId: string;
|
|
|
|
seasonId: string;
|
2023-01-21 23:45:26 +01:00
|
|
|
};
|
2023-01-23 01:55:57 +01:00
|
|
|
seasons: MWSeasonMeta[];
|
|
|
|
seasonData: MWSeasonWithEpisodeMeta;
|
2023-01-22 19:26:08 +01:00
|
|
|
onSelect?: (state: { episodeId?: string; seasonId?: string }) => void;
|
2023-01-21 23:45:26 +01:00
|
|
|
}
|
|
|
|
|
2023-01-23 01:55:57 +01:00
|
|
|
function setVideoShowState(videoState: PlayerContext, props: ShowControlProps) {
|
|
|
|
const seasonsWithEpisodes = props.seasons.map((v) => {
|
|
|
|
if (v.id === props.seasonData.id)
|
|
|
|
return {
|
|
|
|
...v,
|
|
|
|
episodes: props.seasonData.episodes,
|
|
|
|
};
|
|
|
|
return v;
|
|
|
|
});
|
|
|
|
|
|
|
|
videoState.setShowData({
|
|
|
|
current: props.series,
|
|
|
|
isSeries: !!props.series,
|
|
|
|
seasons: seasonsWithEpisodes,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-01-21 23:45:26 +01:00
|
|
|
export function ShowControl(props: ShowControlProps) {
|
|
|
|
const { videoState } = useVideoPlayerState();
|
2023-01-22 19:26:08 +01:00
|
|
|
const lastState = useRef<{
|
|
|
|
episodeId?: string;
|
|
|
|
seasonId?: string;
|
|
|
|
} | null>({
|
|
|
|
episodeId: props.series?.episodeId,
|
|
|
|
seasonId: props.series?.seasonId,
|
|
|
|
});
|
2023-01-21 23:45:26 +01:00
|
|
|
|
2023-01-23 01:55:57 +01:00
|
|
|
const hasInitialized = useRef(false);
|
2023-01-21 23:45:26 +01:00
|
|
|
useEffect(() => {
|
2023-01-23 01:55:57 +01:00
|
|
|
if (hasInitialized.current) return;
|
|
|
|
if (!videoState.hasInitialized) return;
|
|
|
|
setVideoShowState(videoState, props);
|
|
|
|
hasInitialized.current = true;
|
|
|
|
}, [props, videoState]);
|
2023-01-21 23:45:26 +01:00
|
|
|
|
2023-01-22 19:26:08 +01:00
|
|
|
useEffect(() => {
|
|
|
|
const currentState = {
|
|
|
|
episodeId: videoState.seasonData.current?.episodeId,
|
|
|
|
seasonId: videoState.seasonData.current?.seasonId,
|
|
|
|
};
|
|
|
|
if (
|
|
|
|
currentState.episodeId !== lastState.current?.episodeId ||
|
|
|
|
currentState.seasonId !== lastState.current?.seasonId
|
|
|
|
) {
|
|
|
|
lastState.current = currentState;
|
|
|
|
props.onSelect?.(currentState);
|
|
|
|
}
|
|
|
|
}, [videoState, props]);
|
|
|
|
|
2023-01-21 23:45:26 +01:00
|
|
|
return null;
|
|
|
|
}
|