diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index fbeb8ae64..e7e1146ca 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -83,6 +83,7 @@ export default class SmallVideo { constructor(VideoLayout) { this.isAudioMuted = false; this.isVideoMuted = false; + this.isScreenSharing = false; this.videoStream = null; this.audioStream = null; this.VideoLayout = VideoLayout; @@ -234,6 +235,17 @@ export default class SmallVideo { this.updateStatusBar(); } + /** + * Shows / hides the screen-share indicator over small videos. + * + * @param {boolean} isScreenSharing indicates if the screen-share element should be shown + * or hidden + */ + setScreenSharing(isScreenSharing) { + this.isScreenSharing = isScreenSharing; + this.updateStatusBar(); + } + /** * Shows video muted indicator over small videos and disables/enables avatar * if video muted. @@ -265,6 +277,7 @@ export default class SmallVideo { diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 7f4c3bb72..623a23963 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -177,6 +177,10 @@ const VideoLayout = { this.onAudioMute(id, stream.isMuted()); } else { this.onVideoMute(id, stream.isMuted()); + + if (stream.videoType === 'desktop') { + remoteVideo.setScreenSharing(true); + } } }, @@ -188,6 +192,10 @@ const VideoLayout = { if (remoteVideo) { remoteVideo.removeRemoteStreamElement(stream); + + if (stream.videoType === 'desktop') { + remoteVideo.setScreenSharing(false); + } } this.updateMutedForNoTracks(id, stream.getType()); diff --git a/react/features/filmstrip/components/web/ScreenShareIndicator.js b/react/features/filmstrip/components/web/ScreenShareIndicator.js new file mode 100644 index 000000000..e22538dc6 --- /dev/null +++ b/react/features/filmstrip/components/web/ScreenShareIndicator.js @@ -0,0 +1,33 @@ +// @flow + +import React from 'react'; + +import { IconShareDesktop } from '../../../base/icons'; +import { BaseIndicator } from '../../../base/react'; + + +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + +/** + * React {@code Component} for showing a screen-sharing icon with a tooltip. + * + * @param {Props} props - React props passed to this component. + * @returns {React$Element} + */ +export default function ScreenShareIndicator(props: Props) { + return ( + + ); +} diff --git a/react/features/filmstrip/components/web/StatusIndicators.js b/react/features/filmstrip/components/web/StatusIndicators.js index 8df063af0..1efc523a5 100644 --- a/react/features/filmstrip/components/web/StatusIndicators.js +++ b/react/features/filmstrip/components/web/StatusIndicators.js @@ -8,6 +8,7 @@ import { getCurrentLayout, LAYOUTS } from '../../../video-layout'; import AudioMutedIndicator from './AudioMutedIndicator'; import ModeratorIndicator from './ModeratorIndicator'; +import ScreenShareIndicator from './ScreenShareIndicator'; import VideoMutedIndicator from './VideoMutedIndicator'; declare var interfaceConfig: Object; @@ -32,6 +33,11 @@ type Props = { */ showAudioMutedIndicator: Boolean, + /** + * Indicates if the screen share indicator should be visible or not. + */ + showScreenShareIndicator: Boolean, + /** * Indicates if the video muted indicator should be visible or not. */ @@ -60,6 +66,7 @@ class StatusIndicators extends Component { _currentLayout, _showModeratorIndicator, showAudioMutedIndicator, + showScreenShareIndicator, showVideoMutedIndicator } = this.props; let tooltipPosition; @@ -78,6 +85,7 @@ class StatusIndicators extends Component { return ( { showAudioMutedIndicator ? : null } + { showScreenShareIndicator ? : null } { showVideoMutedIndicator ? : null } { _showModeratorIndicator ? : null }