diff --git a/src/containers/preview-modal.jsx b/src/containers/preview-modal.jsx index a1a8a3c54979a98adf96e949c27f80732f8380ff..dd1ca6701000eef9a38828a763d09e55ee1be60f 100644 --- a/src/containers/preview-modal.jsx +++ b/src/containers/preview-modal.jsx @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import {connect} from 'react-redux'; +import tabletFullScreen from '../lib/tablet-full-screen'; + import PreviewModalComponent from '../components/preview-modal/preview-modal.jsx'; import BrowserModalComponent from '../components/browser-modal/browser-modal.jsx'; import supportedBrowser from '../lib/supported-browser'; @@ -27,6 +29,8 @@ class PreviewModal extends React.Component { } handleTryIt () { this.setState({previewing: true}); + // try to run in fullscreen mode on tablets. + tabletFullScreen(); this.props.onTryIt(); } handleCancel () { diff --git a/src/lib/tablet-full-screen.js b/src/lib/tablet-full-screen.js new file mode 100644 index 0000000000000000000000000000000000000000..483a5c700557e4570c79a6dd9e989beac0866a29 --- /dev/null +++ b/src/lib/tablet-full-screen.js @@ -0,0 +1,15 @@ +import bowser from 'bowser'; + +/** + * Helper method to request full screen in the browser when on a tablet. + */ +export default function () { + if (bowser.tablet) { + if ((bowser.webkit || bowser.blink) && document.documentElement.webkitRequestFullScreen) { + document.documentElement.webkitRequestFullScreen(); + } + if (bowser.gecko && document.documentElement.mozRequestFullScreen) { + document.documentElement.mozRequestFullScreen(); + } + } +}