Merge remote-tracking branch 'origin/master' into development

static/app.js

@@ -267,7 +267,7 @@ function renderContent(data) {
           contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="gestern"><i class="bi bi-calendar2-day"></i> Gestern</a></li>`;
         }
         if (data.breadcrumbs.length === 1 && data.toplist_enabled) {
-          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist"><i class="bi bi-graph-up"></i> oft angehört</a></li>`;
+          contentHTML += `<li class="directory-item"><a href="#" class="directory-link" data-path="toplist"><i class="bi bi-graph-up"></i> häufig angehört</a></li>`;
         }
         
         data.directories.forEach(dir => {

static/audioplayer.css

@@ -175,8 +175,8 @@
 /* Minimize button */
 .minimize-button {
   position: absolute;
-  top: 6px;
+  top: 2px;
-  right: 6px;
+  right: 2px;
   width: 18px;
   height: 18px;
   border-radius: 8px;
@@ -187,7 +187,6 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
   padding: 0;
 }
 

static/audioplayer.js

@@ -24,6 +24,8 @@ class SimpleAudioPlayer {
     this.rafId        = null;
     this.abortCtrl    = null;
     this._hasMetadata = false;
+    this._posInterval = null;
+    this._posIntervalMs = 1000;
 
     // Pre-compute icons once
     const fill = getComputedStyle(document.documentElement)
@@ -87,6 +89,21 @@ class SimpleAudioPlayer {
     </svg>`;
   }
 
+  _startPositionSync() {
+    if (this._posInterval) return;
+    this._posInterval = setInterval(() => {
+      if (!this.audio.paused) {
+        this._pushPositionState();
+      }
+    }, this._posIntervalMs);
+  }
+
+  _stopPositionSync() {
+    if (!this._posInterval) return;
+    clearInterval(this._posInterval);
+    this._posInterval = null;
+  }
+
   _bindEvents() {
     this.playBtn.addEventListener('click', () => this.togglePlay());
     if (this.minBtn) {
@@ -95,6 +112,7 @@ class SimpleAudioPlayer {
 
     this.audio.addEventListener('loadstart', () => {
       this._hasMetadata = false;
+      this._stopPositionSync();
       this.timeline.min = 0;
       this.timeline.max = 0;
       this.timeline.value = 0;
@@ -114,6 +132,7 @@ class SimpleAudioPlayer {
     this.audio.addEventListener('play', () => {
       this._updatePlayState();
       this._pushPositionState(true);
+      this._startPositionSync();
     });
 
     this.audio.addEventListener('playing',  () => this._pushPositionState(true));
@@ -121,12 +140,14 @@ class SimpleAudioPlayer {
     this.audio.addEventListener('pause', () => {
       this._updatePlayState();
       this._pushPositionState(true);
+      this._stopPositionSync();
     });
 
     this.audio.addEventListener('ratechange', () => this._pushPositionState(true));
     this.audio.addEventListener('ended', () => {
       this.playBtn.innerHTML = this.icons.play;
       this._pushPositionState(true);
+      this._stopPositionSync();
       if ('mediaSession' in navigator) navigator.mediaSession.playbackState = 'paused';
     });
 
@@ -134,7 +155,15 @@ class SimpleAudioPlayer {
     this.audio.addEventListener('timeupdate', () => this.updateTimeline());
 
     // Keep position in sync when page visibility changes
-    document.addEventListener('visibilitychange', () => this._pushPositionState(true));
+    document.addEventListener('visibilitychange', () => {
+      this._pushPositionState(true);
+      if (document.visibilityState === 'visible' && !this.audio.paused) {
+        this._startPositionSync();
+      }
+    });
+
+    window.addEventListener('pageshow', () => this._pushPositionState(true));
+    window.addEventListener('focus', () => this._pushPositionState(true));
 
     // Unified seek input
     this.timeline.addEventListener('input', () => {

templates/permission.html

@@ -7,6 +7,6 @@
 {# page content #}
 {% block content %}
   <div class="container">
-      <div class="alert alert-warning">Du hast keine gültige Freigaben.<br>Bitte über einen Freigabelink oder QR-Code freischalten.</div>
+      <div class="alert alert-warning">Du hast keine gültige Freigabe.<br>Bitte über einen Freigabelink oder QR-Code freischalten.</div>
   </div>
 {% endblock %}