Update group call inspector

This commit is contained in:
Robert Long 2022-01-14 13:40:02 -08:00
parent 3d571a00c6
commit 5819654bc7
2 changed files with 38 additions and 30 deletions

View file

@ -55,26 +55,17 @@ function getUserName(userId) {
} }
function formatContent(type, content) { function formatContent(type, content) {
if (type === "m.call.invite") { if (type === "m.call.hangup") {
return `callId: ${content.call_id.slice(-4)} deviceId: ${
content.device_id
} sessionId: ${content.session_id}`;
} else if (type === "m.call.answer") {
return `callId: ${content.call_id.slice(-4)} deviceId: ${
content.device_id
} sessionId: ${content.session_id}`;
} else if (type === "m.call.select_answer") {
return `callId: ${content.call_id.slice(-4)} deviceId: ${
content.device_id
} sessionId: ${content.session_id}`;
} else if (type === "m.call.candidates") {
return `callId: ${content.call_id.slice(-4)} deviceId: ${
content.device_id
} sessionId: ${content.session_id}`;
} else if (type === "m.call.hangup") {
return `callId: ${content.call_id.slice(-4)} reason: ${ return `callId: ${content.call_id.slice(-4)} reason: ${
content.reason content.reason
} deviceId: ${content.device_id} sessionId: ${content.session_id}`; } senderSID: ${content.sender_session_id} destSID: ${
content.dest_session_id
}`;
}
if (type.startsWith("m.call.")) {
return `callId: ${content.call_id?.slice(-4)} senderSID: ${
content.sender_session_id
} destSID: ${content.dest_session_id}`;
} else if (type === "org.matrix.msc3401.call.member") { } else if (type === "org.matrix.msc3401.call.member") {
const call = const call =
content["m.calls"] && content["m.calls"] &&
@ -85,9 +76,9 @@ function formatContent(type, content) {
call["m.devices"] && call["m.devices"] &&
call["m.devices"].length > 0 && call["m.devices"].length > 0 &&
call["m.devices"][0]; call["m.devices"][0];
return `callId: ${call && call["m.call_id"].slice(-4)} deviceId: ${ return `callId: ${call && call["m.call_id"].slice(-4)} sessionId: ${
device && device.device_id device && device.session_id
} sessionId: ${device && device.session_id}`; }`;
} else { } else {
return ""; return "";
} }
@ -125,8 +116,8 @@ function SequenceDiagramViewer({
events events
? events ? events
.map( .map(
({ to, from, timestamp, type, content }) => ({ to, from, timestamp, type, content, ignored }) =>
`${getUserName(from)} ->> ${getUserName( `${getUserName(from)} ${ignored ? "-x" : "->>"} ${getUserName(
to to
)}: ${formatTimestamp(timestamp)} ${type} ${formatContent( )}: ${formatTimestamp(timestamp)} ${type} ${formatContent(
type, type,
@ -186,6 +177,7 @@ function reducer(state, action) {
type: event.getType(), type: event.getType(),
content: event.getContent(), content: event.getContent(),
timestamp: event.getTs() || Date.now(), timestamp: event.getTs() || Date.now(),
ignored: false,
}, },
]); ]);
} }
@ -198,6 +190,7 @@ function reducer(state, action) {
type: event.getType(), type: event.getType(),
content: event.getContent(), content: event.getContent(),
timestamp: event.getTs() || Date.now(), timestamp: event.getTs() || Date.now(),
ignored: false,
}, },
]); ]);
} }
@ -223,6 +216,7 @@ function reducer(state, action) {
const eventsByUserId = new Map(state.eventsByUserId); const eventsByUserId = new Map(state.eventsByUserId);
const fromId = event.getSender(); const fromId = event.getSender();
const toId = state.localUserId; const toId = state.localUserId;
const content = event.getContent();
const remoteUserIds = eventsByUserId.has(fromId) const remoteUserIds = eventsByUserId.has(fromId)
? state.remoteUserIds ? state.remoteUserIds
@ -234,8 +228,9 @@ function reducer(state, action) {
from: fromId, from: fromId,
to: toId, to: toId,
type: event.getType(), type: event.getType(),
content: event.getContent(), content,
timestamp: event.getTs() || Date.now(), timestamp: event.getTs() || Date.now(),
ignored: state.localSessionId !== content.dest_session_id,
}, },
]); ]);
@ -259,6 +254,7 @@ function reducer(state, action) {
type: event.eventType, type: event.eventType,
content: event.content, content: event.content,
timestamp: Date.now(), timestamp: Date.now(),
ignored: false,
}, },
]); ]);
@ -271,8 +267,8 @@ function reducer(state, action) {
function useGroupCallState(client, groupCall, pollCallStats) { function useGroupCallState(client, groupCall, pollCallStats) {
const [state, dispatch] = useReducer(reducer, { const [state, dispatch] = useReducer(reducer, {
groupCall,
localUserId: client.getUserId(), localUserId: client.getUserId(),
localSessionId: client.getSessionId(),
eventsByUserId: new Map(), eventsByUserId: new Map(),
remoteUserIds: [], remoteUserIds: [],
callStateEvent: null, callStateEvent: null,
@ -397,7 +393,7 @@ function useGroupCallState(client, groupCall, pollCallStats) {
} }
export function GroupCallInspector({ client, groupCall, show }) { export function GroupCallInspector({ client, groupCall, show }) {
const [currentTab, setCurrentTab] = useState("inspector"); const [currentTab, setCurrentTab] = useState("sequence-diagrams");
const [selectedUserId, setSelectedUserId] = useState(); const [selectedUserId, setSelectedUserId] = useState();
const state = useGroupCallState(client, groupCall, show); const state = useGroupCallState(client, groupCall, show);
@ -412,10 +408,10 @@ export function GroupCallInspector({ client, groupCall, show }) {
className={styles.inspector} className={styles.inspector}
> >
<div className={styles.toolbar}> <div className={styles.toolbar}>
<button onClick={() => setCurrentTab("inspector")}>Inspector</button>
<button onClick={() => setCurrentTab("sequence-diagrams")}> <button onClick={() => setCurrentTab("sequence-diagrams")}>
Sequence Diagrams Sequence Diagrams
</button> </button>
<button onClick={() => setCurrentTab("inspector")}>Inspector</button>
</div> </div>
{currentTab === "sequence-diagrams" && ( {currentTab === "sequence-diagrams" && (
<SequenceDiagramViewer <SequenceDiagramViewer

View file

@ -15,7 +15,19 @@ export function GroupCallView({
groupCall, groupCall,
simpleGrid, simpleGrid,
}) { }) {
const [showInspector, setShowInspector] = useState(false); const [showInspector, setShowInspector] = useState(
() => !!localStorage.getItem("matrix-group-call-inspector")
);
const onChangeShowInspector = useCallback((show) => {
setShowInspector(show);
if (show) {
localStorage.setItem("matrix-group-call-inspector", "true");
} else {
localStorage.removeItem("matrix-group-call-inspector");
}
}, []);
const { const {
state, state,
error, error,
@ -75,7 +87,7 @@ export function GroupCallView({
localScreenshareFeed={localScreenshareFeed} localScreenshareFeed={localScreenshareFeed}
screenshareFeeds={screenshareFeeds} screenshareFeeds={screenshareFeeds}
simpleGrid={simpleGrid} simpleGrid={simpleGrid}
setShowInspector={setShowInspector} setShowInspector={onChangeShowInspector}
showInspector={showInspector} showInspector={showInspector}
roomId={roomId} roomId={roomId}
/> />
@ -102,7 +114,7 @@ export function GroupCallView({
localVideoMuted={localVideoMuted} localVideoMuted={localVideoMuted}
toggleLocalVideoMuted={toggleLocalVideoMuted} toggleLocalVideoMuted={toggleLocalVideoMuted}
toggleMicrophoneMuted={toggleMicrophoneMuted} toggleMicrophoneMuted={toggleMicrophoneMuted}
setShowInspector={setShowInspector} setShowInspector={onChangeShowInspector}
showInspector={showInspector} showInspector={showInspector}
roomId={roomId} roomId={roomId}
/> />