GUI Banner (#3904)

Author: marinofaggiana

Share/NCShareExtension.swift

@@ -5,6 +5,7 @@
 
 import UIKit
 import NextcloudKit
+import LucidBanner
 
 enum NCShareExtensionError: Error {
     case cancel, fileUpload, noAccount, noFiles, versionMismatch
@@ -42,11 +43,11 @@ class NCShareExtension: UIViewController {
     var progress: CGFloat = 0
     var counterUploaded: Int = 0
     var uploadMetadata: [tableMetadata] = []
-    let hud = NCHud()
     let utilityFileSystem = NCUtilityFileSystem()
     let utility = NCUtility()
     let global = NCGlobal.shared
     var maintenanceMode: Bool = false
+    var token: Int = 0
 
     // MARK: - View Life Cycle
 
@@ -363,22 +364,32 @@ extension NCShareExtension {
     @MainActor
     func uploadAndExit() async {
         var error: NKError?
+        token = showUploadBanner(scene: self.view.window?.windowScene)
+
         for metadata in self.uploadMetadata {
+            // BANNER
+            LucidBanner.shared.update(
+                title: NSLocalizedString("_upload_file_", comment: "") + " \(self.counterUploaded + 1) " + NSLocalizedString("_of_", comment: "") + " \(self.filesName.count)",
+                systemImage: "arrowshape.up.circle",
+                imageAnimation: .breathe,
+                progress: 0
+            )
+
             error = await self.upload(metadata: metadata)
             if error != .success {
                 break
             }
         }
 
         if error == .success {
-            self.hud.success()
+            LucidBanner.shared.update(stage: .success, for: self.token)
         } else {
-            self.hud.error(text: error?.errorDescription)
+            LucidBanner.shared.update(subtitle: error?.errorDescription, stage: .error, for: self.token)
         }
 
-        try? await Task.sleep(nanoseconds: 1_500_000_000)
-
-        self.extensionContext?.completeRequest(returningItems: self.extensionContext?.inputItems, completionHandler: nil)
+        LucidBanner.shared.dismiss(after: 2) {
+            self.extensionContext?.completeRequest(returningItems: self.extensionContext?.inputItems, completionHandler: nil)
+        }
     }
 
     @MainActor
@@ -407,38 +418,43 @@ extension NCShareExtension {
         metadata.e2eEncrypted = metadata.isDirectoryE2EE
 
         self.counterUploaded += 1
-        hud.ringProgress(view: self.view, text: NSLocalizedString("_upload_file_", comment: "") + " \(self.counterUploaded) " + NSLocalizedString("_of_", comment: "") + " \(self.filesName.count)")
 
         if metadata.isDirectoryE2EE {
             error = await NCNetworkingE2EEUpload().upload(metadata: metadata, session: session, controller: self, scene: self.view.window?.windowScene)
         } else if metadata.chunk > 0 {
-            var currentUploadTask: Task<(account: String, file: NKFile?, error: NKError), Never>?
-
-            hud.pieProgress(text: NSLocalizedString("_wait_file_preparation_", comment: ""), tapToCancelDetailText: true) {
-                currentUploadTask?.cancel()
-            }
-
+            LucidBanner.shared.update(
+                systemImage: "gearshape.arrow.triangle.2.circlepath",
+                imageAnimation: .rotate,
+                for: self.token)
             let task = Task { () -> (account: String, file: NKFile?, error: NKError) in
                 let results = await NCNetworking.shared.uploadChunkFile(metadata: metadata) { total, counter in
-                    self.hud.progress(num: Float(counter), total: Float(total))
+                    Task {@MainActor in
+                        LucidBanner.shared.update(progress: Double(counter / total), for: self.token)
+                    }
                 } uploadStart: { _ in
-                    self.hud.pieProgress(text: NSLocalizedString("_keep_active_for_upload_", comment: ""), tapToCancelDetailText: true) {
-                        currentUploadTask?.cancel()
+                    Task {@MainActor in
+                        LucidBanner.shared.update(
+                            systemImage: "arrowshape.up.circle",
+                            imageAnimation: .breathe,
+                            for: self.token)
                     }
                 } uploadProgressHandler: { _, _, progress in
-                    self.hud.progress(progress)
+                    Task {@MainActor in
+                        LucidBanner.shared.update(progress: progress, for: self.token)
+                    }
                 } assembling: {
-                    self.hud.setText(NSLocalizedString("_wait_", comment: ""))
+                    Task {@MainActor in
+                        LucidBanner.shared.update(
+                            systemImage: "gearshape.arrow.triangle.2.circlepath",
+                            imageAnimation: .rotate,
+                            for: self.token)
+                    }
                 }
 
                 return results
             }
 
-            currentUploadTask = task
             let results = await task.value
-
-            hud.dismiss()
-
             error = results.error
         } else {
             let fileNameLocalPath = utilityFileSystem.getDirectoryProviderStorageOcId(metadata.ocId,
@@ -452,7 +468,9 @@ extension NCShareExtension {
                                                                creationDate: metadata.creationDate as Date,
                                                                dateModificationFile: metadata.date as Date) { _ in
             } progressHandler: { _, _, fractionCompleted in
-                self.hud.progress(fractionCompleted)
+                Task {@MainActor in
+                    LucidBanner.shared.update(progress: fractionCompleted, for: self.token)
+                }
             }
             error = results.error
         }

iOSClient/GUI/Lucid Banner/ErrorBannerView.swift

@@ -75,12 +75,17 @@ struct ErrorBannerView: View {
 // MARK: - Helper
 
 @MainActor
-func showErrorBanner(scene: UIWindowScene?, errorDescription: String, errorCode: Int) {
+func showErrorBanner(scene: UIWindowScene?, errorDescription: String, errorCode: Int, sleepBefore: Double = 1) async {
+    try? await Task.sleep(nanoseconds: UInt64(sleepBefore * 1e9))
+
     LucidBanner.shared.show(
         scene: scene,
         subtitle: errorDescription,
         footnote: "(Code: \(errorCode))",
-        autoDismissAfter: NCGlobal.shared.dismissAfterSecond
+        autoDismissAfter: NCGlobal.shared.dismissAfterSecond,
+        onTap: { _, _ in
+            LucidBanner.shared.dismiss()
+        }
     ) { state in
         ErrorBannerView(state: state)
     }

iOSClient/GUI/Lucid Banner/HudBannerView.swift

@@ -7,12 +7,32 @@ import LucidBanner
 
 struct HudBannerView: View {
     @ObservedObject var state: LucidBannerState
+    @State private var displayedProgress: Double = 0
 
     private let circleSize: CGFloat = 90
     private let lineWidth: CGFloat = 8
 
     var body: some View {
-        let progress = min(max(state.progress ?? 0, 0), 1) // clamp 0...1
+        let rawProgress = state.progress ?? 0
+        let clampedProgress = min(max(rawProgress, 0), 1)
+
+        let stage = state.stage?.lowercased()
+        let isSuccess = (stage == "success")
+        let isError = (stage == "error")
+
+        let visualProgress: Double = {
+            if isSuccess || isError {
+                return 1.0
+            } else {
+                return displayedProgress
+            }
+        }()
+
+        let strokeColor: Color = {
+            if isSuccess { return .green }
+            if isError { return .red }
+            return .primary
+        }()
 
         containerView {
             VStack(spacing: 18) {
@@ -33,34 +53,89 @@ struct HudBannerView: View {
                         .multilineTextAlignment(.center)
                 }
 
-                // PROGRESS CIRCLE
+                // PROGRESS CIRCLE + CENTER CONTENT
                 ZStack {
+                    // Background ring
                     Circle()
                         .stroke(
                             .gray.opacity(0.1),
                             style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                         )
                         .frame(width: circleSize, height: circleSize)
 
+                    // Foreground ring
                     Circle()
-                        .trim(from: 0, to: progress)
+                        .trim(from: 0, to: visualProgress)
                         .stroke(
-                            .primary,
+                            strokeColor,
                             style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                         )
                         .rotationEffect(.degrees(-90))
                         .frame(width: circleSize, height: circleSize)
-                        .animation(.easeInOut(duration: 0.20), value: progress)
 
-                    Text("\(Int(progress * 100))%")
-                        .font(.headline.monospacedDigit())
-                        .foregroundStyle(.primary)
+                    // Center content:
+                    // - checkmark for success
+                    // - xmark for error
+                    // - percentage for normal progress
+                    Group {
+                        if isSuccess {
+                            Image(systemName: "checkmark")
+                                .font(.system(size: 34, weight: .bold))
+                                .foregroundStyle(strokeColor)
+                        } else if isError {
+                            Image(systemName: "xmark")
+                                .font(.system(size: 34, weight: .bold))
+                                .foregroundStyle(strokeColor)
+                        } else {
+                            Text("\(Int(visualProgress * 100))%")
+                                .font(.headline.monospacedDigit())
+                                .foregroundStyle(.primary)
+                        }
+                    }
                 }
                 .padding(.top, 4)
             }
             .padding(.horizontal, 22)
             .padding(.vertical, 24)
         }
+        .onAppear {
+            displayedProgress = clampedProgress
+        }
+        .onChange(of: state.progress) { _, newValue in
+            guard let newValue else {
+                withTransaction(Transaction(animation: nil)) {
+                    displayedProgress = 0
+                }
+                return
+            }
+
+            let newClamped = min(max(newValue, 0), 1)
+
+            if newClamped < displayedProgress {
+                let wasComplete = displayedProgress >= 0.95
+                let isNewStart = newClamped <= 0.1
+
+                if wasComplete && isNewStart {
+                    withTransaction(Transaction(animation: nil)) {
+                        displayedProgress = newClamped
+                    }
+                } else {
+                    return
+                }
+            } else {
+                withAnimation(.easeInOut(duration: 0.20)) {
+                    displayedProgress = newClamped
+                }
+            }
+        }
+        .onChange(of: state.stage) { _, newStage in
+            let lower = newStage?.lowercased()
+            if lower == "success" || lower == "error" {
+                withAnimation(.easeInOut(duration: 0.20)) {
+                    displayedProgress = 1.0
+                }
+            }
+        }
     }
 
     // MARK: - Container
@@ -89,8 +164,8 @@ func showHudBanner(
     scene: UIWindowScene?,
     title: String? = nil,
     subtitle: String? = nil,
-    onTap: ((_ token: Int, _ stage: String?) -> Void)? = nil) -> Int {
-
+    onTap: ((_ token: Int, _ stage: String?) -> Void)? = nil
+) -> Int {
     LucidBanner.shared.show(
         scene: scene,
         title: title,
@@ -106,6 +181,30 @@ func showHudBanner(
     }
 }
 
+@MainActor
+func completeHudBannerSuccess(
+    token: Int
+) {
+    LucidBanner.shared.update(
+        stage: .success,
+        autoDismissAfter: 2,
+        for: token
+    )
+}
+
+@MainActor
+func completeHudBannerError(
+    subtitle: String? = nil,
+    token: Int
+) {
+    LucidBanner.shared.update(
+        subtitle: subtitle,
+        stage: .error,
+        autoDismissAfter: NCGlobal.shared.dismissAfterSecond,
+        for: token
+    )
+}
+
 // MARK: - Preview
 
 #Preview("HudBannerView") {
@@ -129,6 +228,9 @@ private struct HudBannerPreviewWrapper: View {
                     try? await Task.sleep(nanoseconds: 45_000_000)
                     state.progress = Double(i) / 100
                 }
+
+                try? await Task.sleep(nanoseconds: 400_000_000)
+                state.stage = "error"
             }
     }
 }