diff --git a/package.json b/package.json
index 4060320..4bdcbbb 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,12 @@
"@react-aria/button": "^3.3.4",
"@react-aria/dialog": "^3.1.4",
"@react-aria/focus": "^3.5.0",
+ "@react-aria/menu": "^3.3.0",
"@react-aria/overlays": "^3.7.3",
"@react-aria/utils": "^3.10.0",
+ "@react-stately/collections": "^3.3.4",
"@react-stately/overlays": "^3.1.3",
+ "@react-stately/tree": "^3.2.0",
"@sentry/react": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"classnames": "^2.3.1",
diff --git a/src/App.jsx b/src/App.jsx
index 83787dd..52150b8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -22,8 +22,6 @@ import {
Redirect,
useLocation,
} from "react-router-dom";
-import styles from "./App.module.css";
-import { OverlayProvider } from "@react-aria/overlays";
import * as Sentry from "@sentry/react";
import { useClient } from "./ConferenceCallManagerHooks";
import { Home } from "./Home";
@@ -50,36 +48,34 @@ export default function App() {
} = useClient(homeserverUrl);
return (
-
-
- <>
- {loading ? (
-
- Loading...
-
- ) : (
-
-
-
-
-
-
-
-
-
-
-
- {authenticated ? (
-
- ) : (
-
- )}
-
-
- )}
-
-
-
+
+ <>
+ {loading ? (
+
+ Loading...
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+ {authenticated ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
);
}
diff --git a/src/App.module.css b/src/App.module.css
deleted file mode 100644
index 59e0c7c..0000000
--- a/src/App.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.overlayProvider {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
diff --git a/src/GridLayoutMenu.jsx b/src/GridLayoutMenu.jsx
new file mode 100644
index 0000000..57eee1f
--- /dev/null
+++ b/src/GridLayoutMenu.jsx
@@ -0,0 +1,36 @@
+import React, { useCallback } from "react";
+import { ButtonTooltip, HeaderButton } from "./RoomButton";
+import { Popover, PopoverMenu, PopoverMenuItem } from "./PopoverMenu";
+import { ReactComponent as SpotlightIcon } from "./icons/Spotlight.svg";
+import { ReactComponent as FreedomIcon } from "./icons/Freedom.svg";
+import { ReactComponent as CheckIcon } from "./icons/Check.svg";
+import styles from "./GridLayoutMenu.module.css";
+
+export function GridLayoutMenu({ layout, setLayout }) {
+ const onAction = useCallback((value) => setLayout(value));
+
+ return (
+
+
+ Layout Type
+ {layout === "spotlight" ? : }
+
+ {(props) => (
+
+
+
+ Freedom
+ {layout === "freedom" && }
+
+
+
+ Spotlight
+ {layout === "spotlight" && (
+
+ )}
+
+
+ )}
+
+ );
+}
diff --git a/src/GridLayoutMenu.module.css b/src/GridLayoutMenu.module.css
new file mode 100644
index 0000000..8056f31
--- /dev/null
+++ b/src/GridLayoutMenu.module.css
@@ -0,0 +1,8 @@
+.checkIcon {
+ position: absolute;
+ right: 16px;
+}
+
+.checkIcon * {
+ stroke: var(--textColor1);
+}
diff --git a/src/OverflowMenu.jsx b/src/OverflowMenu.jsx
new file mode 100644
index 0000000..28418aa
--- /dev/null
+++ b/src/OverflowMenu.jsx
@@ -0,0 +1,31 @@
+import React, { useCallback } from "react";
+import { ButtonTooltip, RoomButton } from "./RoomButton";
+import { Popover, PopoverMenu, PopoverMenuItem } from "./PopoverMenu";
+import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
+import { ReactComponent as AddUserIcon } from "./icons/AddUser.svg";
+import { ReactComponent as OverflowIcon } from "./icons/Overflow.svg";
+
+export function OverflowMenu({ roomUrl }) {
+ const onAction = useCallback((e) => console.log(e));
+
+ return (
+
+
+ More
+
+
+ {(props) => (
+
+
+
+ Invite people
+
+
+
+ Settings
+
+
+ )}
+
+ );
+}
diff --git a/src/PopoverMenu.jsx b/src/PopoverMenu.jsx
new file mode 100644
index 0000000..f5ba72a
--- /dev/null
+++ b/src/PopoverMenu.jsx
@@ -0,0 +1,145 @@
+import React, { useRef, useState, forwardRef } from "react";
+import styles from "./PopoverMenu.module.css";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useButton } from "@react-aria/button";
+import { useMenu, useMenuItem, useMenuTrigger } from "@react-aria/menu";
+import { useTreeState } from "@react-stately/tree";
+import { Item } from "@react-stately/collections";
+import { mergeProps } from "@react-aria/utils";
+import { FocusScope } from "@react-aria/focus";
+import { useFocus } from "@react-aria/interactions";
+import {
+ useOverlay,
+ DismissButton,
+ useOverlayPosition,
+ OverlayContainer,
+} from "@react-aria/overlays";
+import classNames from "classnames";
+
+export function PopoverMenu({ children, placement, ...rest }) {
+ const popoverMenuState = useMenuTriggerState(rest);
+ const buttonRef = useRef();
+ const { menuTriggerProps, menuProps } = useMenuTrigger(
+ {},
+ popoverMenuState,
+ buttonRef
+ );
+
+ const popoverRef = useRef();
+
+ const { overlayProps: positionProps } = useOverlayPosition({
+ targetRef: buttonRef,
+ overlayRef: popoverRef,
+ placement: placement || "top",
+ offset: 5,
+ isOpen: popoverMenuState.isOpen,
+ });
+
+ if (
+ !Array.isArray(children) ||
+ children.length > 2 ||
+ typeof children[1] !== "function"
+ ) {
+ throw new Error(
+ "PopoverMenu must have two props. The first being a button and the second being a render prop."
+ );
+ }
+
+ const [popoverTrigger, popover] = children;
+
+ return (
+
+
+ {popoverMenuState.isOpen &&
+ popover({
+ isOpen: popoverMenuState.isOpen,
+ onClose: popoverMenuState.close,
+ autoFocus: popoverMenuState.focusStrategy,
+ domProps: menuProps,
+ ref: popoverRef,
+ positionProps,
+ ...rest,
+ })}
+
+
+
+ {[...state.collection].map((item) => (
+
+ ))}
+
+
+
- setAudioInput(value)}
- options={audioInputs.map(({ label, deviceId }) => ({
- label,
- value: deviceId,
- }))}
- >
-
-
- setVideoInput(value)}
- options={videoInputs.map(({ label, deviceId }) => ({
- label,
- value: deviceId,
- }))}
- >
-
-
+
+
{canScreenshare && !isSafari && (
)}
-
+
+
{
+ const { buttonProps } = useButton(rest, ref);
return (