@jacques_gordon/expo-mapbox-navigation 2.1.2 → 2.1.3

package/android/src/main/java/expo/modules/mapboxnavigation/ExpoMapboxNavigationView.kt

@@ -4,19 +4,25 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.Resources
 import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
 import android.util.Log
 import android.view.Gravity
 import android.view.View
 import android.widget.FrameLayout
+import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.TextView
 import com.mapbox.api.directions.v5.models.RouteOptions
 import com.mapbox.common.location.Location
 import com.mapbox.geojson.Point
 import com.mapbox.maps.EdgeInsets
+import com.mapbox.maps.ImageHolder
 import com.mapbox.maps.MapView
+import com.mapbox.maps.plugin.LocationPuck2D
 import com.mapbox.maps.plugin.animation.camera
 import com.mapbox.maps.plugin.locationcomponent.location
+import com.mapbox.maps.plugin.locationcomponent.OnIndicatorBearingChangedListener
+import com.mapbox.maps.plugin.locationcomponent.OnIndicatorPositionChangedListener
 import com.mapbox.navigation.base.TimeFormat
 import com.mapbox.navigation.base.extensions.applyDefaultNavigationOptions
 import com.mapbox.navigation.base.formatter.DistanceFormatterOptions
@@ -84,6 +90,12 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private var tvDistance: TextView? = null
     private var etaBar: LinearLayout? = null
 
+    // ── Side action buttons (mute, overview, recenter) ────────────────────────
+    private var btnMute: TextView? = null
+    private var btnOverview: TextView? = null
+    private var btnRecenter: TextView? = null
+    private var sideButtons: LinearLayout? = null
+
     // ── Navigation APIs ───────────────────────────────────────────────────────
     private lateinit var navigationCamera: NavigationCamera
     private lateinit var viewportDataSource: MapboxNavigationViewportDataSource
@@ -96,28 +108,34 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private lateinit var routeArrowView: MapboxRouteArrowView
     private val navigationLocationProvider = NavigationLocationProvider()
     private var mapboxNavigation: MapboxNavigation? = null
-    private var isNightMode = false
 
-    // ── FIX: Track whether first location has been received ───────────────────
-    // Without this, camera never enters following mode on first GPS fix
+    // ── State ─────────────────────────────────────────────────────────────────
+    private var isNightMode = false
+    private var isMuted = false
+    private var isOverviewMode = false
     private var firstLocationReceived = false
 
-    // ── Viewport padding (from official TurnByTurnExperienceActivity) ─────────
-    private val pixelDensity = Resources.getSystem().displayMetrics.density
+    // ── Pixel density ─────────────────────────────────────────────────────────
+    private val dp = context.resources.displayMetrics.density
+
+    // ── Viewport padding (Waze-style: vehicle at ~30% from bottom) ────────────
+    // top=180dp → room for maneuver banner
+    // bottom=300dp → pushes vehicle UP toward 30% from bottom (Waze style)
+    // Without large bottom padding, vehicle sits at screen center
     private val followingPadding by lazy {
         EdgeInsets(
-            180.0 * pixelDensity,  // top — room for maneuver banner
-            40.0 * pixelDensity,
-            150.0 * pixelDensity,  // bottom — room for ETA bar
-            40.0 * pixelDensity
+            180.0 * dp,   // top (maneuver banner height)
+            40.0 * dp,    // left
+            300.0 * dp,   // bottom — large value pushes vehicle up like Waze
+            40.0 * dp     // right
         )
     }
     private val overviewPadding by lazy {
         EdgeInsets(
-            140.0 * pixelDensity,
-            40.0 * pixelDensity,
-            120.0 * pixelDensity,
-            40.0 * pixelDensity
+            120.0 * dp,
+            40.0 * dp,
+            120.0 * dp,
+            40.0 * dp
         )
     }
 
@@ -143,22 +161,20 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Build UI
+    // Build Waze-style UI
     // ─────────────────────────────────────────────────────────────────────────
     private fun buildUI() {
-        val dp = context.resources.displayMetrics.density
         val root = FrameLayout(context).apply {
             layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
         }
 
-        // Full screen map
+        // Full-screen map
         root.addView(mapView, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.MATCH_PARENT
         ))
 
         // ── ManeuverView — top banner ──────────────────────────────────────────
-        // extends ConstraintLayout → must cast to View for addView()
         val mv = MapboxManeuverView(context)
         root.addView(mv as View, FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
@@ -167,24 +183,60 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         mv.visibility = View.INVISIBLE
         maneuverView = mv
 
-        // ── SpeedInfoView — bottom-left ────────────────────────────────────────
-        // Shows posted speed limit + current vehicle speed
+        // ── SpeedInfoView — bottom-left, above ETA bar ────────────────────────
         val siv = MapboxSpeedInfoView(context)
         root.addView(siv as View, FrameLayout.LayoutParams(
-            FrameLayout.LayoutParams.WRAP_CONTENT,
-            FrameLayout.LayoutParams.WRAP_CONTENT
+            (72 * dp).toInt(),
+            (72 * dp).toInt()
         ).also {
             it.gravity = Gravity.BOTTOM or Gravity.START
-            // Position above the ETA bar (80dp) + margin
-            it.setMargins((16 * dp).toInt(), 0, 0, (96 * dp).toInt())
+            it.setMargins((12 * dp).toInt(), 0, 0, (88 * dp).toInt())
         })
         siv.visibility = View.GONE
         speedInfoView = siv
 
+        // ── Side action buttons (right side, Waze-style) ──────────────────────
+        val sideCol = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            gravity = Gravity.CENTER_HORIZONTAL
+            visibility = View.INVISIBLE
+        }
+        root.addView(sideCol, FrameLayout.LayoutParams(
+            FrameLayout.LayoutParams.WRAP_CONTENT,
+            FrameLayout.LayoutParams.WRAP_CONTENT
+        ).also {
+            it.gravity = Gravity.END or Gravity.BOTTOM
+            it.setMargins(0, 0, (12 * dp).toInt(), (96 * dp).toInt())
+        })
+        sideButtons = sideCol
+
+        // Mute button
+        val muteBtn = makeCircleButton("🔊")
+        muteBtn.setOnClickListener { toggleMute() }
+        sideCol.addView(muteBtn, circleButtonParams())
+        btnMute = muteBtn
+
+        sideCol.addView(View(context), LinearLayout.LayoutParams(1, (10 * dp).toInt()))
+
+        // Overview button
+        val overviewBtn = makeCircleButton("⊕")
+        overviewBtn.setOnClickListener { toggleOverview() }
+        sideCol.addView(overviewBtn, circleButtonParams())
+        btnOverview = overviewBtn
+
+        sideCol.addView(View(context), LinearLayout.LayoutParams(1, (10 * dp).toInt()))
+
+        // Recenter button (shown only in overview mode)
+        val recenterBtn = makeCircleButton("◎")
+        recenterBtn.setOnClickListener { recenterCamera() }
+        recenterBtn.visibility = View.GONE
+        sideCol.addView(recenterBtn, circleButtonParams())
+        btnRecenter = recenterBtn
+
         // ── ETA bottom bar ─────────────────────────────────────────────────────
         val bar = LinearLayout(context).apply {
             orientation = LinearLayout.HORIZONTAL
-            setBackgroundColor(Color.parseColor("#1E2433"))  // dark nav style
+            setBackgroundColor(Color.parseColor("#1E2433"))
             elevation = 8 * dp
             visibility = View.INVISIBLE
             gravity = Gravity.CENTER_VERTICAL
@@ -204,9 +256,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             setTextColor(Color.WHITE)
             typeface = android.graphics.Typeface.DEFAULT_BOLD
         }
-        bar.addView(etaTime, LinearLayout.LayoutParams(
-            0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f
-        ))
+        bar.addView(etaTime, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
         tvEtaTime = etaTime
 
         // Duration + distance (center)
@@ -227,9 +277,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         }
         center.addView(dur)
         center.addView(dist)
-        bar.addView(center, LinearLayout.LayoutParams(
-            0, LinearLayout.LayoutParams.WRAP_CONTENT, 2f
-        ))
+        bar.addView(center, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 2f))
         tvDuration = dur
         tvDistance = dist
 
@@ -241,21 +289,39 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             gravity = Gravity.END or Gravity.CENTER_VERTICAL
             setOnClickListener { cancelNavigation() }
         }
-        bar.addView(cancelBtn, LinearLayout.LayoutParams(
-            0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f
-        ))
+        bar.addView(cancelBtn, LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f))
         etaBar = bar
 
-        // ── TripProgressView — hidden native view (used for render() API) ──────
-        // FIX: was created but never added to root — now added but invisible
+        // TripProgressView — 1×1 hidden (required for render() API)
         val tpv = MapboxTripProgressView(context)
-        root.addView(tpv as View, FrameLayout.LayoutParams(1, 1))  // 1x1 hidden
+        root.addView(tpv as View, FrameLayout.LayoutParams(1, 1))
         tpv.visibility = View.GONE
         tripProgressView = tpv
 
         addView(root)
     }
 
+    // Helper: creates a white circle button (Waze style)
+    private fun makeCircleButton(text: String): TextView {
+        return TextView(context).apply {
+            this.text = text
+            textSize = 20f
+            gravity = Gravity.CENTER
+            setTextColor(Color.BLACK)
+            background = GradientDrawable().apply {
+                shape = GradientDrawable.OVAL
+                setColor(Color.WHITE)
+                // Drop shadow via elevation
+            }
+            elevation = 6 * dp
+        }
+    }
+
+    private fun circleButtonParams(): LinearLayout.LayoutParams {
+        val size = (52 * dp).toInt()
+        return LinearLayout.LayoutParams(size, size)
+    }
+
     // ─────────────────────────────────────────────────────────────────────────
     // Init APIs
     // ─────────────────────────────────────────────────────────────────────────
@@ -297,11 +363,8 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
         mapView.mapboxMap.loadStyle(mapStyle ?: getAutoStyle()) { style ->
             routeLineView.initializeLayers(style)
 
-            // Camera viewport data source
+            // Camera viewport
             viewportDataSource = MapboxNavigationViewportDataSource(mapView.mapboxMap)
-
-            // FIX: Set padding BEFORE creating NavigationCamera
-            // Without this, the camera doesn't account for the maneuver banner and ETA bar
             viewportDataSource.followingPadding = followingPadding
             viewportDataSource.overviewPadding = overviewPadding
 
@@ -311,10 +374,24 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                 viewportDataSource
             )
 
-            // Location puck
+            // ── Location puck — Waze-style arrow ─────────────────────────────
+            // FIX: use mapbox_navigation_puck_icon (built-in arrow)
+            // + PuckBearing.COURSE to orient it in direction of travel
             mapView.location.apply {
                 setLocationProvider(navigationLocationProvider)
-                enabled = true
+                updateSettings {
+                    // Built-in navigation arrow (chevron) from Nav SDK
+                    locationPuck = LocationPuck2D(
+                        bearingImage = ImageHolder.from(
+                            com.mapbox.navigation.R.drawable.mapbox_navigation_puck_icon
+                        )
+                    )
+                    // COURSE = direction of movement (not compass heading)
+                    puckBearingEnabled = true
+                    enabled = true
+                }
+                // Must set puckBearing separately — confirmed from migration guide
+                puckBearing = com.mapbox.maps.plugin.PuckBearing.COURSE
             }
 
             registerObservers()
@@ -327,7 +404,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private fun registerObservers() {
         val nav = mapboxNavigation ?: return
 
-        // ── Routes observer ───────────────────────────────────────────────────
+        // Routes observer
         nav.registerRoutesObserver(object : RoutesObserver {
             override fun onRoutesChanged(result: RoutesUpdatedResult) {
                 if (result.navigationRoutes.isNotEmpty()) {
@@ -338,12 +415,9 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                     }
                     viewportDataSource.onRouteChanged(result.navigationRoutes.first())
                     viewportDataSource.evaluate()
-
-                    // FIX: transition to following mode when route is set
-                    // This triggers the camera to zoom/pitch/center correctly
+                    isOverviewMode = false
                     safeCameraFollowing()
                     showUI()
-
                     onRoutesReady(mapOf(
                         "routeCount" to result.navigationRoutes.size,
                         "distanceMeters" to (result.navigationRoutes.first().directionsRoute.distance() ?: 0.0),
@@ -363,13 +437,12 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             }
         })
 
-        // ── Route progress observer ───────────────────────────────────────────
+        // Route progress observer
         nav.registerRouteProgressObserver(RouteProgressObserver { routeProgress ->
-            // Update viewport with progress (camera follows route progress)
             viewportDataSource.onRouteProgressChanged(routeProgress)
             viewportDataSource.evaluate()
 
-            // Draw maneuver arrow
+            // Maneuver arrow on map
             mapView.mapboxMap.style?.let { style ->
                 val arrowResult = routeArrowApi.addUpcomingManeuverArrow(routeProgress)
                 routeArrowView.renderManeuverUpdate(style, arrowResult)
@@ -378,10 +451,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             // Maneuver banner
             val maneuvers = maneuverApi.getManeuvers(routeProgress)
             maneuvers.fold(
-                { error ->
-                    Log.w(TAG, "Maneuver error: ${error.errorMessage}")
-                    Unit
-                },
+                { error -> Log.w(TAG, "Maneuver error: ${error.errorMessage}"); Unit },
                 { _ ->
                     maneuverView?.visibility = View.VISIBLE
                     maneuverView?.renderManeuvers(maneuvers)
@@ -409,32 +479,27 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             ))
         })
 
-        // ── Location observer ─────────────────────────────────────────────────
+        // Location observer
         nav.registerLocationObserver(object : LocationObserver {
             override fun onNewRawLocation(rawLocation: Location) {}
-
             override fun onNewLocationMatcherResult(result: LocationMatcherResult) {
                 val loc = result.enhancedLocation
 
-                // Update location puck position
                 navigationLocationProvider.changePosition(
                     location = loc,
                     keyPoints = result.keyPoints,
                 )
 
-                // FIX: Update viewport data source with location AND bearing
-                // This is what drives the camera to follow the vehicle's direction
                 viewportDataSource.onLocationChanged(loc)
                 viewportDataSource.evaluate()
 
-                // FIX: On first location fix, immediately enter following mode
-                // This ensures the camera centers on the user as soon as GPS is available
+                // First GPS fix → enter following mode
                 if (!firstLocationReceived) {
                     firstLocationReceived = true
                     safeCameraFollowing()
                 }
 
-                // ── Speed limit display ────────────────────────────────────────
+                // Speed limit display
                 val fmtOptions = DistanceFormatterOptions.Builder(context).build()
                 val speedInfo = speedInfoApi.updatePostedAndCurrentSpeed(result, fmtOptions)
                 if (speedInfo != null) {
@@ -450,11 +515,45 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // ETA bar update
-    // Fields confirmed from TripProgressUpdateValue docs:
-    //   estimatedTimeToArrival: Long — Unix timestamp ms
-    //   totalTimeRemaining: Double — seconds
-    //   distanceRemaining: Double — metres
+    // Button actions
+    // ─────────────────────────────────────────────────────────────────────────
+
+    // Toggle mute voice guidance
+    private fun toggleMute() {
+        isMuted = !isMuted
+        btnMute?.text = if (isMuted) "🔇" else "🔊"
+        btnMute?.setTextColor(if (isMuted) Color.parseColor("#FF4444") else Color.BLACK)
+        // Actual audio muting handled by the voice instruction observer in the app
+        // We expose the state via event so the RN layer can mute TTS
+        onNavigationCancelled(mapOf("type" to "mute", "muted" to isMuted))
+    }
+
+    // Toggle overview / following mode
+    private fun toggleOverview() {
+        if (isOverviewMode) {
+            recenterCamera()
+        } else {
+            isOverviewMode = true
+            btnOverview?.text = "◉"
+            btnRecenter?.visibility = View.VISIBLE
+            try {
+                navigationCamera.requestNavigationCameraToOverview()
+            } catch (e: Exception) {
+                Log.e(TAG, "Camera overview error: ${e.message}")
+            }
+        }
+    }
+
+    // Recenter camera to vehicle (following mode)
+    private fun recenterCamera() {
+        isOverviewMode = false
+        btnOverview?.text = "⊕"
+        btnRecenter?.visibility = View.GONE
+        safeCameraFollowing()
+    }
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // ETA bar
     // ─────────────────────────────────────────────────────────────────────────
     private fun updateEtaBar(
         estimatedTimeToArrivalMs: Long,
@@ -483,7 +582,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Day / Night auto switch
+    // Day / Night
     // ─────────────────────────────────────────────────────────────────────────
     private fun getAutoStyle(): String {
         val hour = Calendar.getInstance().get(Calendar.HOUR_OF_DAY)
@@ -509,8 +608,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Camera following — safe wrapper (issue #43)
-    // FIX: maxDuration(0) = instant transition, no animation delay
+    // Camera following — issue #43 safe wrapper
     // ─────────────────────────────────────────────────────────────────────────
     private fun safeCameraFollowing() {
         try {
@@ -525,12 +623,13 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     }
 
     // ─────────────────────────────────────────────────────────────────────────
-    // Cancel navigation — also stops foreground service (fixes notification crash)
+    // Cancel navigation
     // ─────────────────────────────────────────────────────────────────────────
     private fun cancelNavigation() {
         mapboxNavigation?.setNavigationRoutes(listOf())
         mapboxNavigation?.stopTripSession()
         firstLocationReceived = false
+        isOverviewMode = false
         hideUI()
         onNavigationCancelled(mapOf<String, Any>())
     }
@@ -538,12 +637,14 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     private fun showUI() {
         maneuverView?.visibility = View.VISIBLE
         etaBar?.visibility = View.VISIBLE
+        sideButtons?.visibility = View.VISIBLE
     }
 
     private fun hideUI() {
         maneuverView?.visibility = View.INVISIBLE
         speedInfoView?.visibility = View.GONE
         etaBar?.visibility = View.INVISIBLE
+        sideButtons?.visibility = View.INVISIBLE
     }
 
     // ─────────────────────────────────────────────────────────────────────────
@@ -578,8 +679,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
             .language(locale.toLanguageTag())
             .voiceUnits(resolveVoiceUnits())
             .coordinatesList(points)
-            // maxspeed annotation required for speed limit display
-            .annotations("maxspeed,congestion,duration")
+            .annotations("maxspeed,congestion,duration,speed")
 
         waypointIndices?.let { builder.waypointIndicesList(it) }
         navigationProfile?.let {
@@ -602,8 +702,6 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
                 }
                 nav.setNavigationRoutes(routes)
                 nav.startTripSession()
-                // Camera will follow automatically via onNewLocationMatcherResult
-                // + onRoutesChanged observer
             }
 
             override fun onFailure(reasons: List<RouterFailure>, routeOptions: RouteOptions) {
@@ -632,7 +730,7 @@ class ExpoMapboxNavigationView(context: Context, appContext: AppContext) :
     fun setNavigationProfile(p: String?) { navigationProfile = p }
     fun setExcludeTypes(t: List<String>?) { excludeTypes = t }
     fun setMapStyle(s: String?) { mapStyle = s }
-    fun setMute(m: Boolean) { mute = m }
+    fun setMute(m: Boolean) { mute = m; if (m != isMuted) toggleMute() }
     fun setMaxHeight(h: Double?) { maxHeight = h }
     fun setMaxWidth(w: Double?) { maxWidth = w }
     fun setUseMapMatching(u: Boolean) { useMapMatching = u }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacques_gordon/expo-mapbox-navigation",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Expo module for Mapbox Navigation SDK with 16KB page size support, NDK27, and Mapbox Maps v11.11.0+",
   "main": "build/index.js",
   "types": "build/index.d.ts",