@jescon-technologies/react-native-ui-kit 0.0.6 → 0.0.8

package/src/Media/RecordVideo.js

@@ -1,223 +0,0 @@
-import React, { useState, useRef } from 'react';
-import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
-// import { RNCamera } from 'react-native-camera';
-import RNFetchBlob from 'rn-fetch-blob';
-
-const RecordVideo = ({ navigation, route }) => {
-  const [path, setPath] = useState('');
-  const [recorded, setRecorded] = useState(null);
-  const [isRecording, setIsRecording] = useState(false);
-  const [startRecording, setStartRecording] = useState(false);
-
-  const cameraRef = useRef(null);
-
-  const takeVideo = () => {
-    setStartRecording(true);
-    saveVideo();
-  };
-
-  const saveVideo = async () => {
-    if (cameraRef.current) {
-      const options = {
-        quality: RNCamera.Constants.VideoQuality['4:3'],
-        forceUpOrientation: true,
-      };
-      const data = await cameraRef.current.recordAsync(options);
-      setPath(data.uri);
-      setRecorded(false);
-      setIsRecording(false);
-      stopRecord();
-      console.log('video data', data);
-    }
-  };
-
-  const stopRecord = async () => {
-    setIsRecording(false);
-    setStartRecording(false);
-    cameraRef.current.stopRecording();
-    const str = path;
-    const res = path.length > 0 ? await fetch(str) : null;
-    const blob = res != null ? await res.blob() : null;
-
-    let fileName = str.substr(str.lastIndexOf('/') + 1);
-    let videoPath = str.replace('file:///', '');
-    if (path.length > 0) {
-      navigation.goBack();
-      route.params.onSelect({
-        uri: str,
-        filename: 'video',
-        filetype: blob.type,
-      });
-    }
-  };
-
-  return (
-    <View style={layoutstyles.container}>
-      <RNCamera
-        ref={cameraRef}
-        style={layoutstyles.preview}
-        type={RNCamera.Constants.Type.back}
-        flashMode={RNCamera.Constants.FlashMode.on}
-      />
-      <View style={layoutstyles.child_container}>
-        {!startRecording ? (
-          <TouchableOpacity onPress={takeVideo} style={layoutstyles.capture} />
-        ) : (
-          <TouchableOpacity onPress={stopRecord} style={[layoutstyles.capture, layoutstyles.stop_recording]} />
-        )}
-      </View>
-    </View>
-  );
-};
-
-const layoutstyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: 'black',
-  },
-  child_container: {
-    flex: 0,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    margin: 20,
-  },
-  preview: {
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-  },
-  stop_recording: {
-    backgroundColor: 'red',
-  },
-  capture: {
-    flex: 0,
-    backgroundColor: '#fff',
-    borderRadius: 5,
-    padding: 15,
-    paddingHorizontal: 20,
-    alignSelf: 'center',
-    margin: 20,
-    height: 40,
-  },
-});
-
-export default RecordVideo;
-
-
-
-
-
-
-
-
-
-
-
-
-// import React, { Component } from 'react';
-// import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
-// import { RNCamera } from 'react-native-camera';
-// import RNFetchBlob from "rn-fetch-blob";
-
-// export default class RecordVideo extends Component {
-//     constructor(props) {
-//         super(props);
-//         this.state = {
-//             path: "",
-//             recorded: null,
-//             isRecording: null,
-//             startRecording: false
-//         }
-//     }
-//     takeVideo() {
-//         this.setState({ startRecording: true })
-//         this.saveVideo()
-//     }
-//     async saveVideo() {
-
-//         if (this.camera) {
-//             const options = {
-//                 quality: RNCamera.Constants.VideoQuality["4:3"],
-//                 forceUpOrientation: true,
-//             }
-//             const data = await this.camera.recordAsync(options)
-//             this.setState({ path: data.uri })
-//             this.setState({ recorded: false })
-//             this.setState({ isRecording: false })
-//             this.stopRecord()
-//             console.log("video data",data);
-//         }
-//     }
-//     async stopRecord() {
-//         this.setState({ isRecording: false, startRecording: false })
-//         this.camera.stopRecording();
-//         const str = this.state.path;
-//         const res = this.state.path.length > 0 ? await fetch(str) : null;
-//         const blob = res != null ? await res.blob() : null;
-
-//         let fileName = str.substr(str.lastIndexOf('/') + 1);
-//         let videoPath = str.replace('file:///', '');
-//         this.state.path.length > 0 && this.props.navigation.goBack();
-//         this.state.path.length > 0 && this.props.route.params.onSelect({
-//             uri: str,
-//             filename: 'video',
-//             filetype: blob.type,
-//         });
-//     }
-//     render() {
-//         return (
-//             <View style={layoutstyles.container}>
-//                 <RNCamera
-//                     ref={ref => {
-//                         this.camera = ref;
-//                     }}
-//                     style={layoutstyles.preview}
-//                     type={RNCamera.Constants.Type.back}
-//                     flashMode={RNCamera.Constants.FlashMode.on}
-//                 />
-//                 <View style={layoutstyles.child_container}>
-//                     {!this.state.startRecording ?
-//                         <TouchableOpacity onPress={this.takeVideo.bind(this)}
-//                             style={layoutstyles.capture}>
-//                         </TouchableOpacity>
-//                         :
-//                         <TouchableOpacity onPress={this.stopRecord.bind(this)}
-//                             style={[layoutstyles.capture, layoutstyles.stop_recording]}>
-
-//                         </TouchableOpacity>
-//                     }
-//                 </View>
-//             </View>
-//         );
-//     }
-// }
-// const layoutstyles = StyleSheet.create({
-//     container: {
-//         flex: 1,
-//         flexDirection: 'column',
-//         backgroundColor: 'black',
-//     },
-//     child_container: {
-//         flex: 0, flexDirection: 'row',
-//         justifyContent: 'center', margin: 20,
-//     },
-//     preview: {
-//         flex: 1,
-//         justifyContent: 'flex-end',
-//         alignItems: 'center',
-//     },
-//     stop_recording: {
-//         backgroundColor: 'red'
-//     },
-//     capture: {
-//         flex: 0,
-//         backgroundColor: '#fff',
-//         borderRadius: 5,
-//         padding: 15,
-//         paddingHorizontal: 20,
-//         alignSelf: 'center',
-//         margin: 20,
-//         height:40
-//     },
-// });

package/src/Media/VideoScreen.js

@@ -1,378 +0,0 @@
-import React, {useState, useEffect, useContext} from 'react';
-import {
-  SafeAreaView,
-  Image,
-  StyleSheet,
-  Dimensions,
-  Button,
-  FlatList,
-  Text,
-  View,
-  TouchableOpacity,
-  ActivityIndicator,
-  PermissionsAndroid,
-  Platform,
-} from 'react-native';
-import Fontisto from 'react-native-vector-icons/Fontisto';
-import AntDesign from 'react-native-vector-icons/AntDesign';
-// import DocumentPicker from 'react-native-document-picker';
-import {videoURL, APIURL} from '../../../../../src/Common/apiConstants';
-import { useNavigation } from '../Navigation/useNavigation';
-
-import ReactNativeBlobUtil from 'react-native-blob-util';
-import {isNU, notifyMessage} from '../CommonStyle/ComponentFunctions';
-import {Global} from '../../../../../src/Common/Global';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-
-export default function VideoScreen(props) {
-  const navigation = useNavigation();
-  const windowWidth = Dimensions.get('window').width;
-  const windowHeight = Dimensions.get('window').height;
-
-  const [data, setData] = useState(
-    props?.data?.savedvideo ? props.data.savedvideo : '',
-  );
-  console.log('savedvideooooooooooo', data);
-  const [refreshCount, setrefreshCount] = useState(1);
-  const [isVideoShow, setVideoShow] = useState(false);
-  const [deleteVideo, setDeleteVideo] = useState(false);
-  const [filePath, setFilePath] = useState({});
-  const [process, setProcess] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [disablesave, setDisablesave] = useState(true);
-
-  useEffect(() => {
-    props.setData(data);
-  }, [data]);
-
-  function deleteSelectedVideo() {
-    data
-      .filter(item => item.deletestatus === true)
-      .forEach(item => data.splice(data.indexOf(item), 1));
-    setDeleteVideo(!deleteVideo);
-    setrefreshCount(refreshCount + 1);
-  }
-
-  function changeStatus(data) {
-    data.item.deletestatus = !data.item.deletestatus;
-    setrefreshCount(refreshCount + 1);
-  }
-
-  function renderVideo(data) {
-    return (
-      <View>
-        <View>
-          <TouchableOpacity
-            onLongPress={() => setDeleteVideo(true)}
-            onPress={() =>
-              navigation.navigate('CVideoPlay', {
-                video: videoURL + data.item.filename,
-              })
-            }>
-            <Image
-              style={{
-                height: windowHeight * 0.15,
-                width: windowWidth * 0.3,
-                margin: 5,
-                resizeMode: 'cover',
-                borderRadius: 10,
-              }}
-              source={{
-                uri: 'https://media.istockphoto.com/vectors/video-player-screen-with-bar-multimedia-interface-with-player-bar-for-vector-id1252447446?k=6&m=1252447446&s=612x612&w=0&h=he5mazXCrZRAfeJuHvFdu0P5NxfUeV2msDTXUnzJ7AQ=',
-              }}
-            />
-          </TouchableOpacity>
-        </View>
-        {deleteVideo ? (
-          <TouchableOpacity onPress={() => changeStatus(data)}>
-            <View style={{justifyContent: 'center', alignItems: 'center'}}>
-              {!data.item.deletestatus ? (
-                <Fontisto name="checkbox-passive" size={25} color={'black'} />
-              ) : (
-                <Fontisto name="checkbox-active" size={25} color={'blue'} />
-              )}
-            </View>
-          </TouchableOpacity>
-        ) : null}
-      </View>
-    );
-  }
-
-  const getResolvedPath = async (uri, filen) => {
-    const fileBase64 = await ReactNativeBlobUtil.fs.readFile(uri, 'base64');
-    const relativePath = ReactNativeBlobUtil.fs.dirs.CacheDir;
-    const fileName = `${filen}`;
-    const path = `${relativePath}/${fileName}`;
-
-    await ReactNativeBlobUtil.fs.writeFile(path, fileBase64, 'base64');
-    return {relativePath, fileName, path};
-  };
-
-  const isPermitted = async () => {
-    if (Platform.OS === 'android') {
-      try {
-        const granted = await PermissionsAndroid.request(
-          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
-        );
-        return granted === PermissionsAndroid.RESULTS.GRANTED;
-      } catch (err) {
-        alert('Write permission err', err);
-        return false;
-      }
-    } else {
-      return true;
-    }
-  };
-
-  async function browseFromDevice() {
-    if (await isPermitted()) {
-      try {
-        const res = await DocumentPicker.pick({
-          type: [DocumentPicker.types.video],
-        });
-
-        const {relativePath, fileName, path} = await getResolvedPath(
-          res[0].uri,
-          res[0].name,
-        );
-        console.log('path', path);
-
-        let fileid_autogenerate =
-          data != null && data.length > 0 ? data.length : 0;
-
-        let dataset2 = {
-          fileid: fileid_autogenerate + 1,
-          filename: res[0].name + Date(),
-          filetype: res[0].type,
-          uri: 'file://' + path,
-          uritype: false,
-        };
-
-        Media_Upload(dataset2);
-        setrefreshCount(refreshCount + 1);
-
-      } catch (err) {
-        if (DocumentPicker.isCancel(err)) {
-          // User cancelled the picker
-        } else {
-          notifyMessage('Error selecting video', 2);
-        }
-      }
-    }
-  }
-
-  async function Media_Upload(image) {
-    setLoading(true);
-    let date = new Date().getDate();
-    let month = new Date().getMonth() + 1;
-    let year = new Date().getFullYear();
-    let hours = new Date().getHours();
-    let min = new Date().getMinutes();
-    let sec = new Date().getSeconds();
-    let millisec = new Date().getMilliseconds();
-    let uniquename =
-      `${date}` +
-      `${month}` +
-      `${year}` +
-      `${hours}` +
-      `${min}` +
-      `${sec}` +
-      `${millisec}` +
-      '.mp4';
-
-    let fileid_autogenerate = data != null && data.length > 0 ? data.length : 0;
-    let dataset2 = {
-      fileid: fileid_autogenerate + 1,
-      filename: uniquename,
-      filetype: image.filetype,
-      uri: image.uri,
-      uritype: false,
-    };
-
-    if (!dataset2.uritype) {
-      if (dataset2.uri) {
-        var formData = new FormData();
-        formData.append('file', {
-          uri: dataset2.uri,
-          type: dataset2.filetype,
-          name: dataset2.filename,
-        });
-
-        // Add your NetworkServiceCall here
-        // NetworkServiceCall(
-        //   'multiform',
-        //   APIURL + 'file/fileupload/emr/video',
-        //   formData,
-        // )
-        //   .then(function (responsedata) {
-        //     console.log('NetworkServiceCall', JSON.stringify(responsedata));
-        //     if (responsedata.httpstatus == 200) {
-        //       dataset2.filename = responsedata.data.fileuri;
-        //       setData(
-        //         data != null
-        //           ? prevData => [...prevData, dataset2.filename]
-        //           : [dataset2.filename],
-        //       );
-        //       responseJSON.consultationEdit.editStatus = true;
-        //       setrefreshCount(refreshCount + 1);
-        //       props.editStatus(1);
-        //       props.data.usertype =
-        //         Global.PatientDetails != undefined &&
-        //         Global.PatientDetails.usertype != undefined &&
-        //         Global.PatientDetails.usertype != null
-        //           ? Global.PatientDetails.usertype
-        //           : 'Z';
-        //       props.data.suuser =
-        //         Global.userData != undefined &&
-        //         Global.userData.suuser != undefined &&
-        //         Global.userData.suuser != null
-        //           ? Global.userData.suuser
-        //           : 0;
-        //       setLoading(false);
-        //     } else {
-        //       setLoading(false);
-        //     }
-        //   })
-        //   .catch(error => {
-        //     setLoading(false);
-        //   });
-
-        // For now, just add to local state
-        setData(
-          data != null
-            ? [...data, dataset2]
-            : [dataset2],
-        );
-        setrefreshCount(refreshCount + 1);
-        props.editStatus(1);
-        setLoading(false);
-      }
-    }
-  }
-
-  function RecordVideo() {
-    navigation.navigate('CCaptureImageWithoutEdit', {
-      cameramoduletype: 1, // video
-      hidebuttons: false,
-      cameratype: 'back',
-      onSelect: s => (s && isNU(s) ? Media_Upload(s) : null),
-    });
-  }
-
-  return (
-    <View style={{flex: 1}}>
-      <View style={styles.itemContainer}>
-        {/* Delete Button */}
-        {deleteVideo && (
-          <TouchableOpacity
-            style={styles.deleteButton}
-            onPress={deleteSelectedVideo}>
-            <AntDesign name="delete" size={30} color={'red'} />
-            <Text style={styles.deleteText}>Delete Selected</Text>
-          </TouchableOpacity>
-        )}
-
-        {/* Videos Grid */}
-        <FlatList
-          data={data}
-          renderItem={renderVideo}
-          keyExtractor={item => item.id}
-          numColumns={3}
-          contentContainerStyle={{alignItems: 'center', paddingTop: 10}}
-        />
-
-        {/* Loading Indicator */}
-        {loading && (
-          <View style={styles.loadingContainer}>
-            <ActivityIndicator size="large" color="#0000ff" />
-          </View>
-        )}
-      </View>
-
-      {/* Bottom Action Bar */}
-      <View style={styles.bottomActionBar}>
-        <TouchableOpacity
-          style={styles.actionButton}
-          onPress={browseFromDevice}>
-          <MaterialIcons name="video-library" color={'white'} size={24} />
-          <Text style={styles.actionButtonText}>Browse Video</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={styles.actionButton}
-          onPress={RecordVideo}>
-          <Ionicons name="videocam" color={'white'} size={24} />
-          <Text style={styles.actionButtonText}>Record Video</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[styles.actionButton, disablesave && styles.disabledButton]}
-          disabled={disablesave}
-          onPress={() => {
-            // Save functionality here
-            // firebasevideosave();
-          }}>
-          <FontAwesome name="save" color={'white'} size={24} />
-          <Text style={styles.actionButtonText}>Save</Text>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  itemContainer: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  deleteButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 10,
-    backgroundColor: '#ffebee',
-    marginHorizontal: 10,
-    borderRadius: 5,
-    marginTop: 10,
-  },
-  deleteText: {
-    marginLeft: 10,
-    color: 'red',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-  loadingContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-  },
-  bottomActionBar: {
-    flexDirection: 'row',
-    backgroundColor: 'darkblue',
-    height: 60,
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-  },
-  actionButton: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 5,
-  },
-  actionButtonText: {
-    color: 'white',
-    fontSize: 12,
-    marginTop: 3,
-    textAlign: 'center',
-  },
-  disabledButton: {
-    opacity: 0.5,
-  },
-});