diff --git a/public/locales/en-GB/app.json b/public/locales/en-GB/app.json index b861fd2..f14991d 100644 --- a/public/locales/en-GB/app.json +++ b/public/locales/en-GB/app.json @@ -86,6 +86,7 @@ "Settings": "Settings", "Share screen": "Share screen", "Show call inspector": "Show call inspector", + "Show connection stats": "Show connection stats", "Sign in": "Sign in", "Sign out": "Sign out", "Speaker": "Speaker", diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index dd93f01..661a462 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -54,7 +54,10 @@ import { useVideoGridLayout, TileDescriptor, } from "../video-grid/VideoGrid"; -import { useShowInspector } from "../settings/useSetting"; +import { + useShowInspector, + useShowConnectionStats, +} from "../settings/useSetting"; import { useModalTriggerState } from "../Modal"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { useUrlParams } from "../UrlParams"; @@ -189,6 +192,7 @@ export function InCallView({ ); const [showInspector] = useShowInspector(); + const [showConnectionStats] = useShowConnectionStats(); const { hideScreensharing } = useUrlParams(); @@ -290,6 +294,7 @@ export function InCallView({ key={maximisedParticipant.id} data={maximisedParticipant.data} showSpeakingIndicator={false} + showConnectionStats={showConnectionStats} /> ); } @@ -303,6 +308,7 @@ export function InCallView({ {(props) => ( 2} + showConnectionStats={showConnectionStats} {...props} ref={props.ref as Ref} /> diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 4dd9170..a6ccadc 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -34,6 +34,7 @@ import { useShowInspector, useOptInAnalytics, useDeveloperSettingsTab, + useShowConnectionStats, } from "./useSetting"; import { FieldRow, InputField } from "../input/Input"; import { Button } from "../button"; @@ -59,6 +60,8 @@ export const SettingsModal = (props: Props) => { const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics(); const [developerSettingsTab, setDeveloperSettingsTab] = useDeveloperSettingsTab(); + const [showConnectionStats, setShowConnectionStats] = + useShowConnectionStats(); const downloadDebugLog = useDownloadDebugLog(); @@ -233,6 +236,18 @@ export const SettingsModal = (props: Props) => { } /> + + ) => + setShowConnectionStats(e.target.checked) + } + /> +