From cf838059452beba9911dc96bd4fd1bc2ef8d3c4b Mon Sep 17 00:00:00 2001
From: Erik Demaine <edemaine@mit.edu>
Date: Sun, 6 Feb 2022 14:49:23 -0500
Subject: [PATCH] Add pronouns to Jitsi and Zoom calls (#189)

---
 CHANGELOG.md           | 3 ++-
 client/Name.coffee     | 8 ++++++++
 client/TabJitsi.coffee | 4 ++--
 client/TabZoom.coffee  | 6 +++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36392b6..b28fb17 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/client/Name.coffee b/client/Name.coffee
index 7127b11..1bde816 100644
--- a/client/Name.coffee
+++ b/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()
diff --git a/client/TabJitsi.coffee b/client/TabJitsi.coffee
index 9f94602..586b9e0 100644
--- a/client/TabJitsi.coffee
+++ b/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 ->
diff --git a/client/TabZoom.coffee b/client/TabZoom.coffee
index 85ae7e9..b742c8c 100644
--- a/client/TabZoom.coffee
+++ b/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>