web,small-video: introduce screen-sharing indicator
This commit is contained in:
parent
4807badac8
commit
fdffb688c1
|
@ -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 {
|
|||
<I18nextProvider i18n = { i18next }>
|
||||
<StatusIndicators
|
||||
showAudioMutedIndicator = { this.isAudioMuted }
|
||||
showScreenShareIndicator = { this.isScreenSharing }
|
||||
showVideoMutedIndicator = { this.isVideoMuted }
|
||||
participantID = { this.id } />
|
||||
</I18nextProvider>
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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 } />
|
||||
);
|
||||
}
|
|
@ -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<Props> {
|
|||
_currentLayout,
|
||||
_showModeratorIndicator,
|
||||
showAudioMutedIndicator,
|
||||
showScreenShareIndicator,
|
||||
showVideoMutedIndicator
|
||||
} = this.props;
|
||||
let tooltipPosition;
|
||||
|
@ -78,6 +85,7 @@ class StatusIndicators extends Component<Props> {
|
|||
return (
|
||||
<div>
|
||||
{ showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
|
||||
{ showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
|
||||
{ showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
|
||||
{ _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null }
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue