Add pronouns to Jitsi and Zoom calls (#189)

CHANGELOG.md

@@ -10,7 +10,8 @@ instead of version numbers.
 ## 2022-02-06
 
 * Rooms now have a dropdown list of users (first button after room title).
-* This list shows the users' pronouns, as set in Settings.
+* This list shows the users' pronouns, which can now be set in Settings.
+  Pronouns are also part of a user's display name in Jitsi and Zoom calls.
   [[#189](https://github.com/edemaine/comingle/issues/189)]
 * Admins can kick a user from the current room (e.g. to remove idle users).
   Users can still rejoin the room if they want, unless the room is locked.

client/Name.coffee

@@ -63,3 +63,11 @@ export Pronouns = React.memo ->
     </Card.Body>
   </Card>
 Pronouns.displayName = 'Pronouns'
+
+export concatNamePronouns = (name, pronouns) ->
+  name += " (#{pronouns})" if pronouns
+  name
+export useNameWithPronouns = ->
+  concatNamePronouns useName(), usePronouns()
+export getNameWithPronouns = ->
+  concatNamePronouns getName(), getPronouns()

client/TabJitsi.coffee

@@ -4,7 +4,7 @@ import useScript from 'react-script-hook'
 import {Alert, Button, Card} from 'react-bootstrap'
 
 import {Loading} from './Loading'
-import {useName} from './Name'
+import {useNameWithPronouns} from './Name'
 import {getDark} from './Settings'
 import {Tabs} from '/lib/tabs'
 
@@ -41,7 +41,7 @@ export TabJitsi = React.memo ({tabId, room}) ->
   ref = useRef()  # div container for Jitsi iframe
   [joined, setJoined] = useState lastJitsiStatus.joined  # joined call?
   [api, setApi] = useState()  # JitsiMeetExternalAPI object
-  name = useName()
+  name = useNameWithPronouns()
 
   ## Jitsi API
   useEffect ->

client/TabZoom.coffee

@@ -3,7 +3,7 @@ import {useTracker} from 'meteor/react-meteor-data'
 import {Alert, Button, Card, Row, Col} from 'react-bootstrap'
 
 import {allow} from './TabIFrame'
-import {getName} from './Name'
+import {getNameWithPronouns} from './Name'
 import {Tabs, zoomRegExp} from '/lib/tabs'
 import {meteorCallPromise} from '/lib/meteorPromise'
 
@@ -35,7 +35,7 @@ export TabZoom = React.memo ({tabId}) ->
     prefix = if ua.getDevice().type == 'mobile' then 'zoomus' else 'zoommtg'
     url = "#{prefix}://zoom.us/join?confno=#{zoomID}"
     url += "&pwd=#{zoomPwd}" if zoomPwd
-    name = getName()
+    name = getNameWithPronouns()
     url += "&uname=#{encodeURIComponent name}" if name
     window.location.replace url
 
@@ -47,7 +47,7 @@ export TabZoom = React.memo ({tabId}) ->
   [embedUrl, setEmbedUrl] = useState()
   zoomWeb = ->
     {signature, apiKey} = await meteorCallPromise 'zoomSign', zoomID
-    setEmbedUrl "/zoom.html?name=#{base64 getName() ? ''}&mn=#{zoomID}&email=&pwd=#{zoomPwd ? ''}&role=0&lang=en-US&signature=#{signature}&china=0&apiKey=#{apiKey}"
+    setEmbedUrl "/zoom.html?name=#{base64 getNameWithPronouns() ? ''}&mn=#{zoomID}&email=&pwd=#{zoomPwd ? ''}&role=0&lang=en-US&signature=#{signature}&china=0&apiKey=#{apiKey}"
   return <iframe src={embedUrl} allow={allow}/> if embedUrl
 
   <Card>