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

package/src/components/HMSHLSStreamLoading.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import { HMSLocalVideoView } from './HMSLocalVideoView';
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+
+export const HMSHLSStreamLoading = () => {
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+
+  const { primary_default: primaryDefaultColor } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.background_dim,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      {isLocalVideoMuted ? null : <HMSLocalVideoView />}
+
+      <View style={styles.hlsLoaderContainer}>
+        <ActivityIndicator
+          style={styles.hlsLoader}
+          size={'large'}
+          color={primaryDefaultColor}
+        />
+
+        <Text style={[styles.hlsLoaderText, hmsRoomStyles.text]}>
+          Starting live stream...
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  hlsLoaderContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.LOADING_BACKDROP,
+    zIndex: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  hlsLoader: {
+    marginBottom: 30,
+  },
+  hlsLoaderText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  },
+});

package/src/components/HMSLocalVideoView.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSVideoViewMode } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { useHMSInstance } from '../hooks-util';
+
+export const HMSLocalVideoView = () => {
+  const hmsInstance = useHMSInstance();
+  const HmsView = hmsInstance.HmsView;
+  const mirrorCamera = useSelector(
+    (state: RootState) => state.app.joinConfig.mirrorCamera
+  );
+  const autoSimulcast = useSelector(
+    (state: RootState) => state.app.joinConfig.autoSimulcast
+  );
+  const localVideoTrackId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.videoTrack?.trackId
+  );
+
+  if (!localVideoTrackId) {
+    return null;
+  }
+
+  return (
+    <HmsView
+      trackId={localVideoTrackId}
+      key={localVideoTrackId}
+      mirror={mirrorCamera}
+      autoSimulcast={autoSimulcast}
+      scaleType={HMSVideoViewMode.ASPECT_FILL}
+      style={styles.hmsView}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  hmsView: {
+    flex: 1,
+  },
+});

package/src/components/{HMSSpeakerSettings.tsx → HMSManageAudioOutput.tsx}

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Modal from 'react-native-modal';
 import {
   Platform,
   ScrollView,
@@ -18,17 +17,17 @@ import {
 import {
   AnswerPhoneIcon,
   BluetoothIcon,
+  CheckIcon,
   HeadphonesIcon,
   SpeakerIcon,
   WaveIcon,
 } from '../Icons';
 import { PressableIcon } from './PressableIcon';
-import { COLORS } from '../utils/theme';
-import { CloseIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
 import type { RootState } from '../redux';
+import { BottomSheet } from './BottomSheet';
 
-export const HMSSpeakerSettings: React.FC = () => {
+export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
 
@@ -120,6 +119,20 @@ export const HMSSpeakerSettings: React.FC = () => {
     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 (
     <View>
       <PressableIcon onPress={handleSpeakerChange}>
@@ -130,100 +143,80 @@ export const HMSSpeakerSettings: React.FC = () => {
         )}
       </PressableIcon>
 
-      <Modal
-        isVisible={settingsModalVisible}
-        animationIn={'slideInUp'}
-        animationOut={'slideOutDown'}
-        backdropColor={COLORS.BACKGROUND.DIM}
-        backdropOpacity={0.3}
-        onBackButtonPress={dismissModal}
-        onBackdropPress={dismissModal}
-        useNativeDriver={true}
-        useNativeDriverForBackdrop={true}
-        hideModalContentWhileAnimating={true}
-        // swipeDirection={['up', 'down']}
-        // swipe
-        style={styles.modal}
-      >
-        <View style={styles.container}>
-          <View style={styles.header}>
-            <Text style={styles.headerText}>Speaker Settings</Text>
+      <BottomSheet isVisible={settingsModalVisible} dismissModal={dismissModal}>
+        <BottomSheet.Header
+          dismissModal={dismissModal}
+          heading="Audio Output"
+        />
 
-            <TouchableOpacity
-              onPress={dismissModal}
-              hitSlop={styles.closeIconHitSlop}
-            >
-              <CloseIcon />
-            </TouchableOpacity>
-          </View>
+        <BottomSheet.Divider />
 
+        <View style={styles.contentContainer}>
           {availableAudioOutputDevices.length === 0 ? (
             <View style={styles.emptyView}>
-              <Text style={styles.itemText}>No other devices available!</Text>
+              <Text style={[styles.itemText, hmsRoomStyles.text]}>
+                No other devices available!
+              </Text>
             </View>
           ) : (
             <ScrollView showsVerticalScrollIndicator={true}>
-              {availableAudioOutputDevices.sort().map((device) => (
-                <React.Fragment key={device}>
-                  {true ? <View style={styles.divider} /> : null}
+              {availableAudioOutputDevices
+                .sort(
+                  (a, b) => audioDeviceSortOrder[a] - audioDeviceSortOrder[b]
+                )
+                .map((device, index) => {
+                  const isFirst = index === 0;
+
+                  return (
+                    <React.Fragment key={device}>
+                      {isFirst ? null : (
+                        <View style={[styles.divider, hmsRoomStyles.divider]} />
+                      )}
+
+                      <TouchableOpacity
+                        style={styles.audioDeviceItem}
+                        onPress={() => handleSelectAudioDevice(device)}
+                      >
+                        <View style={styles.itemTextWrapper}>
+                          {getIcon(
+                            device === HMSAudioDevice.AUTOMATIC &&
+                              currentAudioOutputDevice
+                              ? currentAudioOutputDevice
+                              : device
+                          )}
 
-                  <TouchableOpacity
-                    style={styles.audioDeviceItem}
-                    onPress={() => handleSelectAudioDevice(device)}
-                  >
-                    {getIcon(device)}
-                    <Text style={styles.itemText}>{device}</Text>
-                  </TouchableOpacity>
-                </React.Fragment>
-              ))}
+                          <Text style={[styles.itemText, hmsRoomStyles.text]}>
+                            {getDescription(device, currentAudioOutputDevice)}
+                          </Text>
+                        </View>
+
+                        {device === currentAudioOutputDevice ? (
+                          <CheckIcon />
+                        ) : null}
+                      </TouchableOpacity>
+                    </React.Fragment>
+                  );
+                })}
             </ScrollView>
           )}
         </View>
-      </Modal>
+      </BottomSheet>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end',
-  },
-  container: {
-    backgroundColor: COLORS.SURFACE.DIM,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingTop: 24,
-    paddingHorizontal: 16,
-    paddingBottom: 32,
+  contentContainer: {
+    marginHorizontal: 24,
   },
-  header: {
+  itemTextWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16,
-  },
-  headerText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '500',
-    lineHeight: 24,
-    letterSpacing: 0.15,
-  },
-  closeIconHitSlop: {
-    bottom: 16,
-    left: 16,
-    right: 16,
-    top: 16,
+    justifyContent: 'center',
   },
   itemText: {
-    flex: 1,
     marginHorizontal: 16,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.1,
   },
@@ -235,11 +228,11 @@ const styles = StyleSheet.create({
   audioDeviceItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 24,
+    justifyContent: 'space-between',
+    paddingVertical: 20,
   },
   divider: {
     height: 1,
-    backgroundColor: COLORS.BORDER.DEFAULT,
   },
 });
 
@@ -257,3 +250,31 @@ const getIcon = (ofDevice: HMSAudioDevice) => {
       return <HeadphonesIcon />;
   }
 };
+
+const getDescription = (
+  ofDevice: HMSAudioDevice,
+  currentDevice: HMSAudioDevice | null
+): string => {
+  switch (ofDevice) {
+    case HMSAudioDevice.AUTOMATIC:
+      return currentDevice && currentDevice !== HMSAudioDevice.AUTOMATIC
+        ? `Default (${getDescription(currentDevice, currentDevice)})`
+        : 'Automatic';
+    case HMSAudioDevice.BLUETOOTH:
+      return 'Bluetooth Device';
+    case HMSAudioDevice.EARPIECE:
+      return 'Phone';
+    case HMSAudioDevice.SPEAKER_PHONE:
+      return 'Speaker';
+    case HMSAudioDevice.WIRED_HEADSET:
+      return 'Earphone';
+  }
+};
+
+const audioDeviceSortOrder = {
+  [HMSAudioDevice.AUTOMATIC]: 0,
+  [HMSAudioDevice.SPEAKER_PHONE]: 1,
+  [HMSAudioDevice.WIRED_HEADSET]: 2,
+  [HMSAudioDevice.EARPIECE]: 3,
+  [HMSAudioDevice.BLUETOOTH]: 4,
+} as const;

package/src/components/HMSManageCameraRotation.tsx

@@ -4,8 +4,8 @@ import { useSelector } from 'react-redux';
 import { RotateCameraIcon } from '../Icons';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
+import { useHMSRoomStyle } from '../hooks-util';
 
 export const HMSManageCameraRotation = () => {
   const canPublishVideo = useCanPublishVideo();
@@ -31,18 +31,21 @@ const RotateCameraButton = () => {
     await hmsActions.switchCamera();
   };
 
+  const cameraIconStyles = useHMSRoomStyle(
+    (theme) => ({
+      tintColor: isLocalVideoMuted
+        ? theme.palette.on_surface_low
+        : theme.palette.on_surface_high,
+    }),
+    [isLocalVideoMuted]
+  );
+
   return (
     <PressableIcon
       onPress={handleVideoMuteTogglePress}
       disabled={isLocalVideoMuted}
     >
-      <RotateCameraIcon
-        style={{
-          tintColor: isLocalVideoMuted
-            ? COLORS.SURFACE.ON_SURFACE.LOW
-            : COLORS.SURFACE.ON_SURFACE.HIGH,
-        }}
-      />
+      <RotateCameraIcon style={cameraIconStyles} />
     </PressableIcon>
   );
 };