Skip to content

Commit 636e681

Browse files
toger5toger5
committed
temp
1 parent 5bf46eb commit 636e681

File tree

9 files changed

+213
-44
lines changed

9 files changed

+213
-44
lines changed

‎public/locales/en-GB/app.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@
141141
"feedback_tab_title": "Feedback",
142142
"more_tab_title": "More",
143143
"opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
144+
"show_debug_view": "",
144145
"speaker_device_selection_label": "Speaker"
145146
},
146147
"star_rating_input_label_one": "{{count}} stars",

‎src/debug/DebugView.module.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.container {
2+
padding: 0.5em;
3+
z-index: 2;
4+
display: flex;
5+
}
6+
.dataContainer {
7+
background-color: var(--cpd-color-bg-canvas-default);
8+
border-radius: 10px;
9+
overflow: auto;
10+
width: 500px;
11+
}
12+
.hideButton {
13+
background: none;
14+
border: none;
15+
}
16+
.memberContainer {
17+
background-color: var(--cpd-color-bg-subtle-secondary);
18+
border-radius: 10px;
19+
margin: 0.5em;
20+
padding: 0.5em;
21+
}
22+
23+
.encryptionEventContainer {
24+
background-color: var(--cpd-color-bg-subtle-secondary);
25+
border-radius: 10px;
26+
margin: 0.5em;
27+
padding: 0.5em;
28+
}

‎src/debug/DebugView.tsx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
Copyright 2024 New Vector Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
18+
import { FC, useState } from "react";
19+
import { Text } from "@vector-im/compound-web";
20+
import { MatrixClient, MatrixEvent } from "matrix-js-sdk";
21+
import { CallMembership } from "matrix-js-sdk/src/matrixrtc/CallMembership";
22+
23+
import styles from "./DebugView.module.css";
24+
25+
interface Props {
26+
rtcSession: MatrixRTCSession;
27+
client: MatrixClient;
28+
}
29+
30+
export const DebugView: FC<Props> = ({ rtcSession, client }) => {
31+
const [isShown, setIsShown] = useState(true);
32+
const room = rtcSession.room;
33+
const events = room
34+
.getLiveTimeline()
35+
.getEvents()
36+
.filter((ev) => ev.getType() === "io.element.call.encryption_keys")
37+
.map((ev: MatrixEvent) => <EncryptionEventContainer event={ev} />);
38+
const listItems = rtcSession.memberships.map((m) => (
39+
<MemberContainer membership={m} />
40+
));
41+
return (
42+
<div className={styles.container}>
43+
{isShown && (
44+
<div className={styles.dataContainer}>
45+
{listItems}
46+
<ul>{events}</ul>
47+
</div>
48+
)}
49+
<button
50+
className={styles.hideButton}
51+
onClick={() => setIsShown(!isShown)}
52+
>
53+
{isShown ? <b>{"<"}</b> : <b>{">"}</b>}
54+
</button>
55+
</div>
56+
);
57+
};
58+
59+
interface MemberContainerProps {
60+
membership: CallMembership;
61+
}
62+
const MemberContainer: FC<MemberContainerProps> = ({ membership }) => {
63+
return (
64+
<div className={styles.memberContainer}>
65+
<Text as="span" size="md" weight="semibold">
66+
{membership.sender}
67+
</Text>
68+
<br />
69+
<Text as="span" size="sm" weight="regular">
70+
Device Id: {membership.deviceId}
71+
</Text>
72+
</div>
73+
);
74+
};
75+
76+
interface EncryptionEventContainerProps {
77+
event: MatrixEvent;
78+
}
79+
const EncryptionEventContainer: FC<EncryptionEventContainerProps> = ({
80+
event,
81+
}) => {
82+
const keys = event
83+
.getContent()
84+
.keys.map((obj: { index: number; key: string }) => (
85+
<>
86+
index {obj.index}: {obj.key}
87+
<br />
88+
</>
89+
));
90+
return (
91+
<div className={styles.memberContainer}>
92+
<Text as="span" size="md" weight="semibold">
93+
{event.sender}
94+
</Text>
95+
<br />
96+
<Text as="span" size="sm" weight="regular">
97+
Keys: {keys}
98+
</Text>
99+
<br />
100+
</div>
101+
);
102+
};

‎src/livekit/MediaDevicesContext.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
143143

144144
// On FF we dont need to query the names
145145
// (call enumerateDevices + create meadia stream to trigger permissions)
146-
// for ouput devices because the selector wont be shown on FF.
146+
// for output devices because the selector wont be shown on FF.
147147
const useOutputNames = usingNames && !isFirefox();
148148

149149
const [storedAudioInput, setStoredAudioInput] = useSetting(audioInputSetting);
@@ -166,8 +166,8 @@ export const MediaDevicesProvider: FC<Props> = ({ children }) => {
166166
}, [setStoredAudioInput, audioInput.selectedId]);
167167

168168
useEffect(() => {
169-
// Skip setting state for ff output. Redundent since it is set to always return 'undefined'
170-
// but makes it clear while debugging that this is not happening on FF. + perf ;)
169+
// Skip setting state for ff output. Redundant since it is set to always return 'undefined'
170+
// but makes it clear while debugging that this is not happening on FF. (+ perf)
171171
if (audioOutput.selectedId !== undefined && !isFirefox())
172172
setStoredAudioOutput(audioOutput.selectedId);
173173
}, [setStoredAudioOutput, audioOutput.selectedId]);

‎src/livekit/useLiveKit.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export function useLiveKit(
235235
} catch (e) {
236236
if ((e as DOMException).name === "NotAllowedError") {
237237
logger.error(
238-
"Fatal errror while syncing mute state: resetting",
238+
"Fatal error while syncing mute state: resetting",
239239
e,
240240
);
241241
if (type === MuteDevice.Microphone) {

‎src/room/InCallView.module.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ limitations under the License.
2222
overflow-y: auto;
2323
}
2424

25+
.debugViewContainer {
26+
display: flex;
27+
flex-direction: row;
28+
height: 100%;
29+
width: 100%;
30+
}
31+
2532
.controlsOverlay {
2633
position: relative;
2734
flex: 1;

‎src/room/InCallView.tsx

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@ import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
8585
import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
8686
import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
8787
import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
88+
import { DebugView } from "../debug/DebugView";
89+
import {
90+
useSetting,
91+
showDebugView as showDebugViewSetting,
92+
} from "../settings/settings";
8893

8994
const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
9095

@@ -494,47 +499,54 @@ export const InCallView: FC<InCallViewProps> = ({
494499
);
495500
}
496501

502+
const [showDebugView] = useSetting(showDebugViewSetting);
503+
497504
return (
498-
<div className={styles.inRoom} ref={containerRef}>
499-
{windowMode !== "pip" &&
500-
windowMode !== "flat" &&
501-
(hideHeader ? (
502-
// Cosmetic header to fill out space while still affecting the bounds
503-
// of the grid
504-
<div
505-
className={classNames(styles.header, styles.filler)}
506-
ref={headerRef}
507-
/>
508-
) : (
509-
<Header className={styles.header} ref={headerRef}>
510-
<LeftNav>
511-
<RoomHeaderInfo
512-
id={matrixInfo.roomId}
513-
name={matrixInfo.roomName}
514-
avatarUrl={matrixInfo.roomAvatar}
515-
encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
516-
participantCount={participantCount}
517-
/>
518-
</LeftNav>
519-
<RightNav>
520-
{!reducedControls && showControls && onShareClick !== null && (
521-
<InviteButton onClick={onShareClick} />
522-
)}
523-
</RightNav>
524-
</Header>
525-
))}
526-
<RoomAudioRenderer />
527-
{renderContent()}
528-
{footer}
529-
{!noControls && <RageshakeRequestModal {...rageshakeRequestModalProps} />}
530-
<SettingsModal
531-
client={client}
532-
roomId={rtcSession.room.roomId}
533-
open={settingsModalOpen}
534-
onDismiss={closeSettings}
535-
tab={settingsTab}
536-
onTabChange={setSettingsTab}
537-
/>
505+
<div className={styles.debugViewContainer}>
506+
{showDebugView && <DebugView rtcSession={rtcSession} client={client} />}
507+
<div className={styles.inRoom} ref={containerRef}>
508+
{windowMode !== "pip" &&
509+
windowMode !== "flat" &&
510+
(hideHeader ? (
511+
// Cosmetic header to fill out space while still affecting the bounds
512+
// of the grid
513+
<div
514+
className={classNames(styles.header, styles.filler)}
515+
ref={headerRef}
516+
/>
517+
) : (
518+
<Header className={styles.header} ref={headerRef}>
519+
<LeftNav>
520+
<RoomHeaderInfo
521+
id={matrixInfo.roomId}
522+
name={matrixInfo.roomName}
523+
avatarUrl={matrixInfo.roomAvatar}
524+
encrypted={matrixInfo.e2eeSystem.kind !== E2eeType.NONE}
525+
participantCount={participantCount}
526+
/>
527+
</LeftNav>
528+
<RightNav>
529+
{!reducedControls && showControls && onShareClick !== null && (
530+
<InviteButton onClick={onShareClick} />
531+
)}
532+
</RightNav>
533+
</Header>
534+
))}
535+
<RoomAudioRenderer />
536+
{renderContent()}
537+
{footer}
538+
{!noControls && (
539+
<RageshakeRequestModal {...rageshakeRequestModalProps} />
540+
)}
541+
<SettingsModal
542+
client={client}
543+
roomId={rtcSession.room.roomId}
544+
open={settingsModalOpen}
545+
onDismiss={closeSettings}
546+
tab={settingsTab}
547+
onTabChange={setSettingsTab}
548+
/>
549+
</div>
538550
</div>
539551
);
540552
};

‎src/settings/SettingsModal.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import {
4545
optInAnalytics as optInAnalyticsSetting,
4646
developerSettingsTab as developerSettingsTabSetting,
4747
duplicateTiles as duplicateTilesSetting,
48+
showDebugView as showDebugViewSetting,
4849
} from "./settings";
4950
import { isFirefox } from "../Platform";
5051

@@ -83,6 +84,8 @@ export const SettingsModal: FC<Props> = ({
8384
);
8485
const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
8586

87+
const [showDebugView, setShowDebugView] = useSetting(showDebugViewSetting);
88+
8689
// Generate a `SelectInput` with a list of devices for a given device kind.
8790
const generateDeviceSelection = (
8891
devices: MediaDevice,
@@ -260,6 +263,20 @@ export const SettingsModal: FC<Props> = ({
260263
)}
261264
/>
262265
</FieldRow>
266+
<FieldRow>
267+
<InputField
268+
id="showDebugView"
269+
type="checkbox"
270+
label={t("settings.show_debug_view")}
271+
checked={showDebugView}
272+
onChange={useCallback(
273+
(event: ChangeEvent<HTMLInputElement>): void => {
274+
setShowDebugView(event.target.checked);
275+
},
276+
[setShowDebugView],
277+
)}
278+
/>
279+
</FieldRow>
263280
</TabItem>
264281
);
265282

‎src/settings/settings.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ export const developerSettingsTab = new Setting(
7878

7979
export const duplicateTiles = new Setting("duplicate-tiles", 0);
8080

81+
export const showDebugView = new Setting("show-debug-view", false);
82+
8183
export const audioInput = new Setting<string | undefined>(
8284
"audio-input",
8385
undefined,

0 commit comments

Comments
 (0)