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 }) => {
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