From 209fe4369c2430e7e417429e6533731e658411f2 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Sun, 19 Feb 2023 15:25:58 +0100 Subject: [PATCH] fix source selector with ids and fixed navigation issue with episode selector Co-authored-by: Jip Frijlink --- src/video/components/VideoPlayerBase.tsx | 2 +- src/video/components/actions/HeaderAction.tsx | 2 +- src/video/components/actions/PageTitleAction.tsx | 2 +- src/video/components/actions/SeriesSelectionAction.tsx | 2 +- src/video/components/controllers/SeriesController.tsx | 4 +++- .../components/hooks/useCurrentSeriesEpisodeInfo.ts | 2 +- src/video/components/parts/VideoPlayerError.tsx | 2 +- .../components/popouts/EpisodeSelectionPopout.tsx | 6 +++++- src/video/components/popouts/SourceSelectionPopout.tsx | 10 +++------- src/video/state/types.ts | 3 ++- src/views/media/MediaView.tsx | 5 ++--- 11 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/video/components/VideoPlayerBase.tsx b/src/video/components/VideoPlayerBase.tsx index 1f1fbba7..954bf0d1 100644 --- a/src/video/components/VideoPlayerBase.tsx +++ b/src/video/components/VideoPlayerBase.tsx @@ -32,7 +32,7 @@ function VideoPlayerBaseWithState(props: VideoPlayerBaseProps) { // TODO move error boundary to only decorated, shouldn't have styling return ( - +
; + return ; } diff --git a/src/video/components/actions/PageTitleAction.tsx b/src/video/components/actions/PageTitleAction.tsx index ab0daf0a..171a06f7 100644 --- a/src/video/components/actions/PageTitleAction.tsx +++ b/src/video/components/actions/PageTitleAction.tsx @@ -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 ( diff --git a/src/video/components/actions/SeriesSelectionAction.tsx b/src/video/components/actions/SeriesSelectionAction.tsx index f048db26..abf2082e 100644 --- a/src/video/components/actions/SeriesSelectionAction.tsx +++ b/src/video/components/actions/SeriesSelectionAction.tsx @@ -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 (
diff --git a/src/video/components/controllers/SeriesController.tsx b/src/video/components/controllers/SeriesController.tsx index d676e15b..481d3ce2 100644 --- a/src/video/components/controllers/SeriesController.tsx +++ b/src/video/components/controllers/SeriesController.tsx @@ -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; } diff --git a/src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts b/src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts index 7e62a0e4..7275cc07 100644 --- a/src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts +++ b/src/video/components/hooks/useCurrentSeriesEpisodeInfo.ts @@ -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 }; diff --git a/src/video/components/parts/VideoPlayerError.tsx b/src/video/components/parts/VideoPlayerError.tsx index 77fb01d0..6ac7125c 100644 --- a/src/video/components/parts/VideoPlayerError.tsx +++ b/src/video/components/parts/VideoPlayerError.tsx @@ -31,7 +31,7 @@ export function VideoPlayerError(props: VideoPlayerErrorProps) {

- +
); diff --git a/src/video/components/popouts/EpisodeSelectionPopout.tsx b/src/video/components/popouts/EpisodeSelectionPopout.tsx index 7947d855..de54b457 100644 --- a/src/video/components/popouts/EpisodeSelectionPopout.tsx +++ b/src/video/components/popouts/EpisodeSelectionPopout.tsx @@ -57,7 +57,11 @@ export function EpisodeSelectionPopout() { const setCurrent = useCallback( (seasonId: string, episodeId: string) => { - controls.setCurrentEpisode(seasonId, episodeId); + controls.closePopout(); + // race condition, jank solution but it works. + setTimeout(() => { + controls.setCurrentEpisode(seasonId, episodeId); + }, 100) }, [controls] ); diff --git a/src/video/components/popouts/SourceSelectionPopout.tsx b/src/video/components/popouts/SourceSelectionPopout.tsx index 0f353094..270ccf81 100644 --- a/src/video/components/popouts/SourceSelectionPopout.tsx +++ b/src/video/components/popouts/SourceSelectionPopout.tsx @@ -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, }); diff --git a/src/video/state/types.ts b/src/video/state/types.ts index ff378c52..5686af1d 100644 --- a/src/video/state/types.ts +++ b/src/video/state/types.ts @@ -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; diff --git a/src/views/media/MediaView.tsx b/src/views/media/MediaView.tsx index f12869f4..242c73ea 100644 --- a/src/views/media/MediaView.tsx +++ b/src/views/media/MediaView.tsx @@ -37,7 +37,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
-

{t("videoPlaye.findingBestVideo")}

+

{t("videoPlayer.findingBestVideo")}

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