Orientation fix for mobile #38
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,29 @@ | ||
| import React, { Component } from "react"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const isMobileDevice = () => | ||
| typeof window.orientation !== "undefined" || | ||
| navigator.userAgent.indexOf("IEMobile") !== -1; | ||
|
|
||
| const isLandscape = () => Math.abs(window.orientation) === 90; | ||
|
|
||
| const orientationType = () => { | ||
| if (isMobileDevice()) { | ||
| return isLandscape() ? "landscape-primary" : "portrait"; | ||
| } else { | ||
| return window.screen.orientation.type; | ||
|
There was a problem hiding this comment. We should replace There was a problem hiding this comment. What about this? https://polyfill.io/v2/docs/features/#screen_orientation |
||
| } | ||
| }; | ||
|
|
||
| class Orientation extends Component { | ||
| state = { | ||
| type: orientationType() | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| window.addEventListener("orientationchange", () => { | ||
| this.setState({ type: orientationType() }); | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm afraid that
window.orientationis not going to be our best friend since it's deprecated.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh wow I wasn't aware of this, I'll look for an alternative approach 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would this work? 🤔
https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should re-think the solution because the device orientation stuff is kind of experimental. Basically, the idea behind the feature is to prevent the game to be rendered in small screens. We can simply do that based on the screen width and use the resize event to swap components as we currently do with the
Orientationcomponent. What do you think?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👌 makes sense, I can make those changes. Do you have a minimum width in mind?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's show the
Gamecomponent at minimum 542px width. Below we can just show theRotateInfocomponent. Please, remember to listen to the resize event and also perform the check on mounting phase. Test your code and include yourself into the contributor's list :) Thanks again for the collaboration!There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any advance on this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yo, I had a lot going on at work 😅 I'm almost done, will definitely push this week.