Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update of DOM listeners in FilePlayer when audio/video tags was switched #234

Merged
merged 1 commit into from Sep 13, 2017
Merged

update of DOM listeners in FilePlayer when audio/video tags was switched #234

merged 1 commit into from Sep 13, 2017

Conversation

ghost
Copy link

@ghost ghost commented Sep 12, 2017

Hey!
Big thanks for your work! I use your player in my project and it works good and simply. But when I need to switch videofile to audiofile, all used DOM-listeners gets old and it crashes player normal work.
So... Hope my commit can make your player a little bit better :)

const wasAudio = AUDIO_EXTENSIONS.test(prevProps.url) || prevProps.config.file.forceAudio
const isAudio = AUDIO_EXTENSIONS.test(url) || config.file.forceAudio
if (wasAudio !== isAudio) {
this.removeDOMListeners()
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this is necessary. At this point, this.player is already the new <audio> or <video> element and the old one has been unmounted and removed from the DOM. We might have to do the same check in componentWillReceiveProps and run removeDOMListeners whilst the old element is still mounted? Or we might not have to run it at all, as the element is being killed anyway.

Copy link
Author

@ghost ghost Sep 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I was trying to set this check in cwrp, but by unknown (for me) reasons it don't works: player crashes. And by some unknown reasons, when we skip removing listeners and replace one tag by another, method getEventListeners() in console of my Chrome shows that old listeners exists on fresh tag too. Possibly react make this magic, possibly it such specifical Chrome (devTools?) bug. To be honest, I did not undestand the problem deeply, but in PR I provided the only working way I found.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm happy to merge the PR and will have a look at fixing it up a bit. Thanks!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super.componentWillReceiveProps(nextProps)! Exactly!

@cookpete cookpete merged commit f8c71e7 into cookpete:master Sep 13, 2017
cookpete added a commit that referenced this pull request Sep 13, 2017
Follow up to #234
Checks if the element to be rendered will change, if so then remove listeners on willReceiveProps, and add listeners on didUpdate
This also fixes a bug where media was pausing when unmounting
david-hub024 pushed a commit to david-hub024/React_VideoPlayer that referenced this pull request Dec 23, 2018
Follow up to cookpete/react-player#234
Checks if the element to be rendered will change, if so then remove listeners on willReceiveProps, and add listeners on didUpdate
This also fixes a bug where media was pausing when unmounting
david-hub024 pushed a commit to david-hub024/React_VideoPlayer that referenced this pull request May 23, 2020
Follow up to cookpete/react-player#234
Checks if the element to be rendered will change, if so then remove listeners on willReceiveProps, and add listeners on didUpdate
This also fixes a bug where media was pausing when unmounting
albanqoku added a commit to albanqoku/react-player that referenced this pull request Feb 24, 2021
Follow up to cookpete/react-player#234
Checks if the element to be rendered will change, if so then remove listeners on willReceiveProps, and add listeners on didUpdate
This also fixes a bug where media was pausing when unmounting
Webmaster1116 added a commit to Webmaster1116/video-player that referenced this pull request May 20, 2021
Follow up to cookpete/react-player#234
Checks if the element to be rendered will change, if so then remove listeners on willReceiveProps, and add listeners on didUpdate
This also fixes a bug where media was pausing when unmounting
webmiraclepro added a commit to webmiraclepro/video-player that referenced this pull request Sep 9, 2022
Follow up to cookpete/react-player#234
Checks if the element to be rendered will change, if so then remove listeners on willReceiveProps, and add listeners on didUpdate
This also fixes a bug where media was pausing when unmounting
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant