implemented gallery grid view

Author: martinmitrevski

Sources/StreamChatSwiftUI/ChatChannel/Gallery/GalleryView.swift

@@ -83,7 +83,10 @@ struct GalleryView: View {
                 }
             }
             .sheet(isPresented: $gridShown) {
-                GridPhotosView(loadedImages: loadedImages)
+                GridPhotosView(
+                    imageURLs: sources,
+                    isShown: $gridShown
+                )
             }
         }
     }

Sources/StreamChatSwiftUI/ChatChannel/Gallery/GridPhotosView.swift

@@ -7,29 +7,45 @@ import SwiftUI
 
 struct GridPhotosView: View {
 
-    var loadedImages: [Int: UIImage]
+    var imageURLs: [URL]
+    @Binding var isShown: Bool
 
-    let columns = [GridItem(.adaptive(minimum: 120), spacing: 2)]
+    private static let spacing: CGFloat = 2
 
-    private var sorted: [UIImage] {
-        let keys = loadedImages.keys.sorted()
-        return keys.compactMap { index in
-            loadedImages[index]
+    private static var itemWidth: CGFloat {
+        if UIDevice.current.userInterfaceIdiom == .phone {
+            return (UIScreen.main.bounds.size.width / 3) - spacing * 3
+        } else {
+            return 120
         }
     }
 
+    private let columns = [GridItem(.adaptive(minimum: itemWidth), spacing: spacing)]
+    
     var body: some View {
-        ScrollView {
-            LazyVGrid(columns: columns, spacing: 2) {
-                ForEach(sorted, id: \.self) { image in
-                    Image(uiImage: image)
-                        .resizable()
-                        .aspectRatio(1, contentMode: .fill)
+        VStack {
+            TitleWithCloseButton(
+                title: L10n.Message.Gallery.photos,
+                isShown: $isShown
+            )
+            ScrollView {
+                LazyVGrid(columns: columns, spacing: 2) {
+                    ForEach(imageURLs, id: \.self) { url in
+                        LazyLoadingImage(
+                            source: url,
+                            width: Self.itemWidth
+                        )
+                        .frame(
+                            width: Self.itemWidth,
+                            height: Self.itemWidth
+                        )
                         .clipped()
+                    }
                 }
+                .padding(.horizontal, 2)
+                .animation(nil)
             }
-            .padding(.horizontal, 2)
-            .animation(nil)
+            Spacer()
         }
     }
 }

Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift

@@ -280,7 +280,6 @@ struct LazyLoadingImage: View {
 
     let source: URL
     let width: CGFloat
-    
     var resize: Bool = true
     var imageTapped: ((Int) -> Void)? = nil
     var index: Int?
@@ -290,13 +289,15 @@ struct LazyLoadingImage: View {
         ZStack {
             if let image = image {
                 if let imageTapped = imageTapped {
-                    Button {
-                        imageTapped(index ?? 0)
-                    } label: {
-                        imageView(for: image)
-                    }
+                    imageView(for: image, allowsHitTesting: true)
+                        .highPriorityGesture(
+                            TapGesture()
+                                .onEnded { _ in
+                                    imageTapped(index ?? 0)
+                                }
+                        )
                 } else {
-                    imageView(for: image)
+                    imageView(for: image, allowsHitTesting: false)
                 }
             } else if error != nil {
                 Color(.secondarySystemBackground)
@@ -331,13 +332,16 @@ struct LazyLoadingImage: View {
         .clipped()
     }
 
-    func imageView(for image: UIImage) -> some View {
+    func imageView(
+        for image: UIImage,
+        allowsHitTesting: Bool
+    ) -> some View {
         Image(uiImage: image)
             .resizable()
             .scaledToFill()
             .aspectRatio(contentMode: .fill)
             .clipped()
-            .allowsHitTesting(false)
+            .allowsHitTesting(allowsHitTesting)
     }
 }
 

Sources/StreamChatSwiftUI/CommonViews/TitleWithCloseButton.swift

@@ -25,5 +25,6 @@ struct TitleWithCloseButton: View {
             Text(title)
                 .font(fonts.bodyBold)
         }
+        .padding()
     }
 }

Sources/StreamChatSwiftUI/Generated/L10n.swift

@@ -225,6 +225,10 @@ internal enum L10n {
       /// Error occured while previewing the file.
       internal static var errorPreview: String { L10n.tr("Localizable", "message.file-attachment.error-preview") }
     }
+    internal enum Gallery {
+      /// Photos
+      internal static var photos: String { L10n.tr("Localizable", "message.gallery.photos") }
+    }
     internal enum GiphyAttachment {
       /// GIPHY
       internal static var title: String { L10n.tr("Localizable", "message.giphy-attachment.title") }

Sources/StreamChatSwiftUI/Resources/en.lproj/Localizable.strings

@@ -41,6 +41,8 @@
 "message.threads.replyWith" = "with %@";
 "message.threads.subtitle" = "with messages";
 
+"message.gallery.photos" = "Photos";
+
 "alert.actions.cancel" = "Cancel";
 "alert.actions.delete" = "Delete";
 "alert.actions.ok" = "Ok";