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

Emojis and gender flags for users

Browse Source
This commit is contained in:
Noah 2023-08-05 19:38:04 -07:00
parent 4fbf3e7d75
commit 52b1271591
6 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
pkg/jwt/jwt.go
View File

@ -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

2
pkg/messages.go
View File

@ -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.

2
pkg/websocket.go
View File

@ -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)
}

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

@ -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;
}

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

@ -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
*/

17
web/templates/chat.html
View File

@ -990,6 +990,8 @@
<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>
</select>
</div>
@ -1036,18 +1038,25 @@
</div>
<div class="column pr-0 is-clipped"
:class="{'pl-1': u.avatar}">
<i class="fa fa-gavel has-text-warning-dark"
<strong class="truncate-text-line is-size-7">[[ u.username ]]</strong>
<sup class="fa fa-gavel has-text-warning-dark is-size-7 ml-1"
v-if="u.op"
title="Operator"></i>
<span class="truncate-text-line">[[ u.username ]]</span>
title="Operator"></sup>
</div>
<div class="column is-narrow pl-0">
<!-- Emoji icon -->
<span v-if="u.emoji" class="pr-1 cursor-default"
:title="u.emoji.indexOf(' ') > -1 ? u.emoji.split(' ')[1] : u.emoji">
[[ u.emoji.split(" ")[0] ]]
</span>
<!-- Profile button -->
<button type="button"
v-if="u.profileURL"
class="button is-small px-2 py-1"
:class="profileButtonClass(u)"
@click="openProfile(u)"
title="Open profile page">
:title="'Open profile page' + (u.gender ? ` (gender: ${u.gender})` : '')">
<i class="fa fa-user"></i>
</button>