Merge pull request #3832 from Klauswk/FixFullScreen

Fix full screen when console is open, HTML5
This commit is contained in:
Anton Georgiev 2017-04-24 14:55:35 -04:00 committed by GitHub
commit 90d34da942
3 changed files with 37 additions and 40 deletions

View File

@ -63,7 +63,7 @@ const intlMessages = defineMessages({
}, },
}); });
const openSettings = () => showModal(<SettingsMenuContainer />); const openSettings = () => showModal(<SettingsMenuContainer />);
const openAbout = () => showModal(<AboutContainer />); const openAbout = () => showModal(<AboutContainer />);

View File

@ -15,9 +15,9 @@ export default class SettingsDropdownContainer extends Component {
componentDidMount() { componentDidMount() {
const fullscreenChangedEvents = ['fullscreenchange', const fullscreenChangedEvents = ['fullscreenchange',
'webkitfullscreenchange', 'webkitfullscreenchange',
'mozfullscreenchange', 'mozfullscreenchange',
'MSFullscreenChange', ]; 'MSFullscreenChange', ];
fullscreenChangedEvents.forEach(event => fullscreenChangedEvents.forEach(event =>
document.addEventListener(event, this.handleFullscreenChange)); document.addEventListener(event, this.handleFullscreenChange));
@ -25,19 +25,21 @@ export default class SettingsDropdownContainer extends Component {
componentWillUnmount() { componentWillUnmount() {
const fullscreenChangedEvents = ['fullscreenchange', const fullscreenChangedEvents = ['fullscreenchange',
'webkitfullscreenchange', 'webkitfullscreenchange',
'mozfullscreenchange', 'mozfullscreenchange',
'MSFullscreenChange', ]; 'MSFullscreenChange', ];
fullscreenChangedEvents.forEach(event => fullscreenChangedEvents.forEach(event =>
document.removeEventListener(event, this.fullScreenToggleCallback)); document.removeEventListener(event, this.fullScreenToggleCallback));
} }
handleFullscreenChange() { handleFullscreenChange() {
if (screen.height - 1 <= window.innerHeight) { if (document.fullscreenElement
// browser is probably in fullscreen || document.webkitFullscreenElement
|| document.mozFullScreenElement
|| document.msFullscreenElement) {
this.setState({ isFullScreen: true }); this.setState({ isFullScreen: true });
}else { } else {
this.setState({ isFullScreen: false }); this.setState({ isFullScreen: false });
} }
} }

View File

@ -1,38 +1,33 @@
toggleFullScreen = () => { toggleFullScreen = () => {
let element = document.documentElement; let element = document.documentElement;
if (document.fullscreenEnabled if (document.fullscreenElement
|| document.mozFullScreenEnabled || document.webkitFullscreenElement
|| document.webkitFullscreenEnabled) { || document.mozFullScreenElement
|| document.msFullscreenElement) {
// If the page is already fullscreen, exit fullscreen if (document.exitFullscreen) {
if (document.fullscreenElement document.exitFullscreen();
|| document.webkitFullscreenElement } else if (document.mozCancelFullScreen) {
|| document.mozFullScreenElement document.mozCancelFullScreen();
|| document.msFullscreenElement) { } else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
if (document.exitFullscreen) { // If the page is not currently fullscreen, make fullscreen
document.exitFullscreen(); } else {
} else if (document.mozCancelFullScreen) { if (element.requestFullscreen) {
document.mozCancelFullScreen(); element.requestFullscreen();
} else if (document.webkitExitFullscreen) { } else if (element.mozRequestFullScreen) {
document.webkitExitFullscreen(); element.mozRequestFullScreen();
} } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
// If the page is not currently fullscreen, make fullscreen element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else { } else if (element.msRequestFullscreen) {
if (element.requestFullscreen) { element.msRequestFullscreen();
element.requestFullscreen(); }
} else if (element.mozRequestFullScreen) { }
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
}
}; };
export { export {