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

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/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,58 +1,53 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet } from 'react-native';
 
-import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
-import { usePortraitChatViewVisible } from '../hooks-util';
-import { ClockIcon } from '../Icons';
+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,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    description: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
 
   return (
-    <View
-      style={[
-        styles.textContainer,
-        portraitChatViewVisible ? styles.taleLessSpaceAsYouCan : null,
-        portraitChatViewVisible ? { aspectRatio: hlsAspectRatio.value } : null,
-      ]}
-    >
-      <ClockIcon />
-      <Text style={styles.title}>Class hasn't started yet</Text>
-      <Text style={styles.description}>
-        Please wait for the teacher to start the class.
+    <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>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  textContainer: {
+  container: {
     flex: 1,
     paddingHorizontal: 24,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  icon: {
+    marginBottom: 24,
+  },
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontFamily: 'Inter',
-    fontSize: 28,
-    fontWeight: '600',
+    fontSize: 24,
     lineHeight: 32,
-    letterSpacing: 0.25,
     textAlign: 'center',
   },
   description: {
-    color: COLORS.SURFACE.ON_SURFACE.LOW,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 20,
-    letterSpacing: 0.25,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
     textAlign: 'center',
     marginTop: 8,
   },

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, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
+
+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 = useReanimatedKeyboardAnimation();
+
+  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 { 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: theme.palette.alert_error_brighter,
+      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,
+  },
+});

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { useHMSActions } from '../hooks-sdk';
+import { ScreenShareIcon } from '../Icons';
+import { HMSDangerButton } from './HMSDangerButton';
+import { HMSNotification } from './HMSNotification';
+import { useHMSRoomStyle } from '../hooks-util';
+import { NotificationTypes } from '../utils';
+
+export interface HMSLocalScreenshareNotificationProps {}
+
+export const HMSLocalScreenshareNotification: React.FC<
+  HMSLocalScreenshareNotificationProps
+> = () => {
+  const hmsActions = useHMSActions();
+
+  const notificationStyle = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.surface_default,
+  }));
+
+  const stopScreenshare = async () => {
+    await hmsActions.setScreenShareEnabled(false);
+  };
+
+  return (
+    <HMSNotification
+      id={NotificationTypes.LOCAL_SCREENSHARE}
+      autoDismiss={false}
+      style={notificationStyle}
+      text={'You are sharing your screen'}
+      icon={<ScreenShareIcon />}
+      cta={
+        <HMSDangerButton
+          loading={false}
+          onPress={stopScreenshare}
+          title="Stop"
+        />
+      }
+    />
+  );
+};

package/src/components/HMSLocalVideoView.tsx

@@ -1,42 +1,15 @@
 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';
+import { HMSVideoView } from './HMSVideoView';
 
 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}
-    />
-  );
+  return localVideoTrackId ? (
+    <HMSVideoView trackId={localVideoTrackId} />
+  ) : null;
 };
-
-const styles = StyleSheet.create({
-  hmsView: {
-    flex: 1,
-  },
-});

package/src/components/HMSManageAudioOutput.tsx

@@ -23,12 +23,17 @@ import {
   WaveIcon,
 } from '../Icons';
 import { PressableIcon } from './PressableIcon';
-import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import {
+  useHMSInstance,
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+} from '../hooks-util';
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 
 export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
+  const isHLSViewer = useIsHLSViewer();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
 
   const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
@@ -135,7 +140,10 @@ export const HMSManageAudioOutput: React.FC = () => {
 
   return (
     <View>
-      <PressableIcon onPress={handleSpeakerChange}>
+      <PressableIcon
+        onPress={handleSpeakerChange}
+        style={isHLSViewer ? styles.button : null}
+      >
         {Platform.OS === 'ios' ? (
           <SpeakerIcon muted={false} />
         ) : (
@@ -206,6 +214,10 @@ export const HMSManageAudioOutput: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+  },
   contentContainer: {
     marginHorizontal: 24,
   },