feat(DIA-1143): prevent users from swiping artwork cards up or down (#…

…11547) * decrease minimum opacity of second card * prevent users from swiping more than 60 degrees from horizontal axis * send undiscovered artwork IDs to be excluded
artsy · Feb 12, 2025 · ffec087 · ffec087
1 parent e1db5b2
commit ffec087
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/src/app/Components/FancySwiper/FancySwiper.tsx b/src/app/Components/FancySwiper/FancySwiper.tsx
@@ -37,11 +37,16 @@ export const FancySwiper = ({
       swiper.setValue({ x: dx, y: dy })
     },
     onPanResponderRelease: (_, { dx, dy }) => {
+      // the hypoteneuse of the swipe is at least 100
       const isFullSwipe = Math.hypot(dx, dy) >= SWIPE_MAGNITUDE
+
+      // the angle of the swipe is below 60 degrees from the horizontal axis
+      const isUnder60DegreeSwipe = Math.abs(Math.atan(dy / dx)) < Math.PI / 3
+
       const isLeftSwipe = dx < 0
       const isRightSwipe = dx > 0
 
-      if (isFullSwipe && onSwipeAnywhere) {
+      if (isFullSwipe && isUnder60DegreeSwipe && onSwipeAnywhere) {
         handle360Swipe(dx, dy)
       } else if (isFullSwipe && isLeftSwipe && onSwipeLeft) {
         handleLeftSwipe(dy)

diff --git a/src/app/Components/FancySwiper/FancySwiperCard.tsx b/src/app/Components/FancySwiper/FancySwiperCard.tsx
@@ -102,7 +102,7 @@ const interpolateSwiper = (
 
 const MIN_OPACITY = 0.3
 const MAX_OPACITY = 1
-const MIN_SCALE = 0.9
+const MIN_SCALE = 0.8
 const MAX_SCALE = 1
 const MAX_ELEVATION = 8
 const MAX_SHADOW_OPACITY = 0.13
diff --git a/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx b/src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
@@ -26,7 +26,7 @@ import type {
 } from "__generated__/InfiniteDiscoveryQuery.graphql"
 
 interface InfiniteDiscoveryProps {
-  fetchMoreArtworks: () => void
+  fetchMoreArtworks: (undiscoveredArtworks: string[]) => void
   queryRef: PreloadedQuery<InfiniteDiscoveryQuery>
 }
 
@@ -85,7 +85,7 @@ export const InfiniteDiscovery: React.FC<InfiniteDiscoveryProps> = ({
 
     // fetch more artworks when the user is about to reach the end of the list
     if (index === artworks.length - REFETCH_BUFFER) {
-      fetchMoreArtworks()
+      fetchMoreArtworks(unswipedCards.map((card) => card.artworkId))
     }
   }, [index, artworks.length, fetchMoreArtworks])
 
@@ -187,8 +187,8 @@ export const InfiniteDiscoveryQueryRenderer: React.FC = () => {
     return <InfiniteDiscoverySpinner />
   }
 
-  const fetchMoreArtworks = () => {
-    loadQuery({ excludeArtworkIds: discoveredArtworksIds })
+  const fetchMoreArtworks = (undiscoveredArtworks: string[]) => {
+    loadQuery({ excludeArtworkIds: discoveredArtworksIds.concat(undiscoveredArtworks) })
   }
 
   return <InfiniteDiscovery fetchMoreArtworks={fetchMoreArtworks} queryRef={queryRef} />