[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

This commit is contained in:
xdrm-brackets 2018-04-11 17:11:23 +02:00
parent 3f06b3dc39
commit b25d0b6249
3 changed files with 48 additions and 3 deletions

View File

@ -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' ){

View File

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

View File

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