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

package/lib/module/components/HMSManageLocalAudio.js

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 import { MicIcon } from '../Icons';
 import { useCanPublishAudio, useHMSActions } from '../hooks-sdk';
-import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
 export const HMSManageLocalAudio = () => {
   const canPublishAudio = useCanPublishAudio();
@@ -23,15 +21,9 @@ const ToggleAudioMuteButton = () => {
   };
   return /*#__PURE__*/React.createElement(PressableIcon, {
     onPress: handleAudioMuteTogglePress,
-    style: isLocalAudioMuted ? styles.mutedButton : undefined
+    active: isLocalAudioMuted
   }, /*#__PURE__*/React.createElement(MicIcon, {
     muted: !!isLocalAudioMuted
   }));
 };
-const styles = StyleSheet.create({
-  mutedButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM
-  }
-});
 //# sourceMappingURL=HMSManageLocalAudio.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","useSelector","MicIcon","useCanPublishAudio","useHMSActions","COLORS","PressableIcon","HMSManageLocalAudio","canPublishAudio","createElement","ToggleAudioMuteButton","hmsActions","isLocalAudioMuted","state","hmsStates","handleAudioMuteTogglePress","setLocalAudioEnabled","onPress","style","styles","mutedButton","undefined","muted","create","backgroundColor","SECONDARY","DIM","borderColor"],"sourceRoot":"../../../src","sources":["components/HMSManageLocalAudio.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,OAAO,QAAQ,UAAU;AAClC,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAEhE,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMC,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAE5C,IAAI,CAACK,eAAe,EAAE;IACpB,OAAO,IAAI;EACb;EAEA,oBAAOT,KAAA,CAAAU,aAAA,CAACC,qBAAqB,MAAE,CAAC;AAClC,CAAC;AAED,MAAMA,qBAAqB,GAAGA,CAAA,KAAM;EAClC,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC;EACA,MAAMQ,iBAAiB,GAAGX,WAAW,CAClCY,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACF,iBACxC,CAAC;EAED,MAAMG,0BAA0B,GAAG,MAAAA,CAAA,KAAY;IAC7C;IACA;IACA,MAAMJ,UAAU,CAACK,oBAAoB,CAAC,CAACJ,iBAAiB,CAAC;EAC3D,CAAC;EAED,oBACEb,KAAA,CAAAU,aAAA,CAACH,aAAa;IACZW,OAAO,EAAEF,0BAA2B;IACpCG,KAAK,EAAEN,iBAAiB,GAAGO,MAAM,CAACC,WAAW,GAAGC;EAAU,gBAE1DtB,KAAA,CAAAU,aAAA,CAACP,OAAO;IAACoB,KAAK,EAAE,CAAC,CAACV;EAAkB,CAAE,CACzB,CAAC;AAEpB,CAAC;AAED,MAAMO,MAAM,GAAGnB,UAAU,CAACuB,MAAM,CAAC;EAC/BH,WAAW,EAAE;IACXI,eAAe,EAAEnB,MAAM,CAACoB,SAAS,CAACC,GAAG;IACrCC,WAAW,EAAEtB,MAAM,CAACoB,SAAS,CAACC;EAChC;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useSelector","MicIcon","useCanPublishAudio","useHMSActions","PressableIcon","HMSManageLocalAudio","canPublishAudio","createElement","ToggleAudioMuteButton","hmsActions","isLocalAudioMuted","state","hmsStates","handleAudioMuteTogglePress","setLocalAudioEnabled","onPress","active","muted"],"sourceRoot":"../../../src","sources":["components/HMSManageLocalAudio.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,OAAO,QAAQ,UAAU;AAClC,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAEhE,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMC,eAAe,GAAGJ,kBAAkB,CAAC,CAAC;EAE5C,IAAI,CAACI,eAAe,EAAE;IACpB,OAAO,IAAI;EACb;EAEA,oBAAOP,KAAA,CAAAQ,aAAA,CAACC,qBAAqB,MAAE,CAAC;AAClC,CAAC;AAED,MAAMA,qBAAqB,GAAGA,CAAA,KAAM;EAClC,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClC;EACA,MAAMO,iBAAiB,GAAGV,WAAW,CAClCW,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACF,iBACxC,CAAC;EAED,MAAMG,0BAA0B,GAAG,MAAAA,CAAA,KAAY;IAC7C;IACA;IACA,MAAMJ,UAAU,CAACK,oBAAoB,CAAC,CAACJ,iBAAiB,CAAC;EAC3D,CAAC;EAED,oBACEX,KAAA,CAAAQ,aAAA,CAACH,aAAa;IACZW,OAAO,EAAEF,0BAA2B;IACpCG,MAAM,EAAEN;EAAkB,gBAE1BX,KAAA,CAAAQ,aAAA,CAACN,OAAO;IAACgB,KAAK,EAAE,CAAC,CAACP;EAAkB,CAAE,CACzB,CAAC;AAEpB,CAAC"}

package/lib/module/components/HMSManageLocalVideo.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
-import { COLORS } from '../utils/theme';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { CameraIcon } from '../Icons';
@@ -23,15 +21,9 @@ const ToggleVideoMuteButton = () => {
   };
   return /*#__PURE__*/React.createElement(PressableIcon, {
     onPress: handleVideoMuteTogglePress,
-    style: isLocalVideoMuted ? styles.mutedButton : undefined
+    active: isLocalVideoMuted
   }, /*#__PURE__*/React.createElement(CameraIcon, {
     muted: !!isLocalVideoMuted
   }));
 };
-const styles = StyleSheet.create({
-  mutedButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM
-  }
-});
 //# sourceMappingURL=HMSManageLocalVideo.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","useSelector","COLORS","useCanPublishVideo","useHMSActions","PressableIcon","CameraIcon","HMSManageLocalVideo","canPublishVideo","createElement","ToggleVideoMuteButton","hmsActions","isLocalVideoMuted","state","hmsStates","handleVideoMuteTogglePress","setLocalVideoEnabled","onPress","style","styles","mutedButton","undefined","muted","create","backgroundColor","SECONDARY","DIM","borderColor"],"sourceRoot":"../../../src","sources":["components/HMSManageLocalVideo.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,WAAW,QAAQ,aAAa;AAGzC,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAChE,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,UAAU,QAAQ,UAAU;AAErC,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMC,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAE5C,IAAI,CAACK,eAAe,EAAE;IACpB,OAAO,IAAI;EACb;EAEA,oBAAOT,KAAA,CAAAU,aAAA,CAACC,qBAAqB,MAAE,CAAC;AAClC,CAAC;AAED,MAAMA,qBAAqB,GAAGA,CAAA,KAAM;EAClC,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC;EACA,MAAMQ,iBAAiB,GAAGX,WAAW,CAClCY,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACF,iBACxC,CAAC;EAED,MAAMG,0BAA0B,GAAG,MAAAA,CAAA,KAAY;IAC7C;IACA;IACA,MAAMJ,UAAU,CAACK,oBAAoB,CAAC,CAACJ,iBAAiB,CAAC;EAC3D,CAAC;EAED,oBACEb,KAAA,CAAAU,aAAA,CAACJ,aAAa;IACZY,OAAO,EAAEF,0BAA2B;IACpCG,KAAK,EAAEN,iBAAiB,GAAGO,MAAM,CAACC,WAAW,GAAGC;EAAU,gBAE1DtB,KAAA,CAAAU,aAAA,CAACH,UAAU;IAACgB,KAAK,EAAE,CAAC,CAACV;EAAkB,CAAE,CAC5B,CAAC;AAEpB,CAAC;AAED,MAAMO,MAAM,GAAGnB,UAAU,CAACuB,MAAM,CAAC;EAC/BH,WAAW,EAAE;IACXI,eAAe,EAAEtB,MAAM,CAACuB,SAAS,CAACC,GAAG;IACrCC,WAAW,EAAEzB,MAAM,CAACuB,SAAS,CAACC;EAChC;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useSelector","useCanPublishVideo","useHMSActions","PressableIcon","CameraIcon","HMSManageLocalVideo","canPublishVideo","createElement","ToggleVideoMuteButton","hmsActions","isLocalVideoMuted","state","hmsStates","handleVideoMuteTogglePress","setLocalVideoEnabled","onPress","active","muted"],"sourceRoot":"../../../src","sources":["components/HMSManageLocalVideo.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,QAAQ,aAAa;AAGzC,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAChE,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,UAAU,QAAQ,UAAU;AAErC,OAAO,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;EACvC,MAAMC,eAAe,GAAGL,kBAAkB,CAAC,CAAC;EAE5C,IAAI,CAACK,eAAe,EAAE;IACpB,OAAO,IAAI;EACb;EAEA,oBAAOP,KAAA,CAAAQ,aAAA,CAACC,qBAAqB,MAAE,CAAC;AAClC,CAAC;AAED,MAAMA,qBAAqB,GAAGA,CAAA,KAAM;EAClC,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC;EACA,MAAMQ,iBAAiB,GAAGV,WAAW,CAClCW,KAAgB,IAAKA,KAAK,CAACC,SAAS,CAACF,iBACxC,CAAC;EAED,MAAMG,0BAA0B,GAAG,MAAAA,CAAA,KAAY;IAC7C;IACA;IACA,MAAMJ,UAAU,CAACK,oBAAoB,CAAC,CAACJ,iBAAiB,CAAC;EAC3D,CAAC;EAED,oBACEX,KAAA,CAAAQ,aAAA,CAACJ,aAAa;IACZY,OAAO,EAAEF,0BAA2B;IACpCG,MAAM,EAAEN;EAAkB,gBAE1BX,KAAA,CAAAQ,aAAA,CAACH,UAAU;IAACa,KAAK,EAAE,CAAC,CAACP;EAAkB,CAAE,CAC5B,CAAC;AAEpB,CAAC"}

package/lib/module/components/HMSManageRaiseHand.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector, shallowEqual } from 'react-redux';
-import { COLORS } from '../utils/theme';
 import { useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { HandIcon } from '../Icons';
@@ -22,18 +20,7 @@ export const HMSManageRaiseHand = () => {
   };
   return /*#__PURE__*/React.createElement(PressableIcon, {
     onPress: toggleRaiseHand,
-    style: localPeerMetadata.isHandRaised ? styles.activeButton : undefined
-  }, /*#__PURE__*/React.createElement(HandIcon, {
-    style: localPeerMetadata.isHandRaised ? styles.handRaised : undefined
-  }));
+    active: localPeerMetadata.isHandRaised
+  }, /*#__PURE__*/React.createElement(HandIcon, null));
 };
-const styles = StyleSheet.create({
-  activeButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM
-  },
-  handRaised: {
-    tintColor: COLORS.TWIN.YELLOW
-  }
-});
 //# sourceMappingURL=HMSManageRaiseHand.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","useSelector","shallowEqual","COLORS","useHMSActions","PressableIcon","HandIcon","parseMetadata","HMSManageRaiseHand","hmsActions","localPeerMetadata","state","_state$hmsStates$loca","hmsStates","localPeer","metadata","toggleRaiseHand","newMetadata","isHandRaised","isBRBOn","changeMetadata","createElement","onPress","style","styles","activeButton","undefined","handRaised","create","backgroundColor","SECONDARY","DIM","borderColor","tintColor","TWIN","YELLOW"],"sourceRoot":"../../../src","sources":["components/HMSManageRaiseHand.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,WAAW,EAAEC,YAAY,QAAQ,aAAa;AAGvD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,aAAa,QAAQ,cAAc;AAC5C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,QAAQ,QAAQ,UAAU;AACnC,SAASC,aAAa,QAAQ,oBAAoB;AAElD,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAMC,UAAU,GAAGL,aAAa,CAAC,CAAC;EAClC,MAAMM,iBAAiB,GAAGT,WAAW,CAClCU,KAAgB;IAAA,IAAAC,qBAAA;IAAA,OAAKL,aAAa,EAAAK,qBAAA,GAACD,KAAK,CAACE,SAAS,CAACC,SAAS,cAAAF,qBAAA,uBAAzBA,qBAAA,CAA2BG,QAAQ,CAAC;EAAA,GACxEb,YACF,CAAC;EAED,MAAMc,eAAe,GAAG,MAAAA,CAAA,KAAY;IAClC,MAAMC,WAAW,GAAG;MAClB,GAAGP,iBAAiB;MACpBQ,YAAY,EAAE,CAACR,iBAAiB,CAACQ,YAAY;MAC7CC,OAAO,EAAE;IACX,CAAC;IACD,MAAMV,UAAU,CAACW,cAAc,CAACH,WAAW,CAAC;EAC9C,CAAC;EAED,oBACElB,KAAA,CAAAsB,aAAA,CAAChB,aAAa;IACZiB,OAAO,EAAEN,eAAgB;IACzBO,KAAK,EAAEb,iBAAiB,CAACQ,YAAY,GAAGM,MAAM,CAACC,YAAY,GAAGC;EAAU,gBAExE3B,KAAA,CAAAsB,aAAA,CAACf,QAAQ;IACPiB,KAAK,EAAEb,iBAAiB,CAACQ,YAAY,GAAGM,MAAM,CAACG,UAAU,GAAGD;EAAU,CACvE,CACY,CAAC;AAEpB,CAAC;AAED,MAAMF,MAAM,GAAGxB,UAAU,CAAC4B,MAAM,CAAC;EAC/BH,YAAY,EAAE;IACZI,eAAe,EAAE1B,MAAM,CAAC2B,SAAS,CAACC,GAAG;IACrCC,WAAW,EAAE7B,MAAM,CAAC2B,SAAS,CAACC;EAChC,CAAC;EACDJ,UAAU,EAAE;IACVM,SAAS,EAAE9B,MAAM,CAAC+B,IAAI,CAACC;EACzB;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useSelector","shallowEqual","useHMSActions","PressableIcon","HandIcon","parseMetadata","HMSManageRaiseHand","hmsActions","localPeerMetadata","state","_state$hmsStates$loca","hmsStates","localPeer","metadata","toggleRaiseHand","newMetadata","isHandRaised","isBRBOn","changeMetadata","createElement","onPress","active"],"sourceRoot":"../../../src","sources":["components/HMSManageRaiseHand.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,EAAEC,YAAY,QAAQ,aAAa;AAGvD,SAASC,aAAa,QAAQ,cAAc;AAC5C,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,QAAQ,QAAQ,UAAU;AACnC,SAASC,aAAa,QAAQ,oBAAoB;AAElD,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAMC,UAAU,GAAGL,aAAa,CAAC,CAAC;EAClC,MAAMM,iBAAiB,GAAGR,WAAW,CAClCS,KAAgB;IAAA,IAAAC,qBAAA;IAAA,OAAKL,aAAa,EAAAK,qBAAA,GAACD,KAAK,CAACE,SAAS,CAACC,SAAS,cAAAF,qBAAA,uBAAzBA,qBAAA,CAA2BG,QAAQ,CAAC;EAAA,GACxEZ,YACF,CAAC;EAED,MAAMa,eAAe,GAAG,MAAAA,CAAA,KAAY;IAClC,MAAMC,WAAW,GAAG;MAClB,GAAGP,iBAAiB;MACpBQ,YAAY,EAAE,CAACR,iBAAiB,CAACQ,YAAY;MAC7CC,OAAO,EAAE;IACX,CAAC;IACD,MAAMV,UAAU,CAACW,cAAc,CAACH,WAAW,CAAC;EAC9C,CAAC;EAED,oBACEhB,KAAA,CAAAoB,aAAA,CAAChB,aAAa;IACZiB,OAAO,EAAEN,eAAgB;IACzBO,MAAM,EAAEb,iBAAiB,CAACQ;EAAa,gBAEvCjB,KAAA,CAAAoB,aAAA,CAACf,QAAQ,MAAE,CACE,CAAC;AAEpB,CAAC"}

package/lib/module/components/HMSMeetingEnded.js

@@ -19,8 +19,7 @@ const styles = StyleSheet.create({
   title: {
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 24,
-    fontFamily: 'Inter',
-    fontWeight: '600',
+    fontFamily: 'Inter-SemiBold',
     lineHeight: 32
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","StyleSheet","SafeAreaView","COLORS","HMSMeetingEnded","createElement","style","styles","container","title","create","flex","backgroundColor","BACKGROUND","DIM","alignItems","justifyContent","color","SURFACE","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight"],"sourceRoot":"../../../src","sources":["components/HMSMeetingEnded.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,YAAY,QAAQ,gCAAgC;AAE7D,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACnC,oBACEL,KAAA,CAAAM,aAAA,CAACH,YAAY;IAACI,KAAK,EAAEC,MAAM,CAACC;EAAU,gBACpCT,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACM,KAAK,EAAEC,MAAM,CAACE;EAAM,GAAC,eAAmB,CAClC,CAAC;AAEnB,CAAC;AAED,MAAMF,MAAM,GAAGN,UAAU,CAACS,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE,CAAC;IACPC,eAAe,EAAET,MAAM,CAACU,UAAU,CAACC,GAAG;IACtCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDP,KAAK,EAAE;IACLQ,KAAK,EAAEd,MAAM,CAACe,OAAO,CAACC,UAAU,CAACC,IAAI;IACrCC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","Text","StyleSheet","SafeAreaView","COLORS","HMSMeetingEnded","createElement","style","styles","container","title","create","flex","backgroundColor","BACKGROUND","DIM","alignItems","justifyContent","color","SURFACE","ON_SURFACE","HIGH","fontSize","fontFamily","lineHeight"],"sourceRoot":"../../../src","sources":["components/HMSMeetingEnded.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,YAAY,QAAQ,gCAAgC;AAE7D,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACnC,oBACEL,KAAA,CAAAM,aAAA,CAACH,YAAY;IAACI,KAAK,EAAEC,MAAM,CAACC;EAAU,gBACpCT,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACM,KAAK,EAAEC,MAAM,CAACE;EAAM,GAAC,eAAmB,CAClC,CAAC;AAEnB,CAAC;AAED,MAAMF,MAAM,GAAGN,UAAU,CAACS,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE,CAAC;IACPC,eAAe,EAAET,MAAM,CAACU,UAAU,CAACC,GAAG;IACtCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDP,KAAK,EAAE;IACLQ,KAAK,EAAEd,MAAM,CAACe,OAAO,CAACC,UAAU,CAACC,IAAI;IACrCC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,gBAAgB;IAC5BC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/lib/module/components/HMSPreviewEditName.js

@@ -1,57 +1,23 @@
 import * as React from 'react';
-import { Platform, 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';
+import { HMSTextInput } from './HMSTextInput';
 export const HMSPreviewEditName = () => {
   const dispatch = useDispatch();
   const {
     updateConfig
   } = useHMSConfig();
   const userName = useSelector(state => state.user.userName);
-  const [inputFocused, setInputFocused] = React.useState(false);
   const handleNameChange = name => {
     dispatch(changeUsername(name));
     updateConfig({
       username: name
     });
   };
-  const handleInputFocus = () => setInputFocused(true);
-  const handleInputBlur = () => setInputFocused(false);
-  return /*#__PURE__*/React.createElement(TextInput, {
-    style: [styles.input, inputFocused ? styles.focusedInput : null],
+  return /*#__PURE__*/React.createElement(HMSTextInput, {
     value: userName,
-    onChangeText: handleNameChange,
-    placeholder: "Enter Name...",
-    autoCapitalize: "words",
-    autoCompleteType: "name",
-    placeholderTextColor: COLORS.SURFACE.ON_SURFACE.LOW,
-    selectionColor: COLORS.SURFACE.ON_SURFACE.HIGH,
-    onFocus: handleInputFocus,
-    onBlur: handleInputBlur
+    onChangeText: handleNameChange
   });
 };
-const styles = StyleSheet.create({
-  input: {
-    flex: 1,
-    height: 50,
-    textAlignVertical: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    lineHeight: Platform.OS === 'android' ? 24 : undefined,
-    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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","StyleSheet","TextInput","useDispatch","useSelector","COLORS","changeUsername","useHMSConfig","HMSPreviewEditName","dispatch","updateConfig","userName","state","user","inputFocused","setInputFocused","useState","handleNameChange","name","username","handleInputFocus","handleInputBlur","createElement","style","styles","input","focusedInput","value","onChangeText","placeholder","autoCapitalize","autoCompleteType","placeholderTextColor","SURFACE","ON_SURFACE","LOW","selectionColor","HIGH","onFocus","onBlur","create","flex","height","textAlignVertical","backgroundColor","DEFAULT","paddingHorizontal","borderRadius","color","fontSize","lineHeight","OS","undefined","fontFamily","fontWeight","letterSpacing","borderWidth","borderColor","PRIMARY"],"sourceRoot":"../../../src","sources":["components/HMSPreviewEditName.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,QAAQ,cAAc;AAC9D,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;EAAa,CAAC,GAAGH,YAAY,CAAC,CAAC;EACvC,MAAMI,QAAQ,GAAGP,WAAW,CAAEQ,KAAgB,IAAKA,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC;EACvE,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAGhB,KAAK,CAACiB,QAAQ,CAAC,KAAK,CAAC;EAE7D,MAAMC,gBAAgB,GAAIC,IAAY,IAAK;IACzCT,QAAQ,CAACH,cAAc,CAACY,IAAI,CAAC,CAAC;IAC9BR,YAAY,CAAC;MAAES,QAAQ,EAAED;IAAK,CAAC,CAAC;EAClC,CAAC;EAED,MAAME,gBAAgB,GAAGA,CAAA,KAAML,eAAe,CAAC,IAAI,CAAC;EAEpD,MAAMM,eAAe,GAAGA,CAAA,KAAMN,eAAe,CAAC,KAAK,CAAC;EAEpD,oBACEhB,KAAA,CAAAuB,aAAA,CAACpB,SAAS;IACRqB,KAAK,EAAE,CAACC,MAAM,CAACC,KAAK,EAAEX,YAAY,GAAGU,MAAM,CAACE,YAAY,GAAG,IAAI,CAAE;IACjEC,KAAK,EAAEhB,QAAS;IAChBiB,YAAY,EAAEX,gBAAiB;IAC/BY,WAAW,EAAC,eAAe;IAC3BC,cAAc,EAAC,OAAO;IACtBC,gBAAgB,EAAC,MAAM;IACvBC,oBAAoB,EAAE3B,MAAM,CAAC4B,OAAO,CAACC,UAAU,CAACC,GAAI;IACpDC,cAAc,EAAE/B,MAAM,CAAC4B,OAAO,CAACC,UAAU,CAACG,IAAK;IAC/CC,OAAO,EAAElB,gBAAiB;IAC1BmB,MAAM,EAAElB;EAAgB,CACzB,CAAC;AAEN,CAAC;AAED,MAAMG,MAAM,GAAGvB,UAAU,CAACuC,MAAM,CAAC;EAC/Bf,KAAK,EAAE;IACLgB,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE,EAAE;IACVC,iBAAiB,EAAE,QAAQ;IAC3BC,eAAe,EAAEvC,MAAM,CAAC4B,OAAO,CAACY,OAAO;IACvCC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE,CAAC;IACfC,KAAK,EAAE3C,MAAM,CAAC4B,OAAO,CAACC,UAAU,CAACG,IAAI;IACrCY,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAElD,QAAQ,CAACmD,EAAE,KAAK,SAAS,GAAG,EAAE,GAAGC,SAAS;IACtDC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,aAAa,EAAE,GAAG;IAClBC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEpD,MAAM,CAAC4B,OAAO,CAACY;EAC9B,CAAC;EACDnB,YAAY,EAAE;IACZ+B,WAAW,EAAEpD,MAAM,CAACqD,OAAO,CAACb,OAAO;IACnCW,WAAW,EAAE;EACf;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useDispatch","useSelector","changeUsername","useHMSConfig","HMSTextInput","HMSPreviewEditName","dispatch","updateConfig","userName","state","user","handleNameChange","name","username","createElement","value","onChangeText"],"sourceRoot":"../../../src","sources":["components/HMSPreviewEditName.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,EAAEC,WAAW,QAAQ,aAAa;AAGtD,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,YAAY,QAAQ,eAAe;AAC5C,SAASC,YAAY,QAAQ,gBAAgB;AAI7C,OAAO,MAAMC,kBAAqD,GAAGA,CAAA,KAAM;EACzE,MAAMC,QAAQ,GAAGN,WAAW,CAAC,CAAC;EAC9B,MAAM;IAAEO;EAAa,CAAC,GAAGJ,YAAY,CAAC,CAAC;EACvC,MAAMK,QAAQ,GAAGP,WAAW,CAAEQ,KAAgB,IAAKA,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC;EAEvE,MAAMG,gBAAgB,GAAIC,IAAY,IAAK;IACzCN,QAAQ,CAACJ,cAAc,CAACU,IAAI,CAAC,CAAC;IAC9BL,YAAY,CAAC;MAAEM,QAAQ,EAAED;IAAK,CAAC,CAAC;EAClC,CAAC;EAED,oBAAOb,KAAA,CAAAe,aAAA,CAACV,YAAY;IAACW,KAAK,EAAEP,QAAS;IAACQ,YAAY,EAAEL;EAAiB,CAAE,CAAC;AAC1E,CAAC"}

package/lib/module/components/HMSPreviewHLSLiveIndicator.js

@@ -1,23 +1,35 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
-import { COLORS } from '../utils/theme';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = 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.hlsStreamingState) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.running;
   });
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.alert_error_default
+    },
+    circle: {
+      backgroundColor: theme.palette.on_surface_high
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`
+    }
+  }));
   if (!isHLSStreaming) {
     return null;
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: styles.container
+    style: [styles.container, hmsRoomStyles.container]
   }, /*#__PURE__*/React.createElement(View, {
     style: styles.circleContainer
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.circle
+    style: [styles.circle, hmsRoomStyles.circle]
   })), /*#__PURE__*/React.createElement(Text, {
-    style: styles.text
+    style: [styles.text, hmsRoomStyles.text]
   }, "LIVE"));
 };
 const styles = StyleSheet.create({
@@ -25,7 +37,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: 20,
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
     paddingLeft: 8,
     paddingRight: 12,
     marginRight: 8
@@ -39,15 +50,11 @@ const styles = StyleSheet.create({
   circle: {
     width: 12,
     height: 12,
-    borderRadius: 6,
-    backgroundColor: COLORS.WHITE
+    borderRadius: 6
   },
   text: {
     marginLeft: 4,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.25
   }

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","StyleSheet","useSelector","COLORS","HMSPreviewHLSLiveIndicator","isHLSStreaming","state","_state$hmsStates$room","hmsStates","room","hlsStreamingState","running","createElement","style","styles","container","circleContainer","circle","text","create","flexDirection","alignItems","borderRadius","backgroundColor","ALERT","ERROR","DEFAULT","paddingLeft","paddingRight","marginRight","width","height","justifyContent","WHITE","marginLeft","color","SURFACE","ON_SURFACE","HIGH","fontSize","fontFamily","fontWeight","lineHeight","letterSpacing"],"sourceRoot":"../../../src","sources":["components/HMSPreviewHLSLiveIndicator.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,MAAM,QAAQ,gBAAgB;AAGvC,OAAO,MAAMC,0BAA0B,GAAGA,CAAA,KAAM;EAC9C,MAAMC,cAAc,GAAGH,WAAW,CAC/BI,KAAgB;IAAA,IAAAC,qBAAA;IAAA,QAAAA,qBAAA,GAAKD,KAAK,CAACE,SAAS,CAACC,IAAI,cAAAF,qBAAA,gBAAAA,qBAAA,GAApBA,qBAAA,CAAsBG,iBAAiB,cAAAH,qBAAA,uBAAvCA,qBAAA,CAAyCI,OAAO;EAAA,CACxE,CAAC;EAED,IAAI,CAACN,cAAc,EAAE;IACnB,OAAO,IAAI;EACb;EAEA,oBACEP,KAAA,CAAAc,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC5BjB,KAAA,CAAAc,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEC,MAAM,CAACE;EAAgB,gBAClClB,KAAA,CAAAc,aAAA,CAACb,IAAI;IAACc,KAAK,EAAEC,MAAM,CAACG;EAAO,CAAE,CACzB,CAAC,eACPnB,KAAA,CAAAc,aAAA,CAACZ,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACI;EAAK,GAAC,MAAU,CAChC,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAGb,UAAU,CAACkB,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAEpB,MAAM,CAACqB,KAAK,CAACC,KAAK,CAACC,OAAO;IAC3CC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE;EACf,CAAC;EACDb,eAAe,EAAE;IACfc,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVV,UAAU,EAAE,QAAQ;IACpBW,cAAc,EAAE;EAClB,CAAC;EACDf,MAAM,EAAE;IACNa,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVT,YAAY,EAAE,CAAC;IACfC,eAAe,EAAEpB,MAAM,CAAC8B;EAC1B,CAAC;EACDf,IAAI,EAAE;IACJgB,UAAU,EAAE,CAAC;IACbC,KAAK,EAAEhC,MAAM,CAACiC,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","View","Text","StyleSheet","useSelector","useHMSRoomStyleSheet","HMSPreviewHLSLiveIndicator","isHLSStreaming","state","_state$hmsStates$room","hmsStates","room","hlsStreamingState","running","hmsRoomStyles","theme","typography","container","backgroundColor","palette","alert_error_default","circle","on_surface_high","text","color","fontFamily","font_family","createElement","style","styles","circleContainer","create","flexDirection","alignItems","borderRadius","paddingLeft","paddingRight","marginRight","width","height","justifyContent","marginLeft","fontSize","lineHeight","letterSpacing"],"sourceRoot":"../../../src","sources":["components/HMSPreviewHLSLiveIndicator.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,WAAW,QAAQ,aAAa;AAGzC,SAASC,oBAAoB,QAAQ,eAAe;AAEpD,OAAO,MAAMC,0BAA0B,GAAGA,CAAA,KAAM;EAC9C,MAAMC,cAAc,GAAGH,WAAW,CAC/BI,KAAgB;IAAA,IAAAC,qBAAA;IAAA,QAAAA,qBAAA,GAAKD,KAAK,CAACE,SAAS,CAACC,IAAI,cAAAF,qBAAA,gBAAAA,qBAAA,GAApBA,qBAAA,CAAsBG,iBAAiB,cAAAH,qBAAA,uBAAvCA,qBAAA,CAAyCI,OAAO;EAAA,CACxE,CAAC;EAED,MAAMC,aAAa,GAAGT,oBAAoB,CAAC,CAACU,KAAK,EAAEC,UAAU,MAAM;IACjEC,SAAS,EAAE;MACTC,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACC;IACjC,CAAC;IACDC,MAAM,EAAE;MACNH,eAAe,EAAEH,KAAK,CAACI,OAAO,CAACG;IACjC,CAAC;IACDC,IAAI,EAAE;MACJC,KAAK,EAAET,KAAK,CAACI,OAAO,CAACG,eAAe;MACpCG,UAAU,EAAG,GAAET,UAAU,CAACU,WAAY;IACxC;EACF,CAAC,CAAC,CAAC;EAEH,IAAI,CAACnB,cAAc,EAAE;IACnB,OAAO,IAAI;EACb;EAEA,oBACEP,KAAA,CAAA2B,aAAA,CAAC1B,IAAI;IAAC2B,KAAK,EAAE,CAACC,MAAM,CAACZ,SAAS,EAAEH,aAAa,CAACG,SAAS;EAAE,gBACvDjB,KAAA,CAAA2B,aAAA,CAAC1B,IAAI;IAAC2B,KAAK,EAAEC,MAAM,CAACC;EAAgB,gBAClC9B,KAAA,CAAA2B,aAAA,CAAC1B,IAAI;IAAC2B,KAAK,EAAE,CAACC,MAAM,CAACR,MAAM,EAAEP,aAAa,CAACO,MAAM;EAAE,CAAE,CACjD,CAAC,eACPrB,KAAA,CAAA2B,aAAA,CAACzB,IAAI;IAAC0B,KAAK,EAAE,CAACC,MAAM,CAACN,IAAI,EAAET,aAAa,CAACS,IAAI;EAAE,GAAC,MAAU,CACtD,CAAC;AAEX,CAAC;AAED,MAAMM,MAAM,GAAG1B,UAAU,CAAC4B,MAAM,CAAC;EAC/Bd,SAAS,EAAE;IACTe,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE;EACf,CAAC;EACDP,eAAe,EAAE;IACfQ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVN,UAAU,EAAE,QAAQ;IACpBO,cAAc,EAAE;EAClB,CAAC;EACDnB,MAAM,EAAE;IACNiB,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVL,YAAY,EAAE;EAChB,CAAC;EACDX,IAAI,EAAE;IACJkB,UAAU,EAAE,CAAC;IACbC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC"}

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":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,UAAU,EACVC,IAAI,EACJC,kBAAkB,QACb,cAAc;AACrB,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,SAASC,SAAS,QAAQ,UAAU;AACpC,SAASC,eAAe,QAAQ,eAAe;AAO/C,OAAO,MAAMC,oBAAyD,GAAGC,IAAA,IAGnE;EAAA,IAHoE;IACxEC,OAAO;IACPC;EACF,CAAC,GAAAF,IAAA;EACC,MAAMG,eAAe,GAAGR,WAAW,CAChCS,KAAgB,IAAKA,KAAK,CAACC,IAAI,CAACC,QAAQ,CAACC,MAAM,IAAI,CACtD,CAAC;EAED,MAAMC,YAAY,GAAGV,eAAe,CAAC,CAAC;EAEtC,MAAMW,YAAY,GAAGN,eAAe,IAAIF,OAAO;EAE/C,oBACEX,KAAA,CAAAoB,aAAA,CAAChB,kBAAkB;IACjBiB,aAAa,EAAEf,MAAM,CAACgB,OAAO,CAACC,IAAK;IACnCC,KAAK,EAAE,CAACC,MAAM,CAACC,MAAM,EAAEP,YAAY,GAAGM,MAAM,CAACE,cAAc,GAAG,IAAI,CAAE;IACpEC,OAAO,EAAEhB,MAAO;IAChBiB,QAAQ,EAAEV;EAAa,gBAEvBnB,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAA8B,QAAA,QACGnB,OAAO,gBACNX,KAAA,CAAAoB,aAAA,CAACnB,iBAAiB;IAChB8B,IAAI,EAAE,OAAQ;IACdC,KAAK,EAAE1B,MAAM,CAAC2B,IAAI,CAACC,KAAM;IACzBV,KAAK,EAAEC,MAAM,CAACU;EAAO,CACtB,CAAC,GACA,IAAI,EAEPjB,YAAY,gBACXlB,KAAA,CAAAoB,aAAA,CAACb,SAAS;IACRiB,KAAK,EAAE,CACLb,OAAO,GAAGc,MAAM,CAACW,UAAU,GAAG,IAAI,EAClCjB,YAAY,GAAGM,MAAM,CAACY,YAAY,GAAG,IAAI;EACzC,CACH,CAAC,GACA,IAAI,eAERrC,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IACHqB,KAAK,EAAE,CACLC,MAAM,CAACa,IAAI,EACX3B,OAAO,GAAGc,MAAM,CAACW,UAAU,GAAG,IAAI,EAClCjB,YAAY,GAAGM,MAAM,CAACc,YAAY,GAAG,IAAI;EACzC,GAEDrB,YAAY,GAAG,SAAS,GAAG,UACxB,CACN,CACgB,CAAC;AAEzB,CAAC;AAED,MAAMO,MAAM,GAAGvB,UAAU,CAACsC,MAAM,CAAC;EAC/Bd,MAAM,EAAE;IACNe,aAAa,EAAE,KAAK;IACpBC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,CAAC;IAClBC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAEvC,MAAM,CAACgB,OAAO,CAACwB,OAAO;IACvCC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDX,IAAI,EAAE;IACJN,KAAK,EAAE1B,MAAM,CAAC2B,IAAI,CAACC,KAAK;IACxBgB,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,OAAO;IACnBC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,GAAG;IAClBC,gBAAgB,EAAE;EACpB,CAAC;EACDpB,MAAM,EAAE;IAAEqB,QAAQ,EAAE;EAAW,CAAC;EAChC7B,cAAc,EAAE;IACdkB,eAAe,EAAEvC,MAAM,CAACgB,OAAO,CAACmC;EAClC,CAAC;EACDpB,YAAY,EAAE;IACZqB,SAAS,EAAEpD,MAAM,CAACgB,OAAO,CAACqC,UAAU,CAACC;EACvC,CAAC;EACDrB,YAAY,EAAE;IACZP,KAAK,EAAE1B,MAAM,CAACgB,OAAO,CAACqC,UAAU,CAACC;EACnC,CAAC;EACDxB,UAAU,EAAE;IACVyB,OAAO,EAAE;EACX;AACF,CAAC,CAAC"}
+{"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"}