diff --git a/src/room/InCallView.jsx b/src/room/InCallView.jsx index 066e2963..76fba089 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 3f92975b..281995c1 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 765e8f8e..a06fb837 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"; @@ -38,7 +37,7 @@ import { ReactComponent as AudioIcon } from "../icons/Audio.svg"; import { usePTTSounds } from "../sound/usePttSounds"; import { PTTClips } from "../sound/PTTClips"; import { GroupCallInspector } from "./GroupCallInspector"; -import { FeedbackModal } from "./FeedbackModal"; +import { OverflowMenu } from "./OverflowMenu"; function getPromptText( showTalkOverError: boolean, @@ -102,8 +101,6 @@ export const PTTCallView: React.FC = ({ }) => { const { modalState: inviteModalState, modalProps: inviteModalProps } = useModalTriggerState(); - const { modalState: settingsModalState, modalProps: settingsModalProps } = - useModalTriggerState(); const { modalState: feedbackModalState, modalProps: feedbackModalProps } = useModalTriggerState(); const [containerRef, bounds] = useMeasure({ polyfill: ResizeObserver }); @@ -125,7 +122,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; @@ -179,7 +182,17 @@ export const PTTCallView: React.FC = ({ />
- settingsModalState.open()} /> + inviteModalState.open()} />
@@ -238,21 +251,6 @@ export const PTTCallView: React.FC = ({ - {settingsModalState.isOpen && ( - - )} - {feedbackModalState.isOpen && ( - - )} {inviteModalState.isOpen && ( )} diff --git a/src/room/VideoPreview.jsx b/src/room/VideoPreview.jsx index a68a4f4f..32ea29be 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 d84907ba..faf8ba59 100644 --- a/src/room/usePTT.ts +++ b/src/room/usePTT.ts @@ -37,7 +37,8 @@ export const usePTT = ( client: MatrixClient, groupCall: GroupCall, userMediaFeeds: CallFeed[], - playClip: PlayClipFunction + playClip: PlayClipFunction, + enablePTTButton: boolean ): PTTState => { const [ { @@ -162,6 +163,8 @@ export const usePTT = ( useEffect(() => { function onKeyDown(event: KeyboardEvent): void { if (event.code === "Space") { + if (!enablePTTButton) return; + event.preventDefault(); if (pttButtonHeld) return; @@ -204,6 +207,7 @@ export const usePTT = ( isAdmin, talkOverEnabled, pttButtonHeld, + enablePTTButton, ]); const setTalkOverEnabled = useCallback((talkOverEnabled) => { diff --git a/src/settings/SettingsModal.jsx b/src/settings/SettingsModal.jsx index a5a1de6b..38688645 100644 --- a/src/settings/SettingsModal.jsx +++ b/src/settings/SettingsModal.jsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback } from "react"; +import React from "react"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; import { TabContainer, TabItem } from "../tabs/Tabs"; @@ -29,12 +29,7 @@ import { Button } from "../button"; import { useDownloadDebugLog } from "./submit-rageshake"; import { Body } from "../typography/Typography"; -export function SettingsModal({ - setShowInspector, - showInspector, - showFeedbackDialog, - ...rest -}) { +export function SettingsModal({ setShowInspector, showInspector, ...rest }) { const { audioInput, audioInputs, @@ -130,7 +125,6 @@ export function SettingsModal({ - diff --git a/vite.config.js b/vite.config.js index bb2f2994..95f6c3df 100644 --- a/vite.config.js +++ b/vite.config.js @@ -39,11 +39,6 @@ export default defineConfig(({ mode }) => { proxy: { "/_matrix": env.VITE_DEFAULT_HOMESERVER || "http://localhost:8008", }, - strictPort: true, - hmr: { - port: 443, - protocol: 'wss', - }, }, resolve: { dedupe: [