ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-04 19:11:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Automatically try reloading failed images on network changes (#3170)

Browse Source 
* Add the networkMonitor to the NSE and delete the old MockMediaLoader

* Generate a MediaLoaderMock through AutoMockable and use it in the MediaProviderTests

* Implement an ImageProvider mechanism that automatically tries reloading images when connectivity is established again and use it for LoadableImages

* Merge the ImageProvider protocol back into the MediaProvider

* Address PR review comments

* Provide a default sdk client request configuration

* Address tasks not automatically cancelling themselves when views get deallocated
This commit is contained in:
Stefan Ceriu
2024-08-15 18:20:19 +03:00
committed by GitHub
parent cf35056c78
commit f89c3e54b4
92 changed files with 618 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/SwiftUI/ViewModel/StateStoreViewModel.swift
+5 -5
View File
@@ -38,8 +38,8 @@ class StateStoreViewModel<State: BindableState, ViewAction> {
set { context.viewState = newValue }
}
init(initialViewState: State, imageProvider: ImageProviderProtocol? = nil) {
context = Context(initialViewState: initialViewState, imageProvider: imageProvider)
init(initialViewState: State, mediaProvider: MediaProviderProtocol? = nil) {
context = Context(initialViewState: initialViewState, mediaProvider: mediaProvider)
context.viewModel = self
}
@@ -73,7 +73,7 @@ class StateStoreViewModel<State: BindableState, ViewAction> {
/// An optional image loading service so that views can manage themselves
/// Intentionally non-generic so that it doesn't grow uncontrollably
let imageProvider: ImageProviderProtocol?
let mediaProvider: MediaProviderProtocol?
/// Set-able/Bindable access to the bindable state.
subscript<T>(dynamicMember keyPath: WritableKeyPath<State.BindStateType, T>) -> T {
@@ -87,9 +87,9 @@ class StateStoreViewModel<State: BindableState, ViewAction> {
viewModel?.process(viewAction: viewAction)
}
fileprivate init(initialViewState: State, imageProvider: ImageProviderProtocol?) {
fileprivate init(initialViewState: State, mediaProvider: MediaProviderProtocol?) {
self.viewState = initialViewState
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
}
}
}
ElementX/Sources/Other/SwiftUI/Views/AvatarHeaderView.swift
+15 -15
View File
@@ -33,13 +33,13 @@ struct AvatarHeaderView<Footer: View>: View {
private let badges: [Badge]
private let avatarSize: AvatarSize
private let imageProvider: ImageProviderProtocol?
private let mediaProvider: MediaProviderProtocol?
private var onAvatarTap: (() -> Void)?
@ViewBuilder private var footer: () -> Footer
init(room: RoomDetails,
avatarSize: AvatarSize,
imageProvider: ImageProviderProtocol? = nil,
mediaProvider: MediaProviderProtocol? = nil,
onAvatarTap: (() -> Void)? = nil,
@ViewBuilder footer: @escaping () -> Footer) {
avatarInfo = .room(room.avatar)
@@ -47,7 +47,7 @@ struct AvatarHeaderView<Footer: View>: View {
subtitle = room.canonicalAlias
self.avatarSize = avatarSize
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
self.onAvatarTap = onAvatarTap
self.footer = footer
@@ -61,7 +61,7 @@ struct AvatarHeaderView<Footer: View>: View {
init(accountOwner: RoomMemberDetails,
dmRecipient: RoomMemberDetails,
imageProvider: ImageProviderProtocol? = nil,
mediaProvider: MediaProviderProtocol? = nil,
onAvatarTap: (() -> Void)? = nil,
@ViewBuilder footer: @escaping () -> Footer) {
let dmRecipientProfile = UserProfileProxy(member: dmRecipient)
@@ -70,7 +70,7 @@ struct AvatarHeaderView<Footer: View>: View {
subtitle = dmRecipientProfile.displayName == nil ? nil : dmRecipientProfile.userID
avatarSize = .user(on: .dmDetails)
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
self.onAvatarTap = onAvatarTap
self.footer = footer
// In EL-X a DM is by definition always encrypted
@@ -79,21 +79,21 @@ struct AvatarHeaderView<Footer: View>: View {
init(member: RoomMemberDetails,
avatarSize: AvatarSize,
imageProvider: ImageProviderProtocol? = nil,
mediaProvider: MediaProviderProtocol? = nil,
onAvatarTap: (() -> Void)? = nil,
@ViewBuilder footer: @escaping () -> Footer) {
let profile = UserProfileProxy(member: member)
self.init(user: profile,
avatarSize: avatarSize,
imageProvider: imageProvider,
mediaProvider: mediaProvider,
onAvatarTap: onAvatarTap,
footer: footer)
}
init(user: UserProfileProxy,
avatarSize: AvatarSize,
imageProvider: ImageProviderProtocol? = nil,
mediaProvider: MediaProviderProtocol? = nil,
onAvatarTap: (() -> Void)? = nil,
@ViewBuilder footer: @escaping () -> Footer) {
avatarInfo = .user(user)
@@ -101,7 +101,7 @@ struct AvatarHeaderView<Footer: View>: View {
subtitle = user.displayName == nil ? nil : user.userID
self.avatarSize = avatarSize
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
self.onAvatarTap = onAvatarTap
self.footer = footer
badges = []
@@ -136,13 +136,13 @@ struct AvatarHeaderView<Footer: View>: View {
case .room(let roomAvatar):
RoomAvatarImage(avatar: roomAvatar,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
case .user(let userProfile):
LoadableAvatarImage(url: userProfile.avatarURL,
name: userProfile.displayName,
contentID: userProfile.userID,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
}
}
@@ -199,7 +199,7 @@ struct AvatarHeaderView_Previews: PreviewProvider, TestablePreview {
isEncrypted: true,
isPublic: true),
avatarSize: .room(on: .details),
imageProvider: MockMediaProvider()) {
mediaProvider: MockMediaProvider()) {
HStack(spacing: 32) {
ShareLink(item: "test") {
Image(systemName: "square.and.arrow.up")
@@ -213,7 +213,7 @@ struct AvatarHeaderView_Previews: PreviewProvider, TestablePreview {
Form {
AvatarHeaderView(accountOwner: RoomMemberDetails(withProxy: RoomMemberProxyMock.mockMe), dmRecipient: RoomMemberDetails(withProxy: RoomMemberProxyMock.mockAlice),
imageProvider: MockMediaProvider()) {
mediaProvider: MockMediaProvider()) {
HStack(spacing: 32) {
ShareLink(item: "test") {
Image(systemName: "square.and.arrow.up")
@@ -228,11 +228,11 @@ struct AvatarHeaderView_Previews: PreviewProvider, TestablePreview {
VStack(spacing: 16) {
AvatarHeaderView(member: RoomMemberDetails(withProxy: RoomMemberProxyMock.mockAlice),
avatarSize: .room(on: .details),
imageProvider: MockMediaProvider()) { Text("") }
mediaProvider: MockMediaProvider()) { Text("") }
AvatarHeaderView(member: RoomMemberDetails(withProxy: RoomMemberProxyMock.mockBanned[3]),
avatarSize: .room(on: .details),
imageProvider: MockMediaProvider()) { Text("") }
mediaProvider: MockMediaProvider()) { Text("") }
}
.padding()
.background(Color.compound.bgSubtleSecondaryLevel0)
ElementX/Sources/Other/SwiftUI/Views/LoadableAvatarImage.swift
+4 -4
View File
@@ -21,16 +21,16 @@ struct LoadableAvatarImage: View {
private let name: String?
private let contentID: String?
private let avatarSize: AvatarSize
private let imageProvider: ImageProviderProtocol?
private let mediaProvider: MediaProviderProtocol?
@ScaledMetric private var frameSize: CGFloat
init(url: URL?, name: String?, contentID: String?, avatarSize: AvatarSize, imageProvider: ImageProviderProtocol?) {
init(url: URL?, name: String?, contentID: String?, avatarSize: AvatarSize, mediaProvider: MediaProviderProtocol?) {
self.url = url
self.name = name
self.contentID = contentID
self.avatarSize = avatarSize
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
_frameSize = ScaledMetric(wrappedValue: avatarSize.value)
}
@@ -48,7 +48,7 @@ struct LoadableAvatarImage: View {
LoadableImage(url: url,
mediaType: .avatar,
size: avatarSize.scaledSize,
imageProvider: imageProvider) { image in
mediaProvider: mediaProvider) { image in
image
.scaledToFill()
} placeholder: {
ElementX/Sources/Other/SwiftUI/Views/LoadableImage.swift
+43 -24
View File
@@ -14,6 +14,7 @@
// limitations under the License.
//
import Combine
import Kingfisher
import SwiftUI
@@ -28,7 +29,7 @@ struct LoadableImage<TransformerView: View, PlaceholderView: View>: View {
private let mediaType: LoadableImageMediaType
private let blurhash: String?
private let size: CGSize?
private let imageProvider: ImageProviderProtocol?
private let mediaProvider: MediaProviderProtocol?
private let transformer: (AnyView) -> TransformerView
private let placeholder: () -> PlaceholderView
@@ -44,14 +45,14 @@ struct LoadableImage<TransformerView: View, PlaceholderView: View>: View {
mediaType: LoadableImageMediaType = .generic,
blurhash: String? = nil,
size: CGSize? = nil,
imageProvider: ImageProviderProtocol?,
mediaProvider: MediaProviderProtocol?,
transformer: @escaping (AnyView) -> TransformerView = { $0 },
placeholder: @escaping () -> PlaceholderView) {
self.mediaSource = mediaSource
self.mediaType = mediaType
self.blurhash = blurhash
self.size = size
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
self.transformer = transformer
self.placeholder = placeholder
}
@@ -60,14 +61,14 @@ struct LoadableImage<TransformerView: View, PlaceholderView: View>: View {
mediaType: LoadableImageMediaType = .generic,
blurhash: String? = nil,
size: CGSize? = nil,
imageProvider: ImageProviderProtocol?,
mediaProvider: MediaProviderProtocol?,
transformer: @escaping (AnyView) -> TransformerView = { $0 },
placeholder: @escaping () -> PlaceholderView) {
self.init(mediaSource: MediaSourceProxy(url: url, mimeType: nil),
mediaType: mediaType,
blurhash: blurhash,
size: size,
imageProvider: imageProvider,
mediaProvider: mediaProvider,
transformer: transformer,
placeholder: placeholder)
}
@@ -77,7 +78,7 @@ struct LoadableImage<TransformerView: View, PlaceholderView: View>: View {
mediaType: mediaType,
blurhash: blurhash,
size: size,
imageProvider: imageProvider,
mediaProvider: mediaProvider,
transformer: transformer,
placeholder: placeholder)
// Binds the lifecycle of the LoadableImage to the associated URL.
@@ -99,28 +100,20 @@ private struct LoadableImageContent<TransformerView: View, PlaceholderView: View
mediaType: LoadableImageMediaType,
blurhash: String? = nil,
size: CGSize? = nil,
imageProvider: ImageProviderProtocol?,
mediaProvider: MediaProviderProtocol?,
transformer: @escaping (AnyView) -> TransformerView,
placeholder: @escaping () -> PlaceholderView) {
assert(imageProvider != nil, "Missing image provider, make sure one has been supplied to the view model.")
assert(mediaProvider != nil, "Missing image provider, make sure one has been supplied to the view model.")
self.mediaSource = mediaSource
self.mediaType = mediaType
self.blurhash = blurhash
self.transformer = transformer
self.placeholder = placeholder
_contentLoader = StateObject(wrappedValue: ContentLoader(mediaSource: mediaSource, size: size, imageProvider: imageProvider))
_contentLoader = StateObject(wrappedValue: ContentLoader(mediaSource: mediaSource, size: size, mediaProvider: mediaProvider))
}
var body: some View {
let _ = Task {
guard contentLoader.content == nil else {
return
}
await contentLoader.load()
}
ZStack {
switch contentLoader.content {
case .image(let image):
@@ -140,6 +133,20 @@ private struct LoadableImageContent<TransformerView: View, PlaceholderView: View
}
}
.animation(mediaType == .avatar ? .noAnimation : .elementDefault, value: contentLoader.content)
.task(id: mediaSource) {
guard contentLoader.content == nil else {
return
}
await contentLoader.load()
}
.onDisappear {
guard contentLoader.content == nil else {
return
}
contentLoader.cancel()
}
}
// MARK: - ImageDataProvider
@@ -163,9 +170,10 @@ private class ContentLoader: ObservableObject {
case gifData(Data)
}
private let imageProvider: ImageProviderProtocol?
private let mediaProvider: MediaProviderProtocol?
private let mediaSource: MediaSourceProxy
private let size: CGSize?
private var imageLoadingCancellable: AnyCancellable?
@Published private var cachedContent: Content?
@@ -175,36 +183,47 @@ private class ContentLoader: ObservableObject {
}
if isGIF {
if let image = imageProvider?.imageFromSource(mediaSource),
if let image = mediaProvider?.imageFromSource(mediaSource),
let data = image.kf.data(format: .GIF) {
return .gifData(data)
}
} else if let image = imageProvider?.imageFromSource(mediaSource, size: size) {
} else if let image = mediaProvider?.imageFromSource(mediaSource, size: size) {
return .image(image)
}
return cachedContent
}
init(mediaSource: MediaSourceProxy, size: CGSize?, imageProvider: ImageProviderProtocol?) {
init(mediaSource: MediaSourceProxy, size: CGSize?, mediaProvider: MediaProviderProtocol?) {
self.mediaSource = mediaSource
self.size = size
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
}
@MainActor
func load() async {
if isGIF {
if case let .success(data) = await imageProvider?.loadImageDataFromSource(mediaSource) {
if case let .success(data) = await mediaProvider?.loadImageDataFromSource(mediaSource) {
cachedContent = .gifData(data)
}
} else {
if case let .success(image) = await imageProvider?.loadImageFromSource(mediaSource, size: size) {
guard let task = mediaProvider?.loadImageRetryingOnReconnection(mediaSource, size: size) else {
MXLog.error("Failed loading image, invalid reconnection retry task.")
return
}
imageLoadingCancellable = task.asCancellable()
if let image = try? await task.value {
cachedContent = .image(image)
}
}
}
func cancel() {
imageLoadingCancellable?.cancel()
}
private var isGIF: Bool {
mediaSource.mimeType == "image/gif"
}
ElementX/Sources/Other/SwiftUI/Views/OverridableAvatarImage.swift
+4 -4
View File
@@ -22,17 +22,17 @@ struct OverridableAvatarImage: View {
private let name: String?
private let contentID: String?
private let avatarSize: AvatarSize
private let imageProvider: ImageProviderProtocol?
private let mediaProvider: MediaProviderProtocol?
@ScaledMetric private var frameSize: CGFloat
init(overrideURL: URL?, url: URL?, name: String?, contentID: String?, avatarSize: AvatarSize, imageProvider: ImageProviderProtocol?) {
init(overrideURL: URL?, url: URL?, name: String?, contentID: String?, avatarSize: AvatarSize, mediaProvider: MediaProviderProtocol?) {
self.overrideURL = overrideURL
self.url = url
self.name = name
self.contentID = contentID
self.avatarSize = avatarSize
self.imageProvider = imageProvider
self.mediaProvider = mediaProvider
_frameSize = ScaledMetric(wrappedValue: avatarSize.value)
}
@@ -53,7 +53,7 @@ struct OverridableAvatarImage: View {
name: name,
contentID: contentID,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
}
}
}
ElementX/Sources/Other/SwiftUI/Views/RoomAvatarImage.swift
+10 -10
View File
@@ -32,7 +32,7 @@ struct RoomAvatarImage: View {
let avatar: RoomAvatar
let avatarSize: AvatarSize
let imageProvider: ImageProviderProtocol?
let mediaProvider: MediaProviderProtocol?
var body: some View {
switch avatar {
@@ -41,7 +41,7 @@ struct RoomAvatarImage: View {
name: name,
contentID: id,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
case .heroes(let users):
// We will expand upon this with more stack sizes in the future.
if users.count == 0 {
@@ -54,14 +54,14 @@ struct RoomAvatarImage: View {
name: users[0].displayName,
contentID: users[0].userID,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
.scaledFrame(size: clusterSize, alignment: .topTrailing)
LoadableAvatarImage(url: users[1].avatarURL,
name: users[1].displayName,
contentID: users[1].userID,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
.mask {
Rectangle()
.fill(Color.white)
@@ -83,7 +83,7 @@ struct RoomAvatarImage: View {
name: users[0].displayName,
contentID: users[0].userID,
avatarSize: avatarSize,
imageProvider: imageProvider)
mediaProvider: mediaProvider)
}
}
}
@@ -96,30 +96,30 @@ struct RoomAvatarImage_Previews: PreviewProvider, TestablePreview {
name: "Room",
avatarURL: nil),
avatarSize: .room(on: .home),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomAvatarImage(avatar: .room(id: "!2:server.com",
name: "Room",
avatarURL: .picturesDirectory),
avatarSize: .room(on: .home),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomAvatarImage(avatar: .heroes([.init(userID: "@user:server.com",
displayName: "User",
avatarURL: nil)]),
avatarSize: .room(on: .home),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomAvatarImage(avatar: .heroes([.init(userID: "@user:server.com",
displayName: "User",
avatarURL: .picturesDirectory)]),
avatarSize: .room(on: .home),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomAvatarImage(avatar: .heroes([.init(userID: "@alice:server.com", displayName: "Alice", avatarURL: nil),
.init(userID: "@bob:server.net", displayName: "Bob", avatarURL: nil)]),
avatarSize: .room(on: .home),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
}
}
}
ElementX/Sources/Other/SwiftUI/Views/RoomInviterLabel.swift
+6 -6
View File
@@ -48,7 +48,7 @@ struct RoomInviterDetails: Equatable {
struct RoomInviterLabel: View {
let inviter: RoomInviterDetails
let imageProvider: ImageProviderProtocol?
let mediaProvider: MediaProviderProtocol?
var body: some View {
HStack(alignment: .firstTextBaseline, spacing: 8) {
@@ -56,7 +56,7 @@ struct RoomInviterLabel: View {
name: inviter.displayName,
contentID: inviter.id,
avatarSize: .custom(16),
imageProvider: imageProvider)
mediaProvider: mediaProvider)
.alignmentGuide(.firstTextBaseline) { $0[.bottom] * 0.8 }
.accessibilityHidden(true)
@@ -71,13 +71,13 @@ struct RoomInviterLabel_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
VStack(spacing: 10) {
RoomInviterLabel(inviter: .init(member: RoomMemberProxyMock.mockAlice),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomInviterLabel(inviter: .init(member: RoomMemberProxyMock.mockDan),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomInviterLabel(inviter: .init(member: RoomMemberProxyMock.mockNoName),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
RoomInviterLabel(inviter: .init(member: RoomMemberProxyMock.mockCharlie),
imageProvider: MockMediaProvider())
mediaProvider: MockMediaProvider())
.foregroundStyle(.compound.textPrimary)
}
.font(.compound.bodyMD)
ElementX/Sources/Other/SwiftUI/Views/UserProfileListRow.swift
+7 -7
View File
@@ -21,7 +21,7 @@ import SwiftUI
struct UserProfileListRow: View {
let user: UserProfileProxy
let membership: MembershipState?
let imageProvider: ImageProviderProtocol?
let mediaProvider: MediaProviderProtocol?
let kind: ListRow<LoadableAvatarImage, EmptyView, EmptyView, Bool>.Kind<EmptyView, Bool>
@@ -52,7 +52,7 @@ struct UserProfileListRow: View {
name: user.displayName,
contentID: user.userID,
avatarSize: .user(on: .startChat),
imageProvider: imageProvider)
mediaProvider: mediaProvider)
}
}
@@ -74,21 +74,21 @@ struct UserProfileCell_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
Form {
UserProfileListRow(user: .mockAlice, membership: nil, imageProvider: MockMediaProvider(),
UserProfileListRow(user: .mockAlice, membership: nil, mediaProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: true, action: action))
UserProfileListRow(user: .mockBob, membership: nil, imageProvider: MockMediaProvider(),
UserProfileListRow(user: .mockBob, membership: nil, mediaProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: false, action: action))
UserProfileListRow(user: .mockCharlie, membership: .join, imageProvider: MockMediaProvider(),
UserProfileListRow(user: .mockCharlie, membership: .join, mediaProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: true, action: action))
.disabled(true)
UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: .join, imageProvider: MockMediaProvider(),
UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: .join, mediaProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: false, action: action))
.disabled(true)
UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: nil, imageProvider: MockMediaProvider(),
UserProfileListRow(user: .init(userID: "@someone:matrix.org"), membership: nil, mediaProvider: MockMediaProvider(),
kind: .multiSelection(isSelected: false, action: action))
}
.compoundList()