Skip to content

[Bug] Video Clip timeline sliders don't work in Chrome-based browsers

Describe the bug

When trying to create a Video Clip using a Chrome-based browser, the sliders do not work (they cannot be moved at all to select the start and end time) and the browser's console log shows the following:

reactive-element.js:6 Uncaught (in promise) RangeError: Invalid time value
    at Date.toISOString (<anonymous>)
    at Se.secondsToHHMMSS (audio-clipper.ts:489:37)
    at Se.render (audio-clipper.ts:776:30)
    at Se.update (lit-element.js:6:304)
    at Se.performUpdate (reactive-element.js:6:4846)
    at Se.scheduleUpdate (reactive-element.js:6:4493)
    at Se._$Ej (reactive-element.js:6:4401)

Steps to reproduce

  1. Use a Chrome-based browser.
  2. Try to create a new Video clip for an episode.
  3. Click on the timeline-sliders to try to move the start or end time.
  4. See the above errors.
  5. The sliders do not move and you cannot change the times for the video clip.

Expected behavior

On Firefox, it does appear to work (at least in one test). The sliders moved and you can select any time-range you want without any errors.

Actual behavior

Errors are shown in the browser console and the timeline end-point sliders do not change at all.

Relevant logs and/or screenshots

reactive-element.js:6 Uncaught (in promise) RangeError: Invalid time value
    at Date.toISOString (<anonymous>)
    at Se.secondsToHHMMSS (audio-clipper.ts:489:37)
    at Se.render (audio-clipper.ts:776:30)
    at Se.update (lit-element.js:6:304)
    at Se.performUpdate (reactive-element.js:6:4846)
    at Se.scheduleUpdate (reactive-element.js:6:4493)
    at Se._$Ej (reactive-element.js:6:4401)

Context

  • Castopod: 1.42
  • OS: Debian 12
  • Browser: Chrome
  • Web server: Caddy

Possible fixes

Not a fix, but the point in the code that throws the error:

audio-clipper.ts

 private secondsToHHMMSS(seconds: number): string {
    return new Date(seconds * 1000).toISOString().substr(11, 8);
  }

The "seconds" in Date(seconds * 1000) is Null and the function where it's set is:

 goTo(event: MouseEvent): void {
    const cursorPosition =
      event.clientX -
      (this._sliderNode.getBoundingClientRect().left +
        document.documentElement.scrollLeft);

    const seconds = this.getSecondsFromPosition(cursorPosition);

    this._audio[0].currentTime = seconds;
  }

this._audio[0].currentTime doesn't seem to work. I suspect the .left property doesn't work?