Reworked pause and stop buttons and documentation

public/css/app.css

@@ -219,6 +219,19 @@ button,
   opacity: .65;
 }
 
+#poi-list button[aria-current="step"] {
+  border-color: var(--primary);
+  background: #e7f1e9;
+  box-shadow: inset .35rem 0 0 var(--primary), 0 .12rem .35rem rgba(0, 0, 0, .08);
+}
+
+#poi-list button[aria-current="step"] > strong::after {
+  content: " · aktuelle Station";
+  color: var(--primary-dark);
+  font-size: .85rem;
+  font-weight: 600;
+}
+
 .route-list > li > p {
   margin: 0;
   padding: 1rem;

public/index.html

@@ -118,7 +118,7 @@
         </div>
 
         <p id="poi-description"></p>
-        <audio id="poi-audio" controls preload="metadata"></audio>
+        <audio id="poi-audio" controls preload="metadata" hidden></audio>
       </div>
     </section>
 

public/js/app.js

@@ -9,6 +9,7 @@
     routeState: 'idle',
     activePage: null,
     routeProgressIndex: null,
+    activePoiId: null,
     deviceHeading: null
   };
 
@@ -169,21 +170,36 @@
     $('#stop-route').prop('disabled', state.routeState === 'idle');
   }
 
-  function endRoute({ announce = true } = {}) {
+  function setActivePoi(poiId) {
+    state.activePoiId = poiId == null ? null : Number(poiId);
+    $('#poi-list [data-poi-id]').removeAttr('aria-current');
+    if (state.activePoiId != null) {
+      $(`#poi-list [data-poi-id="${state.activePoiId}"]`).attr('aria-current', 'step');
+    }
+  }
+
+  function endRoute({ announce = true, returnToRoutes = false } = {}) {
     const wasActive = state.routeState !== 'idle';
     state.routeState = 'idle';
     state.routeProgressIndex = null;
     state.triggered.clear();
     stopRouteSensors();
+    ns.AudioPlayer.unload();
+    setActivePoi(null);
     hideNavigation();
 
-    if (announce && wasActive) {
+    if (announce && wasActive && !returnToRoutes) {
       $('#tracking-status').prop('hidden', false).text('Route beendet.');
     } else {
       $('#tracking-status').prop('hidden', true).text('');
     }
 
     updateRouteControls();
+
+    if (returnToRoutes) {
+      state.route = null;
+      navigate('#routes-page', { replace: true });
+    }
   }
 
   function pauseRoute() {
@@ -191,6 +207,7 @@
 
     state.routeState = 'paused';
     stopRouteSensors();
+    ns.AudioPlayer.pause();
     $('#tracking-status')
       .prop('hidden', false)
       .text('Route pausiert. Die Standortverfolgung ist angehalten.');
@@ -204,6 +221,7 @@
     state.route = route;
     state.triggered.clear();
     state.routeProgressIndex = null;
+    setActivePoi(null);
     $('#route-title').text(route.name);
     $('#route-description').text(route.description || '');
     $('#route-distance').text(ns.Distance.format(route.distanceM));
@@ -231,6 +249,7 @@
   }
 
   function showPoi(poi, automatic) {
+    setActivePoi(poi.id);
     $('#poi-title').text(poi.title);
     $('#poi-description').text(poi.description || '');
     ns.Slideshow.show(poi.images);
@@ -425,7 +444,7 @@
     });
 
     activate('#stop-route', function () {
-      endRoute();
+      endRoute({ returnToRoutes: true });
     });
 
     window.addEventListener('popstate', event => {

public/js/audio-player.js

@@ -1,11 +1,39 @@
 (function (ns, $) {
   'use strict';
+
+  function element() {
+    return $('#poi-audio')[0];
+  }
+
+  function unload() {
+    const audio = element();
+    audio.pause();
+    audio.removeAttribute('src');
+    audio.load();
+    $(audio).prop('hidden', true);
+  }
+
   ns.AudioPlayer = {
     load(url) {
-      const audio = $('#poi-audio');
-      audio[0].pause(); audio.attr('src', url || '').toggle(Boolean(url));
-      if (url) audio[0].load();
+      unload();
+      if (!url) return;
+
+      const audio = element();
+      audio.src = url;
+      $(audio).prop('hidden', false);
+      audio.load();
     },
-    play() { const audio = $('#poi-audio')[0]; if (audio.src) return audio.play(); }
+
+    play() {
+      const audio = element();
+      if (audio.getAttribute('src')) return audio.play();
+      return Promise.resolve();
+    },
+
+    pause() {
+      element().pause();
+    },
+
+    unload
   };
 }(window.Wegwichtel, window.jQuery));