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

public_html/asset/svg/voice.connected.svg

@@ -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>

webpack/lib/audio-manager.js

@@ -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.onopen = () => ( gs.get.audio_conn = 1 ); // listening
-		this.ws.onclose = () => console.warn('[audio] websocket closed');
+		this.ws.onclose = () => ( gs.get.audio_conn = null ); // disconnected
 
 
 	}

webpack/scss/constants.scss

@@ -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;

webpack/scss/dialog.scss

@@ -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%;
+				}
+
+			}
+		}
+
+	}
 }

webpack/setup.js

@@ -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();

webpack/vue/auth/dialog.vue

@@ -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>