@eohjsc/react-native-smart-city 0.2.58 → 0.2.59

package/package.json

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

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -0,0 +1,139 @@
+import React, { memo, useCallback, useState } from 'react';
+import { TouchableOpacity, View, Switch, Image } from 'react-native';
+import { Icon } from '@ant-design/react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import styles from './CurtainButtonTemplateStyle';
+import Text from '../Text';
+import { TESTID } from '../../configs/Constants';
+import { Colors, Images } from '../../configs';
+import { Section } from '../../commons/Section';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+const CurtainButtonTemplate = memo(({ actionGroup, doAction }) => {
+  const t = useTranslations();
+  const { configuration } = actionGroup;
+  const [lock, setLock] = useState(false);
+
+  const onButtonOpenPress = useCallback(
+    () => doAction(configuration.open_action_data),
+    [configuration.open_action_data, doAction]
+  );
+  const onButtonStopPress = useCallback(
+    () => doAction(configuration.stop_action_data),
+    [configuration.stop_action_data, doAction]
+  );
+  const onButtonClosePress = useCallback(
+    () => doAction(configuration.close_action_data),
+    [configuration.close_action_data, doAction]
+  );
+  const onChangeSwitch = useCallback(() => {
+    if (lock) {
+      setLock(false);
+      doAction(configuration.action_off_data);
+      return;
+    }
+    doAction(configuration.action_on_data);
+    setLock(true);
+  }, [
+    configuration.action_off_data,
+    configuration.action_on_data,
+    doAction,
+    lock,
+  ]);
+
+  const RenderThreeButtonActions = () => {
+    const buttons = [
+      {
+        style: styles.buttonActionCurtain,
+        icon: Images.buttonLeftCurtain,
+        text: configuration.text1,
+        onPress: onButtonOpenPress,
+        testID: TESTID.BUTTON_TEMPLATE_1,
+      },
+      {
+        style: styles.buttonActionCurtainCenter,
+        icon: Images.buttonPauseCurtain,
+        text: configuration.text2,
+        onPress: onButtonStopPress,
+        testID: TESTID.BUTTON_TEMPLATE_2,
+      },
+      {
+        style: styles.buttonActionCurtain,
+        icon: Images.buttonRightCurtain,
+        text: configuration.text3,
+        onPress: onButtonClosePress,
+        testID: TESTID.BUTTON_TEMPLATE_3,
+      },
+    ];
+
+    return (
+      <>
+        {buttons.map((item, index) => (
+          <TouchableOpacity
+            testID={item.testID}
+            style={item.style}
+            onPress={item.onPress}
+            underlayColor={Colors.Gray2}
+          >
+            <Image source={item.icon} />
+          </TouchableOpacity>
+        ))}
+      </>
+    );
+  };
+  const itemLock = (icon, color) => {
+    return (
+      <>
+        <View style={styles.lockDoor}>
+          <Icon name={icon} size={15} color={color} style={styles.iconLock} />
+          <Text
+            style={styles.textLockDoor}
+            testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
+          >
+            {configuration.text_door_lock}{' '}
+          </Text>
+        </View>
+        <Switch
+          trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
+          thumbColor={Colors.White}
+          ios_backgroundColor={Colors.Gray4}
+          onValueChange={onChangeSwitch}
+          value={lock}
+        />
+      </>
+    );
+  };
+  return (
+    <>
+      <View style={styles.wrap}>
+        <RenderThreeButtonActions />
+      </View>
+      <View style={styles.lockSwitch}>
+        {configuration.is_display_lock &&
+          itemLock(
+            lock ? 'lock' : 'unlock',
+            lock ? Colors.Primary : Colors.Gray6
+          )}
+      </View>
+      <Section style={styles.section}>
+        <View style={styles.reminderOption}>
+          <Text type="H4" color={Colors.Gray8}>
+            {t('schedule')}
+          </Text>
+          <TouchableOpacity>
+            <IconOutline name="plus" size={20} />
+          </TouchableOpacity>
+        </View>
+        <View>
+          <TouchableOpacity style={styles.tapToAddSchedule}>
+            <Text type="Body" color={Colors.Gray6} center>
+              {t('tap_to_add_new_schedule')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </Section>
+    </>
+  );
+});
+
+export default CurtainButtonTemplate;

package/src/commons/ActionGroup/CurtainButtonTemplateStyle.js

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    paddingVertical: 30,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  lockSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 7,
+  },
+  iconLock: {
+    paddingBottom: 7,
+  },
+  textLockDoor: {
+    paddingLeft: 12,
+    height: 24,
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  lockDoor: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingLeft: 5,
+  },
+  section: {
+    marginHorizontal: 20,
+    borderRadius: 10,
+  },
+  reminderOption: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  tapToAddSchedule: {
+    paddingVertical: 50,
+  },
+  buttonActionCurtain: {
+    flex: 1,
+    aspectRatio: 1,
+    marginHorizontal: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonActionCurtainCenter: {
+    flex: 1,
+    aspectRatio: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 15,
+  },
+});

package/src/commons/ActionGroup/__test__/CurtainButtonTemplate.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import CurtainButtonTemplate from '../CurtainButtonTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <CurtainButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+  </SCProvider>
+);
+
+describe('Test CurtainButtonTemplate', () => {
+  const actionGroup = {
+    configuration: {
+      action1: '2b949045-8e03-4c07-a855-7794ade2e69c',
+      action1_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'caret-up',
+        id: 9,
+        key: '2b949045-8e03-4c07-a855-7794ade2e69c',
+      },
+      action2: '38347d5e-4418-4ab0-978c-c82f4c034897',
+      action2_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'stop',
+        id: 11,
+        key: '38347d5e-4418-4ab0-978c-c82f4c034897',
+      },
+      action3: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+      action3_data: {
+        color: '#00979D',
+        command_prefer_over_bluetooth: true,
+        command_prefer_over_googlehome: false,
+        command_prefer_over_internet: false,
+        googlehome_actions: [],
+        icon: 'caret-down',
+        id: 10,
+        key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
+      },
+      icon1: 'caret-up',
+      icon2: 'stop',
+      icon3: 'caret-down',
+      text1: 'UP',
+      text2: 'STOP/UNLOCK',
+      text3: 'DOWN',
+      id: 1,
+      template: 'curtain_button_action_template',
+    },
+  };
+
+  let wrapper;
+
+  test('render CurtainButtonTemplate', async () => {
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup));
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities.length).toEqual(5);
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -8,6 +8,7 @@ import NumberUpDownActionTemplate from './NumberUpDownActionTemplate';
 import OptionsDropdownActionTemplate from './OptionsDropdownActionTemplate';
 import OnOffTemplate from './OnOffTemplate';
 import TimerActionTemplate from './TimerActionTemplate';
+import CurtainButtonTemplate from './CurtainButtonTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -29,6 +30,8 @@ export const getActionComponent = (template) => {
       return OptionsDropdownActionTemplate;
     case 'TimerActionTemplate':
       return TimerActionTemplate;
+    case 'curtain_action_template':
+      return CurtainButtonTemplate;
     default:
       return null;
   }

package/src/commons/Form/CurrencyInput.js

@@ -4,6 +4,7 @@ import {
   TextInput,
   StyleSheet,
   TouchableWithoutFeedback,
+  Platform,
 } from 'react-native';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -117,7 +118,12 @@ const CurrencyInput = ({
       : formattedValue;
   }, [formattedValue, startingWithSign]);
 
-  const currencyMarginLeft = textInputValue.toString().length < 2 ? -12 : 0;
+  const currencyMarginLeft = useMemo(() => {
+    if (Platform.OS === 'ios') {
+      return 5;
+    }
+    return textInputValue.toString().length < 2 ? -12 : 0;
+  }, [textInputValue]);
 
   return (
     <TouchableWithoutFeedback onPress={focusInput}>

package/src/commons/MediaPlayerDetail/Styles/MediaPlayerDetailStyles.js

@@ -68,4 +68,8 @@ export default StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  firstOpenCamera: {
+    zIndex: -10,
+    position: 'absolute',
+  },
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -1,5 +1,19 @@
-import React, { memo, useCallback, useState, useEffect } from 'react';
-import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import React, {
+  memo,
+  useCallback,
+  useState,
+  useEffect,
+  useContext,
+  useMemo,
+} from 'react';
+import {
+  Image,
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -9,6 +23,8 @@ import { colorOpacity } from '../../utils/Converter/color';
 import styles from './Styles/MediaPlayerDetailStyles';
 import FImage from '../../commons/FImage';
 import { TESTID } from '../../configs/Constants';
+import { SCContext, useSCContextSelector } from '../../context';
+import { Action } from '../../context/actionType';
 
 const MediaPlayerDetail = ({
   uri,
@@ -16,7 +32,6 @@ const MediaPlayerDetail = ({
   thumbnail,
   style,
   wrapStyles,
-  resizeMode = 'none',
   amount,
   handleFullScreen,
   isPaused = true,
@@ -25,6 +40,10 @@ const MediaPlayerDetail = ({
   width,
   height,
 }) => {
+  const { setAction } = useContext(SCContext);
+  const isFirstOpenCamera = useSCContextSelector(
+    (state) => state.app.isFirstOpenCamera
+  );
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
   const onTapPause = useCallback(() => {
@@ -72,13 +91,63 @@ const MediaPlayerDetail = ({
     };
   }, [amount]);
 
+  const renderCamera = useMemo(() => {
+    return (
+      <VLCPlayer
+        autoAspectRatio={true}
+        videoAspectRatio={
+          width && height
+            ? `${width}:${height}`
+            : `${getWidthHeight().width}:${getWidthHeight().height}`
+        }
+        source={{
+          initType: 2,
+          hwDecoderEnabled: 1,
+          hwDecoderForced: 1,
+          uri,
+          initOptions: [
+            '--no-audio',
+            '--rtsp-tcp',
+            '--network-caching=150',
+            '--rtsp-caching=150',
+            '--no-stats',
+            '--tcp-caching=150',
+            '--realrtsp-caching=150',
+          ],
+        }}
+        style={[
+          styles.player,
+          style,
+          {
+            width: width || getWidthHeight().width,
+            height: height || getWidthHeight().height,
+          },
+          isFirstOpenCamera && styles.firstOpenCamera,
+        ]}
+        isLive={true}
+      />
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, isFirstOpenCamera]);
+
   useEffect(() => {
     setPaused(isPaused);
   }, [isPaused]);
 
+  useEffect(() => {
+    if (isFirstOpenCamera) {
+      const to = setTimeout(() => {
+        setAction(Action.IS_FIRST_OPEN_CAMERA, false);
+        clearTimeout(to);
+      }, 500);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFirstOpenCamera]);
+
   const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={[styles.wrap, wrapStyles]}>
+      {isFirstOpenCamera && Platform.OS === 'ios' && renderCamera}
       <View style={[styles.loadingWrap]}>
         <Text style={styles.loadingText}>{t('loading')}</Text>
       </View>
@@ -103,42 +172,7 @@ const MediaPlayerDetail = ({
             />
           </View>
         ) : (
-          <VLCPlayer
-            autoAspectRatio={true}
-            videoAspectRatio={
-              width && height
-                ? `${width}:${height}`
-                : `${getWidthHeight().width}:${getWidthHeight().height}`
-            }
-            source={{
-              initType: 2,
-              hwDecoderEnabled: 1,
-              hwDecoderForced: 1,
-              uri,
-              initOptions: [
-                '--no-audio',
-                '--rtsp-tcp',
-                '--network-caching=150',
-                '--rtsp-caching=150',
-                '--no-stats',
-                '--tcp-caching=150',
-                '--realrtsp-caching=150',
-                // '--avcodec-threads=20',
-                // '--live-cacheing=150',
-              ],
-            }}
-            style={[
-              styles.player,
-              style,
-              {
-                width: width || getWidthHeight().width,
-                height: height || getWidthHeight().height,
-              },
-            ]}
-            // resizeMode={resizeMode}
-            isLive={true}
-            // playInBackground={true}
-          />
+          renderCamera
         )}
 
         <View style={styles.buttonView}>

package/src/commons/SearchLocation/index.js

@@ -23,7 +23,6 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
         onChangeText={onTextInput}
         placeholder={t('choose_location')}
         placeholderTextColor={Colors.Gray6}
-        underlineColorAndroid={null}
       />
     </View>
   );

package/src/commons/SubUnit/ShortDetail.js

@@ -84,7 +84,7 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
   const itemAddNewTitle = t(
     station?.isFavorites
       ? 'add_to_favorites'
-      : station?.name === SubUnitName.scenario
+      : station?.name === SubUnitName.smart
       ? 'add_script'
       : 'add_new'
   );

package/src/configs/API.js

@@ -179,9 +179,9 @@ const API = {
     },
   },
   NOTIFICATION: {
-    LIST_ALL_NOTIFICATIONS: (page, type) =>
-      SCConfig.apiRoot + `/notifications/root/?page=${page}&type=${type}`,
-    SET_READ: (id) => SCConfig.apiRoot + `/notifications/root/${id}/set_read/`,
+    LIST_EOH_NOTIFICATIONS: (page, type) =>
+      SCConfig.apiRoot + `/notifications/eoh/?page=${page}&type=${type}`,
+    SET_READ: (id) => SCConfig.apiRoot + `/notifications/eoh/${id}/set_read/`,
   },
   EXTERNAL: {
     GOOGLE_MAP: {
@@ -189,6 +189,8 @@ const API = {
         'https://maps.googleapis.com/maps/api/place/autocomplete/json',
       GET_LAT_LNG_BY_PLACE_ID:
         'https://maps.googleapis.com/maps/api/place/details/json',
+      GET_LOCATION_FROM_LAT_LNG:
+        'https://maps.googleapis.com/maps/api/geocode/json',
     },
   },
   SMART_ACCOUNT: {

package/src/configs/Constants.js

@@ -84,7 +84,7 @@ export const SCANNING_STATUS = {
 };
 
 export const SubUnitName = {
-  scenario: 'Kịch Bản',
+  smart: 'Kịch Bản',
 };
 
 export const AUTOMATE_TYPE = {
@@ -572,6 +572,10 @@ export const TESTID = {
   // ThreeButtonHistory
   HISTORY_BUTTON: 'HISTORY_BUTTON',
   HISTORY_CALENDAR: 'HISTORY_CALENDAR',
+
+  // SelectAddress
+  BUTTON_YOUR_LOCATION: 'BUTTON_YOUR_LOCATION',
+  BUTTON_CHOOSE_ON_MAP: 'BUTTON_CHOOSE_ON_MAP',
 };
 
 export const NOTIFICATION_TYPES = {

package/src/configs/Images.js

@@ -7,4 +7,7 @@ export default {
   file: require('../Images/Common/file.png'),
   activeButton: require('../Images/Common/ActiveButton.png'),
   logo: require('../Images/Common/logo.png'),
+  buttonPauseCurtain: require('../Images/Common/buttonPause-center-curtain.png'),
+  buttonLeftCurtain: require('../Images/Common/buttonLeftCurtain.png'),
+  buttonRightCurtain: require('../Images/Common/buttonRightCurtain.png'),
 };

package/src/context/actionType.ts

@@ -4,6 +4,7 @@ export const Action = {
   STORE_STATUS_BAR: 'STORE_STATUS_BAR',
   LIST_DEVICE_TYPES: 'LIST_DEVICE_TYPES',
   LIST_ACTION: 'LIST_ACTION',
+  IS_FIRST_OPEN_CAMERA: 'IS_FIRST_OPEN_CAMERA',
 };
 
 export type AuthData = {
@@ -44,3 +45,7 @@ export type ActionDataMap = {
   LIST_DEVICE_TYPES: ListDevice;
   LIST_ACTION: ListAction;
 };
+
+export type AppType = {
+  isFirstOpenCamera: boolean;
+};

package/src/context/mockStore.ts

@@ -47,5 +47,8 @@ export const mockSCStore = (data: ContextData): ContextData => {
       barStyle: data?.statusBar?.barStyle || mockDataStore?.statusBar?.barStyle,
     },
     listAction: [...mockDataStore.listAction, ...(data?.listAction || [])],
+    app: {
+      isFirstOpenCamera: true,
+    },
   };
 };

package/src/context/reducer.ts

@@ -7,6 +7,7 @@ import {
   Action,
   ListDevice,
   ListAction,
+  AppType,
 } from './actionType';
 
 export type ContextData = {
@@ -15,6 +16,7 @@ export type ContextData = {
   listDevice: ListDevice;
   listAction: ListAction;
   statusBar: StatusBar;
+  app: AppType;
 };
 
 export type Action = {
@@ -35,6 +37,9 @@ export const initialState = {
   statusBar: {} as StatusBar,
   listDevice: {} as ListDevice,
   listAction: [] as ListAction,
+  app: {
+    isFirstOpenCamera: true,
+  },
 };
 
 export const reducer = (currentState: ContextData, action: Action) => {
@@ -83,6 +88,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
       }
 
       return { ...currentState, listAction: newListAction };
+
+    case Action.IS_FIRST_OPEN_CAMERA:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          isFirstOpenCamera: payload,
+        },
+      };
     default:
       return currentState;
   }