Merge pull request #442 from mozilla/lazy-bots

Don't load bot recordings unless you are a bot

Merge pull request #442 from mozilla/lazy-bots
f360eb64 · Marshall Quander · GitHub · 30612da7 · 1697cbff · f360eb64
Unverified Commit f360eb64 authored 6 years ago by Marshall Quander Committed by GitHub 6 years ago
--- a/src/components/avatar-replay.js
+++ b/src/components/avatar-replay.js
-import botRecording from "../assets/avatars/bot-recording.json";
-
 // These controls are removed from the controller entities so that motion-capture-replayer is in full control of them.
 const controlsBlacklist = [
  "tracked-controls",
@@ -20,24 +18,30 @@ AFRAME.registerComponent("avatar-replay", {
  schema: {
    camera: { type: "selector" },
    leftController: { type: "selector" },
-    rightController: { type: "selector" }
+    rightController: { type: "selector" },
+    recordingUrl: { type: "string" }
  },
  init: function() {
-    const { camera, leftController, rightController } = this.data;
+    this.modelLoaded = new Promise(resolve => this.el.addEventListener("model-loaded", resolve));
+  },

+  update: function() {
+    const { camera, leftController, rightController, recordingUrl } = this.data;
+    const fetchRecording = fetch(recordingUrl).then(resp => resp.json());
    camera.setAttribute("motion-capture-replayer", { loop: true });
    this._setupController(leftController);
    this._setupController(rightController);

-    this.el.addEventListener("model-loaded", () => {
+    this.dataLoaded = Promise.all([fetchRecording, this.modelLoaded]).then(([recording]) => {
      const cameraReplayer = camera.components["motion-capture-replayer"];
-      cameraReplayer.startReplaying(botRecording.camera);
+      cameraReplayer.startReplaying(recording.camera);
      const leftControllerReplayer = leftController.components["motion-capture-replayer"];
-      leftControllerReplayer.startReplaying(botRecording.left);
+      leftControllerReplayer.startReplaying(recording.left);
      const rightControllerReplayer = rightController.components["motion-capture-replayer"];
-      rightControllerReplayer.startReplaying(botRecording.right);
+      rightControllerReplayer.startReplaying(recording.right);
    });
  },
+
  _setupController: function(controller) {
    controlsBlacklist.forEach(controlsComponent => controller.removeAttribute(controlsComponent));
    controller.setAttribute("visible", true);

--- a/src/hub.html
+++ b/src/hub.html
@@ -23,8 +23,6 @@
 </head>

 <body data-html-prefix="<%= HTML_PREFIX %>">
-    <audio id="bot-recording" loop muted crossorigin="anonymous" src="./assets/avatars/bot-recording.mp3"></audio>
-
    <audio id="test-tone">
        <source src="./assets/sfx/tone.webm" type="audio/webm"/>
        <source src="./assets/sfx/tone.mp3" type="audio/mpeg"/>

--- a/src/hub.js
+++ b/src/hub.js
@@ -336,15 +336,27 @@ const onReady = async () => {
        playerRig.setAttribute("avatar-replay", {
          camera: "#player-camera",
          leftController: "#player-left-controller",
-          rightController: "#player-right-controller"
+          rightController: "#player-right-controller",
+          recordingUrl: "assets/avatars/bot-recording.json"
        });
-        const audio = document.getElementById("bot-recording");
-        mediaStream.addTrack(audio.captureStream().getAudioTracks()[0]);
+
+        const audioEl = document.createElement("audio");
+        audioEl.loop = true;
+        audioEl.muted = true;
+        audioEl.crossorigin = "anonymous";
+        audioEl.src = "assets/avatars/bot-recording.mp3";
+        document.body.appendChild(audioEl);
+
        // Wait for runner script to interact with the page so that we can play audio.
-        await new Promise(resolve => {
+        const interacted = new Promise(resolve => {
          window.interacted = resolve;
        });
-        audio.play();
+        const canPlay = new Promise(resolve => {
+          audioEl.addEventListener("canplay", resolve);
+        });
+        await Promise.all([canPlay, interacted]);
+        mediaStream.addTrack(audioEl.captureStream().getAudioTracks()[0]);
+        audioEl.play();
      }

      if (mediaStream) {

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -223,6 +223,18 @@ const config = {
        to: "hub-preview.png"
      }
    ]),
+    new CopyWebpackPlugin([
+      {
+        from: "src/assets/avatars/bot-recording.json",
+        to: "assets/avatars/bot-recording.json"
+      }
+    ]),
+    new CopyWebpackPlugin([
+      {
+        from: "src/assets/avatars/bot-recording.mp3",
+        to: "assets/avatars/bot-recording.mp3"
+      }
+    ]),
    // Extract required css and add a content hash.
    new ExtractTextPlugin({
      filename: "assets/stylesheets/[name]-[contenthash].css",