@eohjsc/react-native-smart-city 0.4.76 → 0.4.78

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import styles from '../styles/ConfigValueStyles';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import Text from '../../../Text';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import { EvaluationConfigWrapper } from '../EvaluationOverConfig/EvaluationOverConfig';
@@ -17,7 +17,15 @@ const ConfigAndEvaluationDisplay = memo(
             <IconComponent icon={icon_kit || icon} />
           </View>
           <View style={styles.rowTop}>
-            <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+            <Text
+              numberOfLines={1}
+              semibold
+              style={
+                Platform.OS === 'ios' ? styles.iosStyle : styles.androidStyle
+              }
+            >
+              {stationItem?.configuration?.config_data?.name}
+            </Text>
           </View>
           <View style={styles.rowBottom}>
             <Text style={styles.textValue} bold>

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

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import styles from '../styles/ConfigValueStyles';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
 import { useWatchConfigs } from '../../../../hooks/IoT';
@@ -25,7 +25,15 @@ const ConfigValue = ({ device, stationItem }) => {
           <IconComponent icon={icon_kit || icon} />
         </View>
         <View style={styles.rowTop}>
-          <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+          <Text
+            numberOfLines={1}
+            semibold
+            style={
+              Platform.OS === 'ios' ? styles.iosStyle : styles.androidStyle
+            }
+          >
+            {stationItem?.configuration?.config_data?.name}
+          </Text>
         </View>
         <View style={styles.rowBottom}>
           <Text style={styles.textValue} bold>

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

@@ -3,18 +3,14 @@ import { getTemplate } from './';
 import ItemDeviceWrapper from '../../Device/ItemDeviceWrapper';
 
 export const DeviceTemplate = memo(
-  ({ device, stationItem, unit, station, index }) => {
+  ({ device, stationItem, unit, station, key }) => {
     const Template = getTemplate(stationItem);
     if (!Template) {
       return null;
     }
     return (
       <ItemDeviceWrapper device={device} unit={unit} station={station}>
-        <Template.Display
-          device={device}
-          stationItem={stationItem}
-          index={index}
-        />
+        <Template.Display device={device} stationItem={stationItem} key={key} />
       </ItemDeviceWrapper>
     );
   }

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

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import styles from '../styles/ConfigValueStyles';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
 import {
@@ -54,7 +54,15 @@ const EvaluationOverConfigDisplay = memo(
             <IconComponent icon={icon_kit || icon} />
           </View>
           <View style={styles.rowTop}>
-            <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+            <Text
+              numberOfLines={1}
+              semibold
+              style={
+                Platform.OS === 'ios' ? styles.iosStyle : styles.androidStyle
+              }
+            >
+              {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,
   },
@@ -31,4 +32,14 @@ export default StyleSheet.create({
   marginTop10: {
     marginTop: 10,
   },
+  iosStyle: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  androidStyle: {
+    fontSize: 14,
+    lineHeight: 22,
+    includeFontPadding: false,
+    marginBottom: 8,
+  },
 });

package/src/commons/SubUnit/ShortDetail.js

@@ -106,13 +106,12 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
     });
   };
 
-  const renderSubUnitItem = (device, stationItem, index) => {
+  const renderSubUnitItem = (device, stationItem) => {
     return (
       <DeviceTemplate
         device={device}
         stationItem={stationItem}
-        index={index}
-        key={index}
+        key={`device-template-${stationItem.id}`}
         unit={unit}
         station={station}
       />
@@ -126,7 +125,7 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
 
     return station.devices
       .map((device, index) => {
-        const displays = [];
+        let displays = [];
         if (device.device_type === DEVICE_TYPE.HANET) {
           displays.push(
             <ItemHanetDevice
@@ -157,7 +156,7 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
             />
           );
         }
-        if (device.station_items) {
+        if (device.station_items?.length) {
           displays.push(
             ...device.station_items.map(renderSubUnitItem.bind(device, device))
           );

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);
+};