fix source selector with ids and fixed navigation issue with episode selector

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
mrjvs 2023-02-19 15:25:58 +01:00
parent 4a35287975
commit 209fe4369c
11 changed files with 21 additions and 19 deletions

View File

@ -32,7 +32,7 @@ function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) {
// TODO move error boundary to only decorated, <VideoPlayer /> shouldn't have styling // TODO move error boundary to only decorated, <VideoPlayer /> shouldn't have styling
return ( return (
<VideoErrorBoundary onGoBack={props.onGoBack} media={media?.meta}> <VideoErrorBoundary onGoBack={props.onGoBack} media={media?.meta.meta}>
<div <div
ref={ref} ref={ref}
className={[ className={[

View File

@ -11,5 +11,5 @@ export function HeaderAction(props: Props) {
const descriptor = useVideoPlayerDescriptor(); const descriptor = useVideoPlayerDescriptor();
const meta = useMeta(descriptor); const meta = useMeta(descriptor);
return <VideoPlayerHeader media={meta?.meta} {...props} />; return <VideoPlayerHeader media={meta?.meta.meta} {...props} />;
} }

View File

@ -9,7 +9,7 @@ export function PageTitleAction() {
if (!meta) return null; if (!meta) return null;
const title = isSeries ? `${meta.title} - ${humanizedEpisodeId}` : meta.title; const title = isSeries ? `${meta.meta.title} - ${humanizedEpisodeId}` : meta.meta.title;
return ( return (
<Helmet> <Helmet>

View File

@ -19,7 +19,7 @@ export function SeriesSelectionAction(props: Props) {
const videoInterface = useInterface(descriptor); const videoInterface = useInterface(descriptor);
const controls = useControls(descriptor); const controls = useControls(descriptor);
if (meta?.meta.type !== MWMediaType.SERIES) return null; if (meta?.meta.meta.type !== MWMediaType.SERIES) return null;
return ( return (
<div className={props.className}> <div className={props.className}>

View File

@ -1,6 +1,7 @@
import { useVideoPlayerDescriptor } from "@/video/state/hooks"; import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useMeta } from "@/video/state/logic/meta"; import { useMeta } from "@/video/state/logic/meta";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { useHistory } from "react-router-dom";
interface SeriesControllerProps { interface SeriesControllerProps {
onSelect?: (state: { episodeId?: string; seasonId?: string }) => void; onSelect?: (state: { episodeId?: string; seasonId?: string }) => void;
@ -9,6 +10,7 @@ interface SeriesControllerProps {
export function SeriesController(props: SeriesControllerProps) { export function SeriesController(props: SeriesControllerProps) {
const descriptor = useVideoPlayerDescriptor(); const descriptor = useVideoPlayerDescriptor();
const meta = useMeta(descriptor); const meta = useMeta(descriptor);
const history = useHistory();
const lastState = useRef<{ const lastState = useRef<{
episodeId?: string; episodeId?: string;
@ -34,7 +36,7 @@ export function SeriesController(props: SeriesControllerProps) {
lastState.current = currentState; lastState.current = currentState;
props.onSelect?.(currentState); props.onSelect?.(currentState);
} }
}, [meta, props]); }, [meta, props, history]);
return null; return null;
} }

View File

@ -20,7 +20,7 @@ export function useCurrentSeriesEpisodeInfo(descriptor: string) {
}, [currentSeasonInfo, meta]); }, [currentSeasonInfo, meta]);
const isSeries = Boolean( const isSeries = Boolean(
meta?.meta?.type === MWMediaType.SERIES && meta?.episode meta?.meta.meta.type === MWMediaType.SERIES && meta?.episode
); );
if (!isSeries) return { isSeries: false }; if (!isSeries) return { isSeries: false };

View File

@ -31,7 +31,7 @@ export function VideoPlayerError(props: VideoPlayerErrorProps) {
</p> </p>
</div> </div>
<div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2"> <div className="pointer-events-auto absolute inset-x-0 top-0 flex flex-col py-6 px-8 pb-2">
<VideoPlayerHeader media={meta?.meta} onClick={props.onGoBack} /> <VideoPlayerHeader media={meta?.meta.meta} onClick={props.onGoBack} />
</div> </div>
</div> </div>
); );

View File

@ -57,7 +57,11 @@ export function EpisodeSelectionPopout() {
const setCurrent = useCallback( const setCurrent = useCallback(
(seasonId: string, episodeId: string) => { (seasonId: string, episodeId: string) => {
controls.setCurrentEpisode(seasonId, episodeId); controls.closePopout();
// race condition, jank solution but it works.
setTimeout(() => {
controls.setCurrentEpisode(seasonId, episodeId);
}, 100)
}, },
[controls] [controls]
); );

View File

@ -21,7 +21,7 @@ export function SourceSelectionPopout() {
const meta = useMeta(descriptor); const meta = useMeta(descriptor);
const providers = useMemo( const providers = useMemo(
() => () =>
meta ? getProviders().filter((v) => v.type.includes(meta.meta.type)) : [], meta ? getProviders().filter((v) => v.type.includes(meta.meta.meta.type)) : [],
[meta] [meta]
); );
@ -39,13 +39,9 @@ export function SourceSelectionPopout() {
if (!theProvider) throw new Error("Invalid provider"); if (!theProvider) throw new Error("Invalid provider");
if (!meta) throw new Error("need meta"); if (!meta) throw new Error("need meta");
return runProvider(theProvider, { return runProvider(theProvider, {
media: { media: meta.meta,
imdbId: "", // TODO get actual ids
tmdbId: "",
meta: meta.meta,
},
progress: () => { }, progress: () => { },
type: meta.meta.type, type: meta.meta.meta.type,
episode: meta.episode?.episodeId as any, episode: meta.episode?.episodeId as any,
season: meta.episode?.seasonId as any, season: meta.episode?.seasonId as any,
}); });

View File

@ -3,12 +3,13 @@ import {
MWStreamQuality, MWStreamQuality,
MWStreamType, MWStreamType,
} from "@/backend/helpers/streams"; } from "@/backend/helpers/streams";
import { DetailedMeta } from "@/backend/metadata/getmeta";
import { MWMediaMeta } from "@/backend/metadata/types"; import { MWMediaMeta } from "@/backend/metadata/types";
import Hls from "hls.js"; import Hls from "hls.js";
import { VideoPlayerStateProvider } from "./providers/providerTypes"; import { VideoPlayerStateProvider } from "./providers/providerTypes";
export type VideoPlayerMeta = { export type VideoPlayerMeta = {
meta: MWMediaMeta; meta: DetailedMeta;
captions: MWCaption[]; captions: MWCaption[];
episode?: { episode?: {
episodeId: string; episodeId: string;

View File

@ -37,7 +37,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
</div> </div>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<Loading className="mb-4" /> <Loading className="mb-4" />
<p className="mb-8 text-denim-700">{t("videoPlaye.findingBestVideo")}</p> <p className="mb-8 text-denim-700">{t("videoPlayer.findingBestVideo")}</p>
</div> </div>
</div> </div>
); );
@ -114,7 +114,7 @@ export function MediaViewPlayer(props: MediaViewPlayerProps) {
}, [props.stream]); }, [props.stream]);
const metaProps: VideoPlayerMeta = { const metaProps: VideoPlayerMeta = {
meta: props.meta.meta, meta: props.meta,
captions: [], captions: [],
}; };
let metaSeasonData: MWSeasonWithEpisodeMeta | undefined; let metaSeasonData: MWSeasonWithEpisodeMeta | undefined;
@ -254,7 +254,6 @@ export function MediaView() {
stream={stream} stream={stream}
selected={selected} selected={selected}
onChangeStream={(sId, eId) => { onChangeStream={(sId, eId) => {
// TODO changing episode breaks useGoBack
history.replace( history.replace(
`/media/${encodeURIComponent(params.media)}/${encodeURIComponent( `/media/${encodeURIComponent(params.media)}/${encodeURIComponent(
sId sId