diff --git a/src/screens/Feeds/VibeScreen.tsx b/src/screens/Feeds/VibeScreen.tsx index ca0db1a07e..b80a43e0ca 100644 --- a/src/screens/Feeds/VibeScreen.tsx +++ b/src/screens/Feeds/VibeScreen.tsx @@ -7,7 +7,11 @@ import { View, ViewToken, } from 'react-native' -import {Gesture, GestureDetector} from 'react-native-gesture-handler' +import { + Gesture, + GestureDetector, + NativeGesture, +} from 'react-native-gesture-handler' import Animated, { runOnJS, runOnUI, @@ -157,6 +161,8 @@ function Inner() { const [currentIndex, setCurrentIndex] = useState(0) + const scrollGesture = useMemo(() => Gesture.Native(), []) + const renderItem: ListRenderItem = useCallback( ({item, index}) => { const {post} = item @@ -177,10 +183,11 @@ function Inner() { index === currentIndex && currentSource === post.embed.playlist } + scrollGesture={scrollGesture} /> ) }, - [players, currentIndex, isFocused, currentSources], + [players, currentIndex, isFocused, currentSources, scrollGesture], ) const updateVideoState = useNonReactiveCallback((index?: number) => { @@ -307,29 +314,31 @@ function Inner() { ) return ( - - } - onEndReached={() => { - if (hasNextPage && !isFetchingNextPage) { - fetchNextPage() + + } - }} - showsVerticalScrollIndicator={false} - onViewableItemsChanged={onViewableItemsChanged} - viewabilityConfig={{itemVisiblePercentThreshold: 95}} - /> + onEndReached={() => { + if (hasNextPage && !isFetchingNextPage) { + fetchNextPage() + } + }} + showsVerticalScrollIndicator={false} + onViewableItemsChanged={onViewableItemsChanged} + viewabilityConfig={{itemVisiblePercentThreshold: 95}} + /> + ) } @@ -342,11 +351,13 @@ function VideoItem({ post, embed, active, + scrollGesture, }: { player?: VideoPlayer post: AppBskyFeedDefs.PostView embed: AppBskyEmbedVideo.View active: boolean + scrollGesture: NativeGesture }) { const postShadow = usePostShadow(post) const {height, width} = useWindowDimensions() @@ -382,7 +393,12 @@ function VideoItem({ )} {postShadow !== POST_TOMBSTONE ? ( player && ( - + ) ) : ( active: boolean + scrollGesture: NativeGesture }) { const insets = useSafeAreaInsets() const t = useTheme() @@ -504,19 +522,20 @@ function Overlay({ const gesture = useMemo(() => { const dragLeftGesture = Gesture.Pan() + .simultaneousWithExternalGesture(scrollGesture) .activeOffsetX([0, 10]) .failOffsetX([-10, 0]) .failOffsetY([-5, 5]) .maxPointers(1) .onEnd(evt => { 'worklet' - if (evt.translationX < -50) { + if (evt.translationX < -50 && evt.velocityX < -300) { runOnJS(pushToProfile)() } }) return dragLeftGesture - }, [pushToProfile]) + }, [pushToProfile, scrollGesture]) const rkey = new AtUri(post.uri).rkey const record = AppBskyFeedPost.isRecord(post.record) ? post.record : undefined