react-native-maplibre-lite 0.1.9 → 0.2.1

package/src/components/types.ts

@@ -1,21 +1,25 @@
-
-export type MarkerProps = {
-    ignoreFitBounds?: boolean,
+/** RN → Web: `addMarker` (`MapLiteController.MarkerParams`). */
+export type MapLiteMarkerParams = {
     uniqueId: string,
-    onPress?: () => void,
     latitude: number,
     longitude: number,
     color?: string,
-
     iconUrl?: string,
     iconWidth?: number,
     iconHeight?: number,
     html?: string,
+}
 
+/** RN → Web: `addPolyline` (`MapLiteController.PolylineParams`). */
+export type MapLitePolylineParams = {
+    uniqueId: string,
+    coordinates: [number, number][],
+    color?: string,
+    width?: number,
 }
 
-export type PolygonProps = {
-    ignoreFitBounds?: boolean,
+/** RN → Web: `addPolygon` (`MapLiteController.PolygonParams`). */
+export type MapLitePolygonParams = {
     uniqueId: string,
     coordinates: [number, number][],
     fillColor?: string,
@@ -23,24 +27,33 @@ export type PolygonProps = {
     strokeColor?: string,
     strokeOpacity?: number,
     strokeWidth?: number,
+}
 
+/** RN → Web: `removeMarker` / `removePolyline` / `removePolygon`. */
+export type MapLiteRemoveOverlayParams = {
+    uniqueId: string,
 }
 
-export type PolylineProps = {
+export type MarkerProps = MapLiteMarkerParams & {
     ignoreFitBounds?: boolean,
-    uniqueId: string,
-    color?: string,
-    width?: number,
-    coordinates: [number, number][],
+    onPress?: () => void,
+}
+
+export type PolygonProps = MapLitePolygonParams & {
+    ignoreFitBounds?: boolean,
+}
 
+export type PolylineProps = MapLitePolylineParams & {
+    ignoreFitBounds?: boolean,
 }
 
+/** Web → RN: `postToNative` payload (`webProject/src/map/types.ts`). */
 export type EventParams = {
     center?: {
         lng: number,
-        lat: number
-    },
-    zoom?: number
+        lat: number,
+    } | null,
+    zoom?: number | null,
 }
 
 export type NavigatorLang = 'ru' | 'en'
@@ -113,7 +126,176 @@ export type NavigatorPositionSetParams = {
     distanceFromRouteMeters: number,
 }
 
+/**
+ * Web → RN: `navigatorHud` event. View-model панели маршрута (HUD).
+ * Все строки уже локализованы/отформатированы в вебе — RN рисует «как есть».
+ */
+export type NavigatorHudState = {
+    /** Показывать ли панель. */
+    visible: boolean,
+    /** Режим «кликни по карте, чтобы задать позицию» (dev): показать подсказку. */
+    pick?: boolean,
+    /** Состояние «Вы приехали». */
+    arrived?: boolean,
+    /** Код манёвра GraphHopper для иконки. */
+    sign?: number,
+    /** Крупная строка: дистанция / «Прибытие» / заголовок прибытия. */
+    distanceLabel?: string,
+    /** Текст манёвра / подзаголовок. */
+    maneuverText?: string,
+    /** Имя улицы после манёвра. */
+    streetName?: string,
+    /** Сводка маршрута («До конца: …»). */
+    summaryText?: string,
+    /** Доп. строка (подъём/спуск). */
+    extrasText?: string,
+    /** Ограничение скорости (км/ч) или null. */
+    speedLimitKmh?: number | null,
+}
+
+/** Действие озвучки в событии `navigatorVoice`. */
+export type NavigatorVoiceAction = 'play' | 'prefetch' | 'stop'
+
+/**
+ * Web → RN: `navigatorVoice` event. Веб шлёт абстрактные ключи фраз;
+ * нативная часть мапит их в URL клипов и воспроизводит.
+ */
+export type NavigatorVoicePlayParams = {
+    action: NavigatorVoiceAction,
+    keys: string[],
+}
+
 export type MapLiteWebError = {
     target: string,
     message: string,
-}
+}
+
+/** Parsed MapLibre style JSON — `InitParams.mapStyle` / `UpdateParams.mapStyle` в WebView. */
+export type MapLiteStyleSpecification = Record<string, unknown>
+
+/** RN → Web: `init` (`MapLiteController.InitParams`). */
+export type MapLiteInitParams = {
+    mapStyle: MapLiteStyleSpecification,
+    center: [number, number],
+    zoom: number,
+    minZoom?: number,
+    maxZoom?: number,
+    zoomEnabled?: boolean,
+    scrollEnabled?: boolean,
+    antialias?: boolean,
+    crossSourceCollisions?: boolean,
+    fadeDuration?: number,
+    pixelRatio?: number,
+    simplifyStyle?: boolean,
+    aggressiveSimplifyStyle?: boolean,
+    maxPitch?: number,
+    renderWorldCopies?: boolean,
+    turboWhileMoving?: boolean,
+    debugMode?: boolean,
+    navigator?: boolean,
+    graphhopperUrl?: string,
+    navigatorLang?: NavigatorLang,
+    navigatorProfile?: NavigatorProfile | string,
+    navigatorChrome?: NavigatorChromeParams,
+}
+
+/** RN → Web: `update` (`MapLiteController.UpdateParams`). */
+export type MapLiteUpdateParams = {
+    minZoom?: number,
+    maxZoom?: number,
+    zoomEnabled?: boolean,
+    scrollEnabled?: boolean,
+    mapStyle?: MapLiteStyleSpecification,
+}
+
+/** RN → Web: `fitBounds`. */
+export type MapLiteFitBoundsParams = {
+    bounds: [[number, number], [number, number]],
+    padding?: number,
+    duration?: number,
+}
+
+/** RN → Web: `flyTo`. */
+export type MapLiteFlyToParams = {
+    center: [number, number],
+    zoom: number,
+    duration?: number,
+}
+
+/** RN → Web: `setNavigatorPoint`. */
+export type MapLiteSetNavigatorPointParams = {
+    latitude: number,
+    longitude: number,
+}
+
+/**
+ * RN → Web: `setNavigatorPosition`.
+ * `accuracy` (м) включает прод-режим off-route на стороне WebView.
+ */
+export type MapLiteSetNavigatorPositionParams = {
+    latitude: number,
+    longitude: number,
+    accuracy?: number,
+}
+
+/** RN → Web: JSON в `WebView.postMessage` (`webProject/src/map/MapLiteController.receive`). */
+export type NativeToWebCommand =
+    | { function: 'init', params: MapLiteInitParams }
+    | { function: 'update', params: MapLiteUpdateParams }
+    | { function: 'addMarker', params: MapLiteMarkerParams }
+    | { function: 'removeMarker', params: MapLiteRemoveOverlayParams }
+    | { function: 'addPolyline', params: MapLitePolylineParams }
+    | { function: 'removePolyline', params: MapLiteRemoveOverlayParams }
+    | { function: 'addPolygon', params: MapLitePolygonParams }
+    | { function: 'removePolygon', params: MapLiteRemoveOverlayParams }
+    | { function: 'fitBounds', params: MapLiteFitBoundsParams }
+    | { function: 'flyTo', params: MapLiteFlyToParams }
+    | { function: 'setNavigatorPoint', params: MapLiteSetNavigatorPointParams }
+    | { function: 'advanceNavigatorInstruction', params: Record<string, never> }
+    | { function: 'setNavigatorPosition', params: MapLiteSetNavigatorPositionParams }
+    | { function: 'pickNavigatorPosition', params: Record<string, never> }
+    | { function: 'recenterNavigatorCamera', params: Record<string, never> }
+
+/** Web → RN: `postToNative` (`webProject/src/map/types.ts`). */
+export type WebToNativeMessage =
+    | { type: 'scriptReady' }
+    | { type: 'inited' }
+    | { type: 'event', event: string, params: unknown }
+    | { type: 'markerClick', uniqueId: string }
+    | {
+        type: 'error',
+        data: MapLiteWebError,
+    }
+
+/** Имена `event` в `{ type: 'event', event, params }` из WebView. */
+export type MapLiteMapEventName =
+    | 'movestart'
+    | 'moveend'
+    | 'zoomstart'
+    | 'zoomend'
+    | 'idle'
+    | 'error'
+    | 'navigatorRouteSet'
+    | 'navigatorInstruction'
+    | 'navigatorPositionSet'
+    | 'navigatorHud'
+    | 'navigatorVoice'
+
+export type MapLiteMapErrorEventParams = {
+    message: string,
+}
+
+/** `params` для `{ type: 'event', event, params }` по имени события. */
+export type MapLiteMapEventParamsMap = {
+    movestart: EventParams,
+    moveend: EventParams,
+    zoomstart: EventParams,
+    zoomend: EventParams,
+    idle: EventParams,
+    error: MapLiteMapErrorEventParams,
+    navigatorRouteSet: NavigatorRouteSetParams,
+    navigatorInstruction: NavigatorInstructionParams,
+    navigatorPositionSet: NavigatorPositionSetParams,
+    navigatorHud: NavigatorHudState,
+    navigatorVoice: NavigatorVoicePlayParams,
+}

package/src/components/useNavigatorVoice.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+    loadVoiceRuntime,
+    readVoiceVolumeLevel,
+    reloadVoiceForDir,
+    writeVoicePref,
+    writeVoiceVolumeLevel,
+    type VoiceCatalogEntry,
+    type VoiceManifest,
+    type VoiceRuntime,
+    type VoiceVolumeLevel,
+} from './navigatorVoiceCatalog';
+
+/**
+ * Нативное владение голосом навигатора: загрузка каталога/манифеста,
+ * выбор голоса/громкости и персист (AsyncStorage). Веб шлёт только ключи
+ * фраз; маппинг в аудио и воспроизведение — на стороне RN.
+ */
+export type NavigatorVoiceController = {
+    runtime: VoiceRuntime | null;
+    catalog: VoiceCatalogEntry[];
+    selectedDir: string | null;
+    manifest: VoiceManifest | null;
+    clipBaseUrl: string | null;
+    voiceEnabled: boolean;
+    volumeLevel: VoiceVolumeLevel;
+    selectVoice: (dir: string) => Promise<void>;
+    selectVolume: (level: VoiceVolumeLevel) => void;
+    disableVoice: () => Promise<void>;
+};
+
+export function useNavigatorVoice(voiceUrl: string | undefined): NavigatorVoiceController {
+    const [runtime, setRuntime] = useState<VoiceRuntime | null>(null);
+    const [volumeLevel, setVolumeLevel] = useState<VoiceVolumeLevel>(5);
+
+    useEffect(() => {
+        let cancelled = false;
+        void readVoiceVolumeLevel().then((lvl) => {
+            if (!cancelled) setVolumeLevel(lvl);
+        });
+        if (!voiceUrl) {
+            setRuntime(null);
+            return () => {
+                cancelled = true;
+            };
+        }
+        void loadVoiceRuntime(voiceUrl)
+            .then((rt) => {
+                if (!cancelled) setRuntime(rt);
+            })
+            .catch((err) => {
+                console.warn('[maplite] navigator voice catalog failed', err);
+                if (!cancelled) setRuntime(null);
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, [voiceUrl]);
+
+    const selectVoice = useCallback(
+        async (dir: string) => {
+            if (!runtime) return;
+            try {
+                const reloaded = await reloadVoiceForDir(runtime.catalogUrl, runtime.catalog, dir);
+                setRuntime((prev) => (prev ? { ...prev, ...reloaded } : prev));
+            } catch (err) {
+                console.warn('[maplite] failed to switch navigator voice', { dir, err });
+            }
+        },
+        [runtime]
+    );
+
+    const selectVolume = useCallback((level: VoiceVolumeLevel) => {
+        setVolumeLevel(level);
+        void writeVoiceVolumeLevel(level);
+    }, []);
+
+    const disableVoice = useCallback(async () => {
+        await writeVoicePref({ disabled: true });
+        setRuntime((prev) => (prev ? { ...prev, enabled: false, manifest: null } : prev));
+    }, []);
+
+    return {
+        runtime,
+        catalog: runtime?.catalog ?? [],
+        selectedDir: runtime?.selectedDir ?? null,
+        manifest: runtime?.manifest ?? null,
+        clipBaseUrl: runtime?.clipBaseUrl ?? null,
+        voiceEnabled: Boolean(runtime?.enabled && runtime.manifest),
+        volumeLevel,
+        selectVoice,
+        selectVolume,
+        disableVoice,
+    };
+}

package/src/components/utils.ts

@@ -1,7 +1,35 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { NativeModules, Platform } from 'react-native';
 
 const CACHE_VERSION = 'v1';
 
+/** Android: `android/app/src/main/assets/map.html`. See `resources/README.md`. */
+export const NATIVE_MAP_HTML_ANDROID_URI = 'file:///android_asset/map.html';
+
+/** Имя файла в iOS bundle (Copy Bundle Resources). */
+export const NATIVE_MAP_HTML_IOS_FILENAME = 'map.html';
+
+/**
+ * URI для `map.html` из нативных ресурсов хост-приложения.
+ * Android — assets; iOS — main bundle (через путь к `.app` из `SourceCode.scriptURL`).
+ */
+export const getNativeMapHtmlUri = (): string => {
+    if (Platform.OS === 'android') {
+        return NATIVE_MAP_HTML_ANDROID_URI;
+    }
+
+    if (Platform.OS === 'ios') {
+        const scriptURL: unknown = NativeModules.SourceCode?.scriptURL;
+        if (typeof scriptURL === 'string' && scriptURL.startsWith('file://')) {
+            const bundleDir = scriptURL.substring(0, scriptURL.lastIndexOf('/') + 1);
+            return `${bundleDir}${NATIVE_MAP_HTML_IOS_FILENAME}`;
+        }
+        return NATIVE_MAP_HTML_IOS_FILENAME;
+    }
+
+    return NATIVE_MAP_HTML_ANDROID_URI;
+};
+
 export const loadResources = async (url: string) => {
     const cacheKey = `${url}@${CACHE_VERSION}`;