feat: implement pull up to next functionality (#3760)

* feat: implement pull-up-to-next functionality in EntryDetailScreen

* feat: add onScroll callback support in SafeNavigationScrollView

* refactor: utilize EntryExtraData

* feat: refactor Entry components to utilize EntryExtraData type

* refactor: replace useSharedValue with useRef and useState for pull-up functionality

* feat: enhance pull-up-to-next functionality with enabled prop

* fix: types

Author: lawvs

apps/mobile/src/components/layouts/views/SafeNavigationScrollView.tsx

@@ -94,7 +94,9 @@ export const SafeNavigationScrollView = ({
       if (reanimatedScrollY) {
         reanimatedScrollY.value = event.contentOffset.y
       }
-
+      if (onScroll) {
+        runOnJS(onScroll)(event)
+      }
       runOnJS(checkScrollToBottom)()
       screenCtxValue.reAnimatedScrollY.value = event.contentOffset.y
     },

apps/mobile/src/modules/context-menu/feeds.tsx

@@ -343,7 +343,11 @@ const PreviewFeeds = (props: { id: string; view: FeedViewType }) => {
 
   const renderItem = useCallback(
     ({ item: id }: ListRenderItemInfo<string>) => (
-      <EntryNormalItem entryId={id} extraData="" view={props.view} />
+      <EntryNormalItem
+        entryId={id}
+        extraData={{ entryIds: null, playingAudioUrl: null }}
+        view={props.view}
+      />
     ),
     [props.view],
   )

apps/mobile/src/modules/entry-content/use-pull-up-to-next.tsx

@@ -0,0 +1,88 @@
+import * as Haptics from "expo-haptics"
+import { useCallback, useRef, useState } from "react"
+import type { NativeScrollEvent, NativeSyntheticEvent } from "react-native"
+import type { ReanimatedScrollEvent } from "react-native-reanimated/lib/typescript/hook/commonTypes"
+
+export const usePullUpToNext = ({
+  enabled: enabled = true,
+  onRefresh,
+  progressViewOffset = 70,
+}: {
+  enabled?: boolean
+  onRefresh?: (() => void) | undefined
+  progressViewOffset?: number
+} = {}) => {
+  const dragging = useRef(false)
+  const isOverThreshold = useRef(false)
+  const [refreshing, setRefreshing] = useState(false)
+
+  const onScroll = useCallback(
+    (e: ReanimatedScrollEvent) => {
+      if (!dragging.current) return
+      const overOffset = e.contentOffset.y - e.contentSize.height + e.layoutMeasurement.height
+
+      if (overOffset > progressViewOffset) {
+        if (!isOverThreshold.current && onRefresh) {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
+        }
+        isOverThreshold.current = true
+        setRefreshing(true)
+      } else {
+        if (isOverThreshold.current && onRefresh) {
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft)
+        }
+        isOverThreshold.current = false
+        setRefreshing(false)
+      }
+      return
+    },
+    [dragging, onRefresh, progressViewOffset],
+  )
+
+  const onScrollBeginDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const beginOffset =
+        e.nativeEvent.contentOffset.y -
+        e.nativeEvent.contentSize.height +
+        e.nativeEvent.layoutMeasurement.height
+      if (beginOffset < -50) {
+        // Maybe user is pulling down fast for overview
+        return
+      }
+      dragging.current = true
+    },
+    [dragging],
+  )
+
+  const onScrollEndDrag = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      dragging.current = false
+      const velocity = event.nativeEvent.velocity?.y || 0
+      if (isOverThreshold.current && velocity < 3) {
+        onRefresh?.()
+      }
+      isOverThreshold.current = false
+      setRefreshing(false)
+    },
+    [dragging, onRefresh],
+  )
+
+  if (!enabled) {
+    return {
+      scrollViewEventHandlers: {},
+      pullUpViewProps: {},
+      EntryPullUpToNext: () => null,
+    }
+  }
+
+  return {
+    scrollViewEventHandlers: {
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+    },
+    pullUpViewProps: {
+      refreshing,
+    },
+  }
+}

apps/mobile/src/modules/entry-list/EntryListContentArticle.tsx

@@ -13,6 +13,7 @@ import { EntryListFooter } from "./EntryListFooter"
 import { useOnViewableItemsChanged, usePagerListPerformanceHack } from "./hooks"
 import { ItemSeparator } from "./ItemSeparator"
 import { EntryNormalItem } from "./templates/EntryNormalItem"
+import type { EntryExtraData } from "./types"
 
 export const EntryListContentArticle = ({
   ref: forwardRef,
@@ -23,13 +24,17 @@ export const EntryListContentArticle = ({
   ref?: React.Ref<ElementRef<typeof TimelineSelectorList> | null>
 }) => {
   const playingAudioUrl = usePlayingUrl()
+  const extraData: EntryExtraData = useMemo(
+    () => ({ playingAudioUrl, entryIds }),
+    [playingAudioUrl, entryIds],
+  )
 
   const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage } =
     useFetchEntriesControls()
 
   const renderItem = useCallback(
     ({ item: id, extraData }: ListRenderItemInfo<string>) => (
-      <EntryNormalItem entryId={id} extraData={extraData} view={view} />
+      <EntryNormalItem entryId={id} extraData={extraData as EntryExtraData} view={view} />
     ),
     [view],
   )
@@ -56,7 +61,7 @@ export const EntryListContentArticle = ({
       onRefresh={refetch}
       isRefetching={isRefetching}
       data={entryIds}
-      extraData={playingAudioUrl}
+      extraData={extraData}
       keyExtractor={defaultKeyExtractor}
       estimatedItemSize={100}
       renderItem={renderItem}

apps/mobile/src/modules/entry-list/EntryListContentSocial.tsx

@@ -11,6 +11,7 @@ import { EntryListFooter } from "./EntryListFooter"
 import { useOnViewableItemsChanged, usePagerListPerformanceHack } from "./hooks"
 import { ItemSeparatorFullWidth } from "./ItemSeparator"
 import { EntrySocialItem } from "./templates/EntrySocialItem"
+import type { EntryExtraData } from "./types"
 
 export const EntryListContentSocial = ({
   ref: forwardRef,
@@ -21,12 +22,15 @@ export const EntryListContentSocial = ({
 }) => {
   const { fetchNextPage, isFetching, refetch, isRefetching, hasNextPage } =
     useFetchEntriesControls()
+  const extraData: EntryExtraData = useMemo(() => ({ playingAudioUrl: null, entryIds }), [entryIds])
 
   const { onScroll: hackOnScroll, ref, style: hackStyle } = usePagerListPerformanceHack()
   useImperativeHandle(forwardRef, () => ref.current!)
   // eslint-disable-next-line @eslint-react/hooks-extra/no-unnecessary-use-callback
   const renderItem = useCallback(
-    ({ item: id }: ListRenderItemInfo<string>) => <EntrySocialItem entryId={id} />,
+    ({ item: id, extraData }: ListRenderItemInfo<string>) => (
+      <EntrySocialItem entryId={id} extraData={extraData as EntryExtraData} />
+    ),
     [],
   )
 
@@ -50,6 +54,7 @@ export const EntryListContentSocial = ({
       }}
       isRefetching={isRefetching}
       data={entryIds}
+      extraData={extraData}
       keyExtractor={(id) => id}
       estimatedItemSize={100}
       renderItem={renderItem}

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -27,10 +27,19 @@ import { useEntryTranslation } from "@/src/store/translation/hooks"
 
 import { EntryItemContextMenu } from "../../context-menu/entry"
 import { EntryItemSkeleton } from "../EntryListContentArticle"
+import type { EntryExtraData } from "../types"
 import { EntryTranslation } from "./EntryTranslation"
 
 export const EntryNormalItem = memo(
-  ({ entryId, extraData, view }: { entryId: string; extraData: string; view: FeedViewType }) => {
+  ({
+    entryId,
+    extraData,
+    view,
+  }: {
+    entryId: string
+    extraData: EntryExtraData
+    view: FeedViewType
+  }) => {
     const entry = useEntry(entryId)
     const translation = useEntryTranslation(entryId)
     const from = getInboxFrom(entry)
@@ -46,10 +55,11 @@ export const EntryNormalItem = memo(
 
         navigation.pushControllerView(EntryDetailScreen, {
           entryId,
+          entryIds: extraData.entryIds ?? [],
           view,
         })
       }
-    }, [entryId, entry, navigation, view])
+    }, [entry, navigation, entryId, extraData.entryIds, view])
 
     const audio = entry?.attachments?.find((attachment) =>
       attachment.mime_type?.startsWith("audio/"),
@@ -125,7 +135,7 @@ export const EntryNormalItem = memo(
             )}
           </View>
           {view !== FeedViewType.Notifications && (
-            <ThumbnailImage entry={entry} view={view} extraData={extraData} />
+            <ThumbnailImage entry={entry} view={view} playingAudioUrl={extraData.playingAudioUrl} />
           )}
         </ItemPressable>
       </EntryItemContextMenu>
@@ -137,11 +147,11 @@ EntryNormalItem.displayName = "EntryNormalItem"
 
 const ThumbnailImage = ({
   view,
-  extraData,
+  playingAudioUrl,
   entry,
 }: {
   view: FeedViewType
-  extraData: string
+  playingAudioUrl: string | null
   entry: EntryModel
 }) => {
   const feed = useFeed(entry?.feedId as string)
@@ -152,7 +162,7 @@ const ThumbnailImage = ({
   const blurhash = coverImage?.blurhash
 
   const audio = entry?.attachments?.find((attachment) => attachment.mime_type?.startsWith("audio/"))
-  const audioState = getAttachmentState(extraData, audio)
+  const audioState = getAttachmentState(playingAudioUrl ?? undefined, audio)
   const isPlaying = audioState === "playing"
   const isLoading = audioState === "loading"