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

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

src/video/components/VideoPlayerBase.tsx

@@ -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={[

src/video/components/actions/HeaderAction.tsx

@@ -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} />;
 }

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 (
     <Helmet>

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 (
     <div className={props.className}>

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;
 }

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 };

src/video/components/parts/VideoPlayerError.tsx

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

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

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,
       });

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;

src/views/media/MediaView.tsx

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