scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 15:47:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

if in landscape format on mobile, switch to fullscreen mode

Browse source
This commit is contained in:
Linda 2018-09-25 09:52:44 -04:00
parent 337a9e2f30
commit 56f1b80f24
2 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/views/preview/presentation.jsx
View file

@ -94,7 +94,6 @@ const PreviewPresentation = ({
</a>
<div className="title">
{editable ?
<InplaceInput
className="project-title"
handleUpdate={onUpdate}

28
src/views/preview/preview.jsx
View file

@ -23,9 +23,13 @@ const sessionActions = require('../../redux/session.js');
const navigationActions = require('../../redux/navigation.js');
const previewActions = require('../../redux/preview.js');
const frameless = require('../../lib/frameless');
const GUI = require('scratch-gui');
const IntlGUI = injectIntl(GUI.default);
const isMobileDevice = () => screen.height <= frameless.mobile || screen.width <= frameless.mobile;
class Preview extends React.Component {
constructor (props) {
super(props);
@ -35,6 +39,7 @@ class Preview extends React.Component {
'handleFavoriteToggle',
'handleLoadMore',
'handleLoveToggle',
'handleOrientationChange',
'handlePopState',
'handleReportClick',
'handleReportClose',
@ -63,6 +68,14 @@ class Preview extends React.Component {
};
this.getExtensions(this.state.projectId);
this.addEventListeners();
/* In the beginning, if user is on mobile and landscape, go to fullscreen */
if (this.props.playerMode && isMobileDevice()) {
if (screen.orientation.type === 'landscape-primary') {
this.props.setFullScreen(true);
} else {
this.props.setFullScreen(false);
}
}
}
componentDidUpdate (prevProps) {
if (this.props.sessionStatus !== prevProps.sessionStatus &&
@ -106,9 +119,11 @@ class Preview extends React.Component {
}
addEventListeners () {
window.addEventListener('popstate', this.handlePopState);
window.addEventListener('orientationchange', this.handleOrientationChange);
}
removeEventListeners () {
window.removeEventListener('popstate', this.handlePopState);
window.addEventListener('orientationchange', this.handleOrientationChange);
}
getExtensions (projectId) {
storage
@ -157,6 +172,19 @@ class Preview extends React.Component {
handleReportSubmit (formData) {
this.props.reportProject(this.state.projectId, formData);
}
handleOrientationChange () {
/*
* If the user is on a mobile device, switching to
* landscape format should make the fullscreen mode active
*/
if (this.props.playerMode && isMobileDevice()) {
if (screen.orientation.type === 'landscape-primary') {
this.props.setFullScreen(true);
} else {
this.props.setFullScreen(false);
}
}
}
handlePopState () {
const path = window.location.pathname.toLowerCase();
const playerMode = path.indexOf('editor') === -1;