diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 577ca17..f21b806 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -19,7 +19,11 @@ function App() {
return (
-
+
);
}
diff --git a/frontend/src/background/jitsi/eventListeners.ts b/frontend/src/background/jitsi/eventListeners.ts
index ff56e8d..46f42c1 100644
--- a/frontend/src/background/jitsi/eventListeners.ts
+++ b/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,
+};
diff --git a/frontend/src/components/jitsi/JitsiEntrypoint.tsx b/frontend/src/components/jitsi/JitsiEntrypoint.tsx
index 9c65347..f2951a1 100644
--- a/frontend/src/components/jitsi/JitsiEntrypoint.tsx
+++ b/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 (
{
- // 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%";
diff --git a/frontend/src/components/meeting/Meeting.tsx b/frontend/src/components/meeting/Meeting.tsx
index dd9ec6a..e6cb556 100644
--- a/frontend/src/components/meeting/Meeting.tsx
+++ b/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 (
.sidebar-footer {
position: absolute;
bottom: 0;
diff --git a/frontend/src/hooks/useConferenceData.ts b/frontend/src/hooks/useConferenceData.ts
index aeb1cec..867cda6 100644
--- a/frontend/src/hooks/useConferenceData.ts
+++ b/frontend/src/hooks/useConferenceData.ts
@@ -9,7 +9,7 @@ function useConferenceData(
const [conferenceData, setConferenceDataLocal] = useState();
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: "" });
diff --git a/frontend/src/hooks/useJitsiEventCapture.tsx b/frontend/src/hooks/useJitsiEventCapture.tsx
new file mode 100644
index 0000000..eaf4417
--- /dev/null
+++ b/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();
+ // const [displayNameChangeHandler, setDisplayNameChangeHandler] =
+ // useState();
+
+ 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;
diff --git a/frontend/src/hooks/useLocalUser.ts b/frontend/src/hooks/useLocalUser.ts
index 63cb14d..e72aab1 100644
--- a/frontend/src/hooks/useLocalUser.ts
+++ b/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));
}