mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 03:35:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Support hiding sidebar

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-06-12 17:20:13 +02:00
parent 65c477f45f
commit 60ab7aaed5
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
2 changed files with 44 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/voip/_CallView.scss
View file

@ -386,6 +386,18 @@ limitations under the License.
}
}
.mx_CallView_callControls_button_sidebarOn {
&::before {
background-image: url('$(res)/img/voip/sidebar-on.svg');
}
}
.mx_CallView_callControls_button_sidebarOff {
&::before {
background-image: url('$(res)/img/voip/sidebar-off.svg');
}
}
.mx_CallView_callControls_button_hangup {
&::before {
background-image: url('$(res)/img/voip/hangup.svg');

34
src/components/views/voip/CallView.tsx
View file

@ -67,6 +67,7 @@ interface IState {
showDialpad: boolean,
primaryFeed: CallFeed,
secondaryFeeds: Array<CallFeed>,
sidebarShown: boolean,
}
function getFullScreenElement() {
@ -127,6 +128,7 @@ export default class CallView extends React.Component<IProps, IState> {
showDialpad: false,
primaryFeed: primary,
secondaryFeeds: secondary,
sidebarShown: true,
}
this.updateCallListeners(null, this.props.call);
@ -428,6 +430,10 @@ export default class CallView extends React.Component<IProps, IState> {
});
}
private onToggleSidebar = () => {
this.setState({ sidebarShown: !this.state.sidebarShown });
}
private renderCallControls(): JSX.Element {
const micClasses = classNames({
mx_CallView_callControls_button: true,
@ -447,6 +453,12 @@ export default class CallView extends React.Component<IProps, IState> {
mx_CallView_callControls_button_screensharingOff: !this.state.screensharing,
});
const sidebarButtonClasses = classNames({
mx_CallView_callControls_button: true,
mx_CallView_callControls_button_sidebarOn: this.state.sidebarShown,
mx_CallView_callControls_button_sidebarOff: !this.state.sidebarShown,
});
// Put the other states of the mic/video icons in the document to make sure they're cached
// (otherwise the icon disappears briefly when toggled)
const micCacheClasses = classNames({
@ -496,6 +508,23 @@ export default class CallView extends React.Component<IProps, IState> {
);
}
// To show the sidebar we need secondary feeds, if we don't have them,
// we can hide this button. If we are in PiP, sidebar is also hidden, so
// we can hide the button too
let sidebarButton;
if (
(this.props.call.type === CallType.Video ||
this.state.primaryFeed?.purpose === SDPStreamMetadataPurpose.Screenshare) &&
!this.props.pipMode
) {
sidebarButton = (
<AccessibleButton
className={sidebarButtonClasses}
onClick={this.onToggleSidebar}
/>
);
}
// The dial pad & 'more' button actions are only relevant in a connected call
// When not connected, we have to put something there to make the flexbox alignment correct
const dialpadButton = this.state.callState === CallState.Connected ? <ContextMenuButton
@ -519,12 +548,13 @@ export default class CallView extends React.Component<IProps, IState> {
className={micClasses}
onClick={this.onMicMuteClick}
/>
{ vidMuteButton }
<AccessibleButton
className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
onClick={this.onHangupClick}
/>
{ vidMuteButton }
{ screensharingButton }
{ sidebarButton }
<div className={micCacheClasses} />
<div className={vidCacheClasses} />
{ contextMenuButton }
@ -589,7 +619,7 @@ export default class CallView extends React.Component<IProps, IState> {
}
let sidebar;
if (!isOnHold && !transfereeCall && !this.props.pipMode) {
if (!isOnHold && !transfereeCall && !this.props.pipMode && this.state.sidebarShown) {
sidebar = (
<CallViewSidebar
feeds={this.state.secondaryFeeds}