From 9a73611f730afd49e040f33c2611842751c10318 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 27 Aug 2025 21:10:36 -0500 Subject: [PATCH] Update types with better docs, add active video handling --- src/components/List/index.tsx | 56 +++++++++++++++++++++++++++++------ 1 file changed, 47 insertions(+), 9 deletions(-) diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index 44338a8241..773c3838b5 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -11,7 +11,10 @@ import Animated, { useAnimatedScrollHandler, useSharedValue, } from 'react-native-reanimated' +import {updateActiveVideoViewAsync} from '@haileyok/bluesky-video' +import {useDedupe} from '#/lib/hooks/useDedupe' +import {isIOS, isNative} from '#/platform/detection' import {useLightbox} from '#/state/lightbox' import {atoms as a, useTheme, web} from '#/alf' import {useListScrollContext} from '#/components/List/ListScrollProvider' @@ -21,15 +24,44 @@ export { useListScrollHandler, } from '#/components/List/ListScrollProvider' -/** - * Cleaned up FlatList without some problematic props. - * - * - `contentOffset` - Use `headerOffset` or `footerOffset` - */ type ListProps = Omit< FlatListProps, - 'contentOffset' + | 'onScroll' + | 'onScrollBeginDrag' + | 'onScrollEndDrag' + | 'onMomentumScrollBegin' + | 'onMomentumScrollEnd' + | 'refreshControl' + | 'contentOffset' > & { + /** + * @deprecated use `ListScrollProvider` handler instead + */ + onScroll?: FlatListProps['onScroll'] + /** + * @deprecated use `ListScrollProvider` handler instead + */ + onScrollBeginDrag?: FlatListProps['onScrollBeginDrag'] + /** + * @deprecated use `ListScrollProvider` handler instead + */ + onScrollEndDrag?: FlatListProps['onScrollEndDrag'] + /** + * @deprecated use `ListScrollProvider` handler instead + */ + onMomentumScrollBegin?: FlatListProps['onMomentumScrollBegin'] + /** + * @deprecated use `ListScrollProvider` handler instead + */ + onMomentumScrollEnd?: FlatListProps['onMomentumScrollEnd'] + /** + * @deprecated pass `refreshing` and `onRefresh` instead to enable + */ + refreshControl?: FlatListProps['refreshControl'] + /** + * @deprecated use `headerOffset` instead + */ + contentOffset?: FlatListProps['contentOffset'] /** * Wrapper around `onViewableItemsChanged` that calls back with individual * items IF they `item.isViewable` is true. @@ -58,6 +90,7 @@ export const List = forwardRef(function List( ) { const t = useTheme() const {activeLightbox} = useLightbox() + const debounce400 = useDedupe(400) const isScrolledDown = useSharedValue(false) const scrollHandlers = useListScrollContext() const onScroll = useAnimatedScrollHandler({ @@ -72,22 +105,27 @@ export const List = forwardRef(function List( runOnJS(props.onScrolledDownChange)(didScrollDown) } } + + if (isIOS) runOnJS(debounce400)(updateActiveVideoViewAsync) }, onBeginDrag(e, ctx) { scrollHandlers.onScrollBeginDrag?.(e, ctx) }, onEndDrag(e, ctx) { scrollHandlers.onScrollEndDrag?.(e, ctx) - }, - onMomentumBegin(e, ctx) { - scrollHandlers.onMomentumScrollBegin?.(e, ctx) + if (isNative) runOnJS(updateActiveVideoViewAsync)() }, /* * Note: adding onMomentumBegin here makes simulator scroll lag on Android. * So either don't add it, or figure out why. - sfn + * TODO */ + onMomentumBegin(e, ctx) { + scrollHandlers.onMomentumScrollBegin?.(e, ctx) + }, onMomentumEnd(e, ctx) { scrollHandlers.onMomentumScrollEnd?.(e, ctx) + if (isNative) runOnJS(updateActiveVideoViewAsync)() }, })