react-native-maplibre-lite 0.2.0 → 0.2.1

package/src/components/MapView.tsx

@@ -4,6 +4,7 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -21,25 +22,40 @@ import KeepAwake from '@sayem314/react-native-keep-awake';
 
 import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
+import { NavigatorHud } from './NavigatorHud';
+import { NavigatorRecenterButton } from './NavigatorRecenterButton';
+import { NavigatorVoiceControl } from './NavigatorVoiceControl';
+import { resolveNavigatorChromeTheme } from './navigatorChromeTheme';
+import { keysToClipUrls, volumeLevelToGain } from './navigatorVoiceCatalog';
+import { NavigatorVoicePlayer, type NavigatorVoicePlayerRef } from './navigatorVoicePlayer';
+import { navigatorUiStrings } from './navigatorVoiceStrings';
+import { useNavigatorVoice } from './useNavigatorVoice';
 import {
     type EventParams,
     type MapLiteInitParams,
+    type MapLiteMapErrorEventParams,
+    type MapLiteMarkerParams,
+    type MapLitePolygonParams,
+    type MapLitePolylineParams,
+    type MapLiteRemoveOverlayParams,
     type MapLiteSetNavigatorPositionParams,
     type MapLiteUpdateParams,
     type MapLiteWebError,
     type MarkerProps,
     type NativeToWebCommand,
     type NavigatorChromeParams,
+    type NavigatorHudState,
     type NavigatorInstructionParams,
     type NavigatorLang,
     type NavigatorProfile,
     type NavigatorPositionSetParams,
     type NavigatorRouteSetParams,
+    type NavigatorVoicePlayParams,
     type PolygonProps,
     type PolylineProps,
     type WebToNativeMessage,
 } from './types';
-import { loadResources } from './utils';
+import { loadResources, getNativeMapHtmlUri } from './utils';
 import { MAP_HTML } from './webMapBuild';
 
 
@@ -69,6 +85,8 @@ interface MapViewProps {
     onZoomStart?: (eventParams: EventParams) => void;
     onZoomEnd?: (eventParams: EventParams) => void;
     onIdle?: (eventParams: EventParams) => void;
+    /** MapLibre `error` из WebView (`event: 'error'`). */
+    onMapError?: (params: MapLiteMapErrorEventParams) => void;
     showSelectPoint?: boolean;
     selectPointColor?: string;
     selectPointBackgroundColor?: string;
@@ -98,12 +116,23 @@ interface MapViewProps {
      * Sent once in WebView `init` as `navigatorChrome`.
      */
     navigatorChrome?: NavigatorChromeParams;
+    /**
+     * URL каталога голосов навигатора (`.../voices/data.json`). Каталог,
+     * манифест, выбор голоса/громкости и воспроизведение — на нативной
+     * стороне. Без него озвучка и FAB выбора голоса отключены.
+     */
+    navigatorVoiceUrl?: string;
     onNavigatorRouteSet?: (params: NavigatorRouteSetParams) => void;
     onNavigatorInstruction?: (params: NavigatorInstructionParams) => void;
     onNavigatorPositionSet?: (params: NavigatorPositionSetParams) => void;
     /** Ошибки команд WebView (`type: 'error'` из карты). */
     onMapLiteError?: (err: MapLiteWebError) => void;
 
+    /**
+     * Загружать WebView из `map.html` в нативных ресурсах приложения вместо inline `MAP_HTML`.
+     * Размещение файла — см. `resources/README.md`.
+     */
+    useNativeMapHtml?: boolean;
 
     developerLocalhostBundleUrl?: string;
 }
@@ -165,6 +194,36 @@ const getBoundsFromCoords = (
     ];
 };
 
+const toWebMarkerParams = (props: MarkerProps): MapLiteMarkerParams => ({
+    uniqueId: props.uniqueId,
+    latitude: props.latitude,
+    longitude: props.longitude,
+    color: props.color,
+    iconUrl: props.iconUrl,
+    iconWidth: props.iconWidth,
+    iconHeight: props.iconHeight,
+    html: props.html,
+});
+
+const toWebPolylineParams = (props: PolylineProps): MapLitePolylineParams => ({
+    uniqueId: props.uniqueId,
+    coordinates: props.coordinates,
+    color: props.color,
+    width: props.width,
+});
+
+const toWebPolygonParams = (props: PolygonProps): MapLitePolygonParams => ({
+    uniqueId: props.uniqueId,
+    coordinates: props.coordinates,
+    fillColor: props.fillColor,
+    fillOpacity: props.fillOpacity,
+    strokeColor: props.strokeColor,
+    strokeOpacity: props.strokeOpacity,
+    strokeWidth: props.strokeWidth,
+});
+
+const toWebRemoveParams = (uniqueId: string): MapLiteRemoveOverlayParams => ({ uniqueId });
+
 /** Минимальный интервал между отправками позиции в WebView (мост RN↔JS). */
 const NAVIGATOR_GPS_FORWARD_MIN_MS = 500;
 
@@ -177,11 +236,51 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         initedRef.current = inited;
     }, [inited]);
 
+    /** View-model HUD маршрута, приходит из WebView (`navigatorHud`). */
+    const [hudState, setHudState] = useState<NavigatorHudState | null>(null);
+    const voicePlayerRef = useRef<NavigatorVoicePlayerRef | null>(null);
+
+    /** Озвучка ограничена русским набором фраз (как в веб-навигаторе). */
+    const voiceSupported = props.navigator === true && props.navigatorLang !== 'en';
+    const voice = useNavigatorVoice(voiceSupported ? props.navigatorVoiceUrl : undefined);
+
+    const chromeTheme = useMemo(
+        () => resolveNavigatorChromeTheme(props.navigatorChrome),
+        [props.navigatorChrome]
+    );
+    const navigatorStrings = useMemo(
+        () => navigatorUiStrings(props.navigatorLang),
+        [props.navigatorLang]
+    );
+
+    useEffect(() => {
+        voicePlayerRef.current?.setVolume(volumeLevelToGain(voice.volumeLevel));
+    }, [voice.volumeLevel]);
+
+    const handleNavigatorVoice = (params: NavigatorVoicePlayParams) => {
+        const player = voicePlayerRef.current;
+        if (!player) return;
+        if (params.action === 'stop') {
+            player.stop();
+            return;
+        }
+        if (params.action === 'prefetch') return;
+        if (!voice.voiceEnabled || !voice.manifest || !voice.clipBaseUrl) return;
+        const urls = keysToClipUrls(voice.manifest, voice.clipBaseUrl, params.keys);
+        if (urls.length > 0) player.playUrls(urls);
+    };
+
     const coordsInMapRef = useRef<Record<string, [number, number][]>>({});
     const markersClickHandlers = useRef<Record<string, () => void>>({});
     const mapSelectPointRef = useRef<MapSelectPointType | null>(null);
     const performanceMode = props.performanceMode ?? (Platform.OS === 'android' ? 'balanced' : 'quality');
 
+    const webViewSource = props.developerLocalhostBundleUrl
+        ? { uri: props.developerLocalhostBundleUrl }
+        : props.useNativeMapHtml
+            ? { uri: getNativeMapHtmlUri() }
+            : { html: MAP_HTML };
+
     const fallbackPixelRatio = performanceMode === 'performance'
         ? 0.85
         : (performanceMode === 'balanced' && Platform.OS === 'android' ? 1 : undefined);
@@ -247,14 +346,14 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
 
         updateMarkerClickHandler(propsMarker);
 
-        sendToWebView({ function: 'addMarker', params: propsMarker });
+        sendToWebView({ function: 'addMarker', params: toWebMarkerParams(propsMarker) });
         scheduleAutoFitBounds();
     };
 
     const removeMarker = (propsMarker: MarkerProps) => {
         delete coordsInMapRef.current[propsMarker.uniqueId];
         delete markersClickHandlers.current[propsMarker.uniqueId];
-        sendToWebView({ function: 'removeMarker', params: propsMarker });
+        sendToWebView({ function: 'removeMarker', params: toWebRemoveParams(propsMarker.uniqueId) });
         scheduleAutoFitBounds();
     };
 
@@ -262,13 +361,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         if (propsPolyline.coordinates && !propsPolyline.ignoreFitBounds) {
             coordsInMapRef.current[propsPolyline.uniqueId] = propsPolyline.coordinates;
         }
-        sendToWebView({ function: 'addPolyline', params: propsPolyline });
+        sendToWebView({ function: 'addPolyline', params: toWebPolylineParams(propsPolyline) });
         scheduleAutoFitBounds();
     };
 
     const removePolyline = (propsPolyline: PolylineProps) => {
         delete coordsInMapRef.current[propsPolyline.uniqueId];
-        sendToWebView({ function: 'removePolyline', params: propsPolyline });
+        sendToWebView({ function: 'removePolyline', params: toWebRemoveParams(propsPolyline.uniqueId) });
         scheduleAutoFitBounds();
     };
 
@@ -276,13 +375,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         if (propsPolygon.coordinates && !propsPolygon.ignoreFitBounds) {
             coordsInMapRef.current[propsPolygon.uniqueId] = propsPolygon.coordinates;
         }
-        sendToWebView({ function: 'addPolygon', params: propsPolygon });
+        sendToWebView({ function: 'addPolygon', params: toWebPolygonParams(propsPolygon) });
         scheduleAutoFitBounds();
     };
 
     const removePolygon = (propsPolygon: PolygonProps) => {
         delete coordsInMapRef.current[propsPolygon.uniqueId];
-        sendToWebView({ function: 'removePolygon', params: propsPolygon });
+        sendToWebView({ function: 'removePolygon', params: toWebRemoveParams(propsPolygon.uniqueId) });
         scheduleAutoFitBounds();
     };
 
@@ -334,6 +433,10 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         sendToWebView({ function: 'pickNavigatorPosition', params: {} });
     };
 
+    const recenterNavigatorCamera = () => {
+        sendToWebView({ function: 'recenterNavigatorCamera', params: {} });
+    };
+
     useImperativeHandle(ref, () => ({
         fitBounds,
         flyTo,
@@ -407,6 +510,9 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     case 'idle':
                         props.onIdle?.(msg.params as EventParams);
                         break;
+                    case 'error':
+                        props.onMapError?.(msg.params as MapLiteMapErrorEventParams);
+                        break;
                     case 'navigatorRouteSet':
                         props.onNavigatorRouteSet?.(msg.params as NavigatorRouteSetParams);
                         break;
@@ -416,6 +522,12 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     case 'navigatorPositionSet':
                         props.onNavigatorPositionSet?.(msg.params as NavigatorPositionSetParams);
                         break;
+                    case 'navigatorHud':
+                        setHudState(msg.params as NavigatorHudState);
+                        break;
+                    case 'navigatorVoice':
+                        handleNavigatorVoice(msg.params as NavigatorVoicePlayParams);
+                        break;
                 }
                 return;
             }
@@ -523,7 +635,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     ref={webViewRef}
                     style={{ flex: 1, backgroundColor: 'transparent' }}
                     originWhitelist={['*']}
-                    source={!!props.developerLocalhostBundleUrl ? { uri: props.developerLocalhostBundleUrl } : { html: MAP_HTML }}
+                    source={webViewSource}
                     onMessage={event => {
                         onReceiveMessageFromWebView(event.nativeEvent.data);
                     }}
@@ -554,6 +666,40 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                         />
                     </View>
                 )}
+
+                {inited && props.navigator && (
+                    <>
+                        <NavigatorHud
+                            state={hudState}
+                            theme={chromeTheme}
+                            pickHint={navigatorStrings.pickHint}
+                        />
+                        <NavigatorRecenterButton
+                            theme={chromeTheme}
+                            accessibilityLabel={navigatorStrings.recenterAria}
+                            onPress={recenterNavigatorCamera}
+                        />
+                        {voiceSupported && (
+                            <NavigatorVoiceControl
+                                theme={chromeTheme}
+                                strings={navigatorStrings}
+                                catalog={voice.catalog}
+                                selectedDir={voice.selectedDir}
+                                voiceEnabled={voice.voiceEnabled}
+                                volumeLevel={voice.volumeLevel}
+                                onSelectVoice={voice.selectVoice}
+                                onSelectVolume={voice.selectVolume}
+                                onDisable={voice.disableVoice}
+                            />
+                        )}
+                        {voiceSupported && (
+                            <NavigatorVoicePlayer
+                                ref={voicePlayerRef}
+                                initialVolume={volumeLevelToGain(voice.volumeLevel)}
+                            />
+                        )}
+                    </>
+                )}
             </MapViewContext.Provider>
             {!inited && (
                 <MapPlaceholder theme={props.placeholderTheme ?? 'light'} />

package/src/components/NavigatorHud.tsx

@@ -0,0 +1,166 @@
+import { Text, View } from 'react-native';
+
+import { NavigatorManeuverIcon } from './navigatorManeuverIcon';
+import type { NavigatorChromeTheme } from './navigatorChromeTheme';
+import type { NavigatorHudState } from './types';
+
+/**
+ * Нативная панель навигатора (HUD): порт DOM-плашки из веб-навигатора.
+ * Получает уже отформатированную view-model (`navigatorHud`) и тему из
+ * `navigatorChrome`; вся локализация/форматирование остаются в вебе.
+ */
+export function NavigatorHud({
+    state,
+    theme,
+    pickHint,
+}: {
+    state: NavigatorHudState | null;
+    theme: NavigatorChromeTheme;
+    pickHint: string;
+}) {
+    if (!state || !state.visible) return null;
+
+    if (state.pick) {
+        return (
+            <View
+                pointerEvents="none"
+                style={{
+                    position: 'absolute',
+                    top: 12,
+                    left: 12,
+                    right: 12,
+                    padding: 14,
+                    borderRadius: 14,
+                    backgroundColor: 'rgba(120, 53, 15, 0.92)',
+                    borderWidth: 2,
+                    borderColor: '#facc15',
+                }}
+            >
+                <Text
+                    style={{
+                        textAlign: 'center',
+                        fontSize: 14,
+                        fontWeight: '600',
+                        color: '#fef3c7',
+                    }}
+                >
+                    {pickHint}
+                </Text>
+            </View>
+        );
+    }
+
+    const speedLimit = state.speedLimitKmh;
+    const showSpeed = typeof speedLimit === 'number' && Number.isFinite(speedLimit) && speedLimit > 0;
+
+    return (
+        <View
+            pointerEvents="none"
+            style={{
+                position: 'absolute',
+                top: 12,
+                left: 12,
+                right: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                padding: 14,
+                borderRadius: 14,
+                backgroundColor: theme.background,
+                shadowColor: '#0f172a',
+                shadowOpacity: 0.32,
+                shadowRadius: 24,
+                shadowOffset: { width: 0, height: 10 },
+                elevation: 6,
+            }}
+        >
+            <View
+                style={{
+                    width: 44,
+                    height: 44,
+                    borderRadius: 12,
+                    backgroundColor: theme.iconBackground,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                {typeof state.sign === 'number' ? (
+                    <NavigatorManeuverIcon sign={state.sign} color={theme.iconForeground} />
+                ) : null}
+            </View>
+
+            <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+                {state.distanceLabel ? (
+                    <Text
+                        numberOfLines={1}
+                        style={{
+                            fontSize: 18,
+                            fontWeight: '700',
+                            lineHeight: 20,
+                            color: theme.foreground,
+                        }}
+                    >
+                        {state.distanceLabel}
+                    </Text>
+                ) : null}
+
+                {state.maneuverText ? (
+                    <Text
+                        numberOfLines={1}
+                        style={{ fontSize: 14, fontWeight: '500', color: theme.subtle }}
+                    >
+                        {state.maneuverText}
+                    </Text>
+                ) : null}
+
+                {state.streetName ? (
+                    <Text numberOfLines={1} style={{ fontSize: 12, color: theme.muted }}>
+                        {state.streetName}
+                    </Text>
+                ) : null}
+
+                {state.summaryText ? (
+                    <Text
+                        style={{
+                            marginTop: 4,
+                            paddingTop: 6,
+                            borderTopWidth: 1,
+                            borderTopColor: theme.divider,
+                            fontSize: 12,
+                            fontWeight: '600',
+                            color: theme.summary,
+                            lineHeight: 16,
+                        }}
+                    >
+                        {state.summaryText}
+                    </Text>
+                ) : null}
+
+                {state.extrasText ? (
+                    <Text style={{ marginTop: 2, fontSize: 11, fontWeight: '500', color: theme.muted }}>
+                        {state.extrasText}
+                    </Text>
+                ) : null}
+            </View>
+
+            {showSpeed ? (
+                <View
+                    style={{
+                        width: 52,
+                        height: 52,
+                        borderRadius: 26,
+                        borderWidth: 3,
+                        borderColor: '#dc2626',
+                        backgroundColor: '#ffffff',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Text style={{ fontSize: 14, fontWeight: '800', color: '#0f172a' }}>
+                        {Math.round(speedLimit as number)}
+                    </Text>
+                </View>
+            ) : null}
+        </View>
+    );
+}

package/src/components/NavigatorRecenterButton.tsx

@@ -0,0 +1,45 @@
+import { Pressable } from 'react-native';
+
+import { NavigatorRecenterIcon } from './navigatorManeuverIcon';
+import type { NavigatorChromeTheme } from './navigatorChromeTheme';
+
+/**
+ * FAB «вернуть камеру на положение». При нажатии шлёт команду
+ * `recenterNavigatorCamera` в WebView — навигатор делает recenter.
+ */
+export function NavigatorRecenterButton({
+    theme,
+    accessibilityLabel,
+    onPress,
+}: {
+    theme: NavigatorChromeTheme;
+    accessibilityLabel: string;
+    onPress: () => void;
+}) {
+    return (
+        <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={accessibilityLabel}
+            onPress={onPress}
+            style={({ pressed }) => ({
+                position: 'absolute',
+                right: 16,
+                bottom: 16,
+                width: 56,
+                height: 56,
+                borderRadius: 28,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: theme.background,
+                shadowColor: '#0f172a',
+                shadowOpacity: 0.32,
+                shadowRadius: 24,
+                shadowOffset: { width: 0, height: 10 },
+                elevation: 6,
+                transform: [{ scale: pressed ? 0.96 : 1 }],
+            })}
+        >
+            <NavigatorRecenterIcon color={theme.iconForeground} />
+        </Pressable>
+    );
+}