Fix/overlapping stories (#3)

* fix: stories overlap when next story starts playing

* fix: story not changing on video ending

* fix: adjust types

* fix: remove comments

* fix: revert unnecessary changes

src/components/StoryDetail/hook.tsx

@@ -1,21 +1,19 @@
-import React, { MutableRefObject, useRef } from 'react';
-import type Carousel from 'react-native-snap-carousel';
+import React from 'react';
 
 import { useTrackRaf } from '../../hooks/useTrackRaf';
 
-import type { StoryDetailProps } from '../../types';
+import type { StoryDetailProps, CarouselRef } from '../../types';
 
 import { StoryDetailItem } from '../StoryDetailItem';
 
 export const useStoryDetail = ({
   initial,
   stories,
+  carouselRef,
   onBackPress,
   StoryDetailItemHeader,
   StoryDetailItemFooter,
-}: StoryDetailProps) => {
-  const carouselRef: MutableRefObject<Carousel<any> | null> = useRef(null);
-
+}: StoryDetailProps & { carouselRef: CarouselRef }) => {
   const { trackRaf } = useTrackRaf();
 
   const onBackDropPress = () => onBackPress(initial);
@@ -35,7 +33,7 @@ export const useStoryDetail = ({
   const onVideoEnd = (idx) => {
     if (idx <= stories.length - 2) {
       trackRaf(() => {
-        carouselRef.current?.snapToItem(idx + 1, false, false);
+        carouselRef.current?.snapToItem(idx + 1, false, true);
       });
     } else {
       onBackPress(idx);

src/components/StoryDetail/index.tsx

@@ -36,16 +36,17 @@ export const StoryDetail = React.forwardRef<
     },
     ref
   ) => {
+    const carouselRef: any = useRef(null);
+
     const { onBackDropPress, renderStoryDetailItem } = useStoryDetail({
       initial,
       stories,
+      carouselRef,
       onBackPress,
       StoryDetailItemHeader,
       StoryDetailItemFooter,
     } as any);
 
-    const carouselRef: any = useRef(null);
-
     return (
       <StoryDetailExpander ref={ref} isVisible={animated}>
         <Overlay

src/components/StoryDetailItem/hook.tsx

@@ -26,7 +26,7 @@ export const useStoryDetailItem = ({
     } else {
       setPaused(true);
       setProgress(0);
-      videoRef.current?.seek(0);
+      setTimeout(() => videoRef.current?.seek(0), 0);
     }
   }, [isCurrentStory, videoRef]);
 

src/hooks/useTrackRaf.ts

@@ -11,8 +11,6 @@ export const useTrackRaf = () => {
         cancelAnimationFrame(intervalId);
       });
     };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const trackRaf = (callback: (time: number) => void) => {

src/types/index.ts

@@ -267,6 +267,16 @@ export type StoryDetailExpanderRefProps = {
 
 export type StoryDetailExpanderRef = MutableRefObject<StoryDetailExpanderRefProps | null>;
 
+export type CarouselRefProps = {
+  /**
+   * A callback to fire expand-on-click animation
+   */
+  current?: object;
+  snapToItem: (index: number, animated: boolean, fireCallback: boolean) => void;
+};
+
+export type CarouselRef = MutableRefObject<CarouselRefProps | null>;
+
 export type RenderStoryDetailItemProps = {
   /**
    * The story content