From 2a4235aaebe0894ea60de1f8c1549a244dcb12bc Mon Sep 17 00:00:00 2001
From: lelo <leonid.firus@outlook.com>
Date: Sat, 24 Jan 2026 19:08:31 +0000
Subject: [PATCH] attempt to fix timeline out of sync

---
 static/audioplayer.js | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/static/audioplayer.js b/static/audioplayer.js
index 722d046..d13b3a1 100644
--- a/static/audioplayer.js
+++ b/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', () => {