haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(StatusIndicators): Use video muted from redux.

This commit is contained in:
Hristo Terezov 2020-10-23 17:48:56 -05:00
parent 3657c19e60
commit ca2343c31a
9 changed files with 58 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
conference.js
View File

@ -3039,7 +3039,7 @@ export default {
* @param {boolean} muted - New muted status.
*/
setVideoMuteStatus(muted) {
APP.UI.setVideoMuted(this.getMyUserId(), muted);
APP.UI.setVideoMuted(this.getMyUserId());
APP.API.notifyVideoMutedStatusChanged(muted);
},

4
modules/UI/UI.js
View File

@ -366,8 +366,8 @@ UI.setAudioMuted = function(id, muted) {
/**
* Sets muted video state for participant
*/
UI.setVideoMuted = function(id, muted) {
VideoLayout.onVideoMute(id, muted);
UI.setVideoMuted = function(id) {
VideoLayout.onVideoMute(id);
if (APP.conference.isLocalId(id)) {
APP.conference.updateVideoIconEnabled();
}

1
modules/UI/shared_video/SharedVideoThumb.js
View File

@ -26,7 +26,6 @@ export default class SharedVideoThumb extends SmallVideo {
this.$container = $(this.container);
this._setThumbnailSize();
this.bindHoverHandler();
this.isVideoMuted = true;
this.updateDisplayName();
this.container.onclick = this._onContainerClick;
}

1
modules/UI/videolayout/LocalVideo.js
View File

@ -63,6 +63,7 @@ export default class LocalVideo extends SmallVideo {
this.addAudioLevelIndicator();
this.updateIndicators();
this.updateStatusBar();
this.container.onclick = this._onContainerClick;
}

16
modules/UI/videolayout/RemoteVideo.js
View File

@ -12,10 +12,13 @@ import { i18next } from '../../../react/features/base/i18n';
import {
JitsiParticipantConnectionStatus
} from '../../../react/features/base/lib-jitsi-meet';
import { MEDIA_TYPE } from '../../../react/features/base/media';
import {
getParticipantById,
getPinnedParticipant,
pinParticipant
} from '../../../react/features/base/participants';
import { isRemoteTrackMuted } from '../../../react/features/base/tracks';
import { PresenceLabel } from '../../../react/features/presence-status';
import {
REMOTE_CONTROL_MENU_STATES,
@ -310,11 +313,10 @@ export default class RemoteVideo extends SmallVideo {
}
/**
* @inheritDoc
* @override
* Video muted status changed handler.
*/
setVideoMutedView(isMuted) {
super.setVideoMutedView(isMuted);
onVideoMute() {
super.updateView();
// Update 'mutedWhileDisconnected' flag
this._figureOutMutedWhileDisconnected();
@ -328,10 +330,12 @@ export default class RemoteVideo extends SmallVideo {
*/
_figureOutMutedWhileDisconnected() {
const isActive = this.isConnectionActive();
const isVideoMuted
= isRemoteTrackMuted(APP.store.getState()['features/base/tracks'], MEDIA_TYPE.VIDEO, this.id);
if (!isActive && this.isVideoMuted) {
if (!isActive && isVideoMuted) {
this.mutedWhileDisconnected = true;
} else if (isActive && !this.isVideoMuted) {
} else if (isActive && !isVideoMuted) {
this.mutedWhileDisconnected = false;
}
}

33
modules/UI/videolayout/SmallVideo.js
View File

@ -11,11 +11,15 @@ import { Provider } from 'react-redux';
import { AudioLevelIndicator } from '../../../react/features/audio-level-indicator';
import { Avatar as AvatarDisplay } from '../../../react/features/base/avatar';
import { i18next } from '../../../react/features/base/i18n';
import { MEDIA_TYPE } from '../../../react/features/base/media';
import {
getLocalParticipant,
getParticipantById,
getParticipantCount,
getPinnedParticipant,
pinParticipant
} from '../../../react/features/base/participants';
import { isLocalTrackMuted, isRemoteTrackMuted } from '../../../react/features/base/tracks';
import { ConnectionIndicator } from '../../../react/features/connection-indicator';
import { DisplayName } from '../../../react/features/display-name';
import {
@ -82,7 +86,6 @@ export default class SmallVideo {
*/
constructor(VideoLayout) {
this.isAudioMuted = false;
this.isVideoMuted = false;
this.isScreenSharing = false;
this.videoStream = null;
this.audioStream = null;
@ -242,19 +245,6 @@ export default class SmallVideo {
this.updateStatusBar();
}
/**
* Shows video muted indicator over small videos and disables/enables avatar
* if video muted.
*
* @param {boolean} isMuted indicates if we should set the view to muted view
* or not
*/
setVideoMutedView(isMuted) {
this.isVideoMuted = isMuted;
this.updateView();
this.updateStatusBar();
}
/**
* Create or updates the ReactElement for displaying status indicators about
* audio mute, video mute, and moderator status.
@ -274,7 +264,6 @@ export default class SmallVideo {
<StatusIndicators
showAudioMutedIndicator = { this.isAudioMuted }
showScreenShareIndicator = { this.isScreenSharing }
showVideoMutedIndicator = { this.isVideoMuted }
participantID = { this.id } />
</I18nextProvider>
</Provider>,
@ -449,7 +438,18 @@ export default class SmallVideo {
* or <tt>false</tt> otherwise.
*/
isVideoPlayable() {
return this.videoStream && !this.isVideoMuted && !APP.conference.isAudioOnly();
const state = APP.store.getState();
const tracks = state['features/base/tracks'];
const participant = this.id ? getParticipantById(state, this.id) : getLocalParticipant(state);
let isVideoMuted = true;
if (participant?.local) {
isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
} else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, this.id);
}
return this.videoStream && !isVideoMuted && !APP.conference.isAudioOnly();
}
/**
@ -490,7 +490,6 @@ export default class SmallVideo {
mutedWhileDisconnected: this.mutedWhileDisconnected,
canPlayEventReceived: this._canPlayEventReceived,
videoStream: Boolean(this.videoStream),
isVideoMuted: this.isVideoMuted,
isScreenSharing: this.isScreenSharing,
videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
};

10
modules/UI/videolayout/VideoLayout.js
View File

@ -176,7 +176,7 @@ const VideoLayout = {
if (stream.getType() === 'audio') {
this.onAudioMute(id, stream.isMuted());
} else {
this.onVideoMute(id, stream.isMuted());
this.onVideoMute(id);
remoteVideo.setScreenSharing(stream.videoType === 'desktop');
}
},
@ -210,7 +210,7 @@ const VideoLayout = {
if (mediaType === 'audio') {
APP.UI.setAudioMuted(participantId, true);
} else if (mediaType === 'video') {
APP.UI.setVideoMuted(participantId, true);
APP.UI.setVideoMuted(participantId);
} else {
logger.error(`Unsupported media type: ${mediaType}`);
}
@ -350,14 +350,14 @@ const VideoLayout = {
/**
* On video muted event.
*/
onVideoMute(id, value) {
onVideoMute(id) {
if (APP.conference.isLocalId(id)) {
localVideoThumbnail && localVideoThumbnail.setVideoMutedView(value);
localVideoThumbnail && localVideoThumbnail.updateView();
} else {
const remoteVideo = remoteVideos[id];
if (remoteVideo) {
remoteVideo.setVideoMutedView(value);
remoteVideo.onVideoMute();
}
}

2
react/features/base/tracks/middleware.js
View File

@ -159,7 +159,7 @@ MiddlewareRegistry.register(store => next => action => {
} else if (jitsiTrack.isLocal()) {
APP.conference.setVideoMuteStatus(muted);
} else {
APP.UI.setVideoMuted(participantID, muted);
APP.UI.setVideoMuted(participantID);
}
APP.UI.onPeerVideoTypeChanged(participantID, jitsiTrack.videoType);
} else if (jitsiTrack.isLocal()) {

31
react/features/filmstrip/components/web/StatusIndicators.js
View File

@ -2,8 +2,10 @@
import React, { Component } from 'react';
import { MEDIA_TYPE } from '../../../base/media';
import { getLocalParticipant, getParticipantById, PARTICIPANT_ROLE } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { isLocalTrackMuted, isRemoteTrackMuted } from '../../../base/tracks';
import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
import AudioMutedIndicator from './AudioMutedIndicator';
@ -28,6 +30,11 @@ type Props = {
*/
_showModeratorIndicator: Boolean,
/**
* Indicates if the video muted indicator should be visible or not.
*/
_showVideoMutedIndicator: Boolean,
/**
* Indicates if the audio muted indicator should be visible or not.
*/
@ -38,11 +45,6 @@ type Props = {
*/
showScreenShareIndicator: Boolean,
/**
* Indicates if the video muted indicator should be visible or not.
*/
showVideoMutedIndicator: Boolean,
/**
* The ID of the participant for which the status bar is rendered.
*/
@ -67,7 +69,7 @@ class StatusIndicators extends Component<Props> {
_showModeratorIndicator,
showAudioMutedIndicator,
showScreenShareIndicator,
showVideoMutedIndicator
_showVideoMutedIndicator
} = this.props;
let tooltipPosition;
@ -86,7 +88,7 @@ class StatusIndicators extends Component<Props> {
<div>
{ 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 }
</div>
);
@ -101,7 +103,8 @@ class StatusIndicators extends Component<Props> {
* @private
* @returns {{
* _currentLayout: string,
* _showModeratorIndicator: boolean
* _showModeratorIndicator: boolean,
* _showVideoMutedIndicator: boolean
* }}
*/
function _mapStateToProps(state, ownProps) {
@ -110,10 +113,20 @@ function _mapStateToProps(state, ownProps) {
// Only the local participant won't have id for the time when the conference is not yet joined.
const participant = participantID ? getParticipantById(state, participantID) : getLocalParticipant(state);
const tracks = state['features/base/tracks'];
let isVideoMuted = true;
if (participant?.local) {
isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
} else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, participantID);
}
return {
_currentLayout: getCurrentLayout(state),
_showModeratorIndicator:
!interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR
!interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR,
_showVideoMutedIndicator: isVideoMuted
};
}