Video.js: Show menus onclick not on hover

[edwinbradford]

Hi,

I'm trying to change menus to show and hide on click events and not on hover events so they behave the same way as YouTube buttons. I'm starting with the captions button. I commented out the hover class in the css and found the click functionality already existed.

However the menu was being hidden when the mouse was moved outside the button area. I found the Javascript responsible for this behaviour in src/js/menu/menu-button.js and commented out the line attaching the unlockShowing function.

Is this the right approach or will it cause problems elsewhere? It seems to be working.

Thanks.

   /**
   * When you click the button it adds focus, which
   * will show the menu indefinitely.
   * So we'll remove focus when the mouse leaves the button.
   * Focus is needed for tab navigation.
   * Allow sub components to stack CSS class names
   *
   * @method handleClick
   */
  handleClick() {
    this.one('mouseout', Fn.bind(this, function(){
      // I disabled the next line...
      // this.menu.unlockShowing();
      this.el_.blur();
    }));
    if (this.buttonPressed_){
      this.unpressButton();
    } else {
      this.pressButton();
    }
  }

[gkatsev]

Hi @edwinbradford, it does sound like you're on the right track with removing that unlockShowing line, also, you'll probably want to remove that mouseout listener altogether since otherwise you'll end up losing the focus of the button/menu when you mouse out which could be confusing.

Closing this issue because it's unlikely to require a change to videojs itself. However, we can still continue the discussion here.

[edwinbradford]

Thanks @gkatsev. Yes please, close the issue and thanks for the advice. I'm really enjoying working with VideoJS.

[hauk0101]

@edwinbradford In fact this problem can be solved by CSS ，you can set like this:
.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu { display: none; }

[edwinbradford]

@hauk0101 I created a quick JSFiddle to try out your suggestion and it looks like you're correct. I made a few temporary minor adjustments to the CSS in that demo so the language menus have more space but other than that it's a vanilla copy of VideoJS---version 7.0.3---with your CSS override.

I'm very impressed, I wasn't able to find a solution myself, I'll update my CSS theme with your suggestion. Now I can edit just the CSS and use the JavaScript files from the main VideoJS repo.

Thanks for the solution.

[VasiliyRusin]

@gkatsev, Are you shure that change source code is the best idea? I suppose it should have API for this. Some kind of init parameter for all menu buttons.

[otoinsa]

Would be nice if the MenuButton component had the handler for "mouseenter" event in a class method, so we could override it (just like there is one for "mouseleave")!