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