nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Remember whether sidebar is shown for calls when switching rooms (#30262)

Browse Source 
* Remember whether sidebar is shown for calls when switching rooms

Stores the sidebar state per-room in LegacyCallHandler, along with other details about calls.

* Hide the Show/Hide Sidebar from the Picture-in-Picture preview

The toggle sidebar button currently does nothing in PIP mode, since PIP mode never shows a sidebar (even when the call is made fullscreen from the PIP preview)

* Add test for Show/Hide Sidebar feature

* Add more tests for LegacyCallView and LegacyCallViewForRoom

Also, fix issue where LegacyCallViewForRoom used roomId and not callId for checking for sidebar state
This commit is contained in:
Bojidar Marinov
2025-09-01 17:33:33 +03:00
committed by GitHub
parent 4d48d1b2f2
commit 8903927e0c
7 changed files with 228 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/LegacyCallHandler.tsx
View File

@@ -112,6 +112,7 @@ export enum LegacyCallHandlerEvent {
CallsChanged = "calls_changed",
CallChangeRoom = "call_change_room",
SilencedCallsChanged = "silenced_calls_changed",
ShownSidebarsChanged = "shown_sidebars_changed",
CallState = "call_state",
ProtocolSupport = "protocol_support",
}
@@ -120,6 +121,7 @@ type EventEmitterMap = {
[LegacyCallHandlerEvent.CallsChanged]: (calls: Map<string, MatrixCall>) => void;
[LegacyCallHandlerEvent.CallChangeRoom]: (call: MatrixCall) => void;
[LegacyCallHandlerEvent.SilencedCallsChanged]: (calls: Set<string>) => void;
[LegacyCallHandlerEvent.ShownSidebarsChanged]: (sidebarsShown: Map<string, boolean>) => void;
[LegacyCallHandlerEvent.CallState]: (mappedRoomId: string | null, status: CallState) => void;
[LegacyCallHandlerEvent.ProtocolSupport]: () => void;
};
@@ -144,6 +146,8 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
private silencedCalls = new Set<string>(); // callIds
private shownSidebars = new Map<string, boolean>(); // callId (call) -> sidebar show
private backgroundAudio = new BackgroundAudio();
private playingSources: Record<string, AudioBufferSourceNode> = {}; // Record them for stopping
@@ -240,6 +244,15 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
return false;
}
public setCallSidebarShown(callId: string, sidebarShown: boolean): void {
this.shownSidebars.set(callId, sidebarShown);
this.emit(LegacyCallHandlerEvent.ShownSidebarsChanged, this.shownSidebars);
}
public isCallSidebarShown(callId?: string): boolean {
return !!callId && (this.shownSidebars.get(callId) ?? true);
}
private async checkProtocols(maxTries: number): Promise<void> {
try {
const protocols = await MatrixClientPeg.safeGet().getThirdpartyProtocols();

1
src/components/structures/PipContainer.tsx
View File

@@ -245,6 +245,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
secondaryCall={this.state.secondaryCall}
pipMode={pipMode}
onResize={onResize}
sidebarShown={false}
/>
));
}

30
src/components/views/voip/LegacyCallView.tsx
View File

@@ -50,6 +50,10 @@ interface IProps {
onMouseDownOnHeader?: (event: React.MouseEvent<Element, MouseEvent>) => void;
showApps?: boolean;
sidebarShown: boolean;
setSidebarShown?: (sidebarShown: boolean) => void;
}
interface IState {
@@ -62,7 +66,6 @@ interface IState {
primaryFeed?: CallFeed;
secondaryFeed?: CallFeed;
sidebarFeeds: Array<CallFeed>;
sidebarShown: boolean;
}
function getFullScreenElement(): Element | null {
@@ -97,7 +100,6 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
primaryFeed: primary,
secondaryFeed: secondary,
sidebarFeeds: sidebar,
sidebarShown: true,
};
}
@@ -269,8 +271,9 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
isScreensharing = await this.props.call.setScreensharingEnabled(true);
}
this.props.setSidebarShown?.(true);
this.setState({
sidebarShown: true,
screensharing: isScreensharing,
});
};
@@ -320,12 +323,12 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
};
private onToggleSidebar = (): void => {
this.setState({ sidebarShown: !this.state.sidebarShown });
this.props.setSidebarShown?.(!this.props.sidebarShown);
};
private renderCallControls(): JSX.Element {
const { call, pipMode } = this.props;
const { callState, micMuted, vidMuted, screensharing, sidebarShown, secondaryFeed, sidebarFeeds } = this.state;
const { call, pipMode, sidebarShown } = this.props;
const { callState, micMuted, vidMuted, screensharing, secondaryFeed, sidebarFeeds } = this.state;
// If SDPStreamMetadata isn't supported don't show video mute button in voice calls
const vidMuteButtonShown = call.opponentSupportsSDPStreamMetadata() || call.hasLocalUserMediaVideoTrack;
@@ -337,7 +340,8 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
(call.opponentSupportsSDPStreamMetadata() || call.hasLocalUserMediaVideoTrack) &&
call.state === CallState.Connected;
// Show the sidebar button only if there is something to hide/show
const sidebarButtonShown = (secondaryFeed && !secondaryFeed.isVideoMuted()) || sidebarFeeds.length > 0;
const sidebarButtonShown =
!pipMode && ((secondaryFeed && !secondaryFeed.isVideoMuted()) || sidebarFeeds.length > 0);
// The dial pad & 'more' button actions are only relevant in a connected call
const contextMenuButtonShown = callState === CallState.Connected;
const dialpadButtonShown = callState === CallState.Connected && call.opponentSupportsDTMF();
@@ -372,7 +376,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
}
private renderToast(): JSX.Element | null {
const { call } = this.props;
const { call, sidebarShown } = this.props;
const someoneIsScreensharing = call.getFeeds().some((feed) => {
return feed.purpose === SDPStreamMetadataPurpose.Screenshare;
});
@@ -380,7 +384,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
if (!someoneIsScreensharing) return null;
const isScreensharing = call.isScreensharing();
const { primaryFeed, sidebarShown } = this.state;
const { primaryFeed } = this.state;
const sharerName = primaryFeed?.getMember()?.name;
if (!sharerName) return null;
@@ -393,8 +397,8 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
}
private renderContent(): JSX.Element {
const { pipMode, call, onResize } = this.props;
const { isLocalOnHold, isRemoteOnHold, sidebarShown, primaryFeed, secondaryFeed, sidebarFeeds } = this.state;
const { pipMode, call, onResize, sidebarShown } = this.props;
const { isLocalOnHold, isRemoteOnHold, primaryFeed, secondaryFeed, sidebarFeeds } = this.state;
const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined;
@@ -537,8 +541,8 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
}
public render(): React.ReactNode {
const { call, secondaryCall, pipMode, showApps, onMouseDownOnHeader } = this.props;
const { sidebarShown, sidebarFeeds } = this.state;
const { call, secondaryCall, pipMode, showApps, onMouseDownOnHeader, sidebarShown } = this.props;
const { sidebarFeeds } = this.state;
const client = MatrixClientPeg.safeGet();
const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);

24
src/components/views/voip/LegacyCallViewForRoom.tsx
View File

@@ -25,6 +25,7 @@ interface IProps {
interface IState {
call: MatrixCall | null;
sidebarShown: boolean;
}
/*
@@ -34,19 +35,23 @@ interface IState {
export default class LegacyCallViewForRoom extends React.Component<IProps, IState> {
public constructor(props: IProps) {
super(props);
const call = this.getCall();
this.state = {
call: this.getCall(),
call,
sidebarShown: !!call && LegacyCallHandler.instance.isCallSidebarShown(call.callId),
};
}
public componentDidMount(): void {
LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.updateCall);
LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.ShownSidebarsChanged, this.updateCall);
}
public componentWillUnmount(): void {
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCall);
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.ShownSidebarsChanged, this.updateCall);
}
private updateCall = (): void => {
@@ -54,6 +59,10 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
if (newCall !== this.state.call) {
this.setState({ call: newCall });
}
const newSidebarShown = !!newCall && LegacyCallHandler.instance.isCallSidebarShown(newCall.callId);
if (newSidebarShown !== this.state.sidebarShown) {
this.setState({ sidebarShown: newSidebarShown });
}
};
private getCall(): MatrixCall | null {
@@ -75,6 +84,11 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
this.props.resizeNotifier.stopResizing();
};
private setSidebarShown = (sidebarShown: boolean): void => {
if (!this.state.call) return;
LegacyCallHandler.instance.setCallSidebarShown(this.state.call.callId, sidebarShown);
};
public render(): React.ReactNode {
if (!this.state.call) return null;
@@ -99,7 +113,13 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
className="mx_LegacyCallViewForRoom_ResizeWrapper"
handleClasses={{ bottom: "mx_LegacyCallViewForRoom_ResizeHandle" }}
>
<LegacyCallView call={this.state.call} pipMode={false} showApps={this.props.showApps} />
<LegacyCallView
call={this.state.call}
pipMode={false}
showApps={this.props.showApps}
sidebarShown={this.state.sidebarShown}
setSidebarShown={this.setSidebarShown}
/>
</Resizable>
</div>
);