Merge pull request #151 from Genymobile/dev/player-87-86-fix-altitude-autoset-and-position-slider-at-start

[PLAYER-87][PLAYER-86] fix issue post 4.2.0 (altitude autoset and slider component position at start)

Author: jparez

src/plugins/GPS.js

@@ -565,7 +565,7 @@ module.exports = class GPS extends OverlayPlugin {
             // Update map
             if (this.map) {
                 this.clearMarkers();
-                this.addMapMarker(position.coords.latitude, position.coords.longitude);
+                this.addMapMarker(position.coords.latitude, position.coords.longitude, true);
                 this.map.setCenter({lat: position.coords.latitude, lng: position.coords.longitude});
             }
         } catch (error) {
@@ -597,6 +597,8 @@ module.exports = class GPS extends OverlayPlugin {
                     lng: info.longitude,
                 },
                 zoom: this.minimumZoomLevel,
+                streetViewControl: false,
+                mapTypeControl: false,
             });
 
             // Add initial marker for selection from form
@@ -606,7 +608,7 @@ module.exports = class GPS extends OverlayPlugin {
             this.map.addListener('click', (event) => {
                 this.clearMarkers();
                 // Add new marker / capture coords for click location
-                this.addMapMarker(event.latLng.lat(), event.latLng.lng());
+                this.addMapMarker(event.latLng.lat(), event.latLng.lng(), true);
             });
         }
     }
@@ -616,8 +618,9 @@ module.exports = class GPS extends OverlayPlugin {
      *
      * @param {number} lat Latitude of the marker.
      * @param {number} lng Longitude of the marker.
+     * @param {boolean} setAltitudeAuto Retrieve and set altitude from gmaps.
      */
-    addMapMarker(lat, lng) {
+    addMapMarker(lat, lng, setAltitudeAuto=false) {
         if (typeof google === 'undefined') {
             return;
         }
@@ -646,7 +649,7 @@ module.exports = class GPS extends OverlayPlugin {
         }
 
         // Get elevation if service is available
-        if (this.elevationService) {
+        if (this.elevationService && setAltitudeAuto) {
             const location = new google.maps.LatLng(numLat, numLng);
             this.elevationService.getElevationForLocations(
                 {

src/plugins/util/components.js

@@ -112,7 +112,18 @@ const slider = (() => {
 
         // Update UI based on the current slider value
         const updateUI = () => {
-            requestAnimationFrame(() => {
+            requestAnimationFrame(async() => {
+                // if CSS isn't ready cursorWidth & sliderWidth haven't size, so we loop to waiting CSS ready
+                const start = performance.now();
+                while (sliderCursor.offsetWidth === 0 || sliderDiv.offsetWidth === 0) {
+                    // After 10s we stop the loop
+                    if (performance.now() - start > 5000) {
+                        log.warn('Timeout: CSS not applied');
+                        break;
+                    }
+                    await new Promise((resolve) => setTimeout(resolve, 200));
+                }
+
                 const val = parseFloat(input.value);
                 const percentage = ((val - min) / (max - min)) * 100;
                 const cursorWidth = sliderCursor.offsetWidth;
@@ -124,7 +135,7 @@ const slider = (() => {
                 progressBar.style.width = `${percentage}%`;
                 sliderCursor.style.left = adjustedPercentage;
 
-                const calc = ((percentage / 100) * 16 - 8) * -1;
+                const calc = ((percentage / 100) * sliderCursor.offsetWidth - (sliderCursor.offsetWidth / 2)) * -1;
                 sliderCursor.style.transform = `translate(${calc}px, -50%)`;
             });
         };

src/scss/components/_dropdown.scss

@@ -87,7 +87,9 @@
             }
 
             .dropdown-item {
-                padding: 16px 20px;
+                height: 40px;
+                max-height: 40px;
+                padding: 4px 20px;
                 cursor: pointer;
                 display: flex;
                 justify-content: space-between;