From 3dc0135b4885cd9fe613ccc66b192d64233e1b14 Mon Sep 17 00:00:00 2001 From: qvalentin Date: Sun, 12 Feb 2023 15:28:53 +0100 Subject: [PATCH] crappy event handling --- frontend/src/App.tsx | 6 +++- .../src/background/jitsi/eventListeners.ts | 35 ++++++++++++++++++- .../src/components/jitsi/JitsiEntrypoint.tsx | 28 ++++++++++++--- frontend/src/components/meeting/Meeting.tsx | 4 ++- frontend/src/components/sidebar/Sidebar.css | 13 +++++++ frontend/src/hooks/useConferenceData.ts | 2 +- frontend/src/hooks/useJitsiEventCapture.tsx | 30 ++++++++++++++++ frontend/src/hooks/useLocalUser.ts | 3 +- 8 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 frontend/src/hooks/useJitsiEventCapture.tsx 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)); }