@@ -18,6 +20,8 @@ export function CaptionsSelectionAction(props: Props) {
controls.openPopout("captions")}
icon={Icons.CAPTIONS}
/>
diff --git a/src/video/components/actions/SourceSelectionAction.tsx b/src/video/components/actions/SourceSelectionAction.tsx
new file mode 100644
index 00000000..6434bd0a
--- /dev/null
+++ b/src/video/components/actions/SourceSelectionAction.tsx
@@ -0,0 +1,32 @@
+import { Icons } from "@/components/Icon";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
+import { useControls } from "@/video/state/logic/controls";
+import { PopoutAnchor } from "@/video/components/popouts/PopoutAnchor";
+import { useInterface } from "@/video/state/logic/interface";
+
+interface Props {
+ className?: string;
+}
+
+export function SourceSelectionAction(props: Props) {
+ const descriptor = useVideoPlayerDescriptor();
+ const videoInterface = useInterface(descriptor);
+ const controls = useControls(descriptor);
+
+ return (
+
+
+
+ controls.openPopout("source")}
+ />
+
+
+
+ Unknown popout
+
+ );
}
function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
diff --git a/src/video/components/popouts/SourceSelectionPopout.tsx b/src/video/components/popouts/SourceSelectionPopout.tsx
new file mode 100644
index 00000000..b5e9d62a
--- /dev/null
+++ b/src/video/components/popouts/SourceSelectionPopout.tsx
@@ -0,0 +1,205 @@
+import { useMemo, useRef, useState } from "react";
+import { Icon, Icons } from "@/components/Icon";
+import { useLoading } from "@/hooks/useLoading";
+import { Loading } from "@/components/layout/Loading";
+import { IconPatch } from "@/components/buttons/IconPatch";
+import { useVideoPlayerDescriptor } from "@/video/state/hooks";
+import { useMeta } from "@/video/state/logic/meta";
+import { useControls } from "@/video/state/logic/controls";
+import { MWStream } from "@/backend/helpers/streams";
+import { getProviders } from "@/backend/helpers/register";
+import { runProvider } from "@/backend/helpers/run";
+import { MWProviderScrapeResult } from "@/backend/helpers/provider";
+import { PopoutListEntry, PopoutSection } from "./PopoutUtils";
+
+// TODO HLS does not work
+export function SourceSelectionPopout() {
+ const descriptor = useVideoPlayerDescriptor();
+ const controls = useControls(descriptor);
+ const meta = useMeta(descriptor);
+ const providers = useMemo(
+ () =>
+ meta ? getProviders().filter((v) => v.type.includes(meta.meta.type)) : [],
+ [meta]
+ );
+
+ const [selectedProvider, setSelectedProvider] = useState(null);
+ const [scrapeResult, setScrapeResult] =
+ useState(null);
+ const showingProvider = !!selectedProvider;
+ const selectedProviderPopulated = useMemo(
+ () => providers.find((v) => v.id === selectedProvider) ?? null,
+ [providers, selectedProvider]
+ );
+ const [runScraper, loading, error] = useLoading(
+ async (providerId: string) => {
+ const theProvider = providers.find((v) => v.id === providerId);
+ 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,
+ },
+ progress: () => {},
+ type: meta.meta.type,
+ episode: meta.episode?.episodeId as any,
+ season: meta.episode?.seasonId as any,
+ });
+ }
+ );
+
+ function selectSource(stream: MWStream) {
+ controls.setSource({
+ quality: stream.quality,
+ source: stream.streamUrl,
+ type: stream.type,
+ });
+ if (meta) {
+ controls.setMeta({
+ ...meta,
+ captions: stream.captions,
+ });
+ }
+ controls.closePopout();
+ }
+
+ const providerRef = useRef(null);
+ const selectProvider = (providerId?: string) => {
+ if (!providerId) {
+ providerRef.current = null;
+ setSelectedProvider(null);
+ return;
+ }
+
+ runScraper(providerId).then((v) => {
+ if (!providerRef.current) return;
+ if (v) {
+ const len = v.embeds.length + (v.stream ? 1 : 0);
+ if (len === 1) {
+ const realStream = v.stream;
+ if (!realStream) {
+ // TODO scrape embed
+ throw new Error("no embed scraper configured");
+ }
+ selectSource(realStream);
+ return;
+ }
+ }
+ setScrapeResult(v ?? null);
+ });
+ providerRef.current = providerId;
+ setSelectedProvider(providerId);
+ };
+
+ const titlePositionClass = useMemo(() => {
+ const offset = !showingProvider ? "left-0" : "left-10";
+ return [
+ "absolute w-full transition-[left,opacity] duration-200",
+ offset,
+ ].join(" ");
+ }, [showingProvider]);
+
+ return (
+ <>
+
+
+
+
+ {selectedProviderPopulated?.displayName ?? ""}
+
+
+ Sources
+
+
+
+
+
+ {loading ? (
+
+
+
+ ) : error ? (
+
+
+
+
+ Something went wrong loading the embeds for this thing that
+ you like
+
+
+
+
+
+ {providers.map((v) => (
+
{
+ selectProvider(v.id);
+ }}
+ >
+ {v.displayName}
+
+ ))}
+
+