[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

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd">
+    <rect width="24" height="24"/>
+    <path fill="#FFFFFF" d="M1,0 C0.44771525,0 0,0.44771525 0,1 C-4.4408921e-16,10.3888407 7.61115925,18 17,18 C17.2652165,18 17.5195704,17.8946432 17.7071068,17.7071068 C17.8946432,17.5195704 18,17.2652165 18,17 L18,13.5 C18,12.9477153 17.5522847,12.5 17,12.5 C15.76,12.5 14.55,12.3 13.43,11.93 C13.08,11.82 12.69,11.9 12.41,12.18 L10.21,14.38 C7.38,12.94 5.07,10.62 3.62,7.79 L5.82,5.58 C6.1,5.31 6.18,4.92 6.07,4.57 C5.7,3.45 5.5,2.24 5.5,1 C5.5,0.44771525 5.05228475,0 4.5,0 M16.1213203,0.464466094 L14,2.58578644 L11.8786797,0.464466094 L10.4644661,1.87867966 L12.5857864,4 L10.4644661,6.12132034 L11.8786797,7.53553391 L14,5.41421356 L16.1213203,7.53553391 L17.5355339,6.12132034 L15.4142136,4 L17.5355339,1.87867966" transform="matrix(1 0 0 -1 3 21)"/>
+  </g>
+</svg>

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);
-
 	}
 
 

webpack/scss/dialog.scss

@@ -225,36 +225,73 @@
 
 		z-index: 100;
 
-		& > div.status{
+		& > div.text-container{
-			flex: 0 1 100%;
+
+			flex: 1 1 50%;
 
 			display: flex;
 			position: relative;
-				height: 50%;
 
-			margin: 0;
+			flex-flow: row wrap;
-			padding: 0 .5em;
 
-			color: #faa61a;
+			& > div.status{
-			font-size: .9em;
+				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;
+			border-radius: 5px / 5px;
-			font-size: .8em;
 
+			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='1'] > div.text-container > div.status,
-			&[data-connected='2'] > 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%;
 				}
 
 			}

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

webpack/vue/auth/dialog.vue

@@ -132,14 +132,22 @@
 
 		<div class='footer' :data-connected='gs.audio_conn'>
 
-			<div class='status'>
+			<div class='text-container'>
-			{{ 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>
+				<!-- Audio connection status -->
+				<div class='status'>{{ gs.audio_conn === 0
+						? `Connecting...`
+						: ( gs.audio_conn === 1
+							? `Listening`
+							: `Voice Connected` ) }}</div>
+
+				<!-- Current room/user -->
+				<div class='room'>{{ gs.room.get('text') ? gs.room.get('text').name : '?' }} / {{ gs.auth.user.username }}</div>
+
+			</div>
+
+			<!-- Logout from current audio room -->
+			<div class='audio-close' @click='gs.room.nav(`voice`, null)'></div>
 		</div>
 
 	</div>