Begin prototyping watch hud with mute state indicator

public/assets/hud/watch.gltf

+{
+    "accessors" : [
+        {
+            "bufferView" : 0, 
+            "componentType" : 5121, 
+            "count" : 204, 
+            "max" : [
+                119
+            ], 
+            "min" : [
+                0
+            ], 
+            "type" : "SCALAR"
+        }, 
+        {
+            "bufferView" : 1, 
+            "componentType" : 5126, 
+            "count" : 120, 
+            "max" : [
+                0.10501318424940109, 
+                0.04724307730793953, 
+                0.10020249336957932
+            ], 
+            "min" : [
+                -0.10501328855752945, 
+                0.01861731894314289, 
+                -0.10663323104381561
+            ], 
+            "type" : "VEC3"
+        }, 
+        {
+            "bufferView" : 2, 
+            "componentType" : 5126, 
+            "count" : 120, 
+            "max" : [
+                0.9848077297210693, 
+                1.0, 
+                1.0
+            ], 
+            "min" : [
+                -0.9848077297210693, 
+                -1.0, 
+                -0.9396926164627075
+            ], 
+            "type" : "VEC3"
+        }
+    ], 
+    "asset" : {
+        "generator" : "Khronos Blender glTF 2.0 exporter", 
+        "version" : "2.0"
+    }, 
+    "bufferViews" : [
+        {
+            "buffer" : 0, 
+            "byteLength" : 204, 
+            "byteOffset" : 0, 
+            "target" : 34963
+        }, 
+        {
+            "buffer" : 0, 
+            "byteLength" : 1440, 
+            "byteOffset" : 204, 
+            "target" : 34962
+        }, 
+        {
+            "buffer" : 0, 
+            "byteLength" : 1440, 
+            "byteOffset" : 1644, 
+            "target" : 34962
+        }
+    ], 
+    "buffers" : [
+        {
+            "byteLength" : 3084, 
+            "uri" : "watch.bin"
+        }
+    ], 
+    "materials" : [
+        {
+            "name" : "Material.001", 
+            "pbrMetallicRoughness" : {
+                "baseColorFactor" : [
+                    0.6400000190734865, 
+                    0.6400000190734865, 
+                    0.6400000190734865, 
+                    1.0
+                ], 
+                "metallicFactor" : 0.0
+            }
+        }
+    ], 
+    "meshes" : [
+        {
+            "name" : "Cylinder.001", 
+            "primitives" : [
+                {
+                    "attributes" : {
+                        "NORMAL" : 2, 
+                        "POSITION" : 1
+                    }, 
+                    "indices" : 0, 
+                    "material" : 0
+                }
+            ]
+        }
+    ], 
+    "nodes" : [
+        {
+            "mesh" : 0, 
+            "name" : "Watch", 
+            "scale" : [
+                0.6932165622711182, 
+                0.6932165622711182, 
+                0.6932165622711182
+            ]
+        }
+    ], 
+    "scene" : 0, 
+    "scenes" : [
+        {
+            "name" : "Scene", 
+            "nodes" : [
+                0
+            ]
+        }
+    ]
+}

public/index.html

@@ -15,13 +15,14 @@
                      audio: true;
                      debug: true;
                      connectOnLoad: false"
-    mute-mic="eventSrc: #right-hand; toggleEvents: action_mute">
+    mute-mic="eventSrc: a-scene; toggleEvents: action_mute">
     <a-assets>
       <img id="grid" src="assets/grid.png" crossorigin="anonymous">
       <img id="sky" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg" crossorigin="anonymous" />
 
       <a-asset-item id="dodec-avatar-head" src="assets/avatars/dodec/DodecAvatarGLTF/DodecAvatar_Head.gltf"></a-asset-item>
 
+      <a-asset-item id="watch-model" src="assets/hud/watch.gltf"></a-asset-item>
 
       <a-asset-item id="rock-island" src="assets/environments/RockIslandTest/RockIsland.gltf"></a-asset-item>
 
@@ -69,27 +70,25 @@
 
         <a-entity
             id="left-hand"
-
-            vive-controls="hand: left"
-            oculus-touch-controls="hand: left"
-            daydream-controls
-            gearvr-controls
+            hand-controls="left"
 
             axis-dpad="centerZone: 1"
             teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; button: action_teleport_"
-            networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
+            networked="template:#hand-template;showLocalTemplate:false;"
+        >
+            <a-entity id="watch" gltf-model="assets/hud/watch.gltf" position="0 0.0015 0.147" rotation="3.5 0 0">
+                <a-circle mute-state-indicator="" position="0 0.023 0" rotation="-90 0 0" scale="0.04 0.04 0.04" material="color:#d8eece;shader:flat"></a-circle>
+            </a-entity>
+        </a-entity>
 
         <a-entity
             id="right-hand"
 
-            vive-controls="hand: right"
-            oculus-touch-controls="hand: right"
-            daydream-controls
-            gearvr-controls
+            hand-controls="right"
 
             axis-dpad
             teleport-controls="cameraRig: #player-rig; teleportOrigin: #head; hitEntity: #telepor-indicator; button: action_teleport_;"
-            networked="template:#hand-template;showLocalTemplate:true;"></a-entity>
+            networked="template:#hand-template;showLocalTemplate:false;"></a-entity>
     </a-entity>
 
     <a-entity class="head" gltf-model="#rock-island" position="0 0 0">

src/components/mute-state-indicator.js

+AFRAME.registerComponent("mute-state-indicator", {
+  schema: {},
+
+  init() {
+    this.onStateToggled = this.onStateToggled.bind(this);
+    this.updateMuteState();
+  },
+
+  play() {
+    this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+    this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+  },
+
+  pause() {
+    this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+    this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+  },
+
+  onStateToggled(e) {
+    if (!e.detail.state === "muted") return;
+    this.updateMuteState();
+  },
+
+  updateMuteState() {
+    this.el.setAttribute(
+      "material",
+      "color",
+      this.el.sceneEl.is("muted") ? "#ffd8ce" : "#d8eece"
+    );
+  }
+});

src/index.js

@@ -8,6 +8,7 @@ import "./components/mute-mic";
 import "./components/audio-feedback";
 import "./components/nametag-transform";
 import "./components/avatar-customization";
+import "./components/mute-state-indicator";
 
 import { generateName } from "./utils";