Skip to content

Commit f327912

Browse files
johnpointjohnpoint
authored
Merge pull request bestony#25 from johnpoint/master
feat: Improve user operations && kick user
2 parents 7832fe1 + c25aa66 commit f327912

File tree

3 files changed

+97
-37
lines changed

3 files changed

+97
-37
lines changed

‎css/style.css

+17-10
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,33 @@
1-
21
html, body, pre, code, kbd, samp {
3-
font-family: "Press Start 2P";
2+
font-family: "Press Start 2P";
43
/* "Press Start 2P"; */
54
/*font-size: 30px;*/
65
}
7-
.container{
8-
margin-top: 30px;
9-
padding: 1.5rem 2rem;
6+
7+
.container {
8+
margin-top: 30px;
9+
padding: 1.5rem 2rem;
1010
border-color: #000;
1111
border-style: solid;
1212
border-width: 4px;
1313
}
14-
.container>.title{
15-
display: table;
14+
15+
.container>.title {
16+
display: table;
1617
padding: 0 .5rem;
1718
margin: -2.2rem -1rem 1rem;
1819
font-size: 1rem;
1920
background-color: #fff;
2021
}
21-
.username{
22-
font-size: 20px;
22+
23+
.username {
24+
font-size: 20px;
2325
}
24-
.header{
26+
27+
.username:hover {
28+
color: rgb(87, 98, 255);
29+
}
30+
31+
.header {
2532
margin: 20px 0px;
2633
}

‎index.html

+28-22
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ <h3 class="title">
8787
x-text="$truncate(item.nickname,2,'')" :title="item.nickname"></div>
8888
<span>
8989
<span class="username" x-bind:class="{ 'nes-text is-primary': item.status }"
90-
x-text="$truncate(item.nickname,5)"></span>
90+
x-text="$truncate(item.nickname,5)" @click="userControl(item)"></span>
9191
</span>
9292
</div>
9393
</div>
@@ -106,13 +106,13 @@ <h3 class="title">
106106
<div class="nes-avatar is-rounded is-large"
107107
style="background-color: #5eaaa8;text-align: center;overflow: hidden;line-height: 64px;font-size: 20px;"
108108
x-text="$truncate(item.nickname,2,'')"></div>
109-
<span class="username" x-text="$truncate(item.nickname,5)">
109+
<span class="username" x-text="$truncate(item.nickname,5)"
110+
@click="userControl(item)">
110111

111112
</span>
112113
</div>
113114
</div>
114115
</template>
115-
116116
</div>
117117
</div>
118118
</div>
@@ -144,6 +144,31 @@ <h3 class="title">
144144
</button>
145145
</div>
146146
</div>
147+
148+
<div class="container" id="userControl" x-show="selectUser.id && isAdmin">
149+
<h3 class="title">
150+
User
151+
</h3>
152+
<div class="avatar">
153+
<div class="column">
154+
<p><label>Nickname: </label><span x-text="selectUser.nickname||NaN"></span></p>
155+
<p><label>Role: </label><span x-text="selectUser.role||NaN"></span></p>
156+
<button type="button" @click="muteHost(selectUser)" class="nes-btn is-warning"
157+
style="margin-right: 20px;" x-text="selectUser.forceMute?'Unmute':'Mute'"></button>
158+
<button type="button" @click="adminSwitch(selectUser);selectUser={}"
159+
class="nes-btn is-warning" style="margin-right: 20px;"
160+
x-show="selectUser.role!='guest'"
161+
x-text="selectUser.role=='admin'?'↓ Host':'↑ Admin'"></button>
162+
<button type="button" class="nes-btn is-warning" style="margin-right: 20px;"
163+
x-show="selectUser.role!='admin'"
164+
@click="makePeopleBeHost(selectUser);selectUser={}"
165+
x-text="selectUser.role=='host'?'↓ Audience':'↑ Host'"></button>
166+
<button type="button" class="nes-btn is-error" style="margin-right: 20px;"
167+
@click="kickUser(selectUser);selectUser={}">Kick</button>
168+
</div>
169+
</div>
170+
</div>
171+
147172
</div>
148173
</div>
149174
<!-- charroom end -->
@@ -169,25 +194,6 @@ <h3 class="title">
169194
<!-- share end -->
170195

171196
<!-- controlpanel -->
172-
<div class="container" id="host-list" x-show="isShowChatRoom && isAdmin">
173-
<h3 class="title">
174-
Speaker List
175-
</h3>
176-
<div class="lists">
177-
<ul class="nes-list is-circle">
178-
<template x-for="item in hosts" :key="item">
179-
<li x-show="userId!=item.userId">
180-
<span x-text="item.nickname"></span>
181-
<button type="button" @click="muteHost(item)" class="nes-btn is-warning"
182-
style="margin-right: 20px;" x-text="item.forceMute?'Unmute':'Mute'"></button>
183-
<button type="button" @click="adminSwitch(item)" class="nes-btn is-warning"
184-
style="margin-right: 20px;" x-text="item.role=='admin'?'↓ Host':'↑ Admin'"></button>
185-
</li>
186-
</template>
187-
</ul>
188-
</div>
189-
190-
</div>
191197
<div class="container" id="application-list" x-show="isShowChatRoom && isAdmin">
192198
<h3 class="title">
193199
Speakers' Waiting Bench

‎js/app.js

+52-5
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ function index() {
7878

7979
// control
8080
isShowChatRoom: false,
81+
isShowUserControl: false,
8182
isShowRegsiter: false,
8283
isShowButton: false,
8384
hasApplication: false,
@@ -86,6 +87,7 @@ function index() {
8687
rtcClient: null,
8788
rtcEnable: true,
8889

90+
selectUser: {},
8991

9092
async init() {
9193

@@ -197,12 +199,13 @@ function index() {
197199
},
198200
async makePeopleBeHost(item) {
199201
const user = AV.Object.createWithoutData('RoomUser', item.id);
200-
user.set("role", "host");
202+
if (item.role == "guest") {
203+
user.set("role", "host");
204+
} else {
205+
user.set("role", "guest");
206+
}
201207
await user.save();
202-
this.applications = this.applications.filter(obj => {
203-
return item.id != obj.id
204-
})
205-
alert("Request approved.");
208+
alert("OK");
206209
},
207210
async adminSwitch(item) {
208211
const user = AV.Object.createWithoutData('RoomUser', item.id);
@@ -231,6 +234,24 @@ function index() {
231234
await room.save();
232235
alert("OK");
233236
},
237+
userControl(item) {
238+
this.selectUser = {
239+
id: item.id,
240+
role: item.role,
241+
nickname: item.nickname,
242+
forceMute: item.forceMute || false,
243+
};
244+
this.isShowControl = true;
245+
},
246+
async kickUser(item) {
247+
let roomUserQuery = new AV.Query("RoomUser");
248+
roomUserQuery.equalTo("objectId", item.id);
249+
roomUserQuery.equalTo("roomId", this.routerParam.roomId);
250+
let roomUser = await roomUserQuery.find();
251+
// 移除当前用户
252+
await AV.Object.destroyAll(roomUser);
253+
alert("OK");
254+
},
234255

235256
_isInWeChat() {
236257
return navigator.userAgent.indexOf("MicroMessenger") != -1
@@ -396,6 +417,8 @@ function index() {
396417
guestsArray.push({
397418
username: item.get("username"),
398419
nickname: item.get("nickname"),
420+
role: item.get("role"),
421+
id: item.id,
399422
userId: item.get("userId"),
400423
status: false,
401424
})
@@ -478,6 +501,7 @@ function index() {
478501
username: guest.get("username"),
479502
nickname: guest.get("nickname"),
480503
userId: guest.get("userId"),
504+
role: guest.get("role"),
481505
id: guest.id,
482506
}]
483507
}
@@ -514,6 +538,7 @@ function index() {
514538
this.applications = [...this.applications, {
515539
username: object.get("username"),
516540
nickname: object.get("nickname"),
541+
role: object.get("role"),
517542
userId: object.get("userId"),
518543
id: object.id,
519544
application: true,
@@ -562,6 +587,28 @@ function index() {
562587
this.guests = newGuest
563588
}
564589

590+
if (object.get("role") == "guest" && updatedKeys[0] == 'role') {
591+
if (object.id == this.loginRecordId) {
592+
rtc.localAudioTrack.setEnabled(false);
593+
this.isHost = false;
594+
alert("You've become a guest!")
595+
}
596+
newHost = this.hosts.filter(item => {
597+
return item.id != object.id;
598+
})
599+
this.hosts = newHost;
600+
// change icon location
601+
this.guests = [...this.guests, {
602+
username: object.get("username"),
603+
nickname: object.get("nickname"),
604+
userId: object.get("userId"),
605+
role: object.get("role"),
606+
id: object.id,
607+
forceMute: object.get("forceMute"),
608+
status: false
609+
}]
610+
}
611+
565612
if (updatedKeys[0] == "role") {
566613
if (object.id == this.loginRecordId && object.get("role") == 'admin') {
567614
this.isAdmin = true;

0 commit comments

Comments
 (0)