Support playback seeking by clicking on the verse

[rtshkmr]

This commit finally made me feel that I understood the lang & the framework to a working-degree of familiarity.
Really happy with myself.

The seeking by clicking works well !!!

Got to click the 1.1 and it will seek!! The MP3 - timestamping - sync oddity still exists but less so for the hanuman chalisa voice

[rtshkmr]

Updates on the Singleton Progress Timer

I agree that there's a value in shifting the timer to a singleton class so that it can be tied to session state and updated.
I completed a first pass of it, but it resulted in too many recursive calls.

reason for having too many recursive calls

Since the timer needs to receive a callback, and the callback that is passed to it requires the current audio player's state, I'd need to pass that callback function like so,

     }
-    this.progressTimer = setInterval(() => this.updateProgress(), progressUpdateInterval)
+    this.playbackTimer.syncProgressTimer(() => this.updateProgress())
   },

Here's the class for reference

/**
 * Playback timer shall be a singleton that playback state can make reference to.
 * The purpose of using a distinct class for this is so that timer state can be serialsed
 * and stored in session state, thereby supporting session-continuity behaviour.
 * */

export class PlaybackTimer {
  constructor() {
    if (!PlaybackTimer._instance) {
      PlaybackTimer._instance = this;
      this.progressUpdateInterval = 100 // 10fps, comfortable for human eye
      this.progressTimer = null;
    }
    return PlaybackTimer._instance;
  }

  /**
   * Calls the update_fn at a set interval,
   * replaces an existing progress timer, if it exists.
   * */
  syncProgressTimer(update_fn) {
    const hasExistingTimer = this.progressTimer
    if(hasExistingTimer) {
      this.clearProgressTimer()
    }
    this.progressTimer = setInterval(() => update_fn(), this.progressUpdateInterval)
  }


  clearProgressTimer(update_fn) {
    update_fn()
    const hasExistingTimer = this.progressTimer
    if(hasExistingTimer) {
      console.warn("no progress timer to clear, yet a clear command was received.")

      return
    }
    console.log("[clearProgressTimer]", {
      timer: this.progressTimer,
    })
    clearInterval(this.progressTimer)
  }
}

@KosmonautX
Once the responsibilities are a little bit more separate (after doing the media bridge), I'll get back to this -- have stashed this implementation for now

[ks0m1c]

I think one way to clean up the lifecycle is at syncProgressTimer currently you are clearing the Progress Timer if it exists if instead we manage its lifecycle differently to call it only when necessary guarding its execution for eg. we could

  syncProgressTimer(update_fn) {
    // Check if the timer is already active
    if (this.progressTimer) {
      console.log("Progress timer is already active.");
      return; // Exit HERE if the timer is already active
    }
    // Set up the timer
    this.progressTimer = setInterval(() => {
      update_fn();
      // we could even inject an exit condition here if needed
    }, this.progressUpdateInterval);
  }

Singleton Pattern is g as we are managing timer state in a global way but we do need to manage lifecycle with good precision when we intervene to avoid unintended side effects

[ks0m1c]

Very Clean High-Signal low noise PR LGTM