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

Merge pull request #2105 from LiFaytheGoblin/responsive-project-page/landscape-player

Browse source 
If in landscape format on mobile, switch to fullscreen mode
This commit is contained in:
Linda 2018-10-02 16:38:57 -04:00 committed by GitHub
commit d0257ae43d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -23,6 +23,8 @@ 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);
@ -46,7 +48,8 @@ class Preview extends React.Component {
'handleUpdate',
'initCounts',
'pushHistory',
'renderLogin'
'renderLogin',
'setScreenFromOrientation'
]);
const pathname = window.location.pathname.toLowerCase();
const parts = pathname.split('/').filter(Boolean);
@ -63,6 +66,8 @@ 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 */
this.setScreenFromOrientation();
}
componentDidUpdate (prevProps) {
if (this.props.sessionStatus !== prevProps.sessionStatus &&
@ -106,9 +111,26 @@ class Preview extends React.Component {
}
addEventListeners () {
window.addEventListener('popstate', this.handlePopState);
window.addEventListener('orientationchange', this.setScreenFromOrientation);
}
removeEventListeners () {
window.removeEventListener('popstate', this.handlePopState);
window.removeEventListener('orientationchange', this.setScreenFromOrientation);
}
setScreenFromOrientation () {
/*
* If the user is on a mobile device, switching to
* landscape format should make the fullscreen mode active
*/
const isMobileDevice = screen.height <= frameless.mobile || screen.width <= frameless.mobile;
if (this.props.playerMode && isMobileDevice) {
const isLandscape = screen.height < screen.width;
if (isLandscape) {
this.props.setFullScreen(true);
} else {
this.props.setFullScreen(false);
}
}
}
getExtensions (projectId) {
storage