From f5973e0eeed1c795ff5aec92f636318bf3f27627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@gmail.com>
Date: Wed, 22 Feb 2017 10:25:58 +0100
Subject: [PATCH] [RN] Fix toggling camera

When a new local video track is created an associated video capturer is created
for it. The cause for the freezes seems to be creating mutliple tracks (which
come with a video capturer each). Fix this by first disposing of the previous
video track before creating the new one.

Ref:
https://github.com/oney/react-native-webrtc/issues/209#issuecomment-281482869
---
 react/features/base/tracks/actions.js          |  4 ++--
 react/features/base/tracks/middleware.js       | 18 ++++++++++++++++--
 .../toolbox/components/Toolbox.native.js       |  9 ---------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/react/features/base/tracks/actions.js b/react/features/base/tracks/actions.js
index 38b68c57a..1b415c3c5 100644
--- a/react/features/base/tracks/actions.js
+++ b/react/features/base/tracks/actions.js
@@ -179,10 +179,10 @@ function _addTracks(tracks) {
  * Disposes passed tracks and signals them to be removed.
  *
  * @param {(JitsiLocalTrack|JitsiRemoteTrack)[]} tracks - List of tracks.
- * @private
+ * @protected
  * @returns {Function}
  */
-function _disposeAndRemoveTracks(tracks) {
+export function _disposeAndRemoveTracks(tracks) {
     return dispatch =>
         Promise.all(
             tracks.map(t =>
diff --git a/react/features/base/tracks/middleware.js b/react/features/base/tracks/middleware.js
index e6c46c609..c37bc983c 100644
--- a/react/features/base/tracks/middleware.js
+++ b/react/features/base/tracks/middleware.js
@@ -11,7 +11,11 @@ import {
 } from '../media';
 import { MiddlewareRegistry } from '../redux';
 
-import { createLocalTracks, destroyLocalTracks } from './actions';
+import {
+    _disposeAndRemoveTracks,
+    createLocalTracks,
+    destroyLocalTracks
+} from './actions';
 import { TRACK_UPDATED } from './actionTypes';
 import { getLocalTrack, setTrackMuted } from './functions';
 
@@ -37,7 +41,16 @@ MiddlewareRegistry.register(store => next => action => {
         _setMuted(store, action, MEDIA_TYPE.AUDIO);
         break;
 
-    case SET_CAMERA_FACING_MODE:
+    case SET_CAMERA_FACING_MODE: {
+        // XXX Destroy the local video track before creating a new one or
+        // react-native-webrtc may be slow or get stuck when opening a (video)
+        // capturer twice.
+        const localTrack = _getLocalTrack(store, MEDIA_TYPE.VIDEO);
+
+        if (localTrack) {
+            store.dispatch(_disposeAndRemoveTracks([ localTrack.jitsiTrack ]));
+        }
+
         store.dispatch(
             createLocalTracks({
                 devices: [ MEDIA_TYPE.VIDEO ],
@@ -45,6 +58,7 @@ MiddlewareRegistry.register(store => next => action => {
             })
         );
         break;
+    }
 
     case SET_VIDEO_MUTED:
         _setMuted(store, action, MEDIA_TYPE.VIDEO);
diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js
index 9c43dfd9b..69b2b6286 100644
--- a/react/features/toolbox/components/Toolbox.native.js
+++ b/react/features/toolbox/components/Toolbox.native.js
@@ -184,21 +184,12 @@ class Toolbox extends Component {
 
         return (
             <View style = { styles.secondaryToolbar }>
-                {/* FIXME There are multiple issues with the toggling of the
-                  * camera facing more. For example, switching from the user
-                  * facing camera to the environment facing camera on iOS may be
-                  * very slow or may not work at all. On Android the toggling
-                  * either works or does not. The causes of the various problems
-                  * have been identified to lie within either
-                  * react-native-webrtc or Google's native WebRTC API.
-                  *
                 <ToolbarButton
                     iconName = 'switch-camera'
                     iconStyle = { iconStyle }
                     onClick = { this.props._onToggleCameraFacingMode }
                     style = { style }
                     underlayColor = { underlayColor } />
-                  */}
                 <ToolbarButton
                     iconName = {
                         this.props._locked ? 'security-locked' : 'security'