Skip to content

Commit

Permalink
Fix image animations / remove fading when switching between local and…
Browse files Browse the repository at this point in the history
… remote echoes.
  • Loading branch information
stefanceriu committed Nov 18, 2024
1 parent bef1eda commit e4d5584
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 15 deletions.
32 changes: 21 additions & 11 deletions ElementX/Sources/Other/SwiftUI/Views/LoadableImage.swift
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ import Kingfisher
import SwiftUI

/// Used to configure animations
enum LoadableImageMediaType {
enum LoadableImageMediaType: Equatable {
/// An avatar (can be displayed anywhere within the app).
case avatar
/// An image displayed in the timeline.
case timelineItem
case timelineItem(uniqueID: String)
/// Any other media (can be displayed anywhere within the app).
case generic
}
Expand Down Expand Up @@ -77,9 +77,19 @@ struct LoadableImage<TransformerView: View, PlaceholderView: View>: View {
mediaProvider: mediaProvider,
transformer: transformer,
placeholder: placeholder)
.id(stableMediaIdentifier)
}

private var stableMediaIdentifier: String {
switch mediaType {
case .timelineItem(let uniqueID):
// Consider media for the same item to be the same view
uniqueID
default:
// Binds the lifecycle of the LoadableImage to the associated URL.
// This fixes the problem of the cache returning old values after a change in the URL.
.id(mediaSource.url)
mediaSource.url.absoluteString
}
}
}

Expand Down Expand Up @@ -309,33 +319,33 @@ struct LoadableImage_Previews: PreviewProvider, TestablePreview {
static var previews: some View {
LazyVGrid(columns: [.init(.adaptive(minimum: 110, maximum: 110))], spacing: 24) {
LoadableImage(url: "mxc://wherever/1234",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
mediaProvider: mediaProvider,
placeholder: placeholder)
.layout(title: "Loaded")

LoadableImage(url: "mxc://wherever/2345",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
blurhash: "KpE4oyayR5|GbHb];3j@of",
mediaProvider: mediaProvider,
placeholder: placeholder)
.layout(title: "Hidden (blurhash)", hideTimelineMedia: true)

LoadableImage(url: "mxc://wherever/3456",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
mediaProvider: mediaProvider,
placeholder: placeholder)
.layout(title: "Hidden (placeholder)", hideTimelineMedia: true)

LoadableImage(url: "mxc://wherever/4567",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
mediaProvider: loadingMediaProvider,
placeholder: placeholder)
.layout(title: "Loading (blurhash)")

LoadableImage(url: "mxc://wherever/5678",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
mediaProvider: loadingMediaProvider,
placeholder: placeholder)
.layout(title: "Loading (placeholder)")
Expand All @@ -347,23 +357,23 @@ struct LoadableImage_Previews: PreviewProvider, TestablePreview {
.layout(title: "Loading (avatar)")

LoadableImage(url: "mxc://wherever/345",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
mediaProvider: mediaProvider,
transformer: transformer,
placeholder: placeholder)
.layout(title: "Loaded (transformer)")

LoadableImage(url: "mxc://wherever/345",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
mediaProvider: loadingMediaProvider,
transformer: transformer,
placeholder: placeholder)
.layout(title: "Loading (transformer)")

LoadableImage(url: "mxc://wherever/234",
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: "id"),
blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
mediaProvider: mediaProvider,
transformer: transformer,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ struct ImageRoomTimelineView: View {
private var loadableImage: some View {
if timelineItem.content.contentType == .gif {
LoadableImage(mediaSource: timelineItem.content.imageInfo.source,
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
blurhash: timelineItem.content.blurhash,
size: timelineItem.content.imageInfo.size,
mediaProvider: context.mediaProvider) {
Expand All @@ -50,7 +50,7 @@ struct ImageRoomTimelineView: View {
.timelineMediaFrame(imageInfo: timelineItem.content.imageInfo)
} else {
LoadableImage(mediaSource: timelineItem.content.thumbnailInfo?.source ?? timelineItem.content.imageInfo.source,
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
blurhash: timelineItem.content.blurhash,
size: timelineItem.content.thumbnailInfo?.size ?? timelineItem.content.imageInfo.size,
mediaProvider: context.mediaProvider) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ struct StickerRoomTimelineView: View {
var body: some View {
TimelineStyler(timelineItem: timelineItem) {
LoadableImage(mediaSource: timelineItem.imageInfo.source,
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
blurhash: timelineItem.blurhash,
size: timelineItem.imageInfo.size,
mediaProvider: context.mediaProvider) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ struct VideoRoomTimelineView: View {
var thumbnail: some View {
if let thumbnailSource = timelineItem.content.thumbnailInfo?.source {
LoadableImage(mediaSource: thumbnailSource,
mediaType: .timelineItem,
mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
blurhash: timelineItem.content.blurhash,
size: timelineItem.content.thumbnailInfo?.size,
mediaProvider: context.mediaProvider) { imageView in
Expand Down

0 comments on commit e4d5584

Please sign in to comment.