[vue.auth.dialog] refactor + relayout audio status + added logout working icon that logout from 'voice' room + [lib.audio-manager] when calling kill() do not set volume to 0 because POP notifications will be then blocked

This commit is contained in:
xdrm-brackets 2018-04-06 17:02:40 +02:00
parent 19a9c39a5f
commit 2742fd818a
5 changed files with 81 additions and 32 deletions

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd">
<rect width="24" height="24"/>
<path fill="#FFFFFF" d="M1,0 C0.44771525,0 0,0.44771525 0,1 C-4.4408921e-16,10.3888407 7.61115925,18 17,18 C17.2652165,18 17.5195704,17.8946432 17.7071068,17.7071068 C17.8946432,17.5195704 18,17.2652165 18,17 L18,13.5 C18,12.9477153 17.5522847,12.5 17,12.5 C15.76,12.5 14.55,12.3 13.43,11.93 C13.08,11.82 12.69,11.9 12.41,12.18 L10.21,14.38 C7.38,12.94 5.07,10.62 3.62,7.79 L5.82,5.58 C6.1,5.31 6.18,4.92 6.07,4.57 C5.7,3.45 5.5,2.24 5.5,1 C5.5,0.44771525 5.05228475,0 4.5,0 M16.1213203,0.464466094 L14,2.58578644 L11.8786797,0.464466094 L10.4644661,1.87867966 L12.5857864,4 L10.4644661,6.12132034 L11.8786797,7.53553391 L14,5.41421356 L16.1213203,7.53553391 L17.5355339,6.12132034 L15.4142136,4 L17.5355339,1.87867966" transform="matrix(1 0 0 -1 3 21)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 930 B

View File

@ -369,9 +369,6 @@ export default class AudioManager{
/* (2) Stop recording */ /* (2) Stop recording */
this.recorder.stop(); this.recorder.stop();
/* (3) Volume 0 */
this.master.gain.setValueAtTime(0, this.ctx.currentTime);
} }

View File

@ -225,36 +225,73 @@
z-index: 100; z-index: 100;
& > div.status{ & > div.text-container{
flex: 0 1 100%;
flex: 1 1 50%;
display: flex; display: flex;
position: relative; position: relative;
height: 50%;
margin: 0; flex-flow: row wrap;
padding: 0 .5em;
color: #faa61a; & > div.status{
font-size: .9em; flex: 0 1 100%;
display: flex;
position: relative;
height: 50%;
margin: 0;
padding: 0 .5em;
color: #faa61a;
font-size: .9em;
flex-flow: row nowrap;
justify-items: space-between;
align-items: center;
}
& > div.room{
flex: 0 1 100%;
display: block;
position: relative;
height: 50%;
padding: 0 .9em;
color: #72767d;
font-size: .8em;
}
flex-flow: row nowrap;
align-items: center;
} }
& > div.room{ & > div.audio-close{
flex: 0 1 100%; flex: 0 0 calc( #{$header-height} - 1em );
display: block; display: block;
position: relative; position: relative;
height: 50%; height: calc( #{$header-height} - 1em );
padding: 0 .5em; margin: auto .5em;
color: #72767d; border-radius: 5px / 5px;
font-size: .8em;
background: url('/asset/svg/audio.close.svg') center center no-repeat;
background-size: auto 60%;
transition: background-color .1s ease-in-out;
cursor: pointer;
&:hover{
background-color: #24262a;
}
} }
// manage when valid state // manage when valid state
@ -263,8 +300,8 @@
&[data-connected='2']{ &[data-connected='2']{
display: flex; display: flex;
&[data-connected='1'] > div.status, &[data-connected='1'] > div.text-container > div.status,
&[data-connected='2'] > div.status{ &[data-connected='2'] > div.text-container > div.status{
color: #43b581; color: #43b581;
&:before{ &:before{
@ -272,11 +309,11 @@
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 1.4em; width: 1.5em;
height: 1em; height: 1em;
background: url('/asset/svg/voice.connected.svg') center center no-repeat; background: url('/asset/svg/voice.connected.svg') center center no-repeat;
background-size: auto 80%; background-size: auto 85%;
} }
} }

View File

@ -29,7 +29,9 @@ window.wscd = WebSocketClientDriver;
window.api = new APIClient('api.douscord.xdrm.io'); window.api = new APIClient('api.douscord.xdrm.io');
window.ws = new WebSocketClientDriver('ws.douscord.xdrm.io'); window.ws = new WebSocketClientDriver('ws.douscord.xdrm.io');
/* (6) Add audio manager */
window.AudioManager = new (require('./lib/audio-manager.js').default)();
gs.set('audioManager', window.AudioManager);
@ -63,8 +65,7 @@ Notification.requestPermission();
window.DEBUG_MOD = false; window.DEBUG_MOD = false;
// audio management
window.AudioManager = new (require('./lib/audio-manager.js').default)();

View File

@ -132,14 +132,22 @@
<div class='footer' :data-connected='gs.audio_conn'> <div class='footer' :data-connected='gs.audio_conn'>
<div class='status'> <div class='text-container'>
{{ gs.audio_conn === 0
? `Connecting...`
: ( gs.audio_conn === 1
? `Listening`
: `Voice Connected` ) }}</div>
<div class='room'>{{ gs.room.get('text') ? gs.room.get('text').name : '?' }} / {{ gs.auth.user.username }}</div> <!-- Audio connection status -->
<div class='status'>{{ gs.audio_conn === 0
? `Connecting...`
: ( gs.audio_conn === 1
? `Listening`
: `Voice Connected` ) }}</div>
<!-- Current room/user -->
<div class='room'>{{ gs.room.get('text') ? gs.room.get('text').name : '?' }} / {{ gs.auth.user.username }}</div>
</div>
<!-- Logout from current audio room -->
<div class='audio-close' @click='gs.room.nav(`voice`, null)'></div>
</div> </div>
</div> </div>