Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 17:51:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add developer video testing page

Browse Source
This commit is contained in:
mrjvs 2023-02-22 19:02:23 +01:00
parent efc2c8a67d
commit cedc987509
3 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/setup/App.tsx
View File

@ -7,16 +7,21 @@ import { MediaView } from "@/views/media/MediaView";
import { SearchView } from "@/views/search/SearchView";
import { MWMediaType } from "@/backend/metadata/types";
import { V2MigrationView } from "@/views/other/v2Migration";
import { DeveloperView } from "@/views/developer/DeveloperView";
import { VideoTesterView } from "@/views/developer/VideoTesterView";
function App() {
return (
<WatchedContextProvider>
<BookmarkContextProvider>
<Switch>
{/* functional routes */}
<Route exact path="/v2-migration" component={V2MigrationView} />
<Route exact path="/">
<Redirect to={`/search/${MWMediaType.MOVIE}`} />
</Route>
{/* pages */}
<Route exact path="/media/:media" component={MediaView} />
<Route
exact
@ -24,6 +29,10 @@ function App() {
component={MediaView}
/>
<Route exact path="/search/:type/:query?" component={SearchView} />
{/* other */}
<Route exact path="/dev" component={DeveloperView} />
<Route exact path="/dev/video" component={VideoTesterView} />
<Route path="*" component={NotFoundPage} />
</Switch>
</BookmarkContextProvider>

21
src/views/developer/DeveloperView.tsx Normal file
View File

@ -0,0 +1,21 @@
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/video" direction="right" linkText="Video tester" />
</ThinContainer>
</div>
);
}

85
src/views/developer/VideoTesterView.tsx Normal file
View File

@ -0,0 +1,85 @@
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 { 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;
}
const testData: VideoData = {
streamUrl:
"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.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 [url, setUrl] = useState("");
const playVideo = useCallback((streamUrl: string) => {
setVideo({
streamUrl,
});
}, []);
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-48">
<Navigation />
<ThinContainer classNames="flex items-start flex-col space-y-4">
<div className="mb-4 flex gap-4">
<input
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
<Button onClick={() => playVideo(url)}>Play video</Button>
</div>
<Button onClick={() => playVideo(testData.streamUrl)}>
Play default video
</Button>
</ThinContainer>
</div>
);
}