web,small-video: introduce screen-sharing indicator

This commit is contained in:
Saúl Ibarra Corretgé 2020-07-17 11:41:49 +02:00 committed by Saúl Ibarra Corretgé
parent 4807badac8
commit fdffb688c1
4 changed files with 62 additions and 0 deletions

View File

@ -83,6 +83,7 @@ export default class SmallVideo {
constructor(VideoLayout) { constructor(VideoLayout) {
this.isAudioMuted = false; this.isAudioMuted = false;
this.isVideoMuted = false; this.isVideoMuted = false;
this.isScreenSharing = false;
this.videoStream = null; this.videoStream = null;
this.audioStream = null; this.audioStream = null;
this.VideoLayout = VideoLayout; this.VideoLayout = VideoLayout;
@ -234,6 +235,17 @@ export default class SmallVideo {
this.updateStatusBar(); 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 * Shows video muted indicator over small videos and disables/enables avatar
* if video muted. * if video muted.
@ -265,6 +277,7 @@ export default class SmallVideo {
<I18nextProvider i18n = { i18next }> <I18nextProvider i18n = { i18next }>
<StatusIndicators <StatusIndicators
showAudioMutedIndicator = { this.isAudioMuted } showAudioMutedIndicator = { this.isAudioMuted }
showScreenShareIndicator = { this.isScreenSharing }
showVideoMutedIndicator = { this.isVideoMuted } showVideoMutedIndicator = { this.isVideoMuted }
participantID = { this.id } /> participantID = { this.id } />
</I18nextProvider> </I18nextProvider>

View File

@ -177,6 +177,10 @@ const VideoLayout = {
this.onAudioMute(id, stream.isMuted()); this.onAudioMute(id, stream.isMuted());
} else { } else {
this.onVideoMute(id, stream.isMuted()); this.onVideoMute(id, stream.isMuted());
if (stream.videoType === 'desktop') {
remoteVideo.setScreenSharing(true);
}
} }
}, },
@ -188,6 +192,10 @@ const VideoLayout = {
if (remoteVideo) { if (remoteVideo) {
remoteVideo.removeRemoteStreamElement(stream); remoteVideo.removeRemoteStreamElement(stream);
if (stream.videoType === 'desktop') {
remoteVideo.setScreenSharing(false);
}
} }
this.updateMutedForNoTracks(id, stream.getType()); this.updateMutedForNoTracks(id, stream.getType());

View File

@ -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<any>}
*/
export default function ScreenShareIndicator(props: Props) {
return (
<BaseIndicator
className = 'screenShare toolbar-icon'
icon = { IconShareDesktop }
iconId = 'share-desktop'
iconSize = { 13 }
tooltipKey = 'videothumbnail.videomute'
tooltipPosition = { props.tooltipPosition } />
);
}

View File

@ -8,6 +8,7 @@ import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
import AudioMutedIndicator from './AudioMutedIndicator'; import AudioMutedIndicator from './AudioMutedIndicator';
import ModeratorIndicator from './ModeratorIndicator'; import ModeratorIndicator from './ModeratorIndicator';
import ScreenShareIndicator from './ScreenShareIndicator';
import VideoMutedIndicator from './VideoMutedIndicator'; import VideoMutedIndicator from './VideoMutedIndicator';
declare var interfaceConfig: Object; declare var interfaceConfig: Object;
@ -32,6 +33,11 @@ type Props = {
*/ */
showAudioMutedIndicator: Boolean, 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. * Indicates if the video muted indicator should be visible or not.
*/ */
@ -60,6 +66,7 @@ class StatusIndicators extends Component<Props> {
_currentLayout, _currentLayout,
_showModeratorIndicator, _showModeratorIndicator,
showAudioMutedIndicator, showAudioMutedIndicator,
showScreenShareIndicator,
showVideoMutedIndicator showVideoMutedIndicator
} = this.props; } = this.props;
let tooltipPosition; let tooltipPosition;
@ -78,6 +85,7 @@ class StatusIndicators extends Component<Props> {
return ( return (
<div> <div>
{ showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null } { showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
{ showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
{ showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null } { showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
{ _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null } { _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null }
</div> </div>