From 0c55a6c5bf71d4dfc47b9d06a1f5716ac6d44f69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 12 Jun 2021 11:50:16 +0200
Subject: [PATCH] Add presenting text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/voip/_CallView.scss      | 20 ++++++++++++++++++++
 src/components/views/voip/CallView.tsx | 16 ++++++++++++++++
 src/i18n/strings/en_EN.json            |  1 +
 3 files changed, 37 insertions(+)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 21c948511d..d49891ca6b 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/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;
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 452bac2b99..5e33ca10e1 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/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}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5e5de72a0d..52a1d99f32 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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",