mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-10 23:55:05 +01:00
Add developer video testing page
This commit is contained in:
parent
efc2c8a67d
commit
cedc987509
@ -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
21
src/views/developer/DeveloperView.tsx
Normal 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
85
src/views/developer/VideoTesterView.tsx
Normal 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>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user