diff --git a/public/assets/hud/watch.glb b/public/assets/hud/watch.glb
new file mode 100644
index 0000000000000000000000000000000000000000..4d6d9ed1673bc650558091c521edf13b086073a9
Binary files /dev/null and b/public/assets/hud/watch.glb differ
diff --git a/src/components/bone-mute-state-indicator.js b/src/components/bone-mute-state-indicator.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c6dc5913e971a3a3981f2d8af7ed3e151dcf0e8
--- /dev/null
+++ b/src/components/bone-mute-state-indicator.js
@@ -0,0 +1,49 @@
+/**
+ * Toggles the position of 2 bones into "on" and "off" positions to indicate mute state.
+ */
+AFRAME.registerComponent("bone-mute-state-indicator", {
+ schema: {
+ unmutedBoneName: { default: "Watch_Joint_MicON" },
+ mutedBoneName: { default: "Watch_Joint_Muted" },
+ onPos: { default: 0.81 },
+ offPos: { default: 0.5 }
+ },
+
+ init() {
+ this.onStateToggled = this.onStateToggled.bind(this);
+ this.el.addEventListener("model-loaded", () => {
+ this.unmutedBone = this.el.object3D.getObjectByName(
+ this.data.unmutedBoneName
+ );
+ this.mutedBone = this.el.object3D.getObjectByName(
+ this.data.mutedBoneName
+ );
+ console.log(this.unmutedBone, this.mutedBone);
+ this.modelLoaded = true;
+
+ 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() {
+ if (!this.modelLoaded) return;
+ const muted = this.el.sceneEl.is("muted");
+ this.mutedBone.position.y = muted ? this.data.onPos : this.data.offPos;
+ this.unmutedBone.position.y = !muted ? this.data.onPos : this.data.offPos;
+ }
+});
diff --git a/src/components/mute-state-indicator.js b/src/components/mute-state-indicator.js
deleted file mode 100644
index 3d1597f93f2ca1df9fd65613c451353bea620121..0000000000000000000000000000000000000000
--- a/src/components/mute-state-indicator.js
+++ /dev/null
@@ -1,31 +0,0 @@
-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.removeEventListener("stateadded", this.onStateToggled);
- this.el.sceneEl.removeEventListener("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"
- );
- }
-});
diff --git a/src/room.js b/src/room.js
index 6b5d8e9f59a88b060ce6ffe5975006829e671c85..2330ffd76d063980a44352fb51430ea34ec35845 100644
--- a/src/room.js
+++ b/src/room.js
@@ -14,7 +14,7 @@ import "./components/axis-dpad";
import "./components/mute-mic";
import "./components/audio-feedback";
import "./components/nametag-transform";
-import "./components/mute-state-indicator";
+import "./components/bone-mute-state-indicator";
import "./components/virtual-gamepad-controls";
import "./components/body-controller";
import "./components/hand-controls2";
diff --git a/templates/room.hbs b/templates/room.hbs
index 1d7e5a62b853ece12a680e30f8a2a90735458fdc..babb310dfd940ed0ae9d957be7a82dd8cf6af648 100644
--- a/templates/room.hbs
+++ b/templates/room.hbs
@@ -1,6 +1,7 @@
<html>
<head>
+ <meta charset="utf-8">
<title>Mozilla Mixed Reality Social Client</title>
{{#if config.originTrialToken }}
@@ -47,7 +48,7 @@
<a-asset-item id="bot-left-hand-mesh" response-type="arraybuffer" src="{{asset "assets/avatars/Bot_LeftHand_Mesh.glb" }}"></a-asset-item>
<a-asset-item id="bot-right-hand-mesh" response-type="arraybuffer" src="{{asset "assets/avatars/Bot_RightHand_Mesh.glb"}}"></a-asset-item>
- <a-asset-item id="watch-model" response-type="arraybuffer" src="{{asset "assets/hud/watch.gltf"}}"></a-asset-item>
+ <a-asset-item id="watch-model" response-type="arraybuffer" src="{{asset "assets/hud/watch.glb"}}"></a-asset-item>
<a-asset-item id="meeting-space1-mesh" response-type="arraybuffer" src="{{asset "assets/environments/MeetingSpace1_mesh.glb"}}"></a-asset-item>
<a-asset-item id="outdoor-facade-mesh" response-type="arraybuffer" src="{{asset "assets/environments/OutdoorFacade_mesh.glb"}}"></a-asset-item>
@@ -135,9 +136,9 @@
<a-entity
id="body"
body-controller="eyeNeckOffset: 0 -0.11 0.09; neckHeight: 0.05"
- networked="template: #body-template;"
+ networked="template: #body-template;"
></a-entity>
-
+
<a-entity
id="nametag"
networked="template: #nametag-template; showLocalTemplate: false;"
@@ -154,17 +155,10 @@
<a-entity
id="watch"
cached-gltf-model="#watch-model"
- position="0 0.0015 0.147"
- rotation="3.5 0 0"
- >
- <a-circle
- mute-state-indicator
- scale-audio-feedback="analyserSrc: #head; minScale: 0.035; maxScale: 0.08;"
- position="0 0.023 0"
- rotation="-90 0 0"
- scale="0.04 0.04 0.04"
- material="color: #d8eece; shader: flat;"
- ></a-circle>
+ bone-mute-state-indicator
+ position="-0.003 0.009 0.085"
+ rotation="-79.12547150756669 -160.1417037390651 -100.1530225888679"
+ scale="1.5 1.5 1.5">
</a-entity>
</a-entity>