From 56f1b80f242553deacfb419fcb93893950d6edb5 Mon Sep 17 00:00:00 2001 From: Linda Date: Tue, 25 Sep 2018 09:52:44 -0400 Subject: [PATCH 1/3] if in landscape format on mobile, switch to fullscreen mode --- src/views/preview/presentation.jsx | 1 - src/views/preview/preview.jsx | 28 ++++++++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index 7c32ad025..15be06c9e 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -94,7 +94,6 @@ const PreviewPresentation = ({
{editable ? - 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; From f1738ca38425982a39381038392c863f29e13b83 Mon Sep 17 00:00:00 2001 From: Linda Date: Mon, 1 Oct 2018 09:52:50 -0400 Subject: [PATCH 2/3] improved the code stylewise --- src/views/preview/preview.jsx | 45 +++++++++++++++-------------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx index 7c8eac9e2..eb6ed476f 100644 --- a/src/views/preview/preview.jsx +++ b/src/views/preview/preview.jsx @@ -28,8 +28,6 @@ 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); @@ -39,7 +37,6 @@ class Preview extends React.Component { 'handleFavoriteToggle', 'handleLoadMore', 'handleLoveToggle', - 'handleOrientationChange', 'handlePopState', 'handleReportClick', 'handleReportClose', @@ -51,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); @@ -69,13 +67,7 @@ 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); - } - } + this.setScreenFromOrientation(); } componentDidUpdate (prevProps) { if (this.props.sessionStatus !== prevProps.sessionStatus && @@ -119,11 +111,25 @@ class Preview extends React.Component { } addEventListeners () { window.addEventListener('popstate', this.handlePopState); - window.addEventListener('orientationchange', this.handleOrientationChange); + window.addEventListener('orientationchange', this.setScreenFromOrientation); } removeEventListeners () { window.removeEventListener('popstate', this.handlePopState); - window.addEventListener('orientationchange', this.handleOrientationChange); + window.addEventListener('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) { + if (screen.orientation.type === 'landscape-primary') { + this.props.setFullScreen(true); + } else { + this.props.setFullScreen(false); + } + } } getExtensions (projectId) { storage @@ -172,19 +178,6 @@ 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; From f55dd02665b0bd8ee727cfcdcd81f1c9ce62febf Mon Sep 17 00:00:00 2001 From: Linda Date: Tue, 2 Oct 2018 15:42:29 -0400 Subject: [PATCH 3/3] never mind screen.orientation --- src/views/preview/preview.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx index 441ea005f..b8f1277d5 100644 --- a/src/views/preview/preview.jsx +++ b/src/views/preview/preview.jsx @@ -124,8 +124,7 @@ class Preview extends React.Component { */ const isMobileDevice = screen.height <= frameless.mobile || screen.width <= frameless.mobile; if (this.props.playerMode && isMobileDevice) { - const isLandscape = (screen.orientation.type && screen.orientation.type === 'landscape-primary') || - screen.height < screen.width; + const isLandscape = screen.height < screen.width; if (isLandscape) { this.props.setFullScreen(true); } else {