mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-16 06:31:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add button to screenshare

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-05-07 21:35:32 +02:00
parent 1f27354439
commit 5b2f941ce2
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,6 +32,9 @@ import { avatarUrlForMember } from '../../../Avatar';
import DialpadContextMenu from '../context_menus/DialpadContextMenu';
import { CallFeed } from 'matrix-js-sdk/src/webrtc/callFeed';
import {replaceableComponent} from "../../../utils/replaceableComponent";
import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker";
import Modal from '../../../Modal';
import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
const FEED_CLASS_NAMES = [
"mx_VideoFeed_primary",
@ -63,6 +66,7 @@ interface IState {
isRemoteOnHold: boolean,
micMuted: boolean,
vidMuted: boolean,
screensharing: boolean,
callState: CallState,
controlsVisible: boolean,
showMoreMenu: boolean,
@ -119,6 +123,7 @@ export default class CallView extends React.Component<IProps, IState> {
isRemoteOnHold: this.props.call.isRemoteOnHold(),
micMuted: this.props.call.isMicrophoneMuted(),
vidMuted: this.props.call.isLocalVideoMuted(),
screensharing: this.props.call.isScreensharing(),
callState: this.props.call.state,
controlsVisible: true,
showMoreMenu: false,
@ -292,6 +297,18 @@ export default class CallView extends React.Component<IProps, IState> {
this.setState({vidMuted: newVal});
}
private onScreenshareClick = async () => {
const isScreensharing = await this.props.call.setScreensharingEnabled(
!this.state.screensharing,
async (): Promise<DesktopCapturerSource> => {
const {finished} = Modal.createDialog(DesktopCapturerSourcePicker);
const [source] = await finished;
return source;
},
);
this.setState({screensharing: isScreensharing})
}
private onMoreClick = () => {
if (this.controlsHideTimer) {
clearTimeout(this.controlsHideTimer);
@ -452,6 +469,12 @@ export default class CallView extends React.Component<IProps, IState> {
mx_CallView_callControls_button_vidOff: this.state.vidMuted,
});
const screensharingClasses = classNames({
mx_CallView_callControls_button: true,
mx_CallView_callControls_button_screensharingOn: this.state.screensharing,
mx_CallView_callControls_button_screensharingOff: !this.state.screensharing,
});
// 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({
@ -478,6 +501,11 @@ export default class CallView extends React.Component<IProps, IState> {
onClick={this.onVidMuteClick}
/> : null;
const screensharingButton = this.props.call.opponentSupportsSDPStreamMetadata() ? <AccessibleButton
className={screensharingClasses}
onClick={this.onScreenshareClick}
/> : null;
// 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
@ -512,6 +540,7 @@ export default class CallView extends React.Component<IProps, IState> {
}}
/>
{vidMuteButton}
{screensharingButton}
<div className={micCacheClasses} />
<div className={vidCacheClasses} />
{contextMenuButton}