Add support for screen sharing in 1:1 calls

res/css/views/voip/_CallView.scss

@@ -291,6 +291,7 @@ limitations under the License.
     width: 100%;
     opacity: 1;
     transition: opacity 0.5s;
+    z-index: 200; // To be above _all_ feeds
 }
 
 .mx_CallView_callControls_hidden {
@@ -353,6 +354,18 @@ limitations under the License.
     }
 }
 
+.mx_CallView_callControls_button_screensharingOn {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-on.svg');
+    }
+}
+
+.mx_CallView_callControls_button_screensharingOff {
+    &::before {
+        background-image: url('$(res)/img/voip/screensharing-off.svg');
+    }
+}
+
 .mx_CallView_callControls_button_hangup {
     &::before {
         background-image: url('$(res)/img/voip/hangup.svg');

res/css/views/voip/_VideoFeed.scss

@@ -20,8 +20,7 @@ limitations under the License.
     background-color: $inverted-bg-color;
 }
 
-
-.mx_VideoFeed_remote {
+.mx_VideoFeed_primary {
     width: 100%;
     height: 100%;
     display: flex;
@@ -33,12 +32,10 @@ limitations under the License.
     }
 }
 
-.mx_VideoFeed_local {
+.mx_VideoFeed_nonPrimary {
     max-width: 25%;
     max-height: 25%;
     position: absolute;
-    right: 10px;
-    top: 10px;
     z-index: 100;
     border-radius: 4px;
 
@@ -47,6 +44,21 @@ limitations under the License.
     }
 }
 
+.mx_VideoFeed_secondary {
+    right: 10px;
+    top: 10px;
+}
+
+.mx_VideoFeed_tertiary {
+    right: 10px;
+    bottom: 10px;
+}
+
+.mx_VideoFeed_quaternary {
+    left: 10px;
+    top: 10px;
+}
+
 .mx_VideoFeed_mirror {
     transform: scale(-1, 1);
 }

src/CallHandler.tsx

@@ -56,7 +56,6 @@ limitations under the License.
 import React from 'react';
 
 import {MatrixClientPeg} from './MatrixClientPeg';
-import PlatformPeg from './PlatformPeg';
 import Modal from './Modal';
 import { _t } from './languageHandler';
 import dis from './dispatcher/dispatcher';
@@ -80,7 +79,6 @@ import CountlyAnalytics from "./CountlyAnalytics";
 import {UIFeature} from "./settings/UIFeature";
 import { CallError } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
-import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker"
 import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
@@ -129,14 +127,9 @@ interface ThirdpartyLookupResponse {
     fields: ThirdpartyLookupResponseFields,
 }
 
-// Unlike 'CallType' in js-sdk, this one includes screen sharing
-// (because a screen sharing call is only a screen sharing call to the caller,
-// to the callee it's just a video call, at least as far as the current impl
-// is concerned).
 export enum PlaceCallType {
     Voice = 'voice',
     Video = 'video',
-    ScreenSharing = 'screensharing',
 }
 
 export enum CallHandlerEvent {
@@ -689,25 +682,6 @@ export default class CallHandler extends EventEmitter {
             call.placeVoiceCall();
         } else if (type === 'video') {
             call.placeVideoCall();
-        } else if (type === PlaceCallType.ScreenSharing) {
-            const screenCapErrorString = PlatformPeg.get().screenCaptureErrorString();
-            if (screenCapErrorString) {
-                this.removeCallForRoom(roomId);
-                console.log("Can't capture screen: " + screenCapErrorString);
-                Modal.createTrackedDialog('Call Handler', 'Unable to capture screen', ErrorDialog, {
-                    title: _t('Unable to capture screen'),
-                    description: screenCapErrorString,
-                });
-                return;
-            }
-
-            call.placeScreenSharingCall(
-                async (): Promise<DesktopCapturerSource> => {
-                    const {finished} = Modal.createDialog(DesktopCapturerSourcePicker);
-                    const [source] = await finished;
-                    return source;
-                },
-            );
         } else {
             console.error("Unknown conf call type: " + type);
         }

src/components/views/rooms/RoomHeader.js

@@ -32,6 +32,8 @@ import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
 import {PlaceCallType} from "../../../CallHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import Modal from '../../../Modal';
+import InfoDialog from "../dialogs/InfoDialog";
 
 @replaceableComponent("views.rooms.RoomHeader")
 export default class RoomHeader extends React.Component {
@@ -117,6 +119,14 @@ export default class RoomHeader extends React.Component {
         return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
     }
 
+    _displayInfoDialogAboutScreensharing() {
+        Modal.createDialog(InfoDialog, {
+            title: _t("Screensharing has changed"),
+            description: _t("You don't have to shift-click anymore! You can now share " +
+            "your screen in any video call and in voice calls if other side supports it."),
+        });
+    }
+
     render() {
         let searchStatus = null;
         let cancelButton = null;
@@ -239,8 +249,8 @@ export default class RoomHeader extends React.Component {
             videoCallButton =
                 <AccessibleTooltipButton
                     className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
-                    onClick={(ev) => this.props.onCallPlaced(
-                        ev.shiftKey ? PlaceCallType.ScreenSharing : PlaceCallType.Video)}
+                    onClick={(ev) => ev.shiftKey ?
+                        this._displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
                     title={_t("Video call")} />;
         }
 

src/components/views/voip/AudioFeed.tsx

@@ -23,9 +23,21 @@ interface IProps {
     feed: CallFeed,
 }
 
-export default class AudioFeed extends React.Component<IProps> {
+interface IState {
+    audioMuted: boolean;
+}
+
+export default class AudioFeed extends React.Component<IProps, IState> {
     private element = createRef<HTMLAudioElement>();
 
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            audioMuted: this.props.feed.isAudioMuted(),
+        };
+    }
+
     componentDidMount() {
         this.props.feed.addListener(CallFeedEvent.NewStream, this.onNewStream);
         this.playMedia();
@@ -38,6 +50,7 @@ export default class AudioFeed extends React.Component<IProps> {
 
     private playMedia() {
         const element = this.element.current;
+        if (!element) return;
         const audioOutput = CallMediaHandler.getAudioOutput();
 
         if (audioOutput) {
@@ -75,6 +88,7 @@ export default class AudioFeed extends React.Component<IProps> {
 
     private stopMedia() {
         const element = this.element.current;
+        if (!element) return;
 
         element.pause();
         element.src = null;
@@ -86,10 +100,16 @@ export default class AudioFeed extends React.Component<IProps> {
     }
 
     private onNewStream = () => {
+        this.setState({
+            audioMuted: this.props.feed.isAudioMuted(),
+        });
         this.playMedia();
     };
 
     render() {
+        // Do not render the audio element if there is no audio track
+        if (this.state.audioMuted) return null;
+
         return (
             <audio ref={this.element} />
         );