@100mslive/react-native-room-kit 1.0.2 → 1.0.4-beta.0

package/src/Icons/index.ts

@@ -38,3 +38,4 @@ export * from './Stop';
 export * from './Eye';
 export * from './Search';
 export * from './WelcomeHand';
+export * from './CrossCircle';

package/src/components/HLSFooter.tsx

@@ -6,6 +6,7 @@ import { Footer } from './Footer';
 import { AnimatedHLSFooter } from './AnimatedHLSFooter';
 import { HLSChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
+import { HMSNotifications } from './HMSNotifications';
 
 interface HLSFooterProps {
   offset: SharedValue<number>;
@@ -18,6 +19,8 @@ export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
     <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
       {overlayChatVisible ? <HLSChatView /> : null}
 
+      <HMSNotifications />
+
       <Footer />
     </AnimatedHLSFooter>
   );

package/src/components/HLSView.tsx

@@ -1,18 +1,24 @@
 import React, { useRef } from 'react';
 import type { ComponentRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { View, Text, StyleSheet } from 'react-native';
-import { HMSHLSPlayer } from '@100mslive/react-native-hms';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import {
+  HMSHLSPlayer,
+  HMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerPlaybackState,
+} from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { changeShowHLSStats } from '../redux/actions';
 import { HLSPlayerStatsView } from './HLSPlayerStatsView';
 import { HLSPlayerEmoticons } from './HLSPlayerEmoticons';
 import { CustomControls } from './CustomHLSPlayerControls';
-import { COLORS } from '../utils/theme';
+import { COLORS, hexToRgbA } from '../utils/theme';
 import { HMSHLSNotStarted } from './HMSHLSNotStarted';
+import { CrossCircleIcon } from '../Icons';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
-export const HLSView: React.FC = () => {
+export const _HLSView: React.FC = () => {
   const dispatch = useDispatch();
   const room = useSelector((state: RootState) => state.hmsStates.room);
   const hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
@@ -80,6 +86,46 @@ export const HLSView: React.FC = () => {
     }
   };
 
+  const [playerKey, setPlayerKey] = React.useState(1);
+
+  const prevReconnectingRef = React.useRef<null | boolean>(null);
+  const reconnecting = useSelector(
+    (state: RootState) => state.hmsStates.reconnecting
+  );
+
+  const hlsPlayerPlaybackState = useHMSHLSPlayerPlaybackState();
+
+  const isPlaybackFailed =
+    hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.FAILED;
+
+  React.useEffect(() => {
+    const prevReconnecting = prevReconnectingRef.current;
+
+    if (
+      Platform.OS === 'android' &&
+      prevReconnecting && // previously were in reconnection state
+      reconnecting === false && // now in reconnected state
+      isPlaybackFailed // and player playback is in failed state
+    ) {
+      // Recreate the HLS PLayer instance
+      setPlayerKey((prevKey) => (prevKey += 1));
+    }
+
+    prevReconnectingRef.current = reconnecting;
+  }, [reconnecting, isPlaybackFailed]);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    failedContainer: {
+      backgroundColor: theme.palette.background_dim
+        ? hexToRgbA(theme.palette.background_dim, 0.7)
+        : COLORS.LOADING_BACKDROP,
+    },
+    failedText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
   return (
     <View style={styles.hlsView}>
       {room?.hlsStreamingState?.running ? (
@@ -87,6 +133,7 @@ export const HLSView: React.FC = () => {
           variant?.hlsStreamUrl ? (
             <View key={index} style={styles.hlsPlayerContainer}>
               <HMSHLSPlayer
+                key={playerKey}
                 ref={hmsHlsPlayerRef}
                 enableStats={showHLSStats}
                 enableControls={enableHLSPlayerControls}
@@ -101,6 +148,23 @@ export const HLSView: React.FC = () => {
               {showCustomHLSPlayerControls ? (
                 <CustomControls handleControlPress={hlsPlayerActions} />
               ) : null}
+
+              {isPlaybackFailed ? (
+                <View
+                  style={[
+                    styles.playbackFailedContainer,
+                    hmsRoomStyles.failedContainer,
+                  ]}
+                >
+                  <CrossCircleIcon />
+
+                  <Text
+                    style={[styles.playbackFailed, hmsRoomStyles.failedText]}
+                  >
+                    Playback Failed
+                  </Text>
+                </View>
+              ) : null}
             </View>
           ) : (
             <View key={index} style={styles.textContainer}>
@@ -115,6 +179,8 @@ export const HLSView: React.FC = () => {
   );
 };
 
+export const HLSView = React.memo(_HLSView);
+
 const styles = StyleSheet.create({
   hlsView: {
     flex: 1,
@@ -140,4 +206,19 @@ const styles = StyleSheet.create({
   taleLessSpaceAsYouCan: {
     flex: 0,
   },
+  playbackFailedContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  playbackFailed: {
+    fontSize: 24,
+    lineHeight: 32,
+    letterSpacing: 0.5,
+    textAlign: 'center',
+    marginTop: 8,
+  },
 });

package/src/components/HMSManageAudioOutput.tsx

@@ -31,11 +31,13 @@ import {
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 import { TestIds } from '../utils/constants';
+import { useHMSActions } from '../hooks-sdk';
 
 export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
   const isHLSViewer = useIsHLSViewer();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
+  const { setRoomMuteLocally } = useHMSActions();
 
   const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
     React.useState<HMSAudioDevice | null>(null);
@@ -43,6 +45,9 @@ export const HMSManageAudioOutput: React.FC = () => {
     React.useState<HMSAudioDevice[]>([]);
 
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
+  const roomLocallyMuted = useSelector(
+    (state: RootState) => state.hmsStates.roomLocallyMuted
+  );
 
   // Fetch current selected audio device and audio devices list on Android
   React.useEffect(() => {
@@ -79,16 +84,12 @@ export const HMSManageAudioOutput: React.FC = () => {
 
   // Handles showing Modal for changing Audio device
   const handleSpeakerChange = () => {
-    if (Platform.OS === 'ios') {
-      hmsInstance.switchAudioOutputUsingIOSUI();
-    } else {
-      if (availableAudioOutputDevices.length === 0) {
-        hmsInstance
-          .getAudioDevicesList()
-          .then((devices) => setAvailableAudioOutputDevices(devices)); // TODO(set-state-after-unmount): setting state irrespective of component unmount check
-      }
-      setSettingsModalVisible(true);
+    if (Platform.OS === 'android' && availableAudioOutputDevices.length === 0) {
+      hmsInstance
+        .getAudioDevicesList()
+        .then((devices) => setAvailableAudioOutputDevices(devices)); // TODO(set-state-after-unmount): setting state irrespective of component unmount check
     }
+    setSettingsModalVisible(true);
   };
 
   // Add audio device change listeners
@@ -120,23 +121,29 @@ export const HMSManageAudioOutput: React.FC = () => {
   }, [hmsInstance, debugMode]);
 
   // Handle changing selected audio device
-  const handleSelectAudioDevice = (device: HMSAudioDevice) => {
-    hmsInstance.switchAudioOutput(device);
+  const handleSelectAudioDevice = (
+    device: HMSAudioDevice | 'mute-audio' | 'ios-audio-device'
+  ) => {
+    if (device === 'mute-audio') {
+      setRoomMuteLocally(true);
+    } else {
+      if (roomLocallyMuted) {
+        setRoomMuteLocally(false);
+      }
+      if (device === 'ios-audio-device') {
+        hmsInstance.switchAudioOutputUsingIOSUI();
+      } else {
+        hmsInstance.switchAudioOutput(device);
+      }
+    }
     setSettingsModalVisible(false);
   };
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    headerText: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-Medium`,
-    },
     text: {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
-    divider: {
-      backgroundColor: theme.palette.border_default,
-    },
   }));
 
   return (
@@ -146,7 +153,9 @@ export const HMSManageAudioOutput: React.FC = () => {
         onPress={handleSpeakerChange}
         style={isHLSViewer ? styles.button : null}
       >
-        {Platform.OS === 'ios' ? (
+        {roomLocallyMuted ? (
+          <SpeakerIcon muted={true} />
+        ) : Platform.OS === 'ios' ? (
           <SpeakerIcon muted={false} />
         ) : (
           getIcon(currentAudioOutputDevice || HMSAudioDevice.AUTOMATIC)
@@ -164,7 +173,33 @@ export const HMSManageAudioOutput: React.FC = () => {
         <BottomSheet.Divider />
 
         <View style={styles.contentContainer}>
-          {availableAudioOutputDevices.length === 0 ? (
+          {Platform.OS === 'ios' ? (
+            <>
+              <AudioOutputDevice
+                id={'ios-audio-device'}
+                hideDivider={true}
+                selected={!roomLocallyMuted}
+                text={'Auto'}
+                icon={<SpeakerIcon muted={false} />}
+                onPress={handleSelectAudioDevice}
+                checkTestID={TestIds.automatic_audio_device_active}
+                textTestID={TestIds.automatic_audio_device_text}
+                buttonTestID={TestIds.automatic_audio_device_btn}
+              />
+
+              <AudioOutputDevice
+                id={'mute-audio'}
+                hideDivider={false}
+                selected={roomLocallyMuted}
+                text={'Mute Audio'}
+                icon={<SpeakerIcon muted={true} />}
+                onPress={handleSelectAudioDevice}
+                checkTestID={TestIds.mute_audio_active}
+                textTestID={TestIds.mute_audio_text}
+                buttonTestID={TestIds.mute_audio_btn}
+              />
+            </>
+          ) : availableAudioOutputDevices.length === 0 ? (
             <View style={styles.emptyView}>
               <Text
                 testID={TestIds.audio_modal_empty_text}
@@ -183,36 +218,39 @@ export const HMSManageAudioOutput: React.FC = () => {
                   const isFirst = index === 0;
 
                   return (
-                    <React.Fragment key={device}>
-                      {isFirst ? null : (
-                        <View style={[styles.divider, hmsRoomStyles.divider]} />
+                    <AudioOutputDevice
+                      key={device}
+                      id={device}
+                      hideDivider={isFirst}
+                      selected={
+                        device === currentAudioOutputDevice && !roomLocallyMuted
+                      }
+                      checkTestID={activeAudioDeviceTestIds[device]}
+                      text={getDescription(device, currentAudioOutputDevice)}
+                      textTestID={audioDeviceTextTestIds[device]}
+                      icon={getIcon(
+                        device === HMSAudioDevice.AUTOMATIC &&
+                          currentAudioOutputDevice
+                          ? currentAudioOutputDevice
+                          : device
                       )}
-
-                      <TouchableOpacity
-                        testID={audioDeviceTestIds[device]}
-                        style={styles.audioDeviceItem}
-                        onPress={() => handleSelectAudioDevice(device)}
-                      >
-                        <View style={styles.itemTextWrapper}>
-                          {getIcon(
-                            device === HMSAudioDevice.AUTOMATIC &&
-                              currentAudioOutputDevice
-                              ? currentAudioOutputDevice
-                              : device
-                          )}
-
-                          <Text testID={audioDeviceTextTestIds[device]} style={[styles.itemText, hmsRoomStyles.text]}>
-                            {getDescription(device, currentAudioOutputDevice)}
-                          </Text>
-                        </View>
-
-                        {device === currentAudioOutputDevice ? (
-                          <CheckIcon testID={activeAudioDeviceTestIds[device]} />
-                        ) : null}
-                      </TouchableOpacity>
-                    </React.Fragment>
+                      buttonTestID={audioDeviceTestIds[device]}
+                      onPress={handleSelectAudioDevice}
+                    />
                   );
                 })}
+
+              <AudioOutputDevice
+                id={'mute-audio'}
+                hideDivider={false}
+                selected={roomLocallyMuted}
+                text={'Mute Audio'}
+                icon={<SpeakerIcon muted={true} />}
+                onPress={handleSelectAudioDevice}
+                checkTestID={TestIds.mute_audio_active}
+                textTestID={TestIds.mute_audio_text}
+                buttonTestID={TestIds.mute_audio_btn}
+              />
             </ScrollView>
           )}
         </View>
@@ -221,6 +259,84 @@ export const HMSManageAudioOutput: React.FC = () => {
   );
 };
 
+interface AudioOutputDeviceProps {
+  id: HMSAudioDevice | 'mute-audio' | 'ios-audio-device';
+  hideDivider: boolean;
+  selected: boolean;
+  checkTestID: string;
+  text: string;
+  textTestID: string;
+  icon: React.ReactElement;
+  buttonTestID: string;
+  onPress(selected: HMSAudioDevice | 'mute-audio' | 'ios-audio-device'): void;
+}
+
+const AudioOutputDevice: React.FC<AudioOutputDeviceProps> = (props) => {
+  const {
+    id,
+    hideDivider,
+    selected,
+    checkTestID,
+    text,
+    textTestID,
+    icon,
+    buttonTestID,
+    onPress,
+  } = props;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      text: {
+        color: selected
+          ? theme.palette.primary_bright
+          : theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      divider: {
+        backgroundColor: theme.palette.border_default,
+      },
+      checkIcon: {
+        tintColor: theme.palette.primary_bright,
+      },
+    }),
+    [selected]
+  );
+
+  return (
+    <React.Fragment>
+      {hideDivider ? null : (
+        <View style={[styles.divider, hmsRoomStyles.divider]} />
+      )}
+
+      <TouchableOpacity
+        testID={buttonTestID}
+        disabled={selected}
+        style={styles.audioDeviceItem}
+        onPress={() => onPress(id)}
+      >
+        <View style={styles.itemTextWrapper}>
+          {icon
+            ? React.cloneElement(icon, {
+                style: selected ? hmsRoomStyles.checkIcon : null,
+              })
+            : null}
+
+          <Text
+            testID={textTestID}
+            style={[styles.itemText, hmsRoomStyles.text]}
+          >
+            {text}
+          </Text>
+        </View>
+
+        {selected ? (
+          <CheckIcon testID={checkTestID} style={hmsRoomStyles.checkIcon} />
+        ) : null}
+      </TouchableOpacity>
+    </React.Fragment>
+  );
+};
+
 const styles = StyleSheet.create({
   button: {
     backgroundColor: 'transparent',
@@ -321,4 +437,4 @@ const activeAudioDeviceTestIds = {
   [HMSAudioDevice.WIRED_HEADSET]: TestIds.wired_headset_audio_device_active,
   [HMSAudioDevice.EARPIECE]: TestIds.earpiece_audio_device_active,
   [HMSAudioDevice.BLUETOOTH]: TestIds.bluetooth_audio_device_active,
-} as const;
+} as const;

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -6,14 +6,15 @@ import {
   ScrollView,
   TouchableOpacity,
   Alert,
+  Linking,
 } from 'react-native';
 import {
   HMSAudioMixingMode,
   HMSUpdateListenerActions,
+  checkNotifications,
 } from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
 import Toast from 'react-native-simple-toast';
-import { openSettings, requestNotifications } from 'react-native-permissions';
 
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
@@ -210,7 +211,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
       // check notification permission on android platform
       // Audio share feature needs foreground service running. for Foreground service to keep running, we need active notification.
       if (Platform.OS === 'android') {
-        const result = await requestNotifications(['alert', 'sound']);
+        const result = await checkNotifications();
 
         console.log('Notification Permission Result: ', result);
 
@@ -220,7 +221,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
             '100ms SDK needs notification permission to start audio share. Please allow notification from settings and try again!',
             [
               { text: 'cancel' },
-              { text: 'Go to Settings', onPress: () => openSettings() },
+              { text: 'Go to Settings', onPress: () => Linking.openSettings() },
             ],
             { cancelable: true }
           );

package/src/hooks-sdk.ts

@@ -5,6 +5,7 @@ import {
   setIsLocalAudioMutedState,
   setIsLocalScreenSharedState,
   setIsLocalVideoMutedState,
+  setRoomLocallyMuted,
 } from './redux/actions';
 import {
   selectAllowedTracksToPublish,
@@ -218,6 +219,28 @@ export const useHMSActions = () => {
     []
   );
 
+  const setRoomMuteLocally = useCallback(
+    async (mute: boolean): Promise<void> => {
+      const state: RootState = store.getState();
+      const hmsInstance = state.user.hmsInstance;
+
+      if (!hmsInstance) {
+        return Promise.reject('HMSSDK Instance is not available!');
+      }
+
+      try {
+        const result = await hmsInstance.setPlaybackForAllAudio(mute);
+        console.log('Set Room Mute Locally Success: ', result);
+
+        dispatch(setRoomLocallyMuted(mute));
+      } catch (error) {
+        console.log('Set Room Mute Locally Error: ', error);
+        return Promise.reject(error);
+      }
+    },
+    []
+  );
+
   return {
     setLocalAudioEnabled,
     setLocalVideoEnabled,
@@ -228,5 +251,6 @@ export const useHMSActions = () => {
     raiseLocalPeerHand,
     lowerLocalPeerHand,
     lowerRemotePeerHand,
+    setRoomMuteLocally,
   };
 };