mrjvs
2 years ago
committed by
GitHub
44 changed files with 3542 additions and 149 deletions
@ -1,5 +1,8 @@ |
|||||||
{ |
{ |
||||||
"editor.formatOnSave": true, |
"editor.formatOnSave": true, |
||||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint", |
"editor.defaultFormatter": "dbaeumer.vscode-eslint", |
||||||
"eslint.format.enable": true |
"eslint.format.enable": true, |
||||||
|
"[json]": { |
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode" |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,20 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "movie-web", |
|
||||||
"short_name": "movie-web", |
|
||||||
"icons": [ |
|
||||||
{ |
|
||||||
"src": "/android-chrome-192x192.png", |
|
||||||
"sizes": "192x192", |
|
||||||
"type": "image/png" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"src": "/android-chrome-512x512.png", |
|
||||||
"sizes": "512x512", |
|
||||||
"type": "image/png" |
|
||||||
} |
|
||||||
], |
|
||||||
"theme_color": "#E880C5", |
|
||||||
"background_color": "#16171D", |
|
||||||
"display": "standalone", |
|
||||||
"start_url": "/" |
|
||||||
} |
|
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import { describe, it } from "vitest"; |
||||||
|
import "@/backend"; |
||||||
|
import { getProviders } from "@/backend/helpers/register"; |
||||||
|
import { MWMediaType } from "@/backend/metadata/types"; |
||||||
|
import { runProvider } from "@/backend/helpers/run"; |
||||||
|
import { testData } from "@/__tests__/providers/testdata"; |
||||||
|
|
||||||
|
describe("providers", () => { |
||||||
|
const providers = getProviders(); |
||||||
|
|
||||||
|
it("have at least one provider", ({ expect }) => { |
||||||
|
expect(providers.length).toBeGreaterThan(0); |
||||||
|
}); |
||||||
|
|
||||||
|
for (const provider of providers) { |
||||||
|
describe(provider.displayName, () => { |
||||||
|
it("must have at least one type", async ({ expect }) => { |
||||||
|
expect(provider.type.length).toBeGreaterThan(0); |
||||||
|
}); |
||||||
|
|
||||||
|
if (provider.type.includes(MWMediaType.MOVIE)) { |
||||||
|
it("must work with movies", async ({ expect }) => { |
||||||
|
const movie = testData.find((v) => v.meta.type === MWMediaType.MOVIE); |
||||||
|
if (!movie) throw new Error("no movie to test with"); |
||||||
|
const results = await runProvider(provider, { |
||||||
|
media: movie, |
||||||
|
progress() {}, |
||||||
|
type: movie.meta.type as any, |
||||||
|
}); |
||||||
|
expect(results).toBeTruthy(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (provider.type.includes(MWMediaType.SERIES)) { |
||||||
|
it("must work with series", async ({ expect }) => { |
||||||
|
const show = testData.find((v) => v.meta.type === MWMediaType.SERIES); |
||||||
|
if (show?.meta.type !== MWMediaType.SERIES) |
||||||
|
throw new Error("no show to test with"); |
||||||
|
const results = await runProvider(provider, { |
||||||
|
media: show, |
||||||
|
progress() {}, |
||||||
|
type: show.meta.type as MWMediaType.SERIES, |
||||||
|
episode: show.meta.seasonData.episodes[0].id, |
||||||
|
season: show.meta.seasons[0].id, |
||||||
|
}); |
||||||
|
expect(results).toBeTruthy(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import { DetailedMeta } from "@/backend/metadata/getmeta"; |
||||||
|
import { MWMediaType } from "@/backend/metadata/types"; |
||||||
|
|
||||||
|
export const testData: DetailedMeta[] = [ |
||||||
|
{ |
||||||
|
imdbId: "tt10954562", |
||||||
|
tmdbId: "572716", |
||||||
|
meta: { |
||||||
|
id: "439596", |
||||||
|
title: "Hamilton", |
||||||
|
type: MWMediaType.MOVIE, |
||||||
|
year: "2020", |
||||||
|
seasons: undefined, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
imdbId: "tt11126994", |
||||||
|
tmdbId: "94605", |
||||||
|
meta: { |
||||||
|
id: "222333", |
||||||
|
title: "Arcane", |
||||||
|
type: MWMediaType.SERIES, |
||||||
|
year: "2021", |
||||||
|
seasons: [ |
||||||
|
{ |
||||||
|
id: "230301", |
||||||
|
number: 1, |
||||||
|
title: "Season 1", |
||||||
|
}, |
||||||
|
], |
||||||
|
seasonData: { |
||||||
|
id: "230301", |
||||||
|
number: 1, |
||||||
|
title: "Season 1", |
||||||
|
episodes: [ |
||||||
|
{ |
||||||
|
id: "4243445", |
||||||
|
number: 1, |
||||||
|
title: "Welcome to the Playground", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
]; |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import { Icon, Icons } from "@/components/Icon"; |
||||||
|
import { useBanner } from "@/hooks/useBanner"; |
||||||
|
|
||||||
|
export function Banner(props: { children: React.ReactNode; type: "error" }) { |
||||||
|
const [ref] = useBanner<HTMLDivElement>("internet"); |
||||||
|
const styles = { |
||||||
|
error: "bg-[#C93957] text-white", |
||||||
|
}; |
||||||
|
const icons = { |
||||||
|
error: Icons.CIRCLE_EXCLAMATION, |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div ref={ref}> |
||||||
|
<div |
||||||
|
className={[ |
||||||
|
styles[props.type], |
||||||
|
"flex items-center justify-center p-1", |
||||||
|
].join(" ")} |
||||||
|
> |
||||||
|
<div className="flex items-center space-x-3"> |
||||||
|
<Icon icon={icons[props.type]} /> |
||||||
|
<div>{props.children}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import { |
||||||
|
ReactNode, |
||||||
|
createContext, |
||||||
|
useState, |
||||||
|
useMemo, |
||||||
|
Dispatch, |
||||||
|
SetStateAction, |
||||||
|
useEffect, |
||||||
|
useContext, |
||||||
|
} from "react"; |
||||||
|
import { useMeasure } from "react-use"; |
||||||
|
|
||||||
|
interface BannerInstance { |
||||||
|
id: string; |
||||||
|
height: number; |
||||||
|
} |
||||||
|
|
||||||
|
const BannerContext = createContext< |
||||||
|
[BannerInstance[], Dispatch<SetStateAction<BannerInstance[]>>] |
||||||
|
>(null as any); |
||||||
|
|
||||||
|
export function BannerContextProvider(props: { children: ReactNode }) { |
||||||
|
const [state, setState] = useState<BannerInstance[]>([]); |
||||||
|
const memod = useMemo< |
||||||
|
[BannerInstance[], Dispatch<SetStateAction<BannerInstance[]>>] |
||||||
|
>(() => [state, setState], [state]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<BannerContext.Provider value={memod}> |
||||||
|
{props.children} |
||||||
|
</BannerContext.Provider> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function useBanner<T extends Element>(id: string) { |
||||||
|
const [ref, { height }] = useMeasure<T>(); |
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const [_, set] = useContext(BannerContext); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
set((v) => [...v, { id, height: 0 }]); |
||||||
|
set((value) => { |
||||||
|
const v = value.find((item) => item.id === id); |
||||||
|
if (v) { |
||||||
|
v.height = height; |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
return () => { |
||||||
|
set((v) => v.filter((item) => item.id !== id)); |
||||||
|
}; |
||||||
|
}, [height, id, set]); |
||||||
|
|
||||||
|
return [ref]; |
||||||
|
} |
||||||
|
|
||||||
|
export function useBannerSize() { |
||||||
|
const [val] = useContext(BannerContext); |
||||||
|
|
||||||
|
return val.reduce((a, v) => a + v.height, 0); |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { useEffect, useRef, useState } from "react"; |
||||||
|
|
||||||
|
export function useIsOnline() { |
||||||
|
const [online, setOnline] = useState<boolean | null>(true); |
||||||
|
const ref = useRef<boolean>(true); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
let counter = 0; |
||||||
|
|
||||||
|
let abort: null | AbortController = null; |
||||||
|
const interval = setInterval(() => { |
||||||
|
// if online try once every 10 iterations intead of every iteration
|
||||||
|
counter += 1; |
||||||
|
if (ref.current) { |
||||||
|
if (counter < 10) return; |
||||||
|
} |
||||||
|
counter = 0; |
||||||
|
|
||||||
|
if (abort) abort.abort(); |
||||||
|
abort = new AbortController(); |
||||||
|
const signal = abort.signal; |
||||||
|
fetch("/ping.txt", { signal }) |
||||||
|
.then(() => { |
||||||
|
setOnline(true); |
||||||
|
ref.current = true; |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
if (err.name === "AbortError") return; |
||||||
|
setOnline(false); |
||||||
|
ref.current = false; |
||||||
|
}); |
||||||
|
}, 5000); |
||||||
|
|
||||||
|
return () => { |
||||||
|
clearInterval(interval); |
||||||
|
if (abort) abort.abort(); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return online; |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import { Banner } from "@/components/Banner"; |
||||||
|
import { useBannerSize } from "@/hooks/useBanner"; |
||||||
|
import { useIsOnline } from "@/hooks/usePing"; |
||||||
|
import { ReactNode } from "react"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
|
||||||
|
export function Layout(props: { children: ReactNode }) { |
||||||
|
const { t } = useTranslation(); |
||||||
|
const isOnline = useIsOnline(); |
||||||
|
const bannerSize = useBannerSize(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div className="fixed inset-x-0 z-[1000]"> |
||||||
|
{!isOnline ? <Banner type="error">{t("errors.offline")}</Banner> : null} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
paddingTop: `${bannerSize}px`, |
||||||
|
}} |
||||||
|
className="flex min-h-screen flex-col" |
||||||
|
> |
||||||
|
{props.children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,4 +1,4 @@ |
|||||||
export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb"; |
export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb"; |
||||||
export const GITHUB_LINK = "https://github.com/movie-web/movie-web"; |
export const GITHUB_LINK = "https://github.com/movie-web/movie-web"; |
||||||
export const APP_VERSION = "3.0.3"; |
export const APP_VERSION = "3.0.4"; |
||||||
export const GA_ID = "G-44YVXRL61C"; |
export const GA_ID = "G-44YVXRL61C"; |
||||||
|
|||||||
@ -0,0 +1,7 @@ |
|||||||
|
export function normalizeTitle(title: string): string { |
||||||
|
return title |
||||||
|
.trim() |
||||||
|
.toLowerCase() |
||||||
|
.replace(/['":]/g, "") |
||||||
|
.replace(/[^a-zA-Z0-9]+/g, "_"); |
||||||
|
} |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import { Icons } from "@/components/Icon"; |
||||||
|
import { useVideoPlayerDescriptor } from "@/video/state/hooks"; |
||||||
|
import { useSource } from "@/video/state/logic/source"; |
||||||
|
import { MWStreamType } from "@/backend/helpers/streams"; |
||||||
|
import { normalizeTitle } from "@/utils/normalizeTitle"; |
||||||
|
import { useIsMobile } from "@/hooks/useIsMobile"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
import { useMeta } from "@/video/state/logic/meta"; |
||||||
|
import { VideoPlayerIconButton } from "../parts/VideoPlayerIconButton"; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
className?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export function DownloadAction(props: Props) { |
||||||
|
const descriptor = useVideoPlayerDescriptor(); |
||||||
|
const sourceInterface = useSource(descriptor); |
||||||
|
const { isMobile } = useIsMobile(); |
||||||
|
const { t } = useTranslation(); |
||||||
|
const meta = useMeta(descriptor); |
||||||
|
|
||||||
|
const isHLS = sourceInterface.source?.type === MWStreamType.HLS; |
||||||
|
|
||||||
|
const title = meta?.meta.meta.title; |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={isHLS ? undefined : sourceInterface.source?.url} |
||||||
|
rel="noreferrer" |
||||||
|
target="_blank" |
||||||
|
download={title ? normalizeTitle(title) : undefined} |
||||||
|
> |
||||||
|
<VideoPlayerIconButton |
||||||
|
className={props.className} |
||||||
|
icon={Icons.DOWNLOAD} |
||||||
|
disabled={isHLS} |
||||||
|
text={isMobile ? (t("videoPlayer.buttons.download") as string) : ""} |
||||||
|
/> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
import { Navigation } from "@/components/layout/Navigation"; |
||||||
|
import { ThinContainer } from "@/components/layout/ThinContainer"; |
||||||
|
import { ArrowLink } from "@/components/text/ArrowLink"; |
||||||
|
import { Title } from "@/components/text/Title"; |
||||||
|
|
||||||
|
export function DeveloperView() { |
||||||
|
return ( |
||||||
|
<div className="py-48"> |
||||||
|
<Navigation /> |
||||||
|
<ThinContainer classNames="flex flex-col space-y-4"> |
||||||
|
<Title className="mb-8">Developer tools</Title> |
||||||
|
<ArrowLink |
||||||
|
to="/dev/providers" |
||||||
|
direction="right" |
||||||
|
linkText="Provider tester" |
||||||
|
/> |
||||||
|
<ArrowLink |
||||||
|
to="/dev/embeds" |
||||||
|
direction="right" |
||||||
|
linkText="Embed scraper tester" |
||||||
|
/> |
||||||
|
<ArrowLink to="/dev/video" direction="right" linkText="Video tester" /> |
||||||
|
</ThinContainer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
import { MWEmbed, MWEmbedScraper, MWEmbedType } from "@/backend/helpers/embed"; |
||||||
|
import { getEmbeds } from "@/backend/helpers/register"; |
||||||
|
import { runEmbedScraper } from "@/backend/helpers/run"; |
||||||
|
import { MWStream } from "@/backend/helpers/streams"; |
||||||
|
import { Button } from "@/components/Button"; |
||||||
|
import { Navigation } from "@/components/layout/Navigation"; |
||||||
|
import { ArrowLink } from "@/components/text/ArrowLink"; |
||||||
|
import { Title } from "@/components/text/Title"; |
||||||
|
import { useLoading } from "@/hooks/useLoading"; |
||||||
|
import { ReactNode, useCallback, useEffect, useMemo, useState } from "react"; |
||||||
|
|
||||||
|
interface MediaSelectorProps { |
||||||
|
embedType: MWEmbedType; |
||||||
|
onSelect: (meta: MWEmbed) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface EmbedScraperSelectorProps { |
||||||
|
onSelect: (embedScraperId: string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface MediaScraperProps { |
||||||
|
embed: MWEmbed; |
||||||
|
scraper: MWEmbedScraper; |
||||||
|
} |
||||||
|
|
||||||
|
function MediaSelector(props: MediaSelectorProps) { |
||||||
|
const [url, setUrl] = useState(""); |
||||||
|
|
||||||
|
const select = useCallback( |
||||||
|
(urlSt: string) => { |
||||||
|
props.onSelect({ |
||||||
|
type: props.embedType, |
||||||
|
url: urlSt, |
||||||
|
}); |
||||||
|
}, |
||||||
|
[props] |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col space-y-4"> |
||||||
|
<Title className="mb-8">Input embed url</Title> |
||||||
|
<div className="mb-4 flex gap-4"> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
placeholder="embed url here..." |
||||||
|
value={url} |
||||||
|
onChange={(e) => setUrl(e.target.value)} |
||||||
|
/> |
||||||
|
<Button onClick={() => select(url)}>Run scraper</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function MediaScraper(props: MediaScraperProps) { |
||||||
|
const [results, setResults] = useState<MWStream | null>(null); |
||||||
|
const [percentage, setPercentage] = useState(0); |
||||||
|
|
||||||
|
const [scrape, loading, error] = useLoading(async (url: string) => { |
||||||
|
const data = await runEmbedScraper(props.scraper, { |
||||||
|
url, |
||||||
|
progress(num) { |
||||||
|
console.log(`SCRAPING AT ${num}%`); |
||||||
|
setPercentage(num); |
||||||
|
}, |
||||||
|
}); |
||||||
|
console.log("got data", data); |
||||||
|
setResults(data); |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.embed) { |
||||||
|
scrape(props.embed.url); |
||||||
|
} |
||||||
|
}, [props.embed, scrape]); |
||||||
|
|
||||||
|
if (loading) return <p>Scraping... ({percentage}%)</p>; |
||||||
|
if (error) return <p>Errored, check console</p>; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Title className="mb-8">Output data</Title> |
||||||
|
<code> |
||||||
|
<pre>{JSON.stringify(results, null, 2)}</pre> |
||||||
|
</code> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function EmbedScraperSelector(props: EmbedScraperSelectorProps) { |
||||||
|
const embedScrapers = getEmbeds(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col space-y-4"> |
||||||
|
<Title className="mb-8">Choose embed scraper</Title> |
||||||
|
{embedScrapers.map((v) => ( |
||||||
|
<ArrowLink |
||||||
|
key={v.id} |
||||||
|
onClick={() => props.onSelect(v.id)} |
||||||
|
direction="right" |
||||||
|
linkText={v.displayName} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function EmbedTesterView() { |
||||||
|
const [embed, setEmbed] = useState<MWEmbed | null>(null); |
||||||
|
const [embedScraperId, setEmbedScraperId] = useState<string | null>(null); |
||||||
|
const embedScraper = useMemo( |
||||||
|
() => getEmbeds().find((v) => v.id === embedScraperId), |
||||||
|
[embedScraperId] |
||||||
|
); |
||||||
|
|
||||||
|
let content: ReactNode = null; |
||||||
|
if (!embedScraperId || !embedScraper) { |
||||||
|
content = <EmbedScraperSelector onSelect={(id) => setEmbedScraperId(id)} />; |
||||||
|
} else if (!embed) { |
||||||
|
content = ( |
||||||
|
<MediaSelector |
||||||
|
embedType={embedScraper.for} |
||||||
|
onSelect={(v) => setEmbed(v)} |
||||||
|
/> |
||||||
|
); |
||||||
|
} else { |
||||||
|
content = <MediaScraper scraper={embedScraper} embed={embed} />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="py-48"> |
||||||
|
<Navigation /> |
||||||
|
<div className="mx-8 overflow-x-auto">{content}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
import { MWProviderScrapeResult } from "@/backend/helpers/provider"; |
||||||
|
import { getProviders } from "@/backend/helpers/register"; |
||||||
|
import { runProvider } from "@/backend/helpers/run"; |
||||||
|
import { DetailedMeta } from "@/backend/metadata/getmeta"; |
||||||
|
import { Navigation } from "@/components/layout/Navigation"; |
||||||
|
import { ArrowLink } from "@/components/text/ArrowLink"; |
||||||
|
import { Title } from "@/components/text/Title"; |
||||||
|
import { useLoading } from "@/hooks/useLoading"; |
||||||
|
import { testData } from "@/__tests__/providers/testdata"; |
||||||
|
import { ReactNode, useEffect, useState } from "react"; |
||||||
|
|
||||||
|
interface MediaSelectorProps { |
||||||
|
onSelect: (meta: DetailedMeta) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface ProviderSelectorProps { |
||||||
|
onSelect: (providerId: string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
interface MediaScraperProps { |
||||||
|
media: DetailedMeta | null; |
||||||
|
id: string; |
||||||
|
} |
||||||
|
|
||||||
|
function MediaSelector(props: MediaSelectorProps) { |
||||||
|
const options: DetailedMeta[] = testData; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col space-y-4"> |
||||||
|
<Title className="mb-8">Choose media</Title> |
||||||
|
{options.map((v) => ( |
||||||
|
<ArrowLink |
||||||
|
key={v.imdbId} |
||||||
|
onClick={() => props.onSelect(v)} |
||||||
|
direction="right" |
||||||
|
linkText={`${v.meta.title} (${v.meta.type})`} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function MediaScraper(props: MediaScraperProps) { |
||||||
|
const [results, setResults] = useState<MWProviderScrapeResult | null>(null); |
||||||
|
const [percentage, setPercentage] = useState(0); |
||||||
|
|
||||||
|
const [scrape, loading, error] = useLoading(async (media: DetailedMeta) => { |
||||||
|
const provider = getProviders().find((v) => v.id === props.id); |
||||||
|
if (!provider) throw new Error("provider not found"); |
||||||
|
const data = await runProvider(provider, { |
||||||
|
progress(num) { |
||||||
|
console.log(`SCRAPING AT ${num}%`); |
||||||
|
setPercentage(num); |
||||||
|
}, |
||||||
|
media, |
||||||
|
type: media.meta.type as any, |
||||||
|
}); |
||||||
|
console.log("got data", data); |
||||||
|
setResults(data); |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (props.media) { |
||||||
|
scrape(props.media); |
||||||
|
} |
||||||
|
}, [props.media, scrape]); |
||||||
|
|
||||||
|
if (loading) return <p>Scraping... ({percentage}%)</p>; |
||||||
|
if (error) return <p>Errored, check console</p>; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Title className="mb-8">Output data</Title> |
||||||
|
<code> |
||||||
|
<pre>{JSON.stringify(results, null, 2)}</pre> |
||||||
|
</code> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function ProviderSelector(props: ProviderSelectorProps) { |
||||||
|
const providers = getProviders(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col space-y-4"> |
||||||
|
<Title className="mb-8">Choose provider</Title> |
||||||
|
{providers.map((v) => ( |
||||||
|
<ArrowLink |
||||||
|
key={v.id} |
||||||
|
onClick={() => props.onSelect(v.id)} |
||||||
|
direction="right" |
||||||
|
linkText={v.displayName} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function ProviderTesterView() { |
||||||
|
const [media, setMedia] = useState<DetailedMeta | null>(null); |
||||||
|
const [providerId, setProviderId] = useState<string | null>(null); |
||||||
|
|
||||||
|
let content: ReactNode = null; |
||||||
|
if (!providerId) { |
||||||
|
content = <ProviderSelector onSelect={(id) => setProviderId(id)} />; |
||||||
|
} else if (!media) { |
||||||
|
content = <MediaSelector onSelect={(v) => setMedia(v)} />; |
||||||
|
} else { |
||||||
|
content = <MediaScraper id={providerId} media={media} />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="py-48"> |
||||||
|
<Navigation /> |
||||||
|
<div className="mx-8 overflow-x-auto">{content}</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
import { MWStreamQuality, MWStreamType } from "@/backend/helpers/streams"; |
||||||
|
import { DetailedMeta } from "@/backend/metadata/getmeta"; |
||||||
|
import { MWMediaType } from "@/backend/metadata/types"; |
||||||
|
import { Button } from "@/components/Button"; |
||||||
|
import { Dropdown } from "@/components/Dropdown"; |
||||||
|
import { Navigation } from "@/components/layout/Navigation"; |
||||||
|
import { ThinContainer } from "@/components/layout/ThinContainer"; |
||||||
|
import { MetaController } from "@/video/components/controllers/MetaController"; |
||||||
|
import { SourceController } from "@/video/components/controllers/SourceController"; |
||||||
|
import { VideoPlayer } from "@/video/components/VideoPlayer"; |
||||||
|
import { useCallback, useState } from "react"; |
||||||
|
import { Helmet } from "react-helmet"; |
||||||
|
|
||||||
|
interface VideoData { |
||||||
|
streamUrl: string; |
||||||
|
type: MWStreamType; |
||||||
|
} |
||||||
|
|
||||||
|
const testData: VideoData = { |
||||||
|
streamUrl: |
||||||
|
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", |
||||||
|
type: MWStreamType.MP4, |
||||||
|
}; |
||||||
|
const testMeta: DetailedMeta = { |
||||||
|
imdbId: "", |
||||||
|
tmdbId: "", |
||||||
|
meta: { |
||||||
|
id: "hello-world", |
||||||
|
title: "Big Buck Bunny", |
||||||
|
type: MWMediaType.MOVIE, |
||||||
|
seasons: undefined, |
||||||
|
year: "2000", |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export function VideoTesterView() { |
||||||
|
const [video, setVideo] = useState<VideoData | null>(null); |
||||||
|
const [videoType, setVideoType] = useState<MWStreamType>(MWStreamType.MP4); |
||||||
|
const [url, setUrl] = useState(""); |
||||||
|
|
||||||
|
const playVideo = useCallback( |
||||||
|
(streamUrl: string) => { |
||||||
|
setVideo({ |
||||||
|
streamUrl, |
||||||
|
type: videoType, |
||||||
|
}); |
||||||
|
}, |
||||||
|
[videoType] |
||||||
|
); |
||||||
|
|
||||||
|
if (video) { |
||||||
|
return ( |
||||||
|
<div className="fixed top-0 left-0 h-[100dvh] w-screen"> |
||||||
|
<Helmet> |
||||||
|
<html data-full="true" /> |
||||||
|
</Helmet> |
||||||
|
<VideoPlayer includeSafeArea autoPlay onGoBack={() => setVideo(null)}> |
||||||
|
<MetaController |
||||||
|
data={{ |
||||||
|
captions: [], |
||||||
|
meta: testMeta, |
||||||
|
}} |
||||||
|
linkedCaptions={[]} |
||||||
|
/> |
||||||
|
<SourceController |
||||||
|
source={video.streamUrl} |
||||||
|
type={MWStreamType.MP4} |
||||||
|
quality={MWStreamQuality.Q720P} |
||||||
|
/> |
||||||
|
</VideoPlayer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="py-64"> |
||||||
|
<Navigation /> |
||||||
|
<ThinContainer classNames="flex items-start flex-col space-y-4"> |
||||||
|
<div className="w-48"> |
||||||
|
<Dropdown |
||||||
|
options={[ |
||||||
|
{ id: MWStreamType.MP4, name: "Mp4" }, |
||||||
|
{ id: MWStreamType.HLS, name: "hls/m3u8" }, |
||||||
|
]} |
||||||
|
selectedItem={{ id: videoType, name: videoType }} |
||||||
|
setSelectedItem={(a) => setVideoType(a.id as MWStreamType)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="mb-4 flex gap-4"> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
placeholder="stream url here..." |
||||||
|
value={url} |
||||||
|
onChange={(e) => setUrl(e.target.value)} |
||||||
|
/> |
||||||
|
<Button onClick={() => playVideo(url)}>Play video</Button> |
||||||
|
</div> |
||||||
|
<Button |
||||||
|
onClick={() => |
||||||
|
setVideo({ |
||||||
|
streamUrl: testData.streamUrl, |
||||||
|
type: testData.type, |
||||||
|
}) |
||||||
|
} |
||||||
|
> |
||||||
|
Play default video |
||||||
|
</Button> |
||||||
|
</ThinContainer> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,25 +1,25 @@ |
|||||||
{ |
{ |
||||||
"compilerOptions": { |
"compilerOptions": { |
||||||
"target": "ES2020", |
"target": "ES2020", |
||||||
"lib": ["dom", "dom.iterable", "esnext"], |
"lib": ["dom", "dom.iterable", "esnext"], |
||||||
"allowJs": true, |
"allowJs": true, |
||||||
"skipLibCheck": true, |
"skipLibCheck": true, |
||||||
"esModuleInterop": true, |
"esModuleInterop": true, |
||||||
"allowSyntheticDefaultImports": true, |
"allowSyntheticDefaultImports": true, |
||||||
"strict": true, |
"strict": true, |
||||||
"forceConsistentCasingInFileNames": true, |
"forceConsistentCasingInFileNames": true, |
||||||
"noFallthroughCasesInSwitch": true, |
"noFallthroughCasesInSwitch": true, |
||||||
"module": "esnext", |
"module": "esnext", |
||||||
"moduleResolution": "node", |
"moduleResolution": "node", |
||||||
"resolveJsonModule": true, |
"resolveJsonModule": true, |
||||||
"isolatedModules": true, |
"isolatedModules": true, |
||||||
"noEmit": true, |
"noEmit": true, |
||||||
"jsx": "react-jsx", |
"jsx": "react-jsx", |
||||||
"baseUrl": "./src", |
"baseUrl": "./src", |
||||||
"paths": { |
"paths": { |
||||||
"@/*": ["./*"] |
"@/*": ["./*"] |
||||||
}, |
}, |
||||||
"types": ["vite/client"] |
"types": ["vite/client", "vite-plugin-pwa/client"] |
||||||
}, |
}, |
||||||
"include": ["src"] |
"include": ["src"] |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue