fix(audio-only) Do not enable video automatically when audio-only is disabled (#12056)

* fix(audio-only) Do not enable video automatically when audio-only is disabled.

conference.js

@@ -2651,29 +2651,8 @@ export default {
             }
         );
 
-        APP.UI.addListener(UIEvents.TOGGLE_AUDIO_ONLY, audioOnly => {
+        APP.UI.addListener(UIEvents.TOGGLE_AUDIO_ONLY, () => {
-
+            // Immediately update the UI by having remote videos and the large video update themselves.
-            // FIXME On web video track is stored both in redux and in
-            // 'localVideo' field, video is attempted to be unmuted twice when
-            // turning off the audio only mode. This will crash the app with
-            // 'unmute operation is already in progress'.
-            // Because there's no logic in redux about creating new track in
-            // case unmute when not track exists the things have to go through
-            // muteVideo logic in such case.
-            const tracks = APP.store.getState()['features/base/tracks'];
-            const isTrackInRedux
-                = Boolean(tracks.find(track => track.jitsiTrack && track.jitsiTrack.getType() === MEDIA_TYPE.VIDEO));
-
-            if (isTrackInRedux && !this.isSharingScreen) {
-                this.muteVideo(audioOnly);
-            }
-
-            // Immediately update the UI by having remote videos and the large
-            // video update themselves instead of waiting for some other event
-            // to cause the update, usually PARTICIPANT_CONN_STATUS_CHANGED.
-            // There is no guarantee another event will trigger the update
-            // immediately and in all situations, for example because a remote
-            // participant is having connection trouble so no status changes.
             const displayedUserId = APP.UI.getLargeVideoID();
 
             if (displayedUserId) {

react/features/base/audio-only/actions.ts

@@ -15,17 +15,13 @@ declare let APP: any;
 /**
  * Sets the audio-only flag for the current JitsiConference.
  *
- * @param {boolean} audioOnly - True if the conference should be audio only;
+ * @param {boolean} audioOnly - True if the conference should be audio only; false, otherwise.
- * false, otherwise.
- * @param {boolean} ensureVideoTrack - Define if conference should ensure
- * to create a video track.
  * @returns {{
  *     type: SET_AUDIO_ONLY,
- *     audioOnly: boolean,
+ *     audioOnly: boolean
- *     ensureVideoTrack: boolean
  * }}
  */
-export function setAudioOnly(audioOnly: boolean, ensureVideoTrack = false) {
+export function setAudioOnly(audioOnly: boolean) {
     return (dispatch: Dispatch<any>, getState: Function) => {
         const { enabled: oldValue } = getState()['features/base/audio-only'];
 
@@ -35,8 +31,7 @@ export function setAudioOnly(audioOnly: boolean, ensureVideoTrack = false) {
 
             dispatch({
                 type: SET_AUDIO_ONLY,
-                audioOnly,
+                audioOnly
-                ensureVideoTrack
             });
 
             if (typeof APP !== 'undefined') {
@@ -57,6 +52,6 @@ export function toggleAudioOnly() {
     return (dispatch: Dispatch<any>, getState: Function) => {
         const { enabled } = getState()['features/base/audio-only'];
 
-        return dispatch(setAudioOnly(!enabled, true));
+        return dispatch(setAudioOnly(!enabled));
     };
 }

react/features/base/media/middleware.any.js

@@ -185,17 +185,17 @@ function _appStateChanged({ dispatch, getState }, next, action) {
  * @returns {Object} The value returned by {@code next(action)}.
  */
 function _setAudioOnly({ dispatch, getState }, next, action) {
-    const { audioOnly, ensureVideoTrack } = action;
+    const { audioOnly } = action;
     const state = getState();
 
     sendAnalytics(createTrackMutedEvent('video', 'audio-only mode', audioOnly));
 
     // Make sure we mute both the desktop and video tracks.
-    dispatch(setVideoMuted(audioOnly, MEDIA_TYPE.VIDEO, VIDEO_MUTISM_AUTHORITY.AUDIO_ONLY, ensureVideoTrack));
+    dispatch(setVideoMuted(audioOnly, MEDIA_TYPE.VIDEO, VIDEO_MUTISM_AUTHORITY.AUDIO_ONLY));
     if (getMultipleVideoSendingSupportFeatureFlag(state)) {
         dispatch(setScreenshareMuted(audioOnly, MEDIA_TYPE.SCREENSHARE, SCREENSHARE_MUTISM_AUTHORITY.AUDIO_ONLY));
     } else if (navigator.product !== 'ReactNative') {
-        dispatch(setVideoMuted(audioOnly, MEDIA_TYPE.PRESENTER, VIDEO_MUTISM_AUTHORITY.AUDIO_ONLY, ensureVideoTrack));
+        dispatch(setVideoMuted(audioOnly, MEDIA_TYPE.PRESENTER, VIDEO_MUTISM_AUTHORITY.AUDIO_ONLY));
     }
 
     return next(action);
@@ -281,7 +281,7 @@ function _setRoom({ dispatch, getState }, next, action) {
     sendAnalytics(createStartAudioOnlyEvent(audioOnly));
     logger.log(`Start audio only set to ${audioOnly.toString()}`);
 
-    dispatch(setAudioOnly(audioOnly, false));
+    dispatch(setAudioOnly(audioOnly));
 
     if (!roomIsValid) {
         dispatch(destroyLocalTracks());

react/features/toolbox/components/VideoMuteButton.js

@@ -160,8 +160,7 @@ class VideoMuteButton extends AbstractVideoMuteButton<Props, *> {
     _setVideoMuted(videoMuted: boolean) {
         sendAnalytics(createToolbarEvent(VIDEO_MUTE, { enable: videoMuted }));
         if (this.props._audioOnly) {
-            this.props.dispatch(
+            this.props.dispatch(setAudioOnly(false));
-                setAudioOnly(false, /* ensureTrack */ true));
         }
         const mediaType = this.props._videoMediaType;