Progress update cleanup and UI improvements.

components/upload-progress/upload-progress.jsx

@@ -1,28 +1,53 @@
+import { clearUploadError } from "@/redux/photos/photos.actions";
+import theme from "@/util/theme";
 import { formatBytes } from "@/util/uploadUtils";
-import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
-import { ProgressBar } from "react-native-paper";
+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,
-    selectUploadProgress,
+  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, null)(UploadProgress);
+export default connect(mapStateToProps, mapDispatchToProps)(UploadProgress);
 
-export function UploadProgress({ photos, photoUploadProgress }) {
+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}>
+            <Text
+              style={styles.progressText}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+            >
               {photoUploadProgress[key].fileName}
             </Text>
             <View style={styles.progressBarContainer}>
@@ -42,38 +67,14 @@ export function UploadProgress({ photos, photoUploadProgress }) {
               >
                 <Text>{`${formatBytes(
                   photoUploadProgress[key].loaded /
-                    (((photoUploadProgress[key].uploadEnd || new Date()) -
-                      photoUploadProgress[key].uploadStart) /
+                    (((photoUploadProgress[key].endTime || new Date()) -
+                      photoUploadProgress[key].startTime) /
                       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>
   );
@@ -81,17 +82,19 @@ export function UploadProgress({ photos, photoUploadProgress }) {
 const styles = StyleSheet.create({
   modalContainer: {
     display: "flex",
-    flex: 1,
+    // flex: 1,
+    marginTop: 14,
+    marginBottom: 14,
     justifyContent: "center",
   },
   modal: {
     //flex: 1,
     display: "flex",
-    marginLeft: 20,
-    marginRight: 20,
-    backgroundColor: "white",
+    marginLeft: 12,
+    marginRight: 12,
+    backgroundColor: theme.colors.elevation.level3,
     borderRadius: 20,
-    padding: 18,
+    paddingTop: 12,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -101,6 +104,13 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 5,
   },
+  title: {
+    alignSelf: "center",
+    alignItems: "center",
+    marginBottom: 12,
+    paddingLeft: 12,
+    paddingRight: 12,
+  },
   centeredView: {
     justifyContent: "center",
     alignItems: "center",
@@ -116,6 +126,12 @@ const styles = StyleSheet.create({
   },
   progressText: {
     flex: 1,
+    flexShrink: 1, // allow shrinking so ellipsis can appear
+    minWidth: 0, // ensures proper shrinking inside a flex row (especially on web)
+    // (Optional) If you find web still not clipping, you can uncomment the next lines:
+    // overflow: 'hidden',
+    // textOverflow: 'ellipsis',
+    // whiteSpace: 'nowrap',
   },
   progressBarContainer: {
     flex: 3,