Stop autoplay

[dzuz14]

Stop autoplay

[MinHuang-TW]

The main concern is that if users do not click on the preSlide and nextSlide quick enough after each page auto switch, they will get a quick flash to 'the next and next slide' (one is trigged from the autoplay and another is coming from the clicking. That's why I'm wondering maybe reset/ restart the autoplay timer might solve this problem without disabling the autoplay function. or is there any other easier way to solve this issue?

[DZuz14]

Yup. You are right about that undesired effect happening. I'm going to check into it today.

[DZuz14]

@MinHuang-TW

So I pushed up my initial solution for this to the autoplay branch.

I have two questions for you:

1. What do you think about the solution below?
2. I'm unsure if there are any cases where we will still get a weird transition. Right now, I found that if you click an arrow mid transition, there is a flash of white. Can you find any other edge cases/is the edge case you described above solved as well?

Here are the important pieces:

• Handle whether autoPlay is active in a component higher in the hierarchy than Slider. I created an autoPlay variable, as well as a function to turn it off in my example parent in index.js

• Set autoPlayRef.current to null if autoPlay is not active.

  useEffect(() => {
    transitionRef.current = smoothTransition
    resizeRef.current = handleResize
    autoPlayRef.current = props.autoPlay ? nextSlide : null
  })

This comes in handy further on in the explanation.

• I separated setting the interval for autoPlay into it's own useEffect call from the transition and browser listeners to avoid conditionals, which made the code less easier to reason about.

  // AutoPlay
  useEffect(() => {
    if (props.autoPlay) {
      const play = () => {
        autoPlayRef.current()
      }

      const interval = setInterval(play, props.autoPlay * 1000)

      return () => {
        clearInterval(interval)
      }
    }
  }, [props.autoPlay])

• Last thing was to refactor nextSlide and prevSlide to stop autoplay upon click (if autoplay is currently active).

  const hasAutoPlayBeenStopped = e => {
    if (e && autoPlayRef.current && e.target.className.includes('Arrow')) {
      props.stopAutoPlay()
    }
  }

  const nextSlide = e => {
    hasAutoPlayBeenStopped(e)

    setState({
      ...state,
      translate: translate + getWidth(),
      activeSlide: activeSlide === slides.length - 1 ? 0 : activeSlide + 1
    })
  }

  const prevSlide = e => {
    hasAutoPlayBeenStopped(e)

    setState({
      ...state,
      translate: 0,
      activeSlide: activeSlide === 0 ? slides.length - 1 : activeSlide - 1
    })
  }

When we turn off autoPlay, that's where our first useEffect call that sets all of the ref values on each render comes in. When the component re-renders after stopping autoPlay in the parent, that useEffect call runs again and sets the autoPlayRef.current value to null.

This allows us to have a solid conditional that only executes stopAutoPlay only when it's active.

[MinHuang-TW]

@DZuz14
Thanks for the explanation! I've cloned the autoplay branch but the interval seems didn't restart after clicking the arrows. There was weirdly a few times the autoplay completely stopped and never resumed anymore. Is it the same on your computer?

I did encounter another issue while clicking the arrows quickly and continually. That was followed by a few blank slides. I guess it might because the smoothTransition couldn't catch up with the speed of quick clicking. For now I just temporally blocked nextSlide & prevSlide for like 500ms and that is sufficient for me. Just let you know and you might have more elegant solution since I am very new to the react world.

[DZuz14]

You're right...lol. It doesn't work for me either. I could have sworn I tested it pretty good before pushing it up. I might have messed something up.

[DZuz14]

omgggg... I think its the svg icon preventing clicks from working sometimes lol....i will fix this

[DZuz14]

@MinHuang-TW Fixed it. This was a tricky one to track down. If you go to the Arrow component, I set a pointer-events property to none on the img element inside the css.

What was happening is, that if you clicked directly on the svg img element, nothing would happen, because I had set the onClick handler on the div, not the img element.

Setting that new property automatically bubbles up the click event to the div now, which catches it

[DZuz14]

react-hooks-image-slider/src/components/Arrow.js

Line 30 in 9d1bfe6

pointer-events: none;

[MinHuang-TW]

Now the autoplay does stop! Is it possible to automatically resume it after the preset interval (3 seconds) instead of stopping forever?

[DZuz14]

That's entirely up to you. You could create some type of interaction outside the form to start it back up, or inside the form.