Merge pull request #1498 from dan1d/toggle-full-screen-video

Toggle video fullscreen on doubleclick.
This commit is contained in:
Sean Yesmunt 2018-05-21 11:44:26 -04:00 committed by GitHub
commit 3ecf05e6ab
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -19,6 +19,7 @@ class VideoPlayer extends React.PureComponent {
}; };
this.togglePlayListener = this.togglePlay.bind(this); this.togglePlayListener = this.togglePlay.bind(this);
this.toggleFullScreenVideo = this.toggleFullScreen.bind(this);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
@ -77,6 +78,7 @@ class VideoPlayer extends React.PureComponent {
changeVolume(mediaElement.volume); changeVolume(mediaElement.volume);
}); });
mediaElement.volume = volume; mediaElement.volume = volume;
mediaElement.addEventListener('dblclick', this.toggleFullScreenVideo);
} }
} }
@ -112,6 +114,17 @@ class VideoPlayer extends React.PureComponent {
this.props.doPause(); this.props.doPause();
} }
toggleFullScreen(event) {
const mediaElement = this.media.children[0];
if (mediaElement) {
if (document.webkitIsFullScreen) {
document.webkitExitFullscreen();
} else {
mediaElement.webkitRequestFullScreen();
}
}
}
togglePlay(event) { togglePlay(event) {
// ignore all events except click and spacebar keydown, or input events in a form control // ignore all events except click and spacebar keydown, or input events in a form control
if ( if (