init backend

frontend/src/components/jitsi/JitsiEntrypoint.tsx

@@ -0,0 +1,36 @@
+import { JitsiMeeting } from "@jitsi/react-sdk";
+import { JITSI_DOMAIN } from "../../background/constants";
+import { UserInfo } from "./types";
+
+interface Props {
+    roomName: string;
+    userInfo: UserInfo;
+}
+
+function JitsiEntrypoint({ roomName, userInfo }: Props) {
+    return (
+        <JitsiMeeting
+            domain={JITSI_DOMAIN}
+            roomName={roomName}
+            configOverwrite={{
+                startWithAudioMuted: true,
+                disableModeratorIndicator: true,
+                startScreenSharing: true,
+                enableEmailInStats: false,
+                prejoinConfig: { enabled: false },
+            }}
+            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
+            }}
+            getIFrameRef={(iframeRef) => {
+                iframeRef.style.height = "100%";
+                iframeRef.style.width = "100%";
+            }}
+        />
+    );
+}
+
+export default JitsiEntrypoint;

frontend/src/components/jitsi/types.ts

@@ -0,0 +1,7 @@
+
+interface UserInfo {
+  displayName: string;
+  email: string
+}
+
+export { UserInfo }

frontend/src/components/meeting/Meeting.tsx

@@ -0,0 +1,33 @@
+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 <JitsiEntrypoint roomName={roomName} userInfo={userInfo} />;
+  }
+
+  return (
+    <MeetingNameInput
+      roomName={roomName}
+      setName={updateRoomName}
+      submit={startMeeting}
+      currentUser={userInfo.displayName}
+    />
+  );
+}
+
+export default Meeting;

frontend/src/components/meeting/MeetingNameInput.css

@@ -0,0 +1,4 @@
+.meeting-name-input {
+  width: 100%;
+  text-align: center;
+}

frontend/src/components/meeting/MeetingNameInput.tsx

@@ -0,0 +1,32 @@
+import { FormEventHandler } from "react";
+import "./MeetingNameInput.css";
+
+function MeetingNameInput(props: {
+  roomName: string;
+  setName: (name: string) => void;
+  submit: FormEventHandler;
+  currentUser: string;
+}) {
+  const onInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    props.setName(event.target.value);
+    event.preventDefault();
+  };
+
+  console.log("[Rooms] MeetingName input comp");
+  return (
+    <div className="meeting-name-input">
+      <h1>Greetings {props.currentUser}</h1>
+      <form onSubmit={props.submit}>
+        <input
+          placeholder="Roomname"
+          type="text"
+          value={props.roomName}
+          onChange={onInput}
+        />
+        <button type="submit">Enter the adventure</button>
+      </form>
+    </div>
+  );
+}
+
+export default MeetingNameInput;

frontend/src/components/sidebar/Sidebar.css

@@ -0,0 +1,18 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+}
+
+.sidebar-small {
+  min-width: 60px;
+  max-width: 60px;
+}
+
+.sidebar-hidden > .sidebar-footer {
+  position: absolute;
+  bottom: 0;
+}

frontend/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,19 @@
+import SidebarHeader from "./SidebarHeader";
+import useSidebarVisibility from "./useSidebarVisibility";
+import "./Sidebar.css";
+
+function Sidebar() {
+  const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } =
+    useSidebarVisibility();
+
+  return (
+    <div className={`sidebar sidebar-${sidebarVisibility}`}>
+      <SidebarHeader sidebarVisibility={sidebarVisibility} />
+      <div className="sidebar-footer">
+        <button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
+      </div>
+    </div>
+  );
+}
+
+export default Sidebar;

frontend/src/components/sidebar/SidebarHeader.tsx

@@ -0,0 +1,16 @@
+import { sidebarVisibilityOptions } from "./useSidebarVisibility";
+
+interface props {
+  sidebarVisibility: sidebarVisibilityOptions;
+}
+
+function SidebarHeader({ sidebarVisibility }: props) {
+  if (sidebarVisibility == "full") {
+    return <h1>hi there</h1>;
+  } else if (sidebarVisibility == "small") {
+    return <h1>hi</h1>;
+  }
+  return <></>;
+}
+
+export default SidebarHeader;

frontend/src/components/sidebar/useSidebarVisibility.ts

@@ -0,0 +1,28 @@
+import { useCallback, useState } from "react";
+
+export type sidebarVisibilityOptions = "full" | "small" | "hidden";
+
+function useSidebarVisibility() {
+  const [sidebarVisibility, setSideBarVisibility] =
+    useState<sidebarVisibilityOptions>("full");
+
+  const sidebarToggleText = getSidebarToggleText(sidebarVisibility);
+
+  const toggleSidebarVisibility = useCallback(() => {
+    if (sidebarVisibility === "full") {
+      setSideBarVisibility("small");
+    } else if (sidebarVisibility === "small") {
+      setSideBarVisibility("hidden");
+    } else if (sidebarVisibility === "hidden") {
+      setSideBarVisibility("full");
+    }
+  }, [setSideBarVisibility, sidebarVisibility, sidebarToggleText]);
+
+  return { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText };
+}
+const getSidebarToggleText = (sidebarVisibility: sidebarVisibilityOptions) => {
+  if (sidebarVisibility === "full") return "<-";
+  if (sidebarVisibility === "small") return "<-";
+  if (sidebarVisibility === "hidden") return "->";
+};
+export default useSidebarVisibility;