From 56f1b80f242553deacfb419fcb93893950d6edb5 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Tue, 25 Sep 2018 09:52:44 -0400
Subject: [PATCH] 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 = ({
                                 </a>
                                 <div className="title">
                                     {editable ?
-
                                         <InplaceInput
                                             className="project-title"
                                             handleUpdate={onUpdate}
diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx
index bbd7a9490..7c8eac9e2 100644
--- a/src/views/preview/preview.jsx
+++ b/src/views/preview/preview.jsx
@@ -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;