Swiping play the previous slide video

[nimaen]

Hi :)

When swiping a video slide, it makes it playing in the background.
I've tried to figure out how to fix this in my consumer code for hours, but cannot find a good way to do it.
Do you have any idea what I could use to fix this please?

[igordanchenko]

Are you using custom video implementation? The Video plugin that comes with this library stops video playback in this case.

[nimaen]

I do use a custom video implementation, but I can see it also behave like explained in the demo page here https://yet-another-react-lightbox.com/plugins/video 🤔

[nimaen]

Safari, Vivaldi (Chromium) on MacOS.
It seems like Firefox video capture the mouse input though and does not swipe the slide while swiping on the video itself 🤔

[nimaen]

I've found a solution: I've wrapped my top-most video container component with some event traps.

type AnyDeviceInputEvent<T> = React.MouseEvent<T>|React.PointerEvent<T>

const stopPropagation = useCallback((event: AnyDeviceInputEvent<Element>) => {
  event.stopPropagation()
  event.preventDefault()
}, [])

<MediaPlayer
   onMouseDown={stopPropagation}
   onPointerDown={stopPropagation}
/>

[nimaen]

It looks like it does not break any other thing, I guess I'll go with that :)

[igordanchenko]

Ah, I was finally able to reproduce. It never occurred to me to click-and-drag the video element itself. I was either using touchpad to swipe left / right, or clicking and dragging the blank space outside the video element. I can see the issue now.

Here's what's going on here:

1. pointer events fire while the video slide is in view (offset === 0)
2. slide navigation takes place
3. the above mentioned effect fires, but the video is not playing yet, so videoRef.current.pause() does not get called
4. the video starts playing asynchronously when the slide is already offscreen (offset !== 0)

I don't believe your workaround would break anything, so it should be a viable option. The only downside is that video slides won't be swappable via click-and-drag gesture.

I'm currently considering the following fix:

onPlay={() => {
  if (offset !== 0) {
    videoRef.current?.pause();
    return;
  }

  // ...
}}

Please let me know if you get a chance to test this approach.

[nimaen]

I've done something like this in an effect, it works perfectly 👍
I was having an issue with a non reactive state.
Thanks a lot for your support 🤝

[igordanchenko]

Thank you. I'll go ahead and publish this fix in #316