neale/vail
neale
/
vail
mirror of https://github.com/nealey/vail.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Display mute icon until we can make noise

This commit is contained in:
Neale Pickett 2020-05-21 18:53:51 -06:00
parent cd657b7149
commit 38514fbc84
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
static/index.html
View File

@ -59,7 +59,10 @@
<div class="mdl-card mdl-shadow--4dp input-methods"> <div class="mdl-card mdl-shadow--4dp input-methods">
<div class="mdl-card__title"> <div class="mdl-card__title">
<h2 class="mdl-card__title-text">Input</h2> <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>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect"> <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar"> <div class="mdl-tabs__tab-bar">

12
static/vail.css
View File

@ -34,6 +34,10 @@
width: 100%; width: 100%;
} }
.hidden {
visibility: none;
}
#errors { #errors {
color: rgba(127, 0, 0, .54); color: rgba(127, 0, 0, .54);
max-height: 5em; max-height: 5em;
@ -100,14 +104,15 @@ img {
#recv { #recv {
width: 3em; width: 3em;
height: 2em; height: 2em;
background-color: orange; line-height: 2em;
position: absolute; position: absolute;
right: 1em; right: 1em;
border-radius: 30%; border-radius: 30%;
display: none; text-align: center;
vertical-align: middle;
} }
#recv.rx { #recv.rx {
display: block; background-color: orange;
} }
.input-methods td { .input-methods td {
@ -138,3 +143,4 @@ img {
margin: 1px; margin: 1px;
padding: 0.4em; padding: 0.4em;
min-width: 4em; min-width: 4em;
}

6
static/vail.js
View File

@ -140,6 +140,12 @@ class Buzzer {
this.lowGain = this.create(lowFreq) this.lowGain = this.create(lowFreq)
this.highGain = this.create(highFreq) this.highGain = this.create(highFreq)
this.errorGain = this.create(errorFreq, "square") this.errorGain = this.create(errorFreq, "square")
this.ac.resume()
.then(() => {
document.querySelector("#muted").classList.add("hidden")
})
} }
create(frequency, type="sine") { create(frequency, type="sine") {