ref(StatusIndicators): Use audio muted from redux.

modules/UI/UI.js

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

modules/UI/videolayout/RemoteVideo.js

@@ -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) {
+    updateRemoteVideoMenu() {
-        if (typeof isMuted !== 'undefined') {
-            this.isAudioMuted = isMuted;
-        }
         this._generatePopupContent();
     }
 

modules/UI/videolayout/SmallVideo.js

@@ -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>

modules/UI/videolayout/VideoLayout.js

@@ -173,9 +173,7 @@ const VideoLayout = {
         remoteVideo.addRemoteStreamElement(stream);
 
         // Make sure track's muted state is reflected
-        if (stream.getType() === 'audio') {
+        if (stream.getType() !== 'audio') {
-            this.onAudioMute(id, stream.isMuted());
-        } else {
             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.
      */

react/features/filmstrip/components/web/StatusIndicators.js

@@ -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

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

@@ -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) {
+function _mapStateToProps(state, ownProps) {
-    const participant = getLocalParticipant(state);
+    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)
     };