diff --git a/pkg/jwt/jwt.go b/pkg/jwt/jwt.go index 6e2b46e..18ca6bf 100644 --- a/pkg/jwt/jwt.go +++ b/pkg/jwt/jwt.go @@ -13,10 +13,12 @@ import ( // Custom JWT Claims. type Claims struct { // Custom claims. - IsAdmin bool `json:"op"` - Avatar string `json:"img"` - ProfileURL string `json:"url"` - Nick string `json:"nick"` + IsAdmin bool `json:"op,omitempty"` + Avatar string `json:"img,omitempty"` + ProfileURL string `json:"url,omitempty"` + Nick string `json:"nick,omitempty"` + Emoji string `json:"emoji,omitempty"` + Gender string `json:"gender,omitempty"` // Standard claims. Notes: // subject = username diff --git a/pkg/messages.go b/pkg/messages.go index 3588116..deca2af 100644 --- a/pkg/messages.go +++ b/pkg/messages.go @@ -86,6 +86,8 @@ type WhoList struct { Operator bool `json:"op"` Avatar string `json:"avatar,omitempty"` ProfileURL string `json:"profileURL,omitempty"` + Emoji string `json:"emoji,omitempty"` + Gender string `json:"gender,omitempty"` } // VideoFlags to convey the state and setting of users' cameras concisely. diff --git a/pkg/websocket.go b/pkg/websocket.go index 5fec31e..95e28c4 100644 --- a/pkg/websocket.go +++ b/pkg/websocket.go @@ -407,6 +407,8 @@ func (s *Server) SendWhoList() { who.Avatar = user.JWTClaims.Avatar who.ProfileURL = user.JWTClaims.ProfileURL who.Nickname = user.JWTClaims.Nick + who.Emoji = user.JWTClaims.Emoji + who.Gender = user.JWTClaims.Gender } users = append(users, who) } diff --git a/web/static/css/chat.css b/web/static/css/chat.css index 0911cec..3f4ed4b 100644 --- a/web/static/css/chat.css +++ b/web/static/css/chat.css @@ -301,3 +301,14 @@ div.feed.popped-out { background-color: rgba(255, 255, 255, 0.5); /* color: rgba(0, 0, 0, 0.5); */ } + +/* Gender colors for profile icon */ +.has-text-gender-male { + color: #0099ff !important; +} +.has-text-gender-female { + color: #ff99ff !important; +} +.has-text-gender-other { + color: #cc00cc !important; +} diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js index c412a93..cd1d28d 100644 --- a/web/static/js/BareRTC.js +++ b/web/static/js/BareRTC.js @@ -432,6 +432,20 @@ const app = Vue.createApp({ return b.op - a.op; }); break; + case "emoji": + result.sort((a, b) => { + if (a.emoji === b.emoji) return 0; + return a.emoji < b.emoji ? -1 : 1; + }) + break; + case "gender": + result.sort((a, b) => { + if (a.gender === b.gender) return 0; + let left = a.gender || 'z', + right = b.gender || 'z'; + return left < right ? -1 : 1; + }) + break; case "z-a": result = result.reverse(); } @@ -1865,6 +1879,19 @@ const app = Vue.createApp({ return `${(hour)}:${minutes} ${ampm}`; }, + // CSS classes for the profile button (color coded genders) + profileButtonClass(user) { + let gender = (user.gender || "").toLowerCase(); + if (gender.indexOf("m") === 0) { + return "has-text-gender-male"; + } else if (gender.indexOf("f") === 0) { + return "has-text-gender-female"; + } else if (gender.length > 0) { + return "has-text-gender-other"; + } + return ""; + }, + /** * Image sharing in chat */ diff --git a/web/templates/chat.html b/web/templates/chat.html index 3a28ad1..bf191be 100644 --- a/web/templates/chat.html +++ b/web/templates/chat.html @@ -990,6 +990,8 @@ + + @@ -1036,18 +1038,25 @@
- [[ u.username ]] + - [[ u.username ]] + title="Operator">
+ + + [[ u.emoji.split(" ")[0] ]] + +