Video.js: How to add text to a button?

[deafkittten]

Description

I tried to add a button for hours now through the functions within videojs and I feel so stupid. The documentation is lacking, the tips I found is for the old version and the example in the changelog don't tell me everything I need.

I'm using the code from the example.

const VjsButton = videojs.getComponent('Button');
// internal to video.js you would use 'import Button from 'button.js'

class MyNewButton extends VjsButton {

  // An 'init()' method CANNOT be used for constructor logic in ES6 classes!
  constructor(player, options) {
    super(player, options);
  } // notice, no comma

  otherFunc() {
    // do something
  }
}

Then I add it to the control bar with myPlayer.controlbar.addchild(). It appears but is empty. I tried a lot of stuff and couldn't get text into it at all. It either complains that addChild is deprecated or that I should use Clickable Component instead. The button is there and working, I just want to add some text to it.

[hartman]

Should be something like this (ES6 style):

class MyNewButton extends VjsButton {
  constructor: function(player, options){
    super(player, options);
    this.controlText('ButtonLabel');
  }
  buildCSSClass() {
    return `vjs-my-control ${super.buildCSSClass()}`;
  }
}
VjsButton.registerComponent('MyNewButton', MyNewButton);

let myButton = new MyNewButton();
myPlayer.controlbar.addChild( myButton )

And you have to add an icon to your control using CSS and your added vjs-my-control class.

And I agree that the documentation is lacking in this regard, or rather it's confusing. There is es6 vs es5 JS, old v4 modules using private properties vs v5 with public accessors etc etc.. and little of it takes you through the entire flow of how to add UI components. There should be an issue on improving this documentation somewhere... can't find it now.

[deafkittten]

Hmm, ok. I added that before but I get "Cannot read property 'language' of undefined".

Probably because I need to add an icon? I didn't understand how I go about that. I just wanted some text into the button.

[hartman]

that seems like a bug in the localization of video.js (it assumes that a control always has a player object, but it doesn't in the constructor (or maybe you are not allowed to use setControlText(), before your button is added to a player... ).

try this.controlText_ = "ButtonLabel" instead to use the private property

[deafkittten]

Well, it's there in the object but not showing anything.

I mean, how could this become so complex?
Before it was addChild('span', { text: 'foo' });

I already made the button to appear where I want and when I want and it listens to event. But I can't get text on it. I even have an external button that works but I want to be able to build with videojs components. I can't wrap my head around this. Tried following source and find what options/parameters/properties/attributes you should push around but nada. I feel so discouraged.

[hartman]

Oh, you don't want an ICON, but text INSIDE the button ? Sorry that wasn't clear to me.
It seems that there are no built-in methodologies for this in v5. Not sure, actual video.js core contributors will know..

You can look at what the time controls do.. I guess that comes closest to what you want to do: https://github.com/videojs/video.js/tree/master/src/js/control-bar/time-controls

[deafkittten]

Oh, but how about ClickableComponent, it renders all the same but doesn't display text either. I can see the child that have the correct outerHTML in the object but no children is visible?

Would that also not work?

[misteroneill]

@deafkittten First off, sorry about the lacking documentation. It's a problem we are aware of and we are working on it this quarter!

As to your question, the video.js Button component (and ClickableComponent) assumes it will contain an icon, which is defined in CSS. This is something we'll think about adding as an option because this question has come up before.

For the time being, I would suggest using the Button component and overriding the CSS that assumes it will contain an icon (see _button.scss, _control.scss, and _utilties.scss - or the generated styles in dev tools).

Hope this helps!

[deafkittten]

Ok. I solved it with a createEl in the class creation. It's not pretty code wise, but it works.

Thanks for all the help. Learned a lot about video.js sifting through the code back and forth.

[OwenEdwards]

@deafkittten you might also look at the MenuItem Component, specifically its createEl method, since that is a button which has text instead of an icon. The part in the constructor about adding a role attribute is not relevant, though, so you shouldn't extend that component, just use it as a reference. Hope that helps!

[misteroneill]

Oh, good call, @OwenEdwards - didn't even think about that one!

[FreakTheMighty]

I created a text button like so:

const VjsButton = videojs.getComponent('Button');

export default class MyButton extends VjsButton {

  constructor(player, options) {
    super(player, options);
  }

  createEl(tag = 'button', props = {}, attributes = {}) {
    let el = super.createEl(tag, props, attributes);
    el.innerHTML = 'My Text'
    return el;
  }


}

VjsButton.registerComponent('MyButton', MyButton);

...

// Passing player is required to deal with with the [language bug](https://github.com/videojs/video.js/issues/3691#issuecomment-254470197)
player.controlBar.addChild( new ViewSwitchButton(this.player) );

[tonykor]

@FreakTheMighty your code is not working

Uncaught SyntaxError: 'super' keyword unexpected here

Also where is the ViewSwitchButton class definition?