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;