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 { 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 = ( +
+ { _t('%(sharerName)s is presenting', {sharerName}) } +
+ ); + } + contentView = (
+ { presenting } { sidebar } Resume": "You held the call Resume", "%(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",