Refine custom progress bar for smooth scrubbing in all platforms

[Dananji]

Description

A considerable amount of change was made to the custom progress bar component as it was re-architected to use Video.js' SeekBar component instead of building the HTML as part of #618. With this work the scrubbing in iOS is not as smooth as it is in the native VideoJS SeekBar component (the expected outcome). The hierarchy of component structure for ProgressControl in Video.js is as follows;

├─┬ ProgressControl
│ │ └─┬ SeekBar
│ │   ├── LoadProgressBar
│ │   ├── MouseTimeDisplay
│ │   └── PlayProgressBar

And in the current implementation we are using SeekBar and its children, not ProgressControl. I tried attaching the custom seek bar (the implementation merged in #635) to ProgressControl instead of exporting as it is with the following code;

const ProgressControl = videojs.getComponent('ProgressControl');
class VideoJSProgress extends ProgressControl {
  constructor(player, options) {
    super(player, options);
    this.addClass('vjs-custom-progress-bar');
    this.removeChild('SeekBar');
    this.addChild('CustomSeekBar');
  }
}

videojs.registerComponent('CustomSeekBar', CustomSeekBar);
videojs.registerComponent('VideoJSProgress', VideoJSProgress);

But the child component in MouseTimeDisplay was facing issues with finding the custom seek bar fed into ProgressControl. To solve this we can try customizing the children components that are having issues?

Done Looks Like

• [ ] Attach custom seek bar to ProgressControl
• [ ] Fix issues with the children components with the approach
• [ ] Test scrubbing, seeking, custom start, and time updates when using structured navigation (with and without switching canvases) especially as these changes would be mostly affecting these functionalities
• [ ] Test in all supported browser and platform combinations (especially iOS)

[joncameron]

Some is changed in recent refactor work but not all. Mobile (iOS) scrubbing is still off and there's some more work to build on the native VideoJS component to update the behavior.

[elynema]

Dananji noticed some jumping in seeking in Browserstack, but it was smoother on her device. Android is smoother than iOS.

[elynema]

I'm going to go ahead and close this as we've had lots of testing of scrubbing across all platforms and opened multiple other tickets.