From 38514fbc84a5968b0b05389be56ae4ee526ee9f1 Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Thu, 21 May 2020 18:53:51 -0600
Subject: [PATCH] Display mute icon until we can make noise

---
 static/index.html |  5 ++++-
 static/vail.css   | 12 +++++++++---
 static/vail.js    |  6 ++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/static/index.html b/static/index.html
index d2de6a4..f2c89c3 100644
--- a/static/index.html
+++ b/static/index.html
@@ -59,7 +59,10 @@
 					<div class="mdl-card mdl-shadow--4dp input-methods">
 						<div class="mdl-card__title">
 							<h2 class="mdl-card__title-text">Input</h2>
-							<div id="recv"><!-- This is a little light that turns on when someone's sending --></div>
+							<div id="recv">
+								<!-- This div appears as a little light that turns on when someone's sending -->
+								<i class="material-icons" id="muted">volume_off</i>
+							</div>
 						</div>
 						<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
 							<div class="mdl-tabs__tab-bar">
diff --git a/static/vail.css b/static/vail.css
index 830d37d..c0ae502 100644
--- a/static/vail.css
+++ b/static/vail.css
@@ -34,6 +34,10 @@
   width: 100%;
 }
 
+.hidden {
+	visibility: none;
+}
+
 #errors {
     color: rgba(127, 0, 0, .54);
     max-height: 5em;
@@ -100,14 +104,15 @@ img {
 #recv {
 	width: 3em;
 	height: 2em;
-	background-color: orange;
+	line-height: 2em;
 	position: absolute;
 	right: 1em;
 	border-radius: 30%;
-	display: none;
+	text-align: center;
+	vertical-align: middle;
 }
 #recv.rx {
-	display: block;
+	background-color: orange;
 }
 
 .input-methods td {
@@ -138,3 +143,4 @@ img {
 	margin: 1px;
 	padding: 0.4em;
 	min-width: 4em;
+}
diff --git a/static/vail.js b/static/vail.js
index 5e8b387..e937508 100644
--- a/static/vail.js
+++ b/static/vail.js
@@ -140,6 +140,12 @@ class Buzzer {
 		this.lowGain = this.create(lowFreq)
 		this.highGain = this.create(highFreq)
 		this.errorGain = this.create(errorFreq, "square")
+
+		this.ac.resume()
+		.then(() => {
+			document.querySelector("#muted").classList.add("hidden")
+		})
+
 	}
 
 	create(frequency, type="sine") {