Add live location sharing

map/.env.development

@@ -8,3 +8,4 @@ REACT_APP_WEBSITE_NAME='Welcome to Local OsmAnd.'
 ; REACT_APP_OSM_GPX_URL='https://test.osmand.net'
 REACT_APP_MAX_APPROXIMATE_KM='100'
 REACT_APP_DEVEL_FEATURES='yes'
+REACT_APP_WS_URL='ws://localhost:8080/osmand-websocket'

map/.env.production

@@ -8,3 +8,4 @@ REACT_APP_GPX_API='https://maptile.osmand.net'
 REACT_APP_OSM_GPX_URL='https://test.osmand.net'
 REACT_APP_MAX_APPROXIMATE_KM='100'
 REACT_APP_DEVEL_FEATURES='no'
+REACT_APP_WS_URL='wss://osmand.net/osmand-websocket'

map/.env.staging

@@ -7,3 +7,4 @@ REACT_APP_USER_API_SITE=
 REACT_APP_GPX_API=
 REACT_APP_MAX_APPROXIMATE_KM='100'
 REACT_APP_DEVEL_FEATURES='yes'
+REACT_APP_WS_URL='wss://test.osmand.net/osmand-websocket'

map/package.json

@@ -10,6 +10,7 @@
         "@hello-pangea/dnd": "^15.0.0",
         "@mui/icons-material": "^5.8.3",
         "@mui/material": "^5.8.3",
+        "@stomp/stompjs": "^7.3.0",
         "@tiptap/pm": "^3.22.4",
         "@tiptap/react": "^3.22.4",
         "@tiptap/starter-kit": "^3.22.4",
@@ -57,7 +58,7 @@
     "scripts": {
         "start": "yarn generate-resources && react-scripts start",
         "start:mobile": "yarn generate-resources && HOST=0.0.0.0 react-scripts start",
-        "start:local": "yarn generate-resources && USE_LOCAL_API=yes react-scripts start",
+        "start:local": "yarn generate-resources && USE_LOCAL_API=yes REACT_APP_WS_URL=ws://localhost:8080/osmand-websocket react-scripts start",
         "start:fallback": "yarn generate-resources && USE_MAIN_API=yes react-scripts start",
         "build": "yarn generate-resources && react-scripts build",
         "build:staging": "yarn generate-resources && env-cmd -f .env.staging react-scripts build",

map/src/App.js

@@ -5,6 +5,7 @@ import GlobalFrame from './frame/GlobalFrame';
 import { AppContextProvider } from './context/AppContext';
 import { WeatherContextProvider } from './context/WeatherContext';
 import { MapContextProvider } from './context/MapContext';
+import { LiveTrackingProvider } from './context/LiveTrackingContext';
 import DeleteAccountDialog from './login/dialogs/DeleteAccountDialog';
 import { AppServices } from './services/AppServices';
 import './variables.css';
@@ -20,6 +21,7 @@ import {
     PLANROUTE_URL,
     SETTINGS_URL,
     TRACKS_URL,
+    LIVE_TRACKS_URL,
     VISIBLE_TRACKS_URL,
     WEATHER_URL,
     EXPLORE_URL,
@@ -114,11 +116,11 @@ const App = () => {
                     {
                         path: '/',
                         element: (
-                            <>
+                            <LiveTrackingProvider>
                                 <AppServices />
                                 <NavigateGlobal />
                                 <Outlet />
-                            </>
+                            </LiveTrackingProvider>
                         ),
                         children: [
                             {
@@ -167,6 +169,7 @@ const App = () => {
                                             },
                                         ],
                                     },
+                                    { path: LIVE_TRACKS_URL, element: <TracksMenu /> },
                                     { path: VISIBLE_TRACKS_URL, element: <VisibleTracks /> },
                                     {
                                         path: FAVORITES_URL,

map/src/context/AppContext.js

@@ -187,6 +187,7 @@ export const AppContextProvider = (props) => {
     const [fitBoundsShareTracks, setFitBoundsShareTracks] = useState(null);
 
     const [smartFoldersCache, setSmartFoldersCache] = useState(null);
+
     // selected track
     const [selectedGpxFile, setSelectedGpxFile] = useState({});
     const [unverifiedGpxFile, setUnverifiedGpxFile] = useState(null); // see Effect in LocalClientTrackLayer

map/src/context/LiveTrackingContext.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { LIVE_TRACKS_URL, MAIN_URL_WITH_SLASH } from '../manager/GlobalManager';
+import {
+    KEY_HEX_RE,
+    LIVE_TRACK_KEY_SESSION,
+    LIVE_TRACKS_STORAGE_KEY,
+    NAME_PARAM,
+    TID_PARAM,
+} from '../util/livetracks/liveTrackUtils';
+import useLiveTracking from '../util/hooks/live/useLiveTracking';
+
+const LiveTrackingContext = React.createContext();
+
+export const LiveTrackingProvider = ({ children }) => {
+    const location = useLocation();
+    const [searchParams] = useSearchParams();
+
+    const [liveTranslations, setLiveTranslations] = useState(() => {
+        try {
+            return JSON.parse(localStorage.getItem(LIVE_TRACKS_STORAGE_KEY)) ?? [];
+        } catch {
+            return [];
+        }
+    });
+    const [liveParticipants, setLiveParticipants] = useState({});
+    const [liveViewers, setLiveViewers] = useState({});
+    // Pending share-permission requests shown to the owner as map notifications.
+    const [liveShareRequests, setLiveShareRequests] = useState([]); // [{ translationId, userId, nickname }]
+    // approve/deny callbacks published over websocket; wired by useLiveTracking.
+    const [liveShareActions, setLiveShareActions] = useState(null);
+    const [selectedLiveTranslation, setSelectedLiveTranslation] = useState(null);
+    const [followLiveLocation, setFollowLiveLocation] = useState(null);
+    const [myBroadcastTids, setMyBroadcastTids] = useState([]);
+
+    const livePath = MAIN_URL_WITH_SLASH + LIVE_TRACKS_URL;
+    const openLiveTracks = location.pathname.startsWith(livePath);
+
+    // Sync the selected translation from the URL (?tid=...#<key>), restoring the AES key the map
+    // stashed in sessionStorage before leaflet-hash cleared the fragment.
+    useEffect(() => {
+        if (!openLiveTracks) {
+            setSelectedLiveTranslation(null);
+            return;
+        }
+        const tid = searchParams.get(TID_PARAM);
+        if (!tid) {
+            setSelectedLiveTranslation(null);
+            return;
+        }
+        let key = null;
+        try {
+            const saved = sessionStorage.getItem(LIVE_TRACK_KEY_SESSION);
+            if (saved && KEY_HEX_RE.test(saved)) {
+                key = saved;
+                sessionStorage.removeItem(LIVE_TRACK_KEY_SESSION);
+            }
+        } catch {}
+
+        const fromList = liveTranslations.find((t) => t.id === tid);
+        if (fromList) {
+            const entry = key && !fromList.key ? { ...fromList, key } : fromList;
+            setSelectedLiveTranslation(entry);
+        } else {
+            const name = searchParams.get(NAME_PARAM) ?? '';
+            setSelectedLiveTranslation({ id: tid, name, ...(key ? { key } : {}) });
+        }
+    }, [openLiveTracks, location.search]);
+
+    const liveState = useMemo(
+        () => ({
+            liveTranslations,
+            setLiveTranslations,
+            liveParticipants,
+            setLiveParticipants,
+            liveViewers,
+            setLiveViewers,
+            liveShareRequests,
+            setLiveShareRequests,
+            liveShareActions,
+            setLiveShareActions,
+            selectedLiveTranslation,
+            setSelectedLiveTranslation,
+            followLiveLocation,
+            setFollowLiveLocation,
+            myBroadcastTids,
+            setMyBroadcastTids,
+        }),
+        [
+            liveTranslations,
+            liveParticipants,
+            liveViewers,
+            liveShareRequests,
+            liveShareActions,
+            selectedLiveTranslation,
+            followLiveLocation,
+            myBroadcastTids,
+        ]
+    );
+
+    // Hold the WebSocket only when live tracks are in use: viewing the page, broadcasting, or having bookmarked translations
+    const enabled = openLiveTracks || myBroadcastTids.length > 0 || liveTranslations.length > 0;
+    const api = useLiveTracking(liveState, enabled);
+    const value = useMemo(() => ({ ...liveState, ...api, openLiveTracks }), [liveState, api, openLiveTracks]);
+
+    return <LiveTrackingContext.Provider value={value}>{children}</LiveTrackingContext.Provider>;
+};
+
+export default LiveTrackingContext;

map/src/frame/GlobalFrame.js

@@ -22,6 +22,7 @@ import {
 } from '../manager/GlobalManager';
 import { useWindowSize } from '../util/hooks/useWindowSize';
 import GlobalAlert from './components/GlobalAlert';
+import LiveShareRequests from './components/LiveShareRequests';
 import DialogTitle from '@mui/material/DialogTitle';
 import dialogStyles from '../dialogs/dialog.module.css';
 import DialogContent from '@mui/material/DialogContent';
@@ -418,6 +419,7 @@ const GlobalFrame = () => {
                 <OsmAndMap mainMenuWidth={MAIN_MENU_MIN_SIZE + 'px'} menuInfoWidth={MENU_INFO_SIZE} />
                 {ctx.globalGraph?.show && <GlobalGraph type={ctx.globalGraph.type} />}
                 <GlobalAlert width={width} />
+                <LiveShareRequests />
                 <Snackbar
                     open={!!ctx.notification}
                     autoHideDuration={3000}

map/src/frame/components/LiveShareRequests.jsx

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { Alert, IconButton, Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import LiveTrackingContext from '../../context/LiveTrackingContext';
+import { ReactComponent as DoneIcon } from '../../assets/icons/ic_action_done.svg';
+import { ReactComponent as CloseIcon } from '../../assets/icons/ic_action_close.svg';
+import styles from './liveShareRequests.module.css';
+
+// Map notifications shown to a live-track owner when viewers ask to share their location.
+// ✓ approves, ✗ (dismiss) denies. Pending requests are restored from the server on reload,
+// so they reappear until the owner reacts.
+export default function LiveShareRequests() {
+    const lttx = useContext(LiveTrackingContext);
+    const { t } = useTranslation();
+
+    const requests = lttx.liveShareRequests;
+    if (!requests?.length) {
+        return null;
+    }
+
+    const trackName = (translationId) =>
+        lttx.liveTranslations?.find((tr) => tr.id === translationId)?.name ?? translationId;
+
+    return (
+        <div className={styles.container}>
+            {requests.map((req) => (
+                <Alert
+                    key={`${req.translationId}-${req.userId}`}
+                    severity="info"
+                    action={
+                        <>
+                            <Tooltip title={t('shared_string_apply')} arrow>
+                                <IconButton
+                                    color="inherit"
+                                    size="small"
+                                    onClick={() => lttx.liveShareActions?.approve(req.translationId, req.userId)}
+                                >
+                                    <DoneIcon className={styles.approveIcon} />
+                                </IconButton>
+                            </Tooltip>
+                            <Tooltip title={t('shared_string_close')} arrow>
+                                <IconButton
+                                    color="inherit"
+                                    size="small"
+                                    onClick={() => lttx.liveShareActions?.deny(req.translationId, req.userId)}
+                                >
+                                    <CloseIcon className={styles.denyIcon} />
+                                </IconButton>
+                            </Tooltip>
+                        </>
+                    }
+                >
+                    {t('web:live_track_share_request', {
+                        nickname: req.nickname,
+                        track: trackName(req.translationId),
+                    })}
+                </Alert>
+            ))}
+        </div>
+    );
+}

map/src/frame/components/liveShareRequests.module.css

@@ -0,0 +1,19 @@
+.container {
+    position: fixed;
+    top: 68px; /* HEADER_SIZE (60) + 8 */
+    right: 16px;
+    z-index: 1400;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 360px;
+}
+.approveIcon {
+    width: 18px;
+    height: 18px;
+}
+.denyIcon {
+    width: 18px;
+    height: 18px;
+    fill: #ff595e !important;
+}

map/src/frame/components/titles/SubTitleMenu.jsx

@@ -2,12 +2,13 @@ import { MenuItem, Typography } from '@mui/material';
 import React from 'react';
 import styles from './titles.module.css';
 
-export default function SubTitleMenu({ text }) {
+export default function SubTitleMenu({ text, rightContent }) {
     return (
-        <MenuItem sx={{ pointerEvents: 'none' }} className={styles.subtitleItem}>
-            <Typography className={styles.subtitle} noWrap>
+        <MenuItem sx={{ pointerEvents: rightContent ? 'auto' : 'none' }} className={styles.subtitleItem}>
+            <Typography className={styles.subtitle} noWrap sx={{ flex: 1 }}>
                 {text}
             </Typography>
+            {rightContent}
         </MenuItem>
     );
 }

map/src/index.js

@@ -26,3 +26,9 @@ root.render(<App />);
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
+
+if (process.env.NODE_ENV === 'development') {
+    import('./test/liveTrackSimulator').then((sim) => {
+        globalThis.__liveTrackSim = sim;
+    });
+}

map/src/manager/GlobalManager.js

@@ -47,6 +47,7 @@ export const WEATHER_URL = 'weather/';
 export const WEATHER_FORECAST_URL = 'forecast/';
 
 export const TRACKS_URL = 'mydata/tracks/';
+export const LIVE_TRACKS_URL = 'live/';
 export const VISIBLE_TRACKS_URL = 'visible-tracks/';
 
 export const FAVORITES_URL = 'mydata/favorites/';

map/src/map/OsmAndMap.jsx

@@ -25,13 +25,19 @@ import HeightmapLayer from './layers/HeightmapLayer';
 import TravelLayer from './layers/TravelLayer';
 import ShareFileLayer from './layers/ShareFileLayer';
 import TrackAnalyzerLayer from './layers/TrackAnalyzerLayer';
+import LiveTrackLayer from './layers/LiveTrackLayer';
 import { Box } from '@mui/material';
 import TransportStopsLayer from './layers/TransportStopsLayer';
+import { extractAndSaveLiveTrackKey } from '../util/livetracks/liveTrackUtils';
 
 function getInitialViewFromHash() {
     const hash = window.location.hash;
     if (!hash || hash.length < 2) return null;
-    const [zoomStr, latStr, lngStr] = hash.slice(1).split('/');
+    const raw = hash.slice(1);
+
+    if (extractAndSaveLiveTrackKey(raw)) return null;
+
+    const [zoomStr, latStr, lngStr] = raw.split('/');
     const zoom = Number.parseInt(zoomStr, 10);
     const lat = Number.parseFloat(latStr);
     const lng = Number.parseFloat(lngStr);
@@ -224,6 +230,7 @@ const OsmAndMap = ({ mainMenuWidth, menuInfoWidth }) => {
                 {routersReady && <NavigationLayer geocodingData={geocodingData} region={regionData} />}
                 <TrackAnalyzerLayer />
                 <ShareFileLayer />
+                <LiveTrackLayer />
                 <TravelLayer />
                 <FavoriteLayer />
                 <WeatherLayer />