mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-25 07:11:50 +01:00
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:
parent
4a35287975
commit
209fe4369c
@ -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={[
|
||||||
|
@ -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} />;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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}>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 };
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -57,7 +57,11 @@ export function EpisodeSelectionPopout() {
|
|||||||
|
|
||||||
const setCurrent = useCallback(
|
const setCurrent = useCallback(
|
||||||
(seasonId: string, episodeId: string) => {
|
(seasonId: string, episodeId: string) => {
|
||||||
|
controls.closePopout();
|
||||||
|
// race condition, jank solution but it works.
|
||||||
|
setTimeout(() => {
|
||||||
controls.setCurrentEpisode(seasonId, episodeId);
|
controls.setCurrentEpisode(seasonId, episodeId);
|
||||||
|
}, 100)
|
||||||
},
|
},
|
||||||
[controls]
|
[controls]
|
||||||
);
|
);
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user