Additional_symptoms

src/screens/home/skin/AdditionalSymptoms.js

 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

@@ -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

 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

 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

 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

 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

@@ -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}