@eohjsc/react-native-smart-city 0.2.56 → 0.2.60

package/src/commons/FourButtonFilterHistory/index.js

@@ -0,0 +1,72 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './styles';
+
+const FourButtonFilterHistory = memo(({ groupBy, setGroupBy }) => {
+  const listItem = useMemo(
+    () => [
+      {
+        title: 'D',
+        data: 'date',
+      },
+
+      {
+        title: 'W',
+        data: 'week',
+      },
+
+      {
+        title: 'M',
+        data: 'month',
+      },
+
+      {
+        title: 'Y',
+        data: 'year',
+      },
+    ],
+    []
+  );
+
+  const ItemButton = memo(({ title, onPress, isSelected }) => {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={[styles.button, isSelected && styles.selectedButton]}
+      >
+        <View>
+          <Text bold color={isSelected && Colors.Primary}>
+            {title}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  const onPressButton = useCallback(
+    (data) => () => {
+      setGroupBy(data);
+    },
+    [setGroupBy]
+  );
+
+  return (
+    <View style={styles.row}>
+      {listItem &&
+        listItem.map((item, index) => {
+          return (
+            <ItemButton
+              key={index}
+              title={item.title}
+              onPress={onPressButton(item.data)}
+              isSelected={item.data === groupBy}
+            />
+          );
+        })}
+    </View>
+  );
+});
+
+export default FourButtonFilterHistory;

package/src/commons/FourButtonFilterHistory/styles.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.Gray4,
+    borderRadius: 5,
+    padding: 2,
+  },
+  button: {
+    width: 31,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 5,
+  },
+  selectedButton: {
+    backgroundColor: Colors.White,
+  },
+});

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

@@ -68,4 +68,18 @@ export default StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  firstOpenCamera: {
+    zIndex: -9999,
+    position: 'absolute',
+    width: 1,
+    height: 1,
+  },
+  loading: {
+    position: 'absolute',
+    zIndex: 10,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -1,7 +1,21 @@
-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,
+  ActivityIndicator,
+} from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
@@ -10,174 +24,203 @@ 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 = memo(
-  ({
-    uri,
-    cameraName,
-    thumbnail,
-    style,
-    wrapStyles,
-    resizeMode = 'none',
-    amount,
-    handleFullScreen,
-    isFullScreen = false,
-    isPaused = true,
-    goToPlayBack,
-    isShowFullScreenIcon = false,
-  }) => {
-    const t = useTranslations();
-    const [paused, setPaused] = useState(isPaused);
-    const onTapPause = useCallback(() => {
-      setPaused(false);
-    }, []);
+const MediaPlayerDetail = ({
+  uri,
+  cameraName,
+  thumbnail,
+  style,
+  wrapStyles,
+  amount,
+  handleFullScreen,
+  isPaused = true,
+  goToPlayBack,
+  isShowFullScreenIcon = false,
+  width,
+  height,
+}) => {
+  const { setAction } = useContext(SCContext);
+  const isFirstOpenCamera = useSCContextSelector(
+    (state) => state.app.isFirstOpenCamera
+  );
+  const t = useTranslations();
+  const [paused, setPaused] = useState(isPaused);
 
-    const onTapGoDetail = useCallback(() => {
-      if (!paused) {
-        setPaused(true);
-      } else {
-        goToPlayBack && goToPlayBack();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [paused]);
+  const onTapPause = useCallback(() => {
+    !isFirstOpenCamera && setPaused(false);
+  }, [isFirstOpenCamera]);
 
-    const onFullScreen = useCallback(() => {
-      handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  const onTapGoDetail = useCallback(() => {
+    if (!paused) {
+      setPaused(true);
+    } else {
+      goToPlayBack && goToPlayBack();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paused]);
 
-    useEffect(() => {
-      setPaused(isPaused);
-    }, [isPaused]);
+  const onFullScreen = useCallback(() => {
+    handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
+  const getWidthHeight = useCallback(() => {
+    let width = 0,
+      height = 0;
+    switch (amount) {
+      case 1:
+        width = Constants.width;
+        height = 224;
+        break;
+      case 4:
+        width = Constants.width / 2;
+        height = 112;
+        break;
+      case 6:
+        width = Constants.width / 3;
+        height = 112;
+        break;
+      default:
+        width = Constants.width - 28;
+        height = 162;
+        break;
+    }
+    return {
+      width,
+      height,
+    };
+  }, [amount]);
+
+  const renderCamera = useMemo(() => {
     return (
-      <View style={[styles.wrap, wrapStyles]}>
-        <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',
+          ],
+        }}
+        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);
+      }, 1000);
+    }
+    // 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.loading}>
+            <ActivityIndicator size={'small'} color={Colors.Primary} />
+          </View>
+        </>
+      )}
+      <View style={[styles.loadingWrap]}>
+        <Text style={styles.loadingText}>{t('loading')}</Text>
+      </View>
+      <TouchableOpacity
+        activeOpacity={1}
+        style={styles.videoBtn}
+        onPress={onTapGoDetail}
+      >
+        {paused ? (
+          <View style={[styles.player, style]}>
+            <FImage
+              source={source}
+              style={[styles.player, style]}
+              defaultSource={Images.BgDevice}
+              resizeMode="cover"
+            />
+            <View
+              style={[
+                StyleSheet.absoluteFillObject,
+                { backgroundColor: colorOpacity(Colors.Black, 0.3) },
+              ]}
+            />
+          </View>
+        ) : (
+          !isFirstOpenCamera && renderCamera
+        )}
+
+        <View style={styles.buttonView}>
+          <View style={styles.buttonPause}>
+            <TouchableOpacity
+              onPress={onTapPause}
+              style={[styles.btn]}
+              activeOpacity={0.8}
+            >
+              {paused && <PauseIcon />}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      {cameraName && paused && (
+        <Text
           style={[
-            styles.loadingWrap,
-            isFullScreen && { transform: [{ rotate: '90deg' }] },
+            styles.cameraName,
+            amount && amount !== 1 && styles.cameraName2,
           ]}
         >
-          <Text style={styles.loadingText}>{t('loading')}</Text>
-        </View>
+          {cameraName}
+        </Text>
+      )}
+      {isShowFullScreenIcon && (
         <TouchableOpacity
-          activeOpacity={1}
-          style={styles.videoBtn}
-          onPress={onTapGoDetail}
+          onPress={onFullScreen}
+          style={[
+            styles.iconFullScreen,
+            (amount === 4 || amount === 6) && styles.iconFullScreen2,
+          ]}
+          testID={TESTID.SUB_UNIT_FULL_CAMERA}
         >
-          {paused ? (
-            <View style={[styles.player, style]}>
-              <FImage
-                source={source}
-                style={[
-                  styles.player,
-                  style,
-                  isFullScreen && {
-                    marginLeft: -Constants.width / 2 - getStatusBarHeight(),
-                    width: Constants.height,
-                    height: Constants.width,
-                    transform: [{ rotate: '90deg' }],
-                  },
-                ]}
-                defaultSource={Images.BgDevice}
-                resizeMode="cover"
-              />
-              <View
-                style={[
-                  StyleSheet.absoluteFillObject,
-                  { backgroundColor: colorOpacity(Colors.Black, 0.3) },
-                ]}
-              />
-            </View>
-          ) : isFullScreen ? (
-            <View style={{ transform: [{ rotate: '90deg' }] }}>
-              <VLCPlayer
-                autoAspectRatio={true}
-                videoAspectRatio={`${Constants.height}:${Constants.width}`}
-                source={{ uri }}
-                style={[
-                  {
-                    width: Constants.height,
-                    height: Constants.width,
-                  },
-                ]}
-              />
-            </View>
-          ) : (
-            <VLCPlayer
-              autoAspectRatio={true}
-              videoAspectRatio={
-                !amount
-                  ? '21:9'
-                  : amount === 1
-                  ? '15:9'
-                  : amount === 4
-                  ? '5:3'
-                  : '10:9'
-              }
-              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]}
-              resizeMode={resizeMode}
-              isLive={true}
-            />
-          )}
-
-          <View style={styles.buttonView}>
-            <View style={styles.buttonPause}>
-              <TouchableOpacity
-                onPress={onTapPause}
-                style={[
-                  styles.btn,
-                  isFullScreen && { transform: [{ rotate: '90deg' }] },
-                ]}
-                activeOpacity={0.8}
-              >
-                {paused && <PauseIcon />}
-              </TouchableOpacity>
-            </View>
-          </View>
+          <Image source={Images.fullscreen} />
         </TouchableOpacity>
+      )}
+    </View>
+  );
+};
 
-        {cameraName && paused && (
-          <Text
-            style={[
-              styles.cameraName,
-              amount && amount !== 1 && styles.cameraName2,
-            ]}
-          >
-            {cameraName}
-          </Text>
-        )}
-        {isShowFullScreenIcon && (
-          <TouchableOpacity
-            onPress={onFullScreen}
-            style={[
-              styles.iconFullScreen,
-              (amount === 4 || amount === 6) && styles.iconFullScreen2,
-            ]}
-            testID={TESTID.SUB_UNIT_FULL_CAMERA}
-          >
-            <Image source={Images.fullscreen} />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  }
-);
-
-export default MediaPlayerDetail;
+export default memo(MediaPlayerDetail);

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/Sharing/RowMember.js

@@ -5,6 +5,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
+import { shortEmailName } from '../../utils/Utils';
 
 import BtnRemoveMember from './BtnRemoveMember';
 
@@ -34,7 +35,9 @@ const RowMember = memo(
       [currentUserId, member.id, ownerId, t]
     );
     const paddingBottom = role ? 16 : 23;
-
+    if (member?.id === ownerId && member?.share_id) {
+      return null;
+    }
     return (
       <View style={styles.rowContainer}>
         <View
@@ -46,7 +49,9 @@ const RowMember = memo(
           <IconOutline name={'user'} size={20} color={Colors.White} />
         </View>
         <View style={[styles.infoContainer, { paddingBottom: paddingBottom }]}>
-          <Text style={styles.textName}>{member.name ?? 'N/A'}</Text>
+          <Text style={styles.textName}>
+            {member?.name || shortEmailName(member.email) || ''}
+          </Text>
           {!!role && (
             <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
           )}

package/src/commons/Sharing/__test__/RowMember.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import RowMember from '../RowMember';
+import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (member, ownerId, currentUserId, mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <RowMember
+      member={member}
+      ownerId={ownerId}
+      currentUserId={currentUserId}
+      onPressRemove={mockFunc}
+    />
+  </SCProvider>
+);
+
+describe('RowMember', () => {
+  let tree;
+  const mockFunc = jest.fn();
+  test('RowMember owner have name', () => {
+    const dataMember = { id: 1, name: 'CEO' };
+    act(() => {
+      tree = renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(Text);
+    expect(textInputs.length).toBe(2);
+    expect(textInputs[0].props.children).toEqual('CEO');
+  });
+  test('RowMember owner dont have name show start of email ', () => {
+    const dataMember = { id: 1, name: '', email: 'abc@gmail.com' };
+    act(() => {
+      tree = renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+    });
+    const instance = tree.root;
+    const textInputs = instance.findAllByType(Text);
+    expect(textInputs.length).toBe(2);
+    expect(textInputs[0].props.children).toEqual('abc');
+  });
+});

package/src/commons/SubUnit/ShortDetail.js

@@ -9,10 +9,10 @@ import { Section } from '../Section';
 import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
 import ItemAddNew from '../Device/ItemAddNew';
-import MediaPlayer from '../MediaPlayer';
 import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
+import MediaPlayerDetail from '../MediaPlayerDetail';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -21,23 +21,29 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
+
   const renderCamera = () => {
     if (station?.camera) {
       return (
         <View
           style={[
             styles.boxImage,
-            { width: standardizeWidth, height: standardizeHeight },
+            {
+              width: standardizeWidth,
+              height: standardizeHeight,
+            },
           ]}
           testID={TESTID.SUB_UNIT_CAMERA_VIEW}
         >
-          <MediaPlayer
+          <MediaPlayerDetail
             uri={station.camera.uri}
-            previewUri={station.camera.preview_uri}
             thumbnail={{
               uri: station.background,
             }}
-            key={`camera-${station.camera.id}`}
+            key={`camera-device-${station?.camera?.id}`}
+            cameraName={station?.camera?.name}
+            width={standardizeWidth}
+            height={standardizeHeight}
           />
         </View>
       );
@@ -78,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/commons/UnitSummary/AirQuality/SegmentedRoundDisplay/index.js

@@ -163,7 +163,7 @@ const SegmentedRoundDisplay = ({
         <Text
           x={svgWidth / 2 + 50}
           fontWeight="normal"
-          fontSize={valueText.toString().length >= 6 ? 46 : 56}
+          fontSize={valueText.toString().length >= 6 ? 35 : 56}
           y={svgHeight / 2 + 30}
           fill={filledArcColor}
           textAnchor="middle"

package/src/commons/UnitSummary/ConfigHistoryChart.js

@@ -45,7 +45,8 @@ const ConfigHistoryChart = memo(({ configs }) => {
       }
     };
     fetchData();
-  }, [startDate, endDate, configs]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startDate, endDate]);
 
   if (!chartData.length) {
     return false;