[vue.auth.dialog] added audio status (connecting, listening, voice_connected) bound from [lib.audio-manager]
This commit is contained in:
parent
3d557a8193
commit
19a9c39a5f
|
@ -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 |
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -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();
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue