From 823c2565dac3aa61988d0e18b4ebfb669766265e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=E2=80=99Aquino?= Date: Fri, 20 Sep 2024 13:10:54 -0700 Subject: [PATCH] Fix unclickable elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The introduction of iOS 18 brought a new bug that made `KFAnimatedImage` not recognize tap gestures and become unclickable. (https://github.com/onevcat/Kingfisher/issues/2295) This commit addresses the issue with a workaround found here: https://github.com/onevcat/Kingfisher/issues/2046#issuecomment-1554068070 The workaround was suggested by the author of the library to fix a slightly different issue, but that property seems to work for our purposes. The issue is addressed by adding a `contentShape` property to usages of `KFAnimatedImage`, in order to make them clickable. A custom modifier was created to make the solution less obscure and more obvious. Furthermore, one empty tap gesture handler was removed as it was preventing other tap gesture handlers on the image carousel from being triggered on iOS 18 Testing ------- PASS Configurations: - iPhone 13 mini on iOS 18.0 - iPhone SE simulator on iOS 17.5 Damus: This commit Coverage: - Check that the following views are clickable: - Images in the carousel - Profile picture on notes - Profile picture on thread comments - Profile picture on profile page Changelog-Fixed: Fix items that became unclickable on iOS 18 Closes: https://github.com/damus-io/damus/issues/2342 Closes: https://github.com/damus-io/damus/issues/2370 Signed-off-by: Daniel D’Aquino --- damus.xcodeproj/project.pbxproj | 14 +++++++++++ damus/Components/ImageCarousel.swift | 11 +++++++-- damus/Views/BannerImageView.swift | 2 ++ .../Events/Highlight/HighlightEventRef.swift | 1 + .../Events/Highlight/HighlightLink.swift | 1 + .../Events/Longform/LongformPreview.swift | 1 + damus/Views/Images/ImageContainerView.swift | 1 + damus/Views/Images/ProfilePicImageView.swift | 1 + damus/Views/Profile/EditPictureControl.swift | 1 + damus/Views/Profile/ProfilePicView.swift | 1 + .../Profile/ProfilePictureSelector.swift | 1 + damus/Views/Relays/RelayPicView.swift | 1 + damus/Views/Utils/KFClickable.swift | 23 +++++++++++++++++++ 13 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 damus/Views/Utils/KFClickable.swift diff --git a/damus.xcodeproj/project.pbxproj b/damus.xcodeproj/project.pbxproj index fcaef816c..747be1f85 100644 --- a/damus.xcodeproj/project.pbxproj +++ b/damus.xcodeproj/project.pbxproj @@ -1111,6 +1111,8 @@ D7CE1B482B0BE719002EDAD4 /* Message.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4C32B93D2A9AD44700DC3548 /* Message.swift */; }; D7CE1B492B0BE729002EDAD4 /* DisplayName.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4C9BB83029C0ED4F00FC4E37 /* DisplayName.swift */; }; D7D2A3812BF815D000E4B42B /* PushNotificationClient.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7D2A3802BF815D000E4B42B /* PushNotificationClient.swift */; }; + D7D68FF92C9E01BE0015A515 /* KFClickable.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7D68FF82C9E01B60015A515 /* KFClickable.swift */; }; + D7D68FFA2C9E01BE0015A515 /* KFClickable.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7D68FF82C9E01B60015A515 /* KFClickable.swift */; }; D7DBD41F2B02F15E002A6197 /* NostrKind.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4C3BEFD32819DE8F00B3DE84 /* NostrKind.swift */; }; D7DEEF2F2A8C021E00E0C99F /* NostrEventTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7DEEF2E2A8C021E00E0C99F /* NostrEventTests.swift */; }; D7EDED152B11776B0018B19C /* LibreTranslateServer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AE45AF5297BB2E700C1D842 /* LibreTranslateServer.swift */; }; @@ -1959,6 +1961,7 @@ D7CBD1D32B8D21DC00BFD889 /* DamusPurpleNotificationManagement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DamusPurpleNotificationManagement.swift; sourceTree = ""; }; D7CBD1D52B8D509800BFD889 /* DamusPurpleImpendingExpirationTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DamusPurpleImpendingExpirationTests.swift; sourceTree = ""; }; D7D2A3802BF815D000E4B42B /* PushNotificationClient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PushNotificationClient.swift; sourceTree = ""; }; + D7D68FF82C9E01B60015A515 /* KFClickable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KFClickable.swift; sourceTree = ""; }; D7DEEF2E2A8C021E00E0C99F /* NostrEventTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NostrEventTests.swift; sourceTree = ""; }; D7EDED1B2B1178FE0018B19C /* NoteContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NoteContent.swift; sourceTree = ""; }; D7EDED1D2B11797D0018B19C /* LongformEvent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LongformEvent.swift; sourceTree = ""; }; @@ -2540,6 +2543,7 @@ 4C75EFA227FA576C0006080F /* Views */ = { isa = PBXGroup; children = ( + D7D68FF72C9E01A80015A515 /* Utils */, D78DB85D2C20FE9E00F0AB12 /* Chat */, D71AC4CA2BA8E3320076268E /* Extensions */, BA3759952ABCCF360018D73B /* Camera */, @@ -3368,6 +3372,14 @@ path = Extensions; sourceTree = ""; }; + D7D68FF72C9E01A80015A515 /* Utils */ = { + isa = PBXGroup; + children = ( + D7D68FF82C9E01B60015A515 /* KFClickable.swift */, + ); + path = Utils; + sourceTree = ""; + }; E06336A72B7582D600A88E6B /* Assets */ = { isa = PBXGroup; children = ( @@ -3803,6 +3815,7 @@ B51C1CEA2B55A60A00E312A9 /* AddMuteItemView.swift in Sources */, 4C5D5C992A6AF8F80024563C /* NdbNote.swift in Sources */, 4CF0ABF029857E9200D66079 /* Bech32Object.swift in Sources */, + D7D68FFA2C9E01BE0015A515 /* KFClickable.swift in Sources */, 4C3D52B8298DB5C6001C5831 /* TextEvent.swift in Sources */, 4C216F362870A9A700040376 /* InputDismissKeyboard.swift in Sources */, D74AAFCF2B155D8C006CF0F4 /* ZapDataModel.swift in Sources */, @@ -4517,6 +4530,7 @@ D73E5F332C6A97F4007EB227 /* ZapEvent.swift in Sources */, D73E5F342C6A97F4007EB227 /* TextEvent.swift in Sources */, D73E5F352C6A97F4007EB227 /* WideEventView.swift in Sources */, + D7D68FF92C9E01BE0015A515 /* KFClickable.swift in Sources */, D73E5F8A2C6AA69C007EB227 /* SideMenuView.swift in Sources */, D73E5F362C6A97F4007EB227 /* LongformView.swift in Sources */, D73E5F372C6A97F4007EB227 /* LongformPreview.swift in Sources */, diff --git a/damus/Components/ImageCarousel.swift b/damus/Components/ImageCarousel.swift index 95480f501..4c1f9e662 100644 --- a/damus/Components/ImageCarousel.swift +++ b/damus/Components/ImageCarousel.swift @@ -236,6 +236,7 @@ struct ImageCarousel: View { Placeholder(url: url, geo_size: geo.size, num_urls: urls.count) } .aspectRatio(contentMode: filling ? .fill : .fit) + .kfClickable() .position(x: geo.size.width / 2, y: geo.size.height / 2) .tabItem { Text(url.absoluteString) @@ -274,8 +275,14 @@ struct ImageCarousel: View { var body: some View { VStack { - Medias - .onTapGesture { } + if #available(iOS 18.0, *) { + Medias + } else { + // An empty tap gesture recognizer is needed on iOS 17 and below to suppress other overlapping tap recognizers + // Otherwise it will both open the carousel and go to a note at the same time + Medias.onTapGesture { } + } + if urls.count > 1 { PageControlView(currentPage: $model.selectedIndex, numberOfPages: urls.count) diff --git a/damus/Views/BannerImageView.swift b/damus/Views/BannerImageView.swift index b1afd01a4..3bb4e8719 100644 --- a/damus/Views/BannerImageView.swift +++ b/damus/Views/BannerImageView.swift @@ -29,6 +29,7 @@ struct EditBannerImageView: View { Color(uiColor: .secondarySystemBackground) } .onFailureImage(defaultImage) + .kfClickable() EditPictureControl(uploader: damus_state.settings.default_media_uploader, pubkey: damus_state.pubkey, image_url: $banner_image, uploadObserver: viewModel, callback: callback) } @@ -54,6 +55,7 @@ struct InnerBannerImageView: View { Color(uiColor: .secondarySystemBackground) } .onFailureImage(defaultImage) + .kfClickable() } else { Image(uiImage: defaultImage).resizable() } diff --git a/damus/Views/Events/Highlight/HighlightEventRef.swift b/damus/Views/Events/Highlight/HighlightEventRef.swift index aa0c9203b..059232b52 100644 --- a/damus/Views/Events/Highlight/HighlightEventRef.swift +++ b/damus/Views/Events/Highlight/HighlightEventRef.swift @@ -50,6 +50,7 @@ struct HighlightEventRef: View { FailedImage() } .frame(width: 35, height: 35) + .kfClickable() .clipShape(RoundedRectangle(cornerRadius: 10)) .overlay(RoundedRectangle(cornerRadius: 10).stroke(.gray.opacity(0.5), lineWidth: 0.5)) .scaledToFit() diff --git a/damus/Views/Events/Highlight/HighlightLink.swift b/damus/Views/Events/Highlight/HighlightLink.swift index 3e75e2c4c..a3f689ba0 100644 --- a/damus/Views/Events/Highlight/HighlightLink.swift +++ b/damus/Views/Events/Highlight/HighlightLink.swift @@ -61,6 +61,7 @@ struct HighlightLink: View { .background(DamusColors.adaptableWhite) } .frame(width: 35, height: 35) + .kfClickable() .clipShape(RoundedRectangle(cornerRadius: 10)) .scaledToFit() } else { diff --git a/damus/Views/Events/Longform/LongformPreview.swift b/damus/Views/Events/Longform/LongformPreview.swift index 262358042..cff2f5327 100644 --- a/damus/Views/Events/Longform/LongformPreview.swift +++ b/damus/Views/Events/Longform/LongformPreview.swift @@ -98,6 +98,7 @@ struct LongformPreviewBody: View { } .aspectRatio(contentMode: .fill) .frame(maxWidth: .infinity, maxHeight: header ? .infinity : 150) + .kfClickable() .cornerRadius(1) } diff --git a/damus/Views/Images/ImageContainerView.swift b/damus/Views/Images/ImageContainerView.swift index 153a61a05..ac8c5b46b 100644 --- a/damus/Views/Images/ImageContainerView.swift +++ b/damus/Views/Images/ImageContainerView.swift @@ -33,6 +33,7 @@ struct ImageContainerView: View { view.framePreloadCount = 3 } .imageModifier(ImageHandler(handler: $image)) + .kfClickable() .clipped() .modifier(ImageContextMenuModifier(url: url, image: image, settings: settings, showShareSheet: $showShareSheet)) .sheet(isPresented: $showShareSheet) { diff --git a/damus/Views/Images/ProfilePicImageView.swift b/damus/Views/Images/ProfilePicImageView.swift index d7b3f56e9..987cc7c64 100644 --- a/damus/Views/Images/ProfilePicImageView.swift +++ b/damus/Views/Images/ProfilePicImageView.swift @@ -33,6 +33,7 @@ struct ProfileImageContainerView: View { .imageModifier(ImageHandler(handler: $image)) .clipShape(Circle()) .modifier(ImageContextMenuModifier(url: url, image: image, settings: settings, showShareSheet: $showShareSheet)) + .kfClickable() .sheet(isPresented: $showShareSheet) { ShareSheet(activityItems: [url]) } diff --git a/damus/Views/Profile/EditPictureControl.swift b/damus/Views/Profile/EditPictureControl.swift index 454ced3ba..85d482900 100644 --- a/damus/Views/Profile/EditPictureControl.swift +++ b/damus/Views/Profile/EditPictureControl.swift @@ -71,6 +71,7 @@ struct EditPictureControl: View { } .scaledToFill() .frame(width: (size ?? 25) + 10, height: (size ?? 25) + 10) + .kfClickable() .foregroundColor(DamusColors.white) .clipShape(Circle()) .overlay(Circle().stroke(.white, lineWidth: 4)) diff --git a/damus/Views/Profile/ProfilePicView.swift b/damus/Views/Profile/ProfilePicView.swift index 4681efedf..733d492ce 100644 --- a/damus/Views/Profile/ProfilePicView.swift +++ b/damus/Views/Profile/ProfilePicView.swift @@ -57,6 +57,7 @@ struct InnerProfilePicView: View { } .scaledToFill() .frame(width: size, height: size) + .kfClickable() .clipShape(Circle()) .overlay(Circle().stroke(highlight_color(highlight), lineWidth: pfp_line_width(highlight))) } diff --git a/damus/Views/Profile/ProfilePictureSelector.swift b/damus/Views/Profile/ProfilePictureSelector.swift index 5559746c9..5cae27b71 100644 --- a/damus/Views/Profile/ProfilePictureSelector.swift +++ b/damus/Views/Profile/ProfilePictureSelector.swift @@ -31,6 +31,7 @@ struct EditProfilePictureView: View { view.framePreloadCount = 3 } .scaledToFill() + .kfClickable() EditPictureControl(uploader: damus_state?.settings.default_media_uploader ?? .nostrBuild, pubkey: pubkey, image_url: $profile_url, uploadObserver: uploadObserver, callback: callback) } diff --git a/damus/Views/Relays/RelayPicView.swift b/damus/Views/Relays/RelayPicView.swift index 277f57402..bea5cc083 100644 --- a/damus/Views/Relays/RelayPicView.swift +++ b/damus/Views/Relays/RelayPicView.swift @@ -55,6 +55,7 @@ struct InnerRelayPicView: View { Placeholder(url: url) } .scaledToFit() + .kfClickable() } else { FailedRelayImage(url: nil) } diff --git a/damus/Views/Utils/KFClickable.swift b/damus/Views/Utils/KFClickable.swift new file mode 100644 index 000000000..6b5ac789d --- /dev/null +++ b/damus/Views/Utils/KFClickable.swift @@ -0,0 +1,23 @@ +// +// ClickableOverlay.swift +// damus +// +// Created by Daniel D’Aquino on 2024-09-20. +// + +import SwiftUI + +/// Applies a property that makes `KFAnimatedImage` clickable again on iOS 18+ +fileprivate struct KFClickable: ViewModifier { + func body(content: Content) -> some View { + content + .contentShape(Rectangle()) + } +} + +extension View { + /// Applies a property that makes `KFAnimatedImage` clickable again on iOS 18+ + func kfClickable() -> some View { + return self.modifier(KFClickable()) + } +}