Skip to content

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

Additional_symptoms

parent 73172d28
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 546 additions and 163 deletions
src/screens/home/skin/AdditionalSymptoms.js
View file @ 82cf4e3e
This diff is collapsed.
src/screens/home/skin/AdditionalSymptoms1.js
View file @ 82cf4e3e
...@@ -17,7 +17,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -17,7 +17,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
const [controlsVisible, setControlsVisible] = useState(false); const [controlsVisible, setControlsVisible] = useState(false);
const hideTimer = useRef(null); 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); const videoRef = useRef(null);
...@@ -81,7 +81,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -81,7 +81,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollContainer}> <ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}> <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}> <View style={styles.videoBox}>
<Text style={styles.descriptionText}> <Text style={styles.descriptionText}>
Self diagnose with the 3D Model Self diagnose with the 3D Model
......
src/screens/home/skin/AdditionalSymptoms2.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false, symptom2: false,
symptom3: false,}); symptom3: false,});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = 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 = () => { const handleLoad = () => {
...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps // 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 ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.container}> <ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Maculopapular Additional Symptoms </Text> <Text style={styles.topicText}>Cytomegalovirus Additional Symptoms </Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<Text style={styles.descriptionText}> <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> </Text>
<View style={styles.videoContainer}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file // ref={videoRef}
style={styles.video} source={{ uri: URL_link }} // Replace with the path to your video file
controls={true} style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused} paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad} onLoad={() => setVideoPaused(false)}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)} 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> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}> <View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */} {/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}> <View style={styles.individualCheckboxContainer}>
...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text> <Text style={styles.checkboxText}>Yellow discharges</Text>
</View> </View>
</View> </View>
</ScrollView>
</View> </View>
<Button <Button
...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> />
</View> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
padding: 40, flexGrow: 1,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
}, },
...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({ ...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
}, },
topContainer: { topContainer: {
flex: 3, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({ ...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: { checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, borderRadius: 25,
width:'130%', width:'100%',
marginBottom:10, marginLeft:197,
marginLeft:40 paddingTop:10
}, },
...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({ ...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black'
}, },
video: { video: {
width: '100%', width: '110%',
height: '100%', height: '100%',
}, },
...@@ -215,6 +257,16 @@ const styles = StyleSheet.create({ ...@@ -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: { videoBox: {
backgroundColor: COLORS.white, // Set background color to white backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width borderWidth: 2, // Set the border width
...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({ ...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing 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 alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
shadowColor: "#000", shadowColor: "#000",
...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({ ...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, 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 // ... possibly other styles
}); });
......
src/screens/home/skin/AdditionalSymptoms3.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false, symptom2: false,
symptom3: false,}); symptom3: false,});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = 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 = () => { const handleLoad = () => {
...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps // 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 ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.container}> <ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}> <View style={styles.topContainer}>
<Text style={styles.topicText}>Melanoma Additional Symptoms </Text> <Text style={styles.topicText}>Herpes Additional Symptoms </Text>
<View style={styles.videoBox}> <View style={styles.videoBox}>
<Text style={styles.descriptionText}> <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> </Text>
<View style={styles.videoContainer}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file // ref={videoRef}
style={styles.video} source={{ uri: URL_link }} // Replace with the path to your video file
controls={true} style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused} paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad} onLoad={() => setVideoPaused(false)}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)} 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> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}> <View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */} {/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}> <View style={styles.individualCheckboxContainer}>
...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text> <Text style={styles.checkboxText}>Yellow discharges</Text>
</View> </View>
</View> </View>
</ScrollView>
</View> </View>
<Button <Button
...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> />
</View> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
padding: 40, flexGrow: 1,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
}, },
...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({ ...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
}, },
topContainer: { topContainer: {
flex: 3, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({ ...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: { checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, borderRadius: 25,
width:'130%', width:'100%',
marginBottom:10, marginLeft:197,
marginLeft:40 paddingTop:10
}, },
...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({ ...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black'
}, },
video: { video: {
width: '100%', width: '110%',
height: '100%', height: '100%',
}, },
...@@ -215,6 +257,16 @@ const styles = StyleSheet.create({ ...@@ -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: { videoBox: {
backgroundColor: COLORS.white, // Set background color to white backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width borderWidth: 2, // Set the border width
...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({ ...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing 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 alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
shadowColor: "#000", shadowColor: "#000",
...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({ ...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, 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 // ... possibly other styles
}); });
......
src/screens/home/skin/AdditionalSymptoms4.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false, symptom2: false,
symptom3: false,}); symptom3: false,});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = 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 = () => { const handleLoad = () => {
...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps // 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 ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.container}> <ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}> <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}> <View style={styles.videoBox}>
<Text style={styles.descriptionText}> <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> </Text>
<View style={styles.videoContainer}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file // ref={videoRef}
style={styles.video} source={{ uri: URL_link }} // Replace with the path to your video file
controls={true} style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused} paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad} onLoad={() => setVideoPaused(false)}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)} 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> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}> <View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */} {/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}> <View style={styles.individualCheckboxContainer}>
...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text> <Text style={styles.checkboxText}>Yellow discharges</Text>
</View> </View>
</View> </View>
</ScrollView>
</View> </View>
<Button <Button
...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> />
</View> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
padding: 40, flexGrow: 1,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
}, },
...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({ ...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
}, },
topContainer: { topContainer: {
flex: 3, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({ ...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: { checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, borderRadius: 25,
width:'130%', width:'100%',
marginBottom:10, marginLeft:197,
marginLeft:40 paddingTop:10
}, },
...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({ ...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black'
}, },
video: { video: {
width: '100%', width: '110%',
height: '100%', height: '100%',
}, },
...@@ -215,6 +257,16 @@ const styles = StyleSheet.create({ ...@@ -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: { videoBox: {
backgroundColor: COLORS.white, // Set background color to white backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width borderWidth: 2, // Set the border width
...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({ ...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing 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 alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
shadowColor: "#000", shadowColor: "#000",
...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({ ...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, 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 // ... possibly other styles
}); });
......
src/screens/home/skin/AdditionalSymptoms5.js
View file @ 82cf4e3e
import React, { useState, useRef, useEffect } from 'react'; 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 { COLORS ,IMGS, ROUTES} from '../../../constants';
import CheckBox from '@react-native-community/checkbox'; // Make sure to install this package 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 Video from 'react-native-video'; // Make sure to install this package
import Button from '../../../components/Button'; import Button from '../../../components/Button';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
const AdditionalSymptomsScreen = ({ navigation }) => { const AdditionalSymptomsScreen = ({ navigation }) => {
const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false, const [selectedSymptoms, setSelectedSymptoms] = useState({ symptom1: false,
symptom2: false, symptom2: false,
symptom3: false,}); symptom3: false,});
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [videoPaused, setVideoPaused] = 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 = () => { const handleLoad = () => {
...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -36,30 +43,70 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
// Navigate or perform next steps // 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 ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<View style={styles.container}> <ScrollView style={styles.scrollContainer}>
<View style={styles.topContainer}> <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}> <View style={styles.videoBox}>
<Text style={styles.descriptionText}> <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> </Text>
<View style={styles.videoContainer}> <TouchableOpacity style={styles.videoContainer} onPress={showControlsTemporarily}>
<Video <Video
source={require("./skinassets/add1.mp4")} // Replace with the path to your video file // ref={videoRef}
style={styles.video} source={{ uri: URL_link }} // Replace with the path to your video file
controls={true} style={[styles.video, { height: fullscreen ? '100%' : 300 }]}
paused={videoPaused} paused={videoPaused}
resizeMode="contain" // This ensures the video fits within its container resizeMode="contain" // This ensures the video fits within its container
onLoad={handleLoad} onLoad={() => setVideoPaused(false)}
onBuffer={handleBuffer}
onError={(error) => console.error('Video playback error:', error)} 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> </View>
<Text style={styles.checkboxLabel}>Check the related box</Text> <Text style={styles.checkboxLabel}>Check the related box</Text>
<ScrollView style={styles.scrollContainer} >
<View style={styles.checkboxContainer}> <View style={styles.checkboxContainer}>
{/* Repeat this CheckBox component for each symptom */} {/* Repeat this CheckBox component for each symptom */}
<View style={styles.individualCheckboxContainer}> <View style={styles.individualCheckboxContainer}>
...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -84,7 +131,7 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
<Text style={styles.checkboxText}>Yellow discharges</Text> <Text style={styles.checkboxText}>Yellow discharges</Text>
</View> </View>
</View> </View>
</ScrollView>
</View> </View>
<Button <Button
...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => { ...@@ -92,21 +139,14 @@ const AdditionalSymptomsScreen = ({ navigation }) => {
style={styles.nextButton} style={styles.nextButton}
onPress={() => navigation.navigate(ROUTES.SKIN_RISK)} onPress={() => navigation.navigate(ROUTES.SKIN_RISK)}
/> />
</View> </ScrollView>
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
scrollContainer: { scrollContainer: {
padding: 40, flexGrow: 1,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25,
width:'110%',
marginBottom:-20,
paddingTop:-100,
}, },
...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({ ...@@ -115,7 +155,7 @@ const styles = StyleSheet.create({
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
}, },
topContainer: { topContainer: {
flex: 3, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: COLORS.white, backgroundColor: COLORS.white,
...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({ ...@@ -138,12 +178,13 @@ const styles = StyleSheet.create({
checkboxContainer: { checkboxContainer: {
padding: 60,
backgroundColor: COLORS.lightBlue, // Use a light pastel blue color backgroundColor: COLORS.lightBlue, // Use a light pastel blue color
borderRadius: 25, borderRadius: 25,
width:'130%', width:'100%',
marginBottom:10, marginLeft:197,
marginLeft:40 paddingTop:10
}, },
...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({ ...@@ -195,9 +236,10 @@ const styles = StyleSheet.create({
aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed aspectRatio: 16 / 9, // You can adjust this aspect ratio as needed
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black'
}, },
video: { video: {
width: '100%', width: '110%',
height: '100%', height: '100%',
}, },
...@@ -215,6 +257,16 @@ const styles = StyleSheet.create({ ...@@ -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: { videoBox: {
backgroundColor: COLORS.white, // Set background color to white backgroundColor: COLORS.white, // Set background color to white
borderWidth: 2, // Set the border width borderWidth: 2, // Set the border width
...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({ ...@@ -222,7 +274,7 @@ const styles = StyleSheet.create({
borderRadius: 10, // Set border radius for rounded corners borderRadius: 10, // Set border radius for rounded corners
padding: 20, // Add padding around the content padding: 20, // Add padding around the content
marginBottom: 20, // Add bottom margin for spacing 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 alignSelf: 'center', // Center the box within its container
// Add shadows for elevation effect (optional) // Add shadows for elevation effect (optional)
shadowColor: "#000", shadowColor: "#000",
...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({ ...@@ -234,6 +286,27 @@ const styles = StyleSheet.create({
shadowRadius: 3.84, shadowRadius: 3.84,
elevation: 5, 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 // ... possibly other styles
}); });
......
src/screens/home/skin/SkinRisk.js
View file @ 82cf4e3e
...@@ -26,7 +26,7 @@ const RiskEvaluationScreen = ({ navigation }) => { ...@@ -26,7 +26,7 @@ const RiskEvaluationScreen = ({ navigation }) => {
<Text style={styles.subTopicText}>Why High Risk ?</Text> <Text style={styles.subTopicText}>Why High Risk ?</Text>
<View style={styles.audioPlayerContainer}> <View style={styles.audioPlayerContainer}>
<Video <Video
source={require("./skinassets/add1.mp4")} source={require("./skinassets/pause.png")}
style={styles.audioPlayer} style={styles.audioPlayer}
controls={true} controls={true}
audioOnly={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