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

package/src/components/HMSBaseButton.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle, ColorValue } from 'react-native';
+
+export interface HMSBaseButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  underlayColor: ColorValue;
+  loaderColor: ColorValue;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+}
+
+export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
+  underlayColor,
+  loaderColor,
+  title,
+  loading,
+  onPress,
+  style,
+  textStyle,
+  disabled,
+  leftComponent,
+}) => {
+  return (
+    <TouchableHighlight
+      underlayColor={underlayColor}
+      style={[styles.button, style]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <>
+        {loading ? (
+          <ActivityIndicator
+            size={'small'}
+            color={loaderColor}
+            style={styles.loader}
+          />
+        ) : null}
+
+        <View
+          style={[
+            styles.buttonContentWrapper,
+            loading ? styles.hiddenView : null,
+          ]}
+        >
+          {leftComponent}
+
+          <Text style={[styles.text, textStyle]}>{title}</Text>
+        </View>
+      </>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonContentWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginHorizontal: 8,
+  },
+  loader: {
+    position: 'absolute',
+  },
+  hiddenView: {
+    opacity: 0,
+  },
+});

package/src/components/HMSDangerButton.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSBaseButton } from './HMSBaseButton';
+
+export interface HMSDangerButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+}
+
+export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
+  title,
+  loading,
+  onPress,
+  style,
+  disabled,
+  leftComponent,
+}) => {
+  const {
+    alert_error_dim: alertErrorDimColor,
+    alert_error_brighter: alertErrorBrighterColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    disabledButton: {
+      backgroundColor: theme.palette.alert_error_dim,
+    },
+    buttonText: {
+      color: theme.palette.alert_error_brighter,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    disabledText: {
+      color: theme.palette.alert_error_bright,
+    },
+  }));
+
+  return (
+    <HMSBaseButton
+      loaderColor={alertErrorBrighterColor}
+      loading={loading}
+      onPress={onPress}
+      title={title}
+      underlayColor={alertErrorDimColor}
+      disabled={disabled}
+      leftComponent={leftComponent}
+      style={[
+        hmsRoomStyles.button,
+        disabled ? hmsRoomStyles.disabledButton : null,
+        style,
+      ]}
+      textStyle={[
+        hmsRoomStyles.buttonText,
+        disabled ? hmsRoomStyles.disabledText : null,
+      ]}
+    />
+  );
+};

package/src/components/HMSHLSStreamLoading.tsx

@@ -5,24 +5,39 @@ 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}>
+    <View style={[styles.container, hmsRoomStyles.container]}>
       {isLocalVideoMuted ? null : <HMSLocalVideoView />}
 
       <View style={styles.hlsLoaderContainer}>
         <ActivityIndicator
           style={styles.hlsLoader}
           size={'large'}
-          color={COLORS.PRIMARY.DEFAULT}
+          color={primaryDefaultColor}
         />
 
-        <Text style={styles.hlsLoaderText}>Starting live stream...</Text>
+        <Text style={[styles.hlsLoaderText, hmsRoomStyles.text]}>
+          Starting live stream...
+        </Text>
       </View>
     </View>
   );
@@ -32,7 +47,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
   },
   hlsLoaderContainer: {
     position: 'absolute',
@@ -47,10 +61,7 @@ const styles = StyleSheet.create({
     marginBottom: 30,
   },
   hlsLoaderText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
     lineHeight: 24,
     letterSpacing: 0.5,
   },

package/src/components/HMSManageAudioOutput.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Modal from 'react-native-modal';
 import {
   Platform,
   ScrollView,
@@ -24,10 +23,9 @@ import {
   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 HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
@@ -121,6 +119,20 @@ export const HMSManageAudioOutput: 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}>
@@ -131,36 +143,20 @@ export const HMSManageAudioOutput: 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}>Audio Output</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}>
@@ -168,73 +164,50 @@ export const HMSManageAudioOutput: React.FC = () => {
                 .sort(
                   (a, b) => audioDeviceSortOrder[a] - audioDeviceSortOrder[b]
                 )
-                .map((device) => (
-                  <React.Fragment key={device}>
-                    <View style={styles.divider} />
+                .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)}
+                      >
+                        <View style={styles.itemTextWrapper}>
+                          {getIcon(
+                            device === HMSAudioDevice.AUTOMATIC &&
+                              currentAudioOutputDevice
+                              ? currentAudioOutputDevice
+                              : device
+                          )}
 
-                        <Text style={styles.itemText}>
-                          {getDescription(device, currentAudioOutputDevice)}
-                        </Text>
-                      </View>
+                          <Text style={[styles.itemText, hmsRoomStyles.text]}>
+                            {getDescription(device, currentAudioOutputDevice)}
+                          </Text>
+                        </View>
 
-                      {device === currentAudioOutputDevice ? (
-                        <CheckIcon />
-                      ) : null}
-                    </TouchableOpacity>
-                  </React.Fragment>
-                ))}
+                        {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.BACKGROUND.DEFAULT,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingTop: 24,
-    paddingHorizontal: 16,
-    paddingBottom: 32,
-  },
-  header: {
-    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,
+  contentContainer: {
+    marginHorizontal: 24,
   },
   itemTextWrapper: {
     flexDirection: 'row',
@@ -243,10 +216,7 @@ const styles = StyleSheet.create({
   },
   itemText: {
     marginHorizontal: 16,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.1,
   },
@@ -263,7 +233,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: COLORS.BORDER.DEFAULT,
   },
 });
 

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>
   );
 };