diff --git a/public_html/asset/svg/voice.connected.svg b/public_html/asset/svg/voice.connected.svg
new file mode 100644
index 0000000..ce1857d
--- /dev/null
+++ b/public_html/asset/svg/voice.connected.svg
@@ -0,0 +1,22 @@
+
+
\ No newline at end of file
diff --git a/webpack/lib/audio-manager.js b/webpack/lib/audio-manager.js
index 7faa874..df7ed82 100644
--- a/webpack/lib/audio-manager.js
+++ b/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.onclose = () => console.warn('[audio] websocket closed');
+ this.ws.onopen = () => ( gs.get.audio_conn = 1 ); // listening
+ this.ws.onclose = () => ( gs.get.audio_conn = null ); // disconnected
}
diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss
index 5ee3e03..96bca40 100644
--- a/webpack/scss/constants.scss
+++ b/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;
diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss
index 20dd463..3152900 100644
--- a/webpack/scss/dialog.scss
+++ b/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%;
+ }
+
+ }
+ }
+
+ }
}
\ No newline at end of file
diff --git a/webpack/setup.js b/webpack/setup.js
index d576453..8f96cea 100644
--- a/webpack/setup.js
+++ b/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();
diff --git a/webpack/vue/auth/dialog.vue b/webpack/vue/auth/dialog.vue
index 2da50f7..1d82adb 100644
--- a/webpack/vue/auth/dialog.vue
+++ b/webpack/vue/auth/dialog.vue
@@ -129,6 +129,19 @@
+
+
+