Summary

Part-way to closing #2377

When debugging I noticed errors being thrown from Plyr before the parent components init had succeeded; This raised an alarm bell as media pages should not be auto-playing to start with. The modals should be when they are clicked, but not on a media page.

It appears as though if autoplay is provided as an @input, it tries to auto-play straight away, in turn throwing an error because the component is not ready https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

Steps to test

On production, just open your console and load a video (e.g. the randomly selected https://www.minds.com/media/1060934327732535296)

To test, check this error does not show on the sandbox.

Estimated Regression Scope

I can only foresee the worst-case scenario as being a regression in the auto-playing of videos; perhaps when opening a modal; this is not the case though by my testing.

added scoped labels

Struggling to test right now as the video does not appear to be working on sandbox.

Regardless as the play button just hangs, this has shown me another avenue for this bug to occur.

Ah, that one does occur inside of the plyr package, so there isn't much we can do about that one other than report and whitelist.

It can be triggered by pausing whilst the video is still running its play promise. I'd hoped this was external as the component in this MR does have a pause function - this function however is not called, so it must be happening inside of the plyr or ngx-plyr component.

Cant this be set in ngInit or ngAfterViewInit?

Could maybe use the @input() to set a local variable _autoplay then check it in afterViewInit if(_autoplay) plyr.options.autoplay = _autoplay and change the option for autoplay if necessary.

Feels uglier but if you're worried about the timeouts its a route we can take.

We need to filter the sentry error. See the documentation here.

https://docs.sentry.io/error-reporting/configuration/filtering/?platform=javascript