Order the Who List by Logged-in Time

pkg/handlers.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"path/filepath"
 	"strings"
+	"time"
 
 	"git.kirsle.net/apps/barertc/pkg/config"
 	"git.kirsle.net/apps/barertc/pkg/jwt"
@@ -87,6 +88,7 @@ func (s *Server) OnLogin(sub *Subscriber, msg Message) {
 	// Use their username.
 	sub.Username = msg.Username
 	sub.authenticated = true
+	sub.loginAt = time.Now()
 	log.Debug("OnLogin: %s joins the room", sub.Username)
 
 	// Tell everyone they joined.

pkg/messages.go

@@ -81,6 +81,7 @@ type WhoList struct {
 	Nickname string `json:"nickname,omitempty"`
 	Status   string `json:"status"`
 	Video    int    `json:"video"`
+	LoginAt  int64  `json:"loginAt"`
 
 	// JWT auth extra settings.
 	Operator   bool   `json:"op"`

pkg/websocket.go

@@ -27,6 +27,7 @@ type Subscriber struct {
 	VideoStatus   int
 	JWTClaims     *jwt.Claims
 	authenticated bool // has passed the login step
+	loginAt       time.Time
 	conn          *websocket.Conn
 	ctx           context.Context
 	cancel        context.CancelFunc
@@ -395,6 +396,7 @@ func (s *Server) SendWhoList() {
 				Username: user.Username,
 				Status:   user.ChatStatus,
 				Video:    user.VideoStatus,
+				LoginAt:  user.loginAt.Unix(),
 			}
 
 			// If this person had booted us, force their camera to "off"

web/static/js/BareRTC.js

@@ -438,6 +438,11 @@ const app = Vue.createApp({
                         return a.emoji < b.emoji ? -1 : 1;
                     })
                     break;
+                case "login":
+                    result.sort((a, b) => {
+                        return b.loginAt - a.loginAt;
+                    });
+                    break;
                 case "gender":
                     result.sort((a, b) => {
                         if (a.gender === b.gender) return 0;

web/templates/chat.html

@@ -987,12 +987,13 @@
                                 <select v-model="whoSort">
                                     <option value="a-z">Username (a-z)</option>
                                     <option value="z-a">Username (z-a)</option>
+                                    <option value="login">Login Time</option>
                                     <option value="broadcasting">Broadcasting</option>
                                     <option value="nsfw" v-show="config.permitNSFW">Red cameras</option>
                                     <option value="status">Status</option>
                                     <option value="emoji">Emoji/country flag</option>
                                     <option value="gender">Gender</option>
-                                    <option value="op">User level</option>
+                                    <option value="op">User level (operators)</option>
                                 </select>
                             </div>
                         </div>