chore: add multi-engine react demo app

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

Hide file tree

Showing 13 changed files with 598 additions and 225 deletions.
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/.yarn/cache/@swc-core-linux-x64-gnu-npm-1.6.13-a7b9aab3c6-10.zip b/.yarn/cache/@swc-core-linux-x64-gnu-npm-1.6.13-a7b9aab3c6-10.zip
diff --git a/.yarn/cache/@swc-core-npm-1.6.13-b33663c12e-ccb9c11d5f.zip b/.yarn/cache/@swc-core-npm-1.6.13-b33663c12e-ccb9c11d5f.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/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-patch-846faf50d3-b61b8bb4b4.zip b/.yarn/cache/typescript-patch-846faf50d3-b61b8bb4b4.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/tsconfig.json b/tsconfig.json
@@ -3,16 +3,18 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "ESNext",
     "module": "ESNext",
+    "moduleResolution": "node",
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["dom", "es2015", "es2017"],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "rootDir": "src",
-    "outDir": "build/types"
+    "outDir": "build/types",
+    "jsx": "react-jsx",
   },
   "exclude": ["**/build/", "**/node_modules/", "**/webpack.*"]
 }
diff --git a/webpack.common.cjs b/webpack.common.cjs
@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.m?ts$/,
+        test: /\.m?tsx?$/,
         exclude: [/node_modules/],
         use: ["swc-loader"],
       },

diff --git a/webpack.dev.cjs b/webpack.dev.cjs
@@ -4,7 +4,7 @@ const path = require("path");
 
 module.exports = merge(common, {
   mode: "development",
-  entry: ["./src/media-event-filter.ts"],
+  entry: ["./src/demo/demo.tsx"],
   devServer: {
     static: {
       directory: path.join(__dirname, "public"),