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
return (
<VideoErrorBoundary onGoBack={props.onGoBack} media={media?.meta}>
<VideoErrorBoundary onGoBack={props.onGoBack} media={media?.meta.meta}>
<div
ref={ref}
className={[

View File

@ -11,5 +11,5 @@ export function HeaderAction(props: Props) {
const descriptor = useVideoPlayerDescriptor();
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;
const title = isSeries ? `${meta.title} - ${humanizedEpisodeId}` : meta.title;
const title = isSeries ? `${meta.meta.title} - ${humanizedEpisodeId}` : meta.meta.title;
return (
<Helmet>

View File

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

View File

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

View File

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

View File

@ -31,7 +31,7 @@ export function VideoPlayerError(props: VideoPlayerErrorProps) {
</p>
</div>
<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>
);

View File

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

View File

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

View File

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

View File

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