diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx index ce26ec17e..86c410d40 100644 --- a/src/app/features/room/RoomViewHeader.tsx +++ b/src/app/features/room/RoomViewHeader.tsx @@ -21,6 +21,7 @@ import { RectCords, Badge, Spinner, + Button, } from 'folds'; import { useNavigate } from 'react-router-dom'; import { Room } from 'matrix-js-sdk'; @@ -254,6 +255,125 @@ const RoomMenu = forwardRef(({ room, requestClose ); }); +type CallMenuProps = { + onVoiceCall: () => void; + onVideoCall: () => void; + requestClose: () => void; +}; +const CallMenu = forwardRef( + ({ requestClose, onVoiceCall, onVideoCall }, ref) => { + const handleVoice = () => { + onVoiceCall(); + requestClose(); + }; + const handleVideo = () => { + onVideoCall(); + requestClose(); + }; + + return ( + + + + Start Call + + + + + + + + + ); + } +); + +function CallButton() { + const room = useRoom(); + const direct = useIsDirectRoom(); + + const callEmbed = useCallEmbed(); + const startCall = useCallStart(direct); + const callStarted = callEmbed && callEmbed.roomId === room.roomId; + const inAnotherCall = callEmbed && !callStarted; + const [menuAnchor, setMenuAnchor] = useState(); + + const handleOpenMenu: MouseEventHandler = (evt) => { + setMenuAnchor(evt.currentTarget.getBoundingClientRect()); + }; + + return ( + <> + + {inAnotherCall ? ( + Already in another call — End the current call to join! + ) : ( + Call + )} + + } + > + {(triggerRef) => ( + + + + )} + + setMenuAnchor(undefined), + clickOutsideDeactivates: true, + isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown', + isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp', + escapeDeactivates: stopPropagation, + }} + > + startCall(room, { microphone: true, video: true, sound: true })} + onVoiceCall={() => startCall(room, { microphone: true, video: false, sound: true })} + requestClose={() => setMenuAnchor(undefined)} + /> + + } + /> + + ); +} + export function RoomViewHeader({ callView }: { callView?: boolean }) { const navigate = useNavigate(); const mx = useMatrixClient(); @@ -261,6 +381,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) { const screenSize = useScreenSizeContext(); const room = useRoom(); const space = useSpaceOptionally(); + const [menuAnchor, setMenuAnchor] = useState(); const [pinMenuAnchor, setPinMenuAnchor] = useState(); const direct = useIsDirectRoom(); @@ -305,11 +426,6 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) { setPeopleDrawer(!peopleDrawer); }; - const callEmbed = useCallEmbed(); - const startCall = useCallStart(direct); - const callStarted = callEmbed && callEmbed.roomId === room.roomId; - const inAnotherCall = callEmbed && !callStarted; - return ( } /> - {direct && !callStarted && ( - - {inAnotherCall ? ( - Already in another call — End the current call to join! - ) : ( - Start Call - )} - - } - > - {(triggerRef) => ( - startCall(room, { microphone: true, video: true, sound: true })} - disabled={inAnotherCall} - > - - - )} - - )} + {direct && } {screenSize === ScreenSize.Desktop && (