[scss.dialog] added icons for each 'voice' room connected user [vue.auth.dialog] added connected members to 'voice' rooms [lib.room-controller] added sending { rid: ROOM_ID } for voice rooms (COMMENTED FOR NOW) waiting for SeekDaSky to implement it on the server

parcel/lib/room-controller.js

@@ -47,8 +47,8 @@ export default class RoomController{
 			this[type].current = room.id;
 
 		/* (5) Tell websocket: new text room */
-		if( type === 'text' && window.csock instanceof wscd )
-			csock.send({ buffer: { rid: room.id } });
+		if( typeof this[type].current === 'number' && window.csock instanceof wscd )
+			(type === 'text') && csock.send({ buffer: { rid: room.id } });
 
 		/* (6) If 'voice' room -> toggle audio */
 		if( type === 'voice' ){

parcel/scss/dialog.scss

@@ -182,7 +182,7 @@
 
 					display: none;
 					position: absolute;
-						top: calc( 50% - 1em/2 );
+						top: calc( .5em );
 						left: calc( 100% - .5em - 1em );
 						width: 1em;
 						height: 1em;
@@ -196,6 +196,45 @@
 
 				// only show 'remove' icon on hover
 				&:hover > span.rem{ display: block; }
+
+				// Member List
+				& > div.member-list{
+
+					display: block;
+					position: relative;
+						width: calc( 100% - 1em );
+
+					overflow: hidden;
+
+					& > span{
+
+						display: inline-block;
+						position: relative;
+
+						& > span{
+							display: inline-block;
+							position: relative;
+
+							margin-top: -1.9em;
+
+						}
+
+						div.icon{
+							display: inline-block;
+							position: relative;
+								width: 1.2em;
+								height: 1.2em;
+
+							margin: .2em .5em;
+							margin-left: 0;
+
+							border-radius: 50% / 50%;
+
+							background-color: url() center center no-repeat;
+							background-size: contain;
+						}
+					}
+				}
 			}
 		}
 

parcel/vue/auth/dialog.vue

@@ -35,6 +35,12 @@
 						:data-type='r.type'
 						@click='gs.room.nav(r.type, r.id)'>{{ r.name }}
 							<span class='rem' @click="gs.popup.show('room.remove'); gs.popup.get('room.remove').data=r"></span>
+							<div v-if='r.type===`voice`' v-show='r.members.length>0' class='member-list'>
+								<span v-for='uid in r.members'>
+									<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${uid}");`'></div>
+									<span>{{ gs.content.user(uid).username }}</span>
+								</span>
+							</div>
 						</li>
 				</ul>
 			</div>