From d298b8a3e2c436ddf67d4336ffcda714db3a4e9f Mon Sep 17 00:00:00 2001 From: nileshbhingaradiya Date: Tue, 28 Sep 2021 10:51:00 +0530 Subject: [PATCH] #16 Create new screen for the settings and moved date format selection in settings screen also added convert the date and time in local --- App.js | 12 +- package.json | 2 + screens/CameraScreen.js | 544 +++++++++++++++++++++----------- screens/ConnectServerScreen.js | 47 +-- screens/EventScreen.js | 16 +- screens/ServerSettingsScreen.js | 58 +--- screens/SettingsScreen.js | 184 +++++++++++ stylesheet.js | 1 + yarn.lock | 34 +- 9 files changed, 626 insertions(+), 272 deletions(-) create mode 100644 screens/SettingsScreen.js diff --git a/App.js b/App.js index 7f2619e..4c1f1af 100644 --- a/App.js +++ b/App.js @@ -20,9 +20,9 @@ import {createDrawerNavigator} from '@react-navigation/drawer'; import Orientation from 'react-native-orientation-locker'; import Toast from 'react-native-toast-message'; - import ConnectServerScreen from './screens/ConnectServerScreen'; import ServerSettingsScreen from './screens/ServerSettingsScreen'; +import SettingsScreen from './screens/SettingsScreen'; import SessionContext from './session-context'; import {CameraScreen, DirectCameraScreen} from './screens/CameraScreen'; @@ -261,6 +261,16 @@ const App: () => React$Node = () => { }, }} /> + { + SplashScreen.hide(); + }, + }} + /> ) : ( diff --git a/package.json b/package.json index 0297261..b7c607d 100644 --- a/package.json +++ b/package.json @@ -21,11 +21,13 @@ "@react-navigation/material-top-tabs": "^5.3.13", "@react-navigation/native": "^5.9.2", "@react-navigation/stack": "^5.14.2", + "dayjs": "^1.10.7", "fast-xml-parser": "^3.18.0", "react": "16.13.1", "react-native": "0.64.1", "react-native-gesture-handler": "^1.9.0", "react-native-get-random-values": "^1.5.1", + "react-native-localize": "^2.1.4", "react-native-orientation-locker": "^1.2.0", "react-native-picker-select": "^8.0.4", "react-native-popup-menu": "^0.15.10", diff --git a/screens/CameraScreen.js b/screens/CameraScreen.js index 488f1a4..3d7d79b 100644 --- a/screens/CameraScreen.js +++ b/screens/CameraScreen.js @@ -1,21 +1,15 @@ - import React, {useEffect, useState, useCallback, useContext} from 'react'; import {View, Text, TouchableOpacity, FlatList, ActivityIndicator, SafeAreaView} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; import SplashScreen from 'react-native-splash-screen'; -import { - Menu, - MenuOptions, - MenuOption, - MenuTrigger, -} from 'react-native-popup-menu'; +import {Menu, MenuOptions, MenuOption, MenuTrigger} from 'react-native-popup-menu'; import {setSelectedCamera} from '../lib/storage'; -import { VLCPlayer } from 'react-native-vlc-media-player'; +import {VLCPlayer} from 'react-native-vlc-media-player'; -import { createStackNavigator } from '@react-navigation/stack'; +import {createStackNavigator} from '@react-navigation/stack'; import SessionContext from '../session-context'; @@ -27,211 +21,391 @@ import ToggleNavigationButton from '../components/ToggleNavigationButton'; const Stack = createStackNavigator(); - function Player({uri}) { - const [error, setError] = useState(false); - - if (error) { - return setError(false)} />; - } - - return ( setError(true)} - style={{flex: 1}} - />); + const [error, setError] = useState(false); + + if (error) { + return setError(false)} />; + } + + return ( + setError(true)} + style={{flex: 1}} + /> + ); } function SinglePlayerSection({type = 0, index = 0, onChange, onRemove, screenDevices, rtspUrl}) { + const device = screenDevices[type][index]; - const device = screenDevices[type][index]; - - if (device) { - return ( - - - - - - - onChange(type, index)} /> - onRemove(type, index)} /> - - - - - ); - } - - return ( - onChange(type, index)}> - - - ); + if (device) { + return ( + + + + + + + + onChange(type, index)} /> + onRemove(type, index)} /> + + + + + + ); + } + + return ( + + onChange(type, index)}> + + + + ); } function TwinPlayerSection({type = 1, index = 0, onChange, onRemove, screenDevices, rtspUrl}) { - const groupIndex = index * 2; - return ( - - - ); + const groupIndex = index * 2; + return ( + + + + + ); } function QuadPlayerSection({onChange, onRemove, screenDevices, rtspUrl}) { - return ( - - - ); + return ( + + + + + ); } - function ScreenButton({onPress, name, active = false}) { - return ( - {name} - ); + return ( + + + {name} + + + ); } function PlayerScreen({navigation}) { - - const [activeScreen, setActiveScreen] = useState(0); - const {state, dispatch} = useContext(SessionContext); - - const screenDevices = state.selectedDeviceList.map(screens => - screens.map(deviceId => deviceId && state.deviceList.find(({id}) => id === deviceId))); - - const rtspUrl = getRtspAddressByCredentials(state.activeAccount); - - const onAddCamera = useCallback((type, index) => - navigation.navigate('DeviceSetCamera', { - type, index - }), []); - - const onRemoveCamera = useCallback(async (type, index) => { - const selectedDeviceList = await setSelectedCamera(state.activeAccount.id, type, index, - null, state.selectedDeviceList); - dispatch({type: 'update_selected_device_list', payload: selectedDeviceList}); - }, [state.selectedDeviceList, state.activeAccount]); - - const screens = [ - ['1', ], - ['2', ], - ['4', ] - ]; - - return ( - {screens[activeScreen][1]} - - {screens.map(([target], index) => - setActiveScreen(index)} />)} - - - - - ); + const [activeScreen, setActiveScreen] = useState(0); + const {state, dispatch} = useContext(SessionContext); + + const screenDevices = state.selectedDeviceList.map((screens) => + screens.map((deviceId) => deviceId && state.deviceList.find(({id}) => id === deviceId)), + ); + + const rtspUrl = getRtspAddressByCredentials(state.activeAccount); + + const onAddCamera = useCallback( + (type, index) => + navigation.navigate('DeviceSetCamera', { + type, + index, + }), + [], + ); + + const onRemoveCamera = useCallback( + async (type, index) => { + const selectedDeviceList = await setSelectedCamera( + state.activeAccount.id, + type, + index, + null, + state.selectedDeviceList, + ); + dispatch({type: 'update_selected_device_list', payload: selectedDeviceList}); + }, + [state.selectedDeviceList, state.activeAccount], + ); + + const screens = [ + [ + '1', + , + ], + [ + '2', + , + ], + [ + '4', + , + ], + ]; + + return ( + + {screens[activeScreen][1]} + + {screens.map(([target], index) => ( + setActiveScreen(index)} + /> + ))} + + + + + + ); } -function DirectPlayScreen({route: {params: {deviceId}}, navigation}) { - - const {state} = useContext(SessionContext); - - const device = state.deviceList.find(({id}) => parseInt(id) === parseInt(deviceId)); - - useEffect(() => { - SplashScreen.hide(); - }, []); - - if (!device) { - return navigation.navigate('DeviceShowCamera')} />; - } - - const rtspUrl = getRtspAddressByCredentials(state.activeAccount); - - return ( - - - - - - - navigation.navigate('DeviceShowCamera')} /> - - - - - ); +function DirectPlayScreen({ + route: { + params: {deviceId}, + }, + navigation, +}) { + const {state} = useContext(SessionContext); + + const device = state.deviceList.find(({id}) => parseInt(id) === parseInt(deviceId)); + + useEffect(() => { + SplashScreen.hide(); + }, []); + + if (!device) { + return navigation.navigate('DeviceShowCamera')} />; + } + + const rtspUrl = getRtspAddressByCredentials(state.activeAccount); + + return ( + + + + + + + + navigation.navigate('DeviceShowCamera')} /> + + + + + + ); } -function SetCameraScreen({route: {params: {index, type}}, navigation}) { - - const [loading, setLoading] = useState(false); - const {state, dispatch} = useContext(SessionContext); - - const onSelectCamera = useCallback(async (id) => { - setLoading(true); - - const selectedDeviceList = await setSelectedCamera(state.activeAccount.id, type, - index, id, state.selectedDeviceList); - dispatch({type: 'update_selected_device_list', payload: selectedDeviceList}); - navigation.goBack(); - - }, []); - - return - {loading ? : '' + id} renderItem={({item: {id, device_name}}) => - onSelectCamera(id)}> - #{id} - {device_name}} />} - ; +function SetCameraScreen({ + route: { + params: {index, type}, + }, + navigation, +}) { + const [loading, setLoading] = useState(false); + const {state, dispatch} = useContext(SessionContext); + + const onSelectCamera = useCallback(async (id) => { + setLoading(true); + + const selectedDeviceList = await setSelectedCamera( + state.activeAccount.id, + type, + index, + id, + state.selectedDeviceList, + ); + dispatch({type: 'update_selected_device_list', payload: selectedDeviceList}); + navigation.goBack(); + }, []); + + return ( + + {loading ? ( + + ) : ( + '' + id} + renderItem={({item: {id, device_name}}) => ( + onSelectCamera(id)}> + + #{id} - {device_name} + + + )} + /> + )} + + ); } function ShowCameraScreen({navigation}) { - - const {state} = useContext(SessionContext); - - return - '' + id} renderItem={({item: {id, device_name}}) => - { - navigation.navigate('DeviceDirectPlay', { - deviceId: id - }) + const {state} = useContext(SessionContext); + + return ( + + '' + id} + renderItem={({item: {id, device_name}}) => ( + { + navigation.navigate('DeviceDirectPlay', { + deviceId: id, + }); }}> - #{id} - {device_name}} /> - ; + + #{id} - {device_name} + + + )} + /> + + ); } export function CameraScreen() { - return ( - - - - ); + return ( + + + + + ); } export function DirectCameraScreen() { - return ( - }} component={ShowCameraScreen} /> - - ); + return ( + + ( + + + + ), + }} + component={ShowCameraScreen} + /> + + + ); } - diff --git a/screens/ConnectServerScreen.js b/screens/ConnectServerScreen.js index b95c937..d4e00e6 100644 --- a/screens/ConnectServerScreen.js +++ b/screens/ConnectServerScreen.js @@ -69,7 +69,6 @@ export default function ConnectServerScreen({navigation}) { const [loading, setLoading] = useState(false); const {state, dispatch} = useContext(SessionContext); - return ( @@ -77,28 +76,30 @@ export default function ConnectServerScreen({navigation}) { ) : ( <> - - ( - dispatch({type: 'login', payload: activeAccount})} - /> - )} - keyExtractor={([id]) => id} - /> - + {state.accountList.length > 0 && ( + + ( + dispatch({type: 'login', payload: activeAccount})} + /> + )} + keyExtractor={([id]) => id} + /> + + )}