From cc8ce7a05c12b76b7728fd6f48cc21ed4f632c29 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 May 2022 15:36:13 +0100 Subject: [PATCH] Move feedback button to overflow menu To be consistent with normal view and avoid nested dialogs. Also disable space for the PTT key when the feedback dialog is visible, since otherwise you can't type a space. Involves some rearrangement of modal state. Remove accidentally comitted vite port config. --- src/room/InCallView.jsx | 7 ++++++ src/room/OverflowMenu.jsx | 15 +++++++----- src/room/PTTCallView.tsx | 42 ++++++++++++++++------------------ src/room/VideoPreview.jsx | 6 +++++ src/room/usePTT.ts | 6 ++++- src/settings/SettingsModal.jsx | 10 ++------ vite.config.js | 5 ---- 7 files changed, 49 insertions(+), 42 deletions(-) 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 765e8f8..a06fb83 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 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 d84907b..faf8ba5 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 a5a1de6..3868864 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 bb2f299..95f6c3d 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: [