From b9a701845a3c1f753690596e7a79ec74a73e8ae9 Mon Sep 17 00:00:00 2001 From: Adil Mustafa Date: Thu, 10 Oct 2024 12:38:32 +0500 Subject: [PATCH 1/2] feat(story): add hideOverlayOnLongPress prop to control overlay visibility on long press (#120) --- README.md | 1 + src/components/List/index.tsx | 8 +++++--- src/core/dto/componentsDTO.ts | 1 + 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 91323f8..d4f41af 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,7 @@ export default YourComponent; `progressContainerStyle` | ViewStyle | | Additional styles for the story progress container `hideAvatarList` | boolean | false | A boolean indicating whether to hide avatar scroll list `hideElementsOnLongPress` | boolean | false | A boolean indicating whether to hide all elements when story is paused by long press +| `hideOverlayOnLongPress` | `boolean` | (Optional) Controls whether the image overlay hides when `hideElementOnLongPress` is set to `true`. If `true`, the overlay will hide along with other elements on long press. If `false`, only the other elements (e.g., header, progress bar) will hide, and the overlay will remain visible. Default is the value of `hideElementOnLongPress`. | `loopingStories` | `'none'` | `'onlyLast'` | `'all'` | `'none'` | A string indicating whether to continue stories after last story was shown. If set to `'none'` modal will be closed after all stories were played, if set to `'onlyLast'` stories will loop on last user only after all stories were played. If set to `'all'` stories will play from beginning after all stories were played. `statusBarTranslucent` | boolean | false | A property passed to React native Modal component `footerComponent` | ReactNode | | A custom component, such as a floating element, that can be added to the modal. diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index 0422561..e56e3ce 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -15,7 +15,7 @@ import StoryFooter from '../Footer'; const StoryList: FC = ( { id, stories, index, x, activeUser, activeStory, progress, seenStories, paused, onLoad, videoProps, progressColor, progressActiveColor, mediaContainerStyle, imageStyles, - imageProps, progressContainerStyle, imageOverlayView, hideElements, videoDuration, ...props + imageProps, progressContainerStyle, imageOverlayView, hideElements,hideOverlayViewOnLongPress, videoDuration, ...props } ) => { const imageHeight = useSharedValue( HEIGHT ); @@ -58,9 +58,9 @@ const StoryList: FC = ( { imageProps={imageProps} videoDuration={videoDuration} /> - - + {imageOverlayView} + = ( { progressContainerStyle={progressContainerStyle} /> + + diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts index 10b738a..e5171e2 100644 --- a/src/core/dto/componentsDTO.ts +++ b/src/core/dto/componentsDTO.ts @@ -152,6 +152,7 @@ export interface StoryListProps extends InstagramStoryProps, StoryHeaderProps { progressContainerStyle?: ViewStyle; imageOverlayView?: ReactNode; hideElements: SharedValue; + hideOverlayViewOnLongPress?: boolean; videoDuration?: number; onLoad: ( duration?: number ) => void; } From e230902fd847345058b1fe22fded230220584714 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Fridmansk=C3=BD?= Date: Sat, 12 Oct 2024 10:38:20 +0200 Subject: [PATCH 2/2] fix: pr --- README.md | 2 +- src/components/List/index.tsx | 35 ++++++++++++++++------------- src/core/dto/componentsDTO.ts | 1 + src/core/dto/instagramStoriesDTO.ts | 1 + 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index d4f41af..42d72e9 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ export default YourComponent; `progressContainerStyle` | ViewStyle | | Additional styles for the story progress container `hideAvatarList` | boolean | false | A boolean indicating whether to hide avatar scroll list `hideElementsOnLongPress` | boolean | false | A boolean indicating whether to hide all elements when story is paused by long press -| `hideOverlayOnLongPress` | `boolean` | (Optional) Controls whether the image overlay hides when `hideElementOnLongPress` is set to `true`. If `true`, the overlay will hide along with other elements on long press. If `false`, only the other elements (e.g., header, progress bar) will hide, and the overlay will remain visible. Default is the value of `hideElementOnLongPress`. | + `hideOverlayOnLongPress` | `boolean` | The value of `hideElementOnLongPress` | Controls whether the image overlay hides when `hideElementOnLongPress` is set to `true`. If `true`, the overlay will hide along with other elements on long press. If `false`, only the other elements (e.g., header, progress bar) will hide, and the overlay will remain visible. `loopingStories` | `'none'` | `'onlyLast'` | `'all'` | `'none'` | A string indicating whether to continue stories after last story was shown. If set to `'none'` modal will be closed after all stories were played, if set to `'onlyLast'` stories will loop on last user only after all stories were played. If set to `'all'` stories will play from beginning after all stories were played. `statusBarTranslucent` | boolean | false | A property passed to React native Modal component `footerComponent` | ReactNode | | A custom component, such as a floating element, that can be added to the modal. diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index e56e3ce..5c23cdb 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -15,7 +15,8 @@ import StoryFooter from '../Footer'; const StoryList: FC = ( { id, stories, index, x, activeUser, activeStory, progress, seenStories, paused, onLoad, videoProps, progressColor, progressActiveColor, mediaContainerStyle, imageStyles, - imageProps, progressContainerStyle, imageOverlayView, hideElements,hideOverlayViewOnLongPress, videoDuration, ...props + imageProps, progressContainerStyle, imageOverlayView, hideElements, hideOverlayViewOnLongPress, + videoDuration, ...props } ) => { const imageHeight = useSharedValue( HEIGHT ); @@ -58,21 +59,25 @@ const StoryList: FC = ( { imageProps={imageProps} videoDuration={videoDuration} /> - + {imageOverlayView} - - - - - + + + + + diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts index e5171e2..0437bc8 100644 --- a/src/core/dto/componentsDTO.ts +++ b/src/core/dto/componentsDTO.ts @@ -44,6 +44,7 @@ export interface StoryModalProps { imageProps?: ImageProps; footerComponent?: ReactNode; hideElementsOnLongPress?: boolean; + hideOverlayViewOnLongPress?: boolean; loopingStories?: 'none' | 'all' | 'onlyLast'; statusBarTranslucent?: boolean; onLoad: () => void; diff --git a/src/core/dto/instagramStoriesDTO.ts b/src/core/dto/instagramStoriesDTO.ts index a37bf7e..3fd9c18 100644 --- a/src/core/dto/instagramStoriesDTO.ts +++ b/src/core/dto/instagramStoriesDTO.ts @@ -73,6 +73,7 @@ export interface InstagramStoriesProps { hideAvatarList?: boolean; imageOverlayView?: ReactNode; hideElementsOnLongPress?: boolean; + hideOverlayViewOnLongPress?: boolean; loopingStories?: 'none' | 'all' | 'onlyLast'; statusBarTranslucent?: boolean; onShow?: ( id: string ) => void;