upload to same tab, but it's still hangling and demos for some reason does not play

Author: sparkoo

web/src/App.jsx

@@ -1,14 +1,21 @@
+import { useState } from 'react'
 import { LocationProvider, Router, Route, lazy } from 'preact-iso';
 import { Home } from './Index/Home'
 import { PlayerApp } from './Player/PlayerApp'
+import { DemoContext } from './context'
 
 export function App() {
-	return <LocationProvider>
-		<Router>
-			{/* Both of these are equivalent */}
-			<Home path="/" />
-			<Route path="/player" component={PlayerApp} />
-			{/* <NotFound default /> */}
-		</Router>
-	</LocationProvider>
+	const [demoData, setDemoData] = useState(null);
+	return (
+		<DemoContext.Provider value={{demoData, setDemoData}}>
+			<LocationProvider>
+				<Router>
+					{/* Both of these are equivalent */}
+					<Home path="/" />
+					<Route path="/player" component={PlayerApp} />
+					{/* <NotFound default /> */}
+				</Router>
+			</LocationProvider>
+		</DemoContext.Provider>
+	)
 }

web/src/Index/Uploader/Uploader.jsx

@@ -1,8 +1,12 @@
 import './Uploader.css';
 import { FileUpload } from 'primereact/fileupload';
 import { ProgressBar } from 'primereact/progressbar';
+import { useLocation } from 'preact-iso';
+import { useContext } from 'react';
+import { DemoContext } from '../../context'
 
 const Uploader = (props) => {
+  const demoData = useContext(DemoContext);
   // const [serverHost] = useState(window.location.host.includes("localhost") ? "http://localhost:8080" : "")
   // const [uploadProgress, setUploadProgress] = useState([])
   // const onUpload = function (event) {
@@ -12,26 +16,28 @@ const Uploader = (props) => {
   // const onProgress = (event, filename) => {
   //   console.log("progress", filename, event)
   // }
+  const { route } = useLocation();
 
   const uploadHandler = function ({ files }) {
     const [file] = files;
     console.log(file)
     console.log("am I even here?")
 
     const reader = new FileReader();
-    
+
     console.log("and here?")
     reader.onload = function (e) {
       console.log("loadedede");
       const arrayBuffer = e.target.result;
       const byteArray = new Uint8Array(arrayBuffer);
-
-      const uuid = crypto.randomUUID()
-      window.open("/player?platform=upload&uuid=" + uuid, '_blank').focus();
-      const channel = new BroadcastChannel(uuid);
-      setTimeout(() => {
-        channel.postMessage(byteArray);
-      }, 1000)
+      demoData.setDemoData(byteArray)
+      route("/player?blabol")
+      // const uuid = crypto.randomUUID()
+      // window.open("/player?platform=upload&uuid=" + uuid, '_blank').focus();
+      // const channel = new BroadcastChannel(uuid);
+      // setTimeout(() => {
+      //   channel.postMessage(byteArray);
+      // }, 1000)
     };
     reader.readAsArrayBuffer(file);
   }

web/src/Player/PlayerApp.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";
 import './PlayerApp.css';
 import ErrorBoundary from "./Error.jsx";
 import MessageBus from "./MessageBus.js";
@@ -7,26 +7,26 @@ import Map2d from "./map/Map2d.jsx";
 import InfoPanel from "./panel/InfoPanel.jsx";
 import '../libs/wasm_exec.js';
 import './protos/Message_pb.js'
+import DemoContext from "../context.js"
 
 export function PlayerApp() {
+  const demoData = useContext(DemoContext);
+
   const [messageBus] = useState(new MessageBus())
   const [player] = useState(new Player(messageBus))
   const [serverHost] = useState(window.location.host.includes("localhost") ? "http://localhost:8080" : "");
   const [isWasmLoaded, setIsWasmLoaded] = useState(false)
 
   useEffect(() => {
-    console.log("run run run")
+    console.log("run run run", demoData)
 
     if (!isWasmLoaded) {
       loadWasm();
       return
     }
 
-    const urlParams = new URLSearchParams(window.location.search);
-    const channel = new BroadcastChannel(urlParams.get("uuid"));
-    channel.onmessage = (event) => {
-      console.log("received", event, isWasmLoaded)
-      window.testt(event.data, function (data) {
+    if (demoData.demoData) {
+      window.testt(demoData.demoData, async function  (data) {
         if (data instanceof Uint8Array) {
           const msg = proto.Message.deserializeBinary(data).toObject()
           messageBus.emit(msg)
@@ -35,7 +35,25 @@ export function PlayerApp() {
           messageBus.emit(JSON.parse(data))
         }
       })
-    };
+      demoData.setDemoData(null)
+    }
+
+    // const urlParams = new URLSearchParams(window.location.search);
+    // const channel = new BroadcastChannel(urlParams.get("uuid"));
+    // channel.onmessage = async (event) => {
+    //   console.log("received", event, isWasmLoaded)
+    //   await window.testt(event.data, function (data) {
+    //     if (data instanceof Uint8Array) {
+    //       const msg = proto.Message.deserializeBinary(data).toObject()
+    //       setMessage("123")
+    //       console.log("huha?")
+    //       messageBus.emit(msg)
+    //     } else {
+    //       console.log("[message] text data received from server, this is weird. We're using protobufs ?!?!?", data);
+    //       messageBus.emit(JSON.parse(data))
+    //     }
+    //   })
+    // };
     messageBus.listen([13], function (msg) {
       alert(msg.message)
       // window.testt(byteArray)
@@ -65,11 +83,3 @@ export function PlayerApp() {
       </div>
     </ErrorBoundary>);
 }
-
-async function parseDemo(event, messageBus) {
-  await parse(event, messageBus)
-}
-
-async function parse(event, messageBus) {
-  
-}

web/src/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+export const DemoContext = createContext("some context here?");
+
+export default DemoContext;