126 lines
3.6 KiB
JavaScript
126 lines
3.6 KiB
JavaScript
import { formatBytes } from "@/util/uploadUtils";
|
|
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
|
|
import { ProgressBar } from "react-native-paper";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
selectPhotos,
|
|
selectUploadProgress,
|
|
} from "../../redux/photos/photos.selectors";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
photoUploadProgress: selectUploadProgress,
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(UploadProgress);
|
|
|
|
export function UploadProgress({ photos, photoUploadProgress }) {
|
|
if (photos?.length === 0) return null;
|
|
return (
|
|
<View style={styles.modalContainer}>
|
|
<View style={styles.modal}>
|
|
{Object.keys(photoUploadProgress).map((key) => (
|
|
<View key={key} style={styles.progressItem}>
|
|
<Text style={styles.progressText}>
|
|
{photoUploadProgress[key].fileName}
|
|
</Text>
|
|
<View style={styles.progressBarContainer}>
|
|
<ProgressBar
|
|
progress={photoUploadProgress[key].progress}
|
|
style={styles.progress}
|
|
color={
|
|
photoUploadProgress[key].progress === 1 ? "green" : "blue"
|
|
}
|
|
/>
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text>{`${formatBytes(
|
|
photoUploadProgress[key].loaded /
|
|
(((photoUploadProgress[key].uploadEnd || new Date()) -
|
|
photoUploadProgress[key].uploadStart) /
|
|
1000)
|
|
)}/sec`}</Text>
|
|
{photoUploadProgress[key].percent === 1 && (
|
|
<>
|
|
<ActivityIndicator style={{ marginLeft: 12 }} />
|
|
<Text style={{ marginLeft: 4 }}>Processing...</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
<View style={styles.centeredView}>
|
|
{
|
|
// progress.statusText ? (
|
|
// <>
|
|
// <ActivityIndicator style={{ marginLeft: 12 }} />
|
|
// <Text style={{ marginLeft: 4 }}>{progress.statusText}</Text>
|
|
// <Divider />
|
|
// </>
|
|
// ) : (
|
|
// <>
|
|
// <Text>{`${progress.totalFilesCompleted} of ${progress.totalFiles} uploaded.`}</Text>
|
|
// <Text>{`${formatBytes(progress.totalUploaded)} of ${formatBytes(
|
|
// progress.totalToUpload
|
|
// )} uploaded.`}</Text>
|
|
// </>
|
|
// )
|
|
}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
const styles = StyleSheet.create({
|
|
modalContainer: {
|
|
display: "flex",
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
},
|
|
modal: {
|
|
//flex: 1,
|
|
display: "flex",
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
backgroundColor: "white",
|
|
borderRadius: 20,
|
|
padding: 18,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5,
|
|
},
|
|
centeredView: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginTop: 22,
|
|
},
|
|
progressItem: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
progressText: {
|
|
flex: 1,
|
|
},
|
|
progressBarContainer: {
|
|
flex: 3,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
});
|