Skip to content

E
EmidWife-New
Commit 82cf4e3e authored by Devin B's avatar Devin B
Browse files
Options

Additional_symptoms

parent 73172d28
Hide whitespace changes
Inline Side-by-side
Showing with 546 additions and 163 deletions
src/screens/home/skin/AdditionalSymptoms.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
import { Linking } from 'react-native';
const AdditionalSymptomsScreen = ({ navigation }) => {
......@@ -17,9 +19,37 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374540/3D/biile6hyrj1aiqvyvedi.mp4";
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374532/3D/wfu4pr9phnadjqargex4.mp4";
const videoRef = useRef(null);
const screenHeight = Dimensions.get('window').height;
const imageHeight = screenHeight * 0.20;
const symptomsGroups = [
[
{ key: 'symptom1', text: 'Headache | හිසරදය' },
{ key: 'symptom2', text: 'Shoulder pain | උරහිස් වේදනාව' },
{ key: 'symptom3', text: 'Upper Abdominal pain | ඉහළ උදරයේ වේදනාව' },
{ key: 'symptom4', text: 'Lower Abdomen pain | පහළ උදරයේ වේදනාව' },
],
[
{ key: 'symptom5', text: 'Swollen Ankle pain | ඉදිමුණු වළලුකර වේදනාව' },
{ key: 'symptom6', text: 'Leg joint pain | පාදයේ සන්ධි වේදනාව' },
{ key: 'symptom7', text: 'Thigh muscle pain | කලවා මාංශ පේශි වේදනාව' },
{ key: 'symptom8', text: 'Groin pain | ඉකිලි වේදනාව' },
{ key: 'symptom9', text: 'Breast Pain |පියයුරු වේදනාව'},
{ key: 'symptom12', text: 'Side muscle pain | පැත්තේ මාංශ පේශි වේදනාව'},
],
[
{ key: 'symptom10', text: 'Upper arm pain | ඉහළ අතේ වේදනාව' },
{ key: 'symptom11', text: 'Heart burn | හදවත දැවෙනවා' },
{ key: 'symptom12', text: 'Mouth and Nose ulcer’s | මුඛයේ සහ නාසයේ වණ'},
{ key: 'symptom13', text: 'Back Pain |පිටුපස මාංශ පේශි වේදනාව'},
{ key: 'symptom14', text: 'Breast Pain |පියයුරු වේදනාව'},
],
// Add more groups as needed
];
const handleLoad = () => {
......@@ -79,13 +109,15 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<ScrollView style={styles.scrollContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.topicText}>Discoid Additional Symptoms </Text>
<View style={styles.videoBox}>
<View style={styles.videoDescriptionBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
</Text>
</View>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
// ref={videoRef}
......@@ -106,44 +138,51 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom1']}
onValueChange={() => toggleCheckbox('symptom1')}
/>
<Text style={styles.checkboxText}>Scattered itchy bumps</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom2']}
onValueChange={() => toggleCheckbox('symptom2')}
<Image source={require('./skinassets/scanme.png')}
style={{ width: '50%', height: imageHeight, alignSelf: 'center', resizeMode: 'contain', marginBottom: -29 }} />
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/QR1.png')} // Make sure the path is correct
style={styles.qrCodeImage}
/>
<Text style={styles.checkboxText}>Large red inflamed area across belly</Text>
</View>
<View style={styles.individualCheckboxContainer}>
<CheckBox
value={selectedSymptoms['symptom3']}
onValueChange={() => toggleCheckbox('symptom3')}
/>
<Text style={styles.checkboxText}>Yellow discharges</Text>
<TouchableOpacity
style={styles.orButton}
onPress={() => Linking.openURL('https://mywebar.com/p/Project_0_ysb0ffrwxn')}>
<Text style={styles.orButtonText}>OR Click This</Text>
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<View style={styles.checkboxContainer}>
{symptomsGroups.map((group, index) => (
<View key={index}>
{group.map(symptom => (
<View style={styles.individualCheckboxContainer} key={symptom.key}>
<CheckBox
value={selectedSymptoms[symptom.key]}
onValueChange={() => toggleCheckbox(symptom.key)}
/>
<Text style={styles.checkboxText}>{symptom.text}</Text>
</View>
))}
{index !== symptomsGroups.length - 1 && (
<View style={styles.separator} />
)}
</View>
))}
</View>
</View>
</View>
<Button
title="Continue for more information"
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</ScrollView>
</SafeAreaView>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
......@@ -170,20 +209,30 @@ const styles = StyleSheet.create({
marginVertical: 20,
},
descriptionText: {
fontSize: 16,
fontSize: 18,
textAlign: 'center',
marginHorizontal: 20,
marginBottom: 20,
color:COLORS.black,
fontWeight: 'bold',
},
separator: {
height: 2,
backgroundColor: COLORS.blue,
marginVertical: 10,
width: '90%', // Reduce width to see margins from container edges
alignSelf: 'center',
marginLeft:-197,
},
checkboxContainer: {
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
backgroundColor: COLORS.lightBlue,
borderRadius: 25,
width:'100%',
width: '100%', // Ensure it's taking the full width of its parent
alignSelf: 'center', // This ensures it's centered relative to the parent
paddingTop: 10,
marginLeft:197,
paddingTop:10
......@@ -193,6 +242,7 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
marginBottom: 10,
alignSelf: 'center',
color:COLORS.black,
},
checkboxRow: {
flexDirection: 'row',
......@@ -202,6 +252,7 @@ const styles = StyleSheet.create({
checkboxText: {
fontSize: 16,
marginLeft: 8,
flexShrink: 1, // Allows the text to shrink and wrap onto the next line
},
submitButton: {
backgroundColor: COLORS.primary,
......@@ -251,9 +302,10 @@ const styles = StyleSheet.create({
flexDirection: 'row', // Align checkbox and label in a row
alignItems: 'center', // Center align items vertically
borderWidth: 0.6, // Optional border width
width: '100%', // Width 100% to fill container width
marginLeft:-100,
width: '98%', // Width 100% to fill container width
marginLeft:-95,
elevation: 6,
minHeight: 50,
},
......@@ -273,7 +325,7 @@ const styles = StyleSheet.create({
borderColor: '#80BCBD', // Set the border color
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
marginBottom: -20, // Add bottom margin for spacing
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
......@@ -286,6 +338,7 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
......@@ -306,6 +359,44 @@ const styles = StyleSheet.create({
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
qrCodeBox: {
width: '90%',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: COLORS.white,
marginBottom: 20,
shadowColor: "#000",
borderColor: '#80BCBD',
borderWidth: 2,
borderRadius: 10,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
qrCodeImage: {
width: 200, // Adjust size as needed
height: 200, // Adjust size as needed
},
orButton: {
marginTop: 30,
backgroundColor: COLORS.primary,
padding: 10,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
},
orButtonText: {
color: COLORS.white,
fontSize: 14,
fontWeight: 'bold',
}
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms1.js
View file @ 82cf4e3e
......@@ -17,7 +17,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374540/3D/biile6hyrj1aiqvyvedi.mp4";
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374537/3D/ulxecngohldnmcizzrej.mp4";
const videoRef = useRef(null);
......@@ -81,7 +81,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms </Text>
<Text style={styles.topicText}>patechiae Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Self diagnose with the 3D Model
......
src/screens/home/skin/AdditionalSymptoms2.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374525/3D/tu1jhgaa6hvcyby5zybr.mp4";
const videoRef = useRef(null);
const handleLoad = () => {
......@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps
};
const toggleFullscreen = () => {
if (videoRef.current) {
if (!fullscreen) {
videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
} else {
videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const togglePlayPause = () => {
setVideoPaused(!videoPaused);
showControlsTemporarily(); // Toggle the pause state of the video
};
const showControlsTemporarily = () => {
setControlsVisible(true);
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
};
useEffect(() => {
return () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Maculopapular Additional Symptoms </Text>
<Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
Self diagnose with the 3D Model
</Text>
<View style={styles.videoContainer}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
......@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
......@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
flexGrow: 1,
},
......@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
......@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
width:'100%',
marginLeft:197,
paddingTop:10
},
......@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '100%',
width: '110%',
height: '100%',
},
......@@ -215,6 +257,16 @@ const styles = StyleSheet.create({
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
......@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
......@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms3.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374517/3D/q2zk6ka9aqamthwgn1vv.mp4";
const videoRef = useRef(null);
const handleLoad = () => {
......@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps
};
const toggleFullscreen = () => {
if (videoRef.current) {
if (!fullscreen) {
videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
} else {
videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const togglePlayPause = () => {
setVideoPaused(!videoPaused);
showControlsTemporarily(); // Toggle the pause state of the video
};
const showControlsTemporarily = () => {
setControlsVisible(true);
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
};
useEffect(() => {
return () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
<Text style={styles.topicText}>Herpes Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
Self diagnose with the 3D Model
</Text>
<View style={styles.videoContainer}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
......@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
......@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
flexGrow: 1,
},
......@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
......@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
width:'100%',
marginLeft:197,
paddingTop:10
},
......@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '100%',
width: '110%',
height: '100%',
},
......@@ -215,6 +257,16 @@ const styles = StyleSheet.create({
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
......@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
......@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms4.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374529/3D/ri0w5kgmpchajypa7xfb.mp4";
const videoRef = useRef(null);
const handleLoad = () => {
......@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps
};
const toggleFullscreen = () => {
if (videoRef.current) {
if (!fullscreen) {
videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
} else {
videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const togglePlayPause = () => {
setVideoPaused(!videoPaused);
showControlsTemporarily(); // Toggle the pause state of the video
};
const showControlsTemporarily = () => {
setControlsVisible(true);
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
};
useEffect(() => {
return () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Patechiae Additional Symptoms </Text>
<Text style={styles.topicText}>Pupp Hives Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
Self diagnose with the 3D Model
</Text>
<View style={styles.videoContainer}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
......@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
......@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
flexGrow: 1,
},
......@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
......@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
width:'100%',
marginLeft:197,
paddingTop:10
},
......@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '100%',
width: '110%',
height: '100%',
},
......@@ -215,6 +257,16 @@ const styles = StyleSheet.create({
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
......@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
......@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
// ... possibly other styles
});
......
src/screens/home/skin/AdditionalSymptoms5.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, } from 'react-native';
import { View, StyleSheet, Text, ScrollView, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package
import Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false,
symptom3: false,});
const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = useState(true);
const [fullscreen, setFullscreen] = useState(false);
const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null);
const URL_link = "https://res.cloudinary.com/dl207ux6g/video/upload/v1715374540/3D/biile6hyrj1aiqvyvedi.mp4";
const videoRef = useRef(null);
const handleLoad = () => {
......@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps
};
const toggleFullscreen = () => {
if (videoRef.current) {
if (!fullscreen) {
videoRef.current.presentFullscreenPlayer(); // This will open the video in fullscreen
} else {
videoRef.current.dismissFullscreenPlayer(); // This will exit the fullscreen mode
}
setFullscreen(!fullscreen); // Toggle the fullscreen state
}
};
const togglePlayPause = () => {
setVideoPaused(!videoPaused);
showControlsTemporarily(); // Toggle the pause state of the video
};
const showControlsTemporarily = () => {
setControlsVisible(true);
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
hideTimer.current = setTimeout(() => {
setControlsVisible(false);
}, 3000); // Hide controls after 3 seconds of inactivity
};
useEffect(() => {
return () => {
if (hideTimer.current) {
clearTimeout(hideTimer.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}>
<Text style={styles.topicText}>Herpes HPV Additional Symptoms </Text>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text>
<View style={styles.videoBox}>
<Text style={styles.descriptionText}>
Watch the 3D Model Video to Identify Additional Symptoms and Check the Boxes for Your Experience
Self diagnose with the 3D Model
</Text>
<View style={styles.videoContainer}>
<TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file
style={styles.video}
controls={true}
// ref={videoRef}
source={{ uri: URL_link }} // Replace with the path to your video file
style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad}
onBuffer={handleBuffer}
onLoad={() => setVideoPaused(false)}
onError={(error) => console.error('Video playback error:', error)}
/>
</View>
{controlsVisible && (
<TouchableOpacity style={styles.playPauseButton} onPress={togglePlayPause}>
<Image
style={styles.playPauseIcon}
source={videoPaused ? require('./skinassets/play.png') : require('./skinassets/pause.png')}
/>
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
<Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}>
......@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text>
</View>
</View>
</ScrollView>
</View>
<Button
......@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/>
</View>
</ScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
scrollContainer: {
padding: 40,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
flexGrow: 1,
},
......@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white,
},
topContainer: {
flex: 3,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.white,
......@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'130%',
marginBottom:10,
marginLeft:40
width:'100%',
marginLeft:197,
paddingTop:10
},
......@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
},
video: {
width: '100%',
width: '110%',
height: '100%',
},
......@@ -215,6 +257,16 @@ const styles = StyleSheet.create({
},
fullscreenButton: {
marginTop: 10,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
padding: 10,
borderRadius: 5,
},
fullscreenButtonText: {
color: '#fff',
},
videoBox: {
backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width
......@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing
width: '90%', // Adjust the width as necessary
width: '100%', // Adjust the width as necessary
alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional)
shadowColor: "#000",
......@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
playPauseButton: {
position: 'absolute',
top: '50%',
left: '50%',
bottom:'30%',
transform: [{ translateX: -25 }, { translateY: -25 }],
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
},
playPauseIcon: {
width: 50,
height: 50,
},
contentContainer: {
paddingBottom: 20, // Adds padding at the bottom
},
// ... possibly other styles
});
......
src/screens/home/skin/SkinRisk.js
View file @ 82cf4e3e
......@@ -26,7 +26,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
<Text style={styles.subTopicText}>Why High Risk ?</Text>
<View style={styles.audioPlayerContainer}>
<Video
source={require("./skinassets/add1.mp4")}
source={require("./skinassets/pause.png")}
style={styles.audioPlayer}
controls={true}
audioOnly={true}
......
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