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

package/lib/module/components/HMSPreviewJoinButton.js

@@ -1,66 +1,43 @@
 import * as React from 'react';
-import { ActivityIndicator, StyleSheet, Text, TouchableHighlight } from 'react-native';
-import { useSelector } from 'react-redux';
-import { COLORS } from '../utils/theme';
+import { StyleSheet } from 'react-native';
+import { shallowEqual, useSelector } from 'react-redux';
 import { RadioIcon } from '../Icons';
-import { useShouldGoLive } from '../hooks-util';
+import { useHMSRoomStyle, useShouldGoLive } from '../hooks-util';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
 export const HMSPreviewJoinButton = _ref => {
   let {
     loading,
     onJoin
   } = _ref;
   const userNameInvalid = useSelector(state => state.user.userName.length <= 0);
+  const joinButtonLabels = useSelector(state => {
+    var _layoutConfig$screens;
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const joinLayoutConfig = layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.default) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.elements) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.join_form;
+    return {
+      joinBtnLabel: (joinLayoutConfig === null || joinLayoutConfig === void 0 ? void 0 : joinLayoutConfig.join_btn_label) || 'Join Now',
+      goLiveBtnLabel: (joinLayoutConfig === null || joinLayoutConfig === void 0 ? void 0 : joinLayoutConfig.go_live_btn_label) || 'Go Live'
+    };
+  }, shallowEqual);
   const shouldGoLive = useShouldGoLive();
+  const liveIconStyles = useHMSRoomStyle(theme => ({
+    tintColor: theme.palette.on_primary_low
+  }));
   const disabledJoin = userNameInvalid || loading;
-  return /*#__PURE__*/React.createElement(TouchableHighlight, {
-    underlayColor: COLORS.PRIMARY.DARK,
-    style: [styles.button, disabledJoin ? styles.disabledButton : null],
+  return /*#__PURE__*/React.createElement(HMSPrimaryButton, {
+    loading: loading,
     onPress: onJoin,
-    disabled: disabledJoin
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: 'small',
-    color: COLORS.BASE.WHITE,
-    style: styles.loader
-  }) : null, shouldGoLive ? /*#__PURE__*/React.createElement(RadioIcon, {
-    style: [loading ? styles.hiddenView : null, disabledJoin ? styles.disabledIcon : null]
-  }) : null, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.text, loading ? styles.hiddenView : null, disabledJoin ? styles.disabledText : null]
-  }, shouldGoLive ? 'Go Live' : 'Join Now')));
+    title: shouldGoLive ? joinButtonLabels.goLiveBtnLabel : joinButtonLabels.joinBtnLabel,
+    disabled: disabledJoin,
+    leftComponent: shouldGoLive ? /*#__PURE__*/React.createElement(RadioIcon, {
+      style: disabledJoin ? liveIconStyles : null
+    }) : null,
+    style: styles.button
+  });
 };
 const styles = StyleSheet.create({
   button: {
-    flexDirection: 'row',
-    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'
-  },
-  disabledButton: {
-    backgroundColor: COLORS.PRIMARY.DISABLED
-  },
-  disabledIcon: {
-    tintColor: COLORS.PRIMARY.ON_PRIMARY.LOW
-  },
-  disabledText: {
-    color: COLORS.PRIMARY.ON_PRIMARY.LOW
-  },
-  hiddenView: {
-    opacity: 0
+    marginLeft: 16
   }
 });
 //# sourceMappingURL=HMSPreviewJoinButton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","ActivityIndicator","StyleSheet","Text","TouchableHighlight","useSelector","COLORS","RadioIcon","useShouldGoLive","HMSPreviewJoinButton","_ref","loading","onJoin","userNameInvalid","state","user","userName","length","shouldGoLive","disabledJoin","createElement","underlayColor","PRIMARY","DARK","style","styles","button","disabledButton","onPress","disabled","Fragment","size","color","BASE","WHITE","loader","hiddenView","disabledIcon","text","disabledText","create","flexDirection","paddingHorizontal","paddingVertical","borderRadius","backgroundColor","DEFAULT","marginLeft","alignItems","justifyContent","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing","marginHorizontal","position","DISABLED","tintColor","ON_PRIMARY","LOW","opacity"],"sourceRoot":"../../../src","sources":["components/HMSPreviewJoinButton.tsx"],"mappings":"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"}
+{"version":3,"names":["React","StyleSheet","shallowEqual","useSelector","RadioIcon","useHMSRoomStyle","useShouldGoLive","HMSPrimaryButton","HMSPreviewJoinButton","_ref","loading","onJoin","userNameInvalid","state","user","userName","length","joinButtonLabels","_layoutConfig$screens","layoutConfig","hmsStates","joinLayoutConfig","screens","preview","default","elements","join_form","joinBtnLabel","join_btn_label","goLiveBtnLabel","go_live_btn_label","shouldGoLive","liveIconStyles","theme","tintColor","palette","on_primary_low","disabledJoin","createElement","onPress","title","disabled","leftComponent","style","styles","button","create","marginLeft"],"sourceRoot":"../../../src","sources":["components/HMSPreviewJoinButton.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,YAAY,EAAEC,WAAW,QAAQ,aAAa;AAGvD,SAASC,SAAS,QAAQ,UAAU;AACpC,SAASC,eAAe,EAAEC,eAAe,QAAQ,eAAe;AAChE,SAASC,gBAAgB,QAAQ,oBAAoB;AAOrD,OAAO,MAAMC,oBAAyD,GAAGC,IAAA,IAGnE;EAAA,IAHoE;IACxEC,OAAO;IACPC;EACF,CAAC,GAAAF,IAAA;EACC,MAAMG,eAAe,GAAGT,WAAW,CAChCU,KAAgB,IAAKA,KAAK,CAACC,IAAI,CAACC,QAAQ,CAACC,MAAM,IAAI,CACtD,CAAC;EAED,MAAMC,gBAAgB,GAAGd,WAAW,CAAEU,KAAgB,IAAK;IAAA,IAAAK,qBAAA;IACzD,MAAMC,YAAY,GAAGN,KAAK,CAACO,SAAS,CAACD,YAAY;IACjD,MAAME,gBAAgB,GACpBF,YAAY,aAAZA,YAAY,gBAAAD,qBAAA,GAAZC,YAAY,CAAEG,OAAO,cAAAJ,qBAAA,gBAAAA,qBAAA,GAArBA,qBAAA,CAAuBK,OAAO,cAAAL,qBAAA,gBAAAA,qBAAA,GAA9BA,qBAAA,CAAgCM,OAAO,cAAAN,qBAAA,gBAAAA,qBAAA,GAAvCA,qBAAA,CAAyCO,QAAQ,cAAAP,qBAAA,uBAAjDA,qBAAA,CAAmDQ,SAAS;IAE9D,OAAO;MACLC,YAAY,EAAE,CAAAN,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEO,cAAc,KAAI,UAAU;MAC5DC,cAAc,EAAE,CAAAR,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAES,iBAAiB,KAAI;IACzD,CAAC;EACH,CAAC,EAAE5B,YAAY,CAAC;EAEhB,MAAM6B,YAAY,GAAGzB,eAAe,CAAC,CAAC;EAEtC,MAAM0B,cAAc,GAAG3B,eAAe,CAAE4B,KAAK,KAAM;IACjDC,SAAS,EAAED,KAAK,CAACE,OAAO,CAACC;EAC3B,CAAC,CAAC,CAAC;EAEH,MAAMC,YAAY,GAAGzB,eAAe,IAAIF,OAAO;EAE/C,oBACEV,KAAA,CAAAsC,aAAA,CAAC/B,gBAAgB;IACfG,OAAO,EAAEA,OAAQ;IACjB6B,OAAO,EAAE5B,MAAO;IAChB6B,KAAK,EACHT,YAAY,GACRd,gBAAgB,CAACY,cAAc,GAC/BZ,gBAAgB,CAACU,YACtB;IACDc,QAAQ,EAAEJ,YAAa;IACvBK,aAAa,EACXX,YAAY,gBACV/B,KAAA,CAAAsC,aAAA,CAAClC,SAAS;MAACuC,KAAK,EAAEN,YAAY,GAAGL,cAAc,GAAG;IAAK,CAAE,CAAC,GACxD,IACL;IACDW,KAAK,EAAEC,MAAM,CAACC;EAAO,CACtB,CAAC;AAEN,CAAC;AAED,MAAMD,MAAM,GAAG3C,UAAU,CAAC6C,MAAM,CAAC;EAC/BD,MAAM,EAAE;IACNE,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPreviewNetworkQuality.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 import { NetworkQualityIcon } from '../Icons';
-import { COLORS } from '..//utils/theme';
-import { useHMSInstance } from '../hooks-util';
+import { hexToRgbA } from '../utils/theme';
+import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
 export const HMSPreviewNetworkQuality = () => {
   const hmsInstance = useHMSInstance();
   const localPeerNetworkQuality = useSelector(state => {
@@ -14,8 +14,11 @@ export const HMSPreviewNetworkQuality = () => {
     hmsInstance.enableNetworkQualityUpdates();
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, []);
+  const containerStyles = useHMSRoomStyle(theme => ({
+    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.8)
+  }));
   return /*#__PURE__*/React.createElement(View, {
-    style: styles.container
+    style: [styles.container, containerStyles]
   }, /*#__PURE__*/React.createElement(NetworkQualityIcon, {
     quality: localPeerNetworkQuality
   }));
@@ -27,7 +30,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    backgroundColor: COLORS.BACKGROUND.DIM_80,
     alignSelf: 'flex-start'
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","StyleSheet","useSelector","NetworkQualityIcon","COLORS","useHMSInstance","HMSPreviewNetworkQuality","hmsInstance","localPeerNetworkQuality","state","_state$hmsStates$loca","hmsStates","localPeer","networkQuality","downlinkQuality","useEffect","enableNetworkQualityUpdates","disableNetworkQualityUpdates","createElement","style","styles","container","quality","create","marginLeft","marginBottom","borderRadius","paddingVertical","paddingHorizontal","backgroundColor","BACKGROUND","DIM_80","alignSelf"],"sourceRoot":"../../../src","sources":["components/HMSPreviewNetworkQuality.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,MAAM,QAAQ,iBAAiB;AAExC,SAASC,cAAc,QAAQ,eAAe;AAE9C,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EAC5C,MAAMC,WAAW,GAAGF,cAAc,CAAC,CAAC;EACpC,MAAMG,uBAAuB,GAAGN,WAAW,CACxCO,KAAgB;IAAA,IAAAC,qBAAA;IAAA,QAAAA,qBAAA,GACfD,KAAK,CAACE,SAAS,CAACC,SAAS,cAAAF,qBAAA,gBAAAA,qBAAA,GAAzBA,qBAAA,CAA2BG,cAAc,cAAAH,qBAAA,uBAAzCA,qBAAA,CAA2CI,eAAe;EAAA,CAC9D,CAAC;EAEDf,KAAK,CAACgB,SAAS,CAAC,MAAM;IACpBR,WAAW,CAACS,2BAA2B,CAAC,CAAC;IAEzC,OAAO,MAAMT,WAAW,CAACU,4BAA4B,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;EAEN,oBACElB,KAAA,CAAAmB,aAAA,CAAClB,IAAI;IAACmB,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC5BtB,KAAA,CAAAmB,aAAA,CAACf,kBAAkB;IAACmB,OAAO,EAAEd;EAAwB,CAAE,CACnD,CAAC;AAEX,CAAC;AAED,MAAMY,MAAM,GAAGnB,UAAU,CAACsB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,UAAU,EAAE,CAAC;IACbC,YAAY,EAAE,CAAC;IACfC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,CAAC;IACpBC,eAAe,EAAEzB,MAAM,CAAC0B,UAAU,CAACC,MAAM;IACzCC,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","View","StyleSheet","useSelector","NetworkQualityIcon","hexToRgbA","useHMSInstance","useHMSRoomStyle","HMSPreviewNetworkQuality","hmsInstance","localPeerNetworkQuality","state","_state$hmsStates$loca","hmsStates","localPeer","networkQuality","downlinkQuality","useEffect","enableNetworkQualityUpdates","disableNetworkQualityUpdates","containerStyles","theme","backgroundColor","palette","background_dim","createElement","style","styles","container","quality","create","marginLeft","marginBottom","borderRadius","paddingVertical","paddingHorizontal","alignSelf"],"sourceRoot":"../../../src","sources":["components/HMSPreviewNetworkQuality.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,kBAAkB,QAAQ,UAAU;AAC7C,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAASC,cAAc,EAAEC,eAAe,QAAQ,eAAe;AAE/D,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EAC5C,MAAMC,WAAW,GAAGH,cAAc,CAAC,CAAC;EACpC,MAAMI,uBAAuB,GAAGP,WAAW,CACxCQ,KAAgB;IAAA,IAAAC,qBAAA;IAAA,QAAAA,qBAAA,GACfD,KAAK,CAACE,SAAS,CAACC,SAAS,cAAAF,qBAAA,gBAAAA,qBAAA,GAAzBA,qBAAA,CAA2BG,cAAc,cAAAH,qBAAA,uBAAzCA,qBAAA,CAA2CI,eAAe;EAAA,CAC9D,CAAC;EAEDhB,KAAK,CAACiB,SAAS,CAAC,MAAM;IACpBR,WAAW,CAACS,2BAA2B,CAAC,CAAC;IAEzC,OAAO,MAAMT,WAAW,CAACU,4BAA4B,CAAC,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,eAAe,GAAGb,eAAe,CAAEc,KAAK,KAAM;IAClDC,eAAe,EAAEjB,SAAS,CAACgB,KAAK,CAACE,OAAO,CAACC,cAAc,EAAE,GAAG;EAC9D,CAAC,CAAC,CAAC;EAEH,oBACExB,KAAA,CAAAyB,aAAA,CAACxB,IAAI;IAACyB,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAER,eAAe;EAAE,gBAC/CpB,KAAA,CAAAyB,aAAA,CAACrB,kBAAkB;IAACyB,OAAO,EAAEnB;EAAwB,CAAE,CACnD,CAAC;AAEX,CAAC;AAED,MAAMiB,MAAM,GAAGzB,UAAU,CAAC4B,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,UAAU,EAAE,CAAC;IACbC,YAAY,EAAE,CAAC;IACfC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,CAAC;IACpBC,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPreviewPeersList.js

@@ -1,30 +1,41 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { COLORS } from '../utils/theme';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 export const HMSPreviewPeersList = () => {
-  const previewPeersList = useSelector(state => state.hmsStates.previewPeersList);
+  const previewPeerCount = useSelector(state => {
+    var _state$hmsStates$room;
+    return (_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.peerCount;
+  });
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.border_default
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    }
+  }));
+  if (typeof previewPeerCount !== 'number') {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(View, {
-    style: styles.container
+    style: [styles.container, hmsRoomStyles.container]
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.text, styles.textSpacer]
-  }, previewPeersList.length === 0 ? 'You are the first to join' : `${previewPeersList.length} ${previewPeersList.length > 1 ? 'others' : 'other'} in session`));
+    style: [styles.text, hmsRoomStyles.text, styles.textSpacer]
+  }, previewPeerCount <= 0 ? 'You are the first to join' : `${previewPeerCount} ${previewPeerCount > 1 ? 'others' : 'other'} in session`));
 };
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
     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: {

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","View","useSelector","COLORS","HMSPreviewPeersList","previewPeersList","state","hmsStates","createElement","style","styles","container","text","textSpacer","length","create","alignItems","backgroundColor","SURFACE","DEFAULT","paddingVertical","paddingHorizontal","borderRadius","borderColor","BORDER","borderWidth","color","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","marginHorizontal"],"sourceRoot":"../../../src","sources":["components/HMSPreviewPeersList.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,MAAM,QAAQ,gBAAgB;AAKvC,OAAO,MAAMC,mBAAuD,GAAGA,CAAA,KAAM;EAC3E,MAAMC,gBAAgB,GAAGH,WAAW,CACjCI,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACF,gBACxC,CAAC;EAED,oBACEP,KAAA,CAAAU,aAAA,CAACP,IAAI;IAACQ,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC5Bb,KAAA,CAAAU,aAAA,CAACR,IAAI;IAACS,KAAK,EAAE,CAACC,MAAM,CAACE,IAAI,EAAEF,MAAM,CAACG,UAAU;EAAE,GAC3CR,gBAAgB,CAACS,MAAM,KAAK,CAAC,GAC1B,2BAA2B,GAC1B,GAAET,gBAAgB,CAACS,MAAO,IACzBT,gBAAgB,CAACS,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,OAC1C,aACD,CACF,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAGX,UAAU,CAACgB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEd,MAAM,CAACe,OAAO,CAACC,OAAO;IACvCC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAEpB,MAAM,CAACqB,MAAM,CAACL,OAAO;IAClCM,WAAW,EAAE;EACf,CAAC;EACDb,IAAI,EAAE;IACJc,KAAK,EAAEvB,MAAM,CAACe,OAAO,CAACS,UAAU,CAACC,IAAI;IACrCC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE;EACd,CAAC;EACDnB,UAAU,EAAE;IACVoB,gBAAgB,EAAE;EACpB;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","StyleSheet","Text","View","useSelector","useHMSRoomStyleSheet","HMSPreviewPeersList","previewPeerCount","state","_state$hmsStates$room","hmsStates","room","peerCount","hmsRoomStyles","theme","typography","container","backgroundColor","palette","surface_default","borderColor","border_default","text","color","on_surface_high","fontFamily","font_family","createElement","style","styles","textSpacer","create","alignItems","paddingVertical","paddingHorizontal","borderRadius","borderWidth","fontSize","lineHeight","marginHorizontal"],"sourceRoot":"../../../src","sources":["components/HMSPreviewPeersList.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,WAAW,QAAQ,aAAa;AAGzC,SAASC,oBAAoB,QAAQ,eAAe;AAIpD,OAAO,MAAMC,mBAAuD,GAAGA,CAAA,KAAM;EAC3E,MAAMC,gBAAgB,GAAGH,WAAW,CACjCI,KAAgB;IAAA,IAAAC,qBAAA;IAAA,QAAAA,qBAAA,GAAKD,KAAK,CAACE,SAAS,CAACC,IAAI,cAAAF,qBAAA,uBAApBA,qBAAA,CAAsBG,SAAS;EAAA,CACvD,CAAC;EAED,MAAMC,aAAa,GAAGR,oBAAoB,CAAC,CAACS,KAAK,EAAEC,UAAU,MAAM;IACjEC,SAAS,EAAE;MACTC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC,eAAe;MAC9CC,WAAW,EAAEN,KAAK,CAACI,OAAO,CAACG;IAC7B,CAAC;IACDC,IAAI,EAAE;MACJC,KAAK,EAAET,KAAK,CAACI,OAAO,CAACM,eAAe;MACpCC,UAAU,EAAG,GAAEV,UAAU,CAACW,WAAY;IACxC;EACF,CAAC,CAAC,CAAC;EAEH,IAAI,OAAOnB,gBAAgB,KAAK,QAAQ,EAAE;IACxC,OAAO,IAAI;EACb;EAEA,oBACEP,KAAA,CAAA2B,aAAA,CAACxB,IAAI;IAACyB,KAAK,EAAE,CAACC,MAAM,CAACb,SAAS,EAAEH,aAAa,CAACG,SAAS;EAAE,gBACvDhB,KAAA,CAAA2B,aAAA,CAACzB,IAAI;IAAC0B,KAAK,EAAE,CAACC,MAAM,CAACP,IAAI,EAAET,aAAa,CAACS,IAAI,EAAEO,MAAM,CAACC,UAAU;EAAE,GAC/DvB,gBAAgB,IAAI,CAAC,GAClB,2BAA2B,GAC1B,GAAEA,gBAAiB,IAClBA,gBAAgB,GAAG,CAAC,GAAG,QAAQ,GAAG,OACnC,aACD,CACF,CAAC;AAEX,CAAC;AAED,MAAMsB,MAAM,GAAG5B,UAAU,CAAC8B,MAAM,CAAC;EAC/Bf,SAAS,EAAE;IACTgB,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE;EACf,CAAC;EACDd,IAAI,EAAE;IACJe,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd,CAAC;EACDR,UAAU,EAAE;IACVS,gBAAgB,EAAE;EACpB;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPreviewSubtitle.js

@@ -1,43 +1,56 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 import { StyleSheet, Text } from 'react-native';
-import { COLORS } from '../utils/theme';
 import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
+import { useHMSRoomStyle } from '../hooks-util';
 export const HMSPreviewSubtitle = _ref => {
   let {
     subtitle
   } = _ref;
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
+  const hmsRoomPreviewSubtitle = useSelector(state => {
+    var _layoutConfig$screens;
+    const layoutConfig = state.hmsStates.layoutConfig;
+    return layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.default) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.elements) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview_header) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.sub_title;
+  });
+  const titleStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_medium,
+    fontFamily: `${typography.font_family}-Regular`
+  }));
+  const textStyles = [styles.title, titleStyles];
   if (subtitle) {
     return /*#__PURE__*/React.createElement(Text, {
-      style: styles.title
+      style: textStyles
     }, subtitle);
   }
+  if (hmsRoomPreviewSubtitle) {
+    return /*#__PURE__*/React.createElement(Text, {
+      style: textStyles
+    }, hmsRoomPreviewSubtitle);
+  }
   if (canPublishAudio && canPublishVideo) {
     return /*#__PURE__*/React.createElement(Text, {
-      style: styles.title
+      style: textStyles
     }, "Setup your audio and video before joining");
   }
   if (canPublishAudio) {
     return /*#__PURE__*/React.createElement(Text, {
-      style: styles.title
+      style: textStyles
     }, "Setup your audio before joining");
   }
   if (canPublishVideo) {
     return /*#__PURE__*/React.createElement(Text, {
-      style: styles.title
+      style: textStyles
     }, "Setup your video before joining");
   }
   return /*#__PURE__*/React.createElement(Text, {
-    style: styles.title
+    style: textStyles
   }, "Enter your name before joining");
 };
 const styles = StyleSheet.create({
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.MEDIUM,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
     lineHeight: 20,
     marginTop: 4,
     textAlign: 'center'

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","COLORS","useCanPublishAudio","useCanPublishVideo","HMSPreviewSubtitle","_ref","subtitle","canPublishAudio","canPublishVideo","createElement","style","styles","title","create","color","SURFACE","ON_SURFACE","MEDIUM","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;AACvC,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AAMrE,OAAO,MAAMC,kBAAqD,GAAGC,IAAA,IAE/D;EAAA,IAFgE;IACpEC;EACF,CAAC,GAAAD,IAAA;EACC,MAAME,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAC5C,MAAMM,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAE5C,IAAIG,QAAQ,EAAE;IACZ,oBAAOR,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACU,KAAK,EAAEC,MAAM,CAACC;IAAM,GAAEN,QAAe,CAAC;EACrD;EAEA,IAAIC,eAAe,IAAIC,eAAe,EAAE;IACtC,oBACEV,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACU,KAAK,EAAEC,MAAM,CAACC;IAAM,GAAC,2CAErB,CAAC;EAEX;EAEA,IAAIL,eAAe,EAAE;IACnB,oBAAOT,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACU,KAAK,EAAEC,MAAM,CAACC;IAAM,GAAC,iCAAqC,CAAC;EAC1E;EAEA,IAAIJ,eAAe,EAAE;IACnB,oBAAOV,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACU,KAAK,EAAEC,MAAM,CAACC;IAAM,GAAC,iCAAqC,CAAC;EAC1E;EAEA,oBAAOd,KAAA,CAAAW,aAAA,CAACT,IAAI;IAACU,KAAK,EAAEC,MAAM,CAACC;EAAM,GAAC,gCAAoC,CAAC;AACzE,CAAC;AAED,MAAMD,MAAM,GAAGZ,UAAU,CAACc,MAAM,CAAC;EAC/BD,KAAK,EAAE;IACLE,KAAK,EAAEb,MAAM,CAACc,OAAO,CAACC,UAAU,CAACC,MAAM;IACvCC,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"}
+{"version":3,"names":["React","useSelector","StyleSheet","Text","useCanPublishAudio","useCanPublishVideo","useHMSRoomStyle","HMSPreviewSubtitle","_ref","subtitle","canPublishAudio","canPublishVideo","hmsRoomPreviewSubtitle","state","_layoutConfig$screens","layoutConfig","hmsStates","screens","preview","default","elements","preview_header","sub_title","titleStyles","theme","typography","color","palette","on_surface_medium","fontFamily","font_family","textStyles","styles","title","createElement","style","create","fontSize","lineHeight","marginTop","textAlign"],"sourceRoot":"../../../src","sources":["components/HMSPreviewSubtitle.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAG/C,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,cAAc;AACrE,SAASC,eAAe,QAAQ,eAAe;AAO/C,OAAO,MAAMC,kBAAqD,GAAGC,IAAA,IAE/D;EAAA,IAFgE;IACpEC;EACF,CAAC,GAAAD,IAAA;EACC,MAAME,eAAe,GAAGN,kBAAkB,CAAC,CAAC;EAC5C,MAAMO,eAAe,GAAGN,kBAAkB,CAAC,CAAC;EAE5C,MAAMO,sBAAsB,GAAGX,WAAW,CAAEY,KAAgB,IAAK;IAAA,IAAAC,qBAAA;IAC/D,MAAMC,YAAY,GAAGF,KAAK,CAACG,SAAS,CAACD,YAAY;IAEjD,OAAOA,YAAY,aAAZA,YAAY,gBAAAD,qBAAA,GAAZC,YAAY,CAAEE,OAAO,cAAAH,qBAAA,gBAAAA,qBAAA,GAArBA,qBAAA,CAAuBI,OAAO,cAAAJ,qBAAA,gBAAAA,qBAAA,GAA9BA,qBAAA,CAAgCK,OAAO,cAAAL,qBAAA,gBAAAA,qBAAA,GAAvCA,qBAAA,CAAyCM,QAAQ,cAAAN,qBAAA,gBAAAA,qBAAA,GAAjDA,qBAAA,CAAmDO,cAAc,cAAAP,qBAAA,uBAAjEA,qBAAA,CACHQ,SAAS;EACf,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGjB,eAAe,CAAC,CAACkB,KAAK,EAAEC,UAAU,MAAM;IAC1DC,KAAK,EAAEF,KAAK,CAACG,OAAO,CAACC,iBAAiB;IACtCC,UAAU,EAAG,GAAEJ,UAAU,CAACK,WAAY;EACxC,CAAC,CAAC,CAAC;EAEH,MAAMC,UAAgC,GAAG,CAACC,MAAM,CAACC,KAAK,EAAEV,WAAW,CAAC;EAEpE,IAAId,QAAQ,EAAE;IACZ,oBAAOT,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;MAACgC,KAAK,EAAEJ;IAAW,GAAEtB,QAAe,CAAC;EACnD;EAEA,IAAIG,sBAAsB,EAAE;IAC1B,oBAAOZ,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;MAACgC,KAAK,EAAEJ;IAAW,GAAEnB,sBAA6B,CAAC;EACjE;EAEA,IAAIF,eAAe,IAAIC,eAAe,EAAE;IACtC,oBACEX,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;MAACgC,KAAK,EAAEJ;IAAW,GAAC,2CAA+C,CAAC;EAE7E;EAEA,IAAIrB,eAAe,EAAE;IACnB,oBAAOV,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;MAACgC,KAAK,EAAEJ;IAAW,GAAC,iCAAqC,CAAC;EACxE;EAEA,IAAIpB,eAAe,EAAE;IACnB,oBAAOX,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;MAACgC,KAAK,EAAEJ;IAAW,GAAC,iCAAqC,CAAC;EACxE;EAEA,oBAAO/B,KAAA,CAAAkC,aAAA,CAAC/B,IAAI;IAACgC,KAAK,EAAEJ;EAAW,GAAC,gCAAoC,CAAC;AACvE,CAAC;AAED,MAAMC,MAAM,GAAG9B,UAAU,CAACkC,MAAM,CAAC;EAC/BH,KAAK,EAAE;IACLI,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE,CAAC;IACZC,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPreviewTile.js

@@ -5,6 +5,7 @@ import { PersonIcon } from '../Icons';
 import { getInitials } from '../utils/functions';
 import { COLORS } from '../utils/theme';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 export const HMSPreviewTile = () => {
   const isLocalVideoMuted = useSelector(state => state.hmsStates.isLocalVideoMuted);
   const localVideoTrackId = useSelector(state => {
@@ -12,23 +13,34 @@ export const HMSPreviewTile = () => {
     return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.videoTrack) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.trackId;
   });
   const userName = useSelector(state => state.user.userName);
+  const roomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.background_dim
+    },
+    avatar: {
+      backgroundColor: COLORS.EXTENDED.PURPLE
+    },
+    avatarText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    }
+  }));
   return /*#__PURE__*/React.createElement(View, {
-    style: styles.modalContainer
+    style: [styles.modalContainer, roomStyles.container]
   }, isLocalVideoMuted || !localVideoTrackId ? /*#__PURE__*/React.createElement(View, {
     style: styles.avatarContainer
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.avatar
+    style: [styles.avatar, roomStyles.avatar]
   }, userName.length === 0 ? /*#__PURE__*/React.createElement(PersonIcon, {
     style: styles.avatarIcon
   }) : /*#__PURE__*/React.createElement(Text, {
-    style: styles.avatarText
+    style: [styles.avatarText, roomStyles.avatarText]
   }, getInitials(userName)))) : /*#__PURE__*/React.createElement(HMSLocalVideoView, null));
 };
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
     overflow: 'hidden'
   },
   hmsView: {
@@ -42,7 +54,6 @@ const styles = StyleSheet.create({
   avatar: {
     width: 88,
     aspectRatio: 1,
-    backgroundColor: COLORS.EXTENDED.PURPLE,
     borderRadius: 44,
     justifyContent: 'center',
     alignItems: 'center'
@@ -52,10 +63,7 @@ const styles = StyleSheet.create({
     height: 40
   },
   avatarText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 34,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 40,
     letterSpacing: 0.25
   }

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSelector","StyleSheet","Text","View","PersonIcon","getInitials","COLORS","HMSLocalVideoView","HMSPreviewTile","isLocalVideoMuted","state","hmsStates","localVideoTrackId","_state$hmsStates$loca","localPeer","videoTrack","trackId","userName","user","createElement","style","styles","modalContainer","avatarContainer","avatar","length","avatarIcon","avatarText","create","flex","position","backgroundColor","BACKGROUND","DIM","overflow","hmsView","alignItems","justifyContent","width","aspectRatio","EXTENDED","PURPLE","borderRadius","height","color","SURFACE","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing"],"sourceRoot":"../../../src","sources":["components/HMSPreviewTile.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAErD,SAASC,UAAU,QAAQ,UAAU;AAErC,SAASC,WAAW,QAAQ,oBAAoB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,iBAAiB,QAAQ,qBAAqB;AAEvD,OAAO,MAAMC,cAAwB,GAAGA,CAAA,KAAM;EAC5C,MAAMC,iBAAiB,GAAGT,WAAW,CAClCU,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACF,iBACxC,CAAC;EACD,MAAMG,iBAAiB,GAAGZ,WAAW,CAClCU,KAAgB;IAAA,IAAAG,qBAAA;IAAA,QAAAA,qBAAA,GAAKH,KAAK,CAACC,SAAS,CAACG,SAAS,cAAAD,qBAAA,gBAAAA,qBAAA,GAAzBA,qBAAA,CAA2BE,UAAU,cAAAF,qBAAA,uBAArCA,qBAAA,CAAuCG,OAAO;EAAA,CACtE,CAAC;EACD,MAAMC,QAAQ,GAAGjB,WAAW,CAAEU,KAAgB,IAAKA,KAAK,CAACQ,IAAI,CAACD,QAAQ,CAAC;EAEvE,oBACElB,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAEC,MAAM,CAACC;EAAe,GAChCb,iBAAiB,IAAI,CAACG,iBAAiB,gBACtCb,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAEC,MAAM,CAACE;EAAgB,gBAClCxB,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAEC,MAAM,CAACG;EAAO,GACxBP,QAAQ,CAACQ,MAAM,KAAK,CAAC,gBACpB1B,KAAA,CAAAoB,aAAA,CAACf,UAAU;IAACgB,KAAK,EAAEC,MAAM,CAACK;EAAW,CAAE,CAAC,gBAExC3B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACkB,KAAK,EAAEC,MAAM,CAACM;EAAW,GAAEtB,WAAW,CAACY,QAAQ,CAAQ,CAE3D,CACF,CAAC,gBAEPlB,KAAA,CAAAoB,aAAA,CAACZ,iBAAiB,MAAE,CAElB,CAAC;AAEX,CAAC;AAED,MAAMc,MAAM,GAAGpB,UAAU,CAAC2B,MAAM,CAAC;EAC/BN,cAAc,EAAE;IACdO,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAE,UAAU;IACpBC,eAAe,EAAEzB,MAAM,CAAC0B,UAAU,CAACC,GAAG;IACtCC,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPN,IAAI,EAAE;EACR,CAAC;EACDN,eAAe,EAAE;IACfM,IAAI,EAAE,CAAC;IACPO,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDb,MAAM,EAAE;IACNc,KAAK,EAAE,EAAE;IACTC,WAAW,EAAE,CAAC;IACdR,eAAe,EAAEzB,MAAM,CAACkC,QAAQ,CAACC,MAAM;IACvCC,YAAY,EAAE,EAAE;IAChBL,cAAc,EAAE,QAAQ;IACxBD,UAAU,EAAE;EACd,CAAC;EACDV,UAAU,EAAE;IACVY,KAAK,EAAE,EAAE;IACTK,MAAM,EAAE;EACV,CAAC;EACDhB,UAAU,EAAE;IACViB,KAAK,EAAEtC,MAAM,CAACuC,OAAO,CAACC,UAAU,CAACC,IAAI;IACrCC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useSelector","StyleSheet","Text","View","PersonIcon","getInitials","COLORS","HMSLocalVideoView","useHMSRoomStyleSheet","HMSPreviewTile","isLocalVideoMuted","state","hmsStates","localVideoTrackId","_state$hmsStates$loca","localPeer","videoTrack","trackId","userName","user","roomStyles","theme","typography","container","backgroundColor","palette","background_dim","avatar","EXTENDED","PURPLE","avatarText","color","on_surface_high","fontFamily","font_family","createElement","style","styles","modalContainer","avatarContainer","length","avatarIcon","create","flex","position","overflow","hmsView","alignItems","justifyContent","width","aspectRatio","borderRadius","height","fontSize","lineHeight","letterSpacing"],"sourceRoot":"../../../src","sources":["components/HMSPreviewTile.tsx"],"mappings":"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"}

package/lib/module/components/HMSPreviewTitle.js

@@ -1,20 +1,28 @@
 import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { COLORS } from '../utils/theme';
+import { useSelector } from 'react-redux';
+import { useHMSRoomStyle } from '../hooks-util';
 export const HMSPreviewTitle = _ref => {
   let {
     title = 'Get Started'
   } = _ref;
+  const hmsRoomPreviewTitle = useSelector(state => {
+    var _layoutConfig$screens;
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const previewTitle = layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.default) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.elements) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview_header) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.title;
+    return previewTitle || title;
+  });
+  const titleStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_high,
+    fontFamily: `${typography.font_family}-SemiBold`
+  }));
   return /*#__PURE__*/React.createElement(Text, {
-    style: styles.title
-  }, title);
+    style: [styles.title, titleStyles]
+  }, hmsRoomPreviewTitle);
 };
 const styles = StyleSheet.create({
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 24,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 32,
     textAlign: 'center'
   }

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","COLORS","HMSPreviewTitle","_ref","title","createElement","style","styles","create","color","SURFACE","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","textAlign"],"sourceRoot":"../../../src","sources":["components/HMSPreviewTitle.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SAASC,MAAM,QAAQ,gBAAgB;AAMvC,OAAO,MAAMC,eAA+C,GAAGC,IAAA,IAEzD;EAAA,IAF0D;IAC9DC,KAAK,GAAG;EACV,CAAC,GAAAD,IAAA;EACC,oBAAOL,KAAA,CAAAO,aAAA,CAACL,IAAI;IAACM,KAAK,EAAEC,MAAM,CAACH;EAAM,GAAEA,KAAY,CAAC;AAClD,CAAC;AAED,MAAMG,MAAM,GAAGR,UAAU,CAACS,MAAM,CAAC;EAC/BJ,KAAK,EAAE;IACLK,KAAK,EAAER,MAAM,CAACS,OAAO,CAACC,UAAU,CAACC,IAAI;IACrCC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","StyleSheet","Text","useSelector","useHMSRoomStyle","HMSPreviewTitle","_ref","title","hmsRoomPreviewTitle","state","_layoutConfig$screens","layoutConfig","hmsStates","previewTitle","screens","preview","default","elements","preview_header","titleStyles","theme","typography","color","palette","on_surface_high","fontFamily","font_family","createElement","style","styles","create","fontSize","lineHeight","textAlign"],"sourceRoot":"../../../src","sources":["components/HMSPreviewTitle.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,eAAe,QAAQ,eAAe;AAO/C,OAAO,MAAMC,eAA+C,GAAGC,IAAA,IAEzD;EAAA,IAF0D;IAC9DC,KAAK,GAAG;EACV,CAAC,GAAAD,IAAA;EACC,MAAME,mBAAmB,GAAGL,WAAW,CAAEM,KAAgB,IAAK;IAAA,IAAAC,qBAAA;IAC5D,MAAMC,YAAY,GAAGF,KAAK,CAACG,SAAS,CAACD,YAAY;IAEjD,MAAME,YAAY,GAChBF,YAAY,aAAZA,YAAY,gBAAAD,qBAAA,GAAZC,YAAY,CAAEG,OAAO,cAAAJ,qBAAA,gBAAAA,qBAAA,GAArBA,qBAAA,CAAuBK,OAAO,cAAAL,qBAAA,gBAAAA,qBAAA,GAA9BA,qBAAA,CAAgCM,OAAO,cAAAN,qBAAA,gBAAAA,qBAAA,GAAvCA,qBAAA,CAAyCO,QAAQ,cAAAP,qBAAA,gBAAAA,qBAAA,GAAjDA,qBAAA,CAAmDQ,cAAc,cAAAR,qBAAA,uBAAjEA,qBAAA,CAAmEH,KAAK;IAE1E,OAAOM,YAAY,IAAIN,KAAK;EAC9B,CAAC,CAAC;EAEF,MAAMY,WAAW,GAAGf,eAAe,CAAC,CAACgB,KAAK,EAAEC,UAAU,MAAM;IAC1DC,KAAK,EAAEF,KAAK,CAACG,OAAO,CAACC,eAAe;IACpCC,UAAU,EAAG,GAAEJ,UAAU,CAACK,WAAY;EACxC,CAAC,CAAC,CAAC;EAEH,oBAAO1B,KAAA,CAAA2B,aAAA,CAACzB,IAAI;IAAC0B,KAAK,EAAE,CAACC,MAAM,CAACtB,KAAK,EAAEY,WAAW;EAAE,GAAEX,mBAA0B,CAAC;AAC/E,CAAC;AAED,MAAMqB,MAAM,GAAG5B,UAAU,CAAC6B,MAAM,CAAC;EAC/BvB,KAAK,EAAE;IACLwB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPrimaryButton.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSBaseButton } from './HMSBaseButton';
+export const HMSPrimaryButton = _ref => {
+  let {
+    title,
+    loading,
+    onPress,
+    style,
+    disabled,
+    leftComponent
+  } = _ref;
+  const {
+    primary_dim: primaryDarkColor,
+    on_primary_high: onPrimaryHighColor
+  } = useHMSRoomColorPalette();
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.primary_default
+    },
+    disabledButton: {
+      backgroundColor: theme.palette.primary_disabled
+    },
+    buttonText: {
+      color: theme.palette.on_primary_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    },
+    disabledText: {
+      color: theme.palette.on_primary_low
+    }
+  }));
+  return /*#__PURE__*/React.createElement(HMSBaseButton, {
+    loaderColor: onPrimaryHighColor,
+    loading: loading,
+    onPress: onPress,
+    title: title,
+    underlayColor: primaryDarkColor,
+    disabled: disabled,
+    leftComponent: leftComponent,
+    style: [hmsRoomStyles.button, disabled ? hmsRoomStyles.disabledButton : null, style],
+    textStyle: [hmsRoomStyles.buttonText, disabled ? hmsRoomStyles.disabledText : null]
+  });
+};
+//# sourceMappingURL=HMSPrimaryButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useHMSRoomColorPalette","useHMSRoomStyleSheet","HMSBaseButton","HMSPrimaryButton","_ref","title","loading","onPress","style","disabled","leftComponent","primary_dim","primaryDarkColor","on_primary_high","onPrimaryHighColor","hmsRoomStyles","theme","typography","button","backgroundColor","palette","primary_default","disabledButton","primary_disabled","buttonText","color","fontFamily","font_family","disabledText","on_primary_low","createElement","loaderColor","underlayColor","textStyle"],"sourceRoot":"../../../src","sources":["components/HMSPrimaryButton.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,SAASC,sBAAsB,EAAEC,oBAAoB,QAAQ,eAAe;AAC5E,SAASC,aAAa,QAAQ,iBAAiB;AAW/C,OAAO,MAAMC,gBAAiD,GAAGC,IAAA,IAO3D;EAAA,IAP4D;IAChEC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACRC;EACF,CAAC,GAAAN,IAAA;EACC,MAAM;IAAEO,WAAW,EAAEC,gBAAgB;IAAEC,eAAe,EAAEC;EAAmB,CAAC,GAC1Ed,sBAAsB,CAAC,CAAC;EAE1B,MAAMe,aAAa,GAAGd,oBAAoB,CAAC,CAACe,KAAK,EAAEC,UAAU,MAAM;IACjEC,MAAM,EAAE;MACNC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC;IACjC,CAAC;IACDC,cAAc,EAAE;MACdH,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACG;IACjC,CAAC;IACDC,UAAU,EAAE;MACVC,KAAK,EAAET,KAAK,CAACI,OAAO,CAACP,eAAe;MACpCa,UAAU,EAAG,GAAET,UAAU,CAACU,WAAY;IACxC,CAAC;IACDC,YAAY,EAAE;MACZH,KAAK,EAAET,KAAK,CAACI,OAAO,CAACS;IACvB;EACF,CAAC,CAAC,CAAC;EAEH,oBACE9B,KAAA,CAAA+B,aAAA,CAAC5B,aAAa;IACZ6B,WAAW,EAAEjB,kBAAmB;IAChCR,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBF,KAAK,EAAEA,KAAM;IACb2B,aAAa,EAAEpB,gBAAiB;IAChCH,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BF,KAAK,EAAE,CACLO,aAAa,CAACG,MAAM,EACpBT,QAAQ,GAAGM,aAAa,CAACO,cAAc,GAAG,IAAI,EAC9Cd,KAAK,CACL;IACFyB,SAAS,EAAE,CACTlB,aAAa,CAACS,UAAU,EACxBf,QAAQ,GAAGM,aAAa,CAACa,YAAY,GAAG,IAAI;EAC5C,CACH,CAAC;AAEN,CAAC"}

package/lib/module/components/HMSRecordingIndicator.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { RecordingIcon } from '../Icons';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+export const HMSRecordingIndicator = () => {
+  const isRecordingOn = useSelector(state => {
+    var _state$hmsStates$room;
+    return !!((_state$hmsStates$room = state.hmsStates.room) !== null && _state$hmsStates$room !== void 0 && (_state$hmsStates$room = _state$hmsStates$room.browserRecordingState) !== null && _state$hmsStates$room !== void 0 && _state$hmsStates$room.running);
+  });
+  const startingOrStoppingRecording = useSelector(state => state.app.startingOrStoppingRecording);
+  const {
+    on_surface_high: onSurfaceHighColor
+  } = useHMSRoomColorPalette();
+  const iconStyles = useHMSRoomStyle(theme => ({
+    tintColor: theme.palette.alert_error_default
+  }));
+  if (startingOrStoppingRecording) {
+    return /*#__PURE__*/React.createElement(ActivityIndicator, {
+      size: "small",
+      color: onSurfaceHighColor
+    });
+  }
+  if (isRecordingOn) {
+    return /*#__PURE__*/React.createElement(RecordingIcon, {
+      style: [styles.icon, iconStyles]
+    });
+  }
+  return null;
+};
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24
+  }
+});
+//# sourceMappingURL=HMSRecordingIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSelector","ActivityIndicator","StyleSheet","RecordingIcon","useHMSRoomColorPalette","useHMSRoomStyle","HMSRecordingIndicator","isRecordingOn","state","_state$hmsStates$room","hmsStates","room","browserRecordingState","running","startingOrStoppingRecording","app","on_surface_high","onSurfaceHighColor","iconStyles","theme","tintColor","palette","alert_error_default","createElement","size","color","style","styles","icon","create","width","height"],"sourceRoot":"../../../src","sources":["components/HMSRecordingIndicator.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,cAAc;AAG5D,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,sBAAsB,EAAEC,eAAe,QAAQ,eAAe;AAEvE,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;EACzC,MAAMC,aAAa,GAAGP,WAAW,CAC9BQ,KAAgB;IAAA,IAAAC,qBAAA;IAAA,OAAK,CAAC,GAAAA,qBAAA,GAACD,KAAK,CAACE,SAAS,CAACC,IAAI,cAAAF,qBAAA,gBAAAA,qBAAA,GAApBA,qBAAA,CAAsBG,qBAAqB,cAAAH,qBAAA,eAA3CA,qBAAA,CAA6CI,OAAO;EAAA,CAC9E,CAAC;EACD,MAAMC,2BAA2B,GAAGd,WAAW,CAAEQ,KAAgB,IAAKA,KAAK,CAACO,GAAG,CAACD,2BAA2B,CAAC;EAE5G,MAAM;IAAEE,eAAe,EAAEC;EAAmB,CAAC,GAAGb,sBAAsB,CAAC,CAAC;EAExE,MAAMc,UAAU,GAAGb,eAAe,CAAEc,KAAK,KAAM;IAC7CC,SAAS,EAAED,KAAK,CAACE,OAAO,CAACC;EAC3B,CAAC,CAAC,CAAC;EAEH,IAAIR,2BAA2B,EAAE;IAC/B,oBAAOf,KAAA,CAAAwB,aAAA,CAACtB,iBAAiB;MAACuB,IAAI,EAAE,OAAQ;MAACC,KAAK,EAAER;IAAmB,CAAE,CAAC;EACxE;EAEA,IAAIV,aAAa,EAAE;IACjB,oBAAOR,KAAA,CAAAwB,aAAA,CAACpB,aAAa;MAACuB,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAEV,UAAU;IAAE,CAAE,CAAC;EAC5D;EAEA,OAAO,IAAI;AACb,CAAC;AAED,MAAMS,MAAM,GAAGzB,UAAU,CAAC2B,MAAM,CAAC;EAC/BD,IAAI,EAAE;IACJE,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE;EACV;AACF,CAAC,CAAC"}

package/lib/module/components/HMSRoomOptions.js

@@ -2,12 +2,15 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { HMSAudioMixingMode, HMSAudioMode } from '@100mslive/react-native-hms';
 import { PressableIcon } from './PressableIcon';
-import { ThreeDotsIcon } from '../Icons';
+import { HamburgerIcon } from '../Icons';
 import { DefaultModal } from './DefaultModal';
 import { RoomSettingsModalContent } from './RoomSettingsModalContent';
 import { ChangeAudioMixingModeModal, ChangeAudioModeModal, ChangeAudioOutputModal, ChangeBulkRoleModal, ChangeTrackStateForRoleModal, HlsStreamingModal, RecordingModal, RtcStatsModal } from './Modals';
 import { ModalTypes } from '../utils/types';
 import { useModalType } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
+import { ChangeNameModalContent } from './ChangeNameModalContent';
+import { StopRecordingModalContent } from './StopRecordingModalContent';
 export const HMSRoomOptions = () => {
   const {
     modalVisibleType: modalVisible,
@@ -22,13 +25,10 @@ export const HMSRoomOptions = () => {
   const dismissModal = () => setModalVisible(ModalTypes.DEFAULT);
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(PressableIcon, {
     onPress: onSettingsPress
-  }, /*#__PURE__*/React.createElement(ThreeDotsIcon, {
-    stack: "vertical"
-  })), /*#__PURE__*/React.createElement(DefaultModal, {
-    animationIn: 'slideInUp',
-    animationOut: 'slideOutDown',
-    modalVisible: modalVisible === ModalTypes.SETTINGS,
-    setModalVisible: dismissModal
+  }, /*#__PURE__*/React.createElement(HamburgerIcon, null)), /*#__PURE__*/React.createElement(BottomSheet, {
+    isVisible: modalVisible === ModalTypes.SETTINGS,
+    dismissModal: dismissModal,
+    animationOutTiming: 700
   }, /*#__PURE__*/React.createElement(RoomSettingsModalContent, {
     newAudioMixingMode: newAudioMixingMode,
     audioDeviceListenerAdded: audioDeviceChangeListener,
@@ -39,6 +39,19 @@ export const HMSRoomOptions = () => {
     setAudioDeviceListenerAdded: setAudioDeviceChangeListener,
     setIsAudioShared: setIsAudioShared,
     setMuteAllTracksAudio: setMuteAllTracksAudio
+  })), /*#__PURE__*/React.createElement(BottomSheet, {
+    isVisible: modalVisible === ModalTypes.CHANGE_NAME,
+    dismissModal: dismissModal,
+    avoidKeyboard: true,
+    animationOutTiming: 700
+  }, /*#__PURE__*/React.createElement(ChangeNameModalContent, {
+    dismissModal: dismissModal
+  })), /*#__PURE__*/React.createElement(BottomSheet, {
+    isVisible: modalVisible === ModalTypes.STOP_RECORDING,
+    dismissModal: dismissModal,
+    animationOutTiming: 800
+  }, /*#__PURE__*/React.createElement(StopRecordingModalContent, {
+    dismissModal: dismissModal
   })), /*#__PURE__*/React.createElement(DefaultModal, {
     animationIn: 'slideInUp',
     animationOut: 'slideOutDown',