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";
				@@ -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() {
				@@ -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 @@
				@@ -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 @@
				@@ -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>
+  );
+}