diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index 6c41d62548..eeef7bd621 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -75,7 +75,7 @@ limitations under the License. margin-left: auto; } -.mx_CallView_header_control_fullscreen { +.mx_CallView_header_button { display: inline-block; vertical-align: middle; cursor: pointer; @@ -90,10 +90,21 @@ limitations under the License. mask-repeat: no-repeat; mask-size: contain; mask-position: center; + } +} + +.mx_CallView_header_button_fullscreen { + &::before { mask-image: url('$(res)/img/element-icons/call/fullscreen.svg'); } } +.mx_CallView_header_button_expand { + &::before { + mask-image: url('$(res)/img/element-icons/call/expand.svg'); + } +} + .mx_CallView_header_roomName { font-weight: bold; font-size: 12px; diff --git a/res/img/element-icons/call/expand.svg b/res/img/element-icons/call/expand.svg new file mode 100644 index 0000000000..91ef4d8a76 --- /dev/null +++ b/res/img/element-icons/call/expand.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 9eacf0415d..c534a87d47 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -201,6 +201,13 @@ export default class CallView extends React.Component { }); }; + private onExpandClick = () => { + dis.dispatch({ + action: 'view_room', + room_id: this.state.call.roomId, + }); + }; + private onControlsHideTimer = () => { this.controlsHideTimer = null; this.setState({ @@ -355,7 +362,7 @@ export default class CallView extends React.Component { if (this.state.call.type === CallType.Video) { // if we're fullscreen, we don't want to set a maxHeight on the video element. const maxVideoHeight = getFullScreenElement() ? null : this.props.maxVideoHeight; - contentView =
+ contentView =
@@ -378,14 +385,22 @@ export default class CallView extends React.Component { let myClassName; let fullScreenButton; - if (this.state.call.type === CallType.Video) { - fullScreenButton =
; } + let expandButton; + if (!this.props.room) { + expandButton =
; + } + const headerControls =
{fullScreenButton} + {expandButton}
; let header: React.ReactNode;