@eohjsc/react-native-smart-city 0.4.75 → 0.4.77

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.75",
+  "version": "0.4.77",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Device/ItemDevice.js

@@ -127,7 +127,7 @@ const ItemDevice = memo(
             size={14}
             color={Colors.Gray9}
             style={
-              Platform.OS === 'ios' ? styles.lineHeight22 : styles.marginBottom
+              Platform.OS === 'ios' ? styles.iosStyle : styles.androidStyle
             }
           >
             {title}
@@ -163,11 +163,13 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  marginBottom: {
-    marginBottom: 8,
+  iosStyle: {
+    lineHeight: 22,
   },
-  lineHeight22: {
+  androidStyle: {
     lineHeight: 22,
+    includeFontPadding: false,
+    marginBottom: 8,
   },
   lineHeight20: {
     lineHeight: 20,

package/src/commons/MediaPlayerDetail/__test__/MediaPlayerDetail.test.js

@@ -5,11 +5,13 @@ import MediaPlayerDetail from '../index';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { getTranslate } from '../../../utils/I18n';
 
-const wrapComponent = () => (
+const wrapComponent = (uri) => (
   <SCProvider initState={mockSCStore({})}>
     <MediaPlayerDetail
-      uri={'rtsp://admin:hd111111:1111111/Streaming/Channels/101/'}
+      uri={uri}
       key={'camera-1'}
       thumbnail={{ uri: 'https://abc.com/image.png' }}
       cameraName={'cameraName'}
@@ -19,10 +21,12 @@ const wrapComponent = () => (
 
 describe('Test MediaPlayerDetail', () => {
   let wrapper;
+  const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
 
   it('MediaPlayerDetail render when onTap setPause', async () => {
+    const uri = 'rtsp://admin:hd111111:1111111/Streaming/Channels/101/';
     await act(async () => {
-      wrapper = await create(wrapComponent());
+      wrapper = await create(wrapComponent(uri));
     });
     const instance = wrapper.root;
     const buttons = instance.findAllByType(TouchableOpacity);
@@ -44,4 +48,11 @@ describe('Test MediaPlayerDetail', () => {
     expect(texts[1].child).toBeUndefined();
     expect(pauseIcon.child).toBeUndefined();
   });
+  it('MediaPlayerDetail uri wrong', async () => {
+    const uri = 'wrong://admin:hd111111:1111111/Streaming/Channels/101/';
+    await act(async () => {
+      wrapper = await create(wrapComponent(uri));
+    });
+    expect(spyToastError).toBeCalledWith(getTranslate('en', 'uri_invalid'));
+  });
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -24,6 +24,8 @@ import { AccessibilityLabel } from '../../configs/Constants';
 import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
 import VLCPlayer from 'react-native-vlc-media-player/VLCPlayer';
+import { isValidURI } from '../../utils/Validation';
+import { ToastBottomHelper } from '../../utils/Utils';
 
 const MediaPlayerDetail = ({
   id,
@@ -87,7 +89,8 @@ const MediaPlayerDetail = ({
   }, [amount]);
 
   const renderCamera = useMemo(() => {
-    if (!uri) {
+    if (!uri || !isValidURI(uri)) {
+      ToastBottomHelper.error(t('uri_invalid'));
       return null;
     }
     return (

package/src/commons/SubUnit/DeviceTemplate/ConfigAndEvaluation/ConfigAndEvaluation.js

@@ -17,7 +17,9 @@ const ConfigAndEvaluationDisplay = memo(
             <IconComponent icon={icon_kit || icon} />
           </View>
           <View style={styles.rowTop}>
-            <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+            <Text semibold>
+              {stationItem?.configuration?.config_data?.name}
+            </Text>
           </View>
           <View style={styles.rowBottom}>
             <Text style={styles.textValue} bold>

package/src/commons/SubUnit/DeviceTemplate/ConfigValue/ConfigValue.js

@@ -25,7 +25,7 @@ const ConfigValue = ({ device, stationItem }) => {
           <IconComponent icon={icon_kit || icon} />
         </View>
         <View style={styles.rowTop}>
-          <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+          <Text semibold>{stationItem?.configuration?.config_data?.name}</Text>
         </View>
         <View style={styles.rowBottom}>
           <Text style={styles.textValue} bold>

package/src/commons/SubUnit/DeviceTemplate/EvaluationOverConfig/EvaluationOverConfig.js

@@ -54,7 +54,9 @@ const EvaluationOverConfigDisplay = memo(
             <IconComponent icon={icon_kit || icon} />
           </View>
           <View style={styles.rowTop}>
-            <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+            <Text semibold>
+              {stationItem?.configuration?.config_data?.name}
+            </Text>
           </View>
 
           <View style={styles.rowBottom}>

package/src/commons/SubUnit/DeviceTemplate/styles/ConfigValueStyles.js

@@ -16,6 +16,7 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   textValue: {
+    fontSize: 16,
     marginTop: 6,
     lineHeight: 16,
   },

package/src/utils/I18n/translations/en.js

@@ -1446,5 +1446,6 @@ export default {
   bellow_widget_is_not_configured: 'Bellow widget is not configured',
   bellow_widget_is_wrongly_configured: 'Bellow widget is wrongly configured',
   'customize...': 'Customize...',
+  uri_invalid: 'URI invalid',
   when_value_is: 'When value is',
 };

package/src/utils/I18n/translations/vi.js

@@ -1456,5 +1456,6 @@ export default {
   bellow_widget_is_not_configured: 'Tiện ích bên dưới chưa được cấu hình',
   bellow_widget_is_wrongly_configured: 'Tiện ích bên dưới được cấu hình sai',
   'customize...': 'Tùy chỉnh...',
+  uri_invalid: 'URI không hợp lệ',
   when_value_is: 'Khi giá trị là',
 };

package/src/utils/Validation.js

@@ -14,3 +14,8 @@ export const isValidPhoneNumberOrEmailAddress = (data) => {
 
 export const isHTML = (string) =>
   /<[a-z]+\d?(\s+[\w-]+=("[^"]*"|'[^']*'))*\s*\/?>|&#?\w+;/i.test(string);
+
+export const isValidURI = (uri) => {
+  const uriRegex = /^(rtsp|http|https):\/\/[^\s/$.?#].[^\s]*$/;
+  return uriRegex.test(uri);
+};