Merge branch 'master' of github.com:mozilla/mr-social-client into feature/ui-pass-for-hubs

package.json

@@ -26,6 +26,7 @@
     "aframe-physics-extras": "https://github.com/infinitelee/aframe-physics-extras#fix/physics-collider-crash",
     "aframe-physics-system": "https://github.com/infinitelee/aframe-physics-system#feature/shape-component",
     "aframe-rounded": "^1.0.3",
+    "aframe-slice9-component": "^1.0.0",
     "aframe-teleport-controls": "https://github.com/mozillareality/aframe-teleport-controls#hubs/master",
     "aframe-xr": "github:brianpeiris/aframe-xr#3162aed",
     "classnames": "^2.2.5",
@@ -39,7 +40,7 @@
     "moment": "^2.22.0",
     "moment-timezone": "^0.5.14",
     "moving-average": "^1.0.0",
-    "naf-janus-adapter": "^0.7.0",
+    "naf-janus-adapter": "^0.8.0",
     "networked-aframe": "https://github.com/mozillareality/networked-aframe#mr-social-client/master",
     "nipplejs": "https://github.com/mozillareality/nipplejs#mr-social-client/master",
     "phoenix": "^1.3.0",

src/components/block-button.js

+AFRAME.registerComponent("block-button", {
+  init() {
+    this.onClick = () => {
+      this.block(this.owner);
+    };
+    NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
+      this.owner = networkedEl.components.networked.data.owner;
+    });
+  },
+
+  play() {
+    this.el.addEventListener("click", this.onClick);
+  },
+
+  pause() {
+    this.el.removeEventListener("click", this.onClick);
+  },
+
+  block(clientId) {
+    NAF.connection.adapter.block(clientId);
+  },
+
+  // Currently unused
+  unblock(clientId) {
+    NAF.connection.adapter.unblock(clientId);
+    NAF.connection.entities.completeSync(clientId);
+  }
+});

src/components/text-button.js

+AFRAME.registerComponent("text-button", {
+  schema: {
+    haptic: { type: "selector" },
+    textHoverColor: { type: "string" },
+    textColor: { type: "string" },
+    backgroundHoverColor: { type: "string" },
+    backgroundColor: { type: "string" }
+  },
+
+  init() {
+    this.onHover = () => {
+      this.hovering = true;
+      this.updateButtonState();
+      this.emitHapticPulse();
+    };
+    this.onHoverOut = () => {
+      this.hovering = false;
+      this.updateButtonState();
+    };
+    this.onClick = () => {
+      this.emitHapticPulse();
+    };
+    this.textEl = this.el.parentEl.querySelector("[text]");
+  },
+
+  emitHapticPulse() {
+    if (this.data.haptic) {
+      this.data.haptic.emit("haptic_pulse", { intensity: "low" });
+    }
+  },
+
+  play() {
+    this.updateButtonState();
+    this.el.addEventListener("mouseover", this.onHover);
+    this.el.addEventListener("mouseout", this.onHoverOut);
+    this.el.addEventListener("click", this.onClick);
+  },
+
+  pause() {
+    this.el.removeEventListener("mouseover", this.onHover);
+    this.el.removeEventListener("mouseout", this.onHoverOut);
+    this.el.removeEventListener("click", this.onClick);
+  },
+
+  update() {
+    this.updateButtonState();
+  },
+
+  updateButtonState() {
+    const hovering = this.hovering;
+    this.el.setAttribute("slice9", "color", hovering ? this.data.backgroundHoverColor : this.data.backgroundColor);
+    this.textEl.setAttribute("text", "color", hovering ? this.data.textHoverColor : this.data.textColor);
+  }
+});

src/components/visible-while-frozen.js

+AFRAME.registerComponent("visible-while-frozen", {
+  init() {
+    this.onStateChange = evt => {
+      if (!evt.detail === "frozen") return;
+      this.el.setAttribute("visible", this.el.sceneEl.is("frozen"));
+    };
+    this.el.setAttribute("visible", this.el.sceneEl.is("frozen"));
+  },
+
+  play() {
+    this.el.sceneEl.addEventListener("stateadded", this.onStateChange);
+    this.el.sceneEl.addEventListener("stateremoved", this.onStateChange);
+  },
+
+  pause() {
+    this.el.sceneEl.removeEventListener("stateadded", this.onStateChange);
+    this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
+  }
+});
+
+AFRAME.registerComponent("ui-class-while-frozen", {
+  init() {
+    this.onStateChange = evt => {
+      if (!evt.detail === "frozen") return;
+      this.el.classList.toggle("ui", this.el.sceneEl.is("frozen"));
+    };
+    this.el.classList.toggle("ui", this.el.sceneEl.is("frozen"));
+  },
+
+  play() {
+    this.el.sceneEl.addEventListener("stateadded", this.onStateChange);
+    this.el.sceneEl.addEventListener("stateremoved", this.onStateChange);
+  },
+
+  pause() {
+    this.el.sceneEl.removeEventListener("stateadded", this.onStateChange);
+    this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
+  }
+});

src/hub.html

@@ -30,6 +30,7 @@
         >
 
         <a-assets>
+            <img id="tooltip"  src="./assets/hud/tooltip.9.png" >
             <img id="mute-off"  src="./assets/hud/mute_off.png" >
             <img id="mute-off-hover"  src="./assets/hud/mute_off-hover.png" >
             <img id="mute-on"  src="./assets/hud/mute_on.png" >
@@ -91,7 +92,36 @@
                         </template>
 
                         <template data-selector=".Chest">
-                            <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility></a-entity>
+                            <a-entity>
+                              <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility> </a-entity>
+                              <a-entity billboard>
+                                  <a-entity
+                                      block-button
+                                      visible-while-frozen
+                                      ui-class-while-frozen
+                                      text-button="haptic:#player-right-controller;
+                                                   textHoverColor: #fff;
+                                                   textColor: #fff;
+                                                   backgroundHoverColor: #ea4b54;
+                                                   backgroundColor: #fff;"
+                                      slice9="width: 0.45;
+                                                   height: 0.2;
+                                                   left: 53;
+                                                   top: 53;
+                                                   right: 10;
+                                                   bottom: 10;
+                                                   opacity: 1.3;
+                                                   src: #tooltip"
+                                      position="0 0 .35">
+                                  </a-entity>
+                                  <a-entity
+                                      visible-while-frozen
+                                      text="value:Block;
+                                            width:2.5;
+                                            align:center;"
+                                      position="0 0 0.36"></a-entity>
+                              </a-entity>
+                            </a-entity>
                         </template>
 
                         <template data-selector=".Head">

src/hub.js

@@ -16,6 +16,7 @@ import "aframe-input-mapping-component";
 import "aframe-billboard-component";
 import "aframe-rounded";
 import "webrtc-adapter";
+import "aframe-slice9-component";
 
 import trackpad_dpad4 from "./behaviours/trackpad-dpad4";
 import joystick_dpad4 from "./behaviours/joystick-dpad4";
@@ -51,6 +52,9 @@ import "./components/gltf-bundle";
 import "./components/hud-controller";
 import "./components/freeze-controller";
 import "./components/icon-button";
+import "./components/text-button";
+import "./components/block-button";
+import "./components/visible-while-frozen";
 import "./components/stats-plus";
 import "./components/networked-avatar";
 
@@ -246,6 +250,14 @@ const onReady = async () => {
       screenEntity.setAttribute("visible", sharingScreen);
     });
 
+    document.body.addEventListener("blocked", ev => {
+      NAF.connection.entities.removeEntitiesOfClient(ev.detail.clientId);
+    });
+
+    document.body.addEventListener("unblocked", ev => {
+      NAF.connection.entities.completeSync(ev.detail.clientId);
+    });
+
     if (!qsTruthy("offline")) {
       document.body.addEventListener("connected", () => {
         hubChannel.sendEntryEvent().then(() => {

yarn.lock

@@ -188,6 +188,10 @@ aframe-rounded@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/aframe-rounded/-/aframe-rounded-1.0.3.tgz#72c7d9c0ff02e94ee138bf217c284e187efa3cfb"
 
+aframe-slice9-component@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/aframe-slice9-component/-/aframe-slice9-component-1.0.0.tgz#fb0f8441dadd1e8b11cc24512ba7aa692d622be1"
+
 "aframe-teleport-controls@https://github.com/mozillareality/aframe-teleport-controls#hubs/master":
   version "0.3.2"
   resolved "https://github.com/mozillareality/aframe-teleport-controls#9e2ef7da57144c4a615eba40a945d4cfa105a092"
@@ -5396,9 +5400,9 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-naf-janus-adapter@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/naf-janus-adapter/-/naf-janus-adapter-0.7.0.tgz#00ced989bac9e073e32b74a5bbc1f41cc61db6ea"
+naf-janus-adapter@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/naf-janus-adapter/-/naf-janus-adapter-0.8.0.tgz#61fa7185c17437f9a33b9b97b1508eb9293b4f22"
   dependencies:
     debug "^3.1.0"
     minijanus "0.6.0"