= ({
+ {settingsModalState.isOpen && (
+
+ )}
{inviteModalState.isOpen && showControls && (
)}
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index fe91861..21ebc63 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -1,5 +1,5 @@
/*
-Copyright 2021-2022 New Vector Ltd
+Copyright 2021-2023 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -24,7 +24,6 @@ import { RoomAuthView } from "./RoomAuthView";
import { GroupCallLoader } from "./GroupCallLoader";
import { GroupCallView } from "./GroupCallView";
import { useUrlParams } from "../UrlParams";
-import { MediaHandlerProvider } from "../settings/useMediaHandler";
import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
import { translatedError } from "../TranslatedError";
import { useOptInAnalytics } from "../settings/useSetting";
@@ -101,15 +100,13 @@ export const RoomPage: FC = () => {
}
return (
-
-
- {groupCallView}
-
-
+
+ {groupCallView}
+
);
};
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index aaf9df5..af1b18a 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -1,5 +1,5 @@
/*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,21 +14,22 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from "react";
+import React, { useCallback } from "react";
import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer";
import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { useTranslation } from "react-i18next";
+import { OverlayTriggerState } from "@react-stately/overlays";
-import { MicButton, VideoButton } from "../button";
+import { MicButton, SettingsButton, VideoButton } from "../button";
import { useMediaStream } from "../video-grid/useMediaStream";
-import { OverflowMenu } from "./OverflowMenu";
import { Avatar } from "../Avatar";
import { useProfile } from "../profile/useProfile";
import styles from "./VideoPreview.module.css";
import { Body } from "../typography/Typography";
import { useModalTriggerState } from "../Modal";
+import { SettingsModal } from "../settings/SettingsModal";
interface Props {
client: MatrixClient;
@@ -59,8 +60,20 @@ export function VideoPreview({
const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
const avatarSize = (previewBounds.height - 66) / 2;
- const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
- useModalTriggerState();
+ const {
+ modalState: settingsModalState,
+ modalProps: settingsModalProps,
+ }: {
+ modalState: OverlayTriggerState;
+ modalProps: {
+ isOpen: boolean;
+ onClose: () => void;
+ };
+ } = useModalTriggerState();
+
+ const openSettings = useCallback(() => {
+ settingsModalState.open();
+ }, [settingsModalState]);
return (
@@ -101,17 +114,13 @@ export function VideoPreview({
muted={localVideoMuted}
onPress={toggleLocalVideoMuted}
/>
-
+
)}
+ {settingsModalState.isOpen && (
+
+ )}
);
}
diff --git a/src/room/FeedbackModal.tsx b/src/settings/FeedbackSettingsTab.tsx
similarity index 58%
rename from src/room/FeedbackModal.tsx
rename to src/settings/FeedbackSettingsTab.tsx
index 537132c..da40678 100644
--- a/src/room/FeedbackModal.tsx
+++ b/src/settings/FeedbackSettingsTab.tsx
@@ -1,5 +1,5 @@
/*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,28 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useTranslation } from "react-i18next";
-import { Modal, ModalContent } from "../Modal";
import { Button } from "../button";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import {
- useSubmitRageshake,
- useRageshakeRequest,
-} from "../settings/submit-rageshake";
+import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake";
import { Body } from "../typography/Typography";
+import styles from "../input/SelectInput.module.css";
interface Props {
- inCall: boolean;
- roomId: string;
- onClose?: () => void;
- // TODO: add all props for for
- [index: string]: unknown;
+ roomId?: string;
}
-export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
+export function FeedbackSettingsTab({ roomId }: Props) {
const { t } = useTranslation();
const { submitRageshake, sending, sent, error } = useSubmitRageshake();
const sendRageshakeRequest = useRageshakeRequest();
@@ -57,37 +50,34 @@ export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
roomId,
});
- if (inCall && sendLogs) {
+ if (roomId && sendLogs) {
sendRageshakeRequest(roomId, rageshakeRequestId);
}
},
- [inCall, submitRageshake, roomId, sendRageshakeRequest]
+ [submitRageshake, roomId, sendRageshakeRequest]
);
- useEffect(() => {
- if (sent) {
- onClose();
- }
- }, [sent, onClose]);
-
return (
-
-
- {t("Having trouble? Help us fix it.")}
-