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

ref(StatusIndicators): Use audio muted from redux.

This commit is contained in:
Hristo Terezov 2020-10-26 12:58:37 -05:00
parent 30fc04ba61
commit b71d92a139
6 changed files with 30 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/UI/UI.js
View File

@ -356,8 +356,8 @@ UI.askForNickname = function() {
/**
* Sets muted audio state for participant
*/
UI.setAudioMuted = function(id, muted) {
VideoLayout.onAudioMute(id, muted);
UI.setAudioMuted = function(id) {
// FIXME: Maybe this can be removed!
if (APP.conference.isLocalId(id)) {
APP.conference.updateAudioIconEnabled();
}

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

@ -198,7 +198,6 @@ export default class RemoteVideo extends SmallVideo {
<AtlasKitThemeProvider mode = 'dark'>
<RemoteVideoMenuTriggerButton
initialVolumeValue = { initialVolumeValue }
isAudioMuted = { this.isAudioMuted }
menuPosition = { remoteMenuPosition }
onMenuDisplay
= {this._onRemoteVideoMenuDisplay.bind(this)}
@ -302,13 +301,8 @@ export default class RemoteVideo extends SmallVideo {
/**
* Updates the remote video menu.
*
* @param isMuted the new muted state to update to
*/
updateRemoteVideoMenu(isMuted) {
if (typeof isMuted !== 'undefined') {
this.isAudioMuted = isMuted;
}
updateRemoteVideoMenu() {
this._generatePopupContent();
}

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

@ -85,7 +85,6 @@ export default class SmallVideo {
* Constructor.
*/
constructor(VideoLayout) {
this.isAudioMuted = false;
this.isScreenSharing = false;
this.videoStream = null;
this.audioStream = null;
@ -218,17 +217,6 @@ export default class SmallVideo {
this.updateIndicators();
}
/**
* Shows / hides the audio muted indicator over small videos.
*
* @param {boolean} isMuted indicates if the muted element should be shown
* or hidden
*/
showAudioIndicator(isMuted) {
this.isAudioMuted = isMuted;
this.updateStatusBar();
}
/**
* Shows / hides the screen-share indicator over small videos.
*
@ -262,7 +250,6 @@ export default class SmallVideo {
<Provider store = { APP.store }>
<I18nextProvider i18n = { i18next }>
<StatusIndicators
showAudioMutedIndicator = { this.isAudioMuted }
showScreenShareIndicator = { this.isScreenSharing }
participantID = { this.id } />
</I18nextProvider>

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

@ -173,9 +173,7 @@ const VideoLayout = {
remoteVideo.addRemoteStreamElement(stream);
// Make sure track's muted state is reflected
if (stream.getType() === 'audio') {
this.onAudioMute(id, stream.isMuted());
} else {
if (stream.getType() !== 'audio') {
this.onVideoMute(id);
remoteVideo.setScreenSharing(stream.videoType === 'desktop');
}
@ -329,24 +327,6 @@ const VideoLayout = {
this._updateLargeVideoIfDisplayed(resourceJid, true);
},
/**
* On audio muted event.
*/
onAudioMute(id, isMuted) {
if (APP.conference.isLocalId(id)) {
localVideoThumbnail.showAudioIndicator(isMuted);
} else {
const remoteVideo = remoteVideos[id];
if (!remoteVideo) {
return;
}
remoteVideo.showAudioIndicator(isMuted);
remoteVideo.updateRemoteVideoMenu();
}
},
/**
* On video muted event.
*/

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

@ -25,6 +25,11 @@ type Props = {
*/
_currentLayout: string,
/**
* Indicates if the audio muted indicator should be visible or not.
*/
_showAudioMutedIndicator: Boolean,
/**
* Indicates if the moderator indicator should be visible or not.
*/
@ -35,11 +40,6 @@ type Props = {
*/
_showVideoMutedIndicator: Boolean,
/**
* Indicates if the audio muted indicator should be visible or not.
*/
showAudioMutedIndicator: Boolean,
/**
* Indicates if the screen share indicator should be visible or not.
*/
@ -66,8 +66,8 @@ class StatusIndicators extends Component<Props> {
render() {
const {
_currentLayout,
_showAudioMutedIndicator,
_showModeratorIndicator,
showAudioMutedIndicator,
showScreenShareIndicator,
_showVideoMutedIndicator
} = this.props;
@ -86,7 +86,7 @@ class StatusIndicators extends Component<Props> {
return (
<div>
{ showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
{ _showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
{ showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
{ _showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
{ _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null }
@ -115,15 +115,19 @@ function _mapStateToProps(state, ownProps) {
const tracks = state['features/base/tracks'];
let isVideoMuted = true;
let isAudioMuted = true;
if (participant?.local) {
isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
} else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, participantID);
isAudioMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID);
}
return {
_currentLayout: getCurrentLayout(state),
_showAudioMutedIndicator: isAudioMuted,
_showModeratorIndicator:
!interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR,
_showVideoMutedIndicator: isVideoMuted

25
react/features/remote-video-menu/components/web/RemoteVideoMenuTriggerButton.js
View File

@ -3,9 +3,11 @@
import React, { Component } from 'react';
import { Icon, IconMenuThumb } from '../../../base/icons';
import { MEDIA_TYPE } from '../../../base/media';
import { getLocalParticipant, PARTICIPANT_ROLE } from '../../../base/participants';
import { Popover } from '../../../base/popover';
import { connect } from '../../../base/redux';
import { isRemoteTrackMuted } from '../../../base/tracks';
import {
GrantModeratorButton,
@ -37,6 +39,11 @@ type Props = {
*/
_disableRemoteMute: Boolean,
/**
* Whether or not the participant is currently muted.
*/
_isAudioMuted: boolean,
/**
* Whether or not the participant is a conference moderator.
*/
@ -48,11 +55,6 @@ type Props = {
*/
initialVolumeValue: number,
/**
* Whether or not the participant is currently muted.
*/
isAudioMuted: boolean,
/**
* Callback to invoke when the popover has been displayed.
*/
@ -170,9 +172,9 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
const {
_disableKick,
_disableRemoteMute,
_isAudioMuted,
_isModerator,
initialVolumeValue,
isAudioMuted,
onRemoteControlToggle,
onVolumeChange,
remoteControlState,
@ -185,7 +187,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
if (!_disableRemoteMute) {
buttons.push(
<MuteButton
isAudioMuted = { isAudioMuted }
isAudioMuted = { _isAudioMuted }
key = 'mute'
participantID = { participantID } />
);
@ -258,13 +260,16 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
* _isModerator: boolean
* }}
*/
function _mapStateToProps(state) {
const participant = getLocalParticipant(state);
function _mapStateToProps(state, ownProps) {
const { participantID } = ownProps;
const tracks = state['features/base/tracks'];
const localParticipant = getLocalParticipant(state);
const { remoteVideoMenu = {}, disableRemoteMute } = state['features/base/config'];
const { disableKick } = remoteVideoMenu;
return {
_isModerator: Boolean(participant?.role === PARTICIPANT_ROLE.MODERATOR),
_isAudioMuted: isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID) || false,
_isModerator: Boolean(localParticipant?.role === PARTICIPANT_ROLE.MODERATOR),
_disableKick: Boolean(disableKick),
_disableRemoteMute: Boolean(disableRemoteMute)
};