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

package/src/components/CustomButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { COLORS } from '../utils/theme';
+
+const CustomButton = ({
+  loading = false,
+  disabled = false,
+  title,
+  onPress,
+  textStyle,
+  viewStyle,
+  LeftIcon,
+  RightIcon,
+}: {
+  title?: string;
+  onPress: Function;
+  textStyle?: StyleProp<TextStyle>;
+  viewStyle?: StyleProp<ViewStyle>;
+  loading?: boolean;
+  disabled?: boolean;
+  LeftIcon?: JSX.Element;
+  RightIcon?: JSX.Element;
+}) => {
+  const onButtonPress = () => {
+    onPress();
+  };
+
+  return (
+    <TouchableOpacity
+      disabled={disabled || loading}
+      style={[
+        styles.buttonConatiner,
+        viewStyle,
+        disabled && styles.disabled,
+        loading && styles.opacity,
+      ]}
+      onPress={onButtonPress}
+    >
+      {loading ? (
+        <ActivityIndicator color={COLORS.WHITE} />
+      ) : (
+        <>
+          {LeftIcon}
+          {title && (
+            <Text style={[textStyle, disabled && styles.disabledText]}>
+              {title}
+            </Text>
+          )}
+          {RightIcon}
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonConatiner: {
+    width: '100%',
+    height: 48,
+    flexDirection: 'row',
+  },
+  disabled: {
+    backgroundColor: COLORS.SECONDARY.DISABLED,
+    borderColor: COLORS.SECONDARY.DISABLED,
+  },
+  disabledText: {
+    color: COLORS.TEXT.DISABLED_ACCENT,
+  },
+  opacity: {
+    opacity: 0.5,
+  },
+});
+
+export { CustomButton };

package/src/components/CustomHLSPlayerControls.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+export type ControlType =
+  | 'play'
+  | 'stop'
+  | 'pause'
+  | 'resume'
+  | 'seekForward'
+  | 'seekBackward'
+  | 'seekToLive'
+  | 'setVolume';
+
+export interface CustomControlsProps {
+  handleControlPress(action: ControlType, data?: any): void;
+}
+
+export const CustomControls: React.FC<CustomControlsProps> = ({
+  handleControlPress,
+}) => {
+  return (
+    <View>
+      <View style={styles.wrapper}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('play')}
+        >
+          <Text style={styles.text}>Play</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('stop')}
+        >
+          <Text style={styles.text}>Stop</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('pause')}
+        >
+          <Text style={styles.text}>Pause</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('resume')}
+        >
+          <Text style={styles.text}>Resume</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.spacedWrapper}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('seekForward', 5)}
+        >
+          <Text style={styles.text}>Forward 5 sec</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('seekBackward', 5)}
+        >
+          <Text style={styles.text}>Backward 5 sec</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.spacedWrapper}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('seekToLive')}
+        >
+          <Text style={styles.text}>Go to Live</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={() => handleControlPress('setVolume', 50)}
+        >
+          <Text style={styles.text}>Low Volume to `50`</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: { flexDirection: 'row', justifyContent: 'space-evenly' },
+  spacedWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    marginVertical: 8,
+  },
+  button: { padding: 12 },
+  text: { color: COLORS.PRIMARY.LIGHT },
+});

package/src/components/CustomInput.tsx

@@ -0,0 +1,139 @@
+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/DefaultModal.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Modal from 'react-native-modal';
+import type { SupportedAnimation } from 'react-native-modal';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { COLORS } from '../utils/theme';
+import { CustomButton } from './CustomButton';
+
+export interface DefaultModalProps {
+  modalVisible: boolean;
+  setModalVisible: any;
+  animationIn?: SupportedAnimation;
+  animationOut?: SupportedAnimation;
+  modalPosiion?: 'flex-end' | 'center';
+  viewStyle?: StyleProp<ViewStyle>;
+  modalStyle?: StyleProp<ViewStyle>;
+  backdrop?: boolean;
+}
+
+export const DefaultModal: React.FC<DefaultModalProps> = ({
+  modalVisible,
+  setModalVisible,
+  children,
+  animationIn = 'fadeIn',
+  animationOut = 'fadeOut',
+  modalPosiion = 'flex-end',
+  backdrop = false,
+  viewStyle,
+  modalStyle,
+}) => {
+  const { left, right } = useSafeAreaInsets();
+  return (
+    <Modal
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      animationIn={animationIn}
+      animationOut={animationOut}
+      avoidKeyboard={true}
+      isVisible={modalVisible}
+      coverScreen={true}
+      hasBackdrop={backdrop}
+      supportedOrientations={['portrait', 'landscape']}
+      onBackdropPress={setModalVisible}
+      onDismiss={setModalVisible}
+      onBackButtonPress={setModalVisible}
+      style={[modalStyle, { margin: 0, justifyContent: modalPosiion }]}
+    >
+      <View
+        style={[
+          styles.contentContainer,
+          modalPosiion === 'flex-end' ? styles.end : styles.center,
+          viewStyle,
+          { marginLeft: left, marginRight: right },
+        ]}
+      >
+        {modalPosiion === 'flex-end' && (
+          <CustomButton
+            onPress={setModalVisible}
+            viewStyle={styles.crossButton}
+            LeftIcon={
+              <MaterialCommunityIcons
+                name="close"
+                style={styles.crossButtonIcon}
+                size={24}
+              />
+            }
+          />
+        )}
+        {children}
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    maxHeight: '80%',
+    // minHeight: '20%',
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+  },
+  end: {
+    flex: 1,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: COLORS.BORDER.LIGHT,
+    borderBottomWidth: 0,
+  },
+  center: {
+    borderRadius: 16,
+    marginHorizontal: 24,
+    borderWidth: 1,
+    borderColor: COLORS.BORDER.LIGHT,
+    alignSelf: 'center',
+    width: '90%',
+  },
+  crossButton: {
+    height: 40,
+    width: 40,
+    position: 'absolute',
+    right: 16,
+    top: 16,
+    backgroundColor: COLORS.SURFACE.LIGHT,
+    borderRadius: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 2,
+  },
+  crossButtonIcon: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+});

package/src/components/DisplayTrack.tsx

@@ -0,0 +1,92 @@
+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
+            ? `You (${peer.name})`
+            : peer.name}
+        </Text>
+      </View>
+    </View>
+  );
+});
+
+DisplayTrack.displayName = 'DisplayTrack';
+
+export { DisplayTrack };