Added blurhash and correct sizes to timeline images and animations throughout the app.

This commit is contained in:
Stefan Ceriu
2022-04-05 15:09:04 +03:00
parent 88a0654d23
commit 8d50d4fd25
9 changed files with 233 additions and 11 deletions
@@ -52,7 +52,7 @@ struct HomeScreenViewState: BindableState {
}
}
struct HomeScreenRoom: Identifiable {
struct HomeScreenRoom: Identifiable, Equatable {
let id: String
var displayName: String?
@@ -84,6 +84,7 @@ struct HomeScreen: View {
.font(.subheadline)
.fontWeight(.bold)
}
.animation(.easeInOut, value: context.viewState.userAvatar)
}
ToolbarItem(placement: .navigationBarTrailing) {
Button("Logout") {
@@ -135,6 +136,7 @@ struct RoomCell: View {
}
}
}
.animation(.easeInOut, value: room)
.frame(minHeight: 60.0)
.onAppear {
context.send(viewAction: .loadRoomData(roomIdentifier: room.id))
@@ -38,6 +38,7 @@ struct EventBasedTimelineView: View {
}
.clipShape(Circle())
.frame(width: 24.0, height: 24.0)
.animation(.easeInOut, value: timelineItem.senderAvatar)
}
private var firstLetter: String {
@@ -13,21 +13,39 @@ struct ImageRoomTimelineView: View {
let timelineItem: ImageRoomTimelineItem
var body: some View {
if let image = timelineItem.image {
if timelineItem.image != nil || timelineItem.blurhash != nil { // Fixes view heights after loading finishes
VStack(alignment: .leading) {
EventBasedTimelineView(timelineItem: timelineItem)
Text(timelineItem.text)
Image(uiImage: image)
.resizable()
.scaledToFit()
if let image = timelineItem.image {
if let aspectRatio = timelineItem.aspectRatio {
Image(uiImage: image)
.resizable()
.aspectRatio(aspectRatio, contentMode: .fit)
} else {
Image(uiImage: image)
.resizable()
.scaledToFit()
}
} else if let blurhash = timelineItem.blurhash,
// Build a small blurhash image so that it's fast
let image = UIImage(blurHash: blurhash, size: .init(width: 10.0, height: 10.0)) {
Image(uiImage: image)
.resizable()
.aspectRatio(timelineItem.aspectRatio, contentMode: .fit)
}
}
.animation(.easeInOut, value: timelineItem.image)
.frame(maxHeight: 1000.0)
} else {
VStack(alignment: .center) {
VStack(alignment: .leading) {
EventBasedTimelineView(timelineItem: timelineItem)
Text(timelineItem.text)
HStack {
Text(timelineItem.text)
Spacer()
ProgressView("Loading")
Spacer()
}
ProgressView("Loading")
}
}
}
@@ -50,7 +68,7 @@ struct ImageRoomTimelineView_Previews: PreviewProvider {
url: nil,
image: UIImage(systemName: "photo"))
ImageRoomTimelineView(timelineItem: timelineItem)
let timelineItem = ImageRoomTimelineItem(id: UUID().uuidString,
text: "Some other image",
timestamp: "Now",
@@ -59,6 +77,17 @@ struct ImageRoomTimelineView_Previews: PreviewProvider {
url: nil,
image: nil)
ImageRoomTimelineView(timelineItem: timelineItem)
let timelineItem = ImageRoomTimelineItem(id: UUID().uuidString,
text: "Blurhashed image",
timestamp: "Now",
shouldShowSenderDetails: false,
senderId: "Bob",
url: nil,
image: nil,
aspectRatio: 0.7,
blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW")
ImageRoomTimelineView(timelineItem: timelineItem)
}
}
}