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

package/lib/commonjs/components/{HMSSpeakerSettings.js → HMSManageAudioOutput.js}

@@ -3,21 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HMSSpeakerSettings = void 0;
+exports.HMSManageAudioOutput = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactNativeModal = _interopRequireDefault(require("react-native-modal"));
 var _reactNative = require("react-native");
 var _reactNativeSimpleToast = _interopRequireDefault(require("react-native-simple-toast"));
 var _reactRedux = require("react-redux");
 var _reactNativeHms = require("@100mslive/react-native-hms");
 var _Icons = require("../Icons");
 var _PressableIcon = require("./PressableIcon");
-var _theme = require("../utils/theme");
 var _hooksUtil = require("../hooks-util");
+var _BottomSheet = require("./BottomSheet");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const HMSSpeakerSettings = () => {
+const HMSManageAudioOutput = () => {
   const hmsInstance = (0, _hooksUtil.useHMSInstance)();
   const [settingsModalVisible, setSettingsModalVisible] = React.useState(false);
   const [currentAudioOutputDevice, setCurrentAudioOutputDevice] = React.useState(null);
@@ -90,92 +89,66 @@ const HMSSpeakerSettings = () => {
     hmsInstance.switchAudioOutput(device);
     setSettingsModalVisible(false);
   };
+  const hmsRoomStyles = (0, _hooksUtil.useHMSRoomStyleSheet)((theme, typography) => ({
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Medium`
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    },
+    divider: {
+      backgroundColor: theme.palette.border_default
+    }
+  }));
   return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_PressableIcon.PressableIcon, {
     onPress: handleSpeakerChange
   }, _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(_Icons.SpeakerIcon, {
     muted: false
-  }) : getIcon(currentAudioOutputDevice || _reactNativeHms.HMSAudioDevice.AUTOMATIC)), /*#__PURE__*/React.createElement(_reactNativeModal.default, {
+  }) : getIcon(currentAudioOutputDevice || _reactNativeHms.HMSAudioDevice.AUTOMATIC)), /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet, {
     isVisible: settingsModalVisible,
-    animationIn: 'slideInUp',
-    animationOut: 'slideOutDown',
-    backdropColor: _theme.COLORS.BACKGROUND.DIM,
-    backdropOpacity: 0.3,
-    onBackButtonPress: dismissModal,
-    onBackdropPress: dismissModal,
-    useNativeDriver: true,
-    useNativeDriverForBackdrop: true,
-    hideModalContentWhileAnimating: true
-    // swipeDirection={['up', 'down']}
-    // swipe
-    ,
-    style: styles.modal
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: styles.container
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: styles.header
-  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-    style: styles.headerText
-  }, "Speaker Settings"), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
-    onPress: dismissModal,
-    hitSlop: styles.closeIconHitSlop
-  }, /*#__PURE__*/React.createElement(_Icons.CloseIcon, null))), availableAudioOutputDevices.length === 0 ? /*#__PURE__*/React.createElement(_reactNative.View, {
+    dismissModal: dismissModal
+  }, /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet.Header, {
+    dismissModal: dismissModal,
+    heading: "Audio Output"
+  }), /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet.Divider, null), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.contentContainer
+  }, availableAudioOutputDevices.length === 0 ? /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.emptyView
   }, /*#__PURE__*/React.createElement(_reactNative.Text, {
-    style: styles.itemText
+    style: [styles.itemText, hmsRoomStyles.text]
   }, "No other devices available!")) : /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
     showsVerticalScrollIndicator: true
-  }, availableAudioOutputDevices.sort().map(device => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: device
-  }, true ? /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: styles.divider
-  }) : null, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
-    style: styles.audioDeviceItem,
-    onPress: () => handleSelectAudioDevice(device)
-  }, getIcon(device), /*#__PURE__*/React.createElement(_reactNative.Text, {
-    style: styles.itemText
-  }, device))))))));
+  }, availableAudioOutputDevices.sort((a, b) => audioDeviceSortOrder[a] - audioDeviceSortOrder[b]).map((device, index) => {
+    const isFirst = index === 0;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: device
+    }, isFirst ? null : /*#__PURE__*/React.createElement(_reactNative.View, {
+      style: [styles.divider, hmsRoomStyles.divider]
+    }), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
+      style: styles.audioDeviceItem,
+      onPress: () => handleSelectAudioDevice(device)
+    }, /*#__PURE__*/React.createElement(_reactNative.View, {
+      style: styles.itemTextWrapper
+    }, getIcon(device === _reactNativeHms.HMSAudioDevice.AUTOMATIC && currentAudioOutputDevice ? currentAudioOutputDevice : device), /*#__PURE__*/React.createElement(_reactNative.Text, {
+      style: [styles.itemText, hmsRoomStyles.text]
+    }, getDescription(device, currentAudioOutputDevice))), device === currentAudioOutputDevice ? /*#__PURE__*/React.createElement(_Icons.CheckIcon, null) : null));
+  })))));
 };
-exports.HMSSpeakerSettings = HMSSpeakerSettings;
+exports.HMSManageAudioOutput = HMSManageAudioOutput;
 const styles = _reactNative.StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-end'
-  },
-  container: {
-    backgroundColor: _theme.COLORS.SURFACE.DIM,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    paddingTop: 24,
-    paddingHorizontal: 16,
-    paddingBottom: 32
+  contentContainer: {
+    marginHorizontal: 24
   },
-  header: {
+  itemTextWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 16
-  },
-  headerText: {
-    color: _theme.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
+    justifyContent: 'center'
   },
   itemText: {
-    flex: 1,
     marginHorizontal: 16,
-    color: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.1
   },
@@ -187,11 +160,11 @@ const styles = _reactNative.StyleSheet.create({
   audioDeviceItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 24
+    justifyContent: 'space-between',
+    paddingVertical: 20
   },
   divider: {
-    height: 1,
-    backgroundColor: _theme.COLORS.BORDER.DEFAULT
+    height: 1
   }
 });
 const getIcon = ofDevice => {
@@ -210,4 +183,25 @@ const getIcon = ofDevice => {
       return /*#__PURE__*/React.createElement(_Icons.HeadphonesIcon, null);
   }
 };
-//# sourceMappingURL=HMSSpeakerSettings.js.map
+const getDescription = (ofDevice, currentDevice) => {
+  switch (ofDevice) {
+    case _reactNativeHms.HMSAudioDevice.AUTOMATIC:
+      return currentDevice && currentDevice !== _reactNativeHms.HMSAudioDevice.AUTOMATIC ? `Default (${getDescription(currentDevice, currentDevice)})` : 'Automatic';
+    case _reactNativeHms.HMSAudioDevice.BLUETOOTH:
+      return 'Bluetooth Device';
+    case _reactNativeHms.HMSAudioDevice.EARPIECE:
+      return 'Phone';
+    case _reactNativeHms.HMSAudioDevice.SPEAKER_PHONE:
+      return 'Speaker';
+    case _reactNativeHms.HMSAudioDevice.WIRED_HEADSET:
+      return 'Earphone';
+  }
+};
+const audioDeviceSortOrder = {
+  [_reactNativeHms.HMSAudioDevice.AUTOMATIC]: 0,
+  [_reactNativeHms.HMSAudioDevice.SPEAKER_PHONE]: 1,
+  [_reactNativeHms.HMSAudioDevice.WIRED_HEADSET]: 2,
+  [_reactNativeHms.HMSAudioDevice.EARPIECE]: 3,
+  [_reactNativeHms.HMSAudioDevice.BLUETOOTH]: 4
+};
+//# sourceMappingURL=HMSManageAudioOutput.js.map

package/lib/commonjs/components/HMSManageAudioOutput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeSimpleToast","_interopRequireDefault","_reactRedux","_reactNativeHms","_Icons","_PressableIcon","_hooksUtil","_BottomSheet","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","HMSManageAudioOutput","hmsInstance","useHMSInstance","settingsModalVisible","setSettingsModalVisible","useState","currentAudioOutputDevice","setCurrentAudioOutputDevice","availableAudioOutputDevices","setAvailableAudioOutputDevices","debugMode","useSelector","state","user","useEffect","Platform","OS","ignore","getCurrentAudioOutputDevice","device","getAudioOutputRouteType","getAvailableAudioOutputDevices","devices","getAudioDevicesList","dismissModal","handleSpeakerChange","switchAudioOutputUsingIOSUI","length","then","setAudioDeviceChangeListener","data","Toast","showWithGravity","LONG","TOP","removeEventListener","HMSUpdateListenerActions","ON_AUDIO_DEVICE_CHANGED","handleSelectAudioDevice","switchAudioOutput","hmsRoomStyles","useHMSRoomStyleSheet","theme","typography","headerText","color","palette","on_surface_high","fontFamily","font_family","text","divider","backgroundColor","border_default","createElement","View","PressableIcon","onPress","SpeakerIcon","muted","getIcon","HMSAudioDevice","AUTOMATIC","BottomSheet","isVisible","Header","heading","Divider","style","styles","contentContainer","emptyView","Text","itemText","ScrollView","showsVerticalScrollIndicator","sort","a","b","audioDeviceSortOrder","map","index","isFirst","Fragment","TouchableOpacity","audioDeviceItem","itemTextWrapper","getDescription","CheckIcon","exports","StyleSheet","create","marginHorizontal","flexDirection","alignItems","justifyContent","fontSize","lineHeight","letterSpacing","height","paddingVertical","ofDevice","WaveIcon","BLUETOOTH","BluetoothIcon","EARPIECE","AnswerPhoneIcon","SPEAKER_PHONE","WIRED_HEADSET","HeadphonesIcon","currentDevice"],"sourceRoot":"../../../src","sources":["components/HMSManageAudioOutput.tsx"],"mappings":"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"}

package/lib/commonjs/components/HMSManageCameraRotation.js

@@ -8,8 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
 var _Icons = require("../Icons");
 var _hooksSdk = require("../hooks-sdk");
-var _theme = require("../utils/theme");
 var _PressableIcon = require("./PressableIcon");
+var _hooksUtil = require("../hooks-util");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const HMSManageCameraRotation = () => {
@@ -30,13 +30,14 @@ const RotateCameraButton = () => {
     }
     await hmsActions.switchCamera();
   };
+  const cameraIconStyles = (0, _hooksUtil.useHMSRoomStyle)(theme => ({
+    tintColor: isLocalVideoMuted ? theme.palette.on_surface_low : theme.palette.on_surface_high
+  }), [isLocalVideoMuted]);
   return /*#__PURE__*/React.createElement(_PressableIcon.PressableIcon, {
     onPress: handleVideoMuteTogglePress,
     disabled: isLocalVideoMuted
   }, /*#__PURE__*/React.createElement(_Icons.RotateCameraIcon, {
-    style: {
-      tintColor: isLocalVideoMuted ? _theme.COLORS.SURFACE.ON_SURFACE.LOW : _theme.COLORS.SURFACE.ON_SURFACE.HIGH
-    }
+    style: cameraIconStyles
   }));
 };
 //# sourceMappingURL=HMSManageCameraRotation.js.map

package/lib/commonjs/components/HMSManageCameraRotation.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_reactRedux","_Icons","_hooksSdk","_theme","_PressableIcon","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","HMSManageCameraRotation","canPublishVideo","useCanPublishVideo","createElement","RotateCameraButton","exports","hmsActions","useHMSActions","isLocalVideoMuted","useSelector","state","hmsStates","handleVideoMuteTogglePress","switchCamera","PressableIcon","onPress","disabled","RotateCameraIcon","style","tintColor","COLORS","SURFACE","ON_SURFACE","LOW","HIGH"],"sourceRoot":"../../../src","sources":["components/HMSManageCameraRotation.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AAAgD,SAAAM,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAR,wBAAAY,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,eAAe,GAAG,IAAAC,4BAAkB,EAAC,CAAC;EAE5C,IAAI,CAACD,eAAe,EAAE;IACpB,OAAO,IAAI;EACb;EAEA,oBAAO/B,KAAA,CAAAiC,aAAA,CAACC,kBAAkB,MAAE,CAAC;AAC/B,CAAC;AAACC,OAAA,CAAAL,uBAAA,GAAAA,uBAAA;AAEF,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EAC/B,MAAME,UAAU,GAAG,IAAAC,uBAAa,EAAC,CAAC;EAClC;EACA,MAAMC,iBAAiB,GAAG,IAAAC,uBAAW,EAClCC,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACH,iBACxC,CAAC;EAED,MAAMI,0BAA0B,GAAG,MAAAA,CAAA,KAAY;IAC7C,IAAIJ,iBAAiB,EAAE;MACrB;IACF;IACA,MAAMF,UAAU,CAACO,YAAY,CAAC,CAAC;EACjC,CAAC;EAED,oBACE3C,KAAA,CAAAiC,aAAA,CAAC1B,cAAA,CAAAqC,aAAa;IACZC,OAAO,EAAEH,0BAA2B;IACpCI,QAAQ,EAAER;EAAkB,gBAE5BtC,KAAA,CAAAiC,aAAA,CAAC7B,MAAA,CAAA2C,gBAAgB;IACfC,KAAK,EAAE;MACLC,SAAS,EAAEX,iBAAiB,GACxBY,aAAM,CAACC,OAAO,CAACC,UAAU,CAACC,GAAG,GAC7BH,aAAM,CAACC,OAAO,CAACC,UAAU,CAACE;IAChC;EAAE,CACH,CACY,CAAC;AAEpB,CAAC"}
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactRedux","_Icons","_hooksSdk","_PressableIcon","_hooksUtil","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","HMSManageCameraRotation","canPublishVideo","useCanPublishVideo","createElement","RotateCameraButton","exports","hmsActions","useHMSActions","isLocalVideoMuted","useSelector","state","hmsStates","handleVideoMuteTogglePress","switchCamera","cameraIconStyles","useHMSRoomStyle","theme","tintColor","palette","on_surface_low","on_surface_high","PressableIcon","onPress","disabled","RotateCameraIcon","style"],"sourceRoot":"../../../src","sources":["components/HMSManageCameraRotation.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AAAgD,SAAAM,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAR,wBAAAY,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEzC,MAAMW,uBAAuB,GAAGA,CAAA,KAAM;EAC3C,MAAMC,eAAe,GAAG,IAAAC,4BAAkB,EAAC,CAAC;EAE5C,IAAI,CAACD,eAAe,EAAE;IACpB,OAAO,IAAI;EACb;EAEA,oBAAO/B,KAAA,CAAAiC,aAAA,CAACC,kBAAkB,MAAE,CAAC;AAC/B,CAAC;AAACC,OAAA,CAAAL,uBAAA,GAAAA,uBAAA;AAEF,MAAMI,kBAAkB,GAAGA,CAAA,KAAM;EAC/B,MAAME,UAAU,GAAG,IAAAC,uBAAa,EAAC,CAAC;EAClC;EACA,MAAMC,iBAAiB,GAAG,IAAAC,uBAAW,EAClCC,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACH,iBACxC,CAAC;EAED,MAAMI,0BAA0B,GAAG,MAAAA,CAAA,KAAY;IAC7C,IAAIJ,iBAAiB,EAAE;MACrB;IACF;IACA,MAAMF,UAAU,CAACO,YAAY,CAAC,CAAC;EACjC,CAAC;EAED,MAAMC,gBAAgB,GAAG,IAAAC,0BAAe,EACrCC,KAAK,KAAM;IACVC,SAAS,EAAET,iBAAiB,GACxBQ,KAAK,CAACE,OAAO,CAACC,cAAc,GAC5BH,KAAK,CAACE,OAAO,CAACE;EACpB,CAAC,CAAC,EACF,CAACZ,iBAAiB,CACpB,CAAC;EAED,oBACEtC,KAAA,CAAAiC,aAAA,CAAC3B,cAAA,CAAA6C,aAAa;IACZC,OAAO,EAAEV,0BAA2B;IACpCW,QAAQ,EAAEf;EAAkB,gBAE5BtC,KAAA,CAAAiC,aAAA,CAAC7B,MAAA,CAAAkD,gBAAgB;IAACC,KAAK,EAAEX;EAAiB,CAAE,CAC/B,CAAC;AAEpB,CAAC"}

package/lib/commonjs/components/HMSManageLeave.js

@@ -4,22 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HMSManageLeave = void 0;
-var _native = require("@react-navigation/native");
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _reactNativeModal = _interopRequireDefault(require("react-native-modal"));
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _reactNativeSimpleToast = _interopRequireDefault(require("react-native-simple-toast"));
 var _reactRedux = require("react-redux");
 var _Icons = require("../Icons");
 var _hooksUtil = require("../hooks-util");
-var _actions = require("../redux/actions");
 var _theme = require("../utils/theme");
 var _types = require("../utils/types");
-var _DefaultModal = require("./DefaultModal");
-var _Modals = require("./Modals");
 var _PressableIcon = require("./PressableIcon");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _BottomSheet = require("./BottomSheet");
+var _EndRoomModalContent = require("./EndRoomModalContent");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const HMSManageLeave = props => {
@@ -32,17 +26,17 @@ const HMSManageLeave = props => {
 };
 exports.HMSManageLeave = HMSManageLeave;
 const LeaveButton = props => {
-  // TODO: What if useNavigation context is undefined?
-  const navigation = (0, _native.useNavigation)();
-  const hmsInstance = (0, _hooksUtil.useHMSInstance)();
-  const dispatch = (0, _reactRedux.useDispatch)();
   const leavePopCloseAction = React.useRef(_types.ModalTypes.DEFAULT);
+  const isHLSViewer = (0, _hooksUtil.useIsHLSViewer)();
   const [leavePopVisible, setLeavePopVisible] = React.useState(false);
   const [leaveModalType, setLeaveModalType] = React.useState(_types.ModalTypes.DEFAULT);
   const canEndRoom = (0, _reactRedux.useSelector)(state => {
     var _state$hmsStates$loca;
     return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.permissions) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.endRoom;
   });
+  const {
+    leave
+  } = (0, _hooksUtil.useLeaveMethods)();
 
   /**
    * Opens the Leave Popup Menu
@@ -60,8 +54,8 @@ const LeaveButton = props => {
    * Leave Modal will open after the popup is hidden
    */
   const handleLeavePress = () => {
-    leavePopCloseAction.current = _types.ModalTypes.LEAVE_ROOM;
     setLeavePopVisible(false);
+    leave();
   };
 
   /**
@@ -89,85 +83,34 @@ const LeaveButton = props => {
     setLeaveModalType(leavePopCloseAction.current);
   };
   const dismissModal = () => setLeaveModalType(_types.ModalTypes.DEFAULT);
-  const destroy = () => {
-    hmsInstance.destroy().then(s => {
-      console.log('Destroy Success: ', s);
-      // TODOS:
-      // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
-      //    - Reset Redux States
-      //    - HMSInstance will not be available now
-      //    - When your presses "Re Join" Action button, restart process from root component
-      //    - When your presses "Done" Action button
-      //        - If we have callback fn, call it
-      //        - Otherwise try our best to navigate away from current screen
-      //
-      // - No screen to show
-      //    - No need to reset redux state?
-      //    - HMSInstance will be available till this point
-      //    - If we have callback fn, call it
-      //    - Otherwise try our best to navigate away from current screen
-      //    - When we are navigated away from screen, HMSInstance will be not available
-
-      // dispatch(clearMessageData());
-      // dispatch(clearPeerData());
-      // dispatch(clearHmsReference());
-
-      // if (navigation.canGoBack()) {
-      //   navigation.goBack();
-      // } else {
-      // TODO: remove this later
-      navigation.navigate('QRCodeScreen');
-      dispatch((0, _actions.clearStore)());
-      // }
-    }).catch(e => {
-      console.log(`Destroy HMS instance Error: ${e}`);
-      _reactNativeSimpleToast.default.showWithGravity(`Destroy HMS instance Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
-    });
-  };
-  const onLeavePress = () => {
-    hmsInstance.leave().then(d => {
-      console.log('Leave Success: ', d);
-      destroy();
-    }).catch(e => {
-      console.log(`Leave Room Error: ${e}`);
-      _reactNativeSimpleToast.default.showWithGravity(`Leave Room Error: ${e}`, _reactNativeSimpleToast.default.LONG, _reactNativeSimpleToast.default.TOP);
-    });
-  };
-  const onEndRoomPress = () => {
-    hmsInstance.endRoom('Host ended the room').then(d => {
-      console.log('EndRoom Success: ', d);
-      destroy();
-    }).catch(e => console.log('EndRoom Error: ', e));
-  };
-  const leaveIconDelegate = 'leaveIconDelegate' in props && props.leaveIconDelegate ? props.leaveIconDelegate : /*#__PURE__*/React.createElement(_Icons.LeaveIcon, null);
+  const leaveIconDelegate = 'leaveIconDelegate' in props && props.leaveIconDelegate ? props.leaveIconDelegate : isHLSViewer ? /*#__PURE__*/React.createElement(_Icons.LeaveIcon, {
+    style: {
+      transform: [{
+        rotateZ: '180 deg'
+      }]
+    }
+  }) : /*#__PURE__*/React.createElement(_Icons.EndIcon, null);
   const leaveButtonDelegate = 'leaveButtonDelegate' in props && props.leaveButtonDelegate ? props.leaveButtonDelegate : /*#__PURE__*/React.createElement(_PressableIcon.PressableIcon, null, /*#__PURE__*/React.cloneElement(leaveIconDelegate));
   return /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.cloneElement(leaveButtonDelegate, {
     onPress: handleLeaveButtonPress,
     style: styles.button
-  }), /*#__PURE__*/React.createElement(LeavePopup, {
+  }), /*#__PURE__*/React.createElement(LeaveBottomSheet, {
     isVisible: leavePopVisible,
     onEndSessionPress: handleEndSessionPress,
     onLeavePress: handleLeavePress,
     onPopupDismiss: dismissPopup,
     onPopupHide: handlePopupHide
-  }), /*#__PURE__*/React.createElement(_DefaultModal.DefaultModal, {
-    modalPosiion: "center",
-    modalVisible: leaveModalType === _types.ModalTypes.LEAVE_ROOM,
-    setModalVisible: dismissModal
-  }, /*#__PURE__*/React.createElement(_Modals.LeaveRoomModal, {
-    onSuccess: onLeavePress,
-    cancelModal: dismissModal
-  })), /*#__PURE__*/React.createElement(_DefaultModal.DefaultModal, {
-    modalPosiion: "center",
-    modalVisible: leaveModalType === _types.ModalTypes.END_ROOM,
-    setModalVisible: dismissModal
-  }, /*#__PURE__*/React.createElement(_Modals.EndRoomModal, {
-    onSuccess: onEndRoomPress,
-    cancelModal: dismissModal
+  }), /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet, {
+    dismissModal: dismissModal,
+    isVisible: leaveModalType === _types.ModalTypes.END_ROOM,
+    animationOutTiming: 700
+  }, /*#__PURE__*/React.createElement(_EndRoomModalContent.EndRoomModalContent, {
+    dismissModal: dismissModal
   })));
 };
-const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
-const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
+
+// const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
+// const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
 
 const styles = _reactNative.StyleSheet.create({
   button: {
@@ -175,7 +118,7 @@ const styles = _reactNative.StyleSheet.create({
     borderColor: _theme.COLORS.ALERT.ERROR.DEFAULT
   }
 });
-const LeavePopup = _ref => {
+const LeaveBottomSheet = _ref => {
   let {
     isVisible,
     onPopupDismiss,
@@ -183,104 +126,93 @@ const LeavePopup = _ref => {
     onEndSessionPress,
     onPopupHide
   } = _ref;
-  const safeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const canEndRoom = (0, _reactRedux.useSelector)(state => {
     var _state$hmsStates$loca2;
     return (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 || (_state$hmsStates$loca2 = _state$hmsStates$loca2.role) === null || _state$hmsStates$loca2 === void 0 || (_state$hmsStates$loca2 = _state$hmsStates$loca2.permissions) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.endRoom;
   });
-  return /*#__PURE__*/React.createElement(_reactNativeModal.default, {
+  const hmsRoomStyles = (0, _hooksUtil.useHMSRoomStyleSheet)((theme, typography) => ({
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    },
+    subtext: {
+      color: theme.palette.on_surface_low,
+      fontFamily: `${typography.font_family}-Regular`
+    },
+    endButton: {
+      backgroundColor: theme.palette.alert_error_dim
+    },
+    endText: {
+      color: theme.palette.alert_error_brighter,
+      fontFamily: `${typography.font_family}-SemiBold`
+    },
+    endSubtext: {
+      color: theme.palette.alert_error_bright,
+      fontFamily: `${typography.font_family}-Regular`
+    },
+    endIcon: {
+      tintColor: theme.palette.alert_error_brighter
+    }
+  }));
+  return /*#__PURE__*/React.createElement(_BottomSheet.BottomSheet, {
     isVisible: isVisible,
-    animationIn: 'fadeIn',
-    animationOut: 'fadeOut',
-    backdropColor: _theme.COLORS.BACKGROUND.DIM,
-    backdropOpacity: 0,
-    onBackButtonPress: onPopupDismiss,
-    onBackdropPress: onPopupDismiss,
-    useNativeDriver: true,
+    containerStyle: leavePopupStyles.container,
+    dismissModal: onPopupDismiss,
     onModalHide: onPopupHide,
-    useNativeDriverForBackdrop: true,
-    hideModalContentWhileAnimating: true,
-    style: leavePopupStyles.modal
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [leavePopupStyles.leavePopupContent, {
-      marginTop: safeAreaInsets.top + HEADER_HEIGHT,
-      marginLeft: safeAreaInsets.left + 16 - 1,
-      // LEFT_HEADER_PADDING - HEADER_BORDER_WIDTH,
-      marginRight: safeAreaInsets.right,
-      marginBottom: safeAreaInsets.bottom
-    }]
-  }, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
-    style: leavePopupStyles.leaveButton,
+    animationOutTiming: 700
+  }, /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
+    style: leavePopupStyles.button,
     onPress: onLeavePress
   }, /*#__PURE__*/React.createElement(_Icons.LeaveIcon, {
-    style: leavePopupStyles.leaveButtonIcon
-  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
-    style: leavePopupStyles.leaveButtonText
-  }, "Leave")), canEndRoom ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: leavePopupStyles.divider
-  }), /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
-    style: leavePopupStyles.endRoomButton,
+    style: leavePopupStyles.icon
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: leavePopupStyles.textContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [leavePopupStyles.text, hmsRoomStyles.text]
+  }, "Leave"), /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [leavePopupStyles.subtext, hmsRoomStyles.subtext]
+  }, "Others will continue after you leave. You can join the session again."))), canEndRoom ? /*#__PURE__*/React.createElement(_reactNative.TouchableOpacity, {
+    style: [leavePopupStyles.button, hmsRoomStyles.endButton],
     onPress: onEndSessionPress
-  }, /*#__PURE__*/React.createElement(_Icons.AlertIcon, {
-    style: leavePopupStyles.endRoomIcon
-  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
-    style: leavePopupStyles.endRoomText
-  }, "End Session"))) : null));
+  }, /*#__PURE__*/React.createElement(_Icons.StopIcon, {
+    style: [leavePopupStyles.icon, hmsRoomStyles.endIcon]
+  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: leavePopupStyles.textContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [leavePopupStyles.text, hmsRoomStyles.endText]
+  }, "End Stream"), /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [leavePopupStyles.subtext, hmsRoomStyles.endSubtext]
+  }, "The stream & session will end for everyone. You can't undo this action."))) : null));
 };
 const leavePopupStyles = _reactNative.StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-start'
-  },
-  leavePopupContent: {
-    overflow: 'hidden',
-    width: 243,
-    backgroundColor: _theme.COLORS.SURFACE.DIM,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _theme.COLORS.BORDER.BRIGHT
+  container: {
+    paddingBottom: 0
   },
-  leaveButton: {
+  button: {
     flexDirection: 'row',
-    paddingHorizontal: 8,
-    paddingVertical: 16
+    padding: 24
   },
-  leaveButtonIcon: {
-    width: 20,
-    height: 20,
-    marginHorizontal: 8,
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 16,
     transform: [{
       rotateY: '180deg'
     }]
   },
-  leaveButtonText: {
-    color: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 20
-  },
-  divider: {
-    height: 1,
-    backgroundColor: _theme.COLORS.BORDER.BRIGHT
-  },
-  endRoomButton: {
-    flexDirection: 'row',
-    backgroundColor: _theme.COLORS.ALERT.ERROR.DIM,
-    paddingHorizontal: 8,
-    paddingVertical: 16
+  textContainer: {
+    flex: 1
   },
-  endRoomIcon: {
-    width: 20,
-    height: 20,
-    marginHorizontal: 8
+  text: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15
   },
-  endRoomText: {
-    color: _theme.COLORS.ALERT.ERROR.BRIGHT,
+  subtext: {
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 20
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginTop: 4
   }
 });
 //# sourceMappingURL=HMSManageLeave.js.map