Fix/all videos played at once

README.md

@@ -112,7 +112,7 @@ export default YourComponent;
  `setStories`          | ( stories: [InstagramStoryProps](#instagramstoryprops)[] ) => void                               | Replace the current stories with a new set of stories.
  `clearProgressStorage`| () => void                                                                                       | Clear the progress storage for seen stories.
  `hide`                | () => void                                                                                       | Hide stories if currently visible
- `show`                | ( id?: string ) => void                                                                          | Show stories modal with provided story `id`. If `id` is not provided, will be show first story
+ `show`                | ( id?: string ) => void                                                                          | Show stories modal with provided story `id`. If `id` is not provided, will be shown first story
 
 ## Types
 

src/components/Image/index.tsx

@@ -1,14 +1,16 @@
 import { Image, View } from 'react-native';
 import React, { FC, memo, useState } from 'react';
-import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import {
+  runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue,
+} from 'react-native-reanimated';
 import { StoryImageProps } from '../../core/dto/componentsDTO';
 import Loader from '../Loader';
 import { HEIGHT, LOADER_COLORS, WIDTH } from '../../core/constants';
 import ImageStyles from './Image.styles';
 import StoryVideo from './video';
 
 const StoryImage: FC<StoryImageProps> = ( {
-  stories, activeStory, defaultImage, isDefaultVideo, paused, videoProps,
+  stories, activeStory, defaultImage, isDefaultVideo, paused, videoProps, isActive,
   onImageLayout, onLoad,
 } ) => {
 
@@ -18,6 +20,8 @@ const StoryImage: FC<StoryImageProps> = ( {
 
   const loading = useSharedValue( true );
   const color = useSharedValue( LOADER_COLORS );
+  const videoDuration = useSharedValue<number | undefined>( undefined );
+  const isPaused = useDerivedValue( () => paused.value || !isActive.value );
 
   const onImageChange = async () => {
 
@@ -29,9 +33,9 @@ const StoryImage: FC<StoryImageProps> = ( {
 
     }
 
-    if ( data.uri === story.sourceUrl ) {
+    if ( data.uri === story.sourceUrl && ( !data.isVideo || videoDuration.value !== undefined ) ) {
 
-      onLoad();
+      onLoad( videoDuration.value );
 
     } else {
 
@@ -42,7 +46,7 @@ const StoryImage: FC<StoryImageProps> = ( {
 
     const nextStory = stories[stories.indexOf( story ) + 1];
 
-    if ( nextStory && nextStory.mediaType === 'image' ) {
+    if ( nextStory && nextStory.mediaType !== 'video' ) {
 
       Image.prefetch( nextStory.sourceUrl );
 
@@ -58,6 +62,12 @@ const StoryImage: FC<StoryImageProps> = ( {
 
   const onContentLoad = ( duration?: number ) => {
 
+    if ( data.isVideo ) {
+
+      videoDuration.value = duration;
+
+    }
+
     loading.value = false;
     onLoad( duration );
 
@@ -75,7 +85,8 @@ const StoryImage: FC<StoryImageProps> = ( {
               onLoad={onContentLoad}
               onLayout={onImageLayout}
               uri={data.uri}
-              paused={paused}
+              paused={isPaused}
+              isActive={isActive}
               {...videoProps}
             />
           ) : (

src/components/Image/video.tsx

@@ -1,35 +1,48 @@
-import React, { FC, memo, useState } from 'react';
+import React, {
+  FC, memo, useRef, useState,
+} from 'react';
 import { LayoutChangeEvent } from 'react-native';
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 import { StoryVideoProps } from '../../core/dto/componentsDTO';
 import { WIDTH } from '../../core/constants';
 
 const StoryVideo: FC<StoryVideoProps> = ( {
-  uri, paused, onLoad, onLayout, ...props
+  uri, paused, isActive, onLoad, onLayout, ...props
 } ) => {
 
   try {
 
     // eslint-disable-next-line global-require
     const Video = require( 'react-native-video' ).default;
 
+    const ref = useRef<any>( null );
+
     const [ pausedValue, setPausedValue ] = useState( !paused.value );
 
+    const start = () => ref.current?.seek( 0 );
+
     useAnimatedReaction(
       () => paused.value,
       ( res, prev ) => res !== prev && runOnJS( setPausedValue )( !res ),
       [ paused.value ],
     );
 
+    useAnimatedReaction(
+      () => isActive.value,
+      ( res ) => res && runOnJS( start )(),
+      [ isActive.value ],
+    );
+
     return (
       <Video
+        ref={ref}
         style={{ width: WIDTH, aspectRatio: 0.5626 }}
         {...props}
         source={{ uri }}
         paused={!pausedValue}
         controls={false}
         repeat={false}
-        onLoad={( _: any, duration: number ) => onLoad( duration * 1000 )}
+        onLoad={( { duration }: { duration: number } ) => onLoad( duration * 1000 )}
         onLayout={( e: LayoutChangeEvent ) => onLayout( e.nativeEvent.layout.height )}
       />
     );

src/components/InstagramStories/index.tsx

@@ -76,7 +76,7 @@ const InstagramStories = forwardRef<InstagramStoriesPublicMethods, InstagramStor
       );
       const seenStory = story.stories[seenStoryIndex + 1] || story.stories[0];
 
-      return seenStory.mediaType === 'image' ? Image.prefetch( seenStory.sourceUrl ) : true;
+      return seenStory.mediaType !== 'video' ? Image.prefetch( seenStory.sourceUrl ) : true;
 
     } );
 

src/components/List/index.tsx

@@ -54,6 +54,7 @@ const StoryList: FC<StoryListProps> = ( {
           onImageLayout={onImageLayout}
           onLoad={onImageLoad}
           paused={paused}
+          isActive={isActive}
           videoProps={videoProps}
         />
         <Progress

src/components/Modal/index.tsx

@@ -113,8 +113,6 @@ const StoryModal = forwardRef<StoryModalPublicMethods, StoryModalProps>( ( {
     const userStories = stories[newUserIndex]?.stories;
     currentStory.value = userStories[newStoryIndex + 1]?.id ?? userStories[0]?.id;
 
-    startAnimation();
-
   };
 
   const toNextStory = ( value = true ) => {

src/core/dto/componentsDTO.ts

@@ -63,6 +63,7 @@ export interface StoryImageProps {
   isDefaultVideo: boolean;
   paused: SharedValue<boolean>;
   videoProps?: any;
+  isActive: SharedValue<boolean>;
   onImageLayout: ( height: number ) => void;
   onLoad: ( duration?: number ) => void;
 }
@@ -114,6 +115,7 @@ export interface StoryListProps extends InstagramStoryProps, StoryHeaderProps {
 export interface StoryVideoProps {
   uri: string;
   paused: SharedValue<boolean>;
+  isActive: SharedValue<boolean>;
   onLoad: ( duration: number ) => void;
   onLayout: ( height: number ) => void;
 }

tests/index.test.js

@@ -264,6 +264,33 @@ describe( 'Instagram Stories test', () => {
 
       expect( getByTestId( '1StoryAvatar1Story' ) ).toBeTruthy();
 
+      ref.current.show();
+      ref.current.show('1');
+
+    } );
+
+  } );
+
+  it( 'Should not open if empty array', async () => {
+
+    const ref = createRef();
+
+    const { queryByTestId } = render(
+      <InstagramStories
+        stories={[]}
+        ref={ref}
+        saveProgress
+      />,
+    );
+
+    await act( async () => {
+
+      ref.current.show();
+
+      await sleep();
+
+      expect( queryByTestId( 'storyModal' ) ).toBeFalsy();
+
     } );
 
   } );
@@ -487,7 +514,7 @@ describe( 'Story Image test', () => {
 
   it( 'Should work with wrong story', () => {
 
-    render( <StoryImage stories={stories[0].stories} active={{ value: true }} activeStory={{ value: '2' }} defaultImage="url" /> );
+    render( <StoryImage stories={stories[0].stories} active={{ value: true }} activeStory={{ value: '2' }} defaultImage="url" paused={{ value: true }} isActive={{ value: true }} /> );
 
   } );
 
@@ -501,6 +528,8 @@ describe( 'Story Image test', () => {
       activeStory={{ value: '1' }}
       defaultImage="url"
       onLoad={onLoad}
+      paused={{ value: true }}
+      isActive={{ value: true }}
     /> );
 
     expect( onLoad ).toHaveBeenCalled();