diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index c31e1eb..6a7f674 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -8,7 +8,7 @@ import { StoryHeaderProps } from '../../core/dto/componentsDTO'; import Close from '../Icon/close'; const StoryHeader: FC = ( { - imgUrl, name, onClose, avatarSize, textStyle, buttonHandled, closeColor, + imgUrl, name, onClose, avatarSize, textStyle, closeColor, } ) => { const styles = { width: avatarSize, height: avatarSize, borderRadius: avatarSize }; @@ -28,11 +28,6 @@ const StoryHeader: FC = ( { onPress={onClose} hitSlop={16} testID="storyCloseButton" - onPressIn={() => { - - buttonHandled.value = true; - - }} > diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index d01de0d..2c26b78 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, memo, useEffect, useImperativeHandle, useState, } from 'react'; -import { Modal } from 'react-native'; +import { GestureResponderEvent, Modal, Pressable } from 'react-native'; import Animated, { cancelAnimation, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedReaction, useAnimatedStyle, @@ -27,9 +27,11 @@ const StoryModal = forwardRef( ( { const y = useSharedValue( HEIGHT ); const animation = useSharedValue( 0 ); const currentStory = useSharedValue( stories[0]?.stories[0]?.id ); - const buttonHandled = useSharedValue( false ); const paused = useSharedValue( false ); const durationValue = useSharedValue( duration ); + const pressInformation = useSharedValue<{ x: number, y: number, start: number }>( + { x: 0, y: 0, start: 0 }, + ); const userIndex = useDerivedValue( () => Math.round( x.value / WIDTH ) ); const storyIndex = useDerivedValue( () => stories[userIndex.value]?.stories.findIndex( @@ -227,10 +229,6 @@ const StoryModal = forwardRef( ( { onStart: ( e, ctx: GestureContext ) => { ctx.x = x.value; - ctx.pressedX = e.x; - ctx.pressedAt = Date.now(); - stopAnimation(); - paused.value = true; ctx.userId = userId.value; }, @@ -301,29 +299,49 @@ const StoryModal = forwardRef( ( { } - } else if ( ctx.pressedAt + LONG_PRESS_DURATION < Date.now() ) { - - startAnimation( true ); - - } else if ( ctx.pressedX < WIDTH / 2 ) { - - toPreviousStory(); - - } else if ( !buttonHandled.value ) { - - toNextStory(); - } ctx.moving = false; ctx.vertical = false; - buttonHandled.value = false; - paused.value = false; ctx.userId = undefined; }, } ); + const onPressIn = ( { nativeEvent: { locationX, locationY } }: GestureResponderEvent ) => { + + stopAnimation(); + paused.value = true; + pressInformation.value = { x: locationX, y: locationY, start: Date.now() }; + + }; + + const onPressOut = ( { nativeEvent: { locationX, locationY } }: GestureResponderEvent ) => { + + if ( pressInformation.value.x !== locationX || pressInformation.value.y !== locationY ) { + + return; + + } + + if ( pressInformation.value.start + LONG_PRESS_DURATION < Date.now() ) { + + startAnimation( true ); + + } else if ( ( pressInformation.value.x ) < WIDTH / 2 ) { + + toPreviousStory(); + + } else { + + toNextStory(); + + } + + paused.value = false; + + }; + useImperativeHandle( ref, () => ( { show, hide: onClose, @@ -371,42 +389,43 @@ const StoryModal = forwardRef( ( { return ( - - - - - {stories?.map( ( story, index ) => ( - { - - onLoad?.(); - startAnimation( - undefined, - value !== undefined ? ( videoDuration ?? value ) : duration, - ); - - }} - avatarSize={storyAvatarSize} - textStyle={textStyle} - buttonHandled={buttonHandled} - paused={paused} - videoProps={videoProps} - closeColor={closeIconColor} - key={story.id} - {...props} - /> - ) )} + + + + + + {stories?.map( ( story, index ) => ( + { + + onLoad?.(); + startAnimation( + undefined, + value !== undefined ? ( videoDuration ?? value ) : duration, + ); + + }} + avatarSize={storyAvatarSize} + textStyle={textStyle} + paused={paused} + videoProps={videoProps} + closeColor={closeIconColor} + key={story.id} + {...props} + /> + ) )} + - - + + ); diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts index 85b0557..648cf35 100644 --- a/src/core/dto/componentsDTO.ts +++ b/src/core/dto/componentsDTO.ts @@ -99,7 +99,6 @@ export interface StoryHeaderProps { name?: string; avatarSize: number; textStyle?: TextStyle; - buttonHandled: SharedValue; closeColor: string; onClose: () => void; }