136 lines
3.5 KiB
JavaScript
136 lines
3.5 KiB
JavaScript
import { clearUploadError } from "@/redux/photos/photos.actions";
|
|
import { formatBytes } from "@/util/uploadUtils";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, View } from "react-native";
|
|
import { ProgressBar, Text } from "react-native-paper";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import {
|
|
selectPhotos,
|
|
selectUploadError,
|
|
selectUploadProgress,
|
|
} from "../../redux/photos/photos.selectors";
|
|
import ErrorDisplay from "../error/error-display";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
photos: selectPhotos,
|
|
photoUploadProgress: selectUploadProgress,
|
|
uploadError: selectUploadError,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
clearError: () => dispatch(clearUploadError()),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(UploadProgress);
|
|
|
|
export function UploadProgress({
|
|
photos,
|
|
photoUploadProgress,
|
|
uploadError,
|
|
clearError,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
if (photos?.length === 0) return null;
|
|
if (uploadError)
|
|
return <ErrorDisplay error={uploadError} onDismiss={clearError} />;
|
|
return (
|
|
<View style={styles.modalContainer}>
|
|
<View style={styles.modal}>
|
|
<Text variant="titleLarge" style={styles.title}>
|
|
{t("general.labels.uploadprogress")}
|
|
</Text>
|
|
|
|
{Object.keys(photoUploadProgress).map((key) => (
|
|
<View key={key} style={styles.progressItem}>
|
|
<Text
|
|
style={styles.progressText}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{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].endTime || new Date()) -
|
|
photoUploadProgress[key].startTime) /
|
|
1000)
|
|
)}/sec`}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
const styles = StyleSheet.create({
|
|
modalContainer: {
|
|
display: "flex",
|
|
// flex: 1,
|
|
marginTop: 14,
|
|
marginBottom: 14,
|
|
justifyContent: "center",
|
|
},
|
|
modal: {
|
|
//flex: 1,
|
|
display: "flex",
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
//backgroundColor: theme.colors.elevation.level3,
|
|
borderRadius: 20,
|
|
paddingTop: 12,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5,
|
|
},
|
|
title: {
|
|
alignSelf: "center",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
paddingLeft: 12,
|
|
paddingRight: 12,
|
|
},
|
|
centeredView: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginTop: 22,
|
|
},
|
|
progressItem: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
progressText: {
|
|
flex: 1,
|
|
flexShrink: 1,
|
|
},
|
|
progressBarContainer: {
|
|
flex: 3,
|
|
marginLeft: 12,
|
|
marginRight: 12,
|
|
},
|
|
});
|