scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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> </a>
<div className="title"> <div className="title">
{editable ? {editable ?
<InplaceInput <InplaceInput
className="project-title" className="project-title"
handleUpdate={onUpdate} 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 navigationActions = require('../../redux/navigation.js');
const previewActions = require('../../redux/preview.js'); const previewActions = require('../../redux/preview.js');
const frameless = require('../../lib/frameless');
const GUI = require('scratch-gui'); const GUI = require('scratch-gui');
const IntlGUI = injectIntl(GUI.default); const IntlGUI = injectIntl(GUI.default);
const isMobileDevice = () => screen.height <= frameless.mobile || screen.width <= frameless.mobile;
class Preview extends React.Component { class Preview extends React.Component {
constructor (props) { constructor (props) {
super(props); super(props);
@ -35,6 +39,7 @@ class Preview extends React.Component {
'handleFavoriteToggle', 'handleFavoriteToggle',
'handleLoadMore', 'handleLoadMore',
'handleLoveToggle', 'handleLoveToggle',
'handleOrientationChange',
'handlePopState', 'handlePopState',
'handleReportClick', 'handleReportClick',
'handleReportClose', 'handleReportClose',
@ -63,6 +68,14 @@ class Preview extends React.Component {
}; };
this.getExtensions(this.state.projectId); this.getExtensions(this.state.projectId);
this.addEventListeners(); 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) { componentDidUpdate (prevProps) {
if (this.props.sessionStatus !== prevProps.sessionStatus && if (this.props.sessionStatus !== prevProps.sessionStatus &&
@ -106,9 +119,11 @@ class Preview extends React.Component {
} }
addEventListeners () { addEventListeners () {
window.addEventListener('popstate', this.handlePopState); window.addEventListener('popstate', this.handlePopState);
window.addEventListener('orientationchange', this.handleOrientationChange);
} }
removeEventListeners () { removeEventListeners () {
window.removeEventListener('popstate', this.handlePopState); window.removeEventListener('popstate', this.handlePopState);
window.addEventListener('orientationchange', this.handleOrientationChange);
} }
getExtensions (projectId) { getExtensions (projectId) {
storage storage
@ -157,6 +172,19 @@ class Preview extends React.Component {
handleReportSubmit (formData) { handleReportSubmit (formData) {
this.props.reportProject(this.state.projectId, 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 () { handlePopState () {
const path = window.location.pathname.toLowerCase(); const path = window.location.pathname.toLowerCase();
const playerMode = path.indexOf('editor') === -1; const playerMode = path.indexOf('editor') === -1;