diff --git a/client/src/components/ui/ActionsPopover.tsx b/client/src/components/ui/ActionsPopover.tsx
index 203f8dd..831a101 100644
--- a/client/src/components/ui/ActionsPopover.tsx
+++ b/client/src/components/ui/ActionsPopover.tsx
@@ -1,7 +1,7 @@
import { useState, useRef, useEffect } from "react";
import Button from "./Button";
import MoreIcon from "../icons/MoreIcon";
-import Popover from "./Popover";
+import PopoverWrapper from "./PopoverWrapper";
interface ActionsPopoverProps {
options: {
@@ -47,7 +47,7 @@ export default function ActionsPopover({ options }: ActionsPopoverProps) {
- (
+
);
}
diff --git a/client/src/components/ui/ControlsPopover.tsx b/client/src/components/ui/ControlsPopover.tsx
index a7b3e1d..d99830f 100644
--- a/client/src/components/ui/ControlsPopover.tsx
+++ b/client/src/components/ui/ControlsPopover.tsx
@@ -1,5 +1,5 @@
import FloatingActionButton from "./FloatingActionButton";
-import Popover from "./Popover";
+import PopoverWrapper from "./PopoverWrapper";
import MoreIcon from "../icons/MoreIcon";
import { useEffect, useRef, useState } from "react";
import Button from "./Button";
@@ -7,9 +7,16 @@ import ChatFilledIcon from "../icons/ChatFilledIcon";
import UsersFilledIcon from "../icons/UsersFilledIcon";
import ShareFilledIcon from "../icons/ShareFilledIcon";
import CogFilledIcon from "../icons/CogFilledIcon";
+import usePopupStore from "../../store/popupStore";
+import useModalStore from "../../store/modalStore";
+import ChatPopup from "../popups/ChatPopup";
+import ParticipantsPopup from "../popups/ParticipantsPopup";
+import SharePopup from "../popups/SharePopup";
+import SettingsModal from "../modals/SettingsModal";
function ControlsPopover() {
const [isOpened, setIsOpened] = useState(false);
+
const buttonRef = useRef(null);
useEffect(() => {
@@ -30,8 +37,11 @@ function ControlsPopover() {
};
}, []);
+ const { setPopup } = usePopupStore();
+ const { setModal } = useModalStore();
+
return (
-
+
-
-
+
);
}
diff --git a/client/src/components/ui/Popover.tsx b/client/src/components/ui/PopoverWrapper.tsx
similarity index 75%
rename from client/src/components/ui/Popover.tsx
rename to client/src/components/ui/PopoverWrapper.tsx
index d75a259..e45ff68 100644
--- a/client/src/components/ui/Popover.tsx
+++ b/client/src/components/ui/PopoverWrapper.tsx
@@ -9,7 +9,12 @@ interface PopoverProps {
className?: string;
}
-function Popover({ isOpened, buttonRef, children, className }: PopoverProps) {
+function PopoverWrapper({
+ isOpened,
+ buttonRef,
+ children,
+ className,
+}: PopoverProps) {
const [openUpwards, setOpenUpwards] = useState(false);
const [menuHeight, setMenuHeight] = useState(0);
@@ -30,19 +35,19 @@ function Popover({ isOpened, buttonRef, children, className }: PopoverProps) {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
ref={(el) => {
- setMenuHeight(el?.offsetHeight || 0);
+ if (el) setMenuHeight(el.offsetHeight);
}}
className={clsx(
- "absolute z-10 right-0 bg-white 2xl:rounded-[1.111vw] shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] overflow-hidden rounded-2xl 2xl:p-[0.278vw] p-1",
+ "absolute z-10 right-0 shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] overflow-hidden bg-white 2xl:rounded-[1.111vw] rounded-2xl",
openUpwards ? "bottom-full" : "top-full",
className
)}
>
- {children}
+ {children}
)}
);
}
-export default Popover;
+export default PopoverWrapper;
diff --git a/client/src/pages/NewSessionPage.tsx b/client/src/pages/NewSessionPage.tsx
index 1411c4e..74d24f1 100644
--- a/client/src/pages/NewSessionPage.tsx
+++ b/client/src/pages/NewSessionPage.tsx
@@ -2,6 +2,7 @@ import ActionsSidebarWrapper from "../components/ActionsSidebarWrapper";
import ChatFilledIcon from "../components/icons/ChatFilledIcon";
import CogFilledIcon from "../components/icons/CogFilledIcon";
import ExitFilledIcon from "../components/icons/ExitFilledIcon";
+import FullscreenExitIcon from "../components/icons/FullscreenExitIcon";
import FullscreenIcon from "../components/icons/FullscreenIcon";
import MicrophoneFilledIcon from "../components/icons/MicrophoneFilledIcon";
import ShareFilledIcon from "../components/icons/ShareFilledIcon";
@@ -11,33 +12,67 @@ import FloatingActionButton from "../components/ui/FloatingActionButton";
import ParticipantsPopup from "../components/popups/ParticipantsPopup";
import usePopupStore from "../store/popupStore";
import ControlsPopover from "../components/ui/ControlsPopover";
+import ChatPopup from "../components/popups/ChatPopup";
+import SharePopup from "../components/popups/SharePopup";
+import SettingsModal from "../components/modals/SettingsModal";
+import useModalStore from "../store/modalStore";
+import { useEffect, useState } from "react";
function NewSessionPage() {
const { setPopup } = usePopupStore();
+ const { setModal } = useModalStore();
+
+ const [isFullscreen, setIsFullscreen] = useState(false);
+
+ function toggleFullscreen() {
+ if (document.fullscreenElement) document.exitFullscreen();
+ else document.documentElement.requestFullscreen();
+ }
+
+ useEffect(() => {
+ document.addEventListener("fullscreenchange", () =>
+ setIsFullscreen(!!document.fullscreenElement)
+ );
+ return () =>
+ document.removeEventListener("fullscreenchange", () =>
+ setIsFullscreen(!!document.fullscreenElement)
+ );
+ }, []);
return (
-
+
+ setPopup()}
+ >
+
+
+
+
setPopup()}
>
-
-
-
-
-
-
+
-
-
+
+ setPopup()
+ }
+ >
+
-
-
+
setModal()}
+ >
+
@@ -51,9 +86,12 @@ function NewSessionPage() {
-
+
-
+ {isFullscreen ? : }