Only first story plays, then it gets stuck

Hey there, Thanks for the library. Looking forward for it to work as it could solve many headaches.

I use:

    "next": "12.1.6",
    "react": "18.1.0",

I installed the library with force via npm: npm i react-insta-stories --force

I use the following code to display the Stories:

import React, { Component } from 'react';

import dynamic from "next/dynamic";

// import Stories from 'react-insta-stories';
const ReactStories = dynamic( (props) => import('react-insta-stories'), {ssr: false}, )


const App = () => {

    const stories = [
        'https://cdn.vox-cdn.com/thumbor/u7eoI5OEXTO2lGPzRcOalu9_oDE=/0x0:2913x4377/1200x675/filters:focal(1253x693:1719x1159)/cdn.vox-cdn.com/uploads/chorus_image/image/60759779/860576078.jpg.1533693436.jpg',
        'https://techcrunch.com/wp-content/uploads/2016/08/instagram-ceo-kevin-systrom.jpg',
    ];

    return (
        <div style={{
            height: "100vh",
            width: "100vw",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center"
        }}>
            <ReactStories
                stories={stories}
                defaultInterval={1500}
                width={350}
                height={"69vh"}
                loop
            />
        </div>
    );
};

export default App;

As you can see from the above code, I used the simple url string method to load the data.

It loads correctly but only shows the first story, after which it gets stuck.

Screengrab is attached.

https://user-images.githubusercontent.com/51885228/173635652-5f88b759-c36a-4c45-889e-7a9871b4c704.mov

[SaadBazaz]

@leonardolessa Same problem. It seems like something is wrong when updating state for the next() function. To fix it, I override the next function which is provided by this package. Here’s an example:

const [ currentId, setCurrentId ] = useState(0);

...

            <Stories
                currentIndex={currentId}
                loop
                keyboardNavigation
                defaultInterval={3000}
                stories={stories2}
                onStoryEnd={(s, st) => {
                    console.log('story ended', s, st);
                    setCurrentId(currentId => currentId + 1);
                }}
                onAllStoriesEnd={(s, st) => {
                    console.log('all stories ended', s, st);
                    setCurrentId(currentId => 0);
                }}
                onStoryStart={(s, st) => {
                    console.log('story started', s, st);
                    setCurrentId(currentId => (currentId + 1) - 1);
                }}
                
            />

[mohitk05]

Hello! Thanks for the discussion people! You are welcome to raise PRs and improve the package 💯