diff --git a/src/room/InCallView.jsx b/src/room/InCallView.jsx index 066e296..76fba08 100644 --- a/src/room/InCallView.jsx +++ b/src/room/InCallView.jsx @@ -35,6 +35,7 @@ import { useRageshakeRequestModal } from "../settings/submit-rageshake"; import { RageshakeRequestModal } from "./RageshakeRequestModal"; import { usePreventScroll } from "@react-aria/overlays"; import { useMediaHandler } from "../settings/useMediaHandler"; +import { useModalTriggerState } from "../Modal"; const canScreenshare = "getDisplayMedia" in navigator.mediaDevices; // There is currently a bug in Safari our our code with cloning and sending MediaStreams @@ -65,6 +66,9 @@ export function InCallView({ const { audioOutput } = useMediaHandler(); + const { modalState: feedbackModalState, modalProps: feedbackModalProps } = + useModalTriggerState(); + const items = useMemo(() => { const participants = []; @@ -196,6 +200,9 @@ export function InCallView({ showInspector={showInspector} client={client} groupCall={groupCall} + showInvite={true} + feedbackModalState={feedbackModalState} + feedbackModalProps={feedbackModalProps} /> diff --git a/src/room/OverflowMenu.jsx b/src/room/OverflowMenu.jsx index 3f92975..281995c 100644 --- a/src/room/OverflowMenu.jsx +++ b/src/room/OverflowMenu.jsx @@ -35,13 +35,14 @@ export function OverflowMenu({ showInspector, inCall, groupCall, + showInvite, + feedbackModalState, + feedbackModalProps, }) { const { modalState: inviteModalState, modalProps: inviteModalProps } = useModalTriggerState(); const { modalState: settingsModalState, modalProps: settingsModalProps } = useModalTriggerState(); - const { modalState: feedbackModalState, modalProps: feedbackModalProps } = - useModalTriggerState(); // TODO: On closing modal, focus should be restored to the trigger button // https://github.com/adobe/react-spectrum/issues/2444 @@ -70,10 +71,12 @@ export function OverflowMenu({ {(props) => ( - - - Invite people - + {showInvite && ( + + + Invite people + + )} Settings diff --git a/src/room/PTTCallView.tsx b/src/room/PTTCallView.tsx index 3e699bd..9087a26 100644 --- a/src/room/PTTCallView.tsx +++ b/src/room/PTTCallView.tsx @@ -21,9 +21,8 @@ import { GroupCall, MatrixClient, RoomMember } from "matrix-js-sdk"; import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed"; import { useModalTriggerState } from "../Modal"; -import { SettingsModal } from "../settings/SettingsModal"; import { InviteModal } from "./InviteModal"; -import { HangupButton, InviteButton, SettingsButton } from "../button"; +import { HangupButton, InviteButton } from "../button"; import { Header, LeftNav, RightNav, RoomSetupHeaderInfo } from "../Header"; import styles from "./PTTCallView.module.css"; import { Facepile } from "../Facepile"; @@ -37,6 +36,8 @@ import { getAvatarUrl } from "../matrix-utils"; import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; import { usePTTSounds } from "../sound/usePttSounds"; import { PTTClips } from "../sound/PTTClips"; +import { GroupCallInspector } from "./GroupCallInspector"; +import { OverflowMenu } from "./OverflowMenu"; function getPromptText( showTalkOverError: boolean, @@ -100,7 +101,7 @@ export const PTTCallView: React.FC = ({ }) => { const { modalState: inviteModalState, modalProps: inviteModalProps } = useModalTriggerState(); - const { modalState: settingsModalState, modalProps: settingsModalProps } = + const { modalState: feedbackModalState, modalProps: feedbackModalProps } = useModalTriggerState(); const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver }); const facepileSize = bounds.width < 800 ? "sm" : "md"; @@ -126,7 +127,13 @@ export const PTTCallView: React.FC = ({ startTalking, stopTalking, transmitBlocked, - } = usePTT(client, groupCall, userMediaFeeds, playClip); + } = usePTT( + client, + groupCall, + userMediaFeeds, + playClip, + !feedbackModalState.isOpen + ); const showTalkOverError = pttButtonHeld && transmitBlocked; @@ -154,6 +161,13 @@ export const PTTCallView: React.FC = ({ endTalkingRef={endTalkingRef} blockedRef={blockedRef} /> +
@@ -174,7 +188,17 @@ export const PTTCallView: React.FC = ({ />
- settingsModalState.open()} /> + inviteModalState.open()} />
@@ -233,13 +257,6 @@ export const PTTCallView: React.FC = ({ - {settingsModalState.isOpen && ( - - )} {inviteModalState.isOpen && ( )} diff --git a/src/room/VideoPreview.jsx b/src/room/VideoPreview.jsx index a68a4f4..32ea29b 100644 --- a/src/room/VideoPreview.jsx +++ b/src/room/VideoPreview.jsx @@ -25,6 +25,7 @@ import { ResizeObserver } from "@juggle/resize-observer"; import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall"; import styles from "./VideoPreview.module.css"; import { Body } from "../typography/Typography"; +import { useModalTriggerState } from "../Modal"; export function VideoPreview({ client, @@ -44,6 +45,9 @@ export function VideoPreview({ const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver }); const avatarSize = (previewBounds.height - 66) / 2; + const { modalState: feedbackModalState, modalProps: feedbackModalProps } = + useModalTriggerState(); + return (
diff --git a/src/room/usePTT.ts b/src/room/usePTT.ts index 673da76..5965c54 100644 --- a/src/room/usePTT.ts +++ b/src/room/usePTT.ts @@ -58,7 +58,8 @@ export const usePTT = ( client: MatrixClient, groupCall: GroupCall, userMediaFeeds: CallFeed[], - playClip: PlayClipFunction + playClip: PlayClipFunction, + enablePTTButton: boolean ): PTTState => { // Used to serialise all the mute calls so they don't race. It has // its own state as its always set separately from anything else. @@ -213,6 +214,8 @@ export const usePTT = ( useEffect(() => { function onKeyDown(event: KeyboardEvent): void { if (event.code === "Space") { + if (!enablePTTButton) return; + event.preventDefault(); if (pttButtonHeld) return; @@ -255,6 +258,7 @@ export const usePTT = ( isAdmin, talkOverEnabled, pttButtonHeld, + enablePTTButton, setMicMuteWrapper, ]);