[vue.auth.dialog] added audio status (connecting, listening, voice_connected) bound from [lib.audio-manager]

This commit is contained in:
xdrm-brackets 2018-04-06 16:44:15 +02:00
parent 3d557a8193
commit 19a9c39a5f
6 changed files with 120 additions and 4 deletions

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="12px" viewBox="0 0 11 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.1 (15681) - http://www.bohemiancoding.com/sketch -->
<title>icon-ping-3</title>
<desc>Created with Sketch.</desc>
<defs/>
<g id="General-Playground" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Desktop-HD---Channels" sketch:type="MSArtboardGroup" transform="translate(-498.000000, -887.000000)" fill="#43B581">
<g id="//-Channels" sketch:type="MSLayerGroup" transform="translate(488.000000, 0.000000)">
<g id="=-User-Menu" transform="translate(0.000000, 873.000000)" sketch:type="MSShapeGroup">
<g id="=-Voice-Status" transform="translate(1.000000, 0.000000)">
<g id="icon-ping-3" transform="translate(9.000000, 14.000000)">
<rect id="Rectangle-1668" x="8" y="0" width="3" height="12" rx="1"/>
<rect id="Rectangle-1668" x="4" y="4" width="3" height="8" rx="1"/>
<rect id="Rectangle-1668" x="0" y="8" width="3" height="4" rx="1"/>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -177,6 +177,7 @@ export default class AudioManager{
---------------------------------------------------------*/ ---------------------------------------------------------*/
this.linkFilters(); this.linkFilters();
gs.get.audio_conn = 2; // voice connected
} }
@ -292,6 +293,7 @@ export default class AudioManager{
/* (1) Create websocket connection */ /* (1) Create websocket connection */
this.ws = new WebSocket(_addr); this.ws = new WebSocket(_addr);
gs.get.audio_conn = 0; // connecting
/* (2) Manage websocket responses */ /* (2) Manage websocket responses */
this.ws.onmessage = function(_msg){ this.ws.onmessage = function(_msg){
@ -313,8 +315,8 @@ export default class AudioManager{
}.bind(this); }.bind(this);
/* (3) Debug */ /* (3) Debug */
this.ws.onopen = () => console.warn('[audio] websocket connected'); this.ws.onopen = () => ( gs.get.audio_conn = 1 ); // listening
this.ws.onclose = () => console.warn('[audio] websocket closed'); this.ws.onclose = () => ( gs.get.audio_conn = null ); // disconnected
} }

View File

@ -10,6 +10,7 @@ $side-menu-width: 14em;
$menu-bg: #202225; $menu-bg: #202225;
$dialog-header-bg: #2f3136; $dialog-header-bg: #2f3136;
$dialog-bg: #2f3136; $dialog-bg: #2f3136;
$audio-bg: #2a2c31;
$container-bg: #36393e; $container-bg: #36393e;
$header-bg: #36393f; $header-bg: #36393f;
$main: #7289da; $main: #7289da;

View File

@ -49,7 +49,7 @@
top: calc( #{$header-height} + #{$bb-offset} ); top: calc( #{$header-height} + #{$bb-offset} );
left: 0; left: 0;
width: 100%; width: 100%;
height: calc( 100% - #{$header-height} - #{$bb-offset} ); height: calc( 100% - #{$header-height} - #{$bb-offset} - #{$header-height});
background-color: $dialog-bg; background-color: $dialog-bg;
@ -206,4 +206,81 @@
} }
/* (4) Container FOOTER -> audio status */
& > div.footer{
display: none;
position: absolute;
top: calc( 100% - #{$header-height} );
left: 0;
width: 100%;
height: $header-height;
background-color: $audio-bg;
color: #72767d;
flex-flow: row wrap;
z-index: 100;
& > div.status{
flex: 0 1 100%;
display: flex;
position: relative;
height: 50%;
margin: 0;
padding: 0 .5em;
color: #faa61a;
font-size: .9em;
flex-flow: row nowrap;
align-items: center;
}
& > div.room{
flex: 0 1 100%;
display: block;
position: relative;
height: 50%;
padding: 0 .5em;
color: #72767d;
font-size: .8em;
}
// manage when valid state
&[data-connected='0'],
&[data-connected='1'],
&[data-connected='2']{
display: flex;
&[data-connected='1'] > div.status,
&[data-connected='2'] > div.status{
color: #43b581;
&:before{
content: '';
display: inline-block;
position: relative;
width: 1.4em;
height: 1em;
background: url('/asset/svg/voice.connected.svg') center center no-repeat;
background-size: auto 80%;
}
}
}
}
} }

View File

@ -53,7 +53,8 @@ gs.set('router', new VueRouter({
gs.set('refresh', () => ( document.location = '' ) ); gs.set('refresh', () => ( document.location = '' ) );
/* (6) Connection status */ /* (6) Connection status */
gs.set('connection', 1); // null -> normal, 0 -> offline, 1 -> connecting, 2 -> online gs.set('connection', 1); // null -> normal, 0 -> offline, 1 -> connecting, 2 -> online
gs.set('audio_conn', null); // null -> normal, 0 -> connecting, 1 -> listening, 2 -> sharing
/* (7) Ask for permission API */ /* (7) Ask for permission API */
Notification.requestPermission(); Notification.requestPermission();

View File

@ -129,6 +129,19 @@
</div> </div>
<div class='footer' :data-connected='gs.audio_conn'>
<div class='status'>
{{ 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>
</div>
</div> </div>