From cedc987509e0d9d3f353dee69abd363b30e250c6 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 22 Feb 2023 19:02:23 +0100
Subject: [PATCH] Add developer video testing page

---
 src/setup/App.tsx                       |  9 +++
 src/views/developer/DeveloperView.tsx   | 21 ++++++
 src/views/developer/VideoTesterView.tsx | 85 +++++++++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 src/views/developer/DeveloperView.tsx
 create mode 100644 src/views/developer/VideoTesterView.tsx

diff --git a/src/setup/App.tsx b/src/setup/App.tsx
index 50c89f97..375f5d6d 100644
--- 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>
diff --git a/src/views/developer/DeveloperView.tsx b/src/views/developer/DeveloperView.tsx
new file mode 100644
index 00000000..f2a9d30d
--- /dev/null
+++ 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>
+  );
+}
diff --git a/src/views/developer/VideoTesterView.tsx b/src/views/developer/VideoTesterView.tsx
new file mode 100644
index 00000000..6bf34719
--- /dev/null
+++ 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>
+  );
+}