crappy event handling

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;