basic video support, not usable by end user yet

package.json

@@ -47,7 +47,6 @@
     "tsx": "^4.7.3",
     "vite-plugin-static-copy": "^1.0.4",
     "vite-plugin-vsharp": "^1.7.3",
-    "vite-plugin-webp-generator": "^0.0.5",
     "wisp-server-node": "^1.0.6",
     "ws": "^8.17.0"
   },

pnpm-lock.yaml

@@ -101,6 +101,9 @@ dependencies:
   react-icons:
     specifier: ^4.12.0
     version: 4.12.0(react@18.3.1)
+  react-player:
+    specifier: ^2.16.0
+    version: 2.16.0(react@18.3.1)
   react-toastify:
     specifier: ^9.1.3
     version: 9.1.3(react-dom@18.3.1)(react@18.3.1)
@@ -3222,6 +3225,11 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /default-browser-id@3.0.0:
     resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
     engines: {node: '>=12'}
@@ -5927,6 +5935,10 @@ packages:
       strip-bom: 2.0.0
     dev: false
 
+  /load-script@1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+    dev: false
+
   /localforage@1.10.0:
     resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
     dependencies:
@@ -6089,6 +6101,10 @@ packages:
       - supports-color
     dev: false
 
+  /memoize-one@5.2.1:
+    resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==}
+    dev: false
+
   /merge-stream@1.0.1:
     resolution: {integrity: sha512-e6RM36aegd4f+r8BZCcYXlO2P3H6xbUM6ktL2Xmf45GAOit9bI4z6/3VU7JwllVO1L7u0UDSg/EhzQ5lmMLolA==}
     dependencies:
@@ -7461,6 +7477,19 @@ packages:
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  /react-player@2.16.0(react@18.3.1):
+    resolution: {integrity: sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==}
+    peerDependencies:
+      react: '>=16.6.0'
+    dependencies:
+      deepmerge: 4.3.1
+      load-script: 1.0.0
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-fast-compare: 3.2.2
+    dev: false
+
   /react-side-effect@2.1.2(react@18.3.1):
     resolution: {integrity: sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==}
     peerDependencies:

src/Video.tsx

@@ -0,0 +1,30 @@
+import { useRef, useEffect } from "preact/hooks";
+
+export default function Video({ src, isMuted }) {
+  const refVideo = useRef(null);
+
+  useEffect(() => {
+    if (!refVideo.current) {
+      return;
+    }
+
+    if (isMuted) {
+      //open bug since 2017 that you cannot set muted in video element https://github.com/facebook/react/issues/10389
+      refVideo.current.defaultMuted = true;
+      refVideo.current.muted = true;
+    }
+
+    refVideo.current.srcObject = src;
+  }, [src]);
+
+  return (
+    <video
+      ref={refVideo}
+      autoPlay
+      playsInline //FIX iOS black screen
+      className="relative z-10 h-screen w-full"
+    >
+      <source src={src} type="video/mp4" />
+    </video>
+  );
+}

src/index.tsx

@@ -59,6 +59,12 @@ export default function App() {
           )}
         </div>
       </Suspense>
+      {/* <video muted autoplay loop className="relative z-10 h-screen w-full object-cover">
+        <source
+          src="bg.mp4"
+          type="video/mp4"
+        />
+        </video> */}
     </div>
   );
 }