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

package/src/components/HMSManageLocalAudio.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { MicIcon } from '../Icons';
+import { useCanPublishAudio, useHMSActions } from '../hooks-sdk';
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
+import { PressableIcon } from './PressableIcon';
+
+export const HMSManageLocalAudio = () => {
+  const canPublishAudio = useCanPublishAudio();
+
+  if (!canPublishAudio) {
+    return null;
+  }
+
+  return <ToggleAudioMuteButton />;
+};
+
+const ToggleAudioMuteButton = () => {
+  const hmsActions = useHMSActions();
+  // TODO: set initial `isLocalAudioMuted` state value as per initial track setting
+  const isLocalAudioMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalAudioMuted
+  );
+
+  const handleAudioMuteTogglePress = async () => {
+    // TODO: add getter API for state
+    // const enabled = hmsStore.getState(selectIsLocalAudioEnabled);
+    await hmsActions.setLocalAudioEnabled(!isLocalAudioMuted);
+  };
+
+  return (
+    <PressableIcon
+      onPress={handleAudioMuteTogglePress}
+      style={isLocalAudioMuted ? styles.mutedButton : undefined}
+    >
+      <MicIcon muted={!!isLocalAudioMuted} />
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  mutedButton: {
+    backgroundColor: COLORS.SECONDARY.DIM,
+    borderColor: COLORS.SECONDARY.DIM,
+  },
+});

package/src/components/HMSManageLocalVideo.tsx

@@ -0,0 +1,49 @@
+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 { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
+import { PressableIcon } from './PressableIcon';
+import { CameraIcon } from '../Icons';
+
+export const HMSManageLocalVideo = () => {
+  const canPublishVideo = useCanPublishVideo();
+
+  if (!canPublishVideo) {
+    return null;
+  }
+
+  return <ToggleVideoMuteButton />;
+};
+
+const ToggleVideoMuteButton = () => {
+  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 () => {
+    // TODO: add getter API for state
+    // const enabled = hmsStore.getState(selectIsLocalVideoEnabled);
+    await hmsActions.setLocalVideoEnabled(!isLocalVideoMuted);
+  };
+
+  return (
+    <PressableIcon
+      onPress={handleVideoMuteTogglePress}
+      style={isLocalVideoMuted ? styles.mutedButton : undefined}
+    >
+      <CameraIcon muted={!!isLocalVideoMuted} />
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  mutedButton: {
+    backgroundColor: COLORS.SECONDARY.DIM,
+    borderColor: COLORS.SECONDARY.DIM,
+  },
+});

package/src/components/HMSManageRaiseHand.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector, shallowEqual } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
+import { useHMSActions } from '../hooks-sdk';
+import { PressableIcon } from './PressableIcon';
+import { HandIcon } from '../Icons';
+import { parseMetadata } from '../utils/functions';
+
+export const HMSManageRaiseHand = () => {
+  const hmsActions = useHMSActions();
+  const localPeerMetadata = useSelector(
+    (state: RootState) => parseMetadata(state.hmsStates.localPeer?.metadata),
+    shallowEqual
+  );
+
+  const toggleRaiseHand = async () => {
+    const newMetadata = {
+      ...localPeerMetadata,
+      isHandRaised: !localPeerMetadata.isHandRaised,
+      isBRBOn: false,
+    };
+    await hmsActions.changeMetadata(newMetadata);
+  };
+
+  return (
+    <PressableIcon
+      onPress={toggleRaiseHand}
+      style={localPeerMetadata.isHandRaised ? styles.activeButton : undefined}
+    >
+      <HandIcon
+        style={localPeerMetadata.isHandRaised ? styles.handRaised : undefined}
+      />
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  activeButton: {
+    backgroundColor: COLORS.SECONDARY.DIM,
+    borderColor: COLORS.SECONDARY.DIM,
+  },
+  handRaised: {
+    tintColor: COLORS.TWIN.YELLOW,
+  },
+});

package/src/components/HMSPreviewDeviceSettings.tsx

@@ -0,0 +1,387 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import {
+  LayoutAnimation,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Toast from 'react-native-simple-toast';
+import { useDispatch, useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  HMSUpdateListenerActions,
+  HMSAudioDevice,
+} from '@100mslive/react-native-hms';
+
+import { ChevronIcon, SettingsIcon, SpeakerIcon } from '../Icons';
+import { PressableIcon } from './PressableIcon';
+import { COLORS } from '../utils/theme';
+import { CloseIcon } from '../Icons';
+import { useHMSInstance } from '../hooks-util';
+import type { RootState } from '../redux';
+import { setRoomLocallyMuted } from '../redux/actions';
+
+enum PreviewModalCloseActions {
+  SWITCH_AUDIO_OUTPUT_IOS,
+}
+
+export const HMSPreviewDeviceSettings: React.FC = () => {
+  const actionAfterModalHide = React.useRef<PreviewModalCloseActions | null>(
+    null
+  );
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
+
+  /// VVV
+  const [deviceListDropdownOpen, setDeviceListDropdownOpen] =
+    React.useState(false);
+  const [currentAudioOutputDevice, setCurrentAudioOutputDevice] =
+    React.useState<HMSAudioDevice | null>(null);
+  const [availableAudioOutputDevices, setAvailableAudioOutputDevices] =
+    React.useState<HMSAudioDevice[]>([]);
+  /// ^^^
+
+  const roomLocallyMuted = useSelector(
+    (state: RootState) => state.hmsStates.roomLocallyMuted
+  );
+
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      let ignore = false;
+
+      const getCurrentAudioOutputDevice = async () => {
+        const device = await hmsInstance.getAudioOutputRouteType();
+        if (!ignore) {
+          setCurrentAudioOutputDevice(device);
+        }
+      };
+
+      const getAvailableAudioOutputDevices = async () => {
+        const devices = await hmsInstance.getAudioDevicesList();
+        if (!ignore) {
+          setAvailableAudioOutputDevices(devices);
+        }
+      };
+
+      getCurrentAudioOutputDevice();
+      getAvailableAudioOutputDevices();
+
+      return () => {
+        ignore = true;
+      };
+    }
+  }, [hmsInstance]);
+
+  const cleanup = () => {
+    setDeviceListDropdownOpen(false);
+  };
+
+  const closeModal = () => {
+    setSettingsModalVisible(false);
+    cleanup();
+  };
+
+  // closes modal and no action will be taken after modal has been closed
+  const dismissModal = () => {
+    actionAfterModalHide.current = null;
+    closeModal();
+  };
+
+  const handleSpeakerChange = () => {
+    if (Platform.OS === 'ios') {
+      actionAfterModalHide.current =
+        PreviewModalCloseActions.SWITCH_AUDIO_OUTPUT_IOS;
+      closeModal();
+    } else {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      setDeviceListDropdownOpen((prev) => !prev);
+    }
+  };
+
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      let ignore = false;
+      hmsInstance.setAudioDeviceChangeListener((data: any) => {
+        if (!ignore && data) {
+          setCurrentAudioOutputDevice(data.device);
+        }
+
+        Toast.showWithGravity(
+          `Audio Device Output changed to: ${getDescription(data?.device)}`,
+          Toast.LONG,
+          Toast.TOP
+        );
+      });
+
+      return () => {
+        ignore = true;
+
+        hmsInstance.removeEventListener(
+          HMSUpdateListenerActions.ON_AUDIO_DEVICE_CHANGED
+        );
+      };
+    }
+  }, [hmsInstance]);
+
+  const handleOnModalClose = () => {
+    if (actionAfterModalHide.current === null) {
+      return;
+    }
+
+    if (
+      actionAfterModalHide.current ===
+      PreviewModalCloseActions.SWITCH_AUDIO_OUTPUT_IOS
+    ) {
+      hmsInstance.switchAudioOutputUsingIOSUI();
+    }
+  };
+
+  const handleMuteRoom = () => {
+    hmsInstance.setPlaybackForAllAudio(!roomLocallyMuted);
+    dispatch(setRoomLocallyMuted(!roomLocallyMuted));
+  };
+
+  const handleSelectAudioDevice = (device: HMSAudioDevice) => {
+    hmsInstance.switchAudioOutput(device);
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setDeviceListDropdownOpen(false);
+  };
+
+  return (
+    <View>
+      <PressableIcon onPress={() => setSettingsModalVisible(true)}>
+        <SettingsIcon />
+      </PressableIcon>
+
+      <Modal
+        isVisible={settingsModalVisible}
+        animationIn={'slideInUp'}
+        animationOut={'slideOutDown'}
+        backdropColor={COLORS.BACKGROUND.DIM}
+        backdropOpacity={0.3}
+        onBackButtonPress={dismissModal}
+        onBackdropPress={dismissModal}
+        useNativeDriver={true}
+        onModalHide={handleOnModalClose}
+        useNativeDriverForBackdrop={true}
+        hideModalContentWhileAnimating={true}
+        // swipeDirection={['up', 'down']}
+        // swipe
+        style={styles.modal}
+      >
+        <SafeAreaView style={styles.container}>
+          <View style={styles.header}>
+            <Text style={styles.headerText}>Device Settings</Text>
+
+            <TouchableOpacity
+              onPress={dismissModal}
+              hitSlop={styles.closeIconHitSlop}
+            >
+              <CloseIcon />
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.divider} />
+
+          <Text style={styles.itemLabel}>Speakers</Text>
+
+          <View>
+            <TouchableHighlight
+              underlayColor={COLORS.SURFACE.DEFAULT}
+              style={styles.item}
+              onPress={handleSpeakerChange}
+            >
+              <>
+                <View style={styles.itemTextContainer}>
+                  <SpeakerIcon muted={false} />
+
+                  <Text style={styles.itemText} numberOfLines={1}>
+                    {currentAudioOutputDevice
+                      ? getDescription(currentAudioOutputDevice)
+                      : 'Switch Audio Output Device'}
+                  </Text>
+                </View>
+
+                <ChevronIcon
+                  direction="down"
+                  style={
+                    Platform.OS === 'ios'
+                      ? styles.downToRightChevronIcon
+                      : deviceListDropdownOpen
+                      ? styles.downToUpChevronIcon
+                      : null
+                  }
+                />
+              </>
+            </TouchableHighlight>
+
+            {Platform.OS === 'android' && deviceListDropdownOpen ? (
+              <View
+                style={{
+                  height: 160,
+                  marginTop: 8,
+                  overflow: 'hidden',
+                  borderRadius: 8,
+                  backgroundColor: COLORS.SURFACE.DEFAULT,
+                }}
+              >
+                <ScrollView showsVerticalScrollIndicator={true}>
+                  {availableAudioOutputDevices.sort().map((device) => (
+                    <TouchableOpacity
+                      disabled={device === currentAudioOutputDevice}
+                      style={{
+                        paddingHorizontal: 16,
+                        paddingVertical: 12,
+                        backgroundColor:
+                          device === currentAudioOutputDevice
+                            ? COLORS.PRIMARY.DARK
+                            : undefined,
+                      }}
+                      onPress={() => handleSelectAudioDevice(device)}
+                    >
+                      <Text style={styles.itemText}>
+                        {getDescription(device)}
+                      </Text>
+                    </TouchableOpacity>
+                  ))}
+                </ScrollView>
+              </View>
+            ) : null}
+          </View>
+
+          <TouchableOpacity
+            style={styles.item2}
+            onPress={handleMuteRoom}
+            activeOpacity={0.7}
+          >
+            <View style={styles.itemTextContainer}>
+              <SpeakerIcon muted={roomLocallyMuted} />
+
+              <Text style={styles.itemText} numberOfLines={1}>
+                Mute Room
+              </Text>
+            </View>
+
+            <Switch
+              value={roomLocallyMuted}
+              thumbColor={COLORS.BASE.WHITE}
+              trackColor={{
+                true: COLORS.PRIMARY.DEFAULT,
+                false: COLORS.SECONDARY.DISABLED,
+              }}
+              onValueChange={handleMuteRoom}
+            />
+          </TouchableOpacity>
+        </SafeAreaView>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  container: {
+    backgroundColor: COLORS.SURFACE.DIM,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  divider: {
+    marginVertical: 24,
+    height: 1,
+    backgroundColor: COLORS.BORDER.DEFAULT,
+  },
+  itemLabel: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginBottom: 8,
+  },
+  item: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 8,
+    backgroundColor: COLORS.SURFACE.BRIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  item2: {
+    marginTop: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    // borderRadius: 8,
+    // backgroundColor: COLORS.SURFACE.BRIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  itemTextContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  itemText: {
+    flex: 1,
+    marginHorizontal: 16,
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  },
+  downToRightChevronIcon: {
+    transform: [{ rotateZ: '-90deg' }],
+  },
+  downToUpChevronIcon: {
+    transform: [{ rotateZ: '-180deg' }],
+  },
+});
+
+const getDescription = (ofDevice: HMSAudioDevice) => {
+  switch (ofDevice) {
+    case HMSAudioDevice.AUTOMATIC:
+      return 'Automatic';
+    case HMSAudioDevice.BLUETOOTH:
+      return 'Bluetooth';
+    case HMSAudioDevice.EARPIECE:
+      return 'Earpiece';
+    case HMSAudioDevice.SPEAKER_PHONE:
+      return 'Phone Speaker';
+    case HMSAudioDevice.WIRED_HEADSET:
+      return 'Wired Headset';
+  }
+};

package/src/components/HMSPreviewEditName.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { COLORS } from '../utils/theme';
+import type { RootState } from '../redux';
+import { changeUsername } from '../redux/actions';
+import { useHMSConfig } from '../hooks-util';
+
+export interface HMSPreviewEditNameProps {}
+
+export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
+  const dispatch = useDispatch();
+  const { clearConfig } = useHMSConfig();
+  const userName = useSelector((state: RootState) => state.user.userName);
+  const [inputFocused, setInputFocused] = React.useState(false);
+
+  const handleNameChange = (name: string) => {
+    dispatch(changeUsername(name));
+    clearConfig();
+  };
+
+  const handleInputFocus = () => setInputFocused(true);
+
+  const handleInputBlur = () => setInputFocused(false);
+
+  return (
+    <TextInput
+      style={[styles.input, inputFocused ? styles.focusedInput : null]}
+      value={userName}
+      onChangeText={handleNameChange}
+      placeholder="Name"
+      autoCapitalize="words"
+      autoCompleteType="name"
+      placeholderTextColor={COLORS.SURFACE.ON_SURFACE.LOW}
+      selectionColor={COLORS.SURFACE.ON_SURFACE.HIGH}
+      onFocus={handleInputFocus}
+      onBlur={handleInputBlur}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    flex: 1,
+    textAlignVertical: 'center',
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 8,
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    letterSpacing: 0.5,
+    borderWidth: 2,
+    borderColor: COLORS.SURFACE.DEFAULT,
+  },
+  focusedInput: {
+    borderColor: COLORS.PRIMARY.DEFAULT,
+    borderWidth: 2,
+  },
+});

package/src/components/HMSPreviewJoinButton.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+} from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+export interface HMSPreviewJoinButtonProps {
+  onJoin(): void;
+  loading: boolean;
+}
+
+export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
+  loading,
+  onJoin,
+}) => {
+  return (
+    <TouchableHighlight
+      underlayColor={COLORS.PRIMARY.DARK}
+      style={styles.button}
+      onPress={onJoin}
+      disabled={loading}
+    >
+      <>
+        {loading ? (
+          <ActivityIndicator
+            size={'small'}
+            color={COLORS.BASE.WHITE}
+            style={styles.loader}
+          />
+        ) : null}
+
+        <Text style={[styles.text, { opacity: loading ? 0 : undefined }]}>
+          {'Join ->'}
+        </Text>
+      </>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: COLORS.PRIMARY.DEFAULT,
+    marginLeft: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    color: COLORS.BASE.WHITE,
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginHorizontal: 8,
+  },
+  loader: { position: 'absolute' },
+});