[idea], [proofofconcept] big area for clicking/touching seekbar

kocoten1992 commented 6 years ago

Description

Our seekbar click area is a bit small (3px normal, 5px on hover), user got a hard time try to click on seekbar.

YT got the same thing, but they add a hidden layer ytp-progress-bar-padding that got height of 22px when hover (16px normal), user don't miss click when there is a layer like that.

ytpadding

Here is my hack try to achieve that:

var SeekBar = videojs.getComponent('SeekBar')

class MySeekBar extends SeekBar {
  createEl() {

    var seekBarEl = super.createEl('div', {
      className: 'vjs-progress-holder'
    }, {
      'aria-label': this.localize('Progress Bar')
    });

    var paddingEl = document.createElement('div')

    paddingEl.className += ' vjs-progress-padding' // named after yt

    seekBarEl.appendChild(paddingEl)

    return seekBarEl
  }
}

videojs.registerComponent('SeekBar', MySeekBar)

.vjs-progress-padding {
  height: 22px;
}

Any thought ?

gkatsev commented 6 years ago

Yeah, it's something we should add. Adding a padding like this could potentially create issues with styling. I've previously added scrubbing support for this in https://github.com/videojs/video.js/pull/4004 but at that time I guess I forgot to add click-to-seek support and haven't had a change to come back and implement that.

stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

videojs / video.js

[idea], [proofofconcept] big area for clicking/touching seekbar #4710

Description