mohitk05 / react-insta-stories Goto Github PK

Currently, seeMore can load a new component. Is there a way to redirect to a new url on click of seemore?

when git clone this app and do npm install and use npm start give me this message and not run

rollup v0.64.1
bundles src/index.js → dist/index.js, dist/index.es.js...
created dist/index.js, dist/index.es.js in 709ms

[2019-04-22 17:15:32] waiting for changes..

please how to solve this problem

Do you have any plan to add testing libraries like jest and enzyme?

  {
    content: ({ action, isPaused }) => {
      console.log(isPaused); // gets called until slide is over
      return <Intro action={action} isPaused={isPaused} />;
    },
    duration: 3800,
  }
]

used simple config to test the story. i can see the component is rendered again and again until slide duration is over.

I'm pausing the stories using a ref named "stories" i.e this.stories.pause() and on playi9ng it using this.stories.play(), the video is playing perfectly but the loader appears without any need.
Please help me on how to remove this unusual loader.
TIA

@mohitk05

I've tried to fork the repo so that I can make and test some updates before putting in a PR. I ran into issues with lerna and when just using the react-insta-stories dist. I keep getting Hook errors possibly caused by mismatched react versions.

I think I must be missing something since the package works from NPM and when I copy and use that code its seems to work unless I rebuild it (npm run build).

When the first story is a video with sound and the user hasn't interacted with it, the loader will keep spinning even though the video is loaded. Seems like the Chrome video policy doesn't allow autoplay with sound on until user interacts with the component.

Is there a way to work around this? Taking a look at PR #47 may also help. Thanks!

Thanks for your awesome package.

Maybe the video player would be improve by a preload ?

When you load a video for the first time, the spinner of the loader is displayed, until the end of the duration.

If I go back to the previous story, and return to the next story, the video is loaded and correctly displayed.

I can reproduce this issue on my mobile with your sample video: https://storage.googleapis.com/coverr-main/mp4/Footboys.mp4 at each time.

Best regards,
Loïse

can't figure out how to add individual styling.

  {
    url:
      "xyz.com",
    header: {
      heading: "xyz",
      subheading: "Tzxy",
      profileImage: "xar",
      seeMore: "dasf",
      styles: {transform: 'scale(1.5)'}, //This is not working
    },
  },

is there any possibility to make zoom in animations with keyframes possible?
Would be nice if the img can have a className.

Is there anyway to mute the video?

Hello! Thank you for your job. Its fantastic!

Can you help me with the task. I need to add buttons near stories. So in this case user will be able to to change stories with help of buttons.

How do I capture the standard look on different phone screens?

steps to reproduce

• open: http://react-insta-stories-v2.surge.sh/
• enter mobile view in chrome or any other browser
• quicky switch back and forth slides. say for 10-20 seconds
• now when you go to next slide it will jump twice to the next to next slide
• same happens in prev action

Hi, how are you?

I need to build this functionality similar to instagram and soon thought, for sure some smart guys have already set up something similar. That was the case and I thank you so much. I have a performance related problem. The application works very well on the desktop, but for some detail when accessing the same website by cell phone, if the image does not immediately load that touch-sensitive 'beep' it does not leave the screen. I was wondering if there is an easy way to remove this beep when the component is assembled or if I would have to do something for myself in the responsive version! Anyway, thank you so much, the open-source lives!

And maybe, I'm sorry for my English, I'm from Brazil, I'm still learning!

Updating the stories props for rendering different stories from different person can't reset the counter for new props that is a new array of stories pass to a story component. Which cause new stories to start from the counter where we left our previous stories.
For eg. I have a list of persons who uploaded there stories
Mr X uploaded 5 pictures
Mr Y uploaded 4 pictures
I saw 3 pictures of Mr X from Start and switch to Mr Y stories , So Mr Y stories does not start with the position 1 , it starts from picture 4 because I saw 3 pictures of Mr X and counter does not reset with change in props

So recently I posted an issue #41
I could run the example app, but now I'm not sure how do I run the project for development. Ideally I'd want to run the example app with changes being watched in react-insta-stories package

I have a scenario like this. My requirement is, once the stories of #1 is over, the stories of #2 should be displayed, like how stories work normally. I keep the stories inside the state. After the stories of #1 is over, I update the state with the stories of #2. The component re-renders and the new set of stories is displayed. But the problem that I face is, The new set set of stories is stuck at the first story (the progress is not updating). It goes to the next story in the set when I click on the side and works normally.

I use the content property to display custom template for story. I see that the component stops re-rendering when the state is updated with new set of stories and they are displayed and continue to re-render when I tap on the side for the next story.

What is to be done for the progress to be resumed when the state is updated with new set of stories??

Hello Team,
Firstly thanks for this valuable component, If I'm giving width ="100%" then

1. The tap events for previous, next, hold for pause are not working.
2. Getting warning in the console that 'NAN' is an invalid value for the width CSS style property.
   Please fix these.
   TIA
   

could we add an option to pass background with status also

One more request about multiple person with multiple stories ?

how to reset progress bar when new stories added?

Hi @mohitkarekar @mohitk05 , first thank you for your amazing project.
I need to implement it in mobile phone, using react native. Is there a compatibility? If no we can work on it.
Also add video support will be a great feature.
I think this lib can become very popular, by allowing a lot of people to use it.
Thanks

Is it possible to send the header outside of container and also the progress indicator like insta?

Thanks for useable package. Story type can be improved. If story props pass as not only url but also object, it will be awesome. (For example: lottie file )

The loader is showing if I have one story or when I open a modal, how to hide the loader when I open a modal?

I didn't understand the "close" idea in the "SeeMore" tab. Because the only thing I can do is erase the icon and "see more" wrote. I say this, because I'm having to create a particular logic to deal with the display "none" and "inside" when the user clicks to see or not the storie. A problem in this logic and I believe that the component as a whole, it goes into a loop. The video of the storie ends and the music continues to play as if he were in the gift still playing. So, any help would be appreciated to see how I could set up to have this click situation and that the video or photo is no longer being played, but especially the video because it is very annoying that you close a story and the music shows that it it's still running and you have to give f5 to get it out. Not to say, impractical. But as I said, I may not have understood something about the component that makes it possible to solve this issue.

Thank you for the great plugin. It will be nice to have some description in the readme to run this project locally. I am having trouble starting it up locally. I am having the following error while running npm run deploy

npm ERR! path /Users/khawer/Projects/react-insta-stories/example/node_modules/.staging/react-insta-stories-4f928e7d/node_modules/@babel/code-frame
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/Users/khawer/Projects/react-insta-stories/example/node_modules/.staging/react-insta-stories-4f928e7d/node_modules/@babel/code-frame' -> '/Users/khawer/Projects/react-insta-stories/example/node_modules/.staging/@babel/code-frame-1ad58ac3'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Node Version: 11.3.0
NPM Version: 6.4.1

is the clickable area in the header, possible?
Thanks

What I did:

$ lerna bootstrap
$ cd packages/react-insta-stories/example
$ yarn start

And then I get this error:

I'm not that familiar with monorepos and how to use them, maybe it makes sense to add docs on how to run this project for development. I'm willing to do this when I get this issue resolved :)

How can i insert close button as "X" ?

How can i callback once all story ended in reactjs.

I would like the option to overlay an HTML node for each story, is this possible?

Description I am facing "ReferenceError: document is not defined" When import import Stories from 'react-insta-stories'; in app.js React Native app.
I have installed library into the project successfully from npm install --save react-insta-stories

What am i doing wrong?

Issue screenshot:

My package.json

"react": "16.9.0",
"react-insta-stories": "^2.0.2",
"react-native": "0.61.5",

The problem is related to the seeMore button.
Basically it doesn't stop the progress of the story, and it keeps going to the next slide. Sometimes it doesn't happend, so myabe the issue is related to the 'onTouch' to block the slide (debouncePause).

A solution that works is to edit in the Story.tsx the const toggleMore adding a timeout of 300 ms to the props.action()

const toggleMore = (show: boolean) => {
setShowMore(show)
setTimeout(() => {
props.action(show ? 'pause' : 'play')
}, 300)
};

EDIT:
The solution above doesn't seem to work.
Sometimes it still doesn't pause the story, but it seems to be completely random so far.

EDIT 2:
I temporary solved by stopping the stories on the one with the SeeMore prop. In this way, the stories stuck on that specific story, but you are able to go to the next story by simply clicking on the screen. You can also swipe up and see the inner content of the SeeMore prop without any trouble.
Obviously this doesn't solve the problem totally, since the story needs to stop without the user consent, but at least there won't be any bug.

If you want to go with this workaround, just add in Container.tsx file the following code in the first useEffect()

if (!pause && (typeof stories[currentId] === "object" && !stories[currentId].seeMore )) {

Basically I just added a statement on the type of the current story to check whether the story contains the seeMore prop.

Can you add a callback function that is fired at the completion of all stories?

When are you planning on releasing V2? I see your open PR, just curious.

Most of the time, when I try to load a story with only one video, the video doesn't play, goes to the next user and logs the error message in the console:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Unknown (created by b) in b (created by ListStoriesModal) in div (created by Unstable_TrapFocus) in Unstable_TrapFocus (created by ForwardRef(Modal)) in div (created by ForwardRef(Modal)) in ForwardRef(Portal) (created by ForwardRef(Modal)) in ForwardRef(Modal) (created by ListStoriesModal) in div (created by ListStoriesModal) in ListStoriesModal (created by AppComponent)

I'm getting this error on gatsbyjs site:

Failed to compile
./node_modules/react-insta-stories/dist/index.es.js
Module not found: Error: Can't resolve 'babel-polyfill' in '/Users/.../node_modules/react-insta-stories/dist'

Do I need babel-polyfill package installed?

How to use the currentIndex property?? It is not explained anywhere in the documentation.

Image stories:
if i use same image url then i get endless blackoverlay+loader after 1st image so should be some issue if you used url like key

Video stories:
sometimes endless loading+blackoverlay, sometimes skipped and sometimes and sometimes played, should be some video load/preload issue?

import React from 'react';
import Stories from 'react-insta-stories';

const stories = [
  {
    url: 'https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg',
    type: 'image'
  },
  {
    url: 'https://www.sample-videos.com/video312/mp4/720/big_buck_bunny_720p_1mb.mp4',
    type: 'video'
  },
  {
    url: 'https://scontent.ftsr1-2.fna.fbcdn.net/v/t45.1600-4/cp0/q75/spS444/p526x296/117592197_23845254985100631_535175995998606741_n.jpg?_nc_cat=103&_nc_sid=67cdda&_nc_ohc=OpjhTO10kDYAX-8N0jV&_nc_ht=scontent.ftsr1-2.fna&oh=1c7092d971e24c980039efc7aa6e866c&oe=5F8298BD',
    type: 'image'
  },    
];

function App() {
  return (
    <div className="App">
      <Stories
        stories={stories}
        defaultInterval={15000}
        width={432}
        height={768}
      />
    </div>
  );
}

export default App;

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-insta-stories": "^2.0.4",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I want to create 2 button - back and next to control stories, but I don't know how to use the next() and previous() function in version 2. Please help me!

story timing is increasing randomly and sometimes skips the slide.

one way to reproduce it

let the slide complete.
click previous and keep doing it . after some time you will notice the slide speed will increase.

while going into the sourcecode found the reason what is causing the speed up

const incrementCount = () => {
        setCount((count: number) => {
            if (count === 0) storyStartCallback()
            const interval = getCurrentInterval()
            if (count < 100) {
                animationFrameId.current = requestAnimationFrame(incrementCount)
            } else {
                storyEndCallback()
                if (currentId === stories.length - 1) {
                    allStoriesEndCallback()
                }
                next()
            }
            return count + (100 / ((interval / 1000) * 60))
        })
    }

i am not sure why but the incrementCount frequency increases drastically after you click on previous slide anchor.

for slides getting skipped

const updateNextStoryId = () => {
        if (currentId < stories.length - 1) {
            setCurrentId(currentId + 1) // you should use   setCurrentId(prevCurrentId=>prevCurrentId + 1)
            setCount(0)
        }
    }

   const previous = () => {
        if (currentId > 0) {
            setCurrentId(currentId - 1) // setCurrentId(prevCurrentId=>prevCurrentId - 1)
            setCount(0)
        }
    }

I have a video file that's just local. In my stories object, I set the url: "/assets/videos/sample.mp4". It plays fine in production in all browsers, and it plays fine locally in all browsers except safari. Safari just doesn't want to load anything. I've tried all different weird hacks, but maybe someone here has come across some fix?

Safari 13.0.5 on macOS 10.15.3

i have list of different stories and when click one of story how can i activate clicked story as a active story?

Sandbox for reproducing:

https://codesandbox.io/s/pensive-stallman-xi70k?file=/src/index.js (change in code to const isStrictMod = true;).

It seems the github version of the source code is a bit different than the one on npm, version are differents and the github version the progress bar isn't progressing..

Is it the latest version on github?

Thanks !

I wanted to use the 'see-more' component to show the list of people who viewed the story. Is it possible to change the 'see more' text in the caption to something else?

How to implement stories for multiple persons??

Hi I've integrated your package on my site and am noticing on mobile device with strong wifi that my remote image appears to load yet the loader component (default one) doesn't seem to hide (I see the loaded image behind the grey loader screen). Desktop works fine. I was wondering if you've encountered anything similar or are aware of any issues with onLoad call back for tags on mobile. Thanks!

when I update to version 2.1.2 for using WithSeeMore, stories cannot running automatically, it stop when first story ended, I need to touch to continue running.

but when I back to version 2.0.1, it works.
How can I fix it?

Hi, this is such cool work. Thank you for building this. I absolutely love it.

I am reaching to ask if I wanted to create a poll and clickable buttons that perhaps have their own animations to the stories. How could I approach it?

Thanks!

Is there a way to make the stories go in to a full screen mode?