@eohjsc/react-native-smart-city 0.3.6 → 0.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.06",
+  "version": "0.3.09",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -193,7 +193,7 @@
     "react-native-udp": "^4.1.3",
     "react-native-unimodules": "^0.11.0",
     "react-native-version-check": "^3.4.2",
-    "react-native-vlc-media-player": "^1.0.39",
+    "react-native-vlc-media-player": "^1.0.41",
     "react-native-webview": "11.17.2",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",

package/src/commons/Device/ItemDevice.js

@@ -39,7 +39,8 @@ const ItemDevice = memo(
     const isNetworkConnected = useSCContextSelector(
       (state) => state.app.isNetworkConnected
     );
-    const { isConnected: isGGHomeConnected } = useGGHomeDeviceConnected(sensor);
+    const { isConnected: isGGHomeConnected, isConnecting: isGGHomeConnecting } =
+      useGGHomeDeviceConnected(sensor);
 
     const goToSensorDisplay = useCallback(() => {
       navigation.navigate(Routes.DeviceDetail, {
@@ -68,8 +69,21 @@ const ItemDevice = memo(
           : isGGHomeConnected
         : isConnectedViaInternet || isConnectedViaBLE;
 
-    const borderColor = isConnected ? Colors.Gray4 : Colors.Red6;
-    const textConnected = isConnected ? t('connected') : t('disconnected');
+    const isConnecting =
+      !!sensor &&
+      sensor?.is_other_device &&
+      sensor?.device_type !== DEVICE_TYPE.LG_THINQ
+        ? isGGHomeConnecting
+        : false;
+
+    const borderColor =
+      isConnected || isConnecting ? Colors.Gray4 : Colors.Red6;
+
+    const textConnected = isConnected
+      ? t('connected')
+      : isConnecting
+      ? ''
+      : t('disconnected');
 
     return (
       <TouchableWithoutFeedback

package/src/commons/MediaPlayerDetail/index.js

@@ -99,6 +99,7 @@ const MediaPlayerDetail = ({
     return (
       <VLCPlayer
         autoAspectRatio={true}
+        resizeMode="cover"
         videoAspectRatio={
           amount
             ? `${getWidthHeight().width}:${getWidthHeight().height}`

package/src/configs/Constants.js

@@ -69,6 +69,7 @@ export const Constants = {
   FONT_PREFIX,
   isIphoneX,
   DEEP_LINK,
+  URL_STREAM_BALCONY_CAMERA,
 };
 
 export const DEVICE_TYPE = {
@@ -829,3 +830,6 @@ export const PROBLEM_CODE = {
   UNKNOWN_ERROR: 'UNKNOWN_ERROR',
   CANCEL_ERROR: 'CANCEL_ERROR',
 };
+
+const URL_STREAM_BALCONY_CAMERA =
+  'rtsp://admin:Eoh@2020@101.99.33.220:30554/main';

package/src/context/actionType.ts

@@ -17,6 +17,7 @@ export const Action = {
   SET_STARRED_SCRIPTS: 'SET_STARRED_SCRIPTS',
   STAR_SCRIPT: 'STAR_SCRIPT',
   UNSTAR_SCRIPT: 'UNSTAR_SCRIPT',
+  CONNECTING_GOOGLE_HOME: 'CONNECTING_GOOGLE_HOME',
   SET_GOOGLE_HOME_CONNECTIONS: 'SET_GOOGLE_HOME_CONNECTIONS',
   CHANGE_GOOGLE_HOME_CONN_STATE: 'CHANGE_GOOGLE_HOME_CONN_STATE',
 };
@@ -79,6 +80,7 @@ export type AppType = {
 
 export type IoTType = {
   googlehome: {
+    isConnecting: boolean;
     connections: {};
   };
 };

package/src/context/mockStore.ts

@@ -32,6 +32,7 @@ export const mockDataStore: ContextData = {
     starredScriptIds: [],
   },
   iot: {
+    isConnecting: false,
     googlehome: {},
   },
 };

package/src/context/reducer.ts

@@ -256,6 +256,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           ...currentState.iot,
           googlehome: {
             ...currentState.iot.googlehome,
+            isConnecting: false,
             connections: payload,
           },
         },
@@ -267,6 +268,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           ...currentState.iot,
           googlehome: {
             ...currentState.iot.googlehome,
+            isConnecting: false,
             connections: {
               ...currentState.iot.googlehome.connections,
               [payload.option.chip_id]: payload.data,
@@ -274,6 +276,17 @@ export const reducer = (currentState: ContextData, action: Action) => {
           },
         },
       };
+    case Action.CONNECTING_GOOGLE_HOME:
+      return {
+        ...currentState,
+        iot: {
+          ...currentState.iot,
+          googlehome: {
+            ...currentState.iot.googlehome,
+            isConnecting: true,
+          },
+        },
+      };
 
     default:
       return currentState;

package/src/hooks/Common/useGGHomeDeviceConnected.js

@@ -1,8 +1,8 @@
 import { useSCContextSelector } from '../../context';
 
 const useGGHomeDeviceConnected = (device) => {
-  const connections = useSCContextSelector(
-    (state) => state.iot.googlehome.connections
+  const { connections, isConnecting } = useSCContextSelector(
+    (state) => state.iot.googlehome
   );
 
   const isConnected =
@@ -10,7 +10,7 @@ const useGGHomeDeviceConnected = (device) => {
     device.chip_id in connections &&
     !!connections[device.chip_id];
 
-  return { isConnected };
+  return { isConnected, isConnecting };
 };
 
 export default useGGHomeDeviceConnected;

package/src/hooks/IoT/__test__/useGGHomeConnection.test.js

@@ -167,7 +167,8 @@ describe('Test useGGHomeConnection', () => {
     await act(async () => {
       await result.current.connectGoogleHome(options);
     });
-    expect(mockedSetAction).toBeCalledTimes(2);
+    expect(mockedSetAction).toBeCalledTimes(3);
+    expect(mockedSetAction).toBeCalledWith(Action.CONNECTING_GOOGLE_HOME);
     expect(mockedSetAction).toBeCalledWith(
       Action.SET_GOOGLE_HOME_CONNECTIONS,
       conns

package/src/hooks/IoT/useGGHomeConnection.js

@@ -63,6 +63,7 @@ const useGGHomeConnection = () => {
 
   const connectGoogleHome = useCallback(
     async (options) => {
+      setAction(Action.CONNECTING_GOOGLE_HOME);
       await googleHomeConnect(
         connections,
         options,
@@ -71,6 +72,7 @@ const useGGHomeConnection = () => {
         onReconnected
       );
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [connections, onEstablished, onDisconnected, onReconnected]
   );
 

package/src/screens/Device/components/SensorConnectStatusViewHeader.js

@@ -2,65 +2,84 @@ import React from 'react';
 import { ConnectedViewHeader, DisconnectedView } from '../../../commons/Device';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
-export const SensorConnectStatusViewHeader = (props) => {
-  if (!!props.sensor && !props.sensor?.is_other_device) {
-    if (props.connected) {
+export const SensorConnectStatusViewHeader = ({
+  sensor,
+  connectedViaNetwork,
+  connectedViaBle,
+  isDeviceHasBle,
+  connectedViaGGHome,
+  isGGHomeConnecting,
+  lastUpdated,
+  isDisplayTime,
+  showWindDirection,
+  children,
+}) => {
+  const isConnecting =
+    !!sensor &&
+    sensor?.is_other_device &&
+    sensor?.device_type !== DEVICE_TYPE.LG_THINQ
+      ? isGGHomeConnecting
+      : false;
+
+  if (isConnecting) {
+    return <></>;
+  }
+
+  if (!!sensor && !sensor?.is_other_device) {
+    if (connectedViaNetwork) {
       return (
         <>
           <ConnectedViewHeader
-            lastUpdated={props.lastUpdated}
-            isDisplayTime={props.isDisplayTime}
-            showWindDirection={props.showWindDirection}
+            lastUpdated={lastUpdated}
+            isDisplayTime={isDisplayTime}
+            showWindDirection={showWindDirection}
           />
-          {props.children}
+          {children}
         </>
       );
-    } else if (props.connectedBlt) {
+    } else if (connectedViaBle) {
       return (
         <>
           <ConnectedViewHeader
-            lastUpdated={props.lastUpdated}
+            lastUpdated={lastUpdated}
             type={'Bluetooth'}
-            isDisplayTime={props.isDisplayTime}
-            showWindDirection={props.showWindDirection}
+            isDisplayTime={isDisplayTime}
+            showWindDirection={showWindDirection}
           />
-          {props.children}
+          {children}
         </>
       );
     } else {
       return (
-        <DisconnectedView
-          sensor={props.sensor}
-          isDeviceHasBle={props.isDeviceHasBle}
-        />
+        <DisconnectedView sensor={sensor} isDeviceHasBle={isDeviceHasBle} />
       );
     }
   } else {
-    if (props.sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return (
         <>
-          <ConnectedViewHeader lastUpdated={props.lastUpdated} />
-          {props.children}
+          <ConnectedViewHeader lastUpdated={lastUpdated} />
+          {children}
         </>
       );
     } else {
-      if (props.isGGHomeConnected) {
+      if (connectedViaGGHome) {
         return (
           <>
             <ConnectedViewHeader
-              lastUpdated={props.lastUpdated}
-              isDisplayTime={props.isDisplayTime}
+              lastUpdated={lastUpdated}
+              isDisplayTime={isDisplayTime}
               type={'GoogleHome'}
             />
-            {props.children}
+            {children}
           </>
         );
       } else {
         return (
           <DisconnectedView
-            sensor={props.sensor}
+            sensor={sensor}
             type={'GoogleHome'}
-            isDeviceHasBle={props.isDeviceHasBle}
+            isDeviceHasBle={isDeviceHasBle}
           />
         );
       }

package/src/screens/Device/detail.js

@@ -93,7 +93,8 @@ const DeviceDetail = ({ route }) => {
   const isBluetoothEnabled = useSCContextSelector((state) => {
     return state.app.isBluetoothEnabled;
   });
-  const { isConnected: isGGHomeConnected } = useGGHomeDeviceConnected(sensor);
+  const { isConnected: isGGHomeConnected, isConnecting: isGGHomeConnecting } =
+    useGGHomeDeviceConnected(sensor);
 
   const isDeviceConnectedViaBle = useMemo(
     () =>
@@ -568,11 +569,13 @@ const DeviceDetail = ({ route }) => {
     return (
       <SensorConnectStatusViewHeader
         sensor={sensor}
-        connected={isNetworkConnected && isConnected}
-        connectedBlt={
+        connectedViaNetwork={isNetworkConnected && isConnected}
+        connectedViaBle={
           (!isNetworkConnected || (isNetworkConnected && !isConnected)) &&
           isDeviceConnectedViaBle
         }
+        connectedViaGGHome={isGGHomeConnected}
+        isGGHomeConnecting={isGGHomeConnecting}
         lastUpdated={lastUpdated}
         isDisplayTime={isShowSetupEmergencyContact ? false : isDisplayTime}
         showWindDirection={showWindDirection}

package/src/screens/PlayBackCamera/index.js

@@ -62,39 +62,42 @@ const PlayBackCamera = () => {
     dateTemp = date;
   }, [selected]);
 
-  const onChangeValue = (value, selectedTime) => {
-    if (!isFirstTime) {
-      const currentTime =
-        parseFloat(arrHourTemp[0]) +
-        parseFloat(arrHourTemp[1] / 60) +
-        parseFloat(arrHourTemp[2] / 3600);
-      setPaused(true);
-      const t1 = value / 96;
-      const t2 = t1.toString().split('.');
-      const t3 = parseFloat('0.' + t2[1]) * 60;
-      const t4 = t3.toString().split('.');
-      const t5 = parseInt(parseFloat('0.' + t4[1]) * 60, 10);
-      const h = t2[0] < 10 ? '0' + t2[0] : t2[0];
-      const m = t4[0] < 10 ? '0' + t4[0] : t4[0];
-      const s = t5 < 10 ? '0' + t5 : t5;
-      setHour({ h, m, s });
-      if (value + 0.5 > currentTime * 96 && selectedTime === now) {
-        setUri(item?.configuration?.uri);
-      } else {
-        const playback = item?.configuration?.playback || '';
-        const date = selectedTime.split('-');
-        setUri(
-          `${playback.split('=')[0]}=${date[0]}${date[1]}${
-            date[2]
-          }T${h}${m}${s}Z`
-        );
+  const onChangeValue = useCallback(
+    (value, selectedTime) => {
+      if (!isFirstTime) {
+        const currentTime =
+          parseFloat(arrHourTemp[0]) +
+          parseFloat(arrHourTemp[1] / 60) +
+          parseFloat(arrHourTemp[2] / 3600);
+        setPaused(true);
+        const t1 = value / 96;
+        const t2 = t1.toString().split('.');
+        const t3 = parseFloat('0.' + t2[1]) * 60;
+        const t4 = t3.toString().split('.');
+        const t5 = parseInt(parseFloat('0.' + t4[1]) * 60, 10);
+        const h = t2[0] < 10 ? '0' + t2[0] : t2[0];
+        const m = t4[0] < 10 ? '0' + t4[0] : t4[0];
+        const s = t5 < 10 ? '0' + t5 : t5;
+        setHour({ h, m, s });
+        if (value + 0.5 > currentTime * 96 && selectedTime === now) {
+          setUri(item?.configuration?.uri);
+        } else {
+          const playback = item?.configuration?.playback || '';
+          const date = selectedTime.split('-');
+          setUri(
+            `${playback.split('=')[0]}=${date[0]}${date[1]}${
+              date[2]
+            }T${h}${m}${s}Z`
+          );
+        }
+        const to = setTimeout(() => {
+          setPaused(false);
+          clearTimeout(to);
+        }, 100);
       }
-      const to = setTimeout(() => {
-        setPaused(false);
-        clearTimeout(to);
-      }, 100);
-    }
-  };
+    },
+    [arrHourTemp, item?.configuration, now]
+  );
 
   useEffect(() => {
     setPaused(true);

package/src/screens/Unit/Detail.js

@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { VLCPlayer } from 'react-native-vlc-media-player';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './styles';
@@ -39,6 +38,7 @@ import SubUnitAutomate from '../../commons/SubUnit/OneTap';
 import SubUnitFavorites from '../../commons/SubUnit/Favorites';
 import {
   AUTOMATE_TYPE,
+  Constants,
   NOTIFICATION_TYPES,
   TESTID,
 } from '../../configs/Constants';
@@ -47,6 +47,7 @@ import {
   unwatchNotificationData,
 } from '../../utils/Monitor';
 import PreventAccess from '../../commons/PreventAccess';
+import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
@@ -315,11 +316,11 @@ const UnitDetail = ({ route }) => {
     >
       {/* NOTE: This is a trick to fix camera not full screen on first open app */}
       {isFirstOpenCamera && (
-        <VLCPlayer
-          source={{
-            uri: 'rtsp://admin:Eoh@2020@101.99.33.220:30554/main',
-          }}
-          style={styles.camera}
+        <MediaPlayerDetail
+          uri={Constants.URL_STREAM_BALCONY_CAMERA}
+          isPaused={false}
+          width={1}
+          height={1}
         />
       )}
 

package/src/screens/Unit/__test__/Detail.test.js

@@ -398,7 +398,7 @@ describe('Test UnitDetail', () => {
         el.type === TouchableOpacity
     );
 
-    expect(goDetailButton).toHaveLength(1);
+    expect(goDetailButton).toHaveLength(2);
     await act(async () => {
       await goDetailButton[0].props.onPress();
     });