battleground_viewer/viewer.html

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <canvas style="position: absolute;top:0;bottom: 0;left: 0;right: 0;margin:auto;"></canvas>
    <p id="status_text"></p>
    <script>
    var collected = 0;
    var total_length = 0;
    var recording_bytes = new Uint8Array();
    var recording_available = false;
    var download_done = true;

    function get_recording_available() {
      return recording_available;
    }
    function get_recording_bytes() {
      return recording_bytes;
    }

    </script>

    <!-- Note the usage of `type=module` here as this is an ES6 module -->
    <script type="module">
      // Use ES module import syntax to import functionality from the module
      // that we have compiled.
      //
      // Note that the `default` import is an initialization function which
      // will "boot" the module and make it ready to use. Currently browsers
      // don't support natively imported WebAssembly as an ES module, but
      // eventually the manual initialization won't be required!
      import init from './pkg/web.js';

      export async function run() {
        // First up we need to actually load the wasm file, so we use the
        // default export to inform it where the wasm file is located on the
        // server, and then we wait on the returned promise to wait for the
        // wasm to be loaded.
        // It may look like this: `await init('./pkg/without_a_bundler_bg.wasm');`,
        // but there is also a handy default inside `init` function, which uses
        // `import.meta` to locate the wasm file relatively to js file
        //
        // Note that instead of a string here you can also pass in an instance
        // of `WebAssembly.Module` which allows you to compile your own module.
        // Also note that the promise, when resolved, yields the wasm module's
        // exports which is the same as importing the `*_bg` module in other
        // modes
        await init('./pkg/web_bg.wasm');
      }
      // Expose run in the window for later launching.
      window.run_start = run;
    </script>

    <script>

      let launch_viewer = () => {
        // If the module hasn't been processed yet, run_start doesn't exist, so here we defer to
        // later if it is not present.
        if (!download_done) {
          setTimeout(launch_viewer, 100);
          return;
        }
        if (window.run_start === undefined) {
          setTimeout(launch_viewer, 100);
        } else {
          window.run_start();
        }
      };
      const urlParams = new URLSearchParams(window.location.search);
      const recording_url = urlParams.get('url');
      if (recording_url) {
        fetch(recording_url)
        .then((response) => {
          // Check if it was ok, else throw an error to let catch handle it.
          if (!response.ok) {
              throw new Error(`${response.status}: ${response.statusText} for ${response.url}`);
          }
          download_done = false;

          const reader = response.body.getReader();
          total_length = response.headers.get('Content-Length');
          return new ReadableStream({
            start(controller) {
              return pump();
              function pump() {
                return reader.read().then(({ done, value }) => {
                  collected += value.length;
                  console.log(collected, total_length);
                  document.getElementById("status_text").innerHTML = `Downloading recording: ${collected}/${total_length}  (${((collected / total_length) * 100.0).toFixed(2)} %)`;

                  // Couldn't really figure out how to elegantly collect bytes using streams, so we use this here.
                  // Odd way of concatenating, but seems to be the only way.
                  var combined = new Uint8Array(recording_bytes.length + value.length);
                  combined.set(recording_bytes);
                  combined.set(value, recording_bytes.length);
                  recording_bytes = combined;
                  if (combined.length == total_length) {
                    recording_available = true;
                    download_done = true;
                    controller.close();
                    return;
                  }

                  // When no more data needs to be consumed, close the stream
                  if (done) {
                    // never seem to get here? Possibly because the stream never completes?
                    console.log("done");
                    recording_available = true;
                    download_done = true;
                    controller.close();
                    return;
                  }
                  // Enqueue the next data chunk into our target stream
                  controller.enqueue(value);
                  return pump();
                });
              }
            }
          })
        })
        .then((foo) => {
          console.log(foo);
          // completed the download, launch the viewer.
          launch_viewer();
        })
        .catch((err) => {
          // something bad happened, show the error.
          document.getElementById("status_text").innerHTML = `${err}`;
          console.error(err)
        });
      } else {
        // no recording url.
        launch_viewer();
      }
  </script>
  </body>
</html>