apps
/
BareRTC
1
0
Fork 0
Code Issues 20 Pull Requests Packages Projects Releases Wiki Activity

Ordering options for the Who List

ipad-testing
Noah 2023-08-05 12:15:16 -07:00
parent 974ee25b48
commit f59a1a6759
3 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/static/css/chat.css
View File

@ -23,6 +23,11 @@ body {
background-color: #ffefff;
}
/* Truncate long text, e.g. usernames in the who list */
.truncate-text-line {
text-overflow: ellipsis;
}
/************************
* Main CSS Grid Layout *
************************/

35
web/static/js/BareRTC.js
View File

@ -105,6 +105,7 @@ const app = Vue.createApp({
// Who List for the room.
whoList: [],
whoTab: 'online',
whoSort: 'a-z',
whoMap: {}, // map username to wholist entry
muted: {}, // muted usernames for client side state
@ -404,6 +405,40 @@ const app = Vue.createApp({
if (this.webcam.mutualOpen) status |= this.VideoFlag.MutualOpen;
return status;
},
sortedWhoList() {
let result = [...this.whoList];
switch (this.whoSort) {
case "broadcasting":
result.sort((a, b) => {
return (b.video & this.VideoFlag.Active) - (a.video & this.VideoFlag.Active);
});
break;
case "nsfw":
result.sort((a, b) => {
let left = (a.video & (this.VideoFlag.Active | this.VideoFlag.NSFW)),
right = (b.video & (this.VideoFlag.Active | this.VideoFlag.NSFW));
return right - left;
});
break;
case "status":
result.sort((a, b) => {
if (a.status === b.status) return 0;
return b.status < a.status ? -1 : 1;
});
break;
case "op":
result.sort((a, b) => {
return b.op - a.op;
});
break;
case "z-a":
result = result.reverse();
}
// Default ordering from ChatServer = a-z
return result;
},
},
methods: {
// Load user prefs from localStorage, called on startup

26
web/templates/chat.html
View File

@ -963,7 +963,7 @@
<div class="card-content p-2">
<div class="columns is-mobile mb-0">
<div class="column is-narrow">
<div class="column is-one-quarter">
Status:
</div>
<div class="column">
@ -978,6 +978,24 @@
</div>
</div>
<div class="columns is-mobile mb-0 mt-1">
<div class="column is-one-quarter">
Sort:
</div>
<div class="column">
<div class="select is-small is-fullwidth">
<select v-model="whoSort">
<option value="a-z">Username (a-z)</option>
<option value="z-a">Username (z-a)</option>
<option value="broadcasting">Broadcasting</option>
<option value="nsfw" v-show="config.permitNSFW">Red cameras</option>
<option value="status">Status</option>
<option value="op">User level</option>
</select>
</div>
</div>
</div>
<div class="tabs has-text-small">
<ul>
<li :class="{'is-active': whoTab==='online'}">
@ -998,7 +1016,7 @@
<!-- Who Is Online -->
<ul class="menu-list" v-if="whoTab==='online'">
<li v-for="(u, i) in whoList" v-bind:key="i">
<li v-for="(u, i) in sortedWhoList" v-bind:key="i">
<div class="columns is-mobile">
<!-- Avatar URL if available -->
<div class="column is-narrow pr-0" style="position: relative">
@ -1016,12 +1034,12 @@
</div>
</a>
</div>
<div class="column pr-0"
<div class="column pr-0 is-clipped"
:class="{'pl-1': u.avatar}">
<i class="fa fa-gavel has-text-warning-dark"
v-if="u.op"
title="Operator"></i>
[[ u.username ]]
<span class="truncate-text-line">[[ u.username ]]</span>
</div>
<div class="column is-narrow pl-0">
<!-- Profile button -->