@100mslive/react-native-room-kit 0.0.3 → 0.0.4

package/src/components/Preview.tsx

@@ -1,7 +1,14 @@
-import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { AvoidSoftInput } from 'react-native-avoid-softinput';
-import { useSelector } from 'react-redux';
+import React from 'react';
+import {
+  Keyboard,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useAnimatedKeyboard,
+} from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -17,9 +24,23 @@ import { HMSPreviewPeersList } from './HMSPreviewPeersList';
 import { HMSPreviewSubtitle } from './HMSPreviewSubtitle';
 import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
-import { HMSSpeakerSettings } from './HMSSpeakerSettings';
-import { GenericLogoIcon, NetworkQualityIcon } from '../Icons';
-import type { RootState } from '../redux';
+import { HMSManageAudioOutput } from './HMSManageAudioOutput';
+import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
+import { useCanPublishVideo } from '../hooks-sdk';
+import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
+
+const backButtonEdges = ['top'] as const;
+const headerEdges = ['top', 'left', 'right'] as const;
+
+const gradientColorShades = [
+  '#000000',
+  'rgba(0, 0, 0, 0.9)',
+  'rgba(0, 0, 0, 0.7)',
+  'rgba(0, 0, 0, 0.1)',
+  'rgba(0, 0, 0, 0.05)',
+  'rgba(0, 0, 0, 0)',
+];
+const gradientColorShadeLocations = [0.45, 0.55, 0.7, 0.9, 0.95, 1];
 
 export const Preview = ({
   join,
@@ -28,114 +49,82 @@ export const Preview = ({
   join(): void;
   loadingButtonState: boolean;
 }) => {
-  const localPeerNetworkQuality = useSelector(
-    (state: RootState) =>
-      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
-  );
-
-  useEffect(() => {
-    AvoidSoftInput.setAdjustNothing();
-    AvoidSoftInput.setEnabled(true);
+  const canPublishVideo = useCanPublishVideo();
+  const animatedKeyboard = useAnimatedKeyboard();
 
-    return () => AvoidSoftInput.setEnabled(false);
-  }, []);
+  const keyboardAvoidStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: -animatedKeyboard.height.value }],
+    };
+  });
 
   return (
-    <View style={styles.container}>
-      <HMSPreviewTile />
-
-      <LinearGradient
-        colors={[
-          '#000000',
-          'rgba(0, 0, 0, 0.9)',
-          'rgba(0, 0, 0, 0.7)',
-          'rgba(0, 0, 0, 0.1)',
-          'rgba(0, 0, 0, 0.05)',
-          'rgba(0, 0, 0, 0)',
-        ]}
-        locations={[0.45, 0.55, 0.7, 0.9, 0.95, 1]}
-        style={{
-          position: 'absolute',
-          top: 0,
-          width: '100%',
-          height: 260,
-        }}
-      />
-
-      <SafeAreaView
-        style={{ position: 'absolute', top: 0, width: '100%', marginTop: 24 }}
-        edges={['top', 'left', 'right']}
-        mode="margin"
-      >
-        <GenericLogoIcon style={{ alignSelf: 'center', marginBottom: 16 }} />
-
-        <HMSPreviewTitle />
-
-        <HMSPreviewSubtitle />
-
-        <HMSPreviewPeersList />
-      </SafeAreaView>
-
-      <SafeAreaView
-        style={{ position: 'absolute', top: 0 }}
-        edges={['top']}
-        mode="margin"
-      >
-        <BackButton />
-      </SafeAreaView>
-
-      <View
-        style={{
-          position: 'absolute',
-          bottom: 0,
-          width: '100%',
-        }}
-      >
-        <View
-          style={{
-            marginLeft: 8,
-            marginBottom: 8,
-            borderRadius: 8,
-            paddingVertical: 4,
-            paddingHorizontal: 8,
-            backgroundColor: COLORS.BACKGROUND.DIM_80,
-            alignSelf: 'flex-start',
-          }}
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <View style={styles.container}>
+        {canPublishVideo ? <HMSPreviewTile /> : null}
+
+        {canPublishVideo ? (
+          <LinearGradient
+            colors={gradientColorShades}
+            locations={gradientColorShadeLocations}
+            style={styles.headerGradient}
+          />
+        ) : null}
+
+        <SafeAreaView
+          style={canPublishVideo ? styles.header : null}
+          edges={headerEdges}
+          mode="margin"
         >
-          <NetworkQualityIcon quality={localPeerNetworkQuality} />
-        </View>
+          <HMSPreviewTitle />
+
+          <HMSPreviewSubtitle />
+
+          <View style={styles.peerListWrapper}>
+            <HMSPreviewHLSLiveIndicator />
+
+            <HMSPreviewPeersList />
+          </View>
+        </SafeAreaView>
 
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: COLORS.BACKGROUND.DEFAULT,
-            borderTopLeftRadius: 16,
-            borderTopRightRadius: 16,
-            padding: 16,
-          }}
+        <SafeAreaView
+          style={styles.backButtonContainer}
+          edges={backButtonEdges}
+          mode="margin"
         >
-          <View style={styles.controlsContainer}>
-            <View style={styles.micAndCameraControls}>
-              <HMSManageLocalAudio />
+          <BackButton />
+        </SafeAreaView>
+
+        <View style={styles.footerWrapper}>
+          <HMSPreviewNetworkQuality />
+
+          <Animated.View style={[styles.footer, keyboardAvoidStyle]}>
+            <View style={styles.controlsContainer}>
+              <View style={styles.micAndCameraControls}>
+                <HMSManageLocalAudio />
 
-              <View style={styles.manageLocalVideoWrapper}>
-                <HMSManageLocalVideo />
+                <View style={styles.manageLocalVideoWrapper}>
+                  <HMSManageLocalVideo />
+                </View>
+
+                <HMSManageCameraRotation />
               </View>
 
-              <HMSManageCameraRotation />
+              <HMSManageAudioOutput />
             </View>
 
-            <HMSSpeakerSettings />
-          </View>
-
-          <View style={styles.joinButtonRow}>
-            <HMSPreviewEditName />
+            <View style={styles.joinButtonRow}>
+              <HMSPreviewEditName />
 
-            <HMSPreviewJoinButton onJoin={join} loading={loadingButtonState} />
-          </View>
+              <HMSPreviewJoinButton
+                onJoin={join}
+                loading={loadingButtonState}
+              />
+            </View>
+          </Animated.View>
         </View>
       </View>
-    </View>
+    </TouchableWithoutFeedback>
   );
 };
 
@@ -144,12 +133,33 @@ const styles = StyleSheet.create({
     flex: 1,
     position: 'relative',
     backgroundColor: COLORS.BACKGROUND.DIM,
+    justifyContent: 'center',
+  },
+  header: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    marginTop: 24,
+    zIndex: 20,
+    alignItems: 'center',
+  },
+  headerGradient: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: 260,
+    zIndex: 10,
   },
   controlsContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
+  peerListWrapper: {
+    flexDirection: 'row',
+    marginTop: 16,
+    alignSelf: 'center',
+  },
   micAndCameraControls: {
     flexDirection: 'row',
   },
@@ -160,4 +170,22 @@ const styles = StyleSheet.create({
     marginVertical: 16,
     flexDirection: 'row',
   },
+  backButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    zIndex: 40,
+  },
+  footerWrapper: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    zIndex: 30,
+  },
+  footer: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DEFAULT,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+  },
 });

package/src/components/RoomSettingsModalContent.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import {
   View,
   StyleSheet,
@@ -11,7 +11,6 @@ import {
   InteractionManager,
 } from 'react-native';
 import {
-  HMSAudioFilePlayerNode,
   HMSAudioMixingMode,
   HMSUpdateListenerActions,
 } from '@100mslive/react-native-hms';
@@ -21,7 +20,6 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import EntypoIcons from 'react-native-vector-icons/Entypo';
-import DocumentPicker from 'react-native-document-picker';
 import { openSettings, requestNotifications } from 'react-native-permissions';
 
 import { COLORS } from '../utils/theme';
@@ -34,7 +32,6 @@ import {
 } from '../redux/actions';
 import { ModalTypes, PipModes } from '../utils/types';
 import { parseMetadata } from '../utils/functions';
-import { getJoinConfig } from '../utils';
 import { HMSShareScreen } from './HMSShareScreen';
 import { ScreenShareIcon } from '../Icons';
 
@@ -63,11 +60,6 @@ export const RoomSettingsModalContent: React.FC<
   setAudioDeviceListenerAdded,
   setMuteAllTracksAudio,
 }) => {
-  // REFS
-  const audioFilePlayerNodeRef = useRef(
-    new HMSAudioFilePlayerNode('audio_file_player_node')
-  );
-
   // REDUX STATES & DISPATCH
   const dispatch = useDispatch();
   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
@@ -308,73 +300,6 @@ export const RoomSettingsModalContent: React.FC<
         .catch((e) => console.log('Start Audioshare Error: ', e));
     }
   };
-
-  // iOS Audioshare
-  const setAudioShareVolume = () =>
-    setModalVisible(ModalTypes.SET_AUDIO_SHARE_VOLUME, true);
-
-  // iOS Audioshare
-  const playAudioShare = () => {
-    closeRoomSettingsModal();
-    setTimeout(() => {
-      DocumentPicker.pickSingle()
-        .then((result) => {
-          console.log('Document Picker Success: ', result);
-          audioFilePlayerNodeRef.current
-            .play(result?.uri, false, false)
-            .then((d) => {
-              console.log('Start Audioshare Success: ', d);
-            })
-            .catch((e) => console.log('Start Audioshare Error: ', e));
-        })
-        .catch((e) => console.log('Document Picker Error: ', e));
-    }, 500);
-  };
-
-  // iOS Audioshare
-  const stopAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.stop();
-  };
-
-  // iOS Audioshare
-  const pauseAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.pause();
-  };
-
-  // iOS Audioshare
-  const resumeAudioShare = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current.resume();
-  };
-
-  // iOS Audioshare
-  const isAudioSharePlaying = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .isPlaying()
-      .then((d) => console.log('Audioshare isPlaying: ', d))
-      .catch((e) => console.log('Audioshare isPlaying: ', e));
-  };
-
-  // iOS Audioshare
-  const getAudioShareDuration = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .duration()
-      .then((d) => console.log('Audioshare duration: ', d))
-      .catch((e) => console.log('Audioshare duration: ', e));
-  };
-
-  // iOS Audioshare
-  const getAudioShareCurrentDuration = () => {
-    closeRoomSettingsModal();
-    audioFilePlayerNodeRef.current
-      .currentDuration()
-      .then((d) => console.log('Audioshare currentDuration: ', d))
-      .catch((e) => console.log('Audioshare currentDuration: ', e));
-  };
   //#endregion
 
   return (
@@ -582,68 +507,6 @@ export const RoomSettingsModalContent: React.FC<
                 />
               </>
             ) : null}
-
-            {Platform.OS === 'ios' &&
-            getJoinConfig().audioMixer &&
-            localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-              <>
-                <SettingItem
-                  onPress={playAudioShare}
-                  text="Play Audio Share"
-                  IconType={Ionicons}
-                  iconName="play-outline"
-                />
-
-                <SettingItem
-                  onPress={stopAudioShare}
-                  text="Stop Audio Share"
-                  IconType={Ionicons}
-                  iconName="stop-outline"
-                />
-
-                <SettingItem
-                  onPress={setAudioShareVolume}
-                  text="Set Audio Share Volume"
-                  IconType={Ionicons}
-                  iconName="volume-high-outline"
-                />
-
-                <SettingItem
-                  onPress={pauseAudioShare}
-                  text="Pause Audio Share"
-                  IconType={Ionicons}
-                  iconName="pause-outline"
-                />
-
-                <SettingItem
-                  onPress={resumeAudioShare}
-                  text="Resume Audio Share"
-                  IconType={Ionicons}
-                  iconName="play-skip-forward-outline"
-                />
-
-                <SettingItem
-                  onPress={isAudioSharePlaying}
-                  text="Is Audio Share Playing"
-                  IconType={MaterialCommunityIcons}
-                  iconName="file-question-outline"
-                />
-
-                <SettingItem
-                  onPress={getAudioShareDuration}
-                  text="Audio Share Duration"
-                  IconType={Ionicons}
-                  iconName="timer-outline"
-                />
-
-                <SettingItem
-                  onPress={getAudioShareCurrentDuration}
-                  text="Audio Share Current Duration"
-                  IconType={Ionicons}
-                  iconName="timer-outline"
-                />
-              </>
-            ) : null}
           </>
         ) : null}
       </ScrollView>

package/src/components/index.ts

@@ -1,7 +1,6 @@
 export * from './ChatWindow';
 export * from './Preview';
 export * from './Picker';
-export * from './ZoomableView';
 export * from './CustomInput';
 export * from './CustomButton';
 export * from './DefaultModal';

package/src/hooks/useHmsInstance.ts

@@ -12,7 +12,6 @@
 //   HMSVideoTrackSettings,
 // } from '@100mslive/react-native-hms';
 // import { useEffect, useState } from 'react';
-// import { getModel } from 'react-native-device-info';
 
 // export const useHmsInstance = () => {
 //   const [hmsInstance, setHmsInstance] = useState(null);

package/src/hooks-util-selectors.tsx

@@ -1,4 +1,14 @@
 import type { HMSPeer } from '@100mslive/react-native-hms';
 
+import type { RootState } from './redux';
+
 export const selectIsHLSViewer = (peer: HMSPeer | null | undefined) =>
   peer?.role?.name?.includes('hls') ?? false;
+
+export const selectShouldGoLive = (state: RootState) => {
+  const isHLSStreaming = state.hmsStates.room?.hlsStreamingState.running;
+  const canStartHLSStreaming =
+    state.hmsStates.localPeer?.role?.permissions?.hlsStreaming;
+
+  return canStartHLSStreaming && !isHLSStreaming;
+};