crappy event handling

frontend/src/App.tsx

@@ -19,7 +19,11 @@ function App() {
     return (
       <div className="App">
         <Sidebar usersData={roomData} />
-        <Meeting setConferenceData={setConferenceData} userInfo={userInfo} />
+        <Meeting
+          conferenceData={conferenceData}
+          setConferenceData={setConferenceData}
+          userInfo={userInfo}
+        />
       </div>
     );
   }

frontend/src/background/jitsi/eventListeners.ts

@@ -6,6 +6,11 @@ export interface ConferenceData {
   breakoutRoom: boolean; // whether the current room is a breakout room
 }
 
+export interface DisplayNameChangeEvent {
+  id: string; // the id of the participant that changed their display name
+  displayname: string; // the new display name (WTF why is capilization different)
+}
+
 function videoConferenceJoinedListener(
   setConferenceData: (newData: ConferenceData) => void,
   videoConferenceJoinedEvent: ConferenceData
@@ -13,4 +18,32 @@ function videoConferenceJoinedListener(
   setConferenceData(videoConferenceJoinedEvent);
 }
 
-export { videoConferenceJoinedListener };
+function displayNameChangeListener(
+  setDisplayNameChangedEvent: (newData: DisplayNameChangeEvent) => void,
+  displayNameChangeEvent: DisplayNameChangeEvent
+) {
+  setDisplayNameChangedEvent(displayNameChangeEvent);
+}
+
+function displayNameChangeListenerA(
+  conferenceData: ConferenceData | undefined,
+  setConferenceData: (newData: ConferenceData) => void,
+  displayNameChangeEvent: DisplayNameChangeEvent
+) {
+  console.log(
+    "[Rooms] displayNameChangeListener",
+    displayNameChangeEvent,
+    conferenceData
+  );
+  if (conferenceData && conferenceData.id == displayNameChangeEvent.id)
+    setConferenceData({
+      ...conferenceData,
+      displayName: displayNameChangeEvent.displayname,
+    } as ConferenceData);
+}
+
+export {
+  videoConferenceJoinedListener,
+  displayNameChangeListener,
+  displayNameChangeListenerA,
+};

frontend/src/components/jitsi/JitsiEntrypoint.tsx

@@ -4,16 +4,35 @@ import { UserInfo } from "./types";
 import curry from "just-curry-it";
 import {
     ConferenceData,
+    DisplayNameChangeEvent,
+    displayNameChangeListener,
+    displayNameChangeListenerA,
     videoConferenceJoinedListener,
 } from "../../background/jitsi/eventListeners";
+import { useCallback } from "react";
+import useJitsiEventCapture from "../../hooks/useJitsiEventCapture";
 
 interface Props {
     roomName: string;
     userInfo: UserInfo;
+    conferenceData: ConferenceData | undefined;
     setConferenceData: (newData: ConferenceData) => void;
 }
 
-function JitsiEntrypoint({ roomName, userInfo, setConferenceData }: Props) {
+function JitsiEntrypoint({
+    roomName,
+    userInfo,
+    conferenceData,
+    setConferenceData,
+}: Props) {
+    const { setDisplayNameChangeEvent } = useJitsiEventCapture(
+        curry(displayNameChangeListenerA)(conferenceData)(setConferenceData)
+    );
+
+    // const displayNameChangeEventListenerCallback = useCallback(() => {
+    //
+    // }, [conferenceData, setConferenceData]);
+
     return (
         <JitsiMeeting
             domain={JITSI_DOMAIN}
@@ -28,13 +47,14 @@ function JitsiEntrypoint({ roomName, userInfo, setConferenceData }: Props) {
             interfaceConfigOverwrite={{}}
             userInfo={userInfo}
             onApiReady={(externalApi) => {
-                // here you can attach custom event listeners to the Jitsi Meet External API
-                // you can also store it locally to execute commands
-
                 externalApi.addEventListener(
                     "videoConferenceJoined",
                     curry(videoConferenceJoinedListener)(setConferenceData)
                 );
+                externalApi.addEventListener(
+                    "displayNameChange",
+                    curry(displayNameChangeListener)(setDisplayNameChangeEvent)
+                );
             }}
             getIFrameRef={(iframeRef) => {
                 iframeRef.style.height = "100%";

frontend/src/components/meeting/Meeting.tsx

@@ -6,11 +6,12 @@ import { UserInfo } from "../jitsi/types";
 import MeetingNameInput from "./MeetingNameInput";
 
 interface Props {
+  conferenceData: ConferenceData | undefined;
   setConferenceData: (newData: ConferenceData) => void;
   userInfo: UserInfo;
 }
 
-function Meeting({ setConferenceData, userInfo }: Props) {
+function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
   const { roomName, updateRoomName, submitRoomName } = useRoomName();
   const [meetingStarted, setMeetingStarted] = useState(false);
 
@@ -22,6 +23,7 @@ function Meeting({ setConferenceData, userInfo }: Props) {
   if (meetingStarted) {
     return (
       <JitsiEntrypoint
+        conferenceData={conferenceData}
         roomName={roomName}
         userInfo={userInfo}
         setConferenceData={setConferenceData}

frontend/src/components/sidebar/Sidebar.css

@@ -1,6 +1,15 @@
 .sidebar {
   display: flex;
   flex-direction: column;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar h3 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .sidebar-footer {
@@ -12,6 +21,10 @@
   max-width: 60px;
 }
 
+.sidebar-full {
+  max-width: 220px;
+}
+
 .sidebar-hidden > .sidebar-footer {
   position: absolute;
   bottom: 0;

frontend/src/hooks/useConferenceData.ts

@@ -9,7 +9,7 @@ function useConferenceData(
   const [conferenceData, setConferenceDataLocal] = useState<ConferenceData>();
 
   const setConferenceData = (newData: ConferenceData) => {
-    console.log("[Rooms] set conferenceData");
+    console.log("[Rooms] set conferenceData", conferenceData);
     sendMessage(JSON.stringify(newData));
     setConferenceDataLocal(newData);
     setUserInfo({ displayName: newData.displayName, email: "" });

frontend/src/hooks/useJitsiEventCapture.tsx

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { DisplayNameChangeEvent } from "../background/jitsi/eventListeners";
+
+function useJitsiEventCapture(displayNameChangeHandler: Function) {
+  const [displayNameChangeEvent, setDisplayNameChangeEventLocal] =
+    useState<DisplayNameChangeEvent>();
+  // const [displayNameChangeHandler, setDisplayNameChangeHandler] =
+  //   useState<Function>();
+
+  const setDisplayNameChangeEvent = useCallback(
+    (newValue: DisplayNameChangeEvent) => {
+      console.log("[Rooms] newValue", newValue, displayNameChangeEvent);
+      if (displayNameChangeEvent != newValue) {
+        setDisplayNameChangeEventLocal(newValue);
+      }
+    },
+    [setDisplayNameChangeEventLocal]
+  );
+
+  useEffect(() => {
+    console.log("[Rooms] displayNameChangeHandler", displayNameChangeEvent);
+    displayNameChangeHandler &&
+      displayNameChangeEvent &&
+      displayNameChangeHandler(displayNameChangeEvent);
+  }, [displayNameChangeEvent]);
+
+  return { setDisplayNameChangeEvent };
+}
+
+export default useJitsiEventCapture;

frontend/src/hooks/useLocalUser.ts

@@ -18,7 +18,7 @@ function useLocalUser() {
 
 function getUserInfoFromCookie(): UserInfo {
   let cookie = getCookie(USER_COOKIE_NAME);
-  console.log("[Rooms] getUserNameFromCookie 1", cookie);
+  console.log("[Rooms] getUserNameFromCookie", cookie);
   if (cookie) return JSON.parse(cookie);
   return {
     displayName: "unknown traveller",
@@ -27,6 +27,7 @@ function getUserInfoFromCookie(): UserInfo {
 }
 
 function storeUserInfoInCookie(userInfo: UserInfo) {
+  console.log("[Rooms] storeUserInfoInCookie", userInfo);
   setCookie(USER_COOKIE_NAME, JSON.stringify(userInfo));
 }