Support sending gallery messages behind a feature flag

Adds the ability to send a gallery message (multiple attachments in one message)
via the media upload preview, wired through the timeline controller/proxy to the
SDK's sendGallery. Gated by a `galleryEnabled` developer flag (default off),
matching Element X Android — with the flag off, attachments are sent as
individual messages as before.

Extends the community PR #5601, rebased onto develop. Tracking:
element-hq/element-meta#3201

Co-authored-by: svetoslav.mitov <svetoslav.mitov@sportinno.com>
This commit is contained in:
Mauro Romito
2026-07-21 11:34:44 +02:00
parent 9354d9d0c2
commit 9a61d870d6
14 changed files with 376 additions and 41 deletions
@@ -18,6 +18,9 @@ struct MediaUploadPreviewScreenCoordinatorParameters {
let timelineController: TimelineControllerProtocol
let clientProxy: ClientProxyProtocol
let userIndicatorController: UserIndicatorControllerProtocol
/// Whether sending as a gallery is enabled. When `false`, multiple attachments are sent as
/// individual messages (the previous behaviour).
let galleryEnabled: Bool
}
enum MediaUploadPreviewScreenCoordinatorAction {
@@ -41,7 +44,8 @@ final class MediaUploadPreviewScreenCoordinator: CoordinatorProtocol {
mediaUploadingPreprocessor: parameters.mediaUploadingPreprocessor,
timelineController: parameters.timelineController,
clientProxy: parameters.clientProxy,
userIndicatorController: parameters.userIndicatorController)
userIndicatorController: parameters.userIndicatorController,
galleryEnabled: parameters.galleryEnabled)
}
func start() {
@@ -22,6 +22,7 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
private var processingTask: Task<Result<[MediaInfo], MediaUploadingPreprocessorError>, Never>
private var requestHandle: SendAttachmentJoinHandleProtocol?
private let clientProxy: ClientProxyProtocol
private let galleryEnabled: Bool
private var actionsSubject: PassthroughSubject<MediaUploadPreviewScreenViewModelAction, Never> = .init()
@@ -36,12 +37,14 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
mediaUploadingPreprocessor: MediaUploadingPreprocessor,
timelineController: TimelineControllerProtocol,
clientProxy: ClientProxyProtocol,
userIndicatorController: UserIndicatorControllerProtocol) {
userIndicatorController: UserIndicatorControllerProtocol,
galleryEnabled: Bool) {
self.mediaURLs = mediaURLs
self.mediaUploadingPreprocessor = mediaUploadingPreprocessor
self.timelineController = timelineController
self.clientProxy = clientProxy
self.userIndicatorController = userIndicatorController
self.galleryEnabled = galleryEnabled
// Start processing the media whilst the user is reviewing it/adding a caption.
processingTask = Self.processMedia(at: mediaURLs, preprocessor: mediaUploadingPreprocessor, clientProxy: clientProxy)
@@ -54,7 +57,7 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
override func process(viewAction: MediaUploadPreviewScreenViewAction) {
// Get the current caption before all the processing starts.
var caption = state.bindings.caption.nonBlankString
let caption = state.bindings.caption.nonBlankString
switch viewAction {
case .send:
@@ -65,14 +68,25 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
switch await processingTask.value {
case .success(let mediaInfos):
for mediaInfo in mediaInfos {
switch await sendAttachment(mediaInfo: mediaInfo, caption: caption) {
if galleryEnabled, mediaInfos.count > 1 {
switch await sendGallery(mediaInfos: mediaInfos, caption: caption) {
case .success:
caption = nil // Set the caption only on the first uploaded file.
break
case .failure(let error):
MXLog.error("Failed sending media with error: \(error)")
MXLog.error("Failed sending gallery with error: \(error)")
showError(label: L10n.screenMediaUploadPreviewErrorFailedSending)
}
} else {
var perItemCaption = caption
for mediaInfo in mediaInfos {
switch await sendAttachment(mediaInfo: mediaInfo, caption: perItemCaption) {
case .success:
perItemCaption = nil // Set the caption only on the first uploaded file.
case .failure(let error):
MXLog.error("Failed sending media with error: \(error)")
showError(label: L10n.screenMediaUploadPreviewErrorFailedSending)
}
}
}
actionsSubject.send(.dismiss)
@@ -107,6 +121,40 @@ class MediaUploadPreviewScreenViewModel: MediaUploadPreviewScreenViewModelType,
}
}
private func sendGallery(mediaInfos: [MediaInfo], caption: String?) async -> Result<Void, TimelineControllerError> {
let itemInfos: [GalleryItemInfo] = mediaInfos.map { mediaInfo in
switch mediaInfo {
case let .image(imageURL, thumbnailURL, imageInfo):
return .image(imageInfo: imageInfo,
source: .file(filename: imageURL.path(percentEncoded: false)),
caption: nil,
formattedCaption: nil,
thumbnailSource: .file(filename: thumbnailURL.path(percentEncoded: false)))
case let .video(videoURL, thumbnailURL, videoInfo):
return .video(videoInfo: videoInfo,
source: .file(filename: videoURL.path(percentEncoded: false)),
caption: nil,
formattedCaption: nil,
thumbnailSource: .file(filename: thumbnailURL.path(percentEncoded: false)))
case let .audio(audioURL, audioInfo):
return .audio(audioInfo: audioInfo,
source: .file(filename: audioURL.path(percentEncoded: false)),
caption: nil,
formattedCaption: nil)
case let .file(fileURL, fileInfo):
return .file(fileInfo: fileInfo,
source: .file(filename: fileURL.path(percentEncoded: false)),
caption: nil,
formattedCaption: nil)
}
}
return await timelineController.sendGallery(itemInfos: itemInfos,
caption: caption,
formattedCaption: nil,
inReplyToEventID: nil)
}
func stopProcessing() {
processingTask.cancel()
}
@@ -6,6 +6,7 @@
// Please see LICENSE files in the repository root for full details.
//
import AVFoundation
import Combine
import Compound
import GameController
@@ -35,17 +36,7 @@ struct MediaUploadPreviewScreen: View {
mainContent
.id(context.viewState.mediaURLs)
.ignoresSafeArea(edges: [.horizontal])
.safeAreaInset(edge: .top) {
if context.viewState.mediaURLs.count > 1 {
Text(L10n.screenMediaUploadPreviewItemCount(currentIndex + 1, context.viewState.mediaURLs.count))
.font(.compound.bodyMD)
.foregroundColor(.compound.textPrimary)
.padding(.vertical, 4)
.padding(.horizontal, 8)
.background(.compound.bgBadgeDefault)
.clipShape(.capsule)
}
}
.overlay(alignment: .top) { galleryBadge }
.safeAreaInset(edge: .bottom, spacing: 0) {
composer
.padding(.horizontal, 12)
@@ -74,6 +65,20 @@ struct MediaUploadPreviewScreen: View {
}
}
@ViewBuilder
private var galleryBadge: some View {
if context.viewState.mediaURLs.count > 1 {
Text(L10n.screenMediaUploadPreviewItemCount(currentIndex + 1, context.viewState.mediaURLs.count))
.font(.compound.bodySMSemibold)
.foregroundStyle(.compound.textPrimary)
.padding(.horizontal, 12)
.padding(.vertical, 6)
.background(Color.compound.bgCanvasDefault.opacity(0.85),
in: Capsule())
.padding(.top, 12)
}
}
@ViewBuilder
private var mainContent: some View {
if ProcessInfo.processInfo.isiOSAppOnMac {
@@ -81,6 +86,9 @@ struct MediaUploadPreviewScreen: View {
.font(.compound.headingMD)
.foregroundColor(.compound.textSecondary)
.frame(maxWidth: .infinity, maxHeight: .infinity)
} else if context.viewState.mediaURLs.count > 1 {
UploadMediaPeekCarousel(mediaURLs: context.viewState.mediaURLs,
currentIndex: $currentIndex)
} else {
PreviewView(mediaURLs: context.viewState.mediaURLs,
title: context.viewState.title,
@@ -214,6 +222,133 @@ struct MediaUploadPreviewScreen: View {
}
}
private struct UploadMediaPeekCarousel: View {
let mediaURLs: [URL]
@Binding var currentIndex: Int
@State private var scrolledID: Int?
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack(spacing: 8) {
ForEach(Array(mediaURLs.enumerated()), id: \.offset) { index, url in
UploadMediaThumbnail(url: url)
.containerRelativeFrame(.horizontal)
.id(index)
}
}
.scrollTargetLayout()
}
.contentMargins(.horizontal, 24, for: .scrollContent)
.scrollTargetBehavior(.viewAligned)
.scrollPosition(id: $scrolledID)
.onAppear {
if scrolledID == nil {
scrolledID = currentIndex
}
}
.onChange(of: scrolledID) { _, newValue in
if let newValue, newValue != currentIndex {
currentIndex = newValue
}
}
}
}
private struct UploadMediaThumbnail: View {
let url: URL
private var contentType: UTType? {
UTType(filenameExtension: url.pathExtension)
}
private var isImageOrVideo: Bool {
guard let contentType else { return false }
return contentType.conforms(to: .image) || contentType.conforms(to: .movie) || contentType.conforms(to: .audiovisualContent)
}
var body: some View {
Group {
if isImageOrVideo {
UploadMediaImageThumbnail(url: url)
} else {
UploadMediaFilePreview(url: url, title: url.lastPathComponent)
}
}
.clipShape(RoundedRectangle(cornerRadius: 8))
}
}
private struct UploadMediaImageThumbnail: View {
let url: URL
@State private var image: UIImage?
var body: some View {
ZStack {
Color.black
if let image {
Image(uiImage: image)
.resizable()
.scaledToFit()
} else {
ProgressView().tint(.white)
}
}
.task(id: url) { await load() }
}
private func load() async {
if let image = UIImage(contentsOfFile: url.path(percentEncoded: false)) {
self.image = image
return
}
// Fall back to a video frame thumbnail.
let asset = AVURLAsset(url: url)
let generator = AVAssetImageGenerator(asset: asset)
generator.appliesPreferredTrackTransform = true
do {
let cgImage = try await generator.image(at: .zero).image
image = UIImage(cgImage: cgImage)
} catch {
image = nil
}
}
}
private struct UploadMediaFilePreview: UIViewControllerRepresentable {
let url: URL
let title: String
func makeUIViewController(context: Context) -> QLPreviewController {
let controller = QLPreviewController()
controller.dataSource = context.coordinator
return controller
}
func updateUIViewController(_ uiViewController: QLPreviewController, context: Context) { }
func makeCoordinator() -> Coordinator {
Coordinator(url: url, title: title)
}
final class Coordinator: NSObject, QLPreviewControllerDataSource {
private let item: PreviewItem
init(url: URL, title: String) {
item = PreviewItem(previewItemURL: url, previewItemTitle: title)
}
func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
1
}
func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
item
}
}
}
private struct PreviewView: UIViewControllerRepresentable {
let mediaURLs: [URL]
let title: String?
@@ -396,7 +531,8 @@ struct MediaUploadPreviewScreen_Previews: PreviewProvider, TestablePreview {
mediaUploadingPreprocessor: MediaUploadingPreprocessor(appSettings: .volatile()),
timelineController: TimelineControllerMock(.init()),
clientProxy: ClientProxyMock(.init()),
userIndicatorController: UserIndicatorControllerMock())
userIndicatorController: UserIndicatorControllerMock(),
galleryEnabled: true)
static var previews: some View {
ElementNavigationStack {
MediaUploadPreviewScreen(context: viewModel.context)