@100mslive/react-native-room-kit 0.0.1

package/src/components/HLSView.tsx

@@ -0,0 +1,170 @@
+import React, { useRef, useEffect } 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 = () => {
+  const dispatch = useDispatch();
+  const room = useSelector((state: RootState) => state.hmsStates.room);
+  const hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
+  const showHLSStats = useSelector(
+    (state: RootState) => state.app.joinConfig.showHLSStats
+  );
+  const showCustomHLSPlayerControls = useSelector(
+    (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
+  );
+  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));
+  };
+
+  const hlsPlayerActions = <
+    T extends
+      | 'play'
+      | 'stop'
+      | 'pause'
+      | 'resume'
+      | 'seekForward'
+      | 'seekBackward'
+      | 'seekToLive'
+      | 'setVolume',
+  >(
+    action: T,
+    ...args: any[]
+  ) => {
+    switch (action) {
+      case 'play': {
+        hmsHlsPlayerRef.current?.play(args[0]);
+        break;
+      }
+      case 'stop': {
+        hmsHlsPlayerRef.current?.stop();
+        break;
+      }
+      case 'pause': {
+        hmsHlsPlayerRef.current?.pause();
+        break;
+      }
+      case 'resume': {
+        hmsHlsPlayerRef.current?.resume();
+        break;
+      }
+      case 'seekForward': {
+        hmsHlsPlayerRef.current?.seekForward(args[0]);
+        break;
+      }
+      case 'seekBackward': {
+        hmsHlsPlayerRef.current?.seekBackward(args[0]);
+        break;
+      }
+      case 'seekToLive': {
+        hmsHlsPlayerRef.current?.seekToLivePosition();
+        break;
+      }
+      case 'setVolume': {
+        hmsHlsPlayerRef.current?.setVolume(args[0]);
+        break;
+      }
+    }
+  };
+
+  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={}> */}
+              <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}
+            </View>
+          ) : (
+            <View key={index} style={styles.textContainer}>
+              <Text style={styles.warningSubtitle}>Stream URL not found!</Text>
+            </View>
+          )
+        )
+      ) : (
+        <HMSHLSNotStarted />
+      )}
+
+      {portraitChatViewVisible ? <ChatView /> : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  hlsView: {
+    flex: 1,
+  },
+  hlsPlayerContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  warningSubtitle: {
+    color: COLORS.INDICATORS.WARNING,
+    fontFamily: 'Inter',
+    fontSize: 20,
+    fontWeight: '600',
+    letterSpacing: 0.25,
+    textAlign: 'center',
+  },
+  taleLessSpaceAsYouCan: {
+    flex: 0,
+  },
+});

package/src/components/HMSChat.tsx

@@ -0,0 +1,36 @@
+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';
+
+export const HMSChat = () => {
+  const [chatVisibleType, setChatVisible] = useShowChat();
+
+  const toggleChatWindow = () => setChatVisible(chatVisibleType === 'none');
+
+  const closeChatWindow = () => setChatVisible(false);
+
+  return (
+    <View>
+      <PressableIcon
+        onPress={toggleChatWindow}
+        active={chatVisibleType === 'inset'}
+      >
+        <ChatIcon />
+      </PressableIcon>
+
+      <DefaultModal
+        animationIn={'slideInUp'}
+        animationOut={'slideOutDown'}
+        modalVisible={chatVisibleType === 'modal'}
+        setModalVisible={closeChatWindow}
+      >
+        <ChatWindow />
+      </DefaultModal>
+    </View>
+  );
+};

package/src/components/HMSHLSNotStarted.tsx

@@ -0,0 +1,62 @@
+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';
+
+export const HMSHLSNotStarted = () => {
+  const portraitChatViewVisible = usePortraitChatViewVisible();
+  const hlsAspectRatio = useSelector(
+    (state: RootState) => state.app.hlsAspectRatio
+  );
+
+  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.
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontFamily: 'Inter',
+    fontSize: 28,
+    fontWeight: '600',
+    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,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+  taleLessSpaceAsYouCan: {
+    flex: 0,
+  },
+});

package/src/components/HMSManageCameraRotation.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+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';
+
+export const HMSManageCameraRotation = () => {
+  const canPublishVideo = useCanPublishVideo();
+
+  if (!canPublishVideo) {
+    return null;
+  }
+
+  return <RotateCameraButton />;
+};
+
+const RotateCameraButton = () => {
+  const hmsActions = useHMSActions();
+  // TODO: set initial `isLocalVideoMuted` state value as per initial track setting
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+
+  const handleVideoMuteTogglePress = async () => {
+    if (isLocalVideoMuted) {
+      return;
+    }
+    await hmsActions.switchCamera();
+  };
+
+  return (
+    <PressableIcon
+      onPress={handleVideoMuteTogglePress}
+      disabled={isLocalVideoMuted}
+    >
+      <RotateCameraIcon
+        style={{
+          tintColor: isLocalVideoMuted
+            ? COLORS.SURFACE.ON_SURFACE.LOW
+            : COLORS.SURFACE.ON_SURFACE.HIGH,
+        }}
+      />
+    </PressableIcon>
+  );
+};

package/src/components/HMSManageLeave.tsx

@@ -0,0 +1,349 @@
+import { useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Modal from 'react-native-modal';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Toast from 'react-native-simple-toast';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { AlertIcon, LeaveIcon } from '../Icons';
+import { useHMSInstance } from '../hooks-util';
+import type { RootState } from '../redux';
+import { clearStore } from '../redux/actions';
+import { COLORS } from '../utils/theme';
+import { ModalTypes } from '../utils/types';
+import { DefaultModal } from './DefaultModal';
+import { EndRoomModal, LeaveRoomModal } from './Modals';
+import { PressableIcon } from './PressableIcon';
+
+export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
+  // TODO: read current meeting joined state
+  const isMeetingJoined = true;
+
+  if (!isMeetingJoined) {
+    return null;
+  }
+
+  return <LeaveButton {...props} />;
+};
+
+type LeaveButtonProps =
+  | {
+      leaveIconDelegate?: React.ReactComponentElement<any>;
+    }
+  | {
+      leaveButtonDelegate?: React.ReactComponentElement<any>;
+    };
+
+const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
+  // TODO: What if useNavigation context is undefined?
+  const navigation = useNavigation();
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
+
+  const [leavePopVisible, setLeavePopVisible] = React.useState(false);
+  const [leaveModalType, setLeaveModalType] = React.useState(
+    ModalTypes.DEFAULT
+  );
+  const canEndRoom = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
+  );
+
+  /**
+   * Opens the Leave Popup Menu
+   */
+  const handleLeaveButtonPress = () => {
+    if (canEndRoom) {
+      setLeavePopVisible(true);
+    } else {
+      setLeaveModalType(ModalTypes.LEAVE_ROOM);
+    }
+  };
+
+  /**
+   * Closes the Leave Popup Menu
+   * Leave Modal will open after the popup is hidden
+   */
+  const handleLeavePress = () => {
+    leavePopCloseAction.current = ModalTypes.LEAVE_ROOM;
+    setLeavePopVisible(false);
+  };
+
+  /**
+   * Closes the Leave Popup Menu
+   * End Session Modal will open after the popup is hidden
+   */
+  const handleEndSessionPress = async () => {
+    leavePopCloseAction.current = ModalTypes.END_ROOM;
+    setLeavePopVisible(false);
+  };
+
+  /**
+   * Closes the Leave Popup Menu
+   * No action is taken when the popup is hidden
+   */
+  const dismissPopup = () => {
+    leavePopCloseAction.current = ModalTypes.DEFAULT;
+    setLeavePopVisible(false);
+  };
+
+  /**
+   * Handles action to take when the leave popup is hidden
+   */
+  const handlePopupHide = () => {
+    setLeaveModalType(leavePopCloseAction.current);
+  };
+
+  const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
+
+  const destroy = () => {
+    hmsInstance
+      .destroy()
+      .then((s) => {
+        console.log('Destroy Success: ', s);
+        // TODOS:
+        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
+        //    - Reset Redux States
+        //    - HMSInstance will not be available now
+        //    - When your presses "Re Join" Action button, restart process from root component
+        //    - When your presses "Done" Action button
+        //        - If we have callback fn, call it
+        //        - Otherwise try our best to navigate away from current screen
+        //
+        // - No screen to show
+        //    - No need to reset redux state?
+        //    - HMSInstance will be available till this point
+        //    - If we have callback fn, call it
+        //    - Otherwise try our best to navigate away from current screen
+        //    - When we are navigated away from screen, HMSInstance will be not available
+
+        // dispatch(clearMessageData());
+        // dispatch(clearPeerData());
+        // dispatch(clearHmsReference());
+
+        // if (navigation.canGoBack()) {
+        //   navigation.goBack();
+        // } else {
+        // TODO: remove this later
+        navigation.navigate('QRCodeScreen' as never);
+        dispatch(clearStore());
+        // }
+      })
+      .catch((e) => {
+        console.log(`Destroy HMS instance Error: ${e}`);
+        Toast.showWithGravity(
+          `Destroy HMS instance Error: ${e}`,
+          Toast.LONG,
+          Toast.TOP
+        );
+      });
+  };
+
+  const onLeavePress = () => {
+    hmsInstance
+      .leave()
+      .then((d) => {
+        console.log('Leave Success: ', d);
+        destroy();
+      })
+      .catch((e) => {
+        console.log(`Leave Room Error: ${e}`);
+        Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
+      });
+  };
+
+  const onEndRoomPress = () => {
+    hmsInstance
+      .endRoom('Host ended the room')
+      .then((d) => {
+        console.log('EndRoom Success: ', d);
+        destroy();
+      })
+      .catch((e) => console.log('EndRoom Error: ', e));
+  };
+
+  const leaveIconDelegate =
+    'leaveIconDelegate' in props && props.leaveIconDelegate ? (
+      props.leaveIconDelegate
+    ) : (
+      <LeaveIcon />
+    );
+
+  const leaveButtonDelegate =
+    'leaveButtonDelegate' in props && props.leaveButtonDelegate ? (
+      props.leaveButtonDelegate
+    ) : (
+      <PressableIcon>{React.cloneElement(leaveIconDelegate)}</PressableIcon>
+    );
+
+  return (
+    <View>
+      {React.cloneElement(leaveButtonDelegate, {
+        onPress: handleLeaveButtonPress,
+        style: styles.button,
+      })}
+
+      <LeavePopup
+        isVisible={leavePopVisible}
+        onEndSessionPress={handleEndSessionPress}
+        onLeavePress={handleLeavePress}
+        onPopupDismiss={dismissPopup}
+        onPopupHide={handlePopupHide}
+      />
+
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={leaveModalType === ModalTypes.LEAVE_ROOM}
+        setModalVisible={dismissModal}
+      >
+        <LeaveRoomModal onSuccess={onLeavePress} cancelModal={dismissModal} />
+      </DefaultModal>
+
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={leaveModalType === ModalTypes.END_ROOM}
+        setModalVisible={dismissModal}
+      >
+        <EndRoomModal onSuccess={onEndRoomPress} cancelModal={dismissModal} />
+      </DefaultModal>
+    </View>
+  );
+};
+
+const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
+const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
+    borderColor: COLORS.ALERT.ERROR.DEFAULT,
+  },
+});
+
+interface LeavePopupProps {
+  isVisible: boolean;
+  onPopupDismiss(): void;
+  onLeavePress(): void;
+  onEndSessionPress(): void;
+  onPopupHide(): void;
+}
+
+const LeavePopup: React.FC<LeavePopupProps> = ({
+  isVisible,
+  onPopupDismiss,
+  onLeavePress,
+  onEndSessionPress,
+  onPopupHide,
+}) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const canEndRoom = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
+  );
+
+  return (
+    <Modal
+      isVisible={isVisible}
+      animationIn={'fadeIn'}
+      animationOut={'fadeOut'}
+      backdropColor={COLORS.BACKGROUND.DIM}
+      backdropOpacity={0}
+      onBackButtonPress={onPopupDismiss}
+      onBackdropPress={onPopupDismiss}
+      useNativeDriver={true}
+      onModalHide={onPopupHide}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={leavePopupStyles.modal}
+    >
+      <View
+        style={[
+          leavePopupStyles.leavePopupContent,
+          {
+            marginTop: safeAreaInsets.top + HEADER_HEIGHT,
+            marginLeft: safeAreaInsets.left + 16 - 1, // LEFT_HEADER_PADDING - HEADER_BORDER_WIDTH,
+            marginRight: safeAreaInsets.right,
+            marginBottom: safeAreaInsets.bottom,
+          },
+        ]}
+      >
+        <TouchableOpacity
+          style={leavePopupStyles.leaveButton}
+          onPress={onLeavePress}
+        >
+          <LeaveIcon style={leavePopupStyles.leaveButtonIcon} />
+          <Text style={leavePopupStyles.leaveButtonText}>Leave</Text>
+        </TouchableOpacity>
+
+        {canEndRoom ? (
+          <>
+            <View style={leavePopupStyles.divider} />
+
+            <TouchableOpacity
+              style={leavePopupStyles.endRoomButton}
+              onPress={onEndSessionPress}
+            >
+              <AlertIcon style={leavePopupStyles.endRoomIcon} />
+              <Text style={leavePopupStyles.endRoomText}>End Session</Text>
+            </TouchableOpacity>
+          </>
+        ) : null}
+      </View>
+    </Modal>
+  );
+};
+
+const leavePopupStyles = StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-start',
+  },
+  leavePopupContent: {
+    overflow: 'hidden',
+    width: 243,
+    backgroundColor: COLORS.SURFACE.DIM,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.BORDER.BRIGHT,
+  },
+  leaveButton: {
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    paddingVertical: 16,
+  },
+  leaveButtonIcon: {
+    width: 20,
+    height: 20,
+    marginHorizontal: 8,
+    transform: [{ rotateY: '180deg' }],
+  },
+  leaveButtonText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.BORDER.BRIGHT,
+  },
+  endRoomButton: {
+    flexDirection: 'row',
+    backgroundColor: COLORS.ALERT.ERROR.DIM,
+    paddingHorizontal: 8,
+    paddingVertical: 16,
+  },
+  endRoomIcon: {
+    width: 20,
+    height: 20,
+    marginHorizontal: 8,
+  },
+  endRoomText: {
+    color: COLORS.ALERT.ERROR.BRIGHT,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 20,
+  },
+});