Merge pull request #121 from Adil7767/feat/hide-overlay-on-long-press

feat(story): add hideOverlayOnLongPress prop to control overlay visib…
birdwingo · Oct 12, 2024 · d3636fd · d3636fd
2 parents 5726174 + e230902
commit d3636fd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -124,6 +124,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`                                    | 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
@@ -15,7 +15,8 @@ import StoryFooter from '../Footer';
 const StoryList: FC<StoryListProps> = ( {
   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,19 +59,25 @@ const StoryList: FC<StoryListProps> = ( {
           imageProps={imageProps}
           videoDuration={videoDuration}
         />
-        <Animated.View style={[ contentStyles, ListStyles.content ]}>
-          <StoryContent stories={stories} active={isActive} activeStory={activeStory} />
+        <Animated.View style={[
+          hideOverlayViewOnLongPress ? contentStyles : {},
+          ListStyles.content,
+        ]}
+        >
           {imageOverlayView}
-          <Progress
-            active={isActive}
-            activeStory={activeStoryIndex}
-            progress={progress}
-            length={stories.length}
-            progressColor={progressColor}
-            progressActiveColor={progressActiveColor}
-            progressContainerStyle={progressContainerStyle}
-          />
-          <StoryHeader {...props} />
+          <Animated.View style={[ contentStyles, ListStyles.content ]}>
+            <Progress
+              active={isActive}
+              activeStory={activeStoryIndex}
+              progress={progress}
+              length={stories.length}
+              progressColor={progressColor}
+              progressActiveColor={progressActiveColor}
+              progressContainerStyle={progressContainerStyle}
+            />
+            <StoryHeader {...props} />
+            <StoryContent stories={stories} active={isActive} activeStory={activeStory} />
+          </Animated.View>
         </Animated.View>
       </Animated.View>
       <StoryFooter stories={stories} active={isActive} activeStory={activeStory} />

diff --git a/src/core/dto/componentsDTO.ts b/src/core/dto/componentsDTO.ts
@@ -61,6 +61,7 @@ export interface StoryModalProps {
   imageProps?: ImageProps;
   footerComponent?: ReactNode;
   hideElementsOnLongPress?: boolean;
+  hideOverlayViewOnLongPress?: boolean;
   loopingStories?: 'none' | 'all' | 'onlyLast';
   statusBarTranslucent?: boolean;
   onLoad: () => void;
@@ -170,6 +171,7 @@ export interface StoryListProps extends InstagramStoryProps, StoryHeaderProps {
   progressContainerStyle?: ViewStyle;
   imageOverlayView?: ReactNode;
   hideElements: SharedValue<boolean>;
+  hideOverlayViewOnLongPress?: boolean;
   videoDuration?: number;
   onLoad: ( duration?: number ) => void;
 }

diff --git a/src/core/dto/instagramStoriesDTO.ts b/src/core/dto/instagramStoriesDTO.ts
@@ -74,6 +74,7 @@ export interface InstagramStoriesProps {
   hideAvatarList?: boolean;
   imageOverlayView?: ReactNode;
   hideElementsOnLongPress?: boolean;
+  hideOverlayViewOnLongPress?: boolean;
   loopingStories?: 'none' | 'all' | 'onlyLast';
   statusBarTranslucent?: boolean;
   onShow?: ( id: string ) => void;