crappy event handling

This commit is contained in:
qvalentin 2023-02-12 15:28:53 +01:00
parent f93cabb99d
commit 3dc0135b48
8 changed files with 112 additions and 9 deletions

View File

@ -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>
);
}

View File

@ -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,
};

View File

@ -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%";

View File

@ -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}

View File

@ -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;

View File

@ -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: "" });

View File

@ -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;

View File

@ -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));
}