@100mslive/react-native-room-kit 0.2.0 → 1.0.1

package/src/components/HLSView.tsx

@@ -1,18 +1,15 @@
-import React, { useRef, useEffect } from 'react';
+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 { AvoidSoftInput } from 'react-native-avoid-softinput';
 
 import type { RootState } from '../redux';
 import { changeShowHLSStats } from '../redux/actions';
 import { HLSPlayerStatsView } from './HLSPlayerStatsView';
 import { HLSPlayerEmoticons } from './HLSPlayerEmoticons';
 import { CustomControls } from './CustomHLSPlayerControls';
-import { ChatView } from './ChatWindow';
 import { COLORS } from '../utils/theme';
-import { usePortraitChatViewVisible } from '../hooks-util';
 import { HMSHLSNotStarted } from './HMSHLSNotStarted';
 
 export const HLSView: React.FC = () => {
@@ -28,10 +25,6 @@ export const HLSView: React.FC = () => {
   const enableHLSPlayerControls = useSelector(
     (state: RootState) => state.app.joinConfig.enableHLSPlayerControls
   );
-  const hlsAspectRatio = useSelector(
-    (state: RootState) => state.app.hlsAspectRatio
-  );
-  const portraitChatViewVisible = usePortraitChatViewVisible();
 
   const handleClosePress = () => {
     dispatch(changeShowHLSStats(false));
@@ -87,42 +80,24 @@ export const HLSView: React.FC = () => {
     }
   };
 
-  useEffect(() => {
-    AvoidSoftInput.setAdjustNothing();
-    AvoidSoftInput.setEnabled(true);
-
-    return () => AvoidSoftInput.setEnabled(false);
-  }, []);
-
   return (
     <View style={styles.hlsView}>
       {room?.hlsStreamingState?.running ? (
         room?.hlsStreamingState?.variants?.slice(0, 1)?.map((variant, index) =>
           variant?.hlsStreamUrl ? (
-            <View
-              key={index}
-              style={[
-                styles.hlsPlayerContainer,
-                portraitChatViewVisible ? styles.taleLessSpaceAsYouCan : null,
-              ]}
-            >
-              {/* <View>
-                <Animated.View style={{flex: canShowChatView ? 0 : 1}} collapsable={false} layout={}> */}
+            <View key={index} style={styles.hlsPlayerContainer}>
               <HMSHLSPlayer
                 ref={hmsHlsPlayerRef}
-                containerStyle={
-                  portraitChatViewVisible ? styles.taleLessSpaceAsYouCan : null
-                }
-                aspectRatio={hlsAspectRatio.value}
                 enableStats={showHLSStats}
                 enableControls={enableHLSPlayerControls}
               />
-              {/* </Animated.View>
-              </View> */}
+
               <HLSPlayerEmoticons />
+
               {showHLSStats ? (
                 <HLSPlayerStatsView onClosePress={handleClosePress} />
               ) : null}
+
               {showCustomHLSPlayerControls ? (
                 <CustomControls handleControlPress={hlsPlayerActions} />
               ) : null}
@@ -136,8 +111,6 @@ export const HLSView: React.FC = () => {
       ) : (
         <HMSHLSNotStarted />
       )}
-
-      {portraitChatViewVisible ? <ChatView /> : null}
     </View>
   );
 };

package/src/components/HMSBaseButton.tsx

@@ -12,8 +12,8 @@ export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
-  underlayColor: ColorValue;
-  loaderColor: ColorValue;
+  underlayColor?: ColorValue | undefined;
+  loaderColor?: ColorValue | undefined;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;

package/src/components/HMSChat.tsx

@@ -1,36 +1,23 @@
 import * as React from 'react';
-import { View } from 'react-native';
 
 import { ChatIcon } from '../Icons';
 import { PressableIcon } from './PressableIcon';
-import { ChatWindow } from './ChatWindow';
-import { DefaultModal } from './DefaultModal';
-import { useShowChat } from '../hooks-util';
+import { useShowChatAndParticipants } from '../hooks-util';
 
 export const HMSChat = () => {
-  const [chatVisibleType, setChatVisible] = useShowChat();
+  const { overlayChatVisible, show, hide } = useShowChatAndParticipants();
 
-  const toggleChatWindow = () => setChatVisible(chatVisibleType === 'none');
-
-  const closeChatWindow = () => setChatVisible(false);
+  const toggleChatWindow = () => {
+    if (overlayChatVisible) {
+      hide('chat_overlay');
+    } else {
+      show('chat');
+    }
+  };
 
   return (
-    <View>
-      <PressableIcon
-        onPress={toggleChatWindow}
-        active={chatVisibleType === 'inset'}
-      >
-        <ChatIcon />
-      </PressableIcon>
-
-      <DefaultModal
-        animationIn={'slideInUp'}
-        animationOut={'slideOutDown'}
-        modalVisible={chatVisibleType === 'modal'}
-        setModalVisible={closeChatWindow}
-      >
-        <ChatWindow />
-      </DefaultModal>
-    </View>
+    <PressableIcon onPress={toggleChatWindow} active={overlayChatVisible}>
+      <ChatIcon />
+    </PressableIcon>
   );
 };

package/src/components/HMSDangerButton.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import { COLORS } from '../utils/theme';
 
 export interface HMSDangerButtonProps {
   title: string;
@@ -34,7 +35,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
       backgroundColor: theme.palette.alert_error_dim,
     },
     buttonText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
     disabledText: {

package/src/components/HMSHLSMessage.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import { HMSMessage } from '@100mslive/react-native-hms';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+interface HMSHLSMessageProps {
+  message: HMSMessage;
+}
+
+const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
+  const messageSender = message.sender;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (_theme, typography) => ({
+      senderName: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-SemiBold`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      message: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-Regular`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+    }),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text
+        style={[styles.senderName, hmsRoomStyles.senderName]}
+        numberOfLines={1}
+      >
+        {messageSender
+          ? messageSender.isLocal
+            ? 'You'
+            : messageSender.name
+          : 'Anonymous'}
+      </Text>
+
+      <Text style={[styles.message, hmsRoomStyles.message]}>
+        {message.message}
+      </Text>
+    </View>
+  );
+};
+
+export const HMSHLSMessage = React.memo(_HMSHLSMessage);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    width: '100%',
+  },
+  senderName: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.1,
+    textShadowOffset: { height: 1, width: 1 },
+    textShadowRadius: 2,
+  },
+  message: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+    marginTop: 2,
+    textShadowOffset: { height: 0.5, width: 0.5 },
+    textShadowRadius: 2,
+  },
+});

package/src/components/HMSHLSMessageList.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import { useSelector } from 'react-redux';
+import { FlashList } from '@shopify/flash-list';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { HMSHLSMessage } from './HMSHLSMessage';
+
+export const HMSHLSMessageList: React.FC = () => {
+  const { height: windowHeight } = useWindowDimensions();
+  const messages = useSelector((state: RootState) => state.messages.messages);
+
+  const _keyExtractor = React.useCallback(
+    (item: HMSMessage) => item.messageId,
+    []
+  );
+
+  const _renderItem = React.useCallback((data: { item: HMSMessage }) => {
+    return <HMSHLSMessage message={data.item} />;
+  }, []);
+
+  if (messages.length <= 0) {
+    return null;
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          maxHeight: windowHeight * 0.2,
+          height:
+            messages.length > 3 ? windowHeight * 0.2 : messages.length * 54,
+        },
+      ]}
+    >
+      <FlashList
+        data={messages}
+        inverted={true}
+        estimatedItemSize={62}
+        contentContainerStyle={{ paddingBottom: 30 }}
+        // contentContainerStyle={styles.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
+        keyboardShouldPersistTaps="always"
+        // ListEmptyComponent={ChatBanner}
+        // ItemSeparatorComponent={() => <View style={{ height: 16 }} />} // TODO: There is a bug related to this: https://github.com/Shopify/flash-list/issues/638
+        renderItem={_renderItem}
+        keyExtractor={_keyExtractor}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+});

package/src/components/HMSHLSNotStarted.tsx

@@ -1,17 +1,10 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet } from 'react-native';
 
-import type { RootState } from '../redux';
-import { useHMSRoomStyleSheet, usePortraitChatViewVisible } from '../hooks-util';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 import { RadioIcon } from '../Icons';
 
 export const HMSHLSNotStarted = () => {
-  const portraitChatViewVisible = usePortraitChatViewVisible();
-  const hlsAspectRatio = useSelector(
-    (state: RootState) => state.app.hlsAspectRatio
-  );
-
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     title: {
       color: theme.palette.on_surface_high,
@@ -20,19 +13,15 @@ export const HMSHLSNotStarted = () => {
     description: {
       color: theme.palette.on_surface_medium,
       fontFamily: `${typography.font_family}-Regular`,
-    }
+    },
   }));
 
   return (
-    <View
-      style={[
-        styles.container,
-        portraitChatViewVisible ? styles.taleLessSpaceAsYouCan : null,
-        portraitChatViewVisible ? { aspectRatio: hlsAspectRatio.value } : null,
-      ]}
-    >
-      <RadioIcon size='extra-large' containerStyle={styles.icon} />
-      <Text style={[styles.title, hmsRoomStyles.title]}>Stream yet to start</Text>
+    <View style={styles.container}>
+      <RadioIcon size="extra-large" containerStyle={styles.icon} />
+      <Text style={[styles.title, hmsRoomStyles.title]}>
+        Stream yet to start
+      </Text>
       <Text style={[styles.description, hmsRoomStyles.description]}>
         Sit back and relax
       </Text>
@@ -48,7 +37,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   icon: {
-    marginBottom: 24
+    marginBottom: 24,
   },
   title: {
     fontSize: 24,

package/src/components/HMSHLSStreamLoading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
+import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
@@ -22,13 +22,20 @@ export const HMSHLSStreamLoading = () => {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    backdropContainer: {
+      backgroundColor: theme.palette.background_dim
+        ? hexToRgbA(theme.palette.background_dim, 0.7)
+        : undefined,
+    },
   }));
 
   return (
     <View style={[styles.container, hmsRoomStyles.container]}>
       {isLocalVideoMuted ? null : <HMSLocalVideoView />}
 
-      <View style={styles.hlsLoaderContainer}>
+      <View
+        style={[styles.hlsLoaderContainer, hmsRoomStyles.backdropContainer]}
+      >
         <ActivityIndicator
           style={styles.hlsLoader}
           size={'large'}
@@ -52,7 +59,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    backgroundColor: COLORS.LOADING_BACKDROP,
     zIndex: 5,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/HMSHandRaiseNotification.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableHighlight } from 'react-native';
+import type { HMSPeer } from '@100mslive/react-native-hms';
+
+import { HandIcon } from '../Icons';
+import {
+  useHMSInstance,
+  useHMSLayoutConfig,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { HMSNotification } from './HMSNotification';
+import { useDispatch, useSelector } from 'react-redux';
+import type { RootState } from '../redux';
+import { removeNotification } from '../redux/actions';
+
+export interface HMSHandRaiseNotificationProps {
+  peer: HMSPeer;
+  id: string;
+  dismissDelay?: number;
+  autoDismiss?: boolean;
+}
+
+export const HMSHandRaiseNotification: React.FC<
+  HMSHandRaiseNotificationProps
+> = ({ peer, id, dismissDelay = 5000, autoDismiss }) => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const onStageExpData = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+  );
+  const onStageRole = useSelector((state: RootState) => {
+    const onStageRoleStr = onStageExpData?.on_stage_role;
+    if (!onStageRoleStr) {
+      return null;
+    }
+    return (
+      state.hmsStates.roles.find((role) => role.name === onStageRoleStr) || null
+    );
+  });
+
+  const { secondary_dim: secondaryDimColor } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.secondary_default,
+    },
+    buttonText: {
+      color: theme.palette.on_secondary_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const bringPeerToStage = async () => {
+    if (!onStageRole) {
+      return Promise.reject(
+        `${
+          onStageExpData ? '"on_stage_role"' : '"on_stage_exp"'
+        } data is not available`
+      );
+    }
+    dispatch(removeNotification(id));
+    await hmsInstance.changeRoleOfPeer(peer, onStageRole, false);
+  };
+
+  return (
+    <HMSNotification
+      id={id}
+      icon={<HandIcon />}
+      text={`${peer.name} raised hand`}
+      dismissDelay={dismissDelay}
+      autoDismiss={autoDismiss}
+      cta={
+        <TouchableHighlight
+          underlayColor={secondaryDimColor}
+          style={[styles.button, hmsRoomStyles.button]}
+          onPress={bringPeerToStage}
+        >
+          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+            {onStageExpData?.bring_to_stage_label || 'Bring to Stage'}
+          </Text>
+        </TouchableHighlight>
+      }
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    marginRight: 16,
+  },
+  buttonText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Platform, StatusBar, useWindowDimensions } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedKeyboard,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+export interface HMSKeyboardAvoidingViewProps {
+  style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+}
+
+export const HMSKeyboardAvoidingView: React.FC<
+  HMSKeyboardAvoidingViewProps
+> = ({ children, style }) => {
+  const animatedViewRef = React.useRef<Animated.View>(null);
+  const { height: windowHeight } = useWindowDimensions();
+  const animatedKeyboard = useAnimatedKeyboard();
+
+  const initialPageY = useSharedValue(0);
+
+  const _handleViewOnLayout = React.useCallback(() => {
+    animatedViewRef.current?.measureInWindow((_fx, fy, _width, height) => {
+      if (height > 0) {
+        const finalWindowHeight =
+          Platform.OS === 'android' && Platform.Version < 29
+            ? windowHeight - (StatusBar.currentHeight ?? 0)
+            : windowHeight;
+        initialPageY.value = finalWindowHeight - (height + fy);
+      }
+    });
+  }, []);
+
+  const keyboardAvoidStyle = useAnimatedStyle(() => {
+    const keyboardHeight = animatedKeyboard.height.value;
+    return {
+      transform: [
+        {
+          translateY:
+            keyboardHeight <= initialPageY.value
+              ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
+              : -(keyboardHeight - initialPageY.value),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.View
+      ref={animatedViewRef}
+      onLayout={_handleViewOnLayout}
+      style={[style, keyboardAvoidStyle]}
+    >
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/HMSLiveIndicator.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useShowChatAndParticipants,
+} from '../hooks-util';
+import { EyeIcon } from '../Icons';
+import { COLORS, hexToRgbA } from '../utils/theme';
+import type { RootState } from '../redux';
+
+const _HMSLiveIndicator = () => {
+  const isHLSViewer = useIsHLSViewer();
+  const previewPeerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+  const live = useSelector(
+    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState?.running
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
+    live: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    liveText: {
+      color: COLORS.WHITE,
+      fontFamily: `${typograhy.font_family}-SemiBold`,
+    },
+    viewers: {
+      backgroundColor: isHLSViewer
+        ? theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64)
+        : undefined,
+      borderWidth: isHLSViewer ? 0 : 1,
+      borderColor: theme.palette.border_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typograhy.font_family}-SemiBold`,
+    },
+  }));
+
+  const { canShowParticipants, show } = useShowChatAndParticipants();
+
+  const showParticipantsSheet = () => {
+    show('participants');
+  };
+
+  if (!live) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Live */}
+      <View style={[styles.live, hmsRoomStyles.live]}>
+        <Text style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
+      </View>
+
+      {/* Viewer Count */}
+      {typeof previewPeerCount === 'number' ? (
+        <TouchableOpacity
+          style={[styles.viewers, hmsRoomStyles.viewers]}
+          onPress={showParticipantsSheet}
+          disabled={!canShowParticipants}
+        >
+          <EyeIcon />
+
+          <Text style={[styles.count, hmsRoomStyles.count]}>
+            {previewPeerCount}
+          </Text>
+        </TouchableOpacity>
+      ) : null}
+    </View>
+  );
+};
+
+export const HMSLiveIndicator = React.memo(_HMSLiveIndicator);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  live: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  liveText: {
+    fontSize: 10,
+    lineHeight: Platform.OS === 'android' ? 16 : undefined,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+  },
+  viewers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4,
+    paddingRight: 8,
+    paddingLeft: 6,
+    marginLeft: 8,
+    borderRadius: 4,
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: Platform.OS === 'android' ? 16 : undefined,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+
+    marginLeft: 4,
+  },
+});