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

package/src/components/Picker.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+import { Menu, MenuItem } from './MenuModal';
+import { COLORS } from '../utils/theme';
+
+export const CustomPicker = ({
+  data,
+  selectedItem,
+  onItemSelected,
+  viewStyle,
+}: {
+  data: any[];
+  selectedItem: any;
+  onItemSelected: React.Dispatch<React.SetStateAction<any>>;
+  viewStyle?: StyleProp<ViewStyle>;
+}) => {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const hideMenu = () => setVisible(false);
+  const showMenu = () => setVisible(true);
+
+  return (
+    <Menu
+      visible={visible}
+      anchor={
+        <TouchableOpacity
+          style={[styles.chatFilterContainer, viewStyle]}
+          onPress={showMenu}
+        >
+          <Text style={styles.chatFilterText} numberOfLines={1}>
+            {selectedItem}
+          </Text>
+          <MaterialIcons
+            name={visible ? 'arrow-drop-up' : 'arrow-drop-down'}
+            style={styles.chatFilterIcon}
+            size={24}
+          />
+        </TouchableOpacity>
+      }
+      onRequestClose={hideMenu}
+      style={styles.chatMenuContainer}
+    >
+      {data?.map((value) => {
+        return (
+          <MenuItem
+            onPress={() => {
+              hideMenu();
+              onItemSelected(value);
+            }}
+            key={value}
+          >
+            <View style={styles.chatMenuItem}>
+              <Text style={styles.chatMenuItemName}>{value}</Text>
+            </View>
+          </MenuItem>
+        );
+      })}
+    </Menu>
+  );
+};
+
+const styles = StyleSheet.create({
+  chatFilterContainer: {
+    padding: 8,
+    marginVertical: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  chatFilterText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    marginRight: 12,
+    textTransform: 'capitalize',
+  },
+  chatFilterIcon: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    position: 'absolute',
+    right: 0,
+  },
+  chatMenuContainer: {
+    backgroundColor: COLORS.SURFACE.LIGHT,
+  },
+  chatMenuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: Platform.OS === 'ios' ? 16 : 0,
+  },
+  chatMenuItemName: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+});

package/src/components/PressableIcon.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+interface PressableIconProps extends Omit<TouchableOpacityProps, 'children'> {
+  children: Pick<TouchableOpacityProps, 'children'>;
+  active?: boolean;
+  rounded?: boolean;
+  border?: boolean;
+}
+
+export const PressableIcon: React.FC<PressableIconProps> = ({
+  children,
+  style,
+  active = false,
+  rounded = false,
+  border = true,
+  ...restProps
+}) => {
+  return (
+    <TouchableOpacity
+      style={[
+        styles.pressable,
+        {
+          borderRadius: rounded ? 20 : undefined,
+          ...(border ? styles.withBorder : undefined),
+          ...(active ? styles.active : undefined),
+        },
+        style,
+      ]}
+      {...restProps}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  pressable: {
+    padding: 8,
+    alignSelf: 'flex-start',
+  },
+  withBorder: {
+    borderRadius: 8,
+    borderColor: COLORS.BORDER.BRIGHT,
+    borderWidth: 1,
+  },
+  active: {
+    backgroundColor: COLORS.SECONDARY.DIM,
+    borderColor: COLORS.SECONDARY.DIM,
+  },
+});

package/src/components/Preview.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { AvoidSoftInput } from 'react-native-avoid-softinput';
+
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+import { COLORS } from '../utils/theme';
+
+import { BackButton } from './BackButton';
+import { HMSManageCameraRotation } from './HMSManageCameraRotation';
+import { HMSManageLocalAudio } from './HMSManageLocalAudio';
+import { HMSManageLocalVideo } from './HMSManageLocalVideo';
+import { HMSPreviewEditName } from './HMSPreviewEditName';
+import { HMSPreviewJoinButton } from './HMSPreviewJoinButton';
+import { HMSPreviewPeersList } from './HMSPreviewPeersList';
+import { HMSPreviewSubtitle } from './HMSPreviewSubtitle';
+import { HMSPreviewTile } from './HMSPreviewTile';
+import { HMSPreviewTitle } from './HMSPreviewTitle';
+import { HMSPreviewDeviceSettings } from './HMSPreviewDeviceSettings';
+
+export const Preview = ({
+  join,
+  loadingButtonState,
+}: {
+  join(): void;
+  loadingButtonState: boolean;
+}) => {
+  const { bottom } = useSafeAreaInsets();
+
+  useEffect(() => {
+    AvoidSoftInput.setAdjustNothing();
+    AvoidSoftInput.setEnabled(true);
+
+    return () => AvoidSoftInput.setEnabled(false);
+  }, []);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContainer}
+        bounces={false}
+      >
+        <BackButton />
+
+        <HMSPreviewTitle />
+
+        <HMSPreviewSubtitle />
+
+        <HMSPreviewPeersList />
+
+        <HMSPreviewTile />
+
+        <View style={styles.controlsContainer}>
+          <View style={styles.micAndCameraControls}>
+            <HMSManageLocalAudio />
+
+            <View style={styles.manageLocalVideoWrapper}>
+              <HMSManageLocalVideo />
+            </View>
+
+            <HMSManageCameraRotation />
+          </View>
+
+          <HMSPreviewDeviceSettings />
+        </View>
+
+        <View
+          style={[styles.joinButtonRow, { marginBottom: 34 - bottom + 12 }]}
+        >
+          <HMSPreviewEditName />
+
+          <HMSPreviewJoinButton onJoin={join} loading={loadingButtonState} />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+  },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  controlsContainer: {
+    marginHorizontal: 24,
+    marginTop: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  micAndCameraControls: {
+    flexDirection: 'row',
+  },
+  manageLocalVideoWrapper: {
+    marginHorizontal: 16,
+  },
+  joinButtonRow: {
+    marginHorizontal: 24,
+    marginTop: 16,
+    flexDirection: 'row',
+  },
+});