[vue.auth.dialog] added audio status (connecting, listening, voice_connected) bound from [lib.audio-manager]
This commit is contained in:
xdrm-brackets
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();
|
||||
|
||||
gs.get.audio_conn = 2; // voice connected
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -292,6 +293,7 @@ export default class AudioManager{
|
|||
|
||||
/* (1) Create websocket connection */
|
||||
this.ws = new WebSocket(_addr);
|
||||
gs.get.audio_conn = 0; // connecting
|
||||
|
||||
/* (2) Manage websocket responses */
|
||||
this.ws.onmessage = function(_msg){
|
||||
|
|
@ -313,8 +315,8 @@ export default class AudioManager{
|
|||
}.bind(this);
|
||||
|
||||
/* (3) Debug */
|
||||
this.ws.onopen = () => console.warn('[audio] websocket connected');
|
||||
this.ws.onclose = () => console.warn('[audio] websocket closed');
|
||||
this.ws.onopen = () => ( gs.get.audio_conn = 1 ); // listening
|
||||
this.ws.onclose = () => ( gs.get.audio_conn = null ); // disconnected
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ $side-menu-width: 14em;
|
|||
$menu-bg: #202225;
|
||||
$dialog-header-bg: #2f3136;
|
||||
$dialog-bg: #2f3136;
|
||||
$audio-bg: #2a2c31;
|
||||
$container-bg: #36393e;
|
||||
$header-bg: #36393f;
|
||||
$main: #7289da;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
top: calc( #{$header-height} + #{$bb-offset} );
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc( 100% - #{$header-height} - #{$bb-offset} );
|
||||
height: calc( 100% - #{$header-height} - #{$bb-offset} - #{$header-height});
|
||||
|
||||
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 = '' ) );
|
||||
|
||||
/* (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 */
|
||||
Notification.requestPermission();
|
||||
|
|
|
|||
|
|
@ -129,6 +129,19 @@
|
|||
|
||||
</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>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue