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

package/src/components/HMSPreviewPeersList.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  HMSPeer,
+  // HMSPeerUpdate,
+  // useHMSPeerUpdates,
+} from '@100mslive/react-native-hms';
+
+import { COLORS } from '../utils/theme';
+import { ParticipantsIcon } from '../Icons';
+
+export interface HMSPreviewPeersListProps {}
+
+export const HMSPreviewPeersList: React.FC<HMSPreviewPeersListProps> = () => {
+  const [peerList, _setPeerList] = React.useState<HMSPeer[]>([]);
+
+  // TODO: Handle case when peer updates are received before this hook mounts
+  // It leads to some already joined peer missing in list
+  // useHMSPeerUpdates(
+  //   ({ peer, type }: { peer: HMSPeer; type: HMSPeerUpdate }) => {
+  //     switch (type) {
+  //       case HMSPeerUpdate.PEER_JOINED:
+  //         setPeerList((prevPeerList) => [...prevPeerList, peer]);
+  //         break;
+  //       case HMSPeerUpdate.PEER_LEFT:
+  //         setPeerList((prevPeerList) =>
+  //           prevPeerList.filter(
+  //             (peerFromList) => peerFromList.peerID !== peer.peerID
+  //           )
+  //         );
+  //         break;
+
+  //       default:
+  //         break;
+  //     }
+  //   },
+  //   []
+  // );
+
+  return (
+    <View style={styles.container}>
+      {peerList.length > 0 ? <ParticipantsIcon /> : null}
+
+      {peerList.length === 0 ? (
+        <Text style={[styles.text, styles.textSpacer]}>
+          You are the first to join
+        </Text>
+      ) : peerList.length === 1 ? (
+        <Text style={[styles.text, styles.textSpacer]}>
+          {peerList[0]!.name} has joined
+        </Text>
+      ) : (
+        <View style={styles.multiTextContainer}>
+          <Text
+            style={[styles.text, styles.flexView]}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+          >
+            {peerList
+              .slice(0, 2)
+              .map((peer) => peer.name)
+              .join(', ')}
+          </Text>
+
+          {peerList.length - 2 > 0 ? (
+            <Text style={styles.text}>
+              {' '}
+              +{peerList.length - 2}{' '}
+              {peerList.length - 2 > 1 ? 'others' : 'other'}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+    marginTop: 16,
+    marginBottom: 24,
+    alignSelf: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    borderColor: COLORS.BORDER.DEFAULT,
+    borderWidth: 1,
+  },
+  text: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 24,
+  },
+  textSpacer: {
+    marginHorizontal: 8,
+  },
+  flexView: { flex: 1 },
+  multiTextContainer: {
+    flexDirection: 'row',
+    marginHorizontal: 8,
+    maxWidth: '70%',
+  },
+});

package/src/components/HMSPreviewSubtitle.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+export interface HMSPreviewSubtitleProps {
+  subtitle?: string;
+}
+
+export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
+  subtitle = 'Setup your audio and video before joining',
+}) => {
+  return <Text style={styles.title}>{subtitle}</Text>;
+};
+
+const styles = StyleSheet.create({
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.LOW,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 20,
+    marginTop: 4,
+    textAlign: 'center',
+  },
+});

package/src/components/HMSPreviewTile.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { HMSVideoViewMode } from '@100mslive/react-native-hms';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { MicIcon, NetworkQualityIcon } from '../Icons';
+import { useHMSInstance } from '../hooks-util';
+import type { RootState } from '../redux';
+import { getInitials } from '../utils/functions';
+import { COLORS } from '../utils/theme';
+
+export const HMSPreviewTile: React.FC = () => {
+  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 isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const isLocalAudioMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalAudioMuted
+  );
+  const localVideoTrackId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.videoTrack?.trackId
+  );
+  const localPeerNetworkQuality = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  );
+  const userName = useSelector((state: RootState) => state.user.userName);
+
+  React.useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, []);
+
+  return (
+    <View style={styles.modalContainer}>
+      {isLocalVideoMuted || !localVideoTrackId ? (
+        <View style={styles.avatarContainer}>
+          <View
+            style={[
+              styles.avatar,
+              userName.length === 0 ? styles.emptyAvatar : null,
+            ]}
+          >
+            <Text style={styles.avatarText}>
+              {userName.length === 0 ? '👤' : getInitials(userName)}
+            </Text>
+          </View>
+        </View>
+      ) : (
+        <HmsView
+          trackId={localVideoTrackId}
+          key={localVideoTrackId}
+          mirror={mirrorCamera}
+          autoSimulcast={autoSimulcast}
+          scaleType={HMSVideoViewMode.ASPECT_FILL}
+          style={styles.hmsView}
+        />
+      )}
+
+      {isLocalAudioMuted ? (
+        <View style={styles.micMuted}>
+          <MicIcon muted={true} style={styles.micMutedIcon} />
+        </View>
+      ) : null}
+
+      <View style={styles.nameInTileContainer}>
+        {userName ? <Text style={styles.nameInTile}>{userName}</Text> : null}
+
+        <NetworkQualityIcon quality={localPeerNetworkQuality} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: COLORS.BACKGROUND.DEFAULT,
+    marginHorizontal: 8,
+    borderRadius: 16,
+    alignSelf: 'center',
+    overflow: 'hidden',
+    minWidth: '50%',
+    // minHeight: '50%',
+    aspectRatio: 377 / 482, // TODO: DO WE NEED THIS?
+  },
+  hmsView: {
+    flex: 1,
+  },
+  micMuted: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
+    padding: 8,
+    borderRadius: 12,
+  },
+  micMutedIcon: {
+    tintColor: COLORS.ALERT.ERROR.BRIGHTER,
+  },
+  avatarContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatar: {
+    width: 88,
+    aspectRatio: 1,
+    backgroundColor: COLORS.EXTENDED.PURPLE,
+    borderRadius: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyAvatar: {
+    backgroundColor: '#C3D0E5', // TODO: use it from variable
+  },
+  avatarText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 34,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 40,
+    letterSpacing: 0.25,
+  },
+  nameInTileContainer: {
+    position: 'absolute',
+    bottom: 8,
+    left: 8,
+    backgroundColor: COLORS.BACKGROUND.DIM_80,
+    padding: 8,
+    borderRadius: 12,
+    flexDirection: 'row',
+  },
+  nameInTile: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginRight: 8,
+  },
+});

package/src/components/HMSPreviewTitle.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+export interface HMSPreviewTitleProps {
+  title?: string;
+}
+
+export const HMSPreviewTitle: React.FC<HMSPreviewTitleProps> = ({
+  title = 'Get Started',
+}) => {
+  return <Text style={styles.title}>{title}</Text>;
+};
+
+const styles = StyleSheet.create({
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 24,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 32,
+    marginTop: 8,
+    textAlign: 'center',
+  },
+});

package/src/components/HMSRoomOptions.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { HMSAudioMixingMode, HMSAudioMode } from '@100mslive/react-native-hms';
+
+import { PressableIcon } from './PressableIcon';
+import { ThreeDotsIcon } from '../Icons';
+import { DefaultModal } from './DefaultModal';
+import { RoomSettingsModalContent } from './RoomSettingsModalContent';
+import {
+  ChangeAudioMixingModeModal,
+  ChangeAudioModeModal,
+  ChangeAudioOutputModal,
+  ChangeBulkRoleModal,
+  ChangeTrackStateForRoleModal,
+  HlsStreamingModal,
+  RecordingModal,
+  RtcStatsModal,
+} from './Modals';
+import { ModalTypes } from '../utils/types';
+import { useModalType } from '../hooks-util';
+
+interface HMSRoomOptionsProps {}
+
+export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
+  const {
+    modalVisibleType: modalVisible,
+    handleModalVisibleType: setModalVisible,
+  } = useModalType();
+  const [isAudioShared, setIsAudioShared] = React.useState(false);
+  const [audioMode, setAudioMode] = React.useState<HMSAudioMode>(
+    HMSAudioMode.MODE_NORMAL
+  );
+  const [muteAllTracksAudio, setMuteAllTracksAudio] = React.useState(false);
+  const [audioDeviceChangeListener, setAudioDeviceChangeListener] =
+    React.useState<boolean>(false);
+  const [newAudioMixingMode, setNewAudioMixingMode] = React.useState(
+    HMSAudioMixingMode.TALK_AND_MUSIC
+  );
+
+  const onSettingsPress = () => setModalVisible(ModalTypes.SETTINGS);
+
+  const dismissModal = () => setModalVisible(ModalTypes.DEFAULT);
+
+  return (
+    <View>
+      <PressableIcon onPress={onSettingsPress}>
+        <ThreeDotsIcon stack="vertical" />
+      </PressableIcon>
+
+      <DefaultModal
+        animationIn={'slideInUp'}
+        animationOut={'slideOutDown'}
+        modalVisible={modalVisible === ModalTypes.SETTINGS}
+        setModalVisible={dismissModal}
+      >
+        <RoomSettingsModalContent
+          newAudioMixingMode={newAudioMixingMode}
+          audioDeviceListenerAdded={audioDeviceChangeListener}
+          isAudioShared={isAudioShared}
+          muteAllTracksAudio={muteAllTracksAudio}
+          closeRoomSettingsModal={dismissModal}
+          setModalVisible={setModalVisible}
+          setAudioDeviceListenerAdded={setAudioDeviceChangeListener}
+          setIsAudioShared={setIsAudioShared}
+          setMuteAllTracksAudio={setMuteAllTracksAudio}
+        />
+      </DefaultModal>
+      <DefaultModal
+        animationIn={'slideInUp'}
+        animationOut={'slideOutDown'}
+        modalVisible={modalVisible === ModalTypes.RTC_STATS}
+        setModalVisible={dismissModal}
+      >
+        <RtcStatsModal />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={
+          modalVisible === ModalTypes.RECORDING ||
+          modalVisible === ModalTypes.RESOLUTION
+        }
+        setModalVisible={dismissModal}
+      >
+        <RecordingModal
+          setModalVisible={setModalVisible}
+          recordingModal={modalVisible === ModalTypes.RECORDING}
+        />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={modalVisible === ModalTypes.HLS_STREAMING}
+        setModalVisible={dismissModal}
+      >
+        <HlsStreamingModal cancelModal={dismissModal} />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={modalVisible === ModalTypes.CHANGE_TRACK_ROLE}
+        setModalVisible={dismissModal}
+      >
+        <ChangeTrackStateForRoleModal cancelModal={dismissModal} />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={modalVisible === ModalTypes.SWITCH_AUDIO_OUTPUT}
+        setModalVisible={dismissModal}
+      >
+        <ChangeAudioOutputModal cancelModal={dismissModal} />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={modalVisible === ModalTypes.CHANGE_AUDIO_MODE}
+        setModalVisible={dismissModal}
+      >
+        <ChangeAudioModeModal
+          audioMode={audioMode}
+          setAudioMode={setAudioMode}
+          cancelModal={dismissModal}
+        />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={modalVisible === ModalTypes.AUDIO_MIXING_MODE}
+        setModalVisible={dismissModal}
+      >
+        <ChangeAudioMixingModeModal
+          newAudioMixingMode={newAudioMixingMode}
+          setNewAudioMixingMode={setNewAudioMixingMode}
+          cancelModal={dismissModal}
+        />
+      </DefaultModal>
+      <DefaultModal
+        modalPosiion="center"
+        modalVisible={modalVisible === ModalTypes.BULK_ROLE_CHANGE}
+        setModalVisible={dismissModal}
+      >
+        <ChangeBulkRoleModal cancelModal={dismissModal} />
+      </DefaultModal>
+    </View>
+  );
+};

package/src/components/HMSShareScreen.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
+import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
+import { PressableIcon } from './PressableIcon';
+import { ScreenShareIcon } from '../Icons';
+
+interface HMSShareScreenProps extends ScreenShareButtonProps {}
+
+export const HMSShareScreen: React.FC<HMSShareScreenProps> = ({
+  screenShareDelegate,
+}) => {
+  const canPublishScreen = useCanPublishScreen();
+
+  if (!canPublishScreen) {
+    return null;
+  }
+
+  return <ScreenShareButton screenShareDelegate={screenShareDelegate} />;
+};
+
+interface ScreenShareButtonProps {
+  screenShareDelegate?: React.ReactElement;
+}
+
+const ScreenShareButton: React.FC<ScreenShareButtonProps> = ({
+  screenShareDelegate = <DefaultScreenShareButtonDelegate />,
+}) => {
+  const hmsActions = useHMSActions();
+
+  const isLocalScreenShared = useSelector(
+    (state: RootState) => state.hmsStates.isLocalScreenShared
+  );
+
+  const handleScreenShareTogglePress = async () => {
+    await hmsActions.setScreenShareEnabled(!isLocalScreenShared);
+  };
+
+  return React.cloneElement(screenShareDelegate, {
+    onPress: handleScreenShareTogglePress,
+    isLocalScreenShared,
+  });
+};
+
+interface DefaultScreenShareButtonDelegateProps {
+  onPress?: () => void;
+  isLocalScreenShared?: boolean;
+}
+
+const DefaultScreenShareButtonDelegate: React.FC<
+  DefaultScreenShareButtonDelegateProps
+> = ({ onPress, isLocalScreenShared }) => {
+  return (
+    <PressableIcon
+      onPress={onPress}
+      style={isLocalScreenShared ? styles.mutedButton : undefined}
+    >
+      <ScreenShareIcon />
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  mutedButton: {
+    backgroundColor: COLORS.SECONDARY.DIM,
+    borderColor: COLORS.SECONDARY.DIM,
+  },
+});

package/src/components/HMSShowNetworkQuality.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { StyleSheet, Image } from 'react-native';
+
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
+import { CustomButton } from './CustomButton';
+import { useHMSInstance } from '../hooks-util';
+
+export const HMSShowNetworkQuality = () => {
+  const hmsInstance = useHMSInstance();
+  const localPeerDownlinkNetworkQuality = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  );
+
+  // TODO: test network quality usage
+  useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, [hmsInstance]);
+
+  return (
+    <CustomButton
+      onPress={() => {}}
+      disabled={true}
+      viewStyle={styles.singleIconContainer}
+      LeftIcon={
+        <Image
+          resizeMode="contain"
+          style={styles.image}
+          source={
+            localPeerDownlinkNetworkQuality === 0
+              ? require('../assets/network_0.png')
+              : localPeerDownlinkNetworkQuality === 1
+              ? require('../assets/network_1.png')
+              : localPeerDownlinkNetworkQuality === 2
+              ? require('../assets/network_2.png')
+              : localPeerDownlinkNetworkQuality === 3
+              ? require('../assets/network_3.png')
+              : require('../assets/network_4.png')
+          }
+        />
+      }
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    height: 32,
+    width: 32,
+  },
+  singleIconContainer: {
+    padding: 8,
+    backgroundColor: COLORS.BORDER.LIGHT,
+    borderColor: COLORS.BORDER.LIGHT,
+    borderWidth: 1,
+    width: 'auto',
+    height: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 12,
+    marginHorizontal: 4,
+  },
+});