Skip to content

Commit da6a584

Browse files
martinmitrevskimartinmitrevski
committed
implemented opening correct image in gallery
1 parent 5460f51 commit da6a584

File tree

2 files changed

+114
-39
lines changed

2 files changed

+114
-39
lines changed

‎Sources/StreamChatSwiftUI/ChatChannel/Gallery/GalleryView.swift

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,22 @@ import StreamChat
66
import SwiftUI
77

88
struct GalleryView: View {
9+
10+
@Injected(\.colors) private var colors
911

1012
var message: ChatMessage
1113
@Binding var isShown: Bool
14+
@State private var selected: Int
15+
16+
init(
17+
message: ChatMessage,
18+
isShown: Binding<Bool>,
19+
selected: Int
20+
) {
21+
self.message = message
22+
_isShown = isShown
23+
_selected = State(initialValue: selected)
24+
}
1225

1326
var body: some View {
1427
GeometryReader { reader in
@@ -19,15 +32,24 @@ struct GalleryView: View {
1932
isShown: $isShown
2033
)
2134

22-
TabView {
23-
ForEach(sources, id: \.self) { url in
24-
LazyLoadingImage(
25-
source: url,
26-
width: reader.size.width,
27-
resize: true
28-
)
29-
.frame(width: reader.size.width)
30-
.aspectRatio(contentMode: .fit)
35+
TabView(selection: $selected) {
36+
ForEach(0..<sources.count) { index in
37+
let url = sources[index]
38+
ZoomableScrollView {
39+
VStack {
40+
Spacer()
41+
LazyLoadingImage(
42+
source: url,
43+
width: reader.size.width,
44+
resize: true
45+
)
46+
.frame(width: reader.size.width)
47+
.aspectRatio(contentMode: .fit)
48+
Spacer()
49+
}
50+
}
51+
.background(Color(colors.background1))
52+
.tag(index)
3153
}
3254
}
3355
.tabViewStyle(.page)

‎Sources/StreamChatSwiftUI/ChatChannel/MessageList/ImageAttachmentView.swift

Lines changed: 83 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ public struct ImageAttachmentContainer: View {
1616
@Binding var scrolledId: String?
1717

1818
@State private var galleryShown = false
19+
@State private var selectedIndex = 0
1920

2021
public var body: some View {
2122
VStack(
@@ -34,13 +35,12 @@ public struct ImageAttachmentContainer: View {
3435
alignment: message.alignmentInBubble,
3536
spacing: 0
3637
) {
37-
Button {
38-
self.galleryShown = true
39-
} label: {
40-
ImageAttachmentView(
41-
message: message,
42-
width: width
43-
)
38+
ImageAttachmentView(
39+
message: message,
40+
width: width
41+
) { index in
42+
selectedIndex = index
43+
galleryShown = true
4444
}
4545

4646
if !message.text.isEmpty {
@@ -55,10 +55,13 @@ public struct ImageAttachmentContainer: View {
5555
.clipped()
5656
}
5757
.messageBubble(for: message, isFirst: isFirst)
58-
.fullScreenCover(isPresented: $galleryShown) {
58+
.fullScreenCover(isPresented: $galleryShown, onDismiss: {
59+
self.selectedIndex = 0
60+
}) {
5961
GalleryView(
6062
message: message,
61-
isShown: $galleryShown
63+
isShown: $galleryShown,
64+
selected: selectedIndex
6265
)
6366
}
6467
}
@@ -83,6 +86,7 @@ struct ImageAttachmentView: View {
8386

8487
let message: ChatMessage
8588
let width: CGFloat
89+
var imageTapped: ((Int) -> Void)? = nil
8690

8791
private let spacing: CGFloat = 2
8892
private let maxDisplayedImages = 4
@@ -106,22 +110,28 @@ struct ImageAttachmentView: View {
106110
if sources.count == 1 {
107111
SingleImageView(
108112
source: sources[0],
109-
width: width
113+
width: width,
114+
imageTapped: imageTapped,
115+
index: 0
110116
)
111117
.withUploadingStateIndicator(for: uploadState(for: 0), url: sources[0])
112118
} else if sources.count == 2 {
113119
HStack(spacing: spacing) {
114120
MultiImageView(
115121
source: sources[0],
116122
width: width / 2,
117-
height: width
123+
height: width,
124+
imageTapped: imageTapped,
125+
index: 0
118126
)
119127
.withUploadingStateIndicator(for: uploadState(for: 0), url: sources[0])
120128

121129
MultiImageView(
122130
source: sources[1],
123131
width: width / 2,
124-
height: width
132+
height: width,
133+
imageTapped: imageTapped,
134+
index: 1
125135
)
126136
.withUploadingStateIndicator(for: uploadState(for: 1), url: sources[1])
127137
}
@@ -131,22 +141,28 @@ struct ImageAttachmentView: View {
131141
MultiImageView(
132142
source: sources[0],
133143
width: width / 2,
134-
height: width
144+
height: width,
145+
imageTapped: imageTapped,
146+
index: 0
135147
)
136148
.withUploadingStateIndicator(for: uploadState(for: 0), url: sources[0])
137149

138150
VStack(spacing: spacing) {
139151
MultiImageView(
140152
source: sources[1],
141153
width: width / 2,
142-
height: width / 2
154+
height: width / 2,
155+
imageTapped: imageTapped,
156+
index: 1
143157
)
144158
.withUploadingStateIndicator(for: uploadState(for: 1), url: sources[1])
145159

146160
MultiImageView(
147161
source: sources[2],
148162
width: width / 2,
149-
height: width / 2
163+
height: width / 2,
164+
imageTapped: imageTapped,
165+
index: 2
150166
)
151167
.withUploadingStateIndicator(for: uploadState(for: 2), url: sources[2])
152168
}
@@ -158,14 +174,18 @@ struct ImageAttachmentView: View {
158174
MultiImageView(
159175
source: sources[0],
160176
width: width / 2,
161-
height: width / 2
177+
height: width / 2,
178+
imageTapped: imageTapped,
179+
index: 0
162180
)
163181
.withUploadingStateIndicator(for: uploadState(for: 0), url: sources[0])
164182

165183
MultiImageView(
166184
source: sources[1],
167185
width: width / 2,
168-
height: width / 2
186+
height: width / 2,
187+
imageTapped: imageTapped,
188+
index: 2
169189
)
170190
.withUploadingStateIndicator(for: uploadState(for: 1), url: sources[1])
171191
}
@@ -174,15 +194,19 @@ struct ImageAttachmentView: View {
174194
MultiImageView(
175195
source: sources[2],
176196
width: width / 2,
177-
height: width / 2
197+
height: width / 2,
198+
imageTapped: imageTapped,
199+
index: 1
178200
)
179201
.withUploadingStateIndicator(for: uploadState(for: 2), url: sources[2])
180202

181203
ZStack {
182204
MultiImageView(
183205
source: sources[3],
184206
width: width / 2,
185-
height: width / 2
207+
height: width / 2,
208+
imageTapped: imageTapped,
209+
index: 3
186210
)
187211
.withUploadingStateIndicator(for: uploadState(for: 3), url: sources[3])
188212

@@ -215,22 +239,36 @@ struct ImageAttachmentView: View {
215239
struct SingleImageView: View {
216240
let source: URL
217241
let width: CGFloat
242+
var imageTapped: ((Int) -> Void)? = nil
243+
var index: Int?
218244

219245
var body: some View {
220-
LazyLoadingImage(source: source, width: width)
221-
.frame(width: width, height: 3 * width / 4)
246+
LazyLoadingImage(
247+
source: source,
248+
width: width,
249+
imageTapped: imageTapped,
250+
index: index
251+
)
252+
.frame(width: width, height: 3 * width / 4)
222253
}
223254
}
224255

225256
struct MultiImageView: View {
226257
let source: URL
227258
let width: CGFloat
228259
let height: CGFloat
260+
var imageTapped: ((Int) -> Void)? = nil
261+
var index: Int?
229262

230263
var body: some View {
231-
LazyLoadingImage(source: source, width: width)
232-
.frame(width: width, height: height)
233-
.clipped()
264+
LazyLoadingImage(
265+
source: source,
266+
width: width,
267+
imageTapped: imageTapped,
268+
index: index
269+
)
270+
.frame(width: width, height: height)
271+
.clipped()
234272
}
235273
}
236274

@@ -244,16 +282,31 @@ struct LazyLoadingImage: View {
244282
let width: CGFloat
245283

246284
var resize: Bool = true
285+
var imageTapped: ((Int) -> Void)? = nil
286+
var index: Int?
247287

248288
var body: some View {
249289
ZStack {
250290
if let image = image {
251-
Image(uiImage: image)
252-
.resizable()
253-
.scaledToFill()
254-
.aspectRatio(contentMode: .fill)
255-
.clipped()
256-
.allowsHitTesting(false)
291+
if let imageTapped = imageTapped {
292+
Button {
293+
imageTapped(index ?? 0)
294+
} label: {
295+
Image(uiImage: image)
296+
.resizable()
297+
.scaledToFill()
298+
.aspectRatio(contentMode: .fill)
299+
.clipped()
300+
.allowsHitTesting(false)
301+
}
302+
} else {
303+
Image(uiImage: image)
304+
.resizable()
305+
.scaledToFill()
306+
.aspectRatio(contentMode: .fill)
307+
.clipped()
308+
.allowsHitTesting(false)
309+
}
257310
} else if error != nil {
258311
Color(.secondarySystemBackground)
259312
} else {

0 commit comments

Comments
 (0)