Toggle video fullscreen on doubleclick.

This commit is contained in:
Daniel Dominguez 2018-05-20 23:03:27 -03:00
parent f0c2fd1f1e
commit 67874045ac

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 (