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

package/src/components/CustomInput.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import {
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import type {
-  ReturnKeyTypeOptions,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-
-import { COLORS } from '../utils/theme';
-
-const CustomInput = ({
-  value,
-  title,
-  onChangeText,
-  placeholderTextColor,
-  placeholder,
-  textStyle,
-  viewStyle,
-  clearButtonStyle,
-  inputStyle,
-  defaultValue,
-  returnKeyType,
-  multiline,
-  blurOnSubmit,
-  disableFullscreenUI = true,
-  clear = true,
-  autoCapitalize = 'none', // autoCorrect = false, // autoCompleteType = 'off',
-}: {
-  value?: string;
-  title?: string;
-  onChangeText: Function;
-  placeholderTextColor?: string;
-  placeholder?: string;
-  textStyle?: StyleProp<TextStyle>;
-  viewStyle?: StyleProp<ViewStyle>;
-  clearButtonStyle?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<ViewStyle>;
-  defaultValue?: string;
-  returnKeyType?: ReturnKeyTypeOptions;
-  multiline?: boolean;
-  blurOnSubmit?: boolean;
-  disableFullscreenUI?: boolean;
-  clear?: boolean;
-  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  autoCorrect?: boolean;
-  autoCompleteType?:
-    | 'off'
-    | 'cc-csc'
-    | 'cc-exp'
-    | 'cc-exp-month'
-    | 'cc-exp-year'
-    | 'cc-number'
-    | 'email'
-    | 'name'
-    | 'password'
-    | 'postal-code'
-    | 'street-address'
-    | 'tel'
-    | 'username';
-}) => {
-  const showClear = clear && value !== undefined && value?.length > 0;
-
-  const onChange = (newValue: string) => {
-    onChangeText(newValue);
-  };
-
-  return (
-    <View style={[styles.inputContainer, viewStyle]}>
-      {title && <Text style={textStyle}>{title}</Text>}
-      <View>
-        <TextInput
-          disableFullscreenUI={disableFullscreenUI}
-          value={value}
-          onChangeText={onChange}
-          placeholderTextColor={placeholderTextColor}
-          placeholder={placeholder}
-          style={[
-            !multiline && styles.input,
-            showClear && styles.clear,
-            inputStyle,
-          ]}
-          defaultValue={defaultValue}
-          returnKeyType={returnKeyType}
-          multiline={multiline}
-          blurOnSubmit={blurOnSubmit}
-          keyboardAppearance="dark"
-          autoCapitalize={autoCapitalize}
-          autoCorrect={true}
-          textContentType={'name'}
-          autoCompleteType={'name'}
-        />
-        {showClear && (
-          <TouchableOpacity
-            onPress={() => {
-              onChange('');
-            }}
-            style={[styles.clearContainer, clearButtonStyle]}
-          >
-            <MaterialIcons name="clear" style={styles.clearIcon} size={24} />
-          </TouchableOpacity>
-        )}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  inputContainer: {
-    width: '100%',
-  },
-  input: {
-    height: 48,
-  },
-  clearContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    paddingHorizontal: 8,
-  },
-  clear: {
-    paddingRight: 40,
-  },
-  clearIcon: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
-});
-
-export { CustomInput };

package/src/components/DisplayTrack.tsx

@@ -1,92 +0,0 @@
-import React from 'react';
-import type { ElementRef } from 'react';
-import { View, Text } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { HMSTrackSource, HMSTrackType } from '@100mslive/react-native-hms';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useSelector } from 'react-redux';
-import type { HMSView } from '@100mslive/react-native-hms';
-
-import { CustomButton } from '.';
-import { styles } from './styles';
-import type { RootState } from '../redux';
-import PeerDisplayView from './PeerDisplayView';
-import type { PeerDisplayViewProps } from './PeerDisplayView';
-import PeerRTCStatsContainer from './PeerRTCStatsContainer';
-import { useHMSActions } from '../hooks-sdk';
-
-interface DisplayTrackProps extends PeerDisplayViewProps {
-  videoStyles: StyleProp<ViewStyle>;
-}
-
-// `ref` passed to DisplayTrack component will be passed to PeerDisplayView component
-// as HMSView component is being rendered inside PeerDisplayView component
-const DisplayTrack = React.forwardRef<
-  ElementRef<typeof HMSView>,
-  DisplayTrackProps
->(({ isDegraded, isLocal, peer, videoTrack, videoStyles }, hmsViewRef) => {
-  // hooks
-  const hmsActions = useHMSActions();
-  const showStatsOnTiles = useSelector(
-    (state: RootState) => state.app.joinConfig.showStats
-  );
-
-  // functions
-  const onEndScreenSharePress = async () => {
-    await hmsActions.setScreenShareEnabled(false);
-  };
-
-  return (
-    <View style={videoStyles}>
-      {isLocal &&
-      videoTrack?.source === HMSTrackSource.SCREEN &&
-      videoTrack?.type === HMSTrackType.VIDEO ? (
-        <View style={styles.screenshareContainer}>
-          <MaterialCommunityIcons
-            name="monitor-share"
-            style={styles.icon}
-            size={48}
-          />
-          <Text style={styles.screenshareText}>
-            You are sharing your screen
-          </Text>
-          <CustomButton
-            title="X   Stop Screenshare"
-            onPress={onEndScreenSharePress}
-            viewStyle={styles.screenshareButton}
-            textStyle={styles.roleChangeModalButtonText}
-          />
-        </View>
-      ) : (
-        <PeerDisplayView
-          ref={hmsViewRef}
-          peer={peer}
-          isDegraded={isDegraded}
-          isLocal={isLocal}
-          videoTrack={videoTrack}
-        />
-      )}
-      {showStatsOnTiles ? (
-        <PeerRTCStatsContainer
-          trackId={videoTrack?.trackId}
-          peerId={peer.peerID}
-          trackSource={videoTrack?.source}
-        />
-      ) : null}
-      <View style={styles.peerNameContainer}>
-        <Text numberOfLines={2} style={styles.peerName}>
-          {videoTrack?.source !== undefined &&
-          videoTrack?.source !== HMSTrackSource.REGULAR
-            ? `${peer.name}'s ${videoTrack.source}`
-            : isLocal
-            ? `${peer.name} (You)`
-            : peer.name}
-        </Text>
-      </View>
-    </View>
-  );
-});
-
-DisplayTrack.displayName = 'DisplayTrack';
-
-export { DisplayTrack };

package/src/components/HMSShareScreen.tsx

@@ -1,71 +0,0 @@
-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

@@ -1,68 +0,0 @@
-import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { StyleSheet, Image } from 'react-native';
-
-import type { RootState } from '../redux';
-import { CustomButton } from './CustomButton';
-import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
-
-export const HMSShowNetworkQuality = () => {
-  const hmsInstance = useHMSInstance();
-  const localPeerDownlinkNetworkQuality = useSelector(
-    (state: RootState) =>
-      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
-  );
-
-  useEffect(() => {
-    hmsInstance.enableNetworkQualityUpdates();
-
-    return () => hmsInstance.disableNetworkQualityUpdates();
-  }, [hmsInstance]);
-
-  const iconContainer = useHMSRoomStyle((theme) => ({
-    backgroundColor: theme.palette.border_bright,
-    borderColor: theme.palette.border_bright,
-  }));
-
-  return (
-    <CustomButton
-      onPress={() => {}}
-      disabled={true}
-      viewStyle={[styles.singleIconContainer, iconContainer]}
-      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,
-    borderWidth: 1,
-    width: 'auto',
-    height: 48,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 12,
-    marginHorizontal: 4,
-  },
-});

package/src/components/LiveButton.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import type { ViewStyle, StyleProp, TextStyle } from 'react-native';
-
-import { COLORS } from '../utils/theme';
-
-export enum LiveStates {
-  LIVE = 10,
-  BEHIND_LIVE = 20,
-  LOADING_LIVE = 30,
-}
-
-export interface LiveButtonProps {
-  containerStyle?: StyleProp<ViewStyle>;
-  isLive: boolean;
-  onPress(): void;
-  disabled?: boolean;
-  size?: 'normal' | 'small';
-}
-
-const LiveButton: React.FC<LiveButtonProps> = ({
-  containerStyle,
-  isLive,
-  onPress,
-  disabled,
-  size = 'normal',
-}) => {
-  const textStyle: StyleProp<TextStyle> =
-    size !== 'normal' ? { fontSize: 10 } : null;
-  const indicatorStyle: StyleProp<ViewStyle> =
-    size !== 'normal' ? { width: 4, height: 4, borderRadius: 2 } : null;
-  const pressableStyle: StyleProp<ViewStyle> =
-    size !== 'normal' ? { padding: 4 } : null;
-
-  return (
-    <View style={containerStyle}>
-      <TouchableOpacity
-        onPress={onPress}
-        style={[styles.touchable, pressableStyle]}
-        disabled={disabled}
-      >
-        <View
-          style={[
-            styles.liveIndicator,
-            indicatorStyle,
-            {
-              backgroundColor: isLive
-                ? COLORS.TWIN.RED
-                : COLORS.SECONDARY.DEFAULT,
-            },
-          ]}
-        />
-        <Text style={[styles.liveText, textStyle]}>LIVE</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default LiveButton;
-
-const styles = StyleSheet.create({
-  touchable: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-  },
-  liveText: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
-  liveIndicator: {
-    width: 8,
-    height: 8,
-    backgroundColor: COLORS.TWIN.RED,
-    borderRadius: 4,
-    marginRight: 4,
-  },
-});

package/src/components/Participants/ParticipantsFilter.tsx

@@ -1,144 +0,0 @@
-import React from 'react';
-import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
-import { useSelector } from 'react-redux';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-
-import { Menu, MenuItem, MenuDivider } from '../MenuModal';
-import { COLORS } from '../../utils/theme';
-import type { RootState } from '../../redux';
-import { Platform } from 'react-native';
-
-export const ParticipantFilter = ({
-  filter,
-  setFilter,
-}: {
-  filter?: string;
-  setFilter: React.Dispatch<React.SetStateAction<string>>;
-}) => {
-  const roles = useSelector((state: RootState) => state.hmsStates.roles);
-
-  const [visible, setVisible] = React.useState(false);
-
-  const hideMenu = () => setVisible(false);
-  const showMenu = () => setVisible(true);
-
-  return (
-    <Menu
-      visible={visible}
-      anchor={
-        <TouchableOpacity
-          style={styles.participantFilterContainer}
-          onPress={showMenu}
-        >
-          <Text style={styles.participantFilterText} numberOfLines={1}>
-            {filter}
-          </Text>
-          <MaterialIcons
-            name={visible ? 'arrow-drop-up' : 'arrow-drop-down'}
-            style={styles.participantFilterIcon}
-            size={24}
-          />
-        </TouchableOpacity>
-      }
-      onRequestClose={hideMenu}
-      style={styles.participantsMenuContainer}
-    >
-      <MenuItem
-        onPress={() => {
-          hideMenu();
-          setFilter('everyone');
-        }}
-      >
-        <View style={styles.participantMenuItem}>
-          <Ionicons
-            name="people-outline"
-            style={styles.participantMenuItemIcon}
-            size={20}
-          />
-          <Text style={styles.participantMenuItemName}>Everyone</Text>
-        </View>
-      </MenuItem>
-      <MenuItem
-        onPress={() => {
-          hideMenu();
-          setFilter('raised hand');
-        }}
-      >
-        <View style={styles.participantMenuItem}>
-          <Ionicons
-            name="hand-left-outline"
-            style={styles.participantMenuItemIcon}
-            size={20}
-          />
-          <Text style={styles.participantMenuItemName}>Raised Hand</Text>
-        </View>
-      </MenuItem>
-      <MenuDivider color={COLORS.BORDER.LIGHT} />
-      {roles?.map((knownRole: any) => {
-        return (
-          <MenuItem
-            onPress={() => {
-              hideMenu();
-              setFilter(knownRole?.name!);
-            }}
-            key={knownRole.name}
-          >
-            <View style={styles.participantMenuItem}>
-              <Text style={styles.participantMenuItemName}>
-                {knownRole?.name}
-              </Text>
-            </View>
-          </MenuItem>
-        );
-      })}
-    </Menu>
-  );
-};
-
-const styles = StyleSheet.create({
-  participantFilterContainer: {
-    padding: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: 120,
-    borderWidth: 1,
-    borderColor: COLORS.BORDER.LIGHT,
-    borderRadius: 8,
-  },
-  participantFilterText: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontFamily: 'Inter-Regular',
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    marginRight: 12,
-    textTransform: 'capitalize',
-  },
-  participantFilterIcon: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    position: 'absolute',
-    right: 0,
-  },
-  participantsMenuContainer: {
-    backgroundColor: COLORS.SURFACE.LIGHT,
-  },
-  participantMenuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: Platform.OS === 'ios' ? 16 : 0,
-  },
-  participantMenuItemIcon: {
-    color: COLORS.WHITE,
-    paddingRight: 16,
-    height: 24,
-  },
-  participantMenuItemName: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontSize: 14,
-    lineHeight: 20,
-    letterSpacing: 0.1,
-    fontFamily: 'Inter-Medium',
-    textTransform: 'capitalize',
-  },
-});

package/src/components/Participants/ParticipantsHeader.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-import { COLORS } from '../../utils/theme';
-import { ParticipantFilter } from './ParticipantsFilter';
-
-type ParticipantsHeaderProps = {
-  participantsCount: number;
-  filter: string;
-  setFilter: React.Dispatch<React.SetStateAction<string>>;
-};
-
-export const ParticipantsHeader: React.FC<ParticipantsHeaderProps> = ({
-  participantsCount,
-  filter,
-  setFilter,
-}) => {
-  return (
-    <View style={styles.participantsHeaderContainer}>
-      <Text style={styles.participantsHeading}>Participants</Text>
-
-      <ParticipantFilter filter={filter} setFilter={setFilter} />
-
-      <View style={styles.peerCountContainer}>
-        <Text style={styles.peerCount}>{participantsCount}</Text>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  participantsHeaderContainer: {
-    height: 48,
-    width: '80%',
-    marginBottom: 24,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  participantsHeading: {
-    fontFamily: 'Inter-Medium',
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    paddingRight: 12,
-  },
-  peerCountContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderColor: COLORS.BORDER.ACCENT,
-    borderWidth: 2,
-    borderRadius: 30,
-    marginLeft: 12,
-    height: 30,
-    paddingHorizontal: 6,
-  },
-  peerCount: {
-    fontFamily: 'Inter-Medium',
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
-});

package/src/components/Participants/SearchableParticipantsView.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-import { useFilteredParticipants } from '../../hooks-util';
-import { ParticipantsList } from './ParticipantsList';
-import { ParticipantsSearchInput } from './ParticipantsSeachInput';
-
-export const SearchableParticipantsView: React.FC = () => {
-  const { filteredParticipants, searchText, setSearchText } =
-    useFilteredParticipants();
-
-  return (
-    <>
-      <ParticipantsSearchInput
-        searchText={searchText}
-        setSearchText={setSearchText}
-      />
-
-      <ParticipantsList data={filteredParticipants} />
-    </>
-  );
-};