Slider does not follow the mouse.

[csywweb]

Description

When dragging the progress bar to an unloaded progress while the video is paused, there is an issue where the slider does not follow the mouse.

Reduced test case

https://codesandbox.io/s/suspicious-https-x4burl?file=/src/App.js

Steps to reproduce

1. play video
2. quickly pausing the video.
3. dragging the progress bar to the end when the later part of the video has not been loaded yet.
4. I dragged the progress bar to 31 seconds, but the slider didn't follow, and when I finished dragging, the time indicated by the slider and the current video time were inconsistent.

I would like the slider to follow immediately like in YouTube videos when dragging, and then to load the video.

Errors

What version of Video.js are you using?

8.3.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

chrome 111.0.5563.146

What OS(es) and version(s) does this occur with?

Mac OS 12.3

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[amtins]

@csywweb I was just working on a PR proposal to improve this behavior. However, I have some doubt that it will be accepted. When I finish the unit tests, I will push my proposal.

In the meantime, here is a workaround with class expression syntax to be more concise. Paste the code below before the player initialization:

//CurrentTimeDisplay Component
videojs.registerComponent(
  'CurrentTimeDisplay',
  class extends videojs.getComponent('CurrentTimeDisplay') {
    constructor(player, options) {
      super(player, options);
      this.on(player, 'seeking', (e) => {
        this.updateContent(e);
      });
    }
  }
);

//RemainingTimeDisplay Component
videojs.registerComponent(
  'RemainingTimeDisplay',
  class extends videojs.getComponent('RemainingTimeDisplay') {
    constructor(player, options) {
      super(player, options);
      this.on(player, 'seeking', (e) => {
        this.updateContent(e);
      });
    }
  }
);

//SeekBar Component
videojs.registerComponent(
  'SeekBar',
  class extends videojs.getComponent('SeekBar') {
    handleMouseMove(event, mouseDown = false) {
      super.handleMouseMove(event, mouseDown);
      this.update();
    }
  }
);

// Your player here
// const player = videojs('player'); ...

In the above code, I assume that you are using the CurrentTimeDisplay and RemainingTimeDisplay components. If you are using only one of these components you can simply remove the code overriding the component.

However, if you decide not to use CurrentTimeDisplay or RemainingTimeDisplay, you will have to modify the SeekBar component as follows:

videojs.registerComponent(
  'SeekBar',
  class extends videojs.getComponent('SeekBar') {
    getCurrentTime_() {
      return this.player_.currentTime();
    }

    handleMouseMove(event, mouseDown = false) {
      super.handleMouseMove(event, mouseDown);
      this.update();
    }
  }
);

// Your player here
// const player = videojs('player'); ...

Finally, only for documentation purposes, in this workaround, it is not possible to modify only the TimeDisplay component and that the modifications are reflected on the components extending it (CurrentTimeDisplay, RemainingTimeDisplay):

//TimeDisplay Component
videojs.registerComponent(
  'TimeDisplay',
  class extends videojs.getComponent('TimeDisplay') {
    constructor(player, options) {
      super(player, options);

      this.on(player, ['seeking','timeupdate', 'ended'], (e) => this.updateContent(e));
      this.updateTextNode_();
    }
  }
);

//SeekBar Component
videojs.registerComponent(
  'SeekBar',
  class extends videojs.getComponent('SeekBar') {
    getCurrentTime_() {
      return this.player_.currentTime();
    }

    handleMouseMove(event, mouseDown = false) {
      super.handleMouseMove(event, mouseDown);
      this.update();
    }
  }
);

// Your player here
// const player = videojs('player'); ...

[csywweb]

I have resolved the issue after using this code, thank you. @amtins

[amtins]

@csywweb you're welcome. I also created a PR to add this feature, let's see if it will be accepted.