Add presenting text

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/views/voip/_CallView.scss

@@ -68,6 +68,7 @@ limitations under the License.
 .mx_CallView_content {
     position: relative;
     display: flex;
+    justify-content: center;
     border-radius: 8px;
 }
 
@@ -299,6 +300,25 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_CallView_presenting {
+    opacity: 1;
+    transition: opacity 0.5s;
+
+    position: absolute;
+    margin-top: 18px;
+    padding: 4px 8px;
+    border-radius: 4px;
+
+    // Same on both themes
+    color: white;
+    background-color: #17191c;
+}
+
+.mx_CallView_presenting_hidden {
+    opacity: 0.001; // opacity 0 can cause a re-layout
+    pointer-events: none;
+}
+
 .mx_CallView_callControls_button {
     cursor: pointer;
     margin-left: 8px;

src/components/views/voip/CallView.tsx

@@ -708,12 +708,28 @@ export default class CallView extends React.Component<IProps, IState> {
                 mx_CallView_video: true,
             });
 
+            let presenting;
+            if (this.state.primaryFeed?.purpose === SDPStreamMetadataPurpose.Screenshare) {
+                const presentingClasses = classNames({
+                    mx_CallView_presenting: true,
+                    mx_CallView_presenting_hidden: !this.state.controlsVisible,
+                });
+                const sharerName = this.state.primaryFeed.getMember().name;
+
+                presenting = (
+                    <div className={presentingClasses}>
+                        { _t('%(sharerName)s is presenting', {sharerName}) }
+                    </div>
+                );
+            }
+
             contentView = (
                 <div
                     className={containerClasses}
                     ref={this.contentRef}
                     onMouseMove={this.onMouseMove}
                 >
+                    { presenting }
                     { sidebar }
                     <VideoFeed
                         feed={this.state.primaryFeed}

src/i18n/strings/en_EN.json

@@ -894,6 +894,7 @@
     "You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
     "%(peerName)s held the call": "%(peerName)s held the call",
     "Connecting": "Connecting",
+    "%(sharerName)s is presenting": "%(sharerName)s is presenting",
     "Video Call": "Video Call",
     "Voice Call": "Voice Call",
     "Fill Screen": "Fill Screen",