From 41258678dad69877d17d4e1f9d9e0099f888f4e6 Mon Sep 17 00:00:00 2001 From: Nishit Suwal <81785002+NSUWAL123@users.noreply.github.com> Date: Fri, 22 Mar 2024 18:39:32 +0545 Subject: [PATCH] feat: handle geo orientation crash firefox & safari (#1381) * fix projectListMap: remove geolocation from homePage map * refactor projectListMap: remove old vectorLayer code * feat projectDetails: geolocationStatus add * fix geoLocation: add & remove geoLocation layer conditionally * fix mapControlComponent: change geolocation point to red if status on * fix projectDetails: set generateMbtiles btn to bottom for mobile screen * fix geolocation: zoom to current location on geolocation on * fix geolocation: show error if browser is firefox or safari & show only blue dot for them --- .../src/assets/images/LocationDot.png | Bin 0 -> 3185 bytes src/frontend/src/utilfunctions/Geolocation.ts | 99 +++++++++++------- src/frontend/src/views/ProjectDetailsV2.tsx | 2 +- 3 files changed, 63 insertions(+), 38 deletions(-) create mode 100644 src/frontend/src/assets/images/LocationDot.png diff --git a/src/frontend/src/assets/images/LocationDot.png b/src/frontend/src/assets/images/LocationDot.png new file mode 100644 index 0000000000000000000000000000000000000000..3555cf5a309b9b427ff8b4b0297247aa062b60f3 GIT binary patch literal 3185 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 Cs>omf literal 0 HcmV?d00001 diff --git a/src/frontend/src/utilfunctions/Geolocation.ts b/src/frontend/src/utilfunctions/Geolocation.ts index a35c4c6b7f..61bd473a24 100644 --- a/src/frontend/src/utilfunctions/Geolocation.ts +++ b/src/frontend/src/utilfunctions/Geolocation.ts @@ -1,4 +1,5 @@ import pngbluedot from '@/assets/images/png bluedot.png'; +import LocationDot from '@/assets/images/LocationDot.png'; import { Fill } from 'ol/style'; import VectorSource from 'ol/source/Vector'; import OLVectorLayer from 'ol/layer/Vector'; @@ -9,21 +10,34 @@ import { circular } from 'ol/geom/Polygon'; import { Style } from 'ol/style'; import { Icon } from 'ol/style'; import VectorLayer from 'ol/layer/Vector'; +import { CommonActions } from '@/store/slices/CommonSlice'; -const locationIconStyle = new Style({ - fill: new Fill({ - color: 'rgba(0, 0, 255, 0.2)', - }), - image: new Icon({ - src: pngbluedot, - scale: 0.09, - imgSize: [27, 55], - rotateWithView: true, - }), -}); - -export const Geolocation = (map, geolocationStatus) => { +export const Geolocation = (map, geolocationStatus, dispatch) => { if (!map) return; + + // check firefox or safari browser as it doesnt support browser's Sensor API + // @ts-ignore + const isFirefox = typeof InstallTrigger !== 'undefined'; + const isSafari = + // @ts-ignore + /constructor/i.test(window.HTMLElement) || + (function (p) { + return p.toString() === '[object SafariRemoteNotification]'; + // @ts-ignore + })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification)); + + const locationIconStyle = new Style({ + fill: new Fill({ + color: 'rgba(0, 0, 255, 0.2)', + }), + image: new Icon({ + src: isFirefox || isSafari ? LocationDot : pngbluedot, + scale: 0.09, + imgSize: [27, 55], + rotateWithView: true, + }), + }); + const source = new VectorSource(); const layer = new OLVectorLayer({ source: source, @@ -124,30 +138,41 @@ export const Geolocation = (map, geolocationStatus) => { locationIconStyle.getImage().setRotation((Math.PI / 180) * heading); } - // See the API specification at: https://w3c.github.io/orientation-sensor - // We use referenceFrame: 'screen' because the web page will rotate when - // the phone switches from portrait to landscape. - const sensor = new AbsoluteOrientationSensor({ - frequency: 60, - referenceFrame: 'screen', - }); - sensor.addEventListener('reading', (event) => { - layer.on('postrender', handleReading(sensor.quaternion)); - }); - // handleReading([0.509, -0.071, -0.19, 0.836]); - - Promise.all([ - navigator.permissions.query({ name: 'accelerometer' }), - navigator.permissions.query({ name: 'magnetometer' }), - navigator.permissions.query({ name: 'gyroscope' }), - ]).then((results) => { - if (results.every((result) => result.state === 'granted')) { - sensor.start(); - // stat.value = "Sensor started!"; - } else { - // stat.value = "No permissions to use AbsoluteOrientationSensor."; - } - }); + if (isFirefox || isSafari) { + dispatch( + CommonActions.SetSnackBar({ + open: true, + message: "Unable to handle device orientation. Your browser doesn't support device orientation sensors.", + variant: 'error', + duration: 4000, + }), + ); + } else { + // See the API specification at: https://w3c.github.io/orientation-sensor + // We use referenceFrame: 'screen' because the web page will rotate when + // the phone switches from portrait to landscape. + const sensor = new AbsoluteOrientationSensor({ + frequency: 60, + referenceFrame: 'screen', + }); + sensor.addEventListener('reading', (event) => { + layer.on('postrender', handleReading(sensor.quaternion)); + }); + // handleReading([0.509, -0.071, -0.19, 0.836]); + + Promise.all([ + navigator.permissions.query({ name: 'accelerometer' }), + navigator.permissions.query({ name: 'magnetometer' }), + navigator.permissions.query({ name: 'gyroscope' }), + ]).then((results) => { + if (results.every((result) => result.state === 'granted')) { + sensor.start(); + // stat.value = "Sensor started!"; + } else { + // stat.value = "No permissions to use AbsoluteOrientationSensor."; + } + }); + } } // remove the geolocation layer if geolocationStatus turned off diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx index 86b333f300..447cbba321 100644 --- a/src/frontend/src/views/ProjectDetailsV2.tsx +++ b/src/frontend/src/views/ProjectDetailsV2.tsx @@ -111,7 +111,7 @@ const Home = () => { useEffect(() => { if (!map) return; - Geolocation(map, geolocationStatus); + Geolocation(map, geolocationStatus, dispatch); }, [geolocationStatus]); const { y } = OnScroll(map, windowSize.width);