From cb89dd408c260a14bd9726fd65fe3f6f5acf2ecb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 29 Jul 2021 15:05:26 +0200
Subject: [PATCH] Use mic mute icons
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        | 10 +++-
 res/css/views/voip/_CallViewSidebar.scss | 11 +++++
 res/css/views/voip/_VideoFeed.scss       | 48 +++++++++++++++---
 src/components/views/voip/VideoFeed.tsx  | 63 ++++++++++++++++--------
 4 files changed, 103 insertions(+), 29 deletions(-)

diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 104e2993d8..eff865f20c 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -76,16 +76,22 @@ limitations under the License.
 
         &.mx_VideoFeed_voice {
             // We don't want to collide with the call controls that have 52px of height
-            padding-bottom: 52px;
+            margin-bottom: 52px;
             background-color: $inverted-bg-color;
             display: flex;
             justify-content: center;
             align-items: center;
         }
 
-        &.mx_VideoFeed_video {
+        .mx_VideoFeed_video {
+            height: 100%;
             background-color: #000;
         }
+
+        .mx_VideoFeed_mic {
+            left: 10px;
+            bottom: 10px;
+        }
     }
 }
 
diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.scss
index 79bf3cbf09..892a137a32 100644
--- a/res/css/views/voip/_CallViewSidebar.scss
+++ b/res/css/views/voip/_CallViewSidebar.scss
@@ -35,12 +35,23 @@ limitations under the License.
         width: 100%;
 
         &.mx_VideoFeed_voice {
+            border-radius: 4px;
+
             display: flex;
             align-items: center;
             justify-content: center;
 
             aspect-ratio: 16 / 9;
         }
+
+        .mx_VideoFeed_video {
+            border-radius: 4px;
+        }
+
+        .mx_VideoFeed_mic {
+            left: 6px;
+            bottom: 6px;
+        }
     }
 
     &.mx_CallViewSidebar_pipMode {
diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss
index 07a4a0e530..3a0f62636e 100644
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -15,18 +15,52 @@ limitations under the License.
 */
 
 .mx_VideoFeed {
-    border-radius: 4px;
-
+    overflow: hidden;
+    position: relative;
 
     &.mx_VideoFeed_voice {
         background-color: $inverted-bg-color;
     }
 
-    &.mx_VideoFeed_video {
+    .mx_VideoFeed_video {
+        width: 100%;
         background-color: transparent;
+
+        &.mx_VideoFeed_video_mirror {
+            transform: scale(-1, 1);
+        }
+    }
+
+    .mx_VideoFeed_mic {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 24px;
+        height: 24px;
+
+        background-color: rgba(0, 0, 0, 0.5); // Same on both themes
+        border-radius: 100%;
+
+        &::before {
+            position: absolute;
+            content: "";
+            width: 16px;
+            height: 16px;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-position: center;
+            background-color: white; // Same on both themes
+            border-radius: 7px;
+        }
+
+        &.mx_VideoFeed_mic_muted::before {
+            mask-image: url('$(res)/img/voip/mic-muted.svg');
+        }
+
+        &.mx_VideoFeed_mic_unmuted::before {
+            mask-image: url('$(res)/img/voip/mic-unmuted.svg');
+        }
     }
 }
-
-.mx_VideoFeed_mirror {
-    transform: scale(-1, 1);
-}
diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx
index af2fd92016..09d0c97a0d 100644
--- a/src/components/views/voip/VideoFeed.tsx
+++ b/src/components/views/voip/VideoFeed.tsx
@@ -22,7 +22,7 @@ import { CallFeed, CallFeedEvent } from 'matrix-js-sdk/src/webrtc/callFeed';
 import { logger } from 'matrix-js-sdk/src/logger';
 import MemberAvatar from "../avatars/MemberAvatar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { objectHasDiff } from '../../../utils/objects';
+import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
 
 interface IProps {
     call: MatrixCall;
@@ -165,39 +165,62 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
     };
 
     render() {
-        const videoClasses = {
-            mx_VideoFeed: true,
+        const { pipMode, primary, feed } = this.props;
+
+        const wrapperClasses = classnames("mx_VideoFeed", {
             mx_VideoFeed_voice: this.state.videoMuted,
-            mx_VideoFeed_video: !this.state.videoMuted,
-            mx_VideoFeed_mirror: (
-                this.props.feed.isLocal() &&
-                SettingsStore.getValue('VideoView.flipVideoHorizontally')
-            ),
-        };
+        });
+        const micIconClasses = classnames("mx_VideoFeed_mic", {
+            mx_VideoFeed_mic_muted: this.state.audioMuted,
+            mx_VideoFeed_mic_unmuted: !this.state.audioMuted,
+        });
 
-        const { pipMode, primary } = this.props;
+        let micIcon;
+        if (
+            feed.purpose !== SDPStreamMetadataPurpose.Screenshare &&
+            !pipMode &&
+            !feed.isLocal()
+        ) {
+            micIcon = (
+                <div className={micIconClasses} />
+            );
+        }
 
+        let content;
         if (this.state.videoMuted) {
             const member = this.props.feed.getMember();
+
             let avatarSize;
             if (pipMode && primary) avatarSize = 76;
             else if (pipMode && !primary) avatarSize = 16;
             else if (!pipMode && primary) avatarSize = 160;
             else; // TBD
 
-            return (
-                <div className={classnames(videoClasses)}>
-                    <MemberAvatar
-                        member={member}
-                        height={avatarSize}
-                        width={avatarSize}
-                    />
-                </div>
+            content =(
+                <MemberAvatar
+                    member={member}
+                    height={avatarSize}
+                    width={avatarSize}
+                />
             );
         } else {
-            return (
-                <video className={classnames(videoClasses)} ref={this.setElementRef} />
+            const videoClasses = classnames("mx_VideoFeed_video", {
+                mx_VideoFeed_video_mirror: (
+                    this.props.feed.isLocal() &&
+                    SettingsStore.getValue('VideoView.flipVideoHorizontally')
+                ),
+            });
+
+            content= (
+                <video className={videoClasses} ref={this.setElementRef} />
             );
         }
+
+        return (
+            <div className={wrapperClasses}>
+                { micIcon }
+                { content }
+            </div>
+        );
     }
 }