tyiu/damus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix display issues with pasted or uploaded images

Browse Source 
- Fix aspect ratio, use fit
- Remove fixed height on image frame to align close button on image
- Use overlay instead of ZStack to reduce complexity
- Add background to close button to get better contrast in light mode
- Change close-image to be a button for better accessibility

Changelog-Fixed: Fix aspect ratio on pasted or uploaded images
Signed-off-by: Askeew <askeew@hotmail.com>
Closes: https://github.com/damus-io/damus/issues/2913
This commit is contained in:
askeew
2025-08-09 01:31:30 +02:00
committed by GitHub
parent 65a22813a3
commit 9f6da8eb79
1 changed files with 52 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
damus/Features/Posting/Views/PostView.swift
View File

@@ -630,44 +630,50 @@ struct PVImageCarouselView: View {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(media.indices, id: \.self) { index in
ZStack(alignment: .topLeading) {
if isSupportedVideo(url: media[index].uploadedURL) {
VideoPlayer(player: configurePlayer(with: media[index].localURL))
.frame(width: media.count == 1 ? deviceWidth * 0.8 : 250, height: media.count == 1 ? 400 : 250)
.cornerRadius(10)
.padding()
.contextMenu { contextMenuContent(for: media[index]) }
} else {
KFAnimatedImage(media[index].uploadedURL)
.imageContext(.note, disable_animation: false)
.configure { view in
view.framePreloadCount = 3
if isSupportedVideo(url: media[index].uploadedURL) {
VideoPlayer(player: configurePlayer(with: media[index].localURL))
.aspectRatio(contentMode: .fit)
.frame(width: media.count == 1 ? deviceWidth * 0.8 : 250, alignment: .topLeading)
.cornerRadius(10)
.contextMenu { contextMenuContent(for: media[index]) }
.overlay(
Button(action: {
media.remove(at: index)
}) {
closeImageView
}
.frame(width: media.count == 1 ? deviceWidth * 0.8 : 250, height: media.count == 1 ? 400 : 250)
.cornerRadius(10)
.padding()
.contextMenu { contextMenuContent(for: media[index]) }
}
VStack { // Set spacing to 0 to remove the gap between items
Image("close-circle")
.foregroundColor(.white)
.padding(20)
.shadow(radius: 5)
.onTapGesture {
media.remove(at: index) // Direct removal using index
.padding([.top, .leading], 8),
alignment: .topLeading
)
.overlay(
Image(systemName: "video")
.foregroundColor(.white)
.padding(10)
.background(Color.black.opacity(0.5))
.clipShape(Circle())
.shadow(radius: 5)
.opacity(0.6),
alignment: .bottomLeading
)
} else {
KFAnimatedImage(media[index].uploadedURL)
.imageContext(.note, disable_animation: false)
.configure { view in
view.framePreloadCount = 3
}
.aspectRatio(contentMode: .fit)
.frame(width: media.count == 1 ? deviceWidth * 0.8 : 250, alignment: .topLeading)
.cornerRadius(10)
.contextMenu { contextMenuContent(for: media[index]) }
.overlay(
Button(action: {
media.remove(at: index)
}) {
closeImageView
}
if isSupportedVideo(url: media[index].uploadedURL) {
Spacer()
Image(systemName: "video")
.foregroundColor(.white)
.padding(10)
.shadow(radius: 5)
.opacity(0.6)
}
}
.padding(.bottom, 35)
.padding([.top, .leading], 8),
alignment: .topLeading
)
}
}
if let mediaUP = mediaUnderProgress, let progress = imageUploadModel.progress {
@@ -675,8 +681,8 @@ struct PVImageCarouselView: View {
// Media under upload-progress
Image(uiImage: getImage(media: mediaUP))
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: media.count == 0 ? deviceWidth * 0.8 : 250, height: media.count == 0 ? 400 : 250)
.aspectRatio(contentMode: .fit)
.frame(width: media.count == 1 ? deviceWidth * 0.8 : 250, alignment: .topLeading)
.cornerRadius(10)
.opacity(0.3)
.padding()
@@ -713,6 +719,14 @@ struct PVImageCarouselView: View {
player.usesExternalPlaybackWhileExternalScreenIsActive = false
return player
}
private var closeImageView: some View {
Image("close-circle")
.foregroundColor(.white)
.background(Color.black.opacity(0.5))
.clipShape(Circle())
.shadow(radius: 5)
}
}
fileprivate func getImage(media: MediaUpload) -> UIImage {