Fix inconsistencies in gallery view displaying images and videos

CHANGELOG.md

@@ -3,7 +3,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 # Upcoming
 
-### 🔄 Changed
+### 🐞 Fixed
+- Fix inconsistencies in gallery view displaying images and videos [927](https://github.com/GetStream/stream-chat-swiftui/pull/927)
 
 # [4.85.0](https://github.com/GetStream/stream-chat-swiftui/releases/tag/4.85.0)
 _August 13, 2025_

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/MediaAttachmentsView.swift

@@ -54,25 +54,17 @@ public struct MediaAttachmentsView<Factory: ViewFactory>: View {
                         ForEach(0..<viewModel.mediaItems.count, id: \.self) { mediaItemIndex in
                             let mediaItem = viewModel.mediaItems[mediaItemIndex]
                             ZStack {
-                                if !mediaItem.isVideo, let imageAttachment = mediaItem.imageAttachment {
-                                    let index = viewModel.allImageAttachments.firstIndex { $0.id == imageAttachment.id } ?? 0
-                                    ImageAttachmentContentView(
+                                if let mediaAttachment = mediaItem.mediaAttachment {
+                                    let index = viewModel.allMediaAttachments.firstIndex { $0.id == mediaAttachment.id
+                                    } ?? 0
+                                    MediaAttachmentContentView(
                                         factory: factory,
                                         mediaItem: mediaItem,
-                                        imageAttachment: imageAttachment,
-                                        allImageAttachments: viewModel.allImageAttachments,
+                                        mediaAttachment: mediaAttachment,
+                                        allMediaAttachments: viewModel.allMediaAttachments,
                                         itemWidth: Self.itemWidth,
                                         index: index
                                     )
-                                } else if let videoAttachment = mediaItem.videoAttachment {
-                                    VideoAttachmentContentView(
-                                        factory: factory,
-                                        attachment: videoAttachment,
-                                        message: mediaItem.message,
-                                        width: Self.itemWidth,
-                                        ratio: 1,
-                                        cornerRadius: 0
-                                    )
                                 }
                             }
                             .overlay(
@@ -110,13 +102,13 @@ public struct MediaAttachmentsView<Factory: ViewFactory>: View {
     }
 }
 
-struct ImageAttachmentContentView<Factory: ViewFactory>: View {
+struct MediaAttachmentContentView<Factory: ViewFactory>: View {
     @State private var galleryShown = false
 
     let factory: Factory
     let mediaItem: MediaItem
-    let imageAttachment: ChatMessageImageAttachment
-    let allImageAttachments: [ChatMessageImageAttachment]
+    let mediaAttachment: MediaAttachment
+    let allMediaAttachments: [MediaAttachment]
     let itemWidth: CGFloat
     let index: Int
 
@@ -125,7 +117,7 @@ struct ImageAttachmentContentView<Factory: ViewFactory>: View {
             galleryShown = true
         } label: {
             LazyLoadingImage(
-                source: MediaAttachment(url: imageAttachment.imageURL, type: .image),
+                source: mediaAttachment,
                 width: itemWidth,
                 height: itemWidth
             )
@@ -137,7 +129,7 @@ struct ImageAttachmentContentView<Factory: ViewFactory>: View {
         }
         .fullScreenCover(isPresented: $galleryShown) {
             factory.makeGalleryView(
-                mediaAttachments: allImageAttachments.map { MediaAttachment(from: $0) },
+                mediaAttachments: allMediaAttachments,
                 message: mediaItem.message,
                 isShown: $galleryShown,
                 options: .init(selectedIndex: index)

Sources/StreamChatSwiftUI/ChatChannel/ChannelInfo/MediaAttachmentsViewModel.swift

@@ -19,8 +19,8 @@ class MediaAttachmentsViewModel: ObservableObject, ChatMessageSearchControllerDe
 
     private var loadingNextMessages = false
 
-    var allImageAttachments: [ChatMessageImageAttachment] {
-        mediaItems.compactMap(\.imageAttachment)
+    var allMediaAttachments: [MediaAttachment] {
+        mediaItems.compactMap(\.mediaAttachment)
     }
 
     init(channel: ChatChannel) {
@@ -113,4 +113,13 @@ struct MediaItem: Identifiable {
 
     var videoAttachment: ChatMessageVideoAttachment?
     var imageAttachment: ChatMessageImageAttachment?
+
+    var mediaAttachment: MediaAttachment? {
+        if let videoAttachment {
+            return MediaAttachment(url: videoAttachment.videoURL, type: .video)
+        } else if let imageAttachment {
+            return MediaAttachment(url: imageAttachment.imageURL, type: .image)
+        }
+        return nil
+    }
 }

Sources/StreamChatSwiftUI/ChatChannel/Gallery/GalleryView.swift

@@ -127,8 +127,8 @@ public struct GalleryView<Factory: ViewFactory>: View {
                 .foregroundColor(Color(colors.text))
             }
             .sheet(isPresented: $gridShown) {
-                GridPhotosView(
-                    imageURLs: mediaAttachments.filter { $0.type == .image }.map(\.url),
+                GridMediaView(
+                    attachments: mediaAttachments,
                     isShown: $gridShown
                 )
             }

Sources/StreamChatSwiftUI/ChatChannel/Gallery/GridPhotosView.swift → Sources/StreamChatSwiftUI/ChatChannel/Gallery/GridMediaView.swift

@@ -5,9 +5,9 @@
 import StreamChat
 import SwiftUI
 
-/// View used for displaying photos in a grid.
-struct GridPhotosView: View {
-    var imageURLs: [URL]
+/// View used for displaying media in a grid.
+struct GridMediaView: View {
+    var attachments: [MediaAttachment]
     @Binding var isShown: Bool
 
     private static let spacing: CGFloat = 2
@@ -30,9 +30,9 @@ struct GridPhotosView: View {
             )
             ScrollView {
                 LazyVGrid(columns: columns, spacing: 2) {
-                    ForEach(imageURLs, id: \.self) { url in
+                    ForEach(attachments) { attachment in
                         LazyLoadingImage(
-                            source: MediaAttachment(url: url, type: .image),
+                            source: attachment,
                             width: Self.itemWidth,
                             height: Self.itemWidth
                         )

Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift

@@ -430,13 +430,17 @@ extension ChatMessage {
     }
 }
 
-public struct MediaAttachment {
+public struct MediaAttachment: Identifiable {
     @Injected(\.utils) var utils
 
     let url: URL
     let type: MediaAttachmentType
     var uploadingState: AttachmentUploadingState?
 
+    public var id: String {
+        url.absoluteString
+    }
+
     func generateThumbnail(
         resize: Bool,
         preferredSize: CGSize,

StreamChatSwiftUI.xcodeproj/project.pbxproj

@@ -193,7 +193,7 @@
 		84335014274BAB15007A1B81 /* ViewFactoryExamples.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84335013274BAB15007A1B81 /* ViewFactoryExamples.swift */; };
 		84335016274BABF3007A1B81 /* NewChatView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84335015274BABF3007A1B81 /* NewChatView.swift */; };
 		84335018274BAD4B007A1B81 /* NewChatViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84335017274BAD4B007A1B81 /* NewChatViewModel.swift */; };
-		8434E58127707F19001E1B83 /* GridPhotosView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8434E58027707F19001E1B83 /* GridPhotosView.swift */; };
+		8434E58127707F19001E1B83 /* GridMediaView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8434E58027707F19001E1B83 /* GridMediaView.swift */; };
 		8434E583277088D9001E1B83 /* TitleWithCloseButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8434E582277088D9001E1B83 /* TitleWithCloseButton.swift */; };
 		84471C182BE98BC400D6721E /* PollAllOptionsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84471C172BE98BC400D6721E /* PollAllOptionsView.swift */; };
 		844CC60E2811378D0006548D /* ComposerConfig.swift in Sources */ = {isa = PBXBuildFile; fileRef = 844CC60D2811378D0006548D /* ComposerConfig.swift */; };
@@ -797,7 +797,7 @@
 		84335013274BAB15007A1B81 /* ViewFactoryExamples.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewFactoryExamples.swift; sourceTree = "<group>"; };
 		84335015274BABF3007A1B81 /* NewChatView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewChatView.swift; sourceTree = "<group>"; };
 		84335017274BAD4B007A1B81 /* NewChatViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewChatViewModel.swift; sourceTree = "<group>"; };
-		8434E58027707F19001E1B83 /* GridPhotosView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GridPhotosView.swift; sourceTree = "<group>"; };
+		8434E58027707F19001E1B83 /* GridMediaView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GridMediaView.swift; sourceTree = "<group>"; };
 		8434E582277088D9001E1B83 /* TitleWithCloseButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TitleWithCloseButton.swift; sourceTree = "<group>"; };
 		84471C172BE98BC400D6721E /* PollAllOptionsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PollAllOptionsView.swift; sourceTree = "<group>"; };
 		844CC60D2811378D0006548D /* ComposerConfig.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ComposerConfig.swift; sourceTree = "<group>"; };
@@ -2261,7 +2261,7 @@
 			isa = PBXGroup;
 			children = (
 				84F29089276B90610045472D /* GalleryView.swift */,
-				8434E58027707F19001E1B83 /* GridPhotosView.swift */,
+				8434E58027707F19001E1B83 /* GridMediaView.swift */,
 				8465FD032746A95600AF091E /* VideoPlayerView.swift */,
 				C52A0B5E2E1557F300176379 /* VideoPlayerFooterView.swift */,
 				84F2908B276B91700045472D /* ZoomableScrollView.swift */,
@@ -2717,7 +2717,7 @@
 				842FA0E72C05DCDB00AD1F3C /* PollsConfig.swift in Sources */,
 				841B64D42775F5540016FF3B /* GiphyCommandHandler.swift in Sources */,
 				82D64BDD2AD7E5B700C5C79E /* AnimatedImageView.swift in Sources */,
-				8434E58127707F19001E1B83 /* GridPhotosView.swift in Sources */,
+				8434E58127707F19001E1B83 /* GridMediaView.swift in Sources */,
 				ADE0F5662CB962470053B8B9 /* ActionBannerView.swift in Sources */,
 				84BB4C4C2841104700CBE004 /* MessageListDateUtils.swift in Sources */,
 				82D64BE72AD7E5B700C5C79E /* ImageTask.swift in Sources */,

StreamChatSwiftUITests/Tests/ChatChannel/ChannelInfo/MediaAttachmentsViewModel_Tests.swift

@@ -27,7 +27,7 @@ class MediaAttachmentsViewModel_Tests: StreamChatTestCase {
 
         // When
         let mediaItems = viewModel.mediaItems
-        let imageAttachments = viewModel.allImageAttachments
+        let imageAttachments = viewModel.allMediaAttachments.filter { $0.type == .image }
 
         // Then
         XCTAssert(mediaItems.count == 8)

StreamChatSwiftUITests/Tests/ChatChannel/GalleryView_Tests.swift

@@ -48,8 +48,23 @@ class GalleryView_Tests: StreamChatTestCase {
 
     func test_gridView_snapshotLoading() {
         // Given
-        let view = GridPhotosView(
-            imageURLs: [ChatChannelTestHelpers.testURL],
+        let view = GridMediaView(
+            attachments: [MediaAttachment(url: ChatChannelTestHelpers.testURL, type: .image)],
+            isShown: .constant(true)
+        )
+        .applyDefaultSize()
+
+        // Then
+        assertSnapshot(matching: view, as: .image(perceptualPrecision: precision))
+    }
+
+    func test_gridViewVideoAndImage_snapshotLoading() {
+        // Given
+        let view = GridMediaView(
+            attachments: [
+                MediaAttachment(url: ChatChannelTestHelpers.testURL, type: .image),
+                MediaAttachment(url: ChatChannelTestHelpers.testURL.appendingPathComponent("test"), type: .video)
+            ],
             isShown: .constant(true)
         )
         .applyDefaultSize()