[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
- Use a Chrome-based browser.
- Try to create a new Video clip for an episode.
- Click on the timeline-sliders to try to move the start or end time.
- See the above errors.
- 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?