From 226d35a1c39105751e81265403acdd799aca2719 Mon Sep 17 00:00:00 2001
From: Dominick D'Aniello <netpro2k@gmail.com>
Date: Fri, 8 Dec 2017 15:59:45 -0800
Subject: [PATCH] Add quick and dirty 2d mute state indicator
---
src/assets/hud/muted.png | Bin 0 -> 713 bytes
src/components/2d-mute-state-indicator.css | 12 +++++++
src/components/2d-mute-state-indicator.js | 38 +++++++++++++++++++++
src/room.js | 1 +
templates/room.hbs | 1 +
5 files changed, 52 insertions(+)
create mode 100644 src/assets/hud/muted.png
create mode 100644 src/components/2d-mute-state-indicator.css
create mode 100644 src/components/2d-mute-state-indicator.js
diff --git a/src/assets/hud/muted.png b/src/assets/hud/muted.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a15a9ea9e9125e04739214c0fad7c0226d5eca2
GIT binary patch
literal 713
zcmV;)0yh1LP)<h;3K|Lk000e1NJLTq002k;002k`1ONa4|Kxkj0007zNkl<ZcmeI#
zJxEny9LMqJLKY1bEky(trKv<gL(o`67!JLty;!s~hBgF2YX%jyHZ>HNE`<p}TSPR9
zN(40&k-6jxXhl@Yz4u7p7XQ%0t@FQ!|I=f``Ti!K=YSu4JLvxJ^78U1&_RiDs#N&E
zJr3e*b6B>WQNVAQwxt5?=Ldi4JNv?e8W`ZH^40M<KB+A%sDVd7HHB1Ql(dGzfrLXU
zsROO{aG(JIg;YYT7!K4)RV9t1HD(88Ayv^ThXm=Q3G{-3G*S~2F+oB~bW%)^Mrvjv
z0?0&)0Mbd55kLy5Qzh9!%DQw?T#!cE#$*JLi4*~(lcpkoOr!`PM|Uczg(*8IJjo6U
zPl^W;5~-x=*dWJ(PKpmoBegR9Z$MR~M(=zM6w+4jqfJO<8|X9A4)6ROwIx2u+b*OT
z8|XFC5%2siWFmDTy|jTIB3<^*4?rf;Riu&)bOC7?|7Iu?=><}s4YU)Gn(=?Nztv4@
z0;Coj$nh5G7XHoNx=EY)2mrjoSwR<(Dr~{OYpwem*R)7FZwIaBE7EfcHTUfl8KX>v
zHzW$_3#;rP$0b1OPk+ZLq_emXpcUSq!CnI?*t=}E_i3(Bu#;>c$2orQ8I5+54dl4t
zk><I^`oBKg2Og;_EJ$_}zcPdLu)%v~BWHL_0y@bKa`ci=+bknI<q0Fq;HQ&}AjclY
z&@+%6S+|mY<^jDqiY(|P9i(p^*O?`)Pm4eFr*)DQBx~Rhw|UP`{KmP%VU{D$oytaX
zShvRGti{!=M<E3UIsN~6ofI3SlcIwhCv{R>kmH0-iVD(6@j;H`BuH>SCP*g@vMdHj
v-!T&5!~yB+=7Dewpg7AxIVcC^przg~#hg<!eyoJF00000NkvXXu0mjf^b9-u
literal 0
HcmV?d00001
diff --git a/src/components/2d-mute-state-indicator.css b/src/components/2d-mute-state-indicator.css
new file mode 100644
index 000000000..9713edb2e
--- /dev/null
+++ b/src/components/2d-mute-state-indicator.css
@@ -0,0 +1,12 @@
+: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);
+}
diff --git a/src/components/2d-mute-state-indicator.js b/src/components/2d-mute-state-indicator.js
new file mode 100644
index 000000000..95df937d8
--- /dev/null
+++ b/src/components/2d-mute-state-indicator.js
@@ -0,0 +1,38 @@
+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);
+ }
+});
diff --git a/src/room.js b/src/room.js
index 4124d5fd7..f5b3a8ec9 100644
--- a/src/room.js
+++ b/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";
diff --git a/templates/room.hbs b/templates/room.hbs
index 5a8696621..74629e56a 100644
--- a/templates/room.hbs
+++ b/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>
--
GitLab