diff --git a/client/src/components/icons/FullscreenExitIcon.tsx b/client/src/components/icons/FullscreenExitIcon.tsx new file mode 100644 index 0000000..86d703a --- /dev/null +++ b/client/src/components/icons/FullscreenExitIcon.tsx @@ -0,0 +1,15 @@ +function FullscreenExitIcon() { + return ( + + + + ); +} + +export default FullscreenExitIcon; diff --git a/client/src/components/popups/ChatPopup.tsx b/client/src/components/popups/ChatPopup.tsx index eadbed8..ad1a169 100644 --- a/client/src/components/popups/ChatPopup.tsx +++ b/client/src/components/popups/ChatPopup.tsx @@ -32,7 +32,7 @@ export default function ChatPopup() { } return ( - +
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/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 ? : }