react-native-web: isImmediatePropagationStopped is not a function

[awinograd]

The event "polyfill" detection

video.js/src/js/utils/events.js

Line 107 in 4238f5c

if (!event || !event.isPropagationStopped) {

doesn't seem to be compatible with react-native-web's event system. isPropagationStopped is defined on MouseEvents (https://github.com/necolas/react-native-web/blob/66d01734ce3ffcfea61e05aa1b45015658b3f2af/packages/react-native-web/src/modules/createEventHandle/index.js#L69) but isImmediatePropagationStopped is not which causes the error isImmediatePropagationStopped is not a function to be thrown here:

video.js/src/js/utils/events.js

Line 304 in 32630d9

if (event.isImmediatePropagationStopped()) {

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[kentferolino]

Are you able to solve this @awinograd ?

[awinograd]

I applied the following patch with patch-package. It's worked well for me so far, but use at your own risk!

diff --git a/node_modules/video.js/dist/video.es.js b/node_modules/video.js/dist/video.es.js
index 94e1f35..3612ca6 100644
--- a/node_modules/video.js/dist/video.es.js
+++ b/node_modules/video.js/dist/video.es.js
@@ -2024,7 +2024,7 @@ function fixEvent(event) {
   // with the Javascript Ninja code. So we're just overriding all events now.
 
 
-  if (!event || !event.isPropagationStopped) {
+  if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {
     var old = event || window.event;
     event = {}; // Clone the old object so that we can modify the values event = {};
     // IE8 Doesn't like when you mess with native event properties

[kentferolino]

Thanks for the suggestion @awinograd !

[kentferolino]

I got mine working using this snippet

• if (event.isImmediatePropagationStopped()) {

• if (event && event.isImmediatePropagationStopped && event.isImmediatePropagationStopped()) {

[gkatsev]

@awinograd care to submit a PR for this?

Seems like react-native-web basically implements a lot of the same type of events that we do, but it only implements isPropagationStopped but not isImmediatePropagationStopped. This means that we do want to "fix" this event into our event system.

[necolas]

preact/compat also adds isPropagationStopped to native events as part of emulating React synthetic events. It's not great, and I don't think this library should be emulating React's synthetic event extensions either.

[gkatsev]

Yeah, everyone is basically following jQuery's lead here hehe

[awinograd]

I'm happy to open a PR. Though I do agree with @necolas in that this event emulation is pretty fragile. Unfortunately I dont have much to contribute towards a better solution in that regard.

[gkatsev]

It's been working (mostly) great for us for years, though, yeah, it's definitely not great.
At some point, maybe we'll find the time to see if we can rip out the entire event system and only rely on native events. But for now, we're stuck.
A PR would be appreciated!

[awinograd]

@gkatsev I definitely understand the need to find the right balance! Thanks for all your work on the library. I've opened a PR as requested.

#7286

[gkatsev]

Thanks!