diff --git a/src/components/jitsi/JitsiEntrypoint.tsx b/src/components/jitsi/JitsiEntrypoint.tsx index fa00294..9fe42c2 100644 --- a/src/components/jitsi/JitsiEntrypoint.tsx +++ b/src/components/jitsi/JitsiEntrypoint.tsx @@ -1,11 +1,17 @@ import { JitsiMeeting } from "@jitsi/react-sdk"; import { JITSI_DOMAIN } from "../../background/constants"; +import { UserInfo } from "./types"; -function JitsiEntrypoint() { +interface Props { + roomName: string; + userInfo: UserInfo; +} + +function JitsiEntrypoint({ roomName, userInfo }: Props) { return ( { // here you can attach custom event listeners to the Jitsi Meet External API // you can also store it locally to execute commands diff --git a/src/components/jitsi/types.ts b/src/components/jitsi/types.ts new file mode 100644 index 0000000..4021597 --- /dev/null +++ b/src/components/jitsi/types.ts @@ -0,0 +1,7 @@ + +interface UserInfo { + displayName: string; + email: string +} + +export { UserInfo } diff --git a/src/components/meeting/Meeting.tsx b/src/components/meeting/Meeting.tsx index 194e464..5ce9307 100644 --- a/src/components/meeting/Meeting.tsx +++ b/src/components/meeting/Meeting.tsx @@ -1,19 +1,23 @@ import { useCallback, useState } from "react"; import { useRoomName } from "../../hooks/useRoomName"; import JitsiEntrypoint from "../jitsi/JitsiEntrypoint"; +import { UserInfo } from "../jitsi/types"; import MeetingNameInput from "./MeetingNameInput"; function Meeting() { const { roomName, updateRoomName, submitRoomName } = useRoomName(); const [meetingStarted, setMeetingStarted] = useState(false); + const userInfo: UserInfo = { displayName: "unknown traveller", email: "" } + + const startMeeting = useCallback(() => { submitRoomName(); setMeetingStarted(true); }, [submitRoomName, setMeetingStarted]); if (meetingStarted) { - return ; + return ; } return ( @@ -21,7 +25,7 @@ function Meeting() { roomName={roomName} setName={updateRoomName} submit={startMeeting} - currentUser="unknown traveller" + currentUser={userInfo.displayName} /> ); } diff --git a/src/components/sidebar/Sidebar.css b/src/components/sidebar/Sidebar.css index 007c9a1..ee0fcc8 100644 --- a/src/components/sidebar/Sidebar.css +++ b/src/components/sidebar/Sidebar.css @@ -7,12 +7,12 @@ margin-top: auto; } -.sidebar.small { +.sidebar-small { min-width: 60px; max-width: 60px; } -.sidebar.hidden > .sidebar-footer { +.sidebar-hidden > .sidebar-footer { position: absolute; bottom: 0; } diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index b38b972..55aae3e 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -7,7 +7,7 @@ function Sidebar() { useSidebarVisibility(); return ( -
+
diff --git a/src/components/sidebar/useSidebarVisibility.ts b/src/components/sidebar/useSidebarVisibility.ts index 949595b..18f5b38 100644 --- a/src/components/sidebar/useSidebarVisibility.ts +++ b/src/components/sidebar/useSidebarVisibility.ts @@ -9,11 +9,11 @@ function useSidebarVisibility() { const sidebarToggleText = getSidebarToggleText(sidebarVisibility); const toggleSidebarVisibility = useCallback(() => { - if (sidebarVisibility == "full") { + if (sidebarVisibility === "full") { setSideBarVisibility("small"); - } else if (sidebarVisibility == "small") { + } else if (sidebarVisibility === "small") { setSideBarVisibility("hidden"); - } else if (sidebarVisibility == "hidden") { + } else if (sidebarVisibility === "hidden") { setSideBarVisibility("full"); } }, [setSideBarVisibility, sidebarVisibility, sidebarToggleText]);