[Bug]: AutoPlay button incorrectly changes status when resizing the main container

[DmitryOganezov]

Which variants of Embla Carousel are you using?

• [x] embla-carousel (Core)
• [ ] embla-carousel-react
• [ ] embla-carousel-vue
• [ ] embla-carousel-svelte
• [x] embla-carousel-autoplay
• [ ] embla-carousel-auto-scroll
• [ ] embla-carousel-solid
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-fade
• [x] embla-carousel-docs (Documentation)
• [ ] embla-carousel-docs (Generator)

Steps to reproduce

Scope: AutoPlay example Issue: The AutoPlay button incorrectly changes its status to "Stop" when resizing the main container. Calling togglePlayBtnState() on "reInit" seems unnecessary (?).

Expected Behavior

AutoPlay button shouldn't change status on reInit event.

Additional Context

Removing event .on('reInit', togglePlayBtnState) solved the issues, not sure about possible side-effects though,

What browsers are you seeing the problem on?

No response

Version

8.5.2

CodeSandbox

https://codesandbox.io/p/devbox/embla-carousel-autoplay-vanilla-forked-j26t8h

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues
• [x] I agree to follow this project's Contributing Guidelines for bug reports

[davidjerleke]

Hi @DmitryOganezov,

Thanks for your question. The Autoplay example in the docs works as expected?

[DmitryOganezov]

The Autoplay example in the docs works as expected?

Here's how to reproduce the issue in your original sandbox example:

1. Open the example in a popup
2. Resize the popup window so it width is less than 48rem;
3. The AutoPlay button changes its status to "Stop" although the AutoPlay mode is not active.

(I'm trying to understand why do we need to call togglePlayBtnState on reInit.)

Thanks for your amazing library!

[davidjerleke]

@DmitryOganezov could you provide a screen recording of how to reproduce it?

[DmitryOganezov]

Sure thing! Take a look, this the recording from the AutoPlay vanilla example (it turns out the pop-up windows is not even necessary): https://drive.google.com/file/d/10Toek12dZisWwUINvjzuczkGcx5I2BED

Please don't get me wrong—the Embla examples are great (I'd even say they’re the best). I'm just trying to understand why you use the "reInit" event in this particular example. From what I can see, when this event fires, the logic of togglePlayBtnState() doesn’t seem to make sense.

[davidjerleke]

@DmitryOganezov thanks. Aha, I tested the react example which is working as intended but it's the vanilla example that has the bug. I'll look into it when I get the chance.

(I'm trying to understand why do we need to call togglePlayBtnState on reInit.)

This is because the autoplay state can change when the a resize is triggered or something else like manually calling emblaApi.reInit() triggers a reInit. For example plugins support changing options based on breakpoints, and you might set playOnInit to false on some screen sizes and to true on others. Always think of the reInit event as an important event to update any state.

[DmitryOganezov]

Right, I completely forgot about playOnInit. Thanks!