Bugfix/error view and reconnection

src/components/errorview/ErrorView.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { CustomText, IconButton } from '@dolbyio/uikit-react-native';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { DeviceEventEmitter, Platform, StyleSheet, View } from 'react-native';
+import { DeviceEventEmitter, Platform, StyleSheet, View, BackHandler } from 'react-native';
 
 const ErrorView = (props) => {
   const { navigation, route } = props;
@@ -15,6 +15,19 @@ const ErrorView = (props) => {
     topPadding = 40;
   }
 
+  function handleBackButtonClick() {
+    navigation.goBack();
+    DeviceEventEmitter.emit('event.errorView.close');
+    return true;
+  }
+
+  useEffect(() => {
+    BackHandler.addEventListener('hardwareBackPress', handleBackButtonClick);
+    return () => {
+      BackHandler.removeEventListener('hardwareBackPress', handleBackButtonClick);
+    };
+  }, []);
+
   return (
     <View style={stylesContainer.container}>
       <View style={{ flexDirection: 'row', paddingTop: topPadding }}>

src/screens/multiview/MultiView.tsx

@@ -16,7 +16,6 @@
 import { RTCView } from 'react-native-webrtc';
 import { useSelector, useDispatch } from 'react-redux';
 
-import ErrorView from '../../components/errorview/ErrorView';
 import { Routes } from '../../types/routes.types';
 
 window.Logger = MillicastLogger;
@@ -36,24 +35,29 @@
   const selectedSource = useSelector((state) => state.viewerReducer.selectedSource);
   const error = useSelector((state) => state.viewerReducer.error);
   const dispatch = useDispatch();
-
+  const { routes, index } = navigation.getState();
+  const currentRoute = routes[index].name;
   const playingRef = useRef(null);
   playingRef.current = playing;
   const streamsRef = useRef(null);
   const selectedSourceRef = useRef(null);
   const millicastViewRef = useRef(null);
+  const sourceIdsRef = useRef([]);
+  const netInfo = useNetInfo();
 
   selectedSourceRef.current = selectedSource;
   streamsRef.current = streams;
   millicastViewRef.current = millicastView;
+  sourceIdsRef.current = sourceIds;
 
   const [columnsNumber, setColumnsNumber] = useState(1);
+  const margin = margins(columnsNumber, false);
+  const labelLayout = margins(columnsNumber, true);
 
   useEffect(() => {
     const subscription = DeviceEventEmitter.addListener('event.errorView.close', () => {
       dispatch({ type: 'viewer/setError', payload: null });
       navigation.goBack();
-      console.log('parent go back');
     });
 
     return () => {
@@ -128,10 +132,22 @@
               }
             }
             // A source has been started on the steam
+            dispatch({ type: 'viewer/setError', payload: null });
             break;
           case 'inactive':
-            console.log('inactive');
             // A source has been stopped on the steam
+            if (data.sourceId !== null && sourceIdsRef.current?.indexOf(data.sourceId) !== -1) {
+              dispatch({
+                type: 'viewer/removeSourceId',
+                payload: data.sourceId,
+              });
+
+              const streamToRemove = streamsRef.current.find((stream) => stream.sourceId === data.sourceId);
+              dispatch({
+                type: 'viewer/removeStream',
+                payload: streamToRemove,
+              });
+            }
             break;
           case 'vad':
             // A new source was multiplexed over the vad tracks
@@ -144,7 +160,7 @@
             // Updated layer information for each simulcast/svc video track
             break;
           default:
             console.log('Unknown event', name);
         }
       });
       await view.connect({
@@ -155,7 +171,7 @@
 
       millicastViewRef.current = view;
     } catch (e) {
       console.log('Connection failed. Reason:', e);
       dispatch({ type: 'viewer/setError', payload: e });
     }
   };
@@ -167,7 +183,7 @@
       const listVideoMids = streamsRef.current.map((track) => track.videoMid).filter((x) => x !== '0' && x !== mid);
       await millicastViewRef.current.unproject(listVideoMids);
     } catch (error) {
       console.log('unproject error', error);
     }
   };
 
@@ -233,10 +249,6 @@
     }
   };
 
-  const margin = margins(columnsNumber, false);
-  const labelLayout = margins(columnsNumber, true);
-  const netInfo = useNetInfo();
-
   useEffect(() => {
     const initializeMultiview = async () => {
       try {
@@ -248,7 +260,7 @@
           }),
         );
       } catch (e) {
         console.log('error', e);
       }
     };
     initializeMultiview();
@@ -257,9 +269,25 @@
   useEffect(() => {
     if (error !== null) {
       navigation.navigate(Routes.ErrorView, { errorType: netInfo.isConnected ? 'streamOffline' : 'networkOffline' });
+    } else if (currentRoute === Routes.ErrorView && error === null) {
+      navigation.goBack();
     }
   }, [error]);
 
+  useEffect(() => {
+    if (netInfo.isConnected === false) {
+      // Set error when there are no active sources
+      dispatch({ type: 'viewer/setError', payload: 'No internet connection' });
+    }
+  }, [netInfo]);
+
+  useEffect(() => {
+    if (playingRef.current && sourceIdsRef.current.length === 0) {
+      // Set error when there are no active sources
+      dispatch({ type: 'viewer/setError', payload: 'Stream is not published' });
+    }
+  }, [streams]);
+
   return (
     <SafeAreaView style={stylesContainer.container}>
       <View
@@ -276,7 +304,7 @@
           }}
           numColumns={columnsNumber}
           keyExtractor={(_, index) => String(index)}
           renderItem={({ item, index }) => (
             <View style={margin}>
               <Pressable
                 style={{ marginBottom: 15 }}

src/store/reducers/viewer.js

@@ -1,4 +1,4 @@
 import { ActionSheetIOS } from 'react-native';
 
 /* eslint-disable */
 const initialState = {
@@ -7,7 +7,7 @@
   playing: false,
   error: null,
   streams: [],
-  sourceIds: ['main'],
+  sourceIds: [],
   streamsProjecting: [],
   activeLayers: [],
   millicastView: null,
@@ -110,6 +110,12 @@
         ...state,
         sourceIds: [...state.sourceIds, action.payload],
       };
+    case 'viewer/removeSourceId':
+      const sourceIds = state.sourceIds.filter((sourceId) => sourceId !== action.payload)
+      return {
+        ...state,
+        sourceIds: [...sourceIds],
+      };
     case 'viewer/addStream':
       return {
         ...state,