add video tester page back

src/components/Button.tsx

@@ -13,7 +13,7 @@ export function Button(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="inline-flex items-center justify-center rounded-lg bg-white px-8 py-3 font-bold text-black transition-[transform,background-color] duration-100 hover:bg-gray-200 active:scale-105 md:px-16"
+      className="inline-flex items-center justify-center rounded-lg bg-white px-4 py-3 font-bold text-black transition-[transform,background-color] duration-100 hover:bg-gray-200 active:scale-105 md:px-8"
     >
       {props.icon ? (
         <span className="mr-3 hidden md:inline-block">

src/pages/developer/VideoTesterView.tsx

@@ -1,5 +1,110 @@
-import { PlayerView } from "@/pages/PlayerView";
+import { useCallback, useState } from "react";
+
+import { Button } from "@/components/Button";
+import { Dropdown } from "@/components/Dropdown";
+import { usePlayer } from "@/components/player/hooks/usePlayer";
+import { Title } from "@/components/text/Title";
+import { TextInputControl } from "@/components/text-inputs/TextInputControl";
+import { PlayerPart } from "@/pages/parts/player/PlayerPart";
+import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
+import { SourceSliceSource, StreamType } from "@/stores/player/utils/qualities";
+
+const testMeta: PlayerMeta = {
+  releaseYear: 2010,
+  title: "Sintel",
+  tmdbId: "",
+  type: "movie",
+};
+
+const testStreams: Record<StreamType, string> = {
+  hls: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
+  mp4: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
+};
+
+const streamTypes: Record<StreamType, string> = {
+  hls: "HLS",
+  mp4: "MP4",
+};
 
 export default function VideoTesterView() {
-  return <PlayerView />;
+  const { status, playMedia, setMeta } = usePlayer();
+  const [selected, setSelected] = useState("mp4");
+  const [inputSource, setInputSource] = useState("");
+
+  const start = useCallback(
+    (url: string, type: StreamType) => {
+      let source: SourceSliceSource;
+      if (type === "hls") {
+        source = {
+          type: "hls",
+          url,
+        };
+      } else if (type === "mp4") {
+        source = {
+          type: "file",
+          qualities: {
+            unknown: {
+              type: "mp4",
+              url,
+            },
+          },
+        };
+      } else throw new Error("Invalid type");
+      setMeta(testMeta);
+      playMedia(source, null);
+    },
+    [playMedia, setMeta]
+  );
+
+  return (
+    <PlayerPart backUrl="/">
+      {status === playerStatus.IDLE ? (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="w-full max-w-4xl rounded-xl bg-video-scraping-card p-10 m-4">
+            <div className="flex gap-16 flex-col lg:flex-row">
+              <div className="flex-1">
+                <Title className="!text-2xl">Custom stream</Title>
+                <div className="grid grid-cols-[1fr,auto] gap-2 items-center">
+                  <TextInputControl
+                    className="bg-video-context-flagBg rounded-md p-2 text-white w-full"
+                    value={inputSource}
+                    onChange={setInputSource}
+                    placeholder="https://..."
+                  />
+                  <Dropdown
+                    options={Object.entries(streamTypes).map((v) => ({
+                      id: v[0],
+                      name: v[1],
+                    }))}
+                    selectedItem={{
+                      id: selected,
+                      name: streamTypes[selected as StreamType],
+                    }}
+                    setSelectedItem={(item) => setSelected(item.id)}
+                  />
+                </div>
+                <Button
+                  onClick={() => start(inputSource, selected as StreamType)}
+                >
+                  Start stream
+                </Button>
+              </div>
+
+              <div className="flex-1">
+                <Title className="!text-2xl mb-8">Preset tests</Title>
+                <div className="grid grid-cols-[1fr,1fr] gap-2">
+                  <Button onClick={() => start(testStreams.hls, "hls")}>
+                    HLS test
+                  </Button>
+                  <Button onClick={() => start(testStreams.mp4, "mp4")}>
+                    MP4 test
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </PlayerPart>
+  );
 }