@eohjsc/react-native-smart-city 0.2.19 → 0.2.23

package/src/commons/MediaPlayer/index.js

@@ -1,35 +1,127 @@
-import React, { memo, useCallback, useState } from 'react';
-import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
 import { Colors, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
+import styles from './styles';
 
-const MediaPlayer = memo(({ uri, thumbnail, style }) => {
+const PreviewPlayer = memo(({ uri, start }) => {
+  const [count, setCount] = useState(0);
+  const [load1, setLoad1] = useState(false);
+  const [load2, setLoad2] = useState(false);
+  const [load3, setLoad3] = useState(false);
+
+  useEffect(() => {
+    if (start) {
+      setTimeout(() => {
+        setCount(1);
+      }, 3000);
+      setTimeout(() => {
+        setCount(2);
+      }, 6000);
+      setTimeout(() => {
+        setCount(3);
+      }, 9000);
+    }
+  }, [start]);
+
+  const onLoad1 = useCallback(() => {
+    setLoad1(true);
+  }, []);
+  const onLoad2 = useCallback(() => {
+    setLoad2(true);
+  }, []);
+  const onLoad3 = useCallback(() => {
+    setLoad3(true);
+  }, []);
+
+  return (
+    <>
+      {start && count >= 2 && (
+        <Image
+          source={{ uri: uri + '?c=2' }}
+          // eslint-disable-next-line react-native/no-inline-styles
+          style={[styles.previewImage, { zIndex: -3 }]}
+          resizeMode="stretch"
+          fadeDuration={0}
+          onLoad={onLoad3}
+        />
+      )}
+      {start && count >= 1 && (
+        <Image
+          source={{ uri: uri + '?c=1' }}
+          style={[
+            styles.previewImage,
+            // eslint-disable-next-line react-native/no-inline-styles
+            { zIndex: -2 },
+            load3 ? styles.hideImage : {},
+          ]}
+          resizeMode="stretch"
+          fadeDuration={0}
+          onLoad={onLoad2}
+        />
+      )}
+      {start && (
+        <Image
+          source={{ uri: uri + '?c=0' }}
+          style={[
+            styles.previewImage,
+            // eslint-disable-next-line react-native/no-inline-styles
+            { zIndex: -1 },
+            load2 ? styles.hideImage : {},
+          ]}
+          resizeMode="stretch"
+          fadeDuration={0}
+          onLoad={onLoad1}
+        />
+      )}
+      <Image
+        source={{ uri: uri }}
+        style={[
+          styles.previewImage,
+          // eslint-disable-next-line react-native/no-inline-styles
+          { zIndex: 0 },
+          load1 ? styles.hideImage : {},
+        ]}
+        resizeMode="stretch"
+        fadeDuration={0}
+      />
+    </>
+  );
+});
+
+const MediaPlayer = memo(({ uri, previewUri, thumbnail, style }) => {
+  const t = useTranslations();
+  const [started, setStarted] = useState(false);
   const [paused, setPaused] = useState(true);
+
   const onTapPause = useCallback(() => {
-    if (paused) {
-      setPaused(false);
-    } else {
-      setPaused(true);
-    }
-  }, [paused]);
-  const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
+    setStarted(true);
+    setPaused((p) => !p);
+  }, []);
+
+  const imageSource =
+    !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={styles.wrap}>
       <View style={styles.loadingWrap}>
-        <Text style={styles.loadingText}>{t('loading')}</Text>
+        {previewUri ? (
+          <PreviewPlayer uri={previewUri} start={started} />
+        ) : (
+          <Text style={styles.loadingText}>{t('loading')}</Text>
+        )}
       </View>
       <TouchableOpacity
         activeOpacity={1}
         style={styles.videoBtn}
         onPress={onTapPause}
       >
-        {paused ? (
+        {!started ? (
           <View style={[styles.player, style]}>
             <Image
-              source={source}
+              source={imageSource}
               style={[styles.player]}
               defaultSource={Images.BgDevice}
               resizeMode="cover"
@@ -42,58 +134,22 @@ const MediaPlayer = memo(({ uri, thumbnail, style }) => {
             />
           </View>
         ) : (
-          <VLCPlayer
-            autoAspectRatio={true}
-            videoAspectRatio="21:9"
-            source={{ uri: uri }}
-            style={[styles.player, style]}
-          />
+          <>
+            <VLCPlayer
+              autoAspectRatio={true}
+              videoAspectRatio="21:9"
+              source={{ uri }}
+              style={[styles.player, style]}
+              paused={paused}
+            />
+          </>
         )}
-
-        <View style={[styles.bottomView]}>{paused && <PauseIcon />}</View>
+        <View style={styles.bottomView}>
+          {(paused || !started) && <PauseIcon />}
+        </View>
       </TouchableOpacity>
     </View>
   );
 });
 
 export default MediaPlayer;
-
-const styles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-    justifyContent: 'center',
-    borderRadius: 10,
-    backgroundColor: Colors.TextGray,
-    overflow: 'hidden',
-  },
-  loadingWrap: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  loadingText: {
-    color: Colors.White,
-  },
-  player: {
-    zIndex: 0,
-    flex: 1,
-    borderRadius: 10,
-  },
-  videoBtn: {
-    flex: 1,
-  },
-  bottomView: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    bottom: 0,
-    left: 0,
-    height: '100%',
-    position: 'absolute',
-    width: '100%',
-    // backgroundColor: 'rgba(0,0,0,0)',
-  },
-});

package/src/commons/MediaPlayer/styles.js

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    justifyContent: 'center',
+    borderRadius: 10,
+    backgroundColor: Colors.TextGray,
+    overflow: 'hidden',
+  },
+  loadingWrap: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loadingText: {
+    color: Colors.White,
+  },
+  previewImage: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%',
+    height: '100%',
+  },
+  hideImage: {
+    opacity: 0,
+    height: 0,
+    width: 0,
+  },
+  player: {
+    zIndex: 0,
+    borderRadius: 10,
+    height: '100%',
+  },
+  videoBtn: {
+    flex: 1,
+  },
+  bottomView: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    bottom: 0,
+    left: 0,
+    height: '100%',
+    position: 'absolute',
+    width: '100%',
+    // backgroundColor: 'rgba(0,0,0,0)',
+  },
+});

package/src/commons/MediaPlayerDetail/MediaPlayerDetailStyles.js

@@ -1,5 +1,6 @@
 import { Colors } from '../../configs';
 import { StyleSheet } from 'react-native';
+import { normalize } from '../../configs/Constants';
 
 export default StyleSheet.create({
   wrap: {
@@ -48,4 +49,18 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  cameraName2: {
+    fontSize: normalize(10),
+    top: '75%',
+  },
+  iconFullScreen: {
+    position: 'absolute',
+    zIndex: 10,
+    width: 40,
+    height: 40,
+    bottom: 5,
+    right: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/commons/MediaPlayerDetail/index.js

@@ -1,78 +1,163 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState, useEffect } from 'react';
 import { Image, View, StyleSheet, Text, TouchableOpacity } 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 { t } from 'i18n-js';
 import PauseIcon from '../../../assets/images/Common/Pause.svg';
-import { Colors, Images } from '../../configs';
+import { Colors, Constants, Images } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
 import styles from './MediaPlayerDetailStyles';
+import FImage from '../../commons/FImage';
 
-const MediaPlayerDetail = memo(({ uri, cameraName, thumbnail, style }) => {
-  const [paused, setPaused] = useState(true);
-  const onTapPause = useCallback(() => {
-    setPaused(false);
-  }, []);
+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 onTapGoDetail = useCallback(() => {
-    if (!paused) {
-      setPaused(true);
-    } else {
-      // eslint-disable-next-line no-alert
-      alert(t('feature_under_development'));
-    }
-  }, [paused]);
-  const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
-  return (
-    <View style={styles.wrap}>
-      <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]}>
-            <Image
-              source={source}
-              style={styles.player}
-              defaultSource={Images.BgDevice}
-              resizeMode="cover"
-            />
-            <View
-              style={[
-                StyleSheet.absoluteFillObject,
-                { backgroundColor: colorOpacity(Colors.Black, 0.3) },
-              ]}
+    const onTapGoDetail = useCallback(() => {
+      if (!paused) {
+        setPaused(true);
+      } else {
+        goToPlayBack && goToPlayBack();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [paused]);
+
+    const onFullScreen = useCallback(() => {
+      handleFullScreen && handleFullScreen({ uri, cameraName, thumbnail });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+      setPaused(isPaused);
+    }, [isPaused]);
+
+    const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
+    return (
+      <View style={[styles.wrap, wrapStyles]}>
+        <View
+          style={[
+            styles.loadingWrap,
+            isFullScreen && { transform: [{ rotate: '90deg' }] },
+          ]}
+        >
+          <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,
+                  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={{ uri }}
+              style={[styles.player, style]}
+              resizeMode={resizeMode}
             />
-          </View>
-        ) : (
-          <VLCPlayer
-            autoAspectRatio={true}
-            videoAspectRatio="21:9"
-            source={{ uri: uri }}
-            style={[styles.player, style]}
-          />
-        )}
+          )}
 
-        <View style={styles.buttonView}>
-          <View style={styles.buttonPause}>
-            <TouchableOpacity
-              onPress={onTapPause}
-              style={styles.btn}
-              activeOpacity={0.8}
-            >
-              {paused && <PauseIcon />}
-            </TouchableOpacity>
+          <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>
-        </View>
-      </TouchableOpacity>
+        </TouchableOpacity>
 
-      {cameraName && <Text style={styles.cameraName}>{cameraName}</Text>}
-    </View>
-  );
-});
+        {cameraName && paused && (
+          <Text
+            style={[
+              styles.cameraName,
+              amount && amount !== 1 && styles.cameraName2,
+            ]}
+          >
+            {cameraName}
+          </Text>
+        )}
+        {isShowFullScreenIcon && (
+          <TouchableOpacity
+            onPress={onFullScreen}
+            style={styles.iconFullScreen}
+          >
+            <Image source={Images.fullscreen} />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  }
+);
 
 export default MediaPlayerDetail;

package/src/commons/MenuActionAddnew/index.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
 import Modal from 'react-native-modal';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../Text';
@@ -10,6 +10,7 @@ import ImageButton from '../ImageButton';
 const keyExtractor = (item) => item.id.toString();
 const MenuActionAddnew = memo(
   ({ visible, hideModal, dataActions, onItemClick }) => {
+    const t = useTranslations();
     const numColumns = dataActions.length < 3 ? dataActions.length : 3;
 
     const onPress = useCallback(

package/src/commons/Modal/ModalCustom.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'react-native-modal';
+import { Colors } from '../../configs';
+
+const ModalCustom = (props) => {
+  return (
+    <Modal
+      hasBackdrop
+      useNativeDriver
+      animationIn={'slideInUp'}
+      animationOut={'slideOutDown'}
+      animationInTiming={500}
+      animationOutTiming={500}
+      backdropColor={Colors.BlackTransparent5}
+      {...props}
+    >
+      {props.children}
+    </Modal>
+  );
+};
+
+export default ModalCustom;

package/src/commons/Modal/ModalFullVideo.js

@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import { ModalCustom } from '../../commons/Modal';
+import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
+import { Images } from '../../configs';
+import styles from './Styles/ModalFullVideoStyles';
+import { useHiddenStatusBar } from '../../hooks/Common/useStatusBar';
+
+const ModalFullVideo = ({
+  animationOut = 'fadeOut',
+  isVisible = false,
+  modalStyles,
+  data,
+  resizeMode = 'cover',
+  onClose,
+  uri,
+}) => {
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useHiddenStatusBar(isVisible);
+  }, [isVisible]);
+
+  return (
+    <ModalCustom
+      animationOut={animationOut}
+      isVisible={isVisible}
+      style={modalStyles}
+    >
+      <View style={styles.modalContent}>
+        <MediaPlayerDetail
+          uri={uri || data?.uri}
+          thumbnail={data?.thumbnail}
+          style={styles.camera}
+          wrapStyles={styles.wrapStyles}
+          resizeMode={resizeMode}
+          cameraName={data?.name}
+          isFullScreen={true}
+          isPaused={false}
+        />
+        <TouchableOpacity onPress={onClose} style={styles.buttonFullScreen}>
+          <Image source={Images.fullscreen} />
+        </TouchableOpacity>
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ModalFullVideo;

package/src/commons/Modal/Styles/ModalFullVideoStyles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { normalize } from '../../../configs/Constants';
+
+export default StyleSheet.create({
+  modalContent: {
+    position: 'absolute',
+    zIndex: 10,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  buttonFullScreen: {
+    position: 'absolute',
+    zIndex: 10,
+    width: normalize(40),
+    height: normalize(40),
+    bottom: normalize(30),
+    left: normalize(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  wrapStyles: {
+    borderRadius: 0,
+  },
+});

package/src/commons/Modal/index.js

@@ -0,0 +1,4 @@
+import ModalCustom from './ModalCustom';
+import ModalFullVideo from './ModalFullVideo';
+
+export { ModalCustom, ModalFullVideo };

package/src/commons/NavBar/index.js

@@ -10,7 +10,7 @@ import Station from '../../screens/Unit/Station';
 import MenuActionMore from '../MenuActionMore';
 
 const NavBar = memo(
-  ({ listMenuItem, listStation, onSnapToItem, indexStation }) => {
+  ({ listMenuItem, listStation, onSnapToItem, indexStation, style }) => {
     const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
       usePopover();
     const refMenuAction = useRef();
@@ -18,7 +18,7 @@ const NavBar = memo(
 
     return (
       <>
-        <View style={styles.wrap}>
+        <View style={[styles.wrap, style]}>
           <View style={styles.wrapTitle}>
             <Station
               listStation={listStation}

package/src/commons/Sharing/DevicePermissionsCheckbox.js

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import RadioCircle from '../RadioCircle';
 import Text from '../Text';
 import { Colors } from '../../configs';
@@ -30,6 +30,7 @@ const DevicePermissionsCheckbox = ({
   selectedIndexes,
   onSelectIndexes,
 }) => {
+  const t = useTranslations();
   const sensorHasData = !!sensor.read_configs.length || !!sensor.actions.length;
 
   const [selectIndexes, setSelectIndexes] = useState(selectedIndexes); // [-1] all , [1, 2 ,3] some , [] no