refactor: 💡 SDWebImageSwiftUI Research

SAP · Aug 20, 2021 · 4bcc0c3 · 4bcc0c3
1 parent 1df3912
commit 4bcc0c3
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 69 deletions.
diff --git a/CAITestApp/CAITestApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/CAITestApp/CAITestApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -46,6 +46,24 @@
           "version": "1.2.0"
         }
       },
+      {
+        "package": "SDWebImage",
+        "repositoryURL": "https://github.com/SDWebImage/SDWebImage.git",
+        "state": {
+          "branch": null,
+          "revision": "76dd4b49110b8624317fc128e7fa0d8a252018bc",
+          "version": "5.11.1"
+        }
+      },
+      {
+        "package": "SDWebImageSwiftUI",
+        "repositoryURL": "https://github.com/SDWebImage/SDWebImageSwiftUI",
+        "state": {
+          "branch": null,
+          "revision": "cd8625b7cf11a97698e180d28bb7d5d357196678",
+          "version": "2.0.2"
+        }
+      },
       {
         "package": "SnapshotTesting",
         "repositoryURL": "https://github.com/pointfreeco/swift-snapshot-testing",
@@ -64,15 +82,6 @@
           "version": "0.4.1"
         }
       },
-      {
-        "package": "URLImage",
-        "repositoryURL": "https://github.com/dmytro-anokhin/url-image",
-        "state": {
-          "branch": null,
-          "revision": "ccab89ad1cedb04f25dd4df1776dd8c8583b914a",
-          "version": "2.2.5"
-        }
-      },
       {
         "package": "Zip",
         "repositoryURL": "https://github.com/marmelroy/Zip.git",

diff --git a/CAITestApp/CAITestApp/MockData.swift b/CAITestApp/CAITestApp/MockData.swift
@@ -32,6 +32,12 @@ struct MockData {
 
         // image (bot)
         arr.append(CAIResponseMessageData(imageName: "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2019-mustang-shelby-gt350-101-1528733363.jpg?crop=0.817xw:1.00xh;0.149xw,0&resize=640:*"))
+
+        // text message (user)
+        arr.append(CAIResponseMessageData(text: "Please show me a gif", false))
+
+        // image (bot)
+        arr.append(CAIResponseMessageData(imageName: "http://assets.sbnation.com/assets/2512203/dogflops.gif"))
 
         // text message (user)
         arr.append(CAIResponseMessageData(text: "I want to watch a video", false))

diff --git a/Package.swift b/Package.swift
@@ -18,7 +18,7 @@ let package = Package(
         )
     ],
     dependencies: [
-        .package(name: "URLImage", url: "https://github.com/dmytro-anokhin/url-image", .upToNextMajor(from: "2.0.0")),
+        .package(name: "SDWebImageSwiftUI", url: "https://github.com/SDWebImage/SDWebImageSwiftUI", .upToNextMinor(from: "2.0.0")),
         .package(name: "Down", url: "https://github.com/johnxnguyen/Down", .upToNextMinor(from: "0.11.0")),
         .package(name: "cloud-sdk-ios", url: "https://github.com/SAP/cloud-sdk-ios", .exact("5.1.3-xcfrwk"))
     ],
@@ -35,7 +35,7 @@ let package = Package(
         .target(
             name: "SAPCAI",
             dependencies: [
-                "URLImage",
+                "SDWebImageSwiftUI",
                 "Down"
             ],
             resources: [

diff --git a/Sources/SAPCAI/UI/Common/SwiftUI/AvatarView.swift b/Sources/SAPCAI/UI/Common/SwiftUI/AvatarView.swift
@@ -1,24 +1,22 @@
+import SDWebImageSwiftUI
 import SwiftUI
-import URLImage
 
 struct AvatarView: View {
     var imageUrl: String
 
     var body: some View {
-        URLImage(url: URL(string: imageUrl)!,
-                 inProgress: { _ -> Image in
-                     Image(systemName: "person.crop.circle")
-                 },
-                 failure: { error, _ in
-                     Text(error.localizedDescription)
-                 },
-                 content: { image in
-                     image
-                         .resizable() // Make image resizable
-                         .aspectRatio(contentMode: .fill) // Fill the frame
-                         .clipped() // Clip overlaping parts
-                 })
-            .frame(width: 32, height: 32, alignment: .center)
+        if let url = URL(string: imageUrl) {
+            WebImage(url: url)
+                .placeholder {
+                    Image(systemName: "person.crop.circle")
+                }
+                .resizable()
+                .aspectRatio(contentMode: .fill)
+                .clipped()
+                .frame(width: 32, height: 32, alignment: .center)
+        } else {
+            Image(systemName: "icloud.slash")
+        }
     }
 }
 

diff --git a/Sources/SAPCAI/UI/Common/SwiftUI/CarouselImageView.swift b/Sources/SAPCAI/UI/Common/SwiftUI/CarouselImageView.swift
@@ -1,5 +1,5 @@
+import SDWebImageSwiftUI
 import SwiftUI
-import URLImage
 
 struct CarouselImageView: View {
     var media: MediaItem?
@@ -13,18 +13,12 @@ struct CarouselImageView: View {
     var body: some View {
         Group {
             if let mediaItem = media, let sourceUrl = mediaItem.sourceUrl {
-                URLImage(url: sourceUrl,
-                         inProgress: { _ -> Image in
-                             mediaItem.placeholder
-                         },
-                         failure: { error, _ in
-                             Text(error.localizedDescription)
-                         },
-                         content: { image in
-                             image
-                                 .resizable()
-                                 .aspectRatio(contentMode: .fill)
-                         })
+                WebImage(url: sourceUrl)
+                    .placeholder {
+                        mediaItem.placeholder
+                    }
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
                     .frame(width: self.itemWidth, height: self.vSizeClass == .regular ? 180 : 80)
                     .clipped()
             } else {

diff --git a/Sources/SAPCAI/UI/Common/SwiftUI/ImageUIView.swift b/Sources/SAPCAI/UI/Common/SwiftUI/ImageUIView.swift
@@ -1,5 +1,5 @@
+import SDWebImageSwiftUI
 import SwiftUI
-import URLImage
 
 /// Renders an image from a MediaItem data model
 ///
@@ -38,24 +38,14 @@ struct ImageUIView: View {
     var body: some View {
         Group {
             if let sourceUrl = media?.sourceUrl {
-                URLImage(url: sourceUrl) { image, info in
-                    SizeConverter(
-                        CGSize(width: CGFloat(info.cgImage.width), height: CGFloat(info.cgImage.height)),
-                        BoundingBox(minWidth: 44,
-                                    minHeight: 44,
-                                    maxWidth: self.hSizeClass == .regular ? 480 : self.geometry.size.width * 0.75,
-                                    maxHeight: self.vSizeClass == .regular ? 400 : 240),
-                        content: { targetSize in
-                            image
-                                .resizable()
-                                .aspectRatio(contentMode: .fill)
-                                .frame(width: targetSize.width, height: targetSize.height)
-                        }
-                    )
-                    .preference(key: ImageSizeInfoPrefKey.self,
-                                value: CGSize(width: info.cgImage.width,
-                                              height: info.cgImage.height))
-                }
+                WebImage(url: sourceUrl)
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .clipped()
+                    .frame(minWidth: 44,
+                           maxWidth: self.hSizeClass == .regular ? 480 : self.geometry.size.width * 0.75,
+                           minHeight: 44,
+                           maxHeight: self.vSizeClass == .regular ? 400 : 240)
             } else {
                 fallback
             }

diff --git a/Sources/SAPCAI/UI/Common/SwiftUI/ImageView.swift b/Sources/SAPCAI/UI/Common/SwiftUI/ImageView.swift
@@ -1,5 +1,5 @@
+import SDWebImageSwiftUI
 import SwiftUI
-import URLImage
 
 /// Renders an image from a MediaItem data model
 struct ImageView: View {
@@ -10,16 +10,13 @@ struct ImageView: View {
             if imageUrl.absoluteString.range(of: "sap-icon") != nil {
                 IconImageView(iconUrl: imageUrl.absoluteString, iconSize: CGSize(width: 50, height: 50))
             } else {
-                URLImage(url: imageUrl,
-                         failure: { _, _ in
-                             Image(systemName: "photo")
-                         },
-                         content: { image in
-                             image
-                                 .resizable()
-                                 .aspectRatio(contentMode: .fit)
-                                 .cornerRadius(8)
-                         })
+                WebImage(url: imageUrl, options: .delayPlaceholder)
+                    .placeholder {
+                        Image(systemName: "photo")
+                    }
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .cornerRadius(8)
             }
         }
     }