Skip to content

E
EmidWife-New
Commit 967efaa7 authored by isuraem's avatar isuraem
Browse files
Options

changes_on_the_exercise_view

parent 03d5b126
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 106 deletions
App.js
View file @ 967efaa7
...@@ -7,14 +7,15 @@ LogBox.ignoreAllLogs(); ...@@ -7,14 +7,15 @@ LogBox.ignoreAllLogs();
const App = () => { const App = () => {
// Your Firebase project config // Your Firebase project config
const firebaseConfig = { const firebaseConfig = {
apiKey: "AIzaSyDYUf2gYWwE_qvQk2e-8ErEZ_PYBZ7eX0o", apiKey: "AIzaSyCeAB4zi1RAoBPPJyE6qii36pz01tfKrYQ",
authDomain: "emidwife-382f9.firebaseapp.com", authDomain: "esp32-emidwife.firebaseapp.com",
databaseURL: "https://emidwife-382f9-default-rtdb.asia-southeast1.firebasedatabase.app", databaseURL: "https://esp32-emidwife-default-rtdb.firebaseio.com",
projectId: "emidwife-382f9", projectId: "esp32-emidwife",
storageBucket: "emidwife-382f9.appspot.com", storageBucket: "esp32-emidwife.appspot.com",
messagingSenderId: "586342030256", messagingSenderId: "590307045316",
appId: "1:586342030256:web:a88085b0dd2a72a953d475" appId: "1:590307045316:web:3471bfeaec9f74f6dcbe91"
}; };
// Initialize Firebase // Initialize Firebase
if (!firebase.apps.length) { if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig); firebase.initializeApp(firebaseConfig);
......
src/constants/routes.js
View file @ 967efaa7
...@@ -23,5 +23,8 @@ export default { ...@@ -23,5 +23,8 @@ export default {
EXERCISE_MAIN_NEW_MENU: 'Exercise_Home_New_Menu', EXERCISE_MAIN_NEW_MENU: 'Exercise_Home_New_Menu',
EXERCISE_VIEW: 'Exercise_View', EXERCISE_VIEW: 'Exercise_View',
EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View', EXERCISE_ACTION_VIEW: 'Exercise_ACTION_View',
EXERCISE_PROGRESS: 'Exercise_PROGRESS' EXERCISE_PROGRESS: 'Exercise_PROGRESS',
EXERCISE_NEW_VIEW: 'Exercise_NEW_View',
EXERCISE_NEW_ACTION_VIEW: 'Exercise_NEW_ACTION_View',
EXERCISE_NEW_PROGRESS: 'Exercise_NEW_PROGRESS'
}; };
src/navigations/ExerciseNavigator.js
View file @ 967efaa7
...@@ -69,6 +69,9 @@ function ExerciseNavigator() { ...@@ -69,6 +69,9 @@ function ExerciseNavigator() {
<Stack.Screen name={ROUTES.EXERCISE_WELCOME} component={WelcomeExercise} key="ExerciseWelcome" /> <Stack.Screen name={ROUTES.EXERCISE_WELCOME} component={WelcomeExercise} key="ExerciseWelcome" />
<Stack.Screen name={ROUTES.EXERCISE_FORM} component={HealthFormExercise} key="ExerciseForm" /> <Stack.Screen name={ROUTES.EXERCISE_FORM} component={HealthFormExercise} key="ExerciseForm" />
<Stack.Screen name={ROUTES.EXERCISE_MAIN_NEW_MENU} component={MainMenuExercise} key="MainMenuNewExercise" /> <Stack.Screen name={ROUTES.EXERCISE_MAIN_NEW_MENU} component={MainMenuExercise} key="MainMenuNewExercise" />
<Stack.Screen name={ROUTES.EXERCISE_NEW_VIEW} component={ExerciseView} key="ExerciseNewView" />
<Stack.Screen name={ROUTES.EXERCISE_NEW_ACTION_VIEW} component={ExerciseActionView} key="ExerciseActionNewView" />
<Stack.Screen name={ROUTES.EXERCISE_NEW_PROGRESS} component={ExercisesProgress} key="ExercisesNewProgress" />
</> </>
)} )}
</Stack.Navigator> </Stack.Navigator>
......
src/screens/home/exercise/ExerciseActionView.js
View file @ 967efaa7
import React, { useState, useRef, useEffect } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { StyleSheet, Text, View, ActivityIndicator, TouchableOpacity } from 'react-native'; import { StyleSheet, Text, View, ActivityIndicator, TouchableOpacity, ToastAndroid, Dimensions, SafeAreaView, ScrollView,FlatList } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Video from 'react-native-video'; import Video from 'react-native-video';
import { Camera, useCameraDevice, CameraPermissionStatus } from 'react-native-vision-camera'; import { Camera, useCameraDevice, CameraPermissionStatus } from 'react-native-vision-camera';
import CircleProgressBar from '../../../components/CircleProgressBar'; import CircleProgressBar from '../../../components/CircleProgressBar';
import { COLORS, ROUTES } from '../../../constants'; import { COLORS, ROUTES } from '../../../constants';
import Dot from '../../../assets/icons/dot.svg'; import Dot from '../../../assets/icons/dot.svg';
const { width } = Dimensions.get('window');
const cameraWidth = width * 0.8; // Example: 80% of the screen width
const cameraHeight = cameraWidth * (16 / 9); // Maintain 16:9 aspect ratio
const { height: screenHeight } = Dimensions.get('window');
const ExerciseView = (props) => { const ExerciseView = (props) => {
const { route } = props; let { route, navigation } = props;
const { data } = route.params; // Assuming you pass videoUrl as a route parameter let { data } = route.params; // Assuming you pass videoUrl as a route parameter
const videoRef = useRef(null); const videoRef = useRef(null);
const cameraRef = useRef(null); const cameraRef = useRef(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
...@@ -17,6 +22,7 @@ const ExerciseView = (props) => { ...@@ -17,6 +22,7 @@ const ExerciseView = (props) => {
const [startCountDown, setStartCountDown] = useState(false); const [startCountDown, setStartCountDown] = useState(false);
const [isRecording, setIsRecording] = useState(false); const [isRecording, setIsRecording] = useState(false);
const [videoSource, setVideoSource] = useState(''); const [videoSource, setVideoSource] = useState('');
const [completeStatus, setCompleteStatus] = useState(false);
const device = useCameraDevice('front') const device = useCameraDevice('front')
const handleLoad = () => { const handleLoad = () => {
...@@ -35,6 +41,19 @@ const ExerciseView = (props) => { ...@@ -35,6 +41,19 @@ const ExerciseView = (props) => {
setVideoPaused(true); setVideoPaused(true);
}; };
const moveToNext = () => {
navigation.navigate(ROUTES.EXERCISE_MAIN_MENU)
ToastAndroid.show('Navigation successfully !', ToastAndroid.SHORT);
};
const handleStop = () => {
setRemainingTime(0);
setCompleteStatus(true)
navigation.navigate(ROUTES.EXERCISE_MAIN_MENU)
ToastAndroid.show('Navigation successfully !', ToastAndroid.SHORT);
};
const handleVideoEnd = () => { const handleVideoEnd = () => {
setVideoPaused(true); setVideoPaused(true);
// setStartCountDown(true); // setStartCountDown(true);
...@@ -56,14 +75,21 @@ const ExerciseView = (props) => { ...@@ -56,14 +75,21 @@ const ExerciseView = (props) => {
}, },
}); });
} }
}; };
const stopRecording = () => { const stopRecording = () => {
if (cameraRef.current && isRecording) { if (cameraRef.current && isRecording) {
cameraRef.current.stopRecording(); cameraRef.current.stopRecording();
setIsRecording(false); setIsRecording(false);
} }
}; };
const renderStep = ({ item, index }) => (
<View style={styles.stepContainer}>
<Dot width={16} height={16} color={COLORS.primary} style={styles.dotIcon} />
<Text style={styles.stepItem}>{item.step}</Text>
</View>
);
useEffect(() => { useEffect(() => {
// Initialize remainingTime when component mounts // Initialize remainingTime when component mounts
...@@ -94,11 +120,12 @@ const ExerciseView = (props) => { ...@@ -94,11 +120,12 @@ const ExerciseView = (props) => {
return ( return (
<View style={styles.container}> <SafeAreaView style={styles.container}>
<Text style={styles.title}>Exercise Details</Text> <ScrollView style={{ height: screenHeight, paddingBottom: 30, marginBottom: 30 }}>
<View style={styles.videoContainer}> <Text style={styles.title}>Exercise Details</Text>
<View style={styles.videoContainer}>
<Video
<Video
ref={videoRef} ref={videoRef}
source={{ uri: data.exercise_video_url }} source={{ uri: data.exercise_video_url }}
style={styles.video} style={styles.video}
...@@ -108,82 +135,57 @@ const ExerciseView = (props) => { ...@@ -108,82 +135,57 @@ const ExerciseView = (props) => {
onLoad={handleLoad} onLoad={handleLoad}
onBuffer={handleBuffer} onBuffer={handleBuffer}
/> />
{loading && <ActivityIndicator style={styles.loader} size="large" color="#0000ff" />}
</View>
<View style={styles.progressMainView}>
<CircleProgressBar percentage={(remainingTime / (data.duration * 2)) * 100} />
<View style={styles.progressSecondView}>
<Text>Remaining</Text>
<Text>{remainingTime} seconds</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.button} onPress={videoPaused ? handlePlay : handlePause}>
<Text style={styles.buttonText}>{videoPaused ? 'Play' : 'Pause'}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonRed} onPress={handlePause}>
<Text style={styles.buttonText}>Stop</Text>
</TouchableOpacity>
</View>
<View>
{device != null && (
<View style={styles.cameraContainer}>
<Camera
ref={cameraRef}
style={styles.camera}
device={device}
isActive={true}
video={true}
audio={true}
/>
</View> {loading && <ActivityIndicator style={styles.loader} size="large" color="#0000ff" />}
)}
</View>
{/* <View style={styles.videoContainer}>
<Video
ref={videoRef}
source={{ uri: data.exercise_video_url }}
style={styles.video}
controls={true}
paused={videoPaused}
resizeMode="contain"
onLoad={handleLoad}
onBuffer={handleBuffer}
onEnd={handleVideoEnd}
/>
{loading && <ActivityIndicator style={styles.loader} size="large" color="#0000ff" />}
<View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.button} onPress={videoPaused ? handlePlay : handlePause}>
<Text style={styles.buttonText}>{videoPaused ? 'Play' : 'Pause'}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress={handlePause}>
<Text style={styles.buttonText}>Stop</Text>
</TouchableOpacity>
</View> </View>
<View style={styles.progressMainView}> <View style={styles.progressMainView}>
<CircleProgressBar percentage={(remainingTime / data.duration) * 100} /> <CircleProgressBar percentage={(remainingTime / (data.duration * 2)) * 100} />
<View style={styles.progressSecondView}> <View style={styles.progressSecondView}>
<Text>Remaining</Text> <Text>Remaining</Text>
<Text>{remainingTime} seconds</Text> <Text>{remainingTime} seconds</Text>
</View> </View>
</View> </View>
<View style={styles.stepsContainer}> <View style={{ display: 'flex', justifyContent: 'center', flexDirection: 'row' }}>
<Text style={styles.stepsTitle}>Steps:</Text> {remainingTime > 0 &&
<View style={styles.stepsContent}> <View style={styles.buttonsContainer}>
<TouchableOpacity style={styles.button} onPress={videoPaused ? handlePlay : handlePause}>
{data.exer_steps.map((step, index) => ( <Text style={styles.buttonText}>{videoPaused ? 'Play' : 'Pause'}</Text>
<View key={index} style={styles.stepContainer}> </TouchableOpacity>
<Dot width={16} height={16} color={COLORS.primary} style={styles.dotIcon} /> <TouchableOpacity style={styles.buttonRed} onPress={moveToNext}>
<Text style={styles.stepItem}>{step.step}</Text> <Text style={styles.buttonText}>Stop</Text>
</TouchableOpacity>
</View>
}
{(remainingTime <= 0 || completeStatus == true) &&
<View style={styles.loginBtnWrapper}>
<LinearGradient
colors={[COLORS.gradientForm, COLORS.bgColor]}
style={styles.linearGradient}
start={{ y: 0.0, x: 0.0 }}
end={{ y: 1.0, x: 0.0 }}>
{/******************** LOGIN BUTTON *********************/}
<TouchableOpacity activeOpacity={0.7} style={styles.loginBtn} onPress={moveToNext}>
<Text style={styles.loginText}>Move To Next</Text>
</TouchableOpacity>
</LinearGradient>
</View> </View>
))} }
</View> </View>
</View> <Text style={styles.title}>Exercise Preview</Text>
</View> */} <View style={styles.cameraContainer}>
</View> <Camera
ref={cameraRef}
style={styles.camera}
device={device}
isActive={true}
video={true}
audio={true}
ratio="16:9"
/>
</View>
</ScrollView>
</SafeAreaView>
); );
}; };
...@@ -192,7 +194,6 @@ const styles = StyleSheet.create({ ...@@ -192,7 +194,6 @@ const styles = StyleSheet.create({
backgroundColor: '#fff', backgroundColor: '#fff',
alignItems: 'center', alignItems: 'center',
width: '100%', width: '100%',
height: 'auto'
}, },
title: { title: {
fontSize: 20, fontSize: 20,
...@@ -250,7 +251,7 @@ const styles = StyleSheet.create({ ...@@ -250,7 +251,7 @@ const styles = StyleSheet.create({
progressMainView: { progressMainView: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-around',
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { shadowOffset: {
width: 2, width: 2,
...@@ -260,7 +261,7 @@ const styles = StyleSheet.create({ ...@@ -260,7 +261,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, elevation: 5,
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
marginHorizontal: 20, marginHorizontal: 60,
borderRadius: 15, borderRadius: 15,
marginTop: 20, marginTop: 20,
paddingVertical: 10, paddingVertical: 10,
...@@ -284,9 +285,8 @@ const styles = StyleSheet.create({ ...@@ -284,9 +285,8 @@ const styles = StyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
}, },
stepContainer: { stepContainer: {
display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
marginBottom: 10, marginBottom: 10,
}, },
dotIcon: { dotIcon: {
...@@ -303,9 +303,52 @@ const styles = StyleSheet.create({ ...@@ -303,9 +303,52 @@ const styles = StyleSheet.create({
marginHorizontal: 5, marginHorizontal: 5,
}, },
cameraContainer: { cameraContainer: {
display: 'flex',
width: width,
marginTop: 5,
justifyContent: 'center',
alignItems: 'center'
},
camera: {
width: cameraWidth,
height: cameraHeight,
justifyContent: 'flex-end',
alignItems: 'center',
},
// Login Btn Styles
loginBtnWrapper: {
height: 55,
marginTop: 25,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.4,
shadowRadius: 3,
elevation: 5,
width: "80%",
marginLeft: "10%"
},
linearGradient: {
width: '100%', width: '100%',
aspectRatio: 16 / 9, borderRadius: 50,
marginTop: 20, },
loginBtn: {
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 55,
},
loginText: {
color: COLORS.white,
fontSize: 16,
fontWeight: '400',
},
horizontalFlatList: {
flexDirection: 'row',
flexWrap: 'wrap',
}, },
}); });
...@@ -390,15 +433,15 @@ export default ExerciseView; ...@@ -390,15 +433,15 @@ export default ExerciseView;
// </View> // </View>
// </View> // </View>
// <View style={styles.stepsContainer}> // <View style={styles.stepsContainer}>
// <Text style={styles.stepsTitle}>Steps:</Text> // <Text style={styles.stepsTitle}>Steps:</Text>
// {data.exer_steps.map((step, index) => ( // {data.exer_steps.map((step, index) => (
// <View key={index} style={styles.stepContainer}> // <View key={index} style={styles.stepContainer}>
// {index !== 0 && <View style={styles.line} />} // {index !== 0 && <View style={styles.line} />}
// <Dot width={16} height={16} color={COLORS.primary} style={styles.dotIcon} /> // <Dot width={16} height={16} color={COLORS.primary} style={styles.dotIcon} />
// {/* {index < data.exer_steps.length - 1 && <View style={styles.line}></View>} */} // {/* {index < data.exer_steps.length - 1 && <View style={styles.line}></View>} */}
// <Text style={styles.stepItem}>{step.step}</Text> // <Text style={styles.stepItem}>{step.step}</Text>
// </View> // </View>
// ))} // ))}
// </View> // </View>
// </View> // </View>
...@@ -809,3 +852,36 @@ export default ExerciseView; ...@@ -809,3 +852,36 @@ export default ExerciseView;
// }); // });
// export default ExerciseView; // export default ExerciseView;
{/* <FlatList
data={[...data.exer_steps, { isCamera: true }]} // Adding a placeholder for the camera view
renderItem={({ item, index }) => (
item.isCamera ? (
<View style={styles.cameraContainer}>
<Camera
ref={cameraRef}
style={styles.camera}
device={device}
isActive={true}
video={true}
audio={true}
ratio="16:9"
/>
</View>
) : (
<View style={{ marginHorizontal: 5 }}>
{data.exer_steps.map((step, index) => (
<View key={index} style={styles.stepContainer}>
<Dot width={16} height={16} color={COLORS.primary} style={styles.dotIcon} />
<Text style={styles.stepItem}>{step.step}</Text>
</View>
))}
</View>
)
)}
keyExtractor={(item, index) => index.toString()}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalFlatList}
/> */}
\ No newline at end of file
src/screens/home/exercise/HealthFormExercise.js
View file @ 967efaa7
...@@ -75,7 +75,7 @@ const HealthFormExercise = (props) => { ...@@ -75,7 +75,7 @@ const HealthFormExercise = (props) => {
if (responds.data) { if (responds.data) {
try { try {
await AsyncStorage.setItem('userData', JSON.stringify(userData)); await AsyncStorage.setItem('userData', JSON.stringify(userData));
navigation.navigate(ROUTES.EXERCISE_MAIN_MENU) navigation.navigate(ROUTES.EXERCISE_MAIN_NEW_MENU)
ToastAndroid.show('userData updated successfully !', ToastAndroid.SHORT); ToastAndroid.show('userData updated successfully !', ToastAndroid.SHORT);
} catch (error) { } catch (error) {
ToastAndroid.show('Error updating userData !', ToastAndroid.SHORT); ToastAndroid.show('Error updating userData !', ToastAndroid.SHORT);
...@@ -163,6 +163,7 @@ const HealthFormExercise = (props) => { ...@@ -163,6 +163,7 @@ const HealthFormExercise = (props) => {
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setIsWearbleDevice(false)
setWearableModalVisible(false); setWearableModalVisible(false);
}} }}
......
src/screens/home/exercise/MainMenuExercise.js
View file @ 967efaa7
...@@ -94,9 +94,11 @@ const MainMenuExercise = (props) => { ...@@ -94,9 +94,11 @@ const MainMenuExercise = (props) => {
dataNum = 2; dataNum = 2;
} }
if (todayDateByFormat === "Friday" || todayDateByFormat === "Saturday" || todayDateByFormat === "Sunday") { if (todayDateByFormat === "Friday" || todayDateByFormat === "Saturday" || todayDateByFormat === "Sunday") {
dataNum = 2; dataNum = 3;
} }
console.log("data",userData._id, dataNum)
let exerciseData = await getAllExerciseDay(userData._id, dataNum); let exerciseData = await getAllExerciseDay(userData._id, dataNum);
console.log("dAT",exerciseData.data.data)
let dataArray = exerciseData.data.data; let dataArray = exerciseData.data.data;
if (dataArray.length > 0) { if (dataArray.length > 0) {
let exerciseModifiedAarray = []; let exerciseModifiedAarray = [];
...@@ -138,6 +140,7 @@ const MainMenuExercise = (props) => { ...@@ -138,6 +140,7 @@ const MainMenuExercise = (props) => {
useEffect(() => { useEffect(() => {
retriveExerciseList() retriveExerciseList()
setSelectedId(null)
}, []) }, [])
return ( return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment