chore: add multi-engine react demo app

Eyevinn · Sep 16, 2024 · ec88eb0 · ec88eb0
1 parent dd0dcc3
commit ec88eb0
Show file tree

Hide file tree

Showing 81 changed files with 1,419 additions and 225 deletions.
diff --git a/.../v7_linux_x86_64_0.113.0/3d90119e56180f8a6d47f21a39da9a5ca2094986f8cd26a9f3daaa8fa37e147f b/.../v7_linux_x86_64_0.113.0/3d90119e56180f8a6d47f21a39da9a5ca2094986f8cd26a9f3daaa8fa37e147f
diff --git a/.swcrc b/.swcrc
@@ -0,0 +1,17 @@
+{
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "jsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },
+    "experimental": {
+      "plugins": [["@swc/plugin-emotion", {}]]
+    }
+  }
+}
diff --git a/.yarn/cache/@babel-code-frame-npm-7.24.7-315a600a58-4812e94885.zip b/.yarn/cache/@babel-code-frame-npm-7.24.7-315a600a58-4812e94885.zip
diff --git a/.yarn/cache/@babel-generator-npm-7.25.6-3bdca6c59f-541e4fbb6e.zip b/.yarn/cache/@babel-generator-npm-7.25.6-3bdca6c59f-541e4fbb6e.zip
diff --git a/.yarn/cache/@babel-helper-module-imports-npm-7.24.7-f60e66adbf-df8bfb2bb1.zip b/.yarn/cache/@babel-helper-module-imports-npm-7.24.7-f60e66adbf-df8bfb2bb1.zip
diff --git a/.yarn/cache/@babel-helper-string-parser-npm-7.24.8-133b2e71e1-6d1bf8f27d.zip b/.yarn/cache/@babel-helper-string-parser-npm-7.24.8-133b2e71e1-6d1bf8f27d.zip
diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.24.7-748889c8d2-86875063f5.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.24.7-748889c8d2-86875063f5.zip
diff --git a/.yarn/cache/@babel-highlight-npm-7.24.7-d792bd8d9f-69b73f38cd.zip b/.yarn/cache/@babel-highlight-npm-7.24.7-d792bd8d9f-69b73f38cd.zip
diff --git a/.yarn/cache/@babel-parser-npm-7.25.6-3cb198940b-830aab7211.zip b/.yarn/cache/@babel-parser-npm-7.25.6-3cb198940b-830aab7211.zip
diff --git a/.yarn/cache/@babel-runtime-npm-7.25.6-6725f0979a-0c4134734d.zip b/.yarn/cache/@babel-runtime-npm-7.25.6-6725f0979a-0c4134734d.zip
diff --git a/.yarn/cache/@babel-template-npm-7.25.0-2c6ddcb43a-07ebecf6db.zip b/.yarn/cache/@babel-template-npm-7.25.0-2c6ddcb43a-07ebecf6db.zip
diff --git a/.yarn/cache/@babel-traverse-npm-7.25.6-1b9e2a314c-de75a91829.zip b/.yarn/cache/@babel-traverse-npm-7.25.6-1b9e2a314c-de75a91829.zip
diff --git a/.yarn/cache/@babel-types-npm-7.25.6-98df73a2ca-7b54665e1b.zip b/.yarn/cache/@babel-types-npm-7.25.6-98df73a2ca-7b54665e1b.zip
diff --git a/.yarn/cache/@emotion-babel-plugin-npm-11.12.0-690c383ac1-fe6f4522ea.zip b/.yarn/cache/@emotion-babel-plugin-npm-11.12.0-690c383ac1-fe6f4522ea.zip
diff --git a/.yarn/cache/@emotion-cache-npm-11.13.1-9bf3ce01f5-090c8ad2e5.zip b/.yarn/cache/@emotion-cache-npm-11.13.1-9bf3ce01f5-090c8ad2e5.zip
diff --git a/.yarn/cache/@emotion-hash-npm-0.9.2-21b49040cb-379bde2830.zip b/.yarn/cache/@emotion-hash-npm-0.9.2-21b49040cb-379bde2830.zip
diff --git a/.yarn/cache/@emotion-is-prop-valid-npm-1.3.0-40d3d3718f-9b395dd973.zip b/.yarn/cache/@emotion-is-prop-valid-npm-1.3.0-40d3d3718f-9b395dd973.zip
diff --git a/.yarn/cache/@emotion-memoize-npm-0.9.0-ccd80906b3-0381323593.zip b/.yarn/cache/@emotion-memoize-npm-0.9.0-ccd80906b3-0381323593.zip
diff --git a/.yarn/cache/@emotion-react-npm-11.13.3-ff7d603337-ee70d3afc2.zip b/.yarn/cache/@emotion-react-npm-11.13.3-ff7d603337-ee70d3afc2.zip
diff --git a/.yarn/cache/@emotion-serialize-npm-1.3.1-3b63592c56-4bbb9b417f.zip b/.yarn/cache/@emotion-serialize-npm-1.3.1-3b63592c56-4bbb9b417f.zip
diff --git a/.yarn/cache/@emotion-sheet-npm-1.4.0-fb64d8f222-8ac6e9bf6b.zip b/.yarn/cache/@emotion-sheet-npm-1.4.0-fb64d8f222-8ac6e9bf6b.zip
diff --git a/.yarn/cache/@emotion-styled-npm-11.13.0-56a6cd86eb-5463a0f15f.zip b/.yarn/cache/@emotion-styled-npm-11.13.0-56a6cd86eb-5463a0f15f.zip
diff --git a/.yarn/cache/@emotion-unitless-npm-0.10.0-bd15580251-6851c16edc.zip b/.yarn/cache/@emotion-unitless-npm-0.10.0-bd15580251-6851c16edc.zip
diff --git a/.yarn/cache/@emotion-use-insertion-effect-with-fallbacks-npm-1.1.0-cf34827cd6-33a10f44a8.zip b/.yarn/cache/@emotion-use-insertion-effect-with-fallbacks-npm-1.1.0-cf34827cd6-33a10f44a8.zip
diff --git a/.yarn/cache/@emotion-utils-npm-1.4.0-27483e6c35-e4cdb51819.zip b/.yarn/cache/@emotion-utils-npm-1.4.0-27483e6c35-e4cdb51819.zip
diff --git a/.yarn/cache/@emotion-weak-memoize-npm-0.4.0-76aafb2333-db5da0e89b.zip b/.yarn/cache/@emotion-weak-memoize-npm-0.4.0-76aafb2333-db5da0e89b.zip
diff --git a/.yarn/cache/@snowpack-plugin-typescript-npm-1.2.1-b14f9f51b1-365eda9c03.zip b/.yarn/cache/@snowpack-plugin-typescript-npm-1.2.1-b14f9f51b1-365eda9c03.zip
diff --git a/...inux-x64-gnu-npm-1.6.13-a7b9aab3c6-10.zip → ...inux-x64-gnu-npm-1.7.26-3f9254c7bf-10.zip b/...inux-x64-gnu-npm-1.6.13-a7b9aab3c6-10.zip → ...inux-x64-gnu-npm-1.7.26-3f9254c7bf-10.zip
diff --git a/...core-npm-1.6.13-b33663c12e-ccb9c11d5f.zip → ...core-npm-1.7.26-df1a50f4e7-8fb43420bd.zip b/...core-npm-1.6.13-b33663c12e-ccb9c11d5f.zip → ...core-npm-1.7.26-df1a50f4e7-8fb43420bd.zip
diff --git a/.yarn/cache/@swc-plugin-emotion-npm-4.0.1-07571d84ea-2c3b136827.zip b/.yarn/cache/@swc-plugin-emotion-npm-4.0.1-07571d84ea-2c3b136827.zip
diff --git a/.yarn/cache/@swc-types-npm-0.1.12-b2a580c180-92dbbc70cd.zip b/.yarn/cache/@swc-types-npm-0.1.12-b2a580c180-92dbbc70cd.zip
diff --git a/.yarn/cache/@swc-types-npm-0.1.9-26e18ff920-c67ee0480b.zip b/.yarn/cache/@swc-types-npm-0.1.9-26e18ff920-c67ee0480b.zip
diff --git a/.yarn/cache/@types-node-npm-20.14.10-5efcbc9009-672892cf94.zip b/.yarn/cache/@types-node-npm-20.14.10-5efcbc9009-672892cf94.zip
diff --git a/.yarn/cache/@types-parse-json-npm-4.0.2-f87f65692e-5bf62eec37.zip b/.yarn/cache/@types-parse-json-npm-4.0.2-f87f65692e-5bf62eec37.zip
diff --git a/.yarn/cache/@types-prop-types-npm-15.7.12-b093f43531-ac16cc3d0a.zip b/.yarn/cache/@types-prop-types-npm-15.7.12-b093f43531-ac16cc3d0a.zip
diff --git a/.yarn/cache/@types-react-dom-npm-18.3.0-111444d3eb-6ff53f5a7b.zip b/.yarn/cache/@types-react-dom-npm-18.3.0-111444d3eb-6ff53f5a7b.zip
diff --git a/.yarn/cache/@types-react-npm-18.3.5-85b093554b-ba0477c5ad.zip b/.yarn/cache/@types-react-npm-18.3.5-85b093554b-ba0477c5ad.zip
diff --git a/.yarn/cache/babel-plugin-macros-npm-3.1.0-320e781f4e-30be6ca45e.zip b/.yarn/cache/babel-plugin-macros-npm-3.1.0-320e781f4e-30be6ca45e.zip
diff --git a/.yarn/cache/convert-source-map-npm-1.9.0-e294555f4b-dc55a1f28d.zip b/.yarn/cache/convert-source-map-npm-1.9.0-e294555f4b-dc55a1f28d.zip
diff --git a/.yarn/cache/cosmiconfig-npm-7.1.0-13a5090bcd-03600bb387.zip b/.yarn/cache/cosmiconfig-npm-7.1.0-13a5090bcd-03600bb387.zip
diff --git a/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip
diff --git a/.yarn/cache/debug-npm-4.3.7-385645adf9-71168908b9.zip b/.yarn/cache/debug-npm-4.3.7-385645adf9-71168908b9.zip
diff --git a/.yarn/cache/eme-encryption-scheme-polyfill-npm-2.1.5-21de7f589b-e5ea6e6254.zip b/.yarn/cache/eme-encryption-scheme-polyfill-npm-2.1.5-21de7f589b-e5ea6e6254.zip
diff --git a/.yarn/cache/find-root-npm-1.1.0-a16a94005f-caa799c976.zip b/.yarn/cache/find-root-npm-1.1.0-a16a94005f-caa799c976.zip
diff --git a/.yarn/cache/globals-npm-11.12.0-1fa7f41a6c-9f054fa38f.zip b/.yarn/cache/globals-npm-11.12.0-1fa7f41a6c-9f054fa38f.zip
diff --git a/.yarn/cache/hls.js-npm-1.5.15-328bed1441-58dd5c70e2.zip b/.yarn/cache/hls.js-npm-1.5.15-328bed1441-58dd5c70e2.zip
diff --git a/.yarn/cache/hoist-non-react-statics-npm-3.3.2-e7b709e6c1-1acbe85f33.zip b/.yarn/cache/hoist-non-react-statics-npm-3.3.2-e7b709e6c1-1acbe85f33.zip
diff --git a/.yarn/cache/jsesc-npm-2.5.2-c5acb78804-d2096abdcd.zip b/.yarn/cache/jsesc-npm-2.5.2-c5acb78804-d2096abdcd.zip
diff --git a/.yarn/cache/loose-envify-npm-1.4.0-6307b72ccf-6517e24e0c.zip b/.yarn/cache/loose-envify-npm-1.4.0-6307b72ccf-6517e24e0c.zip
diff --git a/.yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip b/.yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip
diff --git a/.yarn/cache/react-hook-form-npm-7.53.0-5b4dd89662-b7d73696b7.zip b/.yarn/cache/react-hook-form-npm-7.53.0-5b4dd89662-b7d73696b7.zip
diff --git a/.yarn/cache/react-is-npm-16.13.1-a9b9382b4f-5aa564a1cd.zip b/.yarn/cache/react-is-npm-16.13.1-a9b9382b4f-5aa564a1cd.zip
diff --git a/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip b/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip
diff --git a/.yarn/cache/regenerator-runtime-npm-0.14.1-a6c97c609a-5db3161abb.zip b/.yarn/cache/regenerator-runtime-npm-0.14.1-a6c97c609a-5db3161abb.zip
diff --git a/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip b/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip
diff --git a/.yarn/cache/shaka-player-npm-4.11.2-ff18c8e6e9-cad0f2b245.zip b/.yarn/cache/shaka-player-npm-4.11.2-ff18c8e6e9-cad0f2b245.zip
diff --git a/.yarn/cache/source-map-npm-0.5.7-7c3f035429-9b4ac749ec.zip b/.yarn/cache/source-map-npm-0.5.7-7c3f035429-9b4ac749ec.zip
diff --git a/.yarn/cache/stylis-npm-4.2.0-6b07f11c99-5835918527.zip b/.yarn/cache/stylis-npm-4.2.0-6b07f11c99-5835918527.zip
diff --git a/.yarn/cache/to-fast-properties-npm-2.0.0-0dc60cc481-be2de62fe5.zip b/.yarn/cache/to-fast-properties-npm-2.0.0-0dc60cc481-be2de62fe5.zip
diff --git a/.yarn/cache/typescript-npm-5.5.3-9d4a463231-11a8673124.zip b/.yarn/cache/typescript-npm-5.5.3-9d4a463231-11a8673124.zip
diff --git a/.yarn/cache/typescript-npm-5.6.2-f0e21b35f9-f95365d489.zip b/.yarn/cache/typescript-npm-5.6.2-f0e21b35f9-f95365d489.zip
diff --git a/.yarn/cache/typescript-patch-846faf50d3-b61b8bb4b4.zip b/.yarn/cache/typescript-patch-846faf50d3-b61b8bb4b4.zip
diff --git a/.yarn/cache/typescript-patch-d70d4523b6-060a7349ad.zip b/.yarn/cache/typescript-patch-d70d4523b6-060a7349ad.zip
diff --git a/.yarn/cache/yaml-npm-1.10.2-0e780aebdf-e088b37b4d.zip b/.yarn/cache/yaml-npm-1.10.2-0e780aebdf-e088b37b4d.zip
diff --git a/package.json b/package.json
@@ -26,18 +26,26 @@
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
+    "@emotion/react": "11.13.3",
+    "@emotion/styled": "11.13.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@snowpack/plugin-typescript": "1.2.1",
-    "@swc/core": "1.6.13",
-    "@types/node": "20.14.10",
+    "@swc/core": "1.7.26",
+    "@swc/plugin-emotion": "4.0.1",
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
     "@types/webpack": "5.28.5",
+    "hls.js": "1.5.15",
     "prettier": "3.3.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-hook-form": "7.53.0",
     "semantic-release": "24",
+    "shaka-player": "4.11.2",
     "swc-loader": "0.2.6",
     "terser-webpack-plugin": "5.3.10",
     "ts-node": "10.9.2",
-    "typescript": "5.5.3",
+    "typescript": "5.6.2",
     "webpack": "5.93.0",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",

diff --git a/public/index.html b/public/index.html
@@ -78,140 +78,16 @@
   </style>
 </head>
 <body>
-  <div class="wrapper">
-    <div class="box">
-      <video preload="metadata" playsinline controls id="videoEl"></video>
-      <div class="box-2">
-        <button id="switch">Update src</button>
-        <button id="clear">Clear src</button>
-        <button id="load">Load</button>
-      </div>
-    </div>
-    <p>Check console for additional logging.</p>
-    <div class="box">
-      <div id="events"></div>
-    </div>
-  </div>
+  <div id="reactRoot"></div>
 
   <script type="module">
     import {
-      getMediaEventFilter,
-      FilteredMediaEvent,
-      MediaEvent,
+      Demo,
     } from "./main.mjs";
+    const rootEl = document.getElementById("reactRoot");
 
-    const videos = [
-      "https://testcontent.eyevinn.technology/mp4/VINN.mp4",
-      "https://testcontent.eyevinn.technology/mp4/stswe-tvplus-promo.mp4",
-    ];
-
-    const mediaElement = document.getElementById("videoEl");
-    let i = 1;
-    let seekOrBufferTimestamp = 0;
-
-    mediaElement.src = videos[0];
-
-    Object.values(MediaEvent).forEach((evt) =>
-      mediaElement.addEventListener(evt, () => {
-        const mediaElementState = {
-          networkState: mediaElement.networkState,
-          readyState: mediaElement.readyState,
-          paused: mediaElement.paused,
-          ended: mediaElement.ended,
-          error: mediaElement.error,
-          currentTime: mediaElement.currentTime,
-          duration: mediaElement.duration,
-          seeking: mediaElement.seeking,
-        };
-
-        console[evt === MediaEvent.timeupdate ? "debug" : "log"](
-          "%cNativeEv: %s",
-          "color:#cf1313;font-weight:bold;",
-          evt,
-        );
-
-        console[evt === MediaEvent.timeupdate ? "debug" : "info"](
-          "Media Element State",
-          mediaElementState,
-        );
-      }),
-    );
-
-    getMediaEventFilter({
-      mediaElement,
-      callback: (evt) => {
-        if (evt === FilteredMediaEvent.TIME_UPDATE) {
-          console.debug(
-            "%cFiltered: %s",
-            "color:#267dff;font-weight:bold;",
-            evt,
-          );
-          return;
-        }
-
-        if (
-          [FilteredMediaEvent.BUFFERING, FilteredMediaEvent.SEEKING].includes(
-            evt,
-          )
-        ) {
-          seekOrBufferTimestamp = Date.now();
-        }
-
-        if (
-          [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(evt)
-        ) {
-          console.log(
-            "%cFiltered: %s",
-            "color:#267dff;font-weight:bold;",
-            `${evt} (${(Date.now() - seekOrBufferTimestamp) / 1000}s)`,
-          );
-          console.info("\n");
-        } else {
-          console.log("%cFiltered: %s", "color:#267dff;font-weight:bold;", evt);
-          console.info("\n");
-        }
-
-        const box = document.createElement("div");
-
-        box.classList.add("event");
-        box.innerText =
-          i +
-          ": " +
-          `${evt} ${
-            seekOrBufferTimestamp &&
-            [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(
-              evt,
-            )
-              ? `(${(Date.now() - seekOrBufferTimestamp) / 1000}s)`
-              : ""
-          }`;
-
-        i++;
-
-        const events = document.getElementById("events");
-
-        events.prepend(box);
-
-        if (events.childElementCount > 20) {
-          events.removeChild(events.lastChild);
-        }
-      },
+    Demo({
+      rootEl
     });
-
-    const switchButton = document.getElementById("switch");
-    const clearButton = document.getElementById("clear");
-    const loadButton = document.getElementById("load");
-
-    switchButton.onclick = () => {
-      mediaElement.src = mediaElement.src !== videos[0] ? videos[0] : videos[1];
-    };
-
-    clearButton.onclick = () => {
-      mediaElement.src = "";
-    };
-
-    loadButton.onclick = () => {
-      mediaElement.load();
-    };
   </script>
 </body>
diff --git a/src/demo/app.tsx b/src/demo/app.tsx
@@ -0,0 +1,79 @@
+import styled from "@emotion/styled";
+import { Global } from "@emotion/react";
+import { resetStyles, defaultStyles } from "./css-global";
+import { useForm, useWatch } from "react-hook-form";
+import {
+  DecorativeLabel,
+  FormContainer,
+  FormLabel,
+  FormSelect,
+} from "./form-elements";
+import { Player } from "./player";
+
+const Select = styled.select``;
+const Option = styled.option``;
+
+type FormValues = {
+  engine: "shaka" | "hlsjs" | "native";
+  asset: string;
+};
+
+export const App = () => {
+  const { register, control } = useForm<FormValues>({
+    defaultValues: {
+      engine: "native",
+      asset: "",
+    },
+    resetOptions: {
+      keepDirtyValues: true, // user-interacted input will be retained
+      keepErrors: true, // input errors will be retained with value update
+    },
+  });
+
+  const { engine, asset } = useWatch<FormValues>({ control });
+
+  return (
+    <>
+      <Global
+        styles={`
+        ${resetStyles}
+        ${defaultStyles}
+      `}
+      />
+      <FormContainer>
+        <FormLabel>
+          <DecorativeLabel>Engine</DecorativeLabel>
+          <FormSelect
+            // eslint-disable-next-line
+            {...register(`engine`)}
+          >
+            {["shaka", "hlsjs", "native"].map((engine) => (
+              <option key={engine} value={engine}>
+                {engine}
+              </option>
+            ))}
+          </FormSelect>
+        </FormLabel>
+        <FormLabel>
+          <DecorativeLabel>Asset</DecorativeLabel>
+          <FormSelect
+            // eslint-disable-next-line
+            {...register(`asset`)}
+          >
+            {["1", "2", "3"].map((engine) => (
+              <option key={engine} value={engine}>
+                {engine}
+              </option>
+            ))}
+          </FormSelect>
+        </FormLabel>
+      </FormContainer>
+
+      <div>
+        Selected engine: {engine} {asset}
+      </div>
+
+      <Player />
+    </>
+  );
+};
diff --git a/src/demo/controls.hook.ts b/src/demo/controls.hook.ts
@@ -0,0 +1,28 @@
+import { RefObject, useCallback } from "react";
+
+export const useControls = ({
+  playing,
+  videoRef,
+}: {
+  playing: boolean;
+  videoRef: RefObject<HTMLVideoElement>;
+}) => {
+  const playPause = useCallback(() => {
+    if (playing) videoRef.current?.pause();
+    if (!playing) videoRef.current?.play().catch(console.error);
+  }, [videoRef.current, playing]);
+
+  const skip = useCallback(
+    (num: number) => {
+      if (!videoRef.current) return;
+
+      videoRef.current.currentTime = videoRef.current.currentTime + num;
+    },
+    [videoRef.current, playing],
+  );
+
+  return {
+    playPause,
+    skip,
+  };
+};