Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Microphone universal mute ui #46

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Microphone universal mute ui #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4873572
audio-out mute. [WIP]
FotoVerite Oct 16, 2016
7bbfe79
Merge branch 'master' of https://github.com/Mikeal/roll-call into mic…
FotoVerite Oct 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions index.html
View file
Open in desktop
Expand Up @@ -8,6 +8,9 @@
<link rel="stylesheet" href="vendor/semantic.min.css" />
<script src="vendor/semantic.min.js"></script>
<style>
.hide {
display:none;
}
.join-button {
position: absolute;
top: 0.78575em;
Expand All @@ -18,6 +21,8 @@
top: 0.4em;
right: 0.5em;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
.main.container {
margin-top: 55px;
}
Expand Down
25 changes: 20 additions & 5 deletions index.js
View file
Open in desktop
Expand Up @@ -282,7 +282,7 @@ function joinRoom (room) {
if (err) return console.error(err)
if (!audioStream) return console.error('no audio')
let output = waudio(audioStream.clone())
let myelem = views.remoteAudio(storage)
let myelem = views.remoteAudio(storage, storage.get('username'), 'me')
connectAudio(myelem, output)

getRtcConfig((err, rtcConfig) => {
Expand Down Expand Up @@ -388,24 +388,39 @@ function startLoop () {
function connectAudio (element, audio) {
let analyser = context.createAnalyser()
let volumeSelector = 'input[type=range]'
let muteSelector = 'input[type=checkbox]'
let muteSelector = '.audio-in input[type=checkbox]'
let muteElement = element.querySelector(muteSelector)

let audioOutSelector = '.audio-out input[type=checkbox]'
let audioOutElement = element.querySelector(audioOutSelector)
element.userGain = 1

$(muteElement).checkbox('toggle').click(c => {
let label = c.target.parentNode.querySelector('label')
if (label.children[0].classList.contains('mute')) {
label.innerHTML = '<i class=\'icon unmute\'></i>'
label.innerHTML = '<i class=\'icon unmute grow\'></i>'
element.querySelector(volumeSelector).disabled = false
audio.volume(element.userGain)
} else {
label.innerHTML = '<i class=\'icon mute red\'></i>'
label.innerHTML = '<i class=\'icon mute red grow\'></i>'
element.querySelector(volumeSelector).disabled = true
audio.volume(0)
}
})

$(audioOutElement).checkbox('toggle').click(c => {
let label = c.target.parentNode.querySelector('label')
if (label.children[0].classList.contains('off')) {
label.innerHTML = '<i class=\'icon volume up grow\'></i>'
masterSoundOutput.volume(element.userGain)
} else {
label.innerHTML = '<i class=\'icon volume off red grow\'></i>'
if($('#mute-audio-in-me').is(':checked')) {
$('#mute-audio-in-me').click()
}
masterSoundOutput.volume(0)
}
})

$(element.querySelector(volumeSelector)).change(function () {
audio.volume(this.value)
element.userGain = this.value
Expand Down
10 changes: 7 additions & 3 deletions lib/views.js
View file
Open in desktop
Expand Up @@ -31,9 +31,13 @@ const remoteAudioView = funky `
<div class="extra content">
<div contenteditable="true" class="header person-name">${item => item.username}</div>
<div class="volume">
<div class="checkbox">
<input type="checkbox" name="mute" id='mute' class='mute-checkbox'>
<label for='mute'><i class='unmute icon'></i></label>
<div class="checkbox audio-in">
<input type="checkbox" name="mute" id='mute-audio-in-${item => item.key}' class='mute-checkbox'>
<label for='mute-audio-in-${item => item.key}'><i class='unmute icon grow'></i></label>
</div>
<div class="checkbox audio-out ${item => item.key === 'me' ? '' : 'hide'}">
<input type="checkbox" name="mute-audio-out-${item => item.key}" id="mute-audio-out-${item => item.key}" class='mute-checkbox'>
<label for='mute-audio-out-${item => item.key}'><i class='volume up icon grow'></i></label>
</div>
<input type="range" min="0" max="2" step=".05" />
</div>
Expand Down