Fix mobile view Bugs and add versions to static files for cache breaking

public/js/audio-player.js

@@ -5,12 +5,18 @@
     return $('#poi-audio')[0];
   }
 
+  function mediaUrl(url) {
+    if (!url) return '';
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}v=${Date.now()}`;
+  }
+
   function unload() {
     const audio = element();
     audio.pause();
     audio.removeAttribute('src');
     audio.load();
-    $(audio).prop('hidden', true);
+    $(audio).attr('hidden', '').hide();
   }
 
   ns.AudioPlayer = {
@@ -19,8 +25,8 @@
       if (!url) return;
 
       const audio = element();
-      audio.src = url;
-      $(audio).prop('hidden', false);
+      audio.src = mediaUrl(url);
+      $(audio).removeAttr('hidden').css('display', 'block');
       audio.load();
     },
 

public/js/bootstrap-loader.js

@@ -1,12 +1,14 @@
 (function () {
   'use strict';
 
-  const versions = Object.freeze({ jquery: '4.0.0', jqueryUi: '1.14.2' });
+  const versions = Object.freeze({ app: '0.12.11', jquery: '4.0.0', jqueryUi: '1.14.2' });
   const steps = ['jquery', 'jquery-ui', 'modules', 'server', 'routes', 'location'];
   const progress = document.getElementById('bootstrap-progress');
   const errorBox = document.getElementById('bootstrap-error');
   const retry = document.getElementById('bootstrap-retry');
 
+  const versioned = path => `${path}${path.includes('?') ? '&' : '?'}v=${encodeURIComponent(versions.app)}`;
+
   function mark(step, state) {
     const item = document.querySelector(`[data-step="${step}"]`);
     if (!item) return;
@@ -18,7 +20,7 @@
   function loadScript(src, test) {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
-      script.src = src;
+      script.src = versioned(src);
       script.async = false;
       script.onload = () => {
         if (test && !test()) reject(new Error(`Selbsttest fehlgeschlagen: ${src}`));
@@ -33,7 +35,7 @@
     return new Promise((resolve, reject) => {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
-      link.href = href;
+      link.href = versioned(href);
       link.onload = resolve;
       link.onerror = () => reject(new Error(`Stylesheet konnte nicht geladen werden: ${href}`));
       document.head.appendChild(link);

public/js/slideshow.js

@@ -5,6 +5,12 @@
   let index = 0;
   let swipe = null;
 
+  function mediaUrl(url) {
+    if (!url) return '';
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}v=${Date.now()}`;
+  }
+
   function activate(selector, handler) {
     $(document)
       .on('pointerup', selector, function (event) {
@@ -33,8 +39,12 @@
 
     const image = images[index];
     $('#slide-image')
-      .attr('src', image.url)
-      .attr('alt', image.caption || 'Bild zur Station');
+      .attr('src', mediaUrl(image.url))
+      .attr('alt', image.caption || 'Bild zur Station')
+      .off('error.wegwichtel')
+      .on('error.wegwichtel', function () {
+        $(this).removeAttr('src').attr('alt', 'Bild konnte nicht geladen werden');
+      });
     $('#slide-caption').text(image.caption || '');
     $('#slide-position').text(`${index + 1} / ${images.length}`);
     refreshButton('#slide-prev', images.length < 2);