Add developer video testing page

2 years ago · cedc987509
3 changed files with 115 additions and 0 deletions
--- a/src/setup/App.tsx
+++ b/src/setup/App.tsx
@ -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>
--- a/src/views/developer/DeveloperView.tsx
+++ b/src/views/developer/DeveloperView.tsx
@ -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>
  );
 }
--- a/src/views/developer/VideoTesterView.tsx
+++ b/src/views/developer/VideoTesterView.tsx
@ -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>
  );
 }