diff --git a/.swc/plugins/v7_linux_x86_64_0.113.0/3d90119e56180f8a6d47f21a39da9a5ca2094986f8cd26a9f3daaa8fa37e147f b/.swc/plugins/v7_linux_x86_64_0.113.0/3d90119e56180f8a6d47f21a39da9a5ca2094986f8cd26a9f3daaa8fa37e147f
new file mode 100644
index 00000000..85436059
Binary files /dev/null and b/.swc/plugins/v7_linux_x86_64_0.113.0/3d90119e56180f8a6d47f21a39da9a5ca2094986f8cd26a9f3daaa8fa37e147f differ
diff --git a/.swcrc b/.swcrc
new file mode 100644
index 00000000..52dc738c
--- /dev/null
+++ 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
new file mode 100644
index 00000000..5eb87a30
Binary files /dev/null and b/.yarn/cache/@babel-code-frame-npm-7.24.7-315a600a58-4812e94885.zip differ
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
new file mode 100644
index 00000000..39afbe46
Binary files /dev/null and b/.yarn/cache/@babel-generator-npm-7.25.6-3bdca6c59f-541e4fbb6e.zip differ
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
new file mode 100644
index 00000000..39f15939
Binary files /dev/null and b/.yarn/cache/@babel-helper-module-imports-npm-7.24.7-f60e66adbf-df8bfb2bb1.zip differ
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
new file mode 100644
index 00000000..4c1be956
Binary files /dev/null and b/.yarn/cache/@babel-helper-string-parser-npm-7.24.8-133b2e71e1-6d1bf8f27d.zip differ
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
new file mode 100644
index 00000000..02188105
Binary files /dev/null and b/.yarn/cache/@babel-helper-validator-identifier-npm-7.24.7-748889c8d2-86875063f5.zip differ
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
new file mode 100644
index 00000000..9df46bf3
Binary files /dev/null and b/.yarn/cache/@babel-highlight-npm-7.24.7-d792bd8d9f-69b73f38cd.zip differ
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
new file mode 100644
index 00000000..58cc8bfb
Binary files /dev/null and b/.yarn/cache/@babel-parser-npm-7.25.6-3cb198940b-830aab7211.zip differ
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
new file mode 100644
index 00000000..e7821366
Binary files /dev/null and b/.yarn/cache/@babel-runtime-npm-7.25.6-6725f0979a-0c4134734d.zip differ
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
new file mode 100644
index 00000000..b29d8985
Binary files /dev/null and b/.yarn/cache/@babel-template-npm-7.25.0-2c6ddcb43a-07ebecf6db.zip differ
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
new file mode 100644
index 00000000..8eb2449a
Binary files /dev/null and b/.yarn/cache/@babel-traverse-npm-7.25.6-1b9e2a314c-de75a91829.zip differ
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
new file mode 100644
index 00000000..cff78357
Binary files /dev/null and b/.yarn/cache/@babel-types-npm-7.25.6-98df73a2ca-7b54665e1b.zip differ
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
new file mode 100644
index 00000000..6bc88f33
Binary files /dev/null and b/.yarn/cache/@emotion-babel-plugin-npm-11.12.0-690c383ac1-fe6f4522ea.zip differ
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
new file mode 100644
index 00000000..655add6e
Binary files /dev/null and b/.yarn/cache/@emotion-cache-npm-11.13.1-9bf3ce01f5-090c8ad2e5.zip differ
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
new file mode 100644
index 00000000..ff06dcb0
Binary files /dev/null and b/.yarn/cache/@emotion-hash-npm-0.9.2-21b49040cb-379bde2830.zip differ
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
new file mode 100644
index 00000000..f4d5a3fc
Binary files /dev/null and b/.yarn/cache/@emotion-is-prop-valid-npm-1.3.0-40d3d3718f-9b395dd973.zip differ
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
new file mode 100644
index 00000000..f3f63843
Binary files /dev/null and b/.yarn/cache/@emotion-memoize-npm-0.9.0-ccd80906b3-0381323593.zip differ
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
new file mode 100644
index 00000000..864797fe
Binary files /dev/null and b/.yarn/cache/@emotion-react-npm-11.13.3-ff7d603337-ee70d3afc2.zip differ
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
new file mode 100644
index 00000000..d9bc4e97
Binary files /dev/null and b/.yarn/cache/@emotion-serialize-npm-1.3.1-3b63592c56-4bbb9b417f.zip differ
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
new file mode 100644
index 00000000..d9381646
Binary files /dev/null and b/.yarn/cache/@emotion-sheet-npm-1.4.0-fb64d8f222-8ac6e9bf6b.zip differ
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
new file mode 100644
index 00000000..0ce196d7
Binary files /dev/null and b/.yarn/cache/@emotion-styled-npm-11.13.0-56a6cd86eb-5463a0f15f.zip differ
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
new file mode 100644
index 00000000..6995794a
Binary files /dev/null and b/.yarn/cache/@emotion-unitless-npm-0.10.0-bd15580251-6851c16edc.zip differ
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
new file mode 100644
index 00000000..e8453ca1
Binary files /dev/null and b/.yarn/cache/@emotion-use-insertion-effect-with-fallbacks-npm-1.1.0-cf34827cd6-33a10f44a8.zip differ
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
new file mode 100644
index 00000000..5d045bee
Binary files /dev/null and b/.yarn/cache/@emotion-utils-npm-1.4.0-27483e6c35-e4cdb51819.zip differ
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
new file mode 100644
index 00000000..92c93238
Binary files /dev/null and b/.yarn/cache/@emotion-weak-memoize-npm-0.4.0-76aafb2333-db5da0e89b.zip differ
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
deleted file mode 100644
index 3516c067..00000000
Binary files a/.yarn/cache/@snowpack-plugin-typescript-npm-1.2.1-b14f9f51b1-365eda9c03.zip and /dev/null differ
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.7.26-3f9254c7bf-10.zip
similarity index 64%
rename from .yarn/cache/@swc-core-linux-x64-gnu-npm-1.6.13-a7b9aab3c6-10.zip
rename to .yarn/cache/@swc-core-linux-x64-gnu-npm-1.7.26-3f9254c7bf-10.zip
index 959365e1..ca2b7256 100644
Binary files a/.yarn/cache/@swc-core-linux-x64-gnu-npm-1.6.13-a7b9aab3c6-10.zip and b/.yarn/cache/@swc-core-linux-x64-gnu-npm-1.7.26-3f9254c7bf-10.zip differ
diff --git a/.yarn/cache/@swc-core-npm-1.6.13-b33663c12e-ccb9c11d5f.zip b/.yarn/cache/@swc-core-npm-1.7.26-df1a50f4e7-8fb43420bd.zip
similarity index 59%
rename from .yarn/cache/@swc-core-npm-1.6.13-b33663c12e-ccb9c11d5f.zip
rename to .yarn/cache/@swc-core-npm-1.7.26-df1a50f4e7-8fb43420bd.zip
index c9f15c5c..cd26b938 100644
Binary files a/.yarn/cache/@swc-core-npm-1.6.13-b33663c12e-ccb9c11d5f.zip and b/.yarn/cache/@swc-core-npm-1.7.26-df1a50f4e7-8fb43420bd.zip differ
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
new file mode 100644
index 00000000..aa2c0adb
Binary files /dev/null and b/.yarn/cache/@swc-plugin-emotion-npm-4.0.1-07571d84ea-2c3b136827.zip differ
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
new file mode 100644
index 00000000..02b32072
Binary files /dev/null and b/.yarn/cache/@swc-types-npm-0.1.12-b2a580c180-92dbbc70cd.zip differ
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
deleted file mode 100644
index 31e389cf..00000000
Binary files a/.yarn/cache/@swc-types-npm-0.1.9-26e18ff920-c67ee0480b.zip and /dev/null differ
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
deleted file mode 100644
index 48a81d31..00000000
Binary files a/.yarn/cache/@types-node-npm-20.14.10-5efcbc9009-672892cf94.zip and /dev/null differ
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
new file mode 100644
index 00000000..2b86e910
Binary files /dev/null and b/.yarn/cache/@types-parse-json-npm-4.0.2-f87f65692e-5bf62eec37.zip differ
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
new file mode 100644
index 00000000..0412cffa
Binary files /dev/null and b/.yarn/cache/@types-prop-types-npm-15.7.12-b093f43531-ac16cc3d0a.zip differ
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
new file mode 100644
index 00000000..9bebcfb7
Binary files /dev/null and b/.yarn/cache/@types-react-dom-npm-18.3.0-111444d3eb-6ff53f5a7b.zip differ
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
new file mode 100644
index 00000000..3ba0d8e7
Binary files /dev/null and b/.yarn/cache/@types-react-npm-18.3.5-85b093554b-ba0477c5ad.zip differ
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
new file mode 100644
index 00000000..26865bf8
Binary files /dev/null and b/.yarn/cache/babel-plugin-macros-npm-3.1.0-320e781f4e-30be6ca45e.zip differ
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
new file mode 100644
index 00000000..409c3442
Binary files /dev/null and b/.yarn/cache/convert-source-map-npm-1.9.0-e294555f4b-dc55a1f28d.zip differ
diff --git a/.yarn/cache/cosmiconfig-npm-7.1.0-13a5090bcd-03600bb387.zip b/.yarn/cache/cosmiconfig-npm-7.1.0-13a5090bcd-03600bb387.zip
new file mode 100644
index 00000000..bf5e1e37
Binary files /dev/null and b/.yarn/cache/cosmiconfig-npm-7.1.0-13a5090bcd-03600bb387.zip differ
diff --git a/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip
new file mode 100644
index 00000000..b08ed9c0
Binary files /dev/null and b/.yarn/cache/csstype-npm-3.1.3-e9a1c85013-f593cce41f.zip differ
diff --git a/.yarn/cache/debug-npm-4.3.7-385645adf9-71168908b9.zip b/.yarn/cache/debug-npm-4.3.7-385645adf9-71168908b9.zip
new file mode 100644
index 00000000..24741d29
Binary files /dev/null and b/.yarn/cache/debug-npm-4.3.7-385645adf9-71168908b9.zip differ
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
new file mode 100644
index 00000000..15826c6c
Binary files /dev/null and b/.yarn/cache/eme-encryption-scheme-polyfill-npm-2.1.5-21de7f589b-e5ea6e6254.zip differ
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
new file mode 100644
index 00000000..9e354756
Binary files /dev/null and b/.yarn/cache/find-root-npm-1.1.0-a16a94005f-caa799c976.zip differ
diff --git a/.yarn/cache/globals-npm-11.12.0-1fa7f41a6c-9f054fa38f.zip b/.yarn/cache/globals-npm-11.12.0-1fa7f41a6c-9f054fa38f.zip
new file mode 100644
index 00000000..ce4cf702
Binary files /dev/null and b/.yarn/cache/globals-npm-11.12.0-1fa7f41a6c-9f054fa38f.zip differ
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
new file mode 100644
index 00000000..1696cd42
Binary files /dev/null and b/.yarn/cache/hls.js-npm-1.5.15-328bed1441-58dd5c70e2.zip differ
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
new file mode 100644
index 00000000..2d38b7fe
Binary files /dev/null and b/.yarn/cache/hoist-non-react-statics-npm-3.3.2-e7b709e6c1-1acbe85f33.zip differ
diff --git a/.yarn/cache/jsesc-npm-2.5.2-c5acb78804-d2096abdcd.zip b/.yarn/cache/jsesc-npm-2.5.2-c5acb78804-d2096abdcd.zip
new file mode 100644
index 00000000..aa7eb964
Binary files /dev/null and b/.yarn/cache/jsesc-npm-2.5.2-c5acb78804-d2096abdcd.zip differ
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
new file mode 100644
index 00000000..ba25b876
Binary files /dev/null and b/.yarn/cache/loose-envify-npm-1.4.0-6307b72ccf-6517e24e0c.zip differ
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
new file mode 100644
index 00000000..bb1d88d3
Binary files /dev/null and b/.yarn/cache/react-dom-npm-18.3.1-a805663f38-3f4b73a3aa.zip differ
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
new file mode 100644
index 00000000..a47de2af
Binary files /dev/null and b/.yarn/cache/react-hook-form-npm-7.53.0-5b4dd89662-b7d73696b7.zip differ
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
new file mode 100644
index 00000000..39d1323f
Binary files /dev/null and b/.yarn/cache/react-is-npm-16.13.1-a9b9382b4f-5aa564a1cd.zip differ
diff --git a/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip b/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip
new file mode 100644
index 00000000..d3a9d8e7
Binary files /dev/null and b/.yarn/cache/react-npm-18.3.1-af38f3c1ae-261137d3f3.zip differ
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
new file mode 100644
index 00000000..176e7550
Binary files /dev/null and b/.yarn/cache/regenerator-runtime-npm-0.14.1-a6c97c609a-5db3161abb.zip differ
diff --git a/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip b/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip
new file mode 100644
index 00000000..a341e177
Binary files /dev/null and b/.yarn/cache/scheduler-npm-0.23.2-6d1dd9c2b7-e8d68b89d1.zip differ
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
new file mode 100644
index 00000000..19f6c48b
Binary files /dev/null and b/.yarn/cache/shaka-player-npm-4.11.2-ff18c8e6e9-cad0f2b245.zip differ
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
new file mode 100644
index 00000000..e3bc38bd
Binary files /dev/null and b/.yarn/cache/source-map-npm-0.5.7-7c3f035429-9b4ac749ec.zip differ
diff --git a/.yarn/cache/stylis-npm-4.2.0-6b07f11c99-5835918527.zip b/.yarn/cache/stylis-npm-4.2.0-6b07f11c99-5835918527.zip
new file mode 100644
index 00000000..9fc9cf07
Binary files /dev/null and b/.yarn/cache/stylis-npm-4.2.0-6b07f11c99-5835918527.zip differ
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
new file mode 100644
index 00000000..bed5e126
Binary files /dev/null and b/.yarn/cache/to-fast-properties-npm-2.0.0-0dc60cc481-be2de62fe5.zip differ
diff --git a/.yarn/cache/typescript-npm-5.5.3-9d4a463231-11a8673124.zip b/.yarn/cache/typescript-npm-5.5.3-9d4a463231-11a8673124.zip
deleted file mode 100644
index 2d229311..00000000
Binary files a/.yarn/cache/typescript-npm-5.5.3-9d4a463231-11a8673124.zip and /dev/null differ
diff --git a/.yarn/cache/typescript-npm-5.6.2-f0e21b35f9-f95365d489.zip b/.yarn/cache/typescript-npm-5.6.2-f0e21b35f9-f95365d489.zip
new file mode 100644
index 00000000..d2a80b44
Binary files /dev/null and b/.yarn/cache/typescript-npm-5.6.2-f0e21b35f9-f95365d489.zip differ
diff --git a/.yarn/cache/typescript-patch-846faf50d3-b61b8bb4b4.zip b/.yarn/cache/typescript-patch-846faf50d3-b61b8bb4b4.zip
deleted file mode 100644
index 0b572a80..00000000
Binary files a/.yarn/cache/typescript-patch-846faf50d3-b61b8bb4b4.zip and /dev/null differ
diff --git a/.yarn/cache/typescript-patch-d70d4523b6-060a7349ad.zip b/.yarn/cache/typescript-patch-d70d4523b6-060a7349ad.zip
new file mode 100644
index 00000000..ae9dfdf5
Binary files /dev/null and b/.yarn/cache/typescript-patch-d70d4523b6-060a7349ad.zip differ
diff --git a/.yarn/cache/yaml-npm-1.10.2-0e780aebdf-e088b37b4d.zip b/.yarn/cache/yaml-npm-1.10.2-0e780aebdf-e088b37b4d.zip
new file mode 100644
index 00000000..39ef27ac
Binary files /dev/null and b/.yarn/cache/yaml-npm-1.10.2-0e780aebdf-e088b37b4d.zip differ
diff --git a/package.json b/package.json
index 2e16e6da..01203abb 100644
--- 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
index 5850b070..306d04e1 100644
--- 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
new file mode 100644
index 00000000..ca102954
--- /dev/null
+++ 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
new file mode 100644
index 00000000..7917b3f4
--- /dev/null
+++ 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,
+  };
+};
diff --git a/src/demo/css-global.ts b/src/demo/css-global.ts
new file mode 100644
index 00000000..6b55b2fc
--- /dev/null
+++ b/src/demo/css-global.ts
@@ -0,0 +1,113 @@
+export const resetStyles = `
+  /* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+`;
+
+export const defaultStyles = `
+*, *::after, *::before {
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+        
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  /* apply a natural box layout model to all elements, but allowing components to change */
+  box-sizing: border-box;
+  /* easy REM sizing (e.g. 1.2rem = 12px) */
+  font-size: 62.5%;
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+body {
+  font-size: 1.6rem;
+  height: 100%;
+}
+
+/* image size contstrained to container size */
+img,
+svg {
+  /* max-width: 100%; */
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+#root {
+  height: 100%;
+}
+
+strong {
+  font-weight: bold;
+}
+`;
diff --git a/src/demo/demo.tsx b/src/demo/demo.tsx
new file mode 100644
index 00000000..797ddfbc
--- /dev/null
+++ b/src/demo/demo.tsx
@@ -0,0 +1,46 @@
+import {
+  FilteredMediaEvent,
+  MediaEvent,
+  getMediaEventFilter,
+} from "../media-event-filter";
+import { createRoot } from "react-dom/client";
+import { StrictMode } from "react";
+import { App } from "./app";
+
+export type { TMediaEventFilter } from "../media-event-filter";
+
+function Demo({ rootEl }: { rootEl: HTMLDivElement }) {
+  const mp4Video = [
+    "https://testcontent.eyevinn.technology/mp4/VINN.mp4",
+    "https://testcontent.eyevinn.technology/mp4/stswe-tvplus-promo.mp4",
+  ];
+  const dash = [];
+  const hls = [];
+
+  createRoot(rootEl).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+
+  const mediaEl: HTMLVideoElement = document.createElement("video");
+
+  let i = 1;
+  let seekOrBufferTimestamp = 0;
+
+  mediaEl.src = mp4Video[0];
+
+  // switchButton.onclick = () => {
+  //   mediaEl.src = mediaEl.src !== mp4Video[0] ? mp4Video[0] : mp4Video[1];
+  // };
+  //
+  // clearButton.onclick = () => {
+  //   mediaEl.src = "";
+  // };
+  //
+  // loadButton.onclick = () => {
+  //   mediaEl.load();
+  // };
+}
+
+export { Demo };
diff --git a/src/demo/engine-shaka.tsx b/src/demo/engine-shaka.tsx
new file mode 100644
index 00000000..819769ec
--- /dev/null
+++ b/src/demo/engine-shaka.tsx
@@ -0,0 +1,33 @@
+import { RefObject, useEffect } from "react";
+import shaka from "shaka-player";
+
+export const useShaka = ({
+  videoUrl,
+  videoRef,
+}: {
+  videoUrl: string;
+  videoRef: RefObject<HTMLVideoElement>;
+}) => {
+  useEffect(() => {
+    if (!videoUrl || !videoRef.current) return () => {};
+
+    const player = new shaka.Player(videoRef.current);
+
+    // Add configuration if needed
+    // player.configure()
+
+    player
+      // start loading the stream
+      .load(videoUrl)
+      .then(() => {
+        videoRef.current?.play();
+      })
+      // catch errors during load
+      .catch(console.error);
+
+    // Kill player when unmounted
+    return () => {
+      player.destroy().catch(() => {});
+    };
+  }, [videoUrl, videoRef.current]);
+};
diff --git a/src/demo/filtered-events.hook.ts b/src/demo/filtered-events.hook.ts
new file mode 100644
index 00000000..18bb52ab
--- /dev/null
+++ b/src/demo/filtered-events.hook.ts
@@ -0,0 +1,119 @@
+import { RefObject, useEffect, useState } from "react";
+import { FilteredMediaEvent, getMediaEventFilter } from "../media-event-filter";
+
+export const useFilteredEvents = ({
+  videoRef,
+}: {
+  videoRef: RefObject<HTMLVideoElement>;
+}) => {
+  const [playing, setPlaying] = useState(false);
+  const [seeking, setSeeking] = useState(false);
+  const [buffering, setBuffering] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [blocked, setBlocked] = useState(false);
+  const [events, setEvents] = useState<{ e: FilteredMediaEvent; t: number }[]>(
+    [],
+  );
+
+  useEffect(() => {
+    if (!videoRef.current) return;
+
+    let seekOrBufferTimestamp = 0;
+
+    const mef = getMediaEventFilter({
+      mediaElement: videoRef.current,
+      callback: (evt) => {
+        if (!videoRef.current) return;
+
+        const now = Date.now();
+
+        switch (evt) {
+          case FilteredMediaEvent.LOADED:
+            setLoading(false);
+
+            // attempt autoplay
+            videoRef.current.play().catch((e) => {
+              // catch autoplay block
+              if (e.name.indexOf("NotAllowedError") > -1) {
+                setBlocked(true);
+              }
+            });
+            break;
+          case FilteredMediaEvent.PLAY:
+            break;
+          case FilteredMediaEvent.PLAYING:
+            // reset autplay blocked
+            setBlocked(false);
+            // we're playing!
+            setPlaying(true);
+            break;
+          case FilteredMediaEvent.ENDED:
+          case FilteredMediaEvent.PAUSE:
+            setPlaying(false);
+            break;
+          case FilteredMediaEvent.BUFFERING:
+            setBuffering(true);
+          case FilteredMediaEvent.BUFFERED:
+            setBuffering(false);
+          case FilteredMediaEvent.SEEKING:
+            setSeeking(true);
+            break;
+          case FilteredMediaEvent.SEEKED:
+            setSeeking(false);
+            break;
+          case FilteredMediaEvent.TIME_UPDATE:
+          default:
+            break;
+        }
+
+        if (evt === FilteredMediaEvent.TIME_UPDATE) {
+          console.debug(
+            "%cFiltered: %s",
+            "color:#267dff;font-weight:bold;",
+            evt,
+          );
+          return;
+        }
+
+        if (
+          [FilteredMediaEvent.BUFFERING, FilteredMediaEvent.SEEKING].includes(
+            evt,
+          )
+        ) {
+          seekOrBufferTimestamp = now;
+        }
+
+        if (
+          [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(evt)
+        ) {
+          console.log(
+            "%cFiltered: %s",
+            "color:#267dff;font-weight:bold;",
+            // TODO it does not work to use seekOrBufferTimestamp inside
+            //  the callback. Need to set up separate effect.
+            `${evt} (${(now - seekOrBufferTimestamp) / 1000}s)`,
+          );
+          console.info("\n");
+        } else {
+          console.log("%cFiltered: %s", "color:#267dff;font-weight:bold;", evt);
+          console.info("\n");
+        }
+
+        setEvents((prev) => [...prev, { e: evt, t: now }]);
+      },
+    });
+
+    return () => {
+      mef.teardown();
+    };
+  }, [videoRef.current]);
+
+  return {
+    playing,
+    seeking,
+    buffering,
+    loading,
+    blocked,
+    events,
+  };
+};
diff --git a/src/demo/form-elements.ts b/src/demo/form-elements.ts
new file mode 100644
index 00000000..d8773271
--- /dev/null
+++ b/src/demo/form-elements.ts
@@ -0,0 +1,223 @@
+import styled from "@emotion/styled";
+
+export const FormContainer = styled.form``;
+
+const sharedMargin = `margin: 0 0 2rem`;
+
+export const FormInput = styled.input`
+  width: 100%;
+  font-size: 1.6rem;
+  padding: 0.5rem;
+  margin: 0 0 2rem;
+  border: 0.1rem solid #6f6e6e;
+  border-radius: 0.5rem;
+
+  ${sharedMargin};
+
+  &.additional-line {
+    padding-right: 3.5rem;
+  }
+
+  &.with-loader {
+    padding-right: 3.5rem;
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
+`;
+
+export const FormSelect = styled.select`
+  width: 100%;
+  font-size: 1.6rem;
+  padding: 0.5rem;
+  ${sharedMargin};
+
+  border: 1px solid #6f6e6e;
+  border-radius: 0.5rem;
+`;
+
+export const FormLabel = styled.label`
+  display: block;
+  input,
+  select {
+    font-size: 1.6rem;
+    display: inline-block;
+  }
+`;
+
+export const DecorativeLabel = styled.span`
+  display: block;
+  white-space: nowrap;
+  padding: 0 1rem 1rem 0;
+`;
+
+export const StyledWarningMessage = styled.div`
+  padding: 0.5rem;
+  font-size: 1.6rem;
+  background: #ebca6a;
+  border-radius: 0.5rem;
+  color: #1a1a1a;
+  ${sharedMargin};
+  border: 1px solid #ebca6a;
+  display: flex;
+  align-items: center;
+`;
+
+const ActionButton = styled.button`
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, #fff, #f8eedb);
+  border: 0 solid #e5e7eb;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  color: #482307;
+  column-gap: 1rem;
+  cursor: pointer;
+  display: flex;
+  font-size: 100%;
+  font-weight: 700;
+  line-height: 2.4rem;
+  margin: 0;
+  outline: 0.2rem solid transparent;
+  padding: 1rem 1.5rem;
+  text-align: center;
+  text-transform: none;
+  transform: translateZ(0) scale(1);
+  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  box-shadow:
+    -0.6rem 0.8rem 1rem rgba(81, 41, 10, 0.1),
+    0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
+
+  &:disabled {
+    background: #c9c6c0;
+    cursor: not-allowed;
+  }
+
+  &.with-loader {
+    position: relative;
+    color: rgba(255, 255, 255, 0);
+  }
+`;
+
+export const PrimaryButton = styled(ActionButton)`
+  &:active:enabled {
+    background-color: #f3f4f6;
+    box-shadow:
+      -0.1rem 0.2rem 0.5rem rgba(81, 41, 10, 0.15),
+      0 0.1rem 0.1rem rgba(81, 41, 10, 0.15);
+    transform: translateY(0.125rem);
+  }
+
+  &:focus {
+    box-shadow:
+      rgba(72, 35, 7, 0.46) 0 0 0 0.4rem,
+      -0.6rem 0.8rem 1rem rgba(81, 41, 10, 0.1),
+      0 0.2rem 0.2rem rgba(81, 41, 10, 0.2);
+  }
+
+  &:not(:disabled):hover {
+  }
+
+  &:not(:disabled):hover:active {
+    transform: translateY(0.125rem);
+  }
+
+  &:focus {
+    outline: 0 solid transparent;
+  }
+
+  &:focus:before {
+    content: "";
+    left: calc(-1 * 0.375rem);
+    pointer-events: none;
+    position: absolute;
+    top: calc(-1 * 0.375rem);
+    transition: border-radius;
+    user-select: none;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0 solid transparent;
+  }
+
+  &:focus:not(:focus-visible):before {
+    border-width: 0;
+  }
+
+  &:not(:disabled):active {
+    transform: translateY(0.125rem);
+  }
+`;
+
+export const SecondaryButton = styled(ActionButton)`
+  &:before,
+  &:after {
+    border-radius: 0.5rem;
+  }
+
+  &:before {
+    background-color: rgba(72, 54, 42, 0.32);
+    content: "";
+    display: block;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -2;
+  }
+
+  &:after {
+    background-color: initial;
+    background-image: linear-gradient(to bottom, #fff, #f5ead6);
+    content: "";
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    right: 0.4rem;
+    top: 0.4rem;
+    left: 0.4rem;
+    bottom: 0.4rem;
+    transition: all 100ms ease-out;
+    z-index: -1;
+  }
+
+  &:hover:not(:disabled):after {
+    bottom: 0;
+    left: 0;scale
+    right: 0;
+    top: 0;
+    transition-timing-function: ease-in;
+  }
+
+  &:active:not(:disabled) {
+    color: #ccc;
+  }
+
+  &:active:not(:disabled):after {
+    background-image: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.2),
+        rgba(0, 0, 0, 0.2)
+      ),
+      linear-gradient(92.83deg, #fff, #f8eedb, 100%);
+    bottom: 0.4rem;
+    left: 0.4rem;
+    right: 0.4rem;
+    top: 0.4rem;
+  }
+`;
diff --git a/src/demo/native-events.hook.ts b/src/demo/native-events.hook.ts
new file mode 100644
index 00000000..272916b6
--- /dev/null
+++ b/src/demo/native-events.hook.ts
@@ -0,0 +1,57 @@
+import { RefObject, useEffect } from "react";
+import { MediaEvent } from "../media-event-filter";
+
+export const useNativeEvents = ({
+  videoRef,
+}: {
+  videoRef: RefObject<HTMLVideoElement>;
+}) => {
+  useEffect(() => {
+    if (!videoRef.current) return;
+
+    const listeners: [MediaEvent, () => void][] = Object.values(MediaEvent)
+      .map((evt) => {
+        if (!videoRef.current) return;
+
+        const pair: [MediaEvent, () => void] = [
+          evt,
+          () => {
+            if (!videoRef.current) return;
+
+            const mediaElState = {
+              networkState: videoRef.current.networkState,
+              readyState: videoRef.current.readyState,
+              paused: videoRef.current.paused,
+              ended: videoRef.current.ended,
+              error: videoRef.current.error,
+              currentTime: videoRef.current.currentTime,
+              duration: videoRef.current.duration,
+              seeking: videoRef.current.seeking,
+            };
+
+            console[evt === MediaEvent.timeupdate ? "debug" : "log"](
+              "%cNativeEv: %s",
+              "color:#cf1313;font-weight:bold;",
+              evt,
+            );
+
+            console[evt === MediaEvent.timeupdate ? "debug" : "info"](
+              "Media Element State",
+              mediaElState,
+            );
+          },
+        ];
+
+        videoRef.current.addEventListener(evt, pair[1]);
+
+        return pair;
+      })
+      .filter((v) => !!v);
+
+    return () => {
+      listeners.forEach(([evt, listener]) => {
+        videoRef.current?.removeEventListener(evt, listener);
+      });
+    };
+  }, [videoRef.current]);
+};
diff --git a/src/demo/player.tsx b/src/demo/player.tsx
new file mode 100644
index 00000000..f0dcbfe4
--- /dev/null
+++ b/src/demo/player.tsx
@@ -0,0 +1,48 @@
+import { useShaka } from "./engine-shaka";
+import { useRef } from "react";
+import { useNativeEvents } from "./native-events.hook";
+import { useFilteredEvents } from "./filtered-events.hook";
+import { useRenderEvents } from "./render-events.hook";
+import { useControls } from "./controls.hook";
+
+export const Player = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  const videoUrl = "https://testcontent.eyevinn.technology/mp4/VINN.mp4";
+
+  useNativeEvents({ videoRef });
+  const { playing, seeking, buffering, events, blocked, loading } =
+    useFilteredEvents({ videoRef });
+  const renderEvents = useRenderEvents(events);
+
+  // TODO extract to useEngine component with switch on selected engine
+  useShaka({
+    videoRef,
+    videoUrl,
+  });
+
+  const { playPause, skip } = useControls({
+    playing,
+    videoRef,
+  });
+
+  return (
+    <div>
+      <video ref={videoRef} style={{ width: "100%", height: "auto" }} />
+      <button type={"button"} onClick={playPause}>
+        {playing ? "Pause" : "Play"}
+      </button>
+      <button type={"button"} onClick={() => skip(-10)}>
+        Seek -10
+      </button>
+      <button type={"button"} onClick={() => skip(10)}>
+        Seek +10
+      </button>
+      {renderEvents.map(({ seq, evt, dur }) => (
+        <div key={seq}>
+          {seq} {evt} {dur}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/src/demo/render-events.hook.ts b/src/demo/render-events.hook.ts
new file mode 100644
index 00000000..a458a860
--- /dev/null
+++ b/src/demo/render-events.hook.ts
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { FilteredMediaEvent } from "../media-event-filter";
+
+export const useRenderEvents = (
+  events: { e: FilteredMediaEvent; t: number }[],
+) => {
+  const [eventsForRendering, setEventsForRendering] = useState<
+    { seq: number; evt: FilteredMediaEvent; dur: number | null }[]
+  >([]);
+
+  useEffect(() => {
+    setEventsForRendering(() => {
+      const mut = {
+        seekOrBufferTimestamp: 0,
+        dur: 0,
+      };
+
+      return events
+        .map(({ e, t }, i) => {
+          if (
+            [FilteredMediaEvent.BUFFERING, FilteredMediaEvent.SEEKING].includes(
+              e,
+            )
+          ) {
+            mut.seekOrBufferTimestamp = t;
+          }
+
+          if (
+            [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(e)
+          ) {
+            mut.dur = t - mut.seekOrBufferTimestamp;
+          }
+
+          return {
+            evt: e,
+            seq: i,
+            dur:
+              mut.seekOrBufferTimestamp &&
+              [FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(
+                e,
+              )
+                ? mut.dur / 1000
+                : null,
+          };
+        })
+        .toReversed();
+    });
+  }, [events]);
+
+  return eventsForRendering;
+};
diff --git a/src/demo/shaka.d.ts b/src/demo/shaka.d.ts
new file mode 100644
index 00000000..7dc7ab4c
--- /dev/null
+++ b/src/demo/shaka.d.ts
@@ -0,0 +1,7 @@
+declare module "shaka-player" {
+  export = shaka;
+}
+
+declare module "shaka-player/dist/shaka-player.compiled" {
+  export = shaka;
+}
diff --git a/tsconfig.json b/tsconfig.json
index ff9f80d7..72f54223 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "ESNext",
     "module": "ESNext",
+    "moduleResolution": "node",
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
@@ -10,9 +11,10 @@
     "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
index cb38767b..a166db9e 100644
--- 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
index 6bb89937..f707a926 100644
--- 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"),
diff --git a/yarn.lock b/yarn.lock
index b5654ec0..544499b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,6 +15,45 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/code-frame@npm:7.24.7"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.7"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/generator@npm:7.25.6"
+  dependencies:
+    "@babel/types": "npm:^7.25.6"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/541e4fbb6ea7806f44232d70f25bf09dee9a57fe43d559e375536870ca5261ebb4647fec3af40dcbb3325ea2a49aff040e12a4e6f88609eaa88f10c4e27e31f8
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.16.7":
+  version: 7.24.7
+  resolution: "@babel/helper-module-imports@npm:7.24.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770
+  languageName: node
+  linkType: hard
+
+"@babel/helper-string-parser@npm:^7.24.8":
+  version: 7.24.8
+  resolution: "@babel/helper-string-parser@npm:7.24.8"
+  checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
@@ -22,6 +61,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
+  checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.24.2":
   version: 7.24.2
   resolution: "@babel/highlight@npm:7.24.2"
@@ -34,6 +80,75 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/highlight@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/highlight@npm:7.24.7"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/parser@npm:7.25.6"
+  dependencies:
+    "@babel/types": "npm:^7.25.6"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/830aab72116aa14eb8d61bfa8f9d69fc8f3a43d909ce993cb4350ae14d3af1a2f740a54410a22d821c48a253263643dfecbc094f9608e6a70ce9ff3c0bbfe91a
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/0c4134734deb20e1005ffb9165bf342e1074576621b246d8e5e41cc7cb315a885b7d98950fbf5c63619a2990a56ae82f444d35fe8c4691a0b70c2fe5673667dc
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.25.0":
+  version: 7.25.0
+  resolution: "@babel/template@npm:7.25.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.0"
+  checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.24.7":
+  version: 7.25.6
+  resolution: "@babel/traverse@npm:7.25.6"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.25.6"
+    "@babel/parser": "npm:^7.25.6"
+    "@babel/template": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.6"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/de75a918299bc27a44ec973e3f2fa8c7902bbd67bd5d39a0be656f3c1127f33ebc79c12696fbc8170a0b0e1072a966d4a2126578d7ea2e241b0aeb5d16edc738
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.24.7, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/types@npm:7.25.6"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.24.8"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/7b54665e1b51f525fe0f451efdd9fe7a4a6dfba3fd4956c3530bc77336b66ffe3d78c093796ed044119b5d213176af7cf326f317a2057c538d575c6cefcb3562
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -57,22 +172,176 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.12.0":
+  version: 11.12.0
+  resolution: "@emotion/babel-plugin@npm:11.12.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.16.7"
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/serialize": "npm:^1.2.0"
+    babel-plugin-macros: "npm:^3.1.0"
+    convert-source-map: "npm:^1.5.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-root: "npm:^1.1.0"
+    source-map: "npm:^0.5.7"
+    stylis: "npm:4.2.0"
+  checksum: 10/fe6f4522ea2b61ef4214dd0b0f3778aad9c18434b47e50ae5091af226526bf305455c313065826a090682520c9462c151d4df62ec128f14671d3125afc05b148
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.13.0":
+  version: 11.13.1
+  resolution: "@emotion/cache@npm:11.13.1"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.0"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    stylis: "npm:4.2.0"
+  checksum: 10/090c8ad2e5b23f1b3a95e94f1f0554a40ed1dcd844c9d31629a68ff824eff40f32d1362f67aefa440ee0aabd5a8cabcc76870fd6d77144d3ff251bdcdf1420b9
+  languageName: node
+  linkType: hard
+
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
+  languageName: node
+  linkType: hard
+
+"@emotion/is-prop-valid@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@emotion/is-prop-valid@npm:1.3.0"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+  checksum: 10/9b395dd9734fa88e24aa5adeef90ba86564d29c85d07a18cd39fbd06fbe597a5008a335a6147088de9f0533dbb3691786c8e10e6eaab5c7d960634833a054005
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
+  languageName: node
+  linkType: hard
+
+"@emotion/react@npm:11.13.3":
+  version: 11.13.3
+  resolution: "@emotion/react@npm:11.13.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/babel-plugin": "npm:^11.12.0"
+    "@emotion/cache": "npm:^11.13.0"
+    "@emotion/serialize": "npm:^1.3.1"
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0"
+    "@emotion/utils": "npm:^1.4.0"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    hoist-non-react-statics: "npm:^3.3.1"
+  peerDependencies:
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/ee70d3afc2e8dd771e6fe176d27dd87a5e21a54e54d871438fd1caa5aa2312d848c6866292fdc65a6ea1c945147c8422bda2d22ed739178af9902dc86d6b298a
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0, @emotion/serialize@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "@emotion/serialize@npm:1.3.1"
+  dependencies:
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/unitless": "npm:^0.10.0"
+    "@emotion/utils": "npm:^1.4.0"
+    csstype: "npm:^3.0.2"
+  checksum: 10/4bbb9b417f88a7bb55c4ffba101e3e53059029c0258969683bb11216906e08cbd687b5674ec787ec41e5340399fb08af8881d6cf913caf8a5fdf84c4f4890f33
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5
+  languageName: node
+  linkType: hard
+
+"@emotion/styled@npm:11.13.0":
+  version: 11.13.0
+  resolution: "@emotion/styled@npm:11.13.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/babel-plugin": "npm:^11.12.0"
+    "@emotion/is-prop-valid": "npm:^1.3.0"
+    "@emotion/serialize": "npm:^1.3.0"
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.1.0"
+    "@emotion/utils": "npm:^1.4.0"
+  peerDependencies:
+    "@emotion/react": ^11.0.0-rc.0
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10/5463a0f15fc12a9e20340f52df49461e948c3ae7e2dd763db0ff937b0b96dd4e82eed85cd15e24621efb3b097a095b88b01d60f50cf6f38fe3ab7db6e77f9615
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: 10/6851c16edce01c494305f43b2cad7a26b939a821131b7c354e49b8e3b012c8810024755b0f4a03ef51117750309e55339825a97bd10411fb3687e68904769106
+  languageName: node
+  linkType: hard
+
+"@emotion/use-insertion-effect-with-fallbacks@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.1.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10/33a10f44a873b3f5ccd2a1a3d13c2f34ed628f5a2be1ccf28540a86535a14d3a930afcbef209d48346a22ec60ff48f43c86ee9c846b9480d23a55a17145da66c
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/utils@npm:1.4.0"
+  checksum: 10/e4cdb51819db01fec21c3e35a1391900c9e7f3ac1e7ecb419c8e408464830cd7ef6e1a116381cbfe3fb1039406fb7ed35f16a1575d502c92bc9f81bc13a3ee5a
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
+  languageName: node
+  linkType: hard
+
 "@eyevinn/media-event-filter@workspace:.":
   version: 0.0.0-use.local
   resolution: "@eyevinn/media-event-filter@workspace:."
   dependencies:
+    "@emotion/react": "npm:11.13.3"
+    "@emotion/styled": "npm:11.13.0"
     "@semantic-release/changelog": "npm:6.0.3"
     "@semantic-release/git": "npm:10.0.1"
-    "@snowpack/plugin-typescript": "npm:1.2.1"
-    "@swc/core": "npm:1.6.13"
-    "@types/node": "npm:20.14.10"
+    "@swc/core": "npm:1.7.26"
+    "@swc/plugin-emotion": "npm:4.0.1"
+    "@types/react": "npm:18.3.5"
+    "@types/react-dom": "npm:18.3.0"
     "@types/webpack": "npm:5.28.5"
+    hls.js: "npm:1.5.15"
     prettier: "npm:3.3.2"
+    react: "npm:18.3.1"
+    react-dom: "npm:18.3.1"
+    react-hook-form: "npm:7.53.0"
     semantic-release: "npm:24"
+    shaka-player: "npm:4.11.2"
     swc-loader: "npm:0.2.6"
     terser-webpack-plugin: "npm:5.3.10"
     ts-node: "npm:10.9.2"
-    typescript: "npm:5.5.3"
+    typescript: "npm:5.6.2"
     webpack: "npm:5.93.0"
     webpack-bundle-analyzer: "npm:4.10.2"
     webpack-cli: "npm:5.1.4"
@@ -774,104 +1043,92 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@snowpack/plugin-typescript@npm:1.2.1":
-  version: 1.2.1
-  resolution: "@snowpack/plugin-typescript@npm:1.2.1"
-  dependencies:
-    execa: "npm:^5.0.0"
-    npm-run-path: "npm:^4.0.1"
-  peerDependencies:
-    typescript: "*"
-  checksum: 10/365eda9c03a492f61d28ddbe6b0764e67c33a4e1e938fc595a72b77c7637676aae80e8d92b0ea9a6563308be04754eb9e86f3d971ccae295e8aafa6ce712c92e
-  languageName: node
-  linkType: hard
-
-"@swc/core-darwin-arm64@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-darwin-arm64@npm:1.6.13"
+"@swc/core-darwin-arm64@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-darwin-arm64@npm:1.7.26"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-darwin-x64@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-darwin-x64@npm:1.6.13"
+"@swc/core-darwin-x64@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-darwin-x64@npm:1.7.26"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm-gnueabihf@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.6.13"
+"@swc/core-linux-arm-gnueabihf@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.26"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-gnu@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-linux-arm64-gnu@npm:1.6.13"
+"@swc/core-linux-arm64-gnu@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.7.26"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-arm64-musl@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-linux-arm64-musl@npm:1.6.13"
+"@swc/core-linux-arm64-musl@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-linux-arm64-musl@npm:1.7.26"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-gnu@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-linux-x64-gnu@npm:1.6.13"
+"@swc/core-linux-x64-gnu@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-linux-x64-gnu@npm:1.7.26"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@swc/core-linux-x64-musl@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-linux-x64-musl@npm:1.6.13"
+"@swc/core-linux-x64-musl@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-linux-x64-musl@npm:1.7.26"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@swc/core-win32-arm64-msvc@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-win32-arm64-msvc@npm:1.6.13"
+"@swc/core-win32-arm64-msvc@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.7.26"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@swc/core-win32-ia32-msvc@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-win32-ia32-msvc@npm:1.6.13"
+"@swc/core-win32-ia32-msvc@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.7.26"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@swc/core-win32-x64-msvc@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core-win32-x64-msvc@npm:1.6.13"
+"@swc/core-win32-x64-msvc@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core-win32-x64-msvc@npm:1.7.26"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@swc/core@npm:1.6.13":
-  version: 1.6.13
-  resolution: "@swc/core@npm:1.6.13"
+"@swc/core@npm:1.7.26":
+  version: 1.7.26
+  resolution: "@swc/core@npm:1.7.26"
   dependencies:
-    "@swc/core-darwin-arm64": "npm:1.6.13"
-    "@swc/core-darwin-x64": "npm:1.6.13"
-    "@swc/core-linux-arm-gnueabihf": "npm:1.6.13"
-    "@swc/core-linux-arm64-gnu": "npm:1.6.13"
-    "@swc/core-linux-arm64-musl": "npm:1.6.13"
-    "@swc/core-linux-x64-gnu": "npm:1.6.13"
-    "@swc/core-linux-x64-musl": "npm:1.6.13"
-    "@swc/core-win32-arm64-msvc": "npm:1.6.13"
-    "@swc/core-win32-ia32-msvc": "npm:1.6.13"
-    "@swc/core-win32-x64-msvc": "npm:1.6.13"
+    "@swc/core-darwin-arm64": "npm:1.7.26"
+    "@swc/core-darwin-x64": "npm:1.7.26"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.7.26"
+    "@swc/core-linux-arm64-gnu": "npm:1.7.26"
+    "@swc/core-linux-arm64-musl": "npm:1.7.26"
+    "@swc/core-linux-x64-gnu": "npm:1.7.26"
+    "@swc/core-linux-x64-musl": "npm:1.7.26"
+    "@swc/core-win32-arm64-msvc": "npm:1.7.26"
+    "@swc/core-win32-ia32-msvc": "npm:1.7.26"
+    "@swc/core-win32-x64-msvc": "npm:1.7.26"
     "@swc/counter": "npm:^0.1.3"
-    "@swc/types": "npm:^0.1.9"
+    "@swc/types": "npm:^0.1.12"
   peerDependencies:
     "@swc/helpers": "*"
   dependenciesMeta:
@@ -898,7 +1155,7 @@ __metadata:
   peerDependenciesMeta:
     "@swc/helpers":
       optional: true
-  checksum: 10/ccb9c11d5f2e8371f17fca33f7d702433684013fce685d0db06f0b3a6064db476b1c4378bb8f1e9d12841338fc745a6aed056137443cb370d4238b6f4fc5405c
+  checksum: 10/8fb43420bdd1b774dc054c6629f87f733e76860b97130609c7374f3a48406bc0ae1a2dd0b3e3c10317c692b2eaa64747f1a690b309727a8d1411112e2d2a884e
   languageName: node
   linkType: hard
 
@@ -909,12 +1166,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/types@npm:^0.1.9":
-  version: 0.1.9
-  resolution: "@swc/types@npm:0.1.9"
+"@swc/plugin-emotion@npm:4.0.1":
+  version: 4.0.1
+  resolution: "@swc/plugin-emotion@npm:4.0.1"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+  checksum: 10/2c3b1368279164663218985f6b9a960e30af8e39b2d9cc819929c7d9ab325c092d946f4b9a493dccf0e4027d70a0f5aa05170b6909674327698ff264d352f1dd
+  languageName: node
+  linkType: hard
+
+"@swc/types@npm:^0.1.12":
+  version: 0.1.12
+  resolution: "@swc/types@npm:0.1.12"
   dependencies:
     "@swc/counter": "npm:^0.1.3"
-  checksum: 10/c67ee0480b7d71c20764c5d99addebc1aacd4aed218f56143fa946132a93ff3e11bdea913c628ad992acf78c4d1fe69e65bb4fd2b81d8006a2edf94661d2fbce
+  checksum: 10/92dbbc70cd068ea30fb6fbdc1ae8599d6c058a5d09b2923d6e4e24fab5ad7c86a19dd01f349a8e03e300a9321e06911a24df18303b40e307fbd4109372cef2ef
   languageName: node
   linkType: hard
 
@@ -1107,15 +1373,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:20.14.10":
-  version: 20.14.10
-  resolution: "@types/node@npm:20.14.10"
-  dependencies:
-    undici-types: "npm:~5.26.4"
-  checksum: 10/672892cf94d0d95cf052f11271990686a0fd204cd1e5fe7a4ef240e5315e06711765dc47b9ec98627d3adac18b8c92bb7e2d8db21d18faa20bc3e3203a143e79
-  languageName: node
-  linkType: hard
-
 "@types/normalize-package-data@npm:^2.4.3":
   version: 2.4.4
   resolution: "@types/normalize-package-data@npm:2.4.4"
@@ -1123,6 +1380,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse-json@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "@types/parse-json@npm:4.0.2"
+  checksum: 10/5bf62eec37c332ad10059252fc0dab7e7da730764869c980b0714777ad3d065e490627be9f40fc52f238ffa3ac4199b19de4127196910576c2fe34dd47c7a470
+  languageName: node
+  linkType: hard
+
+"@types/prop-types@npm:*":
+  version: 15.7.12
+  resolution: "@types/prop-types@npm:15.7.12"
+  checksum: 10/ac16cc3d0a84431ffa5cfdf89579ad1e2269549f32ce0c769321fdd078f84db4fbe1b461ed5a1a496caf09e637c0e367d600c541435716a55b1d9713f5035dfe
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*":
   version: 6.9.14
   resolution: "@types/qs@npm:6.9.14"
@@ -1137,6 +1408,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-dom@npm:18.3.0":
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10/6ff53f5a7b7fba952a68e114d3b542ebdc1e87a794234785ebab0bcd9bde7fb4885f21ebaf93d26dc0a1b5b93287f42cad68b78ae04dddf6b20da7aceff0beaf
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:*, @types/react@npm:18.3.5":
+  version: 18.3.5
+  resolution: "@types/react@npm:18.3.5"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10/ba0477c5ad4a762157c6262a199af6ccf9e24576877a26a7f516d5a9ba35374a6ac7f8686a10e5e8030513214f02bcb66e8363e43905afb7cd313deaf673de05
+  languageName: node
+  linkType: hard
+
 "@types/retry@npm:0.12.2":
   version: 0.12.2
   resolution: "@types/retry@npm:0.12.2"
@@ -1674,6 +1964,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-macros@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "babel-plugin-macros@npm:3.1.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    cosmiconfig: "npm:^7.0.0"
+    resolve: "npm:^1.19.0"
+  checksum: 10/30be6ca45e9a124c58ca00af9a0753e5410ec0b79a737714fc4722bbbeb693e55d9258f05c437145ef4a867c2d1603e06a1c292d66c243ce1227458c8ea2ca8c
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -2264,6 +2565,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^1.5.0":
+  version: 1.9.0
+  resolution: "convert-source-map@npm:1.9.0"
+  checksum: 10/dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
+  languageName: node
+  linkType: hard
+
 "cookie-signature@npm:1.0.6":
   version: 1.0.6
   resolution: "cookie-signature@npm:1.0.6"
@@ -2285,6 +2593,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "cosmiconfig@npm:7.1.0"
+  dependencies:
+    "@types/parse-json": "npm:^4.0.0"
+    import-fresh: "npm:^3.2.1"
+    parse-json: "npm:^5.0.0"
+    path-type: "npm:^4.0.0"
+    yaml: "npm:^1.10.0"
+  checksum: 10/03600bb3870c80ed151b7b706b99a1f6d78df8f4bdad9c95485072ea13358ef294b13dd99f9e7bf4cc0b43bcd3599d40df7e648750d21c2f6817ca2cd687e071
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^9.0.0":
   version: 9.0.0
   resolution: "cosmiconfig@npm:9.0.0"
@@ -2338,6 +2659,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.0.2":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 10/f593cce41ff5ade23f44e77521e3a1bcc2c64107041e1bf6c3c32adc5187d0d60983292fda326154d20b01079e24931aa5b08e4467cc488b60bb1e7f6d478ade
+  languageName: node
+  linkType: hard
+
 "debounce@npm:^1.2.1":
   version: 1.2.1
   resolution: "debounce@npm:1.2.1"
@@ -2366,6 +2694,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.3.1":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10/71168908b9a78227ab29d5d25fe03c5867750e31ce24bf2c44a86efc5af041758bb56569b0a3d48a9b5344c00a24a777e6f4100ed6dfd9534a42c1dde285125a
+  languageName: node
+  linkType: hard
+
 "deep-extend@npm:^0.6.0":
   version: 0.6.0
   resolution: "deep-extend@npm:0.6.0"
@@ -2532,6 +2872,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eme-encryption-scheme-polyfill@npm:^2.1.5":
+  version: 2.1.5
+  resolution: "eme-encryption-scheme-polyfill@npm:2.1.5"
+  checksum: 10/e5ea6e62544bf69c38dc96d66d910ea27353221b5bc0e4c253bf78019087b6e70e66f7eb65137bd5d467fdcd0a932e23c1a6f1268fdc82c64469c266e8faaa3f
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -2937,6 +3284,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: 10/caa799c976a14925ba7f31ca1a226fe73d3aa270f4f1b623fcfeb1c6e263111db4beb807d8acd31bd4d48d44c343b93688a9288dfbccca27463c36a0301b0bb9
+  languageName: node
+  linkType: hard
+
 "find-up-simple@npm:^1.0.0":
   version: 1.0.0
   resolution: "find-up-simple@npm:1.0.0"
@@ -3200,6 +3554,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globals@npm:^11.1.0":
+  version: 11.12.0
+  resolution: "globals@npm:11.12.0"
+  checksum: 10/9f054fa38ff8de8fa356502eb9d2dae0c928217b8b5c8de1f09f5c9b6c8a96d8b9bd3afc49acbcd384a98a81fea713c859e1b09e214c60509517bb8fc2bc13c2
+  languageName: node
+  linkType: hard
+
 "globby@npm:^14.0.0":
   version: 14.0.1
   resolution: "globby@npm:14.0.1"
@@ -3331,6 +3692,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hls.js@npm:1.5.15":
+  version: 1.5.15
+  resolution: "hls.js@npm:1.5.15"
+  checksum: 10/58dd5c70e233a3d66ebba9f55bfbe6673ac9d941d391afd896d44e7a141cba931fd25c392133c13f65fbd82e85e1575ada68a2722d1da38b6ad7b9b6a93a6a6b
+  languageName: node
+  linkType: hard
+
+"hoist-non-react-statics@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: "npm:^16.7.0"
+  checksum: 10/1acbe85f33e5a39f90c822ad4d28b24daeb60f71c545279431dc98c312cd28a54f8d64788e477fe21dc502b0e3cf58589ebe5c1ad22af27245370391c2d24ea6
+  languageName: node
+  linkType: hard
+
 "hook-std@npm:^3.0.0":
   version: 3.0.0
   resolution: "hook-std@npm:3.0.0"
@@ -3523,7 +3900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.3.0":
+"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -3918,7 +4295,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-tokens@npm:^4.0.0":
+"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
   checksum: 10/af37d0d913fb56aec6dc0074c163cc71cd23c0b8aad5c2350747b6721d37ba118af35abdd8b33c47ec2800de07dedb16a527ca9c530ee004093e04958bd0cbf2
@@ -3943,6 +4320,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsesc@npm:^2.5.1":
+  version: 2.5.2
+  resolution: "jsesc@npm:2.5.2"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10/d2096abdcdec56969764b40ffc91d4a23408aa2f351b4d1c13f736f25476643238c43fdbaf38a191c26b1b78fd856d965f5d4d0dde7b89459cd94025190cdf13
+  languageName: node
+  linkType: hard
+
 "json-parse-better-errors@npm:^1.0.1":
   version: 1.0.2
   resolution: "json-parse-better-errors@npm:1.0.2"
@@ -4265,6 +4651,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loose-envify@npm:^1.1.0":
+  version: 1.4.0
+  resolution: "loose-envify@npm:1.4.0"
+  dependencies:
+    js-tokens: "npm:^3.0.0 || ^4.0.0"
+  bin:
+    loose-envify: cli.js
+  checksum: 10/6517e24e0cad87ec9888f500c5b5947032cdfe6ef65e1c1936a0c48a524b81e65542c9c3edc91c97d5bddc806ee2a985dbc79be89215d613b1de5db6d1cfe6f4
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
   version: 10.2.0
   resolution: "lru-cache@npm:10.2.0"
@@ -4588,7 +4985,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.3, ms@npm:^2.1.2":
+"ms@npm:2.1.3, ms@npm:^2.1.2, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: 10/aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
@@ -5185,7 +5582,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-json@npm:^5.2.0":
+"parse-json@npm:^5.0.0, parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
   dependencies:
@@ -5524,6 +5921,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dom@npm:18.3.1":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    scheduler: "npm:^0.23.2"
+  peerDependencies:
+    react: ^18.3.1
+  checksum: 10/3f4b73a3aa083091173b29812b10394dd06f4ac06aff410b74702cfb3aa29d7b0ced208aab92d5272919b612e5cda21aeb1d54191848cf6e46e9e354f3541f81
+  languageName: node
+  linkType: hard
+
+"react-hook-form@npm:7.53.0":
+  version: 7.53.0
+  resolution: "react-hook-form@npm:7.53.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17 || ^18 || ^19
+  checksum: 10/b7d73696b7c10e042f6ea6fcec01f951091146bfbc89d1378327a970bcd724b968e93fae1657bddada75caf648cfaf8693c5ba03c25e96816b755079d29f65da
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^16.7.0":
+  version: 16.13.1
+  resolution: "react-is@npm:16.13.1"
+  checksum: 10/5aa564a1cde7d391ac980bedee21202fc90bdea3b399952117f54fb71a932af1e5902020144fb354b4690b2414a0c7aafe798eb617b76a3d441d956db7726fdf
+  languageName: node
+  linkType: hard
+
+"react@npm:18.3.1":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf
+  languageName: node
+  linkType: hard
+
 "read-cmd-shim@npm:^4.0.0":
   version: 4.0.0
   resolution: "read-cmd-shim@npm:4.0.0"
@@ -5639,6 +6073,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 10/5db3161abb311eef8c45bcf6565f4f378f785900ed3945acf740a9888c792f75b98ecb77f0775f3bf95502ff423529d23e94f41d80c8256e8fa05ed4b07cf471
+  languageName: node
+  linkType: hard
+
 "registry-auth-token@npm:^5.0.0":
   version: 5.0.2
   resolution: "registry-auth-token@npm:5.0.2"
@@ -5692,7 +6133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.20.0":
+"resolve@npm:^1.19.0, resolve@npm:^1.20.0":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -5705,7 +6146,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -5787,6 +6228,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10/e8d68b89d18d5b028223edf090092846868a765a591944760942b77ea1f69b17235f7e956696efbb62c8130ab90af7e0949bfb8eba7896335507317236966bc9
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:^3.1.1, schema-utils@npm:^3.2.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
@@ -5985,6 +6435,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shaka-player@npm:4.11.2":
+  version: 4.11.2
+  resolution: "shaka-player@npm:4.11.2"
+  dependencies:
+    eme-encryption-scheme-polyfill: "npm:^2.1.5"
+  checksum: 10/cad0f2b2454d0d397beba3c9478e1f0eb3ed53b601855412b1766abe4dc6ed81e742542675d908e79f7fe32aa98d8c0773d4d52e8816781b527a3a151d805b51
+  languageName: node
+  linkType: hard
+
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -6144,6 +6603,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 10/9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -6361,6 +6827,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 10/58359185275ef1f39c339ae94e598168aa6bb789f6cf0d52e726c1e7087a94e9c17f0385a28d34483dec1ffc2c75670ec714dc5603d99c3124ec83bc2b0a0f42
+  languageName: node
+  linkType: hard
+
 "super-regex@npm:^1.0.0":
   version: 1.0.0
   resolution: "super-regex@npm:1.0.0"
@@ -6568,6 +7041,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"to-fast-properties@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "to-fast-properties@npm:2.0.0"
+  checksum: 10/be2de62fe58ead94e3e592680052683b1ec986c72d589e7b21e5697f8744cdbf48c266fa72f6c15932894c10187b5f54573a3bcf7da0bfd964d5caf23d436168
+  languageName: node
+  linkType: hard
+
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -6692,23 +7172,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:5.5.3":
-  version: 5.5.3
-  resolution: "typescript@npm:5.5.3"
+"typescript@npm:5.6.2":
+  version: 5.6.2
+  resolution: "typescript@npm:5.6.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10/11a867312419ed497929aafd2f1d28b2cd41810a5eb6c6e9e169559112e9ea073d681c121a29102e67cd4478d0a4ae37a306a5800f3717f59c4337e6a9bd5e8d
+  checksum: 10/f95365d4898f357823e93d334ecda9fcade54f009b397c7d05b7621cd9e865981033cf89ccde0f3e3a7b73b1fdbae18e92bc77db237b43e912f053fef0f9a53b
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A5.5.3#optional!builtin<compat/typescript>":
-  version: 5.5.3
-  resolution: "typescript@patch:typescript@npm%3A5.5.3#optional!builtin<compat/typescript>::version=5.5.3&hash=5adc0c"
+"typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>":
+  version: 5.6.2
+  resolution: "typescript@patch:typescript@npm%3A5.6.2#optional!builtin<compat/typescript>::version=5.6.2&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10/b61b8bb4b4d6a8a00f9d5f931f8c67070eed6ad11feabf4c41744a326987080bfc806a621596c70fbf2e5974eca3ed65bafeeeb22a078071bdfb51d8abd7c013
+  checksum: 10/060a7349adf698477b411be4ace470aee6c2c1bd99917fdf5d33697c17ec55c64fe724eb10399387530b50e9913b41528dd8bfcca0a5fc8f8bac63fbb4580a2e
   languageName: node
   linkType: hard
 
@@ -7269,6 +7749,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.0":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: 10/e088b37b4d4885b70b50c9fa1b7e54bd2e27f5c87205f9deaffd1fb293ab263d9c964feadb9817a7b129a5bf30a06582cb08750f810568ecc14f3cdbabb79cb3
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^20.2.2":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"