react-native-maplibre-lite 0.2.5 → 0.2.6

package/src/components/MapView.tsx

@@ -26,10 +26,9 @@ 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 { useNavigatorTts, volumeLevelToGain } from './useNavigatorTts';
 import {
     type EventParams,
     type MapLiteInitParams,
@@ -50,6 +49,8 @@ import {
     type NavigatorProfile,
     type NavigatorPositionSetParams,
     type NavigatorRouteSetParams,
+    type NavigatorTtsHandler,
+    type NavigatorTtsVoices,
     type NavigatorVoicePlayParams,
     type PolygonProps,
     type PolylineProps,
@@ -117,11 +118,14 @@ interface MapViewProps {
      */
     navigatorChrome?: NavigatorChromeParams;
     /**
-     * URL каталога голосов навигатора (`.../voices/data.json`). Каталог,
-     * манифест, выбор голоса/громкости и воспроизведение — на нативной
-     * стороне. Без него озвучка и FAB выбора голоса отключены.
+     * Голоса TTS: ключ → подпись в UI. Вместе с `ttsHandler` включает
+     * озвучку и FAB выбора голоса.
      */
-    navigatorVoiceUrl?: string;
+    ttsVoices?: NavigatorTtsVoices;
+    /**
+     * Синтез фразы: текст + ключ голоса → URL аудио для воспроизведения.
+     */
+    ttsHandler?: NavigatorTtsHandler;
     /**
      * Dev-only: автоматически вести маркер по построенному маршруту
      * (симуляция поездки для отладки). Требует `navigator: true`. Пока
@@ -249,9 +253,14 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     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 ttsEnabled =
+        props.navigator === true &&
+        props.ttsHandler != null &&
+        Object.keys(props.ttsVoices ?? {}).length > 0;
+    const tts = useNavigatorTts(
+        ttsEnabled ? props.ttsVoices : undefined,
+        ttsEnabled ? props.ttsHandler : undefined
+    );
 
     const chromeTheme = useMemo(
         () => resolveNavigatorChromeTheme(props.navigatorChrome),
@@ -263,8 +272,8 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     );
 
     useEffect(() => {
-        voicePlayerRef.current?.setVolume(volumeLevelToGain(voice.volumeLevel));
-    }, [voice.volumeLevel]);
+        voicePlayerRef.current?.setVolume(volumeLevelToGain(tts.volumeLevel));
+    }, [tts.volumeLevel]);
 
     const handleNavigatorVoice = (params: NavigatorVoicePlayParams) => {
         const player = voicePlayerRef.current;
@@ -273,10 +282,10 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
             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);
+        if (params.action !== 'play' || !params.text?.trim()) return;
+        void tts.synthesize(params.text).then((url) => {
+            if (url) player.playUrls([url]);
+        });
     };
 
     const coordsInMapRef = useRef<Record<string, [number, number][]>>({});
@@ -703,23 +712,23 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                             accessibilityLabel={navigatorStrings.recenterAria}
                             onPress={recenterNavigatorCamera}
                         />
-                        {voiceSupported && (
+                        {ttsEnabled && (
                             <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}
+                                voiceEntries={tts.voiceEntries}
+                                selectedVoiceKey={tts.selectedVoiceKey}
+                                voiceEnabled={tts.voiceEnabled}
+                                volumeLevel={tts.volumeLevel}
+                                onSelectVoice={tts.selectVoice}
+                                onSelectVolume={tts.selectVolume}
+                                onDisable={tts.disableVoice}
                             />
                         )}
-                        {voiceSupported && (
+                        {ttsEnabled && (
                             <NavigatorVoicePlayer
                                 ref={voicePlayerRef}
-                                initialVolume={volumeLevelToGain(voice.volumeLevel)}
+                                initialVolume={volumeLevelToGain(tts.volumeLevel)}
                             />
                         )}
                     </>

package/src/components/NavigatorVoiceControl.tsx

@@ -3,19 +3,18 @@ import { Pressable, ScrollView, Text, View } from 'react-native';
 
 import { NavigatorVoiceIcon } from './navigatorManeuverIcon';
 import type { NavigatorChromeTheme } from './navigatorChromeTheme';
-import type { VoiceCatalogEntry, VoiceVolumeLevel } from './navigatorVoiceCatalog';
 import type { NavigatorUiStrings } from './navigatorVoiceStrings';
+import type { VoiceVolumeLevel } from './useNavigatorTts';
 
 /**
  * FAB выбора голоса + меню (список голосов, громкость 1–5, «отключить»).
- * Порт DOM-меню из веб-навигатора. Каталог/манифест и персист — в
- * `useNavigatorVoice`; компонент только презентационный.
+ * Порт DOM-меню из веб-навигатора. Персист и TTS — в `useNavigatorTts`.
  */
 export function NavigatorVoiceControl({
     theme,
     strings,
-    catalog,
-    selectedDir,
+    voiceEntries,
+    selectedVoiceKey,
     voiceEnabled,
     volumeLevel,
     onSelectVoice,
@@ -24,17 +23,17 @@ export function NavigatorVoiceControl({
 }: {
     theme: NavigatorChromeTheme;
     strings: NavigatorUiStrings;
-    catalog: VoiceCatalogEntry[];
-    selectedDir: string | null;
+    voiceEntries: [string, string][];
+    selectedVoiceKey: string | null;
     voiceEnabled: boolean;
     volumeLevel: VoiceVolumeLevel;
-    onSelectVoice: (dir: string) => void;
+    onSelectVoice: (voiceKey: string) => void;
     onSelectVolume: (level: VoiceVolumeLevel) => void;
     onDisable: () => void;
 }) {
     const [open, setOpen] = useState(false);
 
-    if (catalog.length === 0) return null;
+    if (voiceEntries.length === 0) return null;
 
     return (
         <>
@@ -84,15 +83,15 @@ export function NavigatorVoiceControl({
                     }}
                 >
                     <ScrollView style={{ maxHeight: 280 }}>
-                        {catalog.map((entry) => {
-                            const active = voiceEnabled && entry.dir === selectedDir;
+                        {voiceEntries.map(([voiceKey, label]) => {
+                            const active = voiceEnabled && voiceKey === selectedVoiceKey;
                             return (
                                 <Pressable
-                                    key={entry.dir}
+                                    key={voiceKey}
                                     accessibilityRole="menuitem"
                                     onPress={() => {
                                         setOpen(false);
-                                        onSelectVoice(entry.dir);
+                                        onSelectVoice(voiceKey);
                                     }}
                                     style={{ paddingVertical: 10, paddingHorizontal: 16 }}
                                 >
@@ -103,7 +102,7 @@ export function NavigatorVoiceControl({
                                             fontWeight: active ? '600' : '400',
                                         }}
                                     >
-                                        {entry.name}
+                                        {label}
                                     </Text>
                                 </Pressable>
                             );

package/src/components/navigatorVoicePlayer.tsx

@@ -9,10 +9,8 @@ import {
 import Video, { type VideoRef } from 'react-native-video';
 
 /**
- * Последовательный проигрыватель клипов озвучки навигатора. Порт логики
- * очереди из `webProject/src/map/navigationVoicePlayer.ts` на `react-native-video`:
- * веб присылает список ключей фраз, нативная часть собирает из них URL и
- * проигрывает их по очереди с короткой паузой между клипами.
+ * Проигрыватель озвучки навигатора на `react-native-video`.
+ * Нативная часть передаёт URL аудио (из `ttsHandler`) и проигрывает очередь.
  *
  * Один экземпляр `<Video>` на всю сессию — между клипами меняется только source
  * (или seek(0) при повторе того же URL), без remount.

package/src/components/types.ts

@@ -154,17 +154,26 @@ export type NavigatorHudState = {
 }
 
 /** Действие озвучки в событии `navigatorVoice`. */
-export type NavigatorVoiceAction = 'play' | 'prefetch' | 'stop'
+export type NavigatorVoiceAction = 'play' | 'stop'
 
 /**
- * Web → RN: `navigatorVoice` event. Веб шлёт абстрактные ключи фраз;
- * нативная часть мапит их в URL клипов и воспроизводит.
+ * Web → RN: `navigatorVoice` event. Веб собирает полную фразу и шлёт текст;
+ * нативная часть вызывает `ttsHandler` и воспроизводит URL аудио.
  */
 export type NavigatorVoicePlayParams = {
     action: NavigatorVoiceAction,
-    keys: string[],
+    text?: string,
 }
 
+/** Голоса TTS: ключ → подпись в UI выбора голоса. */
+export type NavigatorTtsVoices = Record<string, string>
+
+/** Колбэк TTS: текст фразы + ключ голоса → URL аудио для воспроизведения. */
+export type NavigatorTtsHandler = (
+    text: string,
+    voiceKey: string
+) => Promise<string>
+
 export type MapLiteWebError = {
     target: string,
     message: string,

package/src/components/useNavigatorTts.ts

@@ -0,0 +1,195 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import type { NavigatorTtsHandler, NavigatorTtsVoices } from './types';
+
+const LS_TTS_VOICE_PREF = 'maplite-navigator-tts-voice-pref';
+const LS_VOICE_VOLUME = 'maplite-navigator-voice-volume';
+
+export type VoiceVolumeLevel = 1 | 2 | 3 | 4 | 5;
+
+const DEFAULT_VOICE_VOLUME_LEVEL: VoiceVolumeLevel = 5;
+
+export function volumeLevelToGain(level: VoiceVolumeLevel): number {
+    return level * 0.2;
+}
+
+export async function readVoiceVolumeLevel(): Promise<VoiceVolumeLevel> {
+    try {
+        const raw = await AsyncStorage.getItem(LS_VOICE_VOLUME);
+        if (!raw) return DEFAULT_VOICE_VOLUME_LEVEL;
+        const n = Number.parseInt(raw, 10);
+        if (n >= 1 && n <= 5) return n as VoiceVolumeLevel;
+    } catch {
+        /* ignore */
+    }
+    return DEFAULT_VOICE_VOLUME_LEVEL;
+}
+
+export async function writeVoiceVolumeLevel(level: VoiceVolumeLevel): Promise<void> {
+    try {
+        await AsyncStorage.setItem(LS_VOICE_VOLUME, String(level));
+    } catch {
+        /* ignore */
+    }
+}
+
+export type TtsVoicePref = { voiceKey: string } | { disabled: true };
+
+export async function readTtsVoicePref(): Promise<TtsVoicePref | null> {
+    try {
+        const raw = await AsyncStorage.getItem(LS_TTS_VOICE_PREF);
+        if (!raw) return null;
+        const parsed = JSON.parse(raw) as unknown;
+        if (
+            parsed &&
+            typeof parsed === 'object' &&
+            'disabled' in parsed &&
+            (parsed as { disabled: unknown }).disabled === true
+        ) {
+            return { disabled: true };
+        }
+        if (
+            parsed &&
+            typeof parsed === 'object' &&
+            'voiceKey' in parsed &&
+            typeof (parsed as { voiceKey: unknown }).voiceKey === 'string'
+        ) {
+            const voiceKey = (parsed as { voiceKey: string }).voiceKey.trim();
+            if (voiceKey) return { voiceKey };
+        }
+    } catch {
+        /* ignore */
+    }
+    return null;
+}
+
+export async function writeTtsVoicePref(pref: TtsVoicePref): Promise<void> {
+    try {
+        await AsyncStorage.setItem(LS_TTS_VOICE_PREF, JSON.stringify(pref));
+    } catch {
+        /* ignore */
+    }
+}
+
+function defaultVoiceKey(voices: NavigatorTtsVoices): string | null {
+    const keys = Object.keys(voices);
+    return keys.length > 0 ? keys[0]! : null;
+}
+
+function resolveVoiceKey(voices: NavigatorTtsVoices, pref: TtsVoicePref | null): string | null {
+    if (pref && 'voiceKey' in pref && pref.voiceKey in voices) {
+        return pref.voiceKey;
+    }
+    return defaultVoiceKey(voices);
+}
+
+/**
+ * Нативное владение TTS навигатора: выбор голоса/громкости, персист,
+ * кэш URL по (voiceKey, text). Веб шлёт готовый текст фразы.
+ */
+export type NavigatorTtsController = {
+    voiceEntries: [string, string][];
+    selectedVoiceKey: string | null;
+    voiceEnabled: boolean;
+    volumeLevel: VoiceVolumeLevel;
+    synthesize: (text: string) => Promise<string | null>;
+    selectVoice: (voiceKey: string) => Promise<void>;
+    selectVolume: (level: VoiceVolumeLevel) => void;
+    disableVoice: () => Promise<void>;
+};
+
+export function useNavigatorTts(
+    ttsVoices: NavigatorTtsVoices | undefined,
+    ttsHandler: NavigatorTtsHandler | undefined
+): NavigatorTtsController {
+    const [selectedVoiceKey, setSelectedVoiceKey] = useState<string | null>(null);
+    const [voiceEnabled, setVoiceEnabled] = useState(true);
+    const [volumeLevel, setVolumeLevel] = useState<VoiceVolumeLevel>(5);
+    const urlCacheRef = useRef(new Map<string, string>());
+
+    const voiceEntries = Object.entries(ttsVoices ?? {});
+    const ttsActive = voiceEntries.length > 0 && typeof ttsHandler === 'function';
+
+    useEffect(() => {
+        let cancelled = false;
+        void readVoiceVolumeLevel().then((lvl) => {
+            if (!cancelled) setVolumeLevel(lvl);
+        });
+        if (!ttsActive) {
+            setSelectedVoiceKey(null);
+            setVoiceEnabled(false);
+            return () => {
+                cancelled = true;
+            };
+        }
+        void readTtsVoicePref().then((pref) => {
+            if (cancelled) return;
+            if (pref && 'disabled' in pref) {
+                setVoiceEnabled(false);
+                setSelectedVoiceKey(resolveVoiceKey(ttsVoices!, pref));
+                return;
+            }
+            setVoiceEnabled(true);
+            setSelectedVoiceKey(resolveVoiceKey(ttsVoices!, pref));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [ttsActive, ttsVoices]);
+
+    const selectVoice = useCallback(
+        async (voiceKey: string) => {
+            if (!ttsVoices || !(voiceKey in ttsVoices)) return;
+            setSelectedVoiceKey(voiceKey);
+            setVoiceEnabled(true);
+            await writeTtsVoicePref({ voiceKey });
+        },
+        [ttsVoices]
+    );
+
+    const selectVolume = useCallback((level: VoiceVolumeLevel) => {
+        setVolumeLevel(level);
+        void writeVoiceVolumeLevel(level);
+    }, []);
+
+    const disableVoice = useCallback(async () => {
+        await writeTtsVoicePref({ disabled: true });
+        setVoiceEnabled(false);
+    }, []);
+
+    const synthesize = useCallback(
+        async (text: string): Promise<string | null> => {
+            if (!ttsHandler || !voiceEnabled || !selectedVoiceKey) return null;
+            const trimmed = text.trim();
+            if (!trimmed) return null;
+            const cacheKey = `${selectedVoiceKey}\0${trimmed}`;
+            const cached = urlCacheRef.current.get(cacheKey);
+            if (cached) return cached;
+            try {
+                const url = await ttsHandler(trimmed, selectedVoiceKey);
+                if (typeof url === 'string' && url.trim()) {
+                    const u = url.trim();
+                    urlCacheRef.current.set(cacheKey, u);
+                    return u;
+                }
+            } catch (err) {
+                console.warn('[maplite] navigator TTS failed', err);
+            }
+            return null;
+        },
+        [ttsHandler, voiceEnabled, selectedVoiceKey]
+    );
+
+    return {
+        voiceEntries: ttsActive ? voiceEntries : [],
+        selectedVoiceKey: ttsActive ? selectedVoiceKey : null,
+        voiceEnabled: ttsActive && voiceEnabled,
+        volumeLevel,
+        synthesize,
+        selectVoice,
+        selectVolume,
+        disableVoice,
+    };
+}