Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine custom progress bar for smooth scrubbing in all platforms #637

Closed
4 tasks
Dananji opened this issue Sep 13, 2024 · 3 comments
Closed
4 tasks

Refine custom progress bar for smooth scrubbing in all platforms #637

Dananji opened this issue Sep 13, 2024 · 3 comments
Assignees
Labels
enhancement New feature or request ios ios related issue player Changes/fixes in player component release Features and bug fixes to be completed for next stable release

Comments

@Dananji
Copy link
Collaborator

Dananji commented Sep 13, 2024

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)
@Dananji Dananji added enhancement New feature or request ios ios related issue player Changes/fixes in player component release Features and bug fixes to be completed for next stable release labels Sep 13, 2024
@joncameron
Copy link
Contributor

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
Copy link

elynema commented Oct 18, 2024

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

@elynema elynema closed this as completed Nov 7, 2024
@elynema
Copy link

elynema commented Nov 7, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ios ios related issue player Changes/fixes in player component release Features and bug fixes to be completed for next stable release
Projects
None yet
Development

No branches or pull requests

3 participants