Multiple improvements

public/js/app.js

@@ -22,6 +22,19 @@
     persistTimer: null
   };
 
+  let poiMediaGeneration = 0;
+  let localPoiMedia = null;
+
+  function releaseLocalPoiMedia() {
+    poiMediaGeneration += 1;
+    if (localPoiMedia) {
+      ns.AudioPlayer.unload();
+      ns.Slideshow.show([]);
+      ns.LocalRoutes.releasePoiMedia(localPoiMedia);
+      localPoiMedia = null;
+    }
+  }
+
   function escapeHtml(value) {
     return $('<div>').text(value ?? '').html();
   }
@@ -88,6 +101,7 @@
     const target = $(pageSelector);
     if (!target.length) throw new Error(ns.I18n.t("app.page.missing"));
 
+    if (pageSelector !== '#poi-page') releaseLocalPoiMedia();
     const previous = state.activePage;
     $('.app-page').attr('hidden', true);
     target.removeAttr('hidden');
@@ -287,6 +301,7 @@
   }
 
   function endRoute({ announce = true, returnToRoutes = false } = {}) {
+    releaseLocalPoiMedia();
     const wasActive = state.routeState !== 'idle';
     state.routeState = 'idle';
     persistRouteProgress();
@@ -330,6 +345,7 @@
   }
 
   function suspendCurrentRoute() {
+    releaseLocalPoiMedia();
     if (!state.route) return;
     if (state.routeState === 'running') state.routeState = 'paused';
     persistRouteProgress();
@@ -383,6 +399,7 @@
   }
 
   function showPoi(poi) {
+    releaseLocalPoiMedia();
     state.activePoiId = Number(poi.id);
     state.viewed.add(state.activePoiId);
     persistRouteProgress();
@@ -392,6 +409,27 @@
     ns.Slideshow.show(poi.images);
     ns.AudioPlayer.load(poi.audioUrl);
     navigate('#poi-page');
+    if (state.route?.source === 'local') void loadLocalPoiMedia(poi);
+  }
+
+  async function loadLocalPoiMedia(poi) {
+    const route = state.route;
+    const requestGeneration = poiMediaGeneration;
+    try {
+      const loaded = await ns.LocalRoutes.getAppPoi(route.id, poi.id, { requestPermission: true });
+      if (requestGeneration !== poiMediaGeneration || state.route !== route) {
+        ns.LocalRoutes.releasePoiMedia(loaded);
+        return;
+      }
+      if (!loaded) return;
+      localPoiMedia = loaded;
+      ns.Slideshow.show(loaded.images);
+      ns.AudioPlayer.load(loaded.audioUrl);
+    } catch (error) {
+      if (requestGeneration === poiMediaGeneration) {
+        $('#tracking-status').prop('hidden', false).text(ns.UserMessages?.error(error) || ns.I18n.t('app.error.open-draft'));
+      }
+    }
   }
 
   function nearestRoutePointIndex(position) {
@@ -680,7 +718,7 @@
   async function selectRoute(source, id) {
     setRouteControlOpen(false);
     const route = source === 'local'
-      ? await ns.LocalRoutes.getAppRoute(id, { requestPermission: true })
+      ? await ns.LocalRoutes.getAppRoute(id)
       : { ...(await ns.Api.route(id)), source: 'server', local: false };
     renderRoute(route);
     navigate('#route-page');