[JS Bug]: Event listener breaks video pause function

[JuanCaicedo]

Please review FAQ and Known issues before filing a new item!

• I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe the bug

Adding live-share-react and using useMediaSession while using video.js seems to wire up a listener on the pause event.

This listener then interferes with the normal pausing of the player, shown below. When I click pause, it seems like the pause event is triggered, then the play event, then pause, and so on in an infinite loop.

video-playback.mp4

To Reproduce

Steps to reproduce the behavior:

1. We are waiting for our application to make it onto the Teams store, after that we can share repro instructions

Expected behavior

Play and pause works without any errors.

[JuanCaicedo]

Is there a way to remove or disable the event listeners added by MediaPlayerSynchronizer? From my testing, it seems like that would work correctly, including supporting synchronization between meeting attendees

[ryanbliss]

Hey Juan! Sorry for the delayed response. Our team has been largely out on holiday break, and we won't be able to look closely at this until next week. However, you should be able to copy/paste the useMediaSynchronizer hook file into your own project and modify as needed. It shouldn't be referencing any private files.

Next week we will investigate a real fix, assuming we can reproduce. Thank you!

[alexchaaan]

Quick update on this, looks like even after removing the event handlers we eventually still end up infinite looping through play/pause calls. It doesn't happen instantly like we see in Juan's example video, but after a few manual play/pause calls, it starts infinite looping.

[ryanbliss]

It's worth noting that this doesn't happen in our samples, at least not as far as I've seen. Is this a new issue? Or has it been happening since you first integrated?

[ryanbliss]

Usually if this sort of thing happens it's because the MediaPlayerSynchronizer class is detecting that your player is in a state it wasn't informed of via a user action, so it tries to block it to keep it aligned with the expected group playback state. But in some cases a player may also be trying to do the same thing, in which case there can be a sort of push and pull effect.

Could be something along those lines...but it's hard to say without a repro. How custom is your video.js setup? Did you write a custom shim class adhering to the IMediaPlayer interface, or did you pass in the HTML5 video element in directly?

[alexchaaan]

I believe we used to have it working and then somewhere down the line it regressed.
We wrote a custom class implementing IMediaPlayer.

For some reason those custom playing and pause event handlers keep firing in MediaPlayerSynchronizer.js. If i remove them, it looks like as the presenter, pressing play/pause works fine (calling our play/pause functions) up until a point when the synchronizer pushes a play/pause call to the custom class and then things get all out of whack

[ryanbliss]

Closed with #737, just do the following:
mediaSynchronizer.blockUnexpectedPlayerEvents = false;

This is a beta feature so please share feedback if this is not working as expected.