Add quick and dirty 2d mute state indicator

src/components/2d-mute-state-indicator.css

+:local(.indicator) {
+    position: absolute;
+    top: 10px;
+    left: calc(50vw - 16px);
+    width: 32px;
+    height: 32px;
+    background-size: 100%;
+}
+
+:local(.indicator.muted) {
+    background-image: url(../assets/hud/muted.png);
+}

src/components/2d-mute-state-indicator.js

+import styles from "./2d-mute-state-indicator.css";
+/**
+ * Shows a 2d incicator on screen reflecting mute state
+ * @TODO this probably shouldnt be an aframe component but baring any other 2d UI handling it feels cleaner here than jsut free-flaoting
+ */
+AFRAME.registerComponent("2d-mute-state-indicator", {
+  schema: {},
+
+  init() {
+    this.onStateToggled = this.onStateToggled.bind(this);
+
+    this.muteIcon = document.createElement("div");
+    this.muteIcon.classList.add(styles.indicator);
+    document.body.appendChild(this.muteIcon);
+
+    this.updateMuteState();
+  },
+
+  play() {
+    this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
+    this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
+  },
+
+  pause() {
+    this.el.sceneEl.removeEventListener("stateadded", this.onStateToggled);
+    this.el.sceneEl.removeEventListener("stateremoved", this.onStateToggled);
+  },
+
+  onStateToggled(e) {
+    if (!e.detail.state === "muted") return;
+    this.updateMuteState();
+  },
+
+  updateMuteState() {
+    const muted = this.el.sceneEl.is("muted");
+    this.muteIcon.classList.toggle(styles.muted, muted);
+  }
+});

src/room.js

@@ -21,6 +21,7 @@ import "./components/mute-mic";
 import "./components/audio-feedback";
 import "./components/nametag-transform";
 import "./components/bone-mute-state-indicator";
+import "./components/2d-mute-state-indicator";
 import "./components/virtual-gamepad-controls";
 import "./components/body-controller";
 import "./components/hand-controls2";

templates/room.hbs

@@ -40,6 +40,7 @@
                          onConnect: App.onConnect;
                          connectOnLoad: false;"
         mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
+        2d-mute-state-indicator
         light="defaultLightsEnabled: false">
 
         <a-assets>