From 8fbbfe49cfef67cf0087336c7871d8a5b4e92159 Mon Sep 17 00:00:00 2001
From: joni <johnfshaughnessy@gmail.com>
Date: Wed, 7 Mar 2018 15:46:15 -0800
Subject: [PATCH] Colorize the mic icon in the 2d hud
---
src/components/2d-mute-state-indicator.css | 15 +++++----------
src/components/2d-mute-state-indicator.js | 9 +++++++++
2 files changed, 14 insertions(+), 10 deletions(-)
diff --git a/src/components/2d-mute-state-indicator.css b/src/components/2d-mute-state-indicator.css
index ad5aae62f..a61929355 100644
--- a/src/components/2d-mute-state-indicator.css
+++ b/src/components/2d-mute-state-indicator.css
@@ -1,17 +1,12 @@
:local(.indicator) {
- display:flex;
- /* position: absolute; */
- /* top: 10px; */
- /* left: calc(50vw - 16px); */
- /* width: 32px; */
- /* height: 32px; */
width: 48px;
height: 48px;
- background-size: 100%;
- background-image: url(../assets/hud/unmuted.png);
- background-repeat: no-repeat;
+ mask: url(../assets/hud/unmuted.png);
+ mask-size: 48px;
+ background-color: white;
}
:local(.indicator.muted) {
- background-image: url(../assets/hud/muted.png);
+ mask: url(../assets/hud/muted.png);
+ mask-size: 48px;
}
diff --git a/src/components/2d-mute-state-indicator.js b/src/components/2d-mute-state-indicator.js
index f4997c066..81cbb4011 100644
--- a/src/components/2d-mute-state-indicator.js
+++ b/src/components/2d-mute-state-indicator.js
@@ -21,6 +21,11 @@ AFRAME.registerComponent("2d-mute-state-indicator", {
this.onMouseOut = () => this.muteIcon.classList.toggle(styles.muted, this.el.sceneEl.is("muted"));
this.onClick = () => this.el.emit("action_mute");
+
+ this.onMicAudio = e => {
+ const red = 1.0 - e.detail.volume / 10.0;
+ this.muteIcon.style["background-color"] = `rgb(${red * 255},255,255)`;
+ };
},
play() {
@@ -30,6 +35,8 @@ AFRAME.registerComponent("2d-mute-state-indicator", {
this.muteIcon.addEventListener("mouseover", this.onMouseOver);
this.muteIcon.addEventListener("mouseout", this.onMouseOut);
this.muteIcon.addEventListener("click", this.onClick);
+
+ this.el.sceneEl.addEventListener("micAudio", this.onMicAudio);
},
pause() {
@@ -39,6 +46,8 @@ AFRAME.registerComponent("2d-mute-state-indicator", {
this.muteIcon.removeEventListener("mouseover", this.onMouseOver);
this.muteIcon.removeEventListener("mouseout", this.onMouseOut);
this.muteIcon.removeEventListener("click", this.onClick);
+
+ this.el.sceneEl.removeEventListener("micAudio", this.onMicAudio);
},
onStateToggled(e) {
--
GitLab