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

package/lib/module/components/HMSPreviewDeviceSettings.js

@@ -0,0 +1,296 @@
+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 { setRoomLocallyMuted } from '../redux/actions';
+var PreviewModalCloseActions = /*#__PURE__*/function (PreviewModalCloseActions) {
+  PreviewModalCloseActions[PreviewModalCloseActions["SWITCH_AUDIO_OUTPUT_IOS"] = 0] = "SWITCH_AUDIO_OUTPUT_IOS";
+  return PreviewModalCloseActions;
+}(PreviewModalCloseActions || {});
+export const HMSPreviewDeviceSettings = () => {
+  const actionAfterModalHide = React.useRef(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(null);
+  const [availableAudioOutputDevices, setAvailableAudioOutputDevices] = React.useState([]);
+  /// ^^^
+
+  const roomLocallyMuted = useSelector(state => 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 => {
+        if (!ignore && data) {
+          setCurrentAudioOutputDevice(data.device);
+        }
+        Toast.showWithGravity(`Audio Device Output changed to: ${getDescription(data === null || data === void 0 ? void 0 : 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 => {
+    hmsInstance.switchAudioOutput(device);
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setDeviceListDropdownOpen(false);
+  };
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(PressableIcon, {
+    onPress: () => setSettingsModalVisible(true)
+  }, /*#__PURE__*/React.createElement(SettingsIcon, null)), /*#__PURE__*/React.createElement(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
+  }, /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.header
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.headerText
+  }, "Device Settings"), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: dismissModal,
+    hitSlop: styles.closeIconHitSlop
+  }, /*#__PURE__*/React.createElement(CloseIcon, null))), /*#__PURE__*/React.createElement(View, {
+    style: styles.divider
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemLabel
+  }, "Speakers"), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(TouchableHighlight, {
+    underlayColor: COLORS.SURFACE.DEFAULT,
+    style: styles.item,
+    onPress: handleSpeakerChange
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.itemTextContainer
+  }, /*#__PURE__*/React.createElement(SpeakerIcon, {
+    muted: false
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText,
+    numberOfLines: 1
+  }, currentAudioOutputDevice ? getDescription(currentAudioOutputDevice) : 'Switch Audio Output Device')), /*#__PURE__*/React.createElement(ChevronIcon, {
+    direction: "down",
+    style: Platform.OS === 'ios' ? styles.downToRightChevronIcon : deviceListDropdownOpen ? styles.downToUpChevronIcon : null
+  }))), Platform.OS === 'android' && deviceListDropdownOpen ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: 160,
+      marginTop: 8,
+      overflow: 'hidden',
+      borderRadius: 8,
+      backgroundColor: COLORS.SURFACE.DEFAULT
+    }
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    showsVerticalScrollIndicator: true
+  }, availableAudioOutputDevices.sort().map(device => /*#__PURE__*/React.createElement(TouchableOpacity, {
+    disabled: device === currentAudioOutputDevice,
+    style: {
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: device === currentAudioOutputDevice ? COLORS.PRIMARY.DARK : undefined
+    },
+    onPress: () => handleSelectAudioDevice(device)
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText
+  }, getDescription(device)))))) : null), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: styles.item2,
+    onPress: handleMuteRoom,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.itemTextContainer
+  }, /*#__PURE__*/React.createElement(SpeakerIcon, {
+    muted: roomLocallyMuted
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText,
+    numberOfLines: 1
+  }, "Mute Room")), /*#__PURE__*/React.createElement(Switch, {
+    value: roomLocallyMuted,
+    thumbColor: COLORS.BASE.WHITE,
+    trackColor: {
+      true: COLORS.PRIMARY.DEFAULT,
+      false: COLORS.SECONDARY.DISABLED
+    },
+    onValueChange: handleMuteRoom
+  })))));
+};
+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 => {
+  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';
+  }
+};
+//# sourceMappingURL=HMSPreviewDeviceSettings.js.map

package/lib/module/components/HMSPreviewDeviceSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Modal","LayoutAnimation","Platform","ScrollView","StyleSheet","Switch","Text","TouchableHighlight","TouchableOpacity","View","Toast","useDispatch","useSelector","SafeAreaView","HMSUpdateListenerActions","HMSAudioDevice","ChevronIcon","SettingsIcon","SpeakerIcon","PressableIcon","COLORS","CloseIcon","useHMSInstance","setRoomLocallyMuted","PreviewModalCloseActions","HMSPreviewDeviceSettings","actionAfterModalHide","useRef","hmsInstance","dispatch","settingsModalVisible","setSettingsModalVisible","useState","deviceListDropdownOpen","setDeviceListDropdownOpen","currentAudioOutputDevice","setCurrentAudioOutputDevice","availableAudioOutputDevices","setAvailableAudioOutputDevices","roomLocallyMuted","state","hmsStates","useEffect","OS","ignore","getCurrentAudioOutputDevice","device","getAudioOutputRouteType","getAvailableAudioOutputDevices","devices","getAudioDevicesList","cleanup","closeModal","dismissModal","current","handleSpeakerChange","SWITCH_AUDIO_OUTPUT_IOS","configureNext","Presets","easeInEaseOut","prev","setAudioDeviceChangeListener","data","showWithGravity","getDescription","LONG","TOP","removeEventListener","ON_AUDIO_DEVICE_CHANGED","handleOnModalClose","switchAudioOutputUsingIOSUI","handleMuteRoom","setPlaybackForAllAudio","handleSelectAudioDevice","switchAudioOutput","createElement","onPress","isVisible","animationIn","animationOut","backdropColor","BACKGROUND","DIM","backdropOpacity","onBackButtonPress","onBackdropPress","useNativeDriver","onModalHide","useNativeDriverForBackdrop","hideModalContentWhileAnimating","style","styles","modal","container","header","headerText","hitSlop","closeIconHitSlop","divider","itemLabel","underlayColor","SURFACE","DEFAULT","item","Fragment","itemTextContainer","muted","itemText","numberOfLines","direction","downToRightChevronIcon","downToUpChevronIcon","height","marginTop","overflow","borderRadius","backgroundColor","showsVerticalScrollIndicator","sort","map","disabled","paddingHorizontal","paddingVertical","PRIMARY","DARK","undefined","item2","activeOpacity","value","thumbColor","BASE","WHITE","trackColor","true","false","SECONDARY","DISABLED","onValueChange","create","margin","justifyContent","borderTopLeftRadius","borderTopRightRadius","padding","flexDirection","alignItems","color","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing","bottom","left","right","top","marginVertical","BORDER","marginBottom","BRIGHT","flex","marginHorizontal","transform","rotateZ","ofDevice","AUTOMATIC","BLUETOOTH","EARPIECE","SPEAKER_PHONE","WIRED_HEADSET"],"sourceRoot":"../../../src","sources":["components/HMSPreviewDeviceSettings.tsx"],"mappings":"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"}

package/lib/module/components/HMSPreviewEditName.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { COLORS } from '../utils/theme';
+import { changeUsername } from '../redux/actions';
+import { useHMSConfig } from '../hooks-util';
+export const HMSPreviewEditName = () => {
+  const dispatch = useDispatch();
+  const {
+    clearConfig
+  } = useHMSConfig();
+  const userName = useSelector(state => state.user.userName);
+  const [inputFocused, setInputFocused] = React.useState(false);
+  const handleNameChange = name => {
+    dispatch(changeUsername(name));
+    clearConfig();
+  };
+  const handleInputFocus = () => setInputFocused(true);
+  const handleInputBlur = () => setInputFocused(false);
+  return /*#__PURE__*/React.createElement(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
+  }
+});
+//# sourceMappingURL=HMSPreviewEditName.js.map

package/lib/module/components/HMSPreviewEditName.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","TextInput","useDispatch","useSelector","COLORS","changeUsername","useHMSConfig","HMSPreviewEditName","dispatch","clearConfig","userName","state","user","inputFocused","setInputFocused","useState","handleNameChange","name","handleInputFocus","handleInputBlur","createElement","style","styles","input","focusedInput","value","onChangeText","placeholder","autoCapitalize","autoCompleteType","placeholderTextColor","SURFACE","ON_SURFACE","LOW","selectionColor","HIGH","onFocus","onBlur","create","flex","textAlignVertical","backgroundColor","DEFAULT","paddingHorizontal","paddingVertical","borderRadius","color","fontSize","fontFamily","fontWeight","letterSpacing","borderWidth","borderColor","PRIMARY"],"sourceRoot":"../../../src","sources":["components/HMSPreviewEditName.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AACpD,SAASC,WAAW,EAAEC,WAAW,QAAQ,aAAa;AAEtD,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,YAAY,QAAQ,eAAe;AAI5C,OAAO,MAAMC,kBAAqD,GAAGA,CAAA,KAAM;EACzE,MAAMC,QAAQ,GAAGN,WAAW,CAAC,CAAC;EAC9B,MAAM;IAAEO;EAAY,CAAC,GAAGH,YAAY,CAAC,CAAC;EACtC,MAAMI,QAAQ,GAAGP,WAAW,CAAEQ,KAAgB,IAAKA,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC;EACvE,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGf,KAAK,CAACgB,QAAQ,CAAC,KAAK,CAAC;EAE7D,MAAMC,gBAAgB,GAAIC,IAAY,IAAK;IACzCT,QAAQ,CAACH,cAAc,CAACY,IAAI,CAAC,CAAC;IAC9BR,WAAW,CAAC,CAAC;EACf,CAAC;EAED,MAAMS,gBAAgB,GAAGA,CAAA,KAAMJ,eAAe,CAAC,IAAI,CAAC;EAEpD,MAAMK,eAAe,GAAGA,CAAA,KAAML,eAAe,CAAC,KAAK,CAAC;EAEpD,oBACEf,KAAA,CAAAqB,aAAA,CAACnB,SAAS;IACRoB,KAAK,EAAE,CAACC,MAAM,CAACC,KAAK,EAAEV,YAAY,GAAGS,MAAM,CAACE,YAAY,GAAG,IAAI,CAAE;IACjEC,KAAK,EAAEf,QAAS;IAChBgB,YAAY,EAAEV,gBAAiB;IAC/BW,WAAW,EAAC,MAAM;IAClBC,cAAc,EAAC,OAAO;IACtBC,gBAAgB,EAAC,MAAM;IACvBC,oBAAoB,EAAE1B,MAAM,CAAC2B,OAAO,CAACC,UAAU,CAACC,GAAI;IACpDC,cAAc,EAAE9B,MAAM,CAAC2B,OAAO,CAACC,UAAU,CAACG,IAAK;IAC/CC,OAAO,EAAElB,gBAAiB;IAC1BmB,MAAM,EAAElB;EAAgB,CACzB,CAAC;AAEN,CAAC;AAED,MAAMG,MAAM,GAAGtB,UAAU,CAACsC,MAAM,CAAC;EAC/Bf,KAAK,EAAE;IACLgB,IAAI,EAAE,CAAC;IACPC,iBAAiB,EAAE,QAAQ;IAC3BC,eAAe,EAAErC,MAAM,CAAC2B,OAAO,CAACW,OAAO;IACvCC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,YAAY,EAAE,CAAC;IACfC,KAAK,EAAE1C,MAAM,CAAC2B,OAAO,CAACC,UAAU,CAACG,IAAI;IACrCY,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,aAAa,EAAE,GAAG;IAClBC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEhD,MAAM,CAAC2B,OAAO,CAACW;EAC9B,CAAC;EACDlB,YAAY,EAAE;IACZ4B,WAAW,EAAEhD,MAAM,CAACiD,OAAO,CAACX,OAAO;IACnCS,WAAW,EAAE;EACf;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPreviewJoinButton.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ActivityIndicator, StyleSheet, Text, TouchableHighlight } from 'react-native';
+import { COLORS } from '../utils/theme';
+export const HMSPreviewJoinButton = _ref => {
+  let {
+    loading,
+    onJoin
+  } = _ref;
+  return /*#__PURE__*/React.createElement(TouchableHighlight, {
+    underlayColor: COLORS.PRIMARY.DARK,
+    style: styles.button,
+    onPress: onJoin,
+    disabled: loading
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: 'small',
+    color: COLORS.BASE.WHITE,
+    style: styles.loader
+  }) : null, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, {
+      opacity: loading ? 0 : undefined
+    }]
+  }, 'Join ->')));
+};
+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'
+  }
+});
+//# sourceMappingURL=HMSPreviewJoinButton.js.map

package/lib/module/components/HMSPreviewJoinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ActivityIndicator","StyleSheet","Text","TouchableHighlight","COLORS","HMSPreviewJoinButton","_ref","loading","onJoin","createElement","underlayColor","PRIMARY","DARK","style","styles","button","onPress","disabled","Fragment","size","color","BASE","WHITE","loader","text","opacity","undefined","create","paddingHorizontal","paddingVertical","borderRadius","backgroundColor","DEFAULT","marginLeft","alignItems","justifyContent","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing","marginHorizontal","position"],"sourceRoot":"../../../src","sources":["components/HMSPreviewJoinButton.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,UAAU,EACVC,IAAI,EACJC,kBAAkB,QACb,cAAc;AAErB,SAASC,MAAM,QAAQ,gBAAgB;AAOvC,OAAO,MAAMC,oBAAyD,GAAGC,IAAA,IAGnE;EAAA,IAHoE;IACxEC,OAAO;IACPC;EACF,CAAC,GAAAF,IAAA;EACC,oBACEP,KAAA,CAAAU,aAAA,CAACN,kBAAkB;IACjBO,aAAa,EAAEN,MAAM,CAACO,OAAO,CAACC,IAAK;IACnCC,KAAK,EAAEC,MAAM,CAACC,MAAO;IACrBC,OAAO,EAAER,MAAO;IAChBS,QAAQ,EAAEV;EAAQ,gBAElBR,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAmB,QAAA,QACGX,OAAO,gBACNR,KAAA,CAAAU,aAAA,CAACT,iBAAiB;IAChBmB,IAAI,EAAE,OAAQ;IACdC,KAAK,EAAEhB,MAAM,CAACiB,IAAI,CAACC,KAAM;IACzBT,KAAK,EAAEC,MAAM,CAACS;EAAO,CACtB,CAAC,GACA,IAAI,eAERxB,KAAA,CAAAU,aAAA,CAACP,IAAI;IAACW,KAAK,EAAE,CAACC,MAAM,CAACU,IAAI,EAAE;MAAEC,OAAO,EAAElB,OAAO,GAAG,CAAC,GAAGmB;IAAU,CAAC;EAAE,GAC9D,SACG,CACN,CACgB,CAAC;AAEzB,CAAC;AAED,MAAMZ,MAAM,GAAGb,UAAU,CAAC0B,MAAM,CAAC;EAC/BZ,MAAM,EAAE;IACNa,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,CAAC;IAClBC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE3B,MAAM,CAACO,OAAO,CAACqB,OAAO;IACvCC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDX,IAAI,EAAE;IACJJ,KAAK,EAAEhB,MAAM,CAACiB,IAAI,CAACC,KAAK;IACxBc,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,GAAG;IAClBC,gBAAgB,EAAE;EACpB,CAAC;EACDlB,MAAM,EAAE;IAAEmB,QAAQ,EAAE;EAAW;AACjC,CAAC,CAAC"}

package/lib/module/components/HMSPreviewPeersList.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { COLORS } from '../utils/theme';
+import { ParticipantsIcon } from '../Icons';
+export const HMSPreviewPeersList = () => {
+  const [peerList, _setPeerList] = React.useState([]);
+
+  // 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 /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, peerList.length > 0 ? /*#__PURE__*/React.createElement(ParticipantsIcon, null) : null, peerList.length === 0 ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, styles.textSpacer]
+  }, "You are the first to join") : peerList.length === 1 ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, styles.textSpacer]
+  }, peerList[0].name, " has joined") : /*#__PURE__*/React.createElement(View, {
+    style: styles.multiTextContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, styles.flexView],
+    ellipsizeMode: "tail",
+    numberOfLines: 1
+  }, peerList.slice(0, 2).map(peer => peer.name).join(', ')), peerList.length - 2 > 0 ? /*#__PURE__*/React.createElement(Text, {
+    style: styles.text
+  }, ' ', "+", peerList.length - 2, ' ', peerList.length - 2 > 1 ? 'others' : 'other') : null));
+};
+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%'
+  }
+});
+//# sourceMappingURL=HMSPreviewPeersList.js.map

package/lib/module/components/HMSPreviewPeersList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","COLORS","ParticipantsIcon","HMSPreviewPeersList","peerList","_setPeerList","useState","createElement","style","styles","container","length","text","textSpacer","name","multiTextContainer","flexView","ellipsizeMode","numberOfLines","slice","map","peer","join","create","flexDirection","alignItems","backgroundColor","SURFACE","DEFAULT","marginTop","marginBottom","alignSelf","paddingVertical","paddingHorizontal","borderRadius","borderColor","BORDER","borderWidth","color","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","marginHorizontal","flex","maxWidth"],"sourceRoot":"../../../src","sources":["components/HMSPreviewPeersList.tsx"],"mappings":"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"}

package/lib/module/components/HMSPreviewSubtitle.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { COLORS } from '../utils/theme';
+export const HMSPreviewSubtitle = _ref => {
+  let {
+    subtitle = 'Setup your audio and video before joining'
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Text, {
+    style: styles.title
+  }, subtitle);
+};
+const styles = StyleSheet.create({
+  title: {
+    color: COLORS.SURFACE.ON_SURFACE.LOW,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 20,
+    marginTop: 4,
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=HMSPreviewSubtitle.js.map

package/lib/module/components/HMSPreviewSubtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","COLORS","HMSPreviewSubtitle","_ref","subtitle","createElement","style","styles","title","create","color","SURFACE","ON_SURFACE","LOW","fontSize","fontFamily","fontWeight","lineHeight","marginTop","textAlign"],"sourceRoot":"../../../src","sources":["components/HMSPreviewSubtitle.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,MAAM,QAAQ,gBAAgB;AAMvC,OAAO,MAAMC,kBAAqD,GAAGC,IAAA,IAE/D;EAAA,IAFgE;IACpEC,QAAQ,GAAG;EACb,CAAC,GAAAD,IAAA;EACC,oBAAOL,KAAA,CAAAO,aAAA,CAACL,IAAI;IAACM,KAAK,EAAEC,MAAM,CAACC;EAAM,GAAEJ,QAAe,CAAC;AACrD,CAAC;AAED,MAAMG,MAAM,GAAGR,UAAU,CAACU,MAAM,CAAC;EAC/BD,KAAK,EAAE;IACLE,KAAK,EAAET,MAAM,CAACU,OAAO,CAACC,UAAU,CAACC,GAAG;IACpCC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE,CAAC;IACZC,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}