Client: Fixed screen orientation angle
This commit is contained in:
parent
42f28bcdd2
commit
166d612e15
@ -61,8 +61,14 @@ const StyledContainer = styled.div`
|
||||
`;
|
||||
|
||||
const Layout = (props) => {
|
||||
const { children, isTabletView, setIsTabletView, setWindowWidth, isFrame } =
|
||||
props;
|
||||
const {
|
||||
children,
|
||||
isTabletView,
|
||||
setIsTabletView,
|
||||
setWindowWidth,
|
||||
setWindowAngle,
|
||||
isFrame,
|
||||
} = props;
|
||||
|
||||
const [contentHeight, setContentHeight] = useState();
|
||||
const [isPortrait, setIsPortrait] = useState();
|
||||
@ -97,12 +103,23 @@ const Layout = (props) => {
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
if (isMobile || isTabletView || !isFrame) {
|
||||
window.addEventListener("orientationchange", onOrientationChange);
|
||||
if (window.screen?.orientation) {
|
||||
window.screen.orientation.addEventListener(
|
||||
"change",
|
||||
onOrientationChange,
|
||||
);
|
||||
} else {
|
||||
window.addEventListener("orientationchange", onOrientationChange);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", onResize);
|
||||
window.removeEventListener("orientationchange", onOrientationChange);
|
||||
window.screen?.orientation?.removeEventListener(
|
||||
"change",
|
||||
onOrientationChange,
|
||||
);
|
||||
};
|
||||
}, [isTabletView]);
|
||||
|
||||
@ -128,6 +145,9 @@ const Layout = (props) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const angle = window.screen?.orientation?.angle ?? window.orientation ?? 0;
|
||||
|
||||
setWindowAngle(angle);
|
||||
setWindowWidth(window.innerWidth);
|
||||
};
|
||||
|
||||
@ -149,12 +169,18 @@ Layout.propTypes = {
|
||||
};
|
||||
|
||||
export default inject(({ settingsStore }) => {
|
||||
const { isTabletView, setIsTabletView, setWindowWidth, isFrame } =
|
||||
settingsStore;
|
||||
return {
|
||||
const {
|
||||
isTabletView,
|
||||
setIsTabletView,
|
||||
setWindowWidth,
|
||||
isFrame,
|
||||
setWindowAngle,
|
||||
} = settingsStore;
|
||||
return {
|
||||
isTabletView,
|
||||
setIsTabletView,
|
||||
setWindowWidth,
|
||||
setWindowAngle,
|
||||
isFrame,
|
||||
};
|
||||
})(observer(Layout));
|
||||
|
@ -316,6 +316,8 @@ class SettingsStore {
|
||||
|
||||
windowWidth = window.innerWidth;
|
||||
|
||||
windowAngle = window.screen?.orientation?.angle ?? window.orientation ?? 0;
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
@ -1085,6 +1087,10 @@ class SettingsStore {
|
||||
}
|
||||
};
|
||||
|
||||
setWindowAngle = (angle: number) => {
|
||||
this.windowAngle = angle;
|
||||
};
|
||||
|
||||
setWindowWidth = (width: number) => {
|
||||
if (width <= deviceSize.mobile && this.windowWidth <= deviceSize.mobile)
|
||||
return;
|
||||
@ -1102,7 +1108,8 @@ class SettingsStore {
|
||||
}
|
||||
|
||||
get deviceType() {
|
||||
const angleByRadians = (Math.PI / 180) * window.screen.orientation.angle;
|
||||
const angleByRadians = (Math.PI / 180) * this.windowAngle;
|
||||
|
||||
const width = Math.abs(
|
||||
Math.round(
|
||||
Math.sin(angleByRadians) * window.innerHeight +
|
||||
|
@ -53,7 +53,9 @@ export const isMobile = (width?: number) => {
|
||||
};
|
||||
|
||||
export const isMobileDevice = () => {
|
||||
const angleByRadians = (Math.PI / 180) * window.screen.orientation.angle;
|
||||
const angleByRadians =
|
||||
(Math.PI / 180) *
|
||||
(window.screen?.orientation?.angle ?? window.orientation ?? 0);
|
||||
const width = Math.abs(
|
||||
Math.round(
|
||||
Math.sin(angleByRadians) * window.innerHeight +
|
||||
|
Loading…
Reference in New Issue
Block a user