From 2742fd818aa5a6c4525cdd4997c83aea399bf0b4 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Fri, 6 Apr 2018 17:02:40 +0200 Subject: [PATCH] [vue.auth.dialog] refactor + relayout audio status + added logout working icon that logout from 'voice' room + [lib.audio-manager] when calling kill() do not set volume to 0 because POP notifications will be then blocked --- public_html/asset/svg/audio.close.svg | 6 +++ webpack/lib/audio-manager.js | 3 -- webpack/scss/dialog.scss | 75 ++++++++++++++++++++------- webpack/setup.js | 7 +-- webpack/vue/auth/dialog.vue | 22 +++++--- 5 files changed, 81 insertions(+), 32 deletions(-) create mode 100644 public_html/asset/svg/audio.close.svg diff --git a/public_html/asset/svg/audio.close.svg b/public_html/asset/svg/audio.close.svg new file mode 100644 index 0000000..b6f2f8e --- /dev/null +++ b/public_html/asset/svg/audio.close.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/webpack/lib/audio-manager.js b/webpack/lib/audio-manager.js index df7ed82..566fdcb 100644 --- a/webpack/lib/audio-manager.js +++ b/webpack/lib/audio-manager.js @@ -369,9 +369,6 @@ export default class AudioManager{ /* (2) Stop recording */ this.recorder.stop(); - /* (3) Volume 0 */ - this.master.gain.setValueAtTime(0, this.ctx.currentTime); - } diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss index 3152900..7f06e08 100644 --- a/webpack/scss/dialog.scss +++ b/webpack/scss/dialog.scss @@ -225,36 +225,73 @@ z-index: 100; - & > div.status{ - flex: 0 1 100%; + & > div.text-container{ + + flex: 1 1 50%; display: flex; position: relative; - height: 50%; - margin: 0; - padding: 0 .5em; + flex-flow: row wrap; - color: #faa61a; - font-size: .9em; + & > 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; + justify-items: space-between; + align-items: center; + + } + + & > div.room{ + + flex: 0 1 100%; + + display: block; + position: relative; + height: 50%; + + padding: 0 .9em; + + color: #72767d; + font-size: .8em; + + } - flex-flow: row nowrap; - align-items: center; } - & > div.room{ + & > div.audio-close{ - flex: 0 1 100%; + flex: 0 0 calc( #{$header-height} - 1em ); display: block; position: relative; - height: 50%; + height: calc( #{$header-height} - 1em ); - padding: 0 .5em; + margin: auto .5em; - color: #72767d; - font-size: .8em; + border-radius: 5px / 5px; + background: url('/asset/svg/audio.close.svg') center center no-repeat; + background-size: auto 60%; + + transition: background-color .1s ease-in-out; + + cursor: pointer; + + &:hover{ + background-color: #24262a; + } } // manage when valid state @@ -263,8 +300,8 @@ &[data-connected='2']{ display: flex; - &[data-connected='1'] > div.status, - &[data-connected='2'] > div.status{ + &[data-connected='1'] > div.text-container > div.status, + &[data-connected='2'] > div.text-container > div.status{ color: #43b581; &:before{ @@ -272,11 +309,11 @@ display: inline-block; position: relative; - width: 1.4em; + width: 1.5em; height: 1em; background: url('/asset/svg/voice.connected.svg') center center no-repeat; - background-size: auto 80%; + background-size: auto 85%; } } diff --git a/webpack/setup.js b/webpack/setup.js index 8f96cea..ae26a62 100644 --- a/webpack/setup.js +++ b/webpack/setup.js @@ -29,7 +29,9 @@ window.wscd = WebSocketClientDriver; window.api = new APIClient('api.douscord.xdrm.io'); window.ws = new WebSocketClientDriver('ws.douscord.xdrm.io'); - +/* (6) Add audio manager */ +window.AudioManager = new (require('./lib/audio-manager.js').default)(); +gs.set('audioManager', window.AudioManager); @@ -63,8 +65,7 @@ Notification.requestPermission(); window.DEBUG_MOD = false; -// audio management -window.AudioManager = new (require('./lib/audio-manager.js').default)(); + diff --git a/webpack/vue/auth/dialog.vue b/webpack/vue/auth/dialog.vue index 1d82adb..723334e 100644 --- a/webpack/vue/auth/dialog.vue +++ b/webpack/vue/auth/dialog.vue @@ -132,14 +132,22 @@
-
- {{ gs.audio_conn === 0 - ? `Connecting...` - : ( gs.audio_conn === 1 - ? `Listening` - : `Voice Connected` ) }}
+
-
{{ gs.room.get('text') ? gs.room.get('text').name : '?' }} / {{ gs.auth.user.username }}
+ +
{{ gs.audio_conn === 0 + ? `Connecting...` + : ( gs.audio_conn === 1 + ? `Listening` + : `Voice Connected` ) }}
+ + +
{{ gs.room.get('text') ? gs.room.get('text').name : '?' }} / {{ gs.auth.user.username }}
+ +
+ + +