From f59a1a6759da5892abf6ae3eb83f233b607a93a0 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sat, 5 Aug 2023 12:15:16 -0700
Subject: [PATCH] Ordering options for the Who List

---
 web/static/css/chat.css  |  5 +++++
 web/static/js/BareRTC.js | 35 +++++++++++++++++++++++++++++++++++
 web/templates/chat.html  | 26 ++++++++++++++++++++++----
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/web/static/css/chat.css b/web/static/css/chat.css
index 548a35a..0911cec 100644
--- a/web/static/css/chat.css
+++ b/web/static/css/chat.css
@@ -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 *
  ************************/
diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js
index 7b9ec36..c412a93 100644
--- a/web/static/js/BareRTC.js
+++ b/web/static/js/BareRTC.js
@@ -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
diff --git a/web/templates/chat.html b/web/templates/chat.html
index baa7dcc..cc2f4f2 100644
--- a/web/templates/chat.html
+++ b/web/templates/chat.html
@@ -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 -->